본문 바로가기
데브파이브
보라·분홍 조명이 비치는 게이밍 책상의 모니터에 VILLAINS 캐릭터와 메인 화면이 표시되어 있다.
THE PLANET HAS GONE TO HELL.
VIEW MORE
We use cookies to improve your experience. By continuing to browse the site you are agreeing to our Privacy Policy.
REJECT ALL
ACCEPT ALL.
VILLAINS

본 프로젝트는 스코플리에서 제작한 VILLAINS 게임의 요청에 따라 게임 홍보 및 사용자 유입을 위한 랜딩 페이지를 CMS부터 웹 페이지까지 전체적으로 개발한 종합 웹 개발 프로젝트입니다. 게임 운영진이 직접 콘텐츠를 관리할 수 있도록 CMS 시스템을 구축하여 웹페이지를 간단하게 수정할 수 있는 환경을 제공했으며, 모든 변경사항이 실시간으로 반영되는 동적 관리 시스템을 구현했습니다. 또한 데브파이브의 자체 기술력인 다중로그인 방지 시스템과 검증된 기술 시스템을 적용하여 한층 더 견고한 웹 인프라를 구성했으며, 서버리스 인프라 아키텍처를 도입하여 운영 비용을 대폭 절감할 수 있는 효율적인 시스템을 완성했습니다.

제작 기간2022. 08 - 2022. 11
고객사Plain
사용 기술React.js, TypeScript, Vite
서비스
미리보기
VILLAINS 웹사이트 전체 미리보기. 상단 메뉴: VILLAINS
GAME INFO
PEOPLE
PRE-REGISTRATION
E-SPORTS
SHOP.
VILLAINS GAME STORY: Villains Championship, a real time Battle Royale featuring anti-Heroes on powerful robots.
VIEW MORE.
VILLAINS PREDICTION EVENT
VIEW MORE.
VILLAINS MILESTONE. 01 COMMUNITY: 프로젝트 출시를 위한 커뮤니티 구축과 기대감 조성. Discord Community
Twitter Account
White paper
Medium articles about tokenomics and phases. 02 CAPITAL CITY & JEWELS: 프로젝트 출시를 위한 커뮤니티 구축과 기대감 조성. Discord Community
Twitter Account
White paper
Medium articles about tokenomics and phases. 화면에 일부 보이는 설명: former glory.
Discord Community
Twitter Account
White paper
Medium articles about tokenomics and phases. 04 KINGDOMS: 시간이 흐르면서 세계 지도의 전쟁 안개가 점차 걷히고 산, 바다, 사막, 왕국 부지가 드러난다. Discord Community
Twitter Account
White paper
Medium articles about tokenomics and phases.
쿠키 안내: We use cookies to improve your experience. By continuing to browse the site you are agreeing to our Privacy Policy.
REJECT ALL
ACCEPT ALL.
화면에 마우스를 올려보세요!
고객 요구사항
& 프로젝트 방향
클라이언트의 인터뷰 및 협의를 통해 프로젝트의 핵심 요구사항을 도출하였으며, 인사이트를 바탕으로 사용자 경험과 브랜드 관점에서 개선이 필요한 5가지를 기반으로 설계하였습니다.
1.
콘텐츠 수정이 실시간 반영되는 CMS 연동 게임 랜딩페이지 구축
2.
텍스트·이미지·섹션을 자유롭게 편집하는 비개발자 친화적 관리 환경 구현
3.
데브파이브 자체 기술로 다중 로그인 방지·비인가 접근 차단 보안 적용
4.
AWS 서버리스 구조로 비용 절감과 트래픽 대응 확장성 제공
5.
게임 세계관을 살린 몰입형 반응형 UI/UX로 브랜드 경험 강화
타이포 그래피
& 컬러 시스템
사용자의 시각적 편의를 고려한 명도 대비와 체계적인 컬러 시스템을 구축하였으며, 확장이 용이한 타이포그래피와 공통 컴포넌트를 설계하여 브랜드의 일관된 경험을 구현하였습니다.VILLAINS 타이포그래피 시스템의 라이트·다크 버전.
서체: Hyouzi Display, Inter. 굵기: ExtraBold, Bold, SemiBold, Medium, Regular.
크기: h1 70px, h3 54px, h5 24px, Body 16px.
예시 문구: VILLAINS GAME STORY
WHAT IS VILLAINS.VILLAINS 컬러 시스템의 라이트·다크 버전.
Primary #E43B32, GrayBg #DCDCDC, Secondary #F9BA2D.
그레이스케일: #FFFFFF, #9D9D9D, #020202.VILLAINS 타이포그래피 시스템의 라이트·다크 버전.
서체: Hyouzi Display, Inter. 굵기: ExtraBold, Bold, SemiBold, Medium, Regular.
크기: h1 70px, h3 54px, h5 24px, Body 16px.
예시 문구: VILLAINS GAME STORY
WHAT IS VILLAINS.VILLAINS 컬러 시스템의 라이트·다크 버전.
Primary #E43B32, GrayBg #DCDCDC, Secondary #F9BA2D.
그레이스케일: #FFFFFF, #9D9D9D, #020202.
타이포 그래피
& 컬러 시스템
사용자의 시각적 편의를 고려한 명도 대비와 체계적인 컬러 시스템을 구축하였으며, 확장이 용이한 타이포그래피와 공통 컴포넌트를 설계하여 브랜드의 일관된 경험을 구현하였습니다.VILLAINS 타이포그래피 시스템의 라이트·다크 버전.
서체: Hyouzi Display, Inter. 굵기: ExtraBold, Bold, SemiBold, Medium, Regular.
크기: h1 70px, h3 54px, h5 24px, Body 16px.
예시 문구: VILLAINS GAME STORY
WHAT IS VILLAINS.VILLAINS 컬러 시스템의 라이트·다크 버전.
Primary #E43B32, GrayBg #DCDCDC, Secondary #F9BA2D.
그레이스케일: #FFFFFF, #9D9D9D, #020202.VILLAINS 타이포그래피 시스템의 라이트·다크 버전.
서체: Hyouzi Display, Inter. 굵기: ExtraBold, Bold, SemiBold, Medium, Regular.
크기: h1 70px, h3 54px, h5 24px, Body 16px.
예시 문구: VILLAINS GAME STORY
WHAT IS VILLAINS.VILLAINS 컬러 시스템의 라이트·다크 버전.
Primary #E43B32, GrayBg #DCDCDC, Secondary #F9BA2D.
그레이스케일: #FFFFFF, #9D9D9D, #020202.

비즈니스의 다음 단계퀀텀 점프마스터키,

아이디어만 있어도 됩니다.
첫 상담부터 출시까지, 데브파이브가 함께합니다.
빠른 문의하기