3-1. 인게임 HUD (미니멀)
설계 철학: 화면 점유 최소화. 핵심 정보만 아이콘+숫자로 표시. 글래스 배경은 미니멀 필 (blur 4px, α0.10).
HUD 요소 상세
| 요소 | 위치 | 크기 | 스타일 | 설명 |
|---|
| HP 바 | 좌상 (32, 32) | 240×12px | 라운드 (6px), #DA2424→암적 그라디언트, 네온 글로우 | 체력 비율. 저체력(<25%) 시 펄스+비네팅 (아래 참조) |
| 영혼 아이콘 | 좌상 (32, 56) | 48×48px | 글래스 원형 + 영혼 고유색 네온 테두리, 쿨다운 시 시계방향 와이프 | 현재 장착 영혼 초상화 |
| 공명 게이지 | 영혼 아이콘 외곽 | 56×56px | 영혼 고유색 네온 프로그레스 링 | 100% 시 고유색 강렬한 펄스 |
| XP 바 | 상단 전체 (0, 0) | 1920×6px | 골드 그라디언트 (#ECAB11), 레벨업 시 전체 플래시 | 얇고 넓게 — 극단 미니멀 |
| 레벨 표시 | 우상 (1840, 12) | 가변 | Body 크기, #C5CDDB | "Lv.12" |
| 타이머 | 우상 (1800, 36) | 가변 | Micro 크기, 미니멀 디지털 타이머 | "14:32" |
| 저주 아이콘 | 우상 (1760, 36) | 36×36px ×3 | 글래스 원형, #DA2424 네온 | 활성 저주 표시 (최대 3개) |
| 무기 슬롯 | 좌하 (32, 880) | 56×56px ×4 세로 | 글래스 카드 (#180D2F α0.6), 라운드 12px, 레벨 뱃지 | 무기 아이콘 + "Lv.3" |
| 음양 게이지 | 하단 중앙 (860, 1040) | 200×16px | 라운드 (8px), 좌=시안(#5EE9E9) 우=오렌지(#EF6E10), 중앙 마커 | 극양/극음 시 네온 테두리 |
| 보스 HP 바 | 하단 중앙 (460, 1010) | 1000×14px | 라운드 (7px), #DA2424→암적 그라디언트, 네온 글로우 | 보스 등장 시만 표시 |
| 보스명 | HP 바 상단 중앙 | H3 24px Bold | #DA2424 네온 글로우 | 보스 등장 시 표시 |
| 보스 HP 수치 | HP 바 우측 | Caption 14px | #C5CDDB | "45%" |
| 보스 페이즈 마커 | HP 바 위 | 8px 원형 ×3 | 골드(#ECAB11) 점등 / 회색 미점등 | 현재 페이즈 표시 |
| 킬 카운트 | 우하 (1840, 1040) | 가변 | Micro, 해골 아이콘 | "347" |
| 소환수 버튼 | 우하 (1840, 950) | 64×64px | 글래스 원형, 쿨다운 와이프 | 수동 발동 |
| 엽전 표시 | 우하 (1840, 1000) | 가변 | Micro, 엽전 아이콘 | "1,250" |
음양 게이지 상세
음(Cyan) ◄──────●──────► 양(Orange)
[#5EE9E9████░░░│░░░████#EF6E10]
↑
중앙 마커 (조화 시 골드 글로우)
| 상태 | 시각 표현 |
|---|
| 조화 (±10%) | 중앙 마커 #ECAB11 네온 글로우 |
| 양 기운 | 우측 오렌지(#EF6E10) 영역 확장, 미세 오렌지 글로우 |
| 음 기운 | 좌측 시안(#5EE9E9) 영역 확장, 미세 시안 글로우 |
| 극양 (70%+) | 테두리 #F94E6D 네온 펄스 + 화면 가장자리 웜 비네팅 |
| 극음 (70%+) | 테두리 #1831A7 네온 펄스 + 화면 가장자리 쿨 비네팅 |
HP 저체력 펄스 + 비네팅
v4.0 신규. 트렌드 근거: 장르 표준 위험 피드백. VS, Brotato, HoT 모두 저체력 시 시각 경고.
| 조건 | 효과 |
|---|
HP < 25% | HP 바 #DA2424 펄스 (0.5초 주기, 밝기 1.0↔0.6) + 화면 가장자리 #DA2424 비네팅 (α0.3, 펄스 동기화) |
HP < 10% | 펄스 가속 (0.3초 주기) + 비네팅 강화 (α0.5) |
화면 가장자리 적 방향 표시 (미니맵 대안)
v4.0 신규. 트렌드 근거: 미니맵 대안. 15분 스테이지 + 제한적 맵에서 VS 스타일 방향 화살표가 더 적합.
| 속성 | 값 |
|---|
| 대상 | 보스, 엘리트 적 (일반 적 제외) |
| 표시 | 화면 가장자리에 삼각형 화살표 (#DA2424, 12×12px) |
| 거리 | 화면 밖 + 200px 이상일 때만 표시 |
| 스타일 | #DA2424 반투명 (α0.6), 대상 방향으로 회전 |
| Phase | Phase 3 구현 (맵 크기 확대 시) |
3-2. 캐릭터 선택 화면
컨셉: 4캐릭터가 글래스 카드로 가로 배치. 선택 시 카드 확대 + 네온 테두리 + 상세 정보 패널 슬라이드 인.
구성 요소
| 요소 | 위치 | 크기 | 스타일 | 내용 |
|---|
| 화면 제목 | 상단 중앙 | H2 36px | Bold, 골드(#ECAB11) 네온 글로우 | "캐릭터 선택" |
| 배경 | 전체 | 1920×1080 | 네온 무당집 실루엣 + 딥 퍼플 그라디언트 | 반투명 어두운 배경 |
| 캐릭터 카드 ×4 | 중앙 가로 | 280×400px | 글래스 카드 + 캐릭터 키컬러 네온 테두리, 라운드 16px | 스프라이트 (Idle 애니 + 키컬러 파티클 트레일) + 이름 + 유형 + 스탯 |
| 카드 간격 | — | 32px | — | 카드 사이 여백 |
| 스프라이트 영역 | 카드 상단 | 280×200px | 다크 배경, 캐릭터 Idle 애니메이션 | 픽셀아트 캐릭터 (4x 스케일) |
| 이름 | 카드 중앙 | H3 24px | Bold, 백색 | "퇴마사" |
| 유형 태그 | 이름 아래 | Caption 14px | 글래스 뱃지, 라운드 8px | "균형형" |
| 스탯 바 | 카드 하단 | 200×8px ×2 | 라운드, HP=#DA2424, SPD=#5EE9E9, ATK=#EF6E10 | HP / SPD 비율 바 |
| 상세 패널 | 하단 중앙 | 800×120px | 글래스 패널, 라운드 20px | 고유 능력 + 시작 무기 + 설명 |
| 잠금 오버레이 | 카드 전체 | 280×400px | 글래스 α0.7 + 자물쇠 + 해금 조건 텍스트 | 미해금 캐릭터 |
| 뒤로 버튼 | 좌하 | 160×48px | 글래스 버튼, 라운드 12px | "뒤로" |
| 확인 버튼 | 우하 | 160×48px | 골드(#ECAB11) 그라디언트, 라운드 12px, 네온 글 로우 | "확인" |
카드 내부 레이아웃
| 영역 | Y 오프셋 | 높이 | 내용 |
|---|
| 스프라이트 | 0~200 | 200px | Idle 애니메이션 (4x 확대 렌더) |
| 이름 | 210 | 30px | "퇴마사" (H3 Bold) |
| 유형 뱃지 | 248 | 24px | "균형형" (Caption, 글래스 뱃지) |
| 구분선 | 280 | 1px | 백색 α0.1 |
| HP 바 + 라벨 | 292 | 20px | "HP" + 비율 바 (#DA2424) |
| SPD 바 + 라벨 | 320 | 20px | "SPD" + 비율 바 (#5EE9E9) |
| 고유 패시브 | 350 | 40px | "영혼 스킬 +20%" (Caption) |
3-3. 저주 선택 화면
컨셉: 6종 저주가 3×2 그리드 글래스 카드로 배치. 선택/해제 토글. 우측에 실시간 혼백 배수 계산기.
구성 요소
| 요소 | 위치 | 크기 | 스타일 | 내용 |
|---|
| 화면 제목 | 상단 중앙 | H2 36px | Bold, 핑크(#F94E6D) 네온 글로우 | "붉은 달의 저주" |
| 배경 | 전체 | 1920×1080 | 붉은 달 + 어둠 — #DA2424 비네팅 그라디언트 | 불길한 분위기 |
| 저주 카드 ×6 | 좌측 2/3 | 320×200px | 글래스 카드, 라운드 16px | 아이콘 + 이름 + 효과 + 난이도 + 혼백 배수 |
| 카드 그리드 | — | 3열 2행, 간격 24px | — | 총 3×2 배치 |
| 난이도 별 | 카드 상단 우측 | 16px ×5 | #DA2424 별 (활성) / 회색 별 (비활성) | ★★★★★ |
| 선택 토글 | 카드 하단 | 120×36px | 비선택: 글래스 버튼 / 선택: #DA2424 글로우 버튼 | "선택" ↔ "해제" |
| 잠금 저주 | 카드 전체 | 320×200px | 흑색 α0.7 + 자물쇠 + 해금 조건 텍스트 | "15판 클리어" |
| 배수 계산기 | 우측 1/3 | 360×400px | 글래스 패널, 라운드 20px | 선택 저주 목록 + 최종 배율 |
| 저주 카운터 | 계산기 상단 | Caption | 골드(#ECAB11) 네온 | "저주 2/3 선택" |
| 최종 배율 | 계산기 중앙 | H2 36px Bold | 골드(#ECAB11) 네온 글로우 | "×1.95" |
| 예상 혼백 | 계산기 하단 | Body | 백색 | "클리어 시 약 19 혼백" |
| 저주 없이 버튼 | 좌하 | 200×52px | 글래스 버튼, 라운드 12px | "저주 없이 시작" |
| 출격 버튼 | 우하 | 200×52px | 적색→골드(#ECAB11) 그라디언트, 라운드 12px, 네온 펄스 | "출격!" |
저주 카드 내부 레이아웃
| 영역 | 내용 | 스타일 |
|---|
| 상단 좌 | 저주 아이콘 (48×48px) | #DA2424 글로우 |
| 상단 우 | 난이도 별 | ★ 표시 |
| 중앙 | 저주 이름 (H3) + 효과 설명 (Body) | 백색 |
| 하단 좌 | 혼백 배수 ("+50%") | 골드(#ECAB11) 네온 |
| 하단 우 | 선택/해제 버튼 | 토글 |
3-4. 보스전 UI
컨셉: 보스 등장 시 화면 하단에 대형 HP 바 + 보스명. 위협적인 핑크/레드 네온 연출.
구성 요소
| 요소 | 위치 | 크기 | 스타일 | 설명 |
|---|
| 보스명 배너 | 상단 중앙 | 600×80px | 글래스, 라운드 20px, #DA2424 네온 테두리 | 보스 이름 + 칭호 (예: "귀왕 — 망자의 왕") |
| 등장 레터박스 | 상하 | 1920×80px ×2 | 흑색 바, 시네마틱 | 1.5초 유지 후 해제 |
| 보스 HP 바 | 하단 중앙 (460, 1010) | 1000×14px | 라운드 (7px), #DA2424→암적 그라디언트 | HP 비율 표시 |
| 보스 HP 수치 | HP 바 우측 | Caption | 백색 | "45%" |
| 페이즈 마커 | HP 바 위 | 8px 원형 ×3 | 골드(#ECAB11) 점등 / 회색 미점등 | 현재 페이즈 표시 |
| 봉인 프롬프트 | 화면 중앙 | 400×300px | 글래스, 라운드 24px, #DA2424 네온 펄스 | HP ≤10% 시 봉인 연출 |
3-5. 포획 연출 UI
컨셉: 슬로우 모션 + 봉인 부적 이펙트. 성공/실패 분기 후 결과 팝업.
구성 요소
| 요소 | 위치 | 크기 | 스타일 | 설명 |
|---|
| "봉인!" 텍스트 | 화면 중앙 상단 | H1 64px | Bold, 핑크(#F94E6D) 네온 글로우 (blur 16px) | 대형 텍스트 |
| 봉인 확률 표시 | 중앙 | H3 24px | 글래스 뱃지, 골드(#ECAB11) | "봉인 확률: 40%" |
| 봉인 원진 이펙트 | 보스 위치 | 200×200px | #DA2424 마법진, 회전 애니메이션 | 성공 시 확대 + 글로우 |
| 성공 팝업 | 중앙 | 500×300px | 글래스 카드, 라운드 24px, 골드(#ECAB11) 네온 | 포획된 요괴 스프라이트 + 이름 + 소환수 효과 |
| 도감 토스트 | 우하단 | 300×60px | 글래스, 라운드 12px, 3초 후 페이드 | "도감에 등록되었습니다!" |
3-6. 영혼 성장 / 장비 화면
컨셉: 좌측 영혼 정보 + 우측 장비 그리드. 탭으로 영혼 관리 / 장비 인벤토리 전환.
구성 요소
| 요소 | 위치 | 크기 | 스타일 | 내용 |
|---|
| 탭 바 | 상단 | 1920×60px | 글래스, 활성 탭 골드(#ECAB11) 네온 하단 바 | "영혼 관리" / "장비" |
| 영혼 카드 | 좌측 중앙 | 600×500px | 글래스 카드, 라운드 20px | 초상화 + 이름 + 레벨 + XP 바 + 스킬 정보 |
| 영혼 초상화 | 카드 상단 | 200×200px | 원형 프레임, 네온 테두리 (영혼 속성색) | 픽셀아트 (8x 확대) |
| XP 프로그레스 | 카드 중앙 | 400×12px | 라운드, 골드(#ECAB11) 그라디언트 | "Lv.3 — 450/1000 XP" |
| 스킬 설명 | 카드 하단 | 400×120px | Body 크기 | "V자 포격 (CD 25s)" + 공명 조건 |
| 영혼 리스트 | 좌측 하단 | 4 × (140×60px) | 글래스 미니카드, 라운드 12px | 보유 영혼 썸네일 리스트 |
| 장비 슬롯 ×3 | 우측 상단 | 100×100px ×3 | 글래스, 라운드 16px, 부위별 아이콘 | 머리/몸/발 |
| 장비 그리드 | 우측 하단 | 5×4 (80×80px) | 글래스, 라운드 12px, 등급별 테두리 색 | 보유 장비 목록 |
| 장비 등급 테두리 | 그리드 아이템 | — | 은(#C5CDDB)/초(#08B23B)/파(#2890DC)/보(#C12458)/주(#EF6E10) 네온 (일반/비범/희귀/영웅/전설) | 등급 시각화 |
| 장비 상세 툴팁 | 호버 시 표시 | 300×200px | 글래스 팝업, 라운드 16px | 메인옵 + 부옵 + 세트 효과 |
3-7. NPC 거점 (무당집)
컨셉: 무당집 픽셀아트 배경 위에 NPC들이 배치. NPC 클릭 시 글래스 패널 열림.
구성 요소
| 요소 | 위치 | 크기 | 스타일 | 내용 |
|---|
| 배경 | 전체 | 1920×1080 | 무당집 내부 픽셀아트 (패럴랙스 레이어) | 따뜻한 등불 분위기 |
| NPC 스프라이트 ×5 | 상단 2/3 | 96×144px (6x 확대) | Idle 애니메이션, 이름 라벨 위 표시 | 클릭 가능 영역 |
| NPC 이름 라벨 | 스프라이트 위 | Caption 14px | 글래스 뱃지, 라운드 8px | "할멈", "대장장이" 등 |
| NPC 상호작용 표시 | 호버 시 | — | 골드(#ECAB11) 네온 아웃라인 + "말걸기" 툴팁 | 호버 피드백 |
| 구미호 자리 | NPC 우측 끝 | 96×144px | 미해금: "???" 실루엣 + 자물쇠 | 도감 100% 해금 |
| 메뉴 버튼 ×4 | 하단 | 180×56px | 글래스 버튼, 라운드 12px, 아이콘 좌측 | 빠른시작/커스텀/영혼관리/인벤토리 |
| 상태바 | 최하단 | 1920×48px | 글래스, 라운드 없음 (하단 고정) | 엽전/혼백/영혼 정보 아이콘+수치 |
| 대화 패널 | NPC 클릭 시 | 800×500px | 글래스, 라운드 24px, 스프라이트+대사 | NPC별 기능 UI |
3-8. 대장장이 UI
컨셉: 4개 탭 (제작/강화/재련/세트). 장비 합성 시 드래그 앤 드롭 + 결과 미리보기.
구성 요소
| 요소 | 위치 | 크기 | 스타일 | 내용 |
|---|
| 화면 제목 | 상단 | H2 36px | Bold, 골드(#ECAB11) | "대장장이" |
| 탭 바 | 상단 아래 | 800×48px | 글래스 탭, 활성 탭 골드(#ECAB11) 네온 | 제작 / 강화 / 재련 / 세트 |
| 합성 영역 | 중앙 | 700×300px | 글래스 패널, 라운드 20px | 좌 장비 + "+" + 우 장비 + "=" + 결과 |
| 장비 슬롯 (좌) | 합성 좌 | 120×120px | 글래스, 라운드 16px, 드래그 타겟 | 재료 장비 1 |
| 장비 슬롯 (우) | 합성 우 | 120×120px | 글래스, 라운드 16px, 드래그 타겟 | 재료 장비 2 |
| 결과 슬롯 | 합성 우측 끝 | 120×120px | 글래스, 등급색 네온 테두리 | 결과 미리보기 (등급 업) |
| "+" / "=" 아이콘 | 슬롯 사이 | 48px | 골드(#ECAB11) 네온 | 합성 기호 |
| 비용 표시 | 합성 아래 | Body | 엽전 아이콘 + 수치 | "비용: 50 엽전" |
| 강화 버튼 | 합성 아래 | 200×52px | 골드(#ECAB11) 그라디언트, 라운드 12px | "강화!" (비용 충분 시 활성) |
| 인벤토리 그리드 | 하단 | 5×3 (80×80px) | 글래스, 등급색 테두리 | 보유 장비 (드래그 소스) |
| 닫기 버튼 | 우상 | 48×48px | 글래스 원형, "×" | 거점으로 복귀 |
3-9. 사당 (영구 업그레이드)
컨셉: 세로 스크롤 리스트. 각 항목에 프로그레스 바 + 업그레이드 버튼. 신전 배경.
구성 요소
| 요소 | 위치 | 크기 | 스타일 | 내용 |
|---|
| 화면 제목 | 상단 | H2 36px | Bold, 골드(#ECAB11) | "사당" |
| 배경 | 전체 | 1920×1080 | 사당 내부 — 촛불 + 부적 장식, 어두운 분위기 | 신성한 느낌 |
| 업그레이드 리스트 | 중앙 | 900×700px | 글래스 패널, 라운드 20px | 11종 세로 리스트 |
| 업그레이드 행 | 리스트 내 | 860×56px | 라운드 12px, 호버 시 글래스 하이라이트 | 아이콘 + 이름 + 프로그레스 + 비용 |
| 프로그레스 바 | 행 중앙 | 300×8px | 라운드 4px, 골드(#ECAB11) 그라디언트 | "8/10" 표시 |
| 현재 효과 | 행 좌측 | Caption | 백색 | "+40 HP" (현재 누적) |
| 다음 비용 | 행 우측 | Caption | 엽전 아이콘 + 수치 | "160 엽전" |
| 업그레이드 버튼 | 행 우측 끝 | 80×36px | 골드(#ECAB11) 버튼, 라운드 8px | "강화" (엽전 충분 시) |
| MAX 표시 | 행 전체 | — | 회색 텍스트, 비활성 | "MAX" (최대 레벨 도달) |
| 보유 엽전 | 하단 | Body | 엽전 아이콘 + 수치, 골드(#ECAB11) | "보유: 1,250 엽전" |
| 닫기 버튼 | 우상 | 48×48px | 글래스 원형, "×" | 거점으로 복귀 |
3-10. 판 종료 정산 화면
컨셉: 어두운 배경 위 글래스 패널에 통계 카운트 업 애니메이션. 클리어 시 새벽빛 배경.
구성 요소
| 요소 | 위치 | 크기 | 스타일 | 내용 |
|---|
| 결과 제목 | 상단 중앙 | H2 36px | 사망: #DA2424 / 클리어: 골드(#ECAB11) 네온 | "혼이 떠났다" / "날이 밝았다" |
| 배경 | 전체 | 1920×1080 | 사망: 딥 퍼플(#0F0A1A) + 레드 비네팅 / 클리어: 골드 비네팅 | 배경 연출 |
| 정산 패널 | 중앙 | 800×600px | 글래스, 라운드 24px | 통계 + 보상 |
| 통계 영역 | 패널 상반부 | 700×350px | 세로 리스트 | 아래 항목표 참조 |
| 구분선 | 통계 중간 | 700×1px | 백색 α0.1 | 기본 통계 / 특수 통계 구분 |
| 보 상 영역 | 패널 하반부 | 700×120px | 엽전/혼백 아이콘 + 카운트 업 | 획득 엽전, 혼백 |
| 포획 결과 | 보상 아래 | 300×80px | 신규 포획 시 요괴 스프라이트 + "NEW!" | Phase 2 전용 |
| 장비 일괄 처리 | 보상 아래 | 3 × 160×40px | 글래스 버튼 | "전부 수령" / "일괄 분해" / "개별 확인" |
| 빠른 시작 버튼 | 하단 좌 | 200×52px | 글래스 버튼, 라운드 12px | "다시하기" |
| 거점으로 버튼 | 하단 중앙 | 200×52px | 골드(#ECAB11) 버튼, 라운드 12px | "거점으로" |
| 타이틀 버튼 | 하단 우 | 200×52px | 글래스 버튼, 라운드 12px | "타이틀로" |
정산 통계 항목
| 항목 | 표시 형식 | 카운트 업 | 아이콘 |
|---|
| 생존 시간 | MM:SS | 0 → 최종값 | ⏱️ |
| 처치 수 | 숫자 | 0 → 최종값 | 💀 |
| 최고 레벨 | Lv.XX | 0 → 최종값 | ⭐ |
| 음양 최대치 | 양/음 XX% | — | ☯️ |
| 극양/극음 횟수 | X회 | — | 🔥/❄️ |
| 공명 발동 | X회 | — | ✨ |
| 획득 엽전 | +XXX | 0 → 최종값 (골드 #ECAB11) | 🪙 |
| 획득 혼백 | +XX | 0 → 최종값 (#DA2424) | 👻 |
| 기록 갱신 | "신기록!" 골드(#ECAB11) 네온 뱃지 | — | — |
v4.0 추가: 기록 갱신 항목 — 최고 킬/시간/레벨 갱신 시 해당 항목 옆에 "신기록!" 뱃지 표시. 트렌드 근거: 정산 연출이 "한판 더" 유도 핵심 터치포인트.
3-11. 레벨업 카드 선택
컨셉: 슬로우 모션 + 글래스 카드 3장 스케일 업. 호버 시 카드 확대 + 네온 글로우.
구성 요소
| 요소 | 위치 | 크기 | 스타일 | 내용 |
|---|
| 오버레이 | 전체 | 1920×1080 | 슬로우(0.3x) + 딥 퍼플 글래스 오버레이 (#0F0A1A α0.7) | 배경 어둡게 |
| "LEVEL UP!" | 상단 중앙 | H2 36px | Bold, 골드(#ECAB11), 네온 글로우 (blur 12px) | 레벨업 알림 |
| 카드 ×3 | 중앙 가로 | 260×380px | 글래스 카드, 라운드 16px (저주 보정 시 4장) | 아래 카드 상세 참조 |
| 카드 간격 | — | 40px | — | 카드 사이 여백 |
| NEW 뱃지 | 카드 좌상 | 60×24px | 골드(#ECAB11) 네온 뱃지, 라운드 8px | 신규 무기/패시브 |
| 레벨 뱃지 | 카드 좌상 | 80×24px | 글래스 뱃지 | "Lv.3→4" |
레벨업 카드 내부 레이아웃
| 영역 | Y 오프셋 | 높이 | 내용 |
|---|
| 아이콘 영역 | 0~140 | 140px | 무기/패시브 아이콘 (64×64px, 중앙) + 배경 글로우 |
| 이름 | 150 | 30px | "부적" (H3 Bold, 백색) |
| NEW / Lv.X→Y | 185 | 24px | 골드(#ECAB11) 네온 뱃지 |
| 구분선 | 218 | 1px | 백색 α0.1 |
| 효과 설명 | 228~360 | 132px | Body, 줄바꿈. "부적 2장 투척\n데미지 +25%" |
카드 표시 규칙
| 상태 | 테두리 | 뱃지 |
|---|
| 신규 양 무기 (NEW) | 오렌지(#EF6E10) 네온 (2px, blur 8px) | "NEW" 골드 뱃지 |
| 신규 음 무기 (NEW) | 시안(#5EE9E9) 네온 (2px, blur 8px) | "NEW" 골드 뱃지 |
| 업그레이드 | 백색 일반 (1px) | "Lv.3→4" 글래스 뱃지 |
| 진화 무기 | 골드(#ECAB11) 테두리 + 네온 글로우 | "진화" 태그 |
| MAX 도달 | — (풀에서 제외) | — |
3-12. 도감 UI (Phase 3)
v4.0 신규. 트렌드 근거: 수집 콘텐츠가 장기 리텐션 핵심. HoT, SS 모두 도감/업적 보유.
상세 설계: docs/game/system/phase3-design.md §2
| 요소 | 위치 | 크기 | 스타일 | 내용 |
|---|
| 화면 제목 | 상단 | H2 36px Bold | 골드(#ECAB11) 네온 | "요괴 도감" |
| 달성률 바 | 제목 아래 | 600×12px | 라운드 6px, 골드(#ECAB11) 그라디언트 | "7/12 (58%)" |
| 요괴 그리드 | 중앙 | 6×2, 카드 96×120px | 글래스, 라운드 12px | 12종 요괴 카드 |
| 포획 완료 카드 | 그리드 내 | — | 스프라이트 + 등급 네온 테두리 | 등급별 색상 (F=회색~S=황+강글로우) |
| 미포획 카드 | 그리드 내 | — | 흑색 실루엣 α0.7 + "??" | 클릭 시 "아직 봉인하지 못한 요괴입니다" |
| 정보 패널 | 하단 | 700×200px | 글래스, 라운드 20px | 선택 요괴 로어 + 소환수 효과 |
| 달성 보상 | 정보 아래 | 700×100px | 4행 리스트 | 30%/50%/80%/100% 보상 + 수령 버튼 |
3-13. 업적 UI (Phase 3)
v4.0 신규. 트렌드 근거: 업적 시스템이 장르 표준 리텐션 메커니즘.
상세 설계: docs/game/system/phase3-design.md §7
| 요소 | 위치 | 크기 | 스타일 | 내용 |
|---|
| 카테고리 탭 | 상단 | 4탭 | 활성 탭 골드(#ECAB11) 네온 하단 바 | 전투/수집/도전/스테이지 |
| 달성 카운터 | 탭 우측 | Caption | 골드(#ECAB11) | "12/40 (30%)" |
| 업적 리스트 | 중앙 | 세로 스크롤 | 글래스 행, 라운드 8px | 업적명 + 조건 + 보상 |
| 달성 항목 | 리스트 내 | — | 골드(#ECAB11) 테두리, 체크마크 | 달성 완료 |
| 진행 중 항목 | 리스트 내 | — | 프로그레스 바 표시 | "3,247/10,000" |
| 달성 토스트 | HUD 상단 중앙 | 400×48px | 골드(#ECAB11) 글래스, 라운드 12px, 2초 | "업적 달성! — 백귀살" |
3-14. FTUE 오버레이 (Phase 3)
v4.0 신규. 트렌드 근거: 점진적 시스템 해금 = 초보 온보딩 표준. VS 첫 판에서 코어만 노출.
상세 설계: docs/game/system/phase3-design.md §6
| 요소 | 스타일 | 내용 |
|---|
| 배경 | 반투명 흑색 α0.6, 강조 영역만 컷아웃 | 하이라이트 대상 영역 |
| 안내 말풍선 | 글래스, 라운드 16px, Body 18px | 안내 텍스트 + 골드 화살표 |
| 해제 | "아무 키" 또는 자동 조건 | 시점별 해제 조건 상이 |
| 시점 | 하이라이트 | 텍스트 | 해제 |
|---|
| 1판 시작 | 플레이어 | "방향키로 이동! 공격은 자동!" | 첫 적 처치 |
| 첫 레벨업 | 카드 | "카드를 선택하여 무기를 강화하세요" | 카드 선택 |
| 음양 해금 | 음양 게이지 | "음양 게이지 — 극단은 위험!" | 5초 |
| 영혼 해금 | 영혼 아이콘 | "이순신이 함께합니다!" | 영혼 첫 스킬 |
| 장비 해금 | 인벤토리 키 | "장비 획득! I키로 확인" | 첫 장비 획득 |
| 저주 해금 | 저주 화면 | "저주를 걸면 더 어렵지만, 혼백이!" | 5초 |
3-15. 캐릭터 잠금 실루엣 UI (Phase 3)
v4.0 신규. 트렌드 근거: 캐릭터 해금이 메타 진행 동기. 잠금 실루엣 + 해금 조건이 업계 표준.
상세 설계: docs/game/system/phase3-design.md §4
캐릭터 선택 화면 확장 (기본 4종 + 해금 4종):
| 상태 | 스프라이트 | 이름 | 하단 정보 |
|---|
| 해금됨 | 정상 표시 | 실명 | 스탯 + 고유 패시브 |
| 잠금 (조건 미확인) | 흑색 실루엣 α0.7 | "???" | 자물쇠 64×64px |
| 잠금 (조건 확인) | 흑색 실루엣 α0.7 | 실명 | 해금 조건 + 진행률 (예: "47/100") |
| 해금 달성 | 실루엣→스프라이트 전환 연출 | — | 거점 진입 시 팝업 알림 |