07. 게임 UI

상위 문서: 게임기획코어.md 최종 업데이트: 2026-08-06 · 상태: 3열 배치 · 연출 2레이어 · 위젯 배치 확정 / 목업 1종(v2) 바뀌면 갱신: 게임기획코어 · 산업레벨 · 퀘스트

이 게임이 다른 방치형과 구분되는 유일한 차별점이다. "바탕화면 위에서 상시 동작"은 컨셉 문구가 아니라 가장 강한 제약이다.

1. 확정 사항

• Windows 바탕화면 위 투명 창으로 상시 동작한다.
• 기본은 방치형 — 조작이 필요 없다.
• 위젯 클릭 → 큰 창으로 퀘스트·특성·아이템·거래를 조작한다.
• 아트: Pixel + Stylized (AI). UI/UX도 동일 방향.

2026-08-01 추가 확정 — 2026-07-30 방향 제안 합의분.

1-1. 목업 (v2 · 2026-07-30)

브라우저로 열면 동작한다. 카운트다운은 실제 계산식 (CurrentWorkSpeed · JudgeCostUnits · ProgressUnits)을 그대로 쓰므로, 클라 구현 시 계산 부분을 옮겨 쓸 수 있다.

v1 두 목업(게임UI목업.html · 작업슬롯UI목업.html)은 폐기됐다. 방향 제안이 합의되면서 배치가 바뀌었고, 작업슬롯 전용 목업의 내용(상시 스트립 3안)이 v2 상단 토글로 흡수돼 하나로 합쳐졌다. 제안 시점의 사본은 proposals/2026-07-30/에 기록으로 남아 있다.

📋 목업 우상단 "기획 메모" 버튼을 누르면 v1→v2 변경 내역 · 계산식 · 목업이 가정한 미확정 항목이 표로 정리돼 있다. 이 문서에 옮겨 적지 않는다 — 메모가 목업의 단일 진실이다.

⚠️ 거래소·상점은 기획이 없다. 목업의 수수료·한도·품목·가격은 전부 가정이다. 골드 상점이라는 방향만 잡혔고 수치는 전부 미정이다. → 거래 3.2

⚠️ v2에도 산업 레벨이 반영돼 있지 않다. 배치가 (산업, 캐릭터) 두 칸으로 그려져 있는데, 실제로는 레벨이 한 칸 더 붙는다. 해금 조건(T-016)과 패킷 레벨 필드(T-017)가 정해지면 목업을 갱신한다. → 산업 레벨

2. 화면 구조

창 자체 — 16:9 배율 창 (2026-08-01 확정)

게임은 바탕화면을 덮지 않는다. 데스크톱 위에 뜨는 16:9 비율 고정 · 배경 투명 창이고, 크기는 배율 프리셋으로 고른다. 아래 UI 이야기는 전부 이 창 안의 이야기다.

• 절대 픽셀이다. 모니터 해상도에 비례시키지 않는다 — 어느 기기에서든 UI 픽셀 크기가 같아야 디자인 검증과 버그 재현이 된다.
• 배율이 모니터보다 크면 16:9를 유지한 채 작업 영역 안으로 줄인다.
• 기준 해상도 1920 × 1080(= 2x)로 UI를 만들고, 작은 배율은 CanvasScaler가 비례 축소한다.

⚠️ 세 축을 섞지 않는다. "창을 화면 어디에 두는가"(9분할)와 "위젯을 창 안 어디에 두는가"(6칸)는 다른 축이다.

캔버스 구성

캔버스는 3개다. 위젯은 별도 캔버스가 아니라 작업슬롯 캔버스 안의 패널이다 — 상시 표시되는 것이 위젯뿐이어도, 위젯은 작업슬롯 열의 위/아래 슬롯에 들어간다.

배치의 골격은 세로 3구역(왼쪽·가운데·오른쪽) 분할이다.

세 창의 정렬 규칙

세 창의 배너 줄(STORAGE · WORKSTATION · MARKET)이 같은 높이에 온다. 본체 높이도 셋 다 같으므로 아래쪽도 맞는다.

세 열은 전부 위 슬롯 / 본체 / 아래 슬롯 3단으로 같게 만든다.

"상단바"가 아니라 "상태 패널"이다. 위젯이 위 칸으로 가면 이 패널은 아래로 내려가므로, 위치를 이름에 담으면 절반은 거짓이 된다. 담는 것(계정 레벨·골드·시스템 아이콘 = 상태)으로 부른다. v2 목업에는 아직 "상단바"로 적혀 있다.

• 창고·거래에도 같은 높이의 빈 자리를 두어야 본체 높이가 맞는다. 작업슬롯 열만 위아래로 무언가 붙으면 그만큼 본체가 밀려 배너 줄과 아랫변이 어긋난다.
• 하단 버튼 5개는 창 밖이 아니라 본체 안쪽 아래에 들어간다. 창 밖에 붙이면 작업슬롯 열만 길어져 같은 문제가 생긴다.

