106 lines
12 KiB
Markdown
106 lines
12 KiB
Markdown
|
# UI/UX 시행착오 아카이브 — 수상한잡화점 (ux-designer 관점)
|
|||
|
|
|
|||
|
|
> **작성일**: 2026-04-21
|
|||
|
|
> **작성자**: ux-designer (BurningTimes)
|
|||
|
|
> **참조 프로젝트**: NerdNavis — 수상한잡화점 (DeckBuilding)
|
|||
|
|
> **목적**: BurningTimes 신설 조직의 EerieVillage 착수 시 UI/UX 재발 방지 및 검증된 패턴 계승
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 1. 개요 (핵심 교훈 요지)
|
|||
|
|
|
|||
|
|
수상한잡화점에서 **UX 전용 기획 문서는 작성되지 않았다**. 화면 플로우, 와이어프레임, HUD 명세, 조작 스킴 기획서가 기획팀 산출물로 존재하지 않으며, UI 구조와 조작 인터페이스는 **개발팀이 단독으로 설계·문서화**하였다. 이로 인해 다음 교훈이 도출된다.
|
|||
|
|
|
|||
|
|
1. **UX 기획 부재 → 기획-개발 수치 불일치**: 방어 감소율이 기획 가정 50%였으나 실제 코드 30%로 구현됨. SOT(단일 진실 출처)가 없어 세 가지 자료(기획 문서·시뮬레이션·Unity 코드)가 모두 다른 수치를 가졌고, 개발팀 실측 전까지 불일치가 인지되지 않았다.
|
|||
|
|
2. **UX는 기획팀이 소유해야 한다**: 조작 스킴·화면 플로우·피드백 명세가 개발팀에 위임되면, 플레이어 경험 관점의 검토 없이 구현 편의 중심으로 결정된다. P18(설계 문서화 의무)에 따라 UX 결정사항은 반드시 기획팀 문서로 명문화해야 한다.
|
|||
|
|
3. **범용 UI 컴포넌트 7종 식별 완료**: SafeArea, Toast, InputBlocker, VirtualScroll, BackKeyDispatcher, UIView 추상 베이스, AtlasManager. 이 중 SafeArea·BackKeyDispatcher·InputBlocker는 모바일 2D 플랫포머에서도 즉시 재사용 가능하다.
|
|||
|
|
4. **터치 조작 아키텍처는 계승 가능**: UITouchHandler(IPointerDownHandler·IPointerUpHandler·IPointerExitHandler) 패턴은 장르 무관하게 재사용 가능한 구조다. 수상한잡화점의 방어 메커닉 수치는 플랫포머에 그대로 쓸 수 없으나 인터페이스 설계는 EerieVillage에 그대로 적용된다.
|
|||
|
|
5. **Android BackKey는 초기부터 통합 설계 필요**: 수상한잡화점은 BackKey 전용 디스패처(BackKey/ 디렉토리)를 별도 구축하였다. 착수 초기 미처리 시 팝업·화면 전환 구조가 확정된 후 소급 적용이 어렵다.
|
|||
|
|
|
|||
|
|
**미확인 항목 (C23 정직성)**: 화면 전환 애니메이션 명세, 로딩 화면 UX 기획, 접근성 대응 기록, 플랫포머 조작 스킴 설계는 수상한잡화점에 기록이 없어 본 아카이브에서 교훈 추출 불가. EerieVillage 착수 시 신규 설계 대상이다.
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 2. 시도한 방법 · 이유 · 결과 · 교훈
|
|||
|
|
|
|||
|
|
| # | 시도한 방법 | 이유 | 결과 | 교훈 |
|
|||
|
|
|---|------------|------|------|------|
|
|||
|
|
| 1 | UX 전용 기획 문서 미작성 — 조작·화면 구조를 개발팀에 일임 | 카드 전략 게임이라 조작이 단순하다고 판단, 기획 리소스를 밸런스·컨텐츠에 집중 | 기획-코드 수치 불일치(방어 50%→30%)가 개발팀 실측 전까지 3개월 이상 미발견. UX 결정 근거가 문서 없이 코드에만 존재 | **UX 설계 문서는 장르 단순도에 관계없이 필수**. 기획팀이 조작 스킴·수치·피드백을 명세하고 개발팀이 구현 검증하는 구조가 SOT를 보장함 |
|
|||
|
|
| 2 | 터치 방어 메커닉 구현 — UITouchHandler(IPointerDown·Up·Exit) + Down↔Up 지속형 | 버튼 누름 동안 방어 지속이 직관적이라 판단 | 구현 안정적. 그러나 기획 가정(단일 공격 차단)과 달리 지속형으로 구현되어 의도 불일치가 발견됨 | **조작 방식(단발 vs 지속)은 기획팀이 명세해야 한다**. UITouchHandler 아키텍처 자체는 재사용 가능하나 행동 정의는 기획 문서에서 출발해야 함 |
|
|||
|
|
| 3 | SafeArea 컴포넌트 독립 구현 (FilGoodBandits 네임스페이스 유일 사용) | 노치·홈 인디케이터 대응이 필수 | 정상 동작. 전체 코드베이스에서 유일하게 네임스페이스를 사용한 컴포넌트로, 범용성이 이미 설계 수준에서 고려됨 | **SafeArea는 BT.Framework에 우선 편입 대상**. 모든 모바일 프로젝트에서 필요하며, 초기 씬 구성 시 SafeArea 없이 개발 시작하면 레이아웃 소급 수정 비용이 큼 |
|
|||
|
|
| 4 | Android BackKey 통합 디스패처 별도 구축 (BackKey/ 디렉토리) | 팝업 중첩·화면 스택 구조에서 BackKey 처리가 분산되면 충돌 위험 | 정상 동작. BackKeyDispatcher 패턴이 안정적으로 확립됨 | **BackKey는 첫 씬 구성 시 설계에 포함**. 팝업·화면 전환 구조 확정 전에 BackKey 정책(스택 기반 vs 전역 리스너)을 결정해야 한다 |
|
|||
|
|
| 5 | Lobby·Ingame 각 19개 스크립트 구성 — LobbyUIManager·IngameUIManager 진입점 중심화 | 씬별 UI 책임을 매니저가 집중 관리하여 진입 경로 단순화 | 구조 안정적. SelectCardUI(290 LOC)가 단일 모듈 최대 크기로 성장하여 책임 범위 경계가 일부 모호해짐 | **화면 단위 UI 모듈은 300 LOC 초과 시 분리 검토**. 기획 측면에서 "한 화면 한 결정" 원칙(UX 원칙)이 코드 분리 기준과 일치함 |
|
|||
|
|
| 6 | 카드 선택 UI(SelectCardUI) — 전투 중 카드 선택·사용 통합 관리 | 전투 중 핵심 인터랙션으로 단일 진입점 집중 | 290 LOC로 성장. 카드 조건 변경 시 이 파일이 단일 수정 대상이 되어 기획-개발 연동 포인트가 명확함 | **기획 변경이 빈번한 UI는 연동 포인트를 기획팀이 미리 파악해야 한다**. 수상한잡화점에서는 개발팀 문서에서 사후 파악됨 |
|
|||
|
|
| 7 | DungeonProcess UI — 스테이지 맵 진행 상태 표시 | 탐험 흐름을 시각화하여 진행 위치 피드백 | 동작 확인. 그러나 기획 단계에서 맵 패턴 변경 시 UI 영향도가 명시적으로 추적되지 않아 개발팀 문서에 영향 관계 파악 기록이 별도 작성됨 | **기획 변경(맵 패턴) → UI 영향(DungeonProcess) 연동 매트릭스를 기획팀이 유지**해야 함. 개발팀에 위임하면 기획 변경 시 영향 범위 파악이 늦어짐 |
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 3. EerieVillage 착수 체크리스트 (BT 조직 적용)
|
|||
|
|
|
|||
|
|
EerieVillage는 Unity 6000.3.13f1 LTS + 2D PlatformerMicrogame 템플릿 기반 모바일 게임이다. 수상한잡화점과 **장르가 다르므로**(덱빌딩 카드 → 2D 플랫포머) 수치 재사용 금지, 아키텍처 패턴만 선택적 계승.
|
|||
|
|
|
|||
|
|
### 3-1. UX 기획 문서 선행 작성 (착수 전 필수)
|
|||
|
|
|
|||
|
|
1. **화면 플로우 문서**: 타이틀 → 메인 메뉴 → 스테이지 선택 → 인게임 → 결과 화면 전이 명세. 예외 경로(네트워크 오류·사망·일시정지) 포함
|
|||
|
|
2. **조작 스킴 명세**: 이동(좌·우), 점프, 공격, 상호작용, 아이템 사용 — 버튼 위치·크기(최소 44×44pt), 동시 입력 충돌 정책, 이동 중 공격 허용 여부
|
|||
|
|
3. **HUD 정보 우선순위 명세**: 한 화면에서 보여줄 최소 정보 정의 (HP·스테이지 진행·인벤토리 슬롯 등 우선순위 3단계)
|
|||
|
|
4. **피드백 명세**: 피격·사망·아이템 획득·스테이지 클리어 각각 0.1초 이내 인지 가능한 피드백 요구사항. 시각/청각/진동 구분하여 "긍정 피드백 필요", "부정 피드백 필요" 수준으로 명세 (아트·사운드 영역은 기능 요구로만 정의)
|
|||
|
|
|
|||
|
|
### 3-2. SafeArea 초기 적용
|
|||
|
|
|
|||
|
|
1. 씬 구성 첫날 SafeArea 컴포넌트 적용 — 노치·홈 인디케이터 영역 침범 방지
|
|||
|
|
2. BT.Framework SafeArea 편입 여부 확인. 미편입 시 수상한잡화점 구현 계승
|
|||
|
|
3. 버튼·HUD 배치 전 SafeArea 경계 확정
|
|||
|
|
|
|||
|
|
### 3-3. 모바일 터치 영역 설계
|
|||
|
|
|
|||
|
|
1. **최소 터치 영역**: 이동·점프·공격 버튼 최소 44×44pt (iOS HIG 기준). 빈번 조작 버튼은 60×60pt 이상 권장
|
|||
|
|
2. **엄지 도달 범위**: 세로 모드 기준 화면 하단 20% 영역에 주요 조작 버튼 배치. 상단 25% 영역은 HUD 전용
|
|||
|
|
3. **동시 입력 처리**: 이동+점프, 이동+공격 동시 입력 허용 여부를 기획 명세로 사전 결정. UITouchHandler 패턴(IPointerDown·Up·Exit) 재사용 가능
|
|||
|
|
4. **인게임 화면 방향**: 가로(Landscape) vs 세로(Portrait) 결정 후 전체 레이아웃 설계 시작. 미결정 상태에서 UI 작업 착수 금지
|
|||
|
|
|
|||
|
|
### 3-4. BackKey 정책 초기 결정
|
|||
|
|
|
|||
|
|
1. BackKey(Android) 동작 정책: 일시정지 팝업 표시 vs 스테이지 처음으로 vs 메인 메뉴 이동 중 택1
|
|||
|
|
2. 팝업 중첩 시 BackKey 스택 순서 정의
|
|||
|
|
3. BackKeyDispatcher 패턴 초기 설계에 포함. 팝업 추가 후 소급 적용 금지
|
|||
|
|
|
|||
|
|
### 3-5. 기획-개발 UX 연동 체계
|
|||
|
|
|
|||
|
|
1. **UX 수치 SOT 지정**: 기획팀 문서가 수치의 단일 진실 출처. 개발팀은 구현 시 기획팀 문서 참조. 불일치 발견 즉시 C3 보고
|
|||
|
|
2. **UI 영향 연동 매트릭스 유지**: 기획 변경(스테이지 구조·아이템·몬스터) 시 영향받는 UI 모듈 목록을 기획팀이 유지
|
|||
|
|
3. **기획팀 주도 UX 리뷰**: 개발 구현 후 기획팀이 실제 동작 검증. "기획 의도와 다르면 즉시 C3 보고"를 기본 협업 절차로 설정
|
|||
|
|
|
|||
|
|
### 3-6. 접근성 기본 적용 (착수 시 포함)
|
|||
|
|
|
|||
|
|
1. 텍스트 최소 크기: 본문 14pt 이상, 버튼 레이블 12pt 이상
|
|||
|
|
2. 색맹 대응: 색상만으로 상태를 구분하지 않음 (아이콘·패턴 병용)
|
|||
|
|
3. 일시정지·자동 진행 옵션: 컷씬·연출 스킵 기능 초기 설계에 포함
|
|||
|
|
4. 진동(햅틱) 피드백은 설정에서 끄기 가능하도록 설계
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 4. PM 보고 안건 (특이사항)
|
|||
|
|
|
|||
|
|
1. **UX 기획 공백 확인**: 수상한잡화점 기획팀은 UI/UX 전용 문서를 작성하지 않았음. EerieVillage 착수 전 기획팀 내 ux-designer 역할 업무 범위를 명확히 합의하고, P18(설계 문서화 의무)에 따라 UX 문서 작성을 기획팀 착수 업무 1순위로 배정할 것을 권고.
|
|||
|
|
2. **BT.Framework UI 컴포넌트 편입 안건**: SafeArea·Toast·InputBlocker·BackKeyDispatcher 4종은 EerieVillage에서 즉시 필요하며 범용성이 검증됨. 코어 프레임워크 담당자에게 Tier 1 편입 여부 확인 필요.
|
|||
|
|
3. **기획-개발 수치 불일치 재발 방지**: 수상한잡화점의 방어 감소율 불일치 사례를 EerieVillage에서 재발시키지 않으려면 **UX 수치 SOT 규칙**(기획 문서가 단일 기준, 코드가 이를 구현, 불일치 즉시 보고)을 팀 착수 시 명시적으로 합의해야 함.
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 5. 참조 원본 파일 목록 (감사 재현 가능)
|
|||
|
|
|
|||
|
|
| 파일 | 핵심 참조 내용 |
|
|||
|
|
|------|-------------|
|
|||
|
|
| `프로젝트/수상한잡화점/개발/11_UI아키텍처_v1.md` | UGUI 전체 구조, 38개 UI 스크립트 목록, BT.Framework 흡수 후보 7종, 기획 연동 포인트 |
|
|||
|
|
| `프로젝트/수상한잡화점/개발/08_전투시스템_SOT_v1.md` | UITouchHandler 구현, 터치 방어 메커닉 실측 확정값(PCDefence_Mul=0.3), Down↔Up 지속형 |
|
|||
|
|
| `프로젝트/수상한잡화점/개발/02_개발자관점_점검_v1.md` | 기획-코드 불일치 이슈(방어 50% vs 30%) 최초 보고 |
|
|||
|
|
| `프로젝트/수상한잡화점/개발/03_Unity프로젝트_구조_v1.md` | 모바일 패키지 목록(Adaptive Performance), 네임스페이스 현황, SafeArea 위치 |
|
|||
|
|
| `프로젝트/수상한잡화점/기획/` (폴더 전수 확인) | UX 전용 문서 없음 실측 (24개 파일 전수 — 밸런스·스테이지·카드 기획만 존재) |
|
|||
|
|
| `프로젝트/EerieVillage/README.md` | 신 프로젝트 기본 정보(Unity 6000.3.13f1 LTS, 2D PlatformerMicrogame 템플릿) |
|
|||
|
|
| `공유/조직자산/시행착오_아카이브/README.md` | 본 파일 등록 대상 확인 |
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
*본 문서는 실측 기반으로 작성되었으며, UX 기획 문서가 수상한잡화점에 존재하지 않음을 확인한 상태에서 개발팀 산출물에서 추출한 UX 인사이트를 중심으로 구성하였다. 미확인 항목(화면 전환 애니메이션 명세, 로딩 UX 등)은 EerieVillage 신규 설계 대상임.*
|