07. 게임 UI

상위 문서: 게임기획코어.md 상태: 3열 배치 · 연출 2레이어 · 위젯 배치·스트립 방향 확정 · 슬롯 연출 = 방치형 루프(2026-09-27) / 목업 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-017 완료 — C_WorkStationAssignRequest.IndustryLevel). 해금은 해금으로 통일됐다(2026-09-14) — 잠긴 것은 전부 보이고 조건도 보인다. 계정 레벨 요구치(T-016)가 정해지면 목업을 갱신한다. → 산업 레벨

2. 화면 구조

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

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

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

⚠️ 세 축을 섞지 않는다. "창을 화면 어디에 두는가"(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레이어). 위젯에 허용하는 것은 픽셀 머리 좌우 흔들기 + 판정 때 아이템 떠오름 두 가지뿐이다 (2026-09-27 → 2.5). 상시 실행 앱에서 리소스는 기능이 아니라 생존 조건이다.

2.2 큰 창 (조작 레이어)

2.3 알림 정책 (P1 직결)

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

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

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

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

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

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

버튼에 배지·타이머·"오늘까지" 표시를 붙이지 않는다. (예외는 우편함 버튼의 점 하나 — 숫자·기한이 없고, 기다리는 것이 사라지지 않는 보상이다) 붙이는 순간 바탕화면 상주 위젯이 재촉하는 물건이 되고, 2.3의 알림 원칙과 P1(주의를 뺏지 않는다)을 동시에 어긴다.

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

구현: 일감 T-015

2.5 작업슬롯 연출 — 방치형 루프 (2026-10-04 갱신 · T-097)

연출 수치(시간·거리·배율)는 공용 설정 하나로 모든 슬롯에 걸리고, 캐릭터마다 다른 값(멈추는 거리 등)만 캐릭터 그림에 덧붙인다 — 클라 Art 규칙.md.

전 산업이 같은 형식이다. 산업마다 바뀌는 것은 대상의 그림뿐이다. 캐릭터는 오른쪽에 서서 왼쪽을 보고, 세상이 캐릭터 쪽으로 흘러온다.

[달리기]  배경이 흐른다(패럴랙스) · 캐릭터는 제자리 달리기 · 대상이 왼쪽에서 다가온다
     │  대상이 사거리에 닿는다 → 대기 자세 한순간(숨)
     ▼
[공격]    배경이 멈춘다 · 연속 공격(1→2→…타) — 때릴 때마다 대상이 하얗게 번쩍인다
     │  마무리 공격의 타격 = 게이지 도착 = 판정
     ▼
[처치]    마무리 공격이 동작을 마저 한다(여운) · 쓰러진 대상이 그 자리에서 사라진다
     │  배경·캐릭터는 처치 순간의 상태 그대로 — 처음으로 되돌리지 않는다
     ▼
[달리기]  … 다음 대상 (무한)

위상을 어긋나게 둔다. 같은 속도의 슬롯이 여러 개면 모두 같은 순간에 처치·드랍해 동기화돼 보인다 (기획평가 — "위젯이 30초마다 5개 동시 발화"). 배치 시각이 슬롯마다 달라 대체로 흩어지지만, 같은 순간에 배치한 슬롯은 겹칠 수 있다.

그림의 규격·가공 절차는 Assets/Art/Art 규칙.md에 있다.

미결