2.0 여는 순서 — 작업슬롯이 진입점이다

위젯 [↑] ─→ 작업슬롯 본체 ─┬─→ 창고
                           └─→ 거래

• 위젯의 ↑ 버튼으로 가장 먼저 열리는 것은 작업슬롯 본체다. 창고·거래는 작업슬롯 본체 하단의 버튼으로 연다 — 위젯에서 직접 열지 않는다.
• 작업슬롯 캔버스는 위젯의 세로 라인을 따라간다. 위젯이 왼쪽 칸에 있으면 왼쪽 라인에, 오른쪽 칸에 있으면 오른쪽 라인에 맞춰 열린다. ⏸ 구현은 추후 작업이다 — 지금은 방향만 확정.

2.0.1 왜 이 순서인가 — 동선이 한 방향이다

• 창고에 들어온 캐릭터·장비를 작업슬롯으로 끌어다 배치한다.
• 슬롯을 클릭하면 그 슬롯의 설정 오버레이가 열리고, 거기서 캐릭터에 장비를 착용시킨다.
• 오른쪽은 결과물의 출구(거래소) 와 입구(상점) 다. 왼쪽 → 가운데 → 오른쪽으로 흐름이 한 방향이라 헷갈리지 않는다.

원본 근거: 방향 제안 2장.

2.1 위젯 (상주 레이어)

이 게임의 얼굴이자, P1을 지키거나 어기는 지점이다.

배치 — 6칸 프리셋 (2026-08-01 확정)

위젯은 창을 나눈 6칸 중 하나에 놓는다. 화면(모니터)이 아니라 창 안 기준이다 — 창을 화면 어디에 둘지는 9분할 앵커가 따로 담당한다(2장 첫 표).

• 자유 드래그는 두지 않는다. 프리셋만 있으면 좌표를 저장할 필요가 없고, 창 배율(1x~2x)이 바뀌어도 CanvasScaler가 비례해 자리를 유지한다 → 3장의 "위치·크기 보존" 논점이 여기서 닫힌다.
• 멀티 모니터는 "어느 모니터 + 창의 9분할 앵커" 로 표현된다. 위젯 6칸과는 무관하다. 어느 모니터에 띄울지는 3장에 남은 미결 항목이다.
• 이 6칸이 곧 세로 3구역 분할의 기준선이고, 작업슬롯 캔버스가 그 라인을 따라간다(2.0).

구현 방식 — 정렬 그룹 + 형제 순서 (씬 골격 확정분).

상태 패널은 항상 위젯의 반대편 슬롯으로 간다. 창고·거래 열에도 같은 위/아래 빈 슬롯을 두어 세 열의 배너 줄 높이를 맞춘다.

3열 순서 규칙 — 작업슬롯과 창고는 항상 붙어 있다 (2026-08-01 확정)

규칙은 하나다: 거래는 작업슬롯에서 가장 먼 끝에 둔다. 그러면 창고가 자동으로 사이에 남는다. (작업슬롯이 가운데면 양끝이 같으므로 기본 배치 — 창고 왼쪽 · 거래 오른쪽)

왜 창고가 붙어야 하는가 — 창고는 작업슬롯에 끌어다 넣는 재료(캐릭터·장비)다. 드래그 거리가 곧 조작 비용이므로 재료는 항상 옆에 있어야 한다. 거래는 결과물의 출구·입구라 한 번 갔다 오면 되는 곳이고, 멀어도 손해가 적다.

2.0.1의 동선은 "재료 → 작업 → 시장" 이라는 순서가 핵심이지 화면 좌우가 핵심이 아니다. 위젯이 오른쪽이면 이 순서가 오른쪽에서 왼쪽으로 읽힐 뿐, 인접 관계는 그대로 유지된다.

위젯이 표시하는 것 (v2 기준)

연출은 여기서 돌리지 않는다. 배경·공격 모션은 큰 창 전용이다(1장 연출 2레이어). 상시 실행 앱에서 리소스는 기능이 아니라 생존 조건이다.

2.2 큰 창 (조작 레이어)

2.3 알림 정책 (P1 직결)

원칙: 어떤 알림도 "지금 클릭하지 않으면 손해"를 만들지 않는다.

2.4 작업슬롯 캔버스 하단 — 특별 이벤트 자리 (2026-07-31)

작업슬롯 캔버스에는 슬롯 말고 다른 것을 넣지 않는다. 그 본체 안쪽 아래에 버튼 한 줄을 둔다. v2 목업에서 이 줄은 버튼 5개로 구체화됐다 — 창고 · 거래 · 미정 ×3. 비어 있는 3칸에 채취 루프 바깥의 콘텐츠가 들어온다.

지금 필요한 것은 자리를 비워 두는 것이지 콘텐츠를 만드는 것이 아니다.

