Project Info
- Project
- 검은사막 공식 홈페이지 리뉴얼 콘셉트
- Role
- 기획, UX 분석, 정보 구조 설계, UI 디자인, HTML/CSS/JavaScript 퍼블리싱
- Direction
- 게임 소개 → 클래스 탐색 → 콘텐츠 경험 → 다운로드로 이어지는 자연스러운 동선
Tools
- Figma
- Photoshop
- HTML
- CSS
- JavaScript
- GSAP
- AI Image Tool
◆ Game Website Renewal
광활한 세계관과 모험의 설렘을 디지털 경험으로
Black Desert Renewal Case Study
게임의 첫인상은 플레이 버튼을 누르기 전부터 시작된다고 생각했습니다. 검은사막 리뉴얼은 방대한 세계관과 자유도 높은 MMORPG의 매력을 신규 유저도 쉽게 이해하고, 기존 유저도 빠르게 탐색할 수 있는 공식 사이트로 다시 정리한 프로젝트입니다.
01 · Background
콘텐츠는 많았지만,
콘텐츠는 많았지만,
처음 들어온 사용자가 붙잡을 장면이 부족했습니다.
MMORPG 공식 홈페이지는 이벤트, 공지, 업데이트, 클래스, 다운로드처럼 보여줘야 할 정보가 많습니다. 문제는 그 정보가 한꺼번에 노출될 때 신규 유저가 무엇부터 봐야 할지 놓치기 쉽다는 점이었습니다.
검은사막은 세계관과 비주얼이 강한 게임인 만큼, 정보를 나열하기 전에 먼저 “이 세계에 들어가 보고 싶다”는 감정을 만들어야 한다고 봤습니다.
Problem Definition
01
정보가 한꺼번에 몰려 보임
이벤트, 공지, 배너가 동시에 노출되면서 사용자가 핵심 콘텐츠를 빠르게 파악하기 어려웠습니다.
02
신규 유저에게 높은 진입 장벽
게임의 특징을 경험하기 전에 복잡한 정보 구조를 먼저 만나면서 이탈 가능성이 생겼습니다.
03
세계관의 매력이 충분히 드러나지 않음
검은사막 특유의 광활한 풍경과 클래스의 분위기가 정보 영역에 밀려 약하게 느껴졌습니다.
04
콘텐츠 우선순위가 모호함
신규 유저와 기존 유저가 원하는 정보가 섞여 있어 탐색 흐름을 다시 정리할 필요가 있었습니다.
02 · Goal
플레이하기 전부터
플레이하기 전부터
모험을 시작한 듯한 흐름 만들기
- 세계관과 감성이 먼저 보이게 대형 비주얼과 어두운 톤, 금빛 포인트를 사용해 검은사막의 무드를 첫 화면에서 바로 느끼도록 구성했습니다.
- 신규 유저가 길을 잃지 않게 게임 소개, 클래스, 콘텐츠, 다운로드로 이어지는 순서를 잡아 처음 방문한 사용자도 자연스럽게 따라올 수 있게 했습니다.
- 기존 유저는 필요한 정보를 빠르게 이벤트와 공지, 업데이트성 정보는 우선순위를 다시 나눠 탐색 피로를 줄이는 방향으로 정리했습니다.
- 스크롤 자체가 탐험처럼 느껴지게 GSAP 기반의 등장 모션, 배경 패럴랙스, 클래스 카드 인터랙션으로 페이지 이동에 리듬을 줬습니다.
03 · Insight
공식 사이트도
공식 사이트도
게임 경험의 일부입니다.
작업하면서 가장 크게 잡은 기준은 하나였습니다.
가장 직관적인 전투 스타일을 앞세워 신규 유저가 쉽게 이해할 수 있는 진입 클래스로 구성했습니다.
거리감과 속도감을 살려 검은사막 전투의 넓은 선택지를 보여주는 카드로 배치했습니다.
어둠과 마법의 힘을 다루는 클래스로, 게임 특유의 신비로운 세계관을 강하게 표현했습니다.
부드러운 움직임 속에 강렬한 파괴력을 담아 검은사막 전투의 다양성을 보여주는 클래스입니다.
어둠의 기운을 검에 담아 빠르고 날카로운 전투를 펼치는 고난도 클래스로 배치했습니다.
캐릭터의 분위기와 액션 이미지를 함께 보여줘 클래스 선택의 재미를 강조했습니다.
강인한 체력과 묵직한 전투로 최전선을 지키는 클래스로, 웅장한 게임 분위기를 담았습니다.
빠른 이동과 기습 전투로 상대를 제압하는 클래스로, 사막 지역 특유의 분위기를 살렸습니다.
사용자는 정보를 보러 오지만, 결국 마음이 움직여야 플레이를 시작합니다.
그래서 화면을 공지와 배너의 묶음으로 보지 않고, 게임 세계로 들어가는 첫 장면으로 다시 바라봤습니다. 정보는 줄이지 않되, 처음 만나는 순서를 바꿔 설렘이 먼저 오도록 했습니다.
01
시네마틱 히어로
대형 비주얼과 어두운 그라데이션, 금빛 액센트로 첫 화면에서 게임의 분위기를 강하게 전달했습니다.
02
신규 유저 동선 최적화
게임 소개에서 클래스 탐색, 콘텐츠 경험, 다운로드까지 이어지는 흐름을 하나의 이야기처럼 정리했습니다.
03
클래스 경험 강화
클래스별 전투 스타일과 이미지를 카드로 보여줘 사용자가 자신에게 맞는 캐릭터를 빠르게 상상할 수 있게 했습니다.
04
정보 구조 재정비
이벤트, 공지, 가이드 콘텐츠를 같은 무게로 나열하지 않고, 목적에 따라 노출 순서를 다시 나눴습니다.
04 · Design System
웅장함은 살리고,
웅장함은 살리고,
사용성은 흐트러지지 않게.
게임 사이트는 화려할수록 읽는 순서가 무너지기 쉽습니다. 그래서 컬러와 타입은 강하게 가져가되, 카드와 리스트, CTA 같은 기본 컴포넌트는 반복 가능한 규칙으로 정리했습니다.
Design Principle
Color
- Midnight Black
- Desert Gold
- Warm Ivory
- Crimson Red
Typography
- Pretendard본문과 정보 UI
- Cinzel타이틀과 장식적 문장
Component
- 시네마틱 히어로 배너
- 클래스 탐색 카드
- 이벤트 카드와 콘텐츠 소개 모듈
- 다운로드 CTA, 뉴스 및 공지 모듈
Development
- HTML/CSS 기반 반응형 웹 구현
- JavaScript 인터랙션 설계
- GSAP 스크롤 애니메이션 적용
- 비주얼 중심 레이아웃과 사용자 동선 구성
05 · Result
정보 중심의 홈페이지를
정보 중심의 홈페이지를
세계관 중심의 경험으로 다시 구성했습니다.
- 신규 유저 중심의 정보 구조 개선
- 시네마틱 기반 몰입형 첫 화면 설계
- 클래스 탐색 경험 강화
- 반응형 게임 웹사이트 구현
- GSAP 기반 인터랙션 적용 경험
06 · Review
좋은 게임 경험은
좋은 게임 경험은
첫 화면을
마주하는 순간부터
“대규모 콘텐츠를 사용자 중심으로 다시 해석하고, 브랜드의 세계관을 웹 경험으로 확장해본 프로젝트였습니다.”
이번 작업을 하면서 게임 웹사이트는 단순한 정보 전달 채널이 아니라, 플레이어의 기대감과 감정을 끌어올리는 첫 경험이라는 점을 많이 느꼈습니다.
검은사막처럼 콘텐츠가 큰 서비스는 “무엇을 더 넣을까”보다 “무엇을 먼저 보게 할까”가 더 중요했습니다. 방대한 정보를 줄이는 대신 순서를 다시 잡고, 세계관을 먼저 경험하게 만드는 쪽으로 방향을 잡았습니다.