logologo
#반응형
#UI/UX
#WEB
#인터렉션 애니메이션
#관리자페이지
#Vite
#React.js
VILLAINS
Plain
portfolio-top-image/file/2025_05_12/1747035799657_VILLAINS-1.webp
제작 연도2022
제작 기간2개월
사용 기술React.js, TypeScript, Vite
ABOUT

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

고객 요구사항

1️⃣게임 세계관 표현을 위한 고품질 랜딩페이지 제작 요구 VILLAINS 게임의 독특한 세계관과 분위기를 효과적으로 전달할 수 있는 고품질 랜딩페이지 제작이 요청되었습니다. 게임의 핵심 콘셉트와 스토리, 캐릭터들의 매력을 시각적으로 임팩트 있게 표현하여 방문자들이 게임에 대한 흥미와 관심을 즉시 느낄 수 있는 페이지 구성이 필요했으며, 게임의 장르적 특성과 타겟 사용자층을 고려한 디자인 요소들이 조화롭게 배치되어야 했습니다. 또한 다양한 디바이스에서 자연스럽게 표시될 수 있도록 반응형 구조로 개발되어야 했으며, 모바일, 태블릿, 데스크톱 환경에서 모두 일관된 사용자 경험을 제공하면서도 각 디바이스의 특성에 맞게 최적화된 레이아웃과 인터랙션이 구현되어야 했습니다. 2️⃣비개발자 친화적 콘텐츠 관리 시스템 도입 요구 비개발자도 쉽게 콘텐츠를 수정하고 관리할 수 있는 CMS(Content Management System) 도입이 요청되었습니다. 게임 출시 과정에서 빈번하게 발생하는 콘텐츠 업데이트와 정보 수정 작업을 개발자의 도움 없이도 신속하게 처리할 수 있어야 했으며, 직관적인 사용자 인터페이스를 통해 텍스트, 이미지, 동영상 등 다양한 형태의 콘텐츠를 손쉽게 편집할 수 있는 환경이 필요했습니다. 실시간으로 웹페이지 내용을 수정하고 즉시 반영할 수 있는 기능이 요구되었으며, 수정 사항이 웹사이트에 바로 적용되어 방문자들이 최신 정보를 확인할 수 있도록 하는 것이 중요했습니다. 3️⃣안정적 서비스 운영을 위한 보안성과 효율성을 갖춘 웹 인프라 구축 요구 게임 출시라는 중요한 시점에서 안정적인 서비스 운영을 보장할 수 있는 보안성과 효율성을 갖춘 웹 인프라 구축이 요청되었습니다. 대량의 트래픽이 몰릴 수 있는 게임 출시 상황을 대비하여 서버 안정성과 확장성을 확보해야 했으며, 동시에 해킹이나 DDoS 공격 등 다양한 보안 위협으로부터 웹사이트를 보호할 수 있는 강력한 보안 시스템이 필요했습니다. 또한 운영 비용의 효율화를 통해 예산을 최적화하면서도 필요한 성능과 보안 수준을 유지할 수 있는 인프라 설계가 요구되었으며, 장기적으로 지속 가능한 운영 모델을 구축하는 것이 핵심 목표였습니다.

주요 개발 사항

💡실시간 콘텐츠 관리를 위한 CMS 연동 웹페이지 개발 완료 콘텐츠 수정 시 실시간으로 반영되는 CMS 구조 개발을 성공적으로 완료했습니다. 텍스트, 이미지, 섹션 등 주요 콘텐츠를 자유롭게 편집할 수 있는 기능을 구현하여 비개발자도 손쉽게 웹페이지 내용을 관리할 수 있는 환경을 조성했으며, 수정된 내용이 즉시 웹사이트에 반영되어 최신 정보를 실시간으로 제공할 수 있는 시스템을 구축했습니다. CMS 연동을 통해 게임 출시 과정에서 빈번하게 발생하는 콘텐츠 업데이트 작업을 효율적으로 처리할 수 있게 되었으며, 개발자의 개입 없이도 신속한 콘텐츠 관리가 가능한 자율적인 운영 체계를 완성했습니다. 💡데브파이브 다중 로그인 방지 및 보안 시스템 적용을 통한 서비스 안정성 확보 내부 기술을 활용한 계정 보안 및 비인가 접근 차단 기능을 성공적으로 적용했습니다. 데브파이브의 자체 보안 기술을 활용하여 다중 로그인을 방지하고 계정 보안을 강화했으며, 비인가된 사용자의 접근을 원천적으로 차단할 수 있는 시스템을 구축했습니다. 사용자 데이터 보호를 위한 다층 보안 체계를 적용하여 개인정보와 게임 관련 중요 데이터의 안전성을 확보했으며, 서비스 전반의 안정성을 높여 사용자들이 안심하고 이용할 수 있는 신뢰성 있는 플랫폼을 완성했습니다. 💡AWS 기반 서버리스 인프라 구성을 통한 비용 최적화 달성 AWS 기반 서버리스 구조 도입을 통해 운영 비용 절감과 확장성 높은 구조 설계를 동시에 달성했습니다. 서버리스 아키텍처를 적용하여 서버 관리 비용을 대폭 절감했으며, 트래픽 변동에 따라 자동으로 확장되는 유연한 인프라를 구축했습니다. 게임 출시 시점에 예상되는 대량 트래픽에도 안정적으로 대응할 수 있는 확장성을 확보했으며, 사용량에 따른 과금 체계를 통해 비용 효율성을 극대화하여 장기적으로 지속 가능한 운영 모델을 완성했습니다. 💡게임 세계관을 반영한 반응형 UI/UX 구현 완료 데스크톱, 태블릿, 모바일 환경에서 최적화된 디자인을 제공하는 반응형 UI/UX 구현을 완료했습니다. 게임의 세계관과 톤앤매너를 살린 몰입형 인터페이스를 구현하여 VILLAINS 게임의 독특한 분위기와 매력을 효과적으로 전달할 수 있는 시각적 경험을 제공했습니다. 다양한 디바이스에서 일관된 사용자 경험을 보장하면서도 각 기기의 특성에 맞게 최적화된 레이아웃과 인터랙션을 적용하여 모든 사용자가 게임의 세계관에 자연스럽게 몰입할 수 있는 환경을 조성했습니다.

OUTPUT
portfolio-image/file/2024_11_27/1732691827525_1728971117009_빌런즈_1.webp
portfolio-image/file/2024_11_27/1732691827526_1728971117009_빌런즈_2.webp
portfolio-image/file/2024_11_27/1732691827526_1728971117009_빌런즈_3.webp
wave-imagewave-image
Contact US
프로젝트 시작을 고민중 이신가요?
데브파이브와 함께 당신의 프로젝트를 완벽하게 시작해보세요.
/images/main/contact_us/guide-icon.webp
가이드 라인처음 프로젝트를 준비 중이신가요? 데브파이브의 가이드를 참고해 개발 프로세스부터 기술 스택까지 한눈에 파악해보세요.
/images/main/contact_us/inquiry-icon.webp
견적 및 문의빠르고 쉬운 견적으로 데브파이브와 함께 프로젝트를 시작해보세요.