• 버튼이 늘어나도 작업슬롯 영역이 밀리거나 줄지 않게 레이아웃을 잡는다
• 비어 있을 때는 잠긴 표시를 보여 주지 않는다. 잠긴 칸을 보여 주면 "지금 못 하는 것"이 상시로 눈에 남는다
• 이 층은 큰 창에서만 열린다. 상시 위젯에는 올라오지 않는다

⚠️ 여기 들어오는 것은 무엇이든 사냥 4.2의 보스 4원칙을 지킨다 — 도전 시점 자유 · 실시간 조작 없음 · 실패해도 티켓만 손실 · 기간 한정 없음.

버튼에 배지·타이머·"오늘까지" 표시를 붙이지 않는다. 붙이는 순간 바탕화면 상주 위젯이 재촉하는 물건이 되고, 2.3의 알림 원칙과 P1(주의를 뺏지 않는다)을 동시에 어긴다.

왜 작업슬롯 열인가 — 창고는 배치에 쓰는 재료(캐릭터·장비), 거래는 결과물의 출구·입구다. "모은 것을 쓰는" 콘텐츠는 슬롯과 같은 열에 있어야 동선이 한 방향으로 유지된다.

구현: 일감 T-015

3. 데스크톱 환경 제약

바탕화면 상주 앱 특유의 문제들. 기획 단계에서 답이 있어야 한다.

상시 실행 앱에서 리소스 사용량은 기능이 아니라 생존 조건이다. "게임 때문에 노트북이 느려진다"는 즉시 삭제 사유다. 1장의 연출 2레이어가 이 요구에 대한 구조적 답이다 — 창을 닫으면 그리기를 멈춘다.

4. 아트 방향

희귀도 색상 (Enum.xlsx 확정값):

5. 구현 접점

6. 결정 필요 (Open Questions)

1. 위젯의 크기·형태는? — ⏸ 배치는 해소됐다 (창 안 6칸 프리셋 · 2.1). 크기와 형태는 여전히 미정이다.
2. 항상 위(Always on top) 기본값은 켜짐인가 꺼짐인가?
3. 전체화면 앱 감지 시 자동 숨김을 넣는가?
4. 트레이 상주를 지원하는가?
5. 사운드를 넣는가? 넣으면 기본 꺼짐인가?
6. 목표 리소스 사용량 상한은? (CPU %, 메모리 MB)
7. 상시 스트립의 방향은? 탑뷰 / 가로 / 세로 — 슬롯이 8개까지 늘어나므로 세로안만 폭이 늘지 않는다. → v2 목업 상단의 위젯 스트립 토글에서 3안을 비교할 수 있다.
8. 3열 패널을 동시에 띄우는가? ✅ 해소 (2026-08-01) — 상주하는 것은 위젯뿐이다. 3열은 필요할 때 여는 큰 창이고, 진입점은 작업슬롯 캔버스다 (1장 · 2.0).
9. 상점은 골드 상점인가 현금 상점인가? ✅ 해소 (2026-08-01) — 골드 상점 (1장). 품목은 작업슬롯 확장권 · 가챠 티켓이고 가격은 전부 미정 → 거래 3.2. ⚠️ 슬롯 확장은 골드만으로 사는 것이 아니다 — 계정 레벨이 상한을 열고 골드가 구매한다 (이중 게이트). 상점 UI는 "레벨이 모자라 아직 못 사는 슬롯"을 표현할 수 있어야 한다.
10. 해금하지 않은 산업 레벨을 배치 UI에 보여 주는가? (2026-08-01 신규) 보여 주면 목표가 되고, 숨기면 "지금 못 하는 것"이 눈에 남지 않는다 — 2.4에서 잠긴 칸을 숨기기로 한 것과 정확히 같은 성격의 판단이다. 다만 배치 UI는 슬롯을 눌렀을 때만 열리므로 상시 노출이 아니다. 여기서는 보여 줘도 P1과 충돌하지 않을 수 있다. → 산업 레벨
11. 적성 0 캐릭터를 배치 선택창에 보여 주는가? (2026-08-01 신규) ⚠️ v2 목업이 확정 사항과 어긋난다고 스스로 적어 둔 지점이다. 작업슬롯 3.4는 "적성 0도 배치 가능(느림) · 배치 UI에서 전부 선택 가능" 인데, 목업은 선택창에서 제외한다. 어느 쪽이 맞는지 기획 확인이 필요하다. → 확정 전까지 T-006의 배치 UI를 못 박지 않는다.
12. 작업슬롯 캔버스 하단 버튼 3~5번에 무엇이 들어가는가? (2026-08-01 신규) 2.4의 "특별 이벤트 자리"와 같은 칸인지, 별개의 층인지부터 정해야 한다.
13. 위젯이 좌·우 끝일 때 3열을 어떻게 두는가? ✅ 해소 (2026-08-01). 작업슬롯과 창고는 항상 붙어 있고, 거래를 가장 먼 끝에 둔다 → 2.1 3열 순서 규칙. 동선의 핵심은 좌우 방향이 아니라 "재료 → 작업 → 시장"의 인접 관계이므로 2.0.1과 충돌하지 않는다.