Repository navigation
08 UI UX
D3 게임식 HUD 통일: 전장의 모든 역할(아파치 포함)에 미니맵·티켓 바·거점/아군/발견된 적 표식을 준다. 캠페인이 없어졌으므로(D13) P1(조종석 장치로만 정보 전달)이 적용되는 모드는 없다. 아파치의 MPD·EUFD·IHADSS·TADS 화면은 탈것의 계기로 그대로 동작하고(P1′), 전장 HUD는 그 위에 겹치지 않게 얹는다.
유지하는 기존 UI 원칙: 메뉴 "작전실" 톤(#0b1320 바탕, #ffd166 강조), 모바일 가로 우선(메뉴는 세로도), 글자 ≥ 12px, 터치 대상 ≥ 48px, 상태를 색만으로 나타내지 않는다(모양·글자 병기).
[타이틀: 전장 · 설정 · 크레딧]
└ 전장 → [전장 설정] → [배치(첫 출격)] → [전장 HUD]
↑ │ 사망
└ [배치(10초)] ← [사망 화면 3초]
[전장 HUD] ─ 경기 종료 → [경기 후 보고] → [다시 하기 / 전장 설정 / 타이틀]
[전장 HUD] ─ Esc → [일시정지: 계속 / 조작법 / 설정 / 경기 포기]
[전장 HUD] ─ Tab(누르는 동안) → [전황: 큰 지도 + 점수판]
- 화면 상태에
battleSetup·deploy·battle·battleReport, 해시#/battle,#/battle/<map>/<mode>. 경기 중 새로고침이면 전장 설정으로(경기 상태는 저장하지 않는다). - 타이틀 → 출격 최소 3탭(
전장→ 설정배치→ 배치출격). 첫 실행이면 전장 설정이 첫 경기 기본값으로 채워진다(8.10).
구현 (B1-12): 해시는 #/battle(전장 설정)과 #/battle/<맵>/<방식>(경기). 경기 해시로 새로고침하면 전장 설정이 열린다. 전장 화면(비행 셸 포함)은 지연 청크다 — 첫 번들 147KB, 전장 경로 합계 약 317KB(gzip). B1 전장 설정은 빠른 점령전·하레크·연합만 고를 수 있고 나머지는 "준비 중"(A8: 진영 선택은 B2부터). 배치 화면은 B1에선 지도 없이 티켓·경과·거점 소유 한 줄 + 스폰 2곳(본진 FARP — 엔진 켠 채 / 본진 상공 150m 공중 투입) + 아파치 무장 3종(대전차 헬파이어 16 / 근접지원 로켓 38·헬파이어 8 / 대공 로켓 19·헬파이어 4·스팅어 2), 대기 10초. 경기 후 보고는 승패·사유·티켓·경기 시간·내 처치·사망 + [다시 하기][전장 설정][타이틀]. 배치 지도(BattleMap)는 B1-11 미니맵과 함께.
┌──────────────────────────────────────────────────────────┐
│ 전장 12전 7승 · 상병 · 최고 A │
│ 경기 방식 [빠른 점령전] [점령전] [돌파] │
│ 맵 [하레크 계곡] [베로스 저수지] [카르다 고개] (음영 썸네일) │
│ 진영 [■ 연합] [▲ VPA] (돌파면: [공격] [수비]) │
│ 병력 [대규모] [표준] 난이도 [쉬움] [보통] [어려움] │
│ 시간대 [주간] [해질녘] 시드 [무작위] [오늘의 전장] │
│ 예상 18~28분 · 인형 180 · 탈것 44 │
│ [ 배치 ▶ ] │
└──────────────────────────────────────────────────────────┘
- 잠금 없음(D6). 아직 만들어지지 않은 선택지(로드맵상 뒤 단계)는 회색 + "준비 중".
- "오늘의 전장"을 고르면 경기 방식·맵·진영·시간대가 날짜로 고정.
- 모바일 기기면 병력 기본값은 측정 결과에 따른다(추가 결정 A9, 그 전까지 대규모).
┌──────────────────────────────┬───────────────────────────┐
│ 전장 지도 (지형 음영·도로) │ 연합 612 ▓▓▓▓▓▓░░ 587 VPA │
│ ▲VPA본진 │ 경과 11:42 / 35:00 │
│ ▲F ▲G │ 병과 [돌격][공병][지원][정찰] │
│ ○C ⊘D ■E │ 소총 · 유탄 6 · 구급 · 연막 │
│ ■A◎ ■B◎[FARP] │ [장비 바꾸기] │
│ ■연합본진◎ ▼분대◎ │ 탈것 전차 2/4 · 장갑차 1/4 │
│ ◎=스폰 가능 ◇=지원 요청 │ 공격 헬기 0/2(58초)… │
│ (알려진 적 방공 사거리 원) │ 스폰 ◉ B 거점 │
│ 최근 무전 · D 거점 교전 중 │ 조작 카드(첫 사용 시) ▸ │
│ │ 출격까지 7초 [ 출격 ▶ ] │
└──────────────────────────────┴───────────────────────────┘
-
지도: 캠페인 브리핑 지도는 제거됐으므로 새
BattleMap컴포넌트(맵 로드 시 지형 음영 256² 캔버스 한 번 생성 + 도로·거점·본진·FARP). 미니맵·전황 지도가 같은 음영 캔버스를 재사용. -
거점 기호 — 모양으로 소유 구분: 연합
■, VPA▲, 중립○, 교전 중×(글꼴에⊘가 없어 대체). 글자(A~G) 병기, 점령 진행 막대. 플레이어가 VPA면 모양 의미는 같고 "우리 편" 색만 바뀐다. -
스폰 지점
◎, 못 고르는 곳은 회색 + 사유("교전 중", "적 150m 안"). -
탈것 슬롯:
살아 있는 수 / 편제 수+ 다음 재생성까지 초. 슬롯을 고르면 스폰 지점 목록이 그 탈것의 스폰 위치로 바뀐다. - 적 정보는 안개를 따른다: 아군이 최근 20초 안에 본 적 방공만 사거리 원.
- 세로 화면: 지도 위, 패널 아래,
출격버튼 아래 고정 64px.
HUD는 DOM + 캔버스 2D 오버레이 하나(ui/battle/hud/)로 그린다. three 드로우콜을 쓰지 않는다.
데스크톱 (가로)
┌──────────────────────────────────────────────────────────┐
│ [≡] 연합 612 ▓▓▓▓▓▓▓░░░ 587 VPA 11:42 처치 알림 │
│ A■ B■ C○ D⊘ E■ F▲ G▲ (4줄) │
│ │
│ ◆(발견된 적) ⟨D 340m⟩ │
│ ┼ (조준선·명중 표시) │
│ ▼(아군) │
│ ╭미니맵╮ 체력 100 · 30/120 │
│ ╰180px╯ [무전 메시지 한 줄] 유탄 6 · 구급 1 │
└──────────────────────────────────────────────────────────┘
모바일 (가로 844×390)
┌──────────────────────────────────────────────────────────┐
│ [≡][미니맵110] 612 ▓▓▓▓░░ 587 A■ D⊘ G▲ 처치 알림 2줄 [무전] │
│ 체력·탄약 한 줄 │
│ ┼ │
│ (왼쪽 스틱) [역할별 버튼] (발사) (시선) │
└──────────────────────────────────────────────────────────┘
| 요소 | 내용 | 규칙 |
|---|---|---|
| 티켓 바 | 두 진영 티켓 수 + 막대, 경과/제한 시간, 거점 줄(기호 + 글자) | 티켓 100·50·20에서 막대 깜박 + 무전 경고. 거점이 넘어가면 해당 기호가 1초 커짐 |
| 미니맵 | 지형 음영 원(데스크톱 180px·모바일 110px), 진행 방향 위, 거점·본진·FARP·아군·발견된 적·지원 요청 | 축척이 역할 따라 자동: 보병 반경 150m · 지상 탈것 400m · 헬기 1.5km · 전투기 5km. O/탭으로 2배 확대 |
| 거점 표식 | 월드 위 기호 + 글자 + 거리(⟨D 340m⟩), 점령 중이면 진행 고리 | 화면 가장자리에 붙어 방향 표시 |
| 아군 표식 | 파란 ▼ + 분류 기호(보병·차량·헬기·전투기) |
보병은 200m 안만, 탈것·항공은 3km 안 전부. 오사 방지가 목적(D9) |
| 적 표식 | 주황 ◆ + 분류 기호 |
발견된 적만(8.5). 가시선이 없으면 표시하지 않는다(벽 너머 표식 없음) |
| 처치 알림 | 오른쪽 위 4줄: 하운드 ─[전차포]→ VPA 전차 (플레이어 관련 줄 강조) |
봇끼리는 플레이어 1.5km 안 사건만 |
| 조준선·명중 | 역할별 조준선(보병 12.6 등), 명중 ×, 처치 굵은 ×
|
|
| 피격 방향 | 화면 가운데 둘레의 붉은 호(쏜 방향) | 호 + 숫자 체력(색만으로 알리지 않음) |
| 역할 상태 | 보병: 체력·탄약·장비 / 탈것: 차체 체력·탄종·재장전 / 헬기·전투기: 무장·대응책 | 아래 8.6 |
| 무전 한 줄 | 거점 점령·상실, 지원 요청, 탑승, 티켓 경고 | 기존 무전 큐(4초), 1분 6줄 넘으면 낮은 우선순위 버림 |
구현 (B1-11, ui/battle/hud/·render/battle/flags.ts·sim/battle/spotting.ts): DOM(티켓 바·거점 줄·처치 알림·무전 한 줄) + 전체 화면 캔버스 한 장(거점·아군·적 표식, 미니맵). IHADSS 헤딩 테이프를 피해 티켓 바는 화면 가운데 위가 아니라 왼쪽 위(데스크톱), 모바일은 ≡ 옆 미니맵(110px) 아래에 두고 처치 알림은 한 줄만. 데스크톱 미니맵은 왼쪽 아래 180px, 헬기 축척 반경 1.5km, 진행 방향이 위. 비행 셸의 외부 시점 계기 한 줄은 전장에서 티켓 바 아래로(모바일은 숨김). 화면 뒤쪽 거점 표식은 아래 가장자리, 미니맵을 피해서. 깃발 기둥 12m, 연합 사각·VPA 삼각·중립 없음, 점령 값만큼 오르내림. 처치 알림의 공격자 이름은 unitDestroyed.by(새 필드). 무전: 거점 점령·상실·중립화·적 점령, 우리 티켓 100·50·20.
| 발견 방법 | 표시 | 지속 |
|---|---|---|
| 플레이어가 조준선 3° 안에 0.5초 이상 둔 적(사거리·가시선 안) | 3D ◆ + 미니맵 |
8초 |
스폿 키(보병·지상 탈것 Q, 패드 LB 두 번, 터치: 조준 중 자동) — 조준선 5° 안 가장 가까운 적 |
3D + 미니맵, 아군 봇 표적 후보에 추가 | 10초 |
| 정찰 쌍안경·레이저 지시, 아파치 TADS 식별, VPA 헬기 조준경 식별 | 3D + 미니맵 + 봇 공유 | 20초 |
| 적이 150m 안에서 사격(총구 섬광) | 미니맵 점 | 3초 |
radar 거점 소유 |
미니맵에 5km 안 적 항공기 | 소유하는 동안 |
| 아군 봇이 본 적(지휘관 안개 기억) | 미니맵 흐린 점만(3D 표식 없음) | 20초 |
- 동시 3D 적 표식 ≤ 24. 가시선 판정은 기존
LosCache(0.5초·5m 캐시). - 아파치를 모는 동안에도 TADS·FCR 표식(IHADSS)은 기존대로, 전장 HUD의
◆는 IHADSS 표식과 겹치면 전장 쪽을 숨긴다.
| 역할 | 조준선·계기 | 상태 칸 | 비고 |
|---|---|---|---|
| 보병 | 십자(탄 퍼짐에 따라 벌어짐), 조준경 모드는 조준경 그림 | 체력(숫자+막대), 탄창/예비탄, 장비 2칸, 자세 기호 | 보병 |
| 지상 탈것 | 포 조준선 + 거리 눈금(탄도 낙차), 포탑 방향 표시(차체 위 포탑 화살표), 재장전 원 | 차체 체력, 탄종, 연막 수, 좌석 번호 | 지상 탈것 |
| 아파치 | 기존 IHADSS·MPD·EUFD 그대로 | 전장 HUD는 티켓 바·미니맵·처치 알림만 추가. 미니맵은 IHADSS 헤딩 테이프와 겹치지 않는 왼쪽 아래 | 헬기 |
| VPA 공격 헬기 | 같은 IHADSS 기호를 VPA 조종석 조준 유리(HUD) 모양으로 | 같음 | 헬기 |
| 수송 헬기 | 단순 비행 기호(속도·고도·수직 속도·착륙 안내 원) | 탑승 인원, 플레어 | 헬기 |
| 전투기 | 조종석 HUD(속도·고도·G·피치 사다리·기관포 선도 조준점·미사일 시커 원·폭탄 CCIP) | 무장·플레어·재보급 회랑 방향 | 전투기 |
무전 — 전장
1 지원 요청 수락 (스틸 2: B 북쪽 기갑 셋)
2 집중 거점 지정 → A B C D E F G (90초 쿨다운, 남은 시간 표시)
3 항법 목표: 거점 → A … G
4 닫기
- 연합 지휘관 효용 +0.8(봇 AI 5.2). 응답 무전: "카르다 컨트롤: 알았다. 전 부대 C 거점으로."
- 터치: 오른쪽 위
무전(항상 보임) → 같은 패널, 항목 48px. 패드: 십자키 아래 길게. - 봇 탑승·하차는 명령이 아니라 자동 규칙이라 메뉴에 없다(봇 AI 5.4).
┌──────────────────────────────────────────────────────────┐
│ 전황 경과 11:42 / 35:00 │
│ ┌ 큰 지도 (거점·아군·발견된 적·지원 요청) ┐ 연합 612 ▓▓▓░ 587 VPA │
│ │ │ (티켓 추이 작은 그래프) │
│ └───────────────────────────────────────┘ │
│ 연합: 보병 78/85 · 전차 3/4 · 장갑차 4/4 · 헬기 1/2 · 전투기 2/2 │
│ VPA(알려진 것): 전차 2 확인 · 방공 차량 1 확인 · 헬기 1 확인 │
│ 하운드(나) 점수 2,340 · 처치 14 · 사망 3 · 기여도 6% · 돌격 L2 │
└──────────────────────────────────────────────────────────┘
- 멈추지 않는다. 일시정지 메뉴에서는 같은 화면을 멈춘 상태로 볼 수 없다(조작법·설정만) — 전황은 Tab 하나로.
역할마다 조작이 다르지만(P1′), 같은 손가락이 같은 뜻이 되도록 뼈대를 고정한다.
| 뜻 | 키보드·마우스 | 게임패드 | 터치(가로) |
|---|---|---|---|
| 이동·기체 조종 | 역할별(보병 WASD, 탈것 WASD, 헬기 기존, 전투기 기존 방향키 계열) | 왼쪽 스틱 | 왼쪽 가상 스틱 |
| 시선·조준 | 마우스(포인터 잠금, 전장에서 켬) | 오른쪽 스틱 | 오른쪽 절반 드래그 |
| 주 발사 | 좌클릭 / Space | RT | 오른쪽 아래 발사 64px |
| 조준경·줌 | 우클릭 | LT |
조준 버튼 |
| 탑승·하차 |
E (헬기·전투기는 착지 상태에서 누름 유지 1초) |
Y 누름 유지 | 가까우면 나타나는 탑승/하차 64px |
| 시점 전환(1인칭/3인칭) | V |
오른쪽 스틱 누름(짧게) | 일시정지 메뉴 |
| 스폿 |
Q(보병·지상 탈것) |
LB 두 번 | 조준 중 자동 |
| 무전 | G |
십자키 아래 길게 | 무전 |
| 전황 |
Tab 누르는 동안 |
Back(8) | 티켓 바 탭 |
| 일시정지 | Esc |
Start | ≡ |
- 역할별 전체 표는 보병 12.8, 지상 탈것 13.7, 헬기 14.6, 전투기 15.9.
-
아파치 기존 바인딩 충돌: 기존
Tab(FCR 표적 순환)은 전장의 전황과 겹친다 → 아파치의 표적 순환을Y로 옮긴다(헬기 14.6). 기존Q(무장 순환)는 헬기 안에서만 유지(헬기엔 스폿 키 대신 TADS 식별). - 터치 규칙: 역할별 버튼 ≤ 8개, 모두 48px 이상, 두 엄지가 스틱을 떠나지 않고 누를 수 있는 위치에 발사. 모바일·패드에만 조준 보조(설정에서 끔 가능): 보병 조준선이 적 인형 위에서 감도 40% 감소 + 조준경을 켤 때 가장 가까운 적 쪽으로 최대 2° 끌림.
훈련 모드가 없으므로 모든 조작 학습은 전장 안에서 일어난다. 원칙: 막지 않는다(전장은 계속 돈다), 짧다(한 단계 한 줄), 한 번만 나온다(저장 tips).
- 첫 실행 기본값: 빠른 점령전 · 하레크 계곡 · 연합 · 쉬움 · 주간. 첫 배치에서 병과는 돌격, 스폰은 거점 A가 기본 선택(B1 시점에는 아파치 · 본진 FARP 대신 공중 투입: 지상 60m·60kt에서 시작해 이륙 절차를 건너뜀).
-
조작 카드(배치 화면): 역할을 처음 고르면 오른쪽 패널에 그 역할의 핵심 조작 3줄이 현재 기기(키보드/패드/터치) 기준으로 뜬다. 예(돌격·키보드):
WASD 이동 · Shift 질주 · C 앉기/좌클릭 사격 · 우클릭 조준 · R 재장전/4 구급 상자 · E 탑승. - 전장 코치(경기 중): 역할마다 3~4단계, 각 단계는 화면 아래 가운데 한 줄 배너. 행동을 감지하면 다음 단계, 20초 지나면 넘어감.
| 코치 묶음 | 단계 (감지 조건) |
|---|---|
| 전장 규칙(첫 경기) | 거점 기호 읽기(표식 보임) → 티켓이 줄어드는 이유(첫 거점 소유 변화) → 죽으면 10초 뒤 배치(첫 사망) |
| 보병 공통 | 이동·질주(10m 이동) → 조준·사격(첫 발사) → 거점 원 안에서 점령(원 진입) → 탈것 탑승(탈것 5m 안) |
| 돌격·공병·지원·정찰 | 장비 1줄씩(해당 장비 첫 사용 또는 20초) |
| 지상 탈것 | 이동과 포탑은 따로(10m 이동) → 탄도 낙차·재장전(첫 발사) → 하차(E) |
| 아파치·공격 헬기 | 콜렉티브로 높이(고도 변화) → 호버 보조 B(켜짐) → TADS로 찾고 식별(첫 식별) → 능선 뒤에 숨어 팝업(첫 피탐 후) |
| 수송 헬기 | 거점 근처 착지 → 봇 분대 자동 탑승 → 목표 근처 착지 하차 |
| 전투기 | 스로틀·실속 경고(속도 < 90m/s) → 기관포 선도 조준점 → 미사일 잠금음 → 경계·재보급 회랑 |
-
조종 보조 기본 켬: 헬기(자동 호버·기수 정렬 — 기존
assists.ts), 전투기(손 떼면 수평 복귀·실속 방지). 설정에서 끔. - 사망 화면 팁: 사망 원인 → 한 줄 팁(예: "적 대공조의 적외선 미사일 — 경보가 울리면 F로 플레어", "저격조 — 엎드리면 발견 거리 120m").
- 조작법 화면: 일시정지 → 조작법, 역할 탭(보병·지상 탈것·헬기·전투기) × 기기.
구현 (B1-13, ui/battle/coach.ts): 첫 실행이면 쉬움 + 자동 식별·자동 대응책 켬(기존 assists — 자동 호버는 TADS 모드가 맡는다), 첫 배치의 스폰 기본값은 공중 투입(지상 60m·60kt), 조작 카드는 첫 출격 전 배치 화면에만. 코치는 화면 가운데 아래(모바일은 IHADSS 헤딩 테이프 아래) 한 줄, 한 단계 최소 3초·최대 20초. 순서: 거점 기호 → 콜렉티브로 높이 → TADS(자동 호버) → 식별 → (첫 거점 변화 뒤) 티켓 이유 → (첫 피탐 뒤) 능선 팝업. 본 단계는 저장 tips에 남아 다시 나오지 않는다. 사망 뒤 배치 화면에 원인별 팁 한 줄(미사일 피격 3초 안이면 플레어 팁)과 첫 사망 때만 "10초 뒤 배치" 안내. 교전 중 기호 ⊘는 한국어 글꼴(Pretendard)에 없어 **×**로 바꿨다.
구현 (B2-12·B2-13): 전장 설정에서 VPA를 고를 수 있다. VPA의 배치 화면은 공격 헬기 칸을 "준비 중"으로 막고 보병으로 시작하며, 1인칭 팔 소매·장갑은 진영 색(render/battle/uniform.ts, 인형과 공유), 거점 기호 코치는 내 진영 기호를 아군으로 읽는다. 첫 배치(저장 tips에 card.soldier 없음)는 돌격병 · 내 진영 거점(연합 A / VPA G)이 기본값이고, 조작 카드는 역할별(card.soldier·card.apache)로 그 역할의 첫 출격 전에만 뜬다(키보드·터치 두 벌 — 패드 카드는 아직 없음). 보병 코치는 거점 기호 → 이동(10m) → 조준·사격(첫 발) → 거점 원 안(진입) 순서이고, 설계의 "탈것 탑승(5m)" 단계는 탈것이 생기는 B4에 붙인다. 코치 시간은 게임 시간 기준이다(느린 기기에서 시뮬레이션이 실시간보다 느리면 코치도 그만큼 길게 머문다).
- 사망 화면(3초): 누가(분류·진영)·무엇으로·거리, 킬캠 없음(비용). 팁 한 줄.
-
경기 후 보고: 승/패/무 + 사유, 평점 큰 글자·기여도, 티켓 추이 그래프(거점 소유 변화 표식 — 이 판의 이야기, P4′), 점수 내역(진행과 보상 7.2), 역할별 시간·처치, 새 리본·숙련 레벨·계급. 버튼
[다시 하기] [전장 설정] [타이틀].
- 먼 전장 소리: 1.5km 밖 봇
fire·explosion이벤트 → 거리 감쇠·저역 통과(기존 믹서), 동시 재생 6개 상한. - 새 소리(소총·기관총·전차포·엔진·제트)는 외부 에셋의 후보 조사 → 소유자 채택 전까지 기존 클립 가공(피치·필터) + 합성음 폴백.