• 판정 주기의 하한 — 산업 Lv1~5에 하한(예: 1초)을 걸어 "다가오기 1초 + 공격 1번"을 늘 보장할지. 하한이 1초면 타격 전 준비 동작(0.2~0.4초)이 들어갈 틈이 없어 다가오기가 그만큼 줄어든다 — 하한은 1초 + 타격까지로 잡아야 온전하다. 서버 판정식·밸런스가 바뀌는 일이라 클라 단독으로 정하지 않는다 → T-102. 지금은 위 "짧은 주기" 규칙으로 버틴다
• 떠오르는 아이템 그림의 출처 — 로컬 타이머가 먼저 닿으므로, 서버 결과를 기다릴지 산업 대표 아이콘으로 먼저 띄울지

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. 상시 스트립의 방향은? ✅ 해소 (2026-08-26) — 가로. 위젯이 창 안 6칸 중 한 칸을 가로로 길게(폭 633 × 높이 87) 차지하므로, 같은 자리에 세로 스트립을 세우면 칸 크기가 87px 안에 갇힌다. ⚠️ 폭이 늘어나는 단점은 그대로 안고 간다 — 슬롯 8개면 칸(49) + 간격(4)으로 약 420px를 쓴다. 위젯 폭(633)에는 들어가지만 슬롯이 8을 넘으면 다시 봐야 한다. → v2 목업 상단의 위젯 스트립 토글에서 3안을 비교할 수 있다.
8. 3열 패널을 동시에 띄우는가? ✅ 해소 (2026-08-01) — 상주하는 것은 위젯뿐이다. 3열은 필요할 때 여는 큰 창이고, 진입점은 작업슬롯 캔버스다 (1장 · 2.0).
9. 상점은 골드 상점인가 현금 상점인가? ✅ 해소 (2026-08-01) — 골드 상점 (1장). 품목은 미정이다 — 작업슬롯 확장권은 상점 품목이 아니다 (2026-09-16 · 잠긴 칸에서 직접 연다 → 해금 4.1). ⚠️ 가챠는 상점 품목이 아니다 — 골드를 직접 내고 뽑는 별도 화면이다 → 캐릭터 5.1. ⚠️ 슬롯 해금은 잠긴 칸의 조건 표시(골드·선행)가 담당한다 → T-039.
10. 해금하지 않은 산업 레벨은 보여 준다 — 조건과 함께 ✅ (2026-09-14 → 해금 7장). 2.4의 "비어 있을 때는 잠긴 표시를 보여 주지 않는다"는 기획이 없는 콘텐츠 자리에 대한 규칙이고, 해금 대상(슬롯·산업 레벨·특성)은 전부 보인다. 여기서는 보여 줘도 P1과 충돌하지 않을 수 있다. → 산업 레벨
11. 적성 0 캐릭터를 배치 선택창에 보여 주는가? ✅ 해소 (2026-08-10) — 보여 주되 잠근다. 질문이 남아 있던 근거("작업슬롯 3.4는 적성 0도 배치 가능이라는데 목업은 제외한다")가 이미 낡은 서술이었다. 3.4는 2026-08-01에 적성 0 = 배치 불가로 재확정되면서 표에 "배치 UI: 적성 0 캐릭터를 잠금 표시" 를 함께 못 박았다 — 즉 제외(숨김)가 아니다. 목록에는 남기고 버튼만 잠근다. 숨기면 "내 캐릭터가 왜 안 보이지"가 되고, 장비 등으로 적성 0 → 1 승격이 생겼을 때 화면이 조용히 틀린다. → 구현 완료 (WorkStationSelectPresenter · 이슈 #13).
12. 작업슬롯 캔버스 하단 버튼 3~5번에 무엇이 들어가는가? ✅ 해소 (2026-09-16) — 2.4의 특별 이벤트 자리와 같은 줄이다. 별도 층을 두지 않는다. 인벤토리·거래 옆 빈 자리에 채취 루프 밖의 콘텐츠(보스 · 대형 작업물)가 들어오고, 줄 높이가 고정이라 버튼이 늘어도 작업슬롯 영역은 밀리지 않는다. 무엇이 들어가는지는 여전히 미기획이다 — 2.4의 후보 표를 따른다.
13. 적성 포인트를 어디서 찍는가? ✅ 없어짐 (2026-10-06). 레벨 효과가 작업속도 자동 가산으로 바뀌어 찍는 화면 자체가 사라졌다 → 캐릭터 5.4 · 이슈 #35.
14. 위젯이 좌·우 끝일 때 3열을 어떻게 두는가? ✅ 해소 (2026-08-01). 작업슬롯과 인벤토리는 항상 붙어 있고, 거래를 가장 먼 끝에 둔다 → 2.1 3열 순서 규칙. 동선의 핵심은 좌우 방향이 아니라 "재료 → 작업 → 시장"의 인접 관계이므로 2.0.1과 충돌하지 않는다.