디자인 시스템

화면 5장의 역할과 화면별 기능 규칙은 화면·기능 요구에 있습니다. 이 페이지는 그 규칙을 색·서체·레이아웃 결정으로 옮긴 것입니다.

연출 원칙이 디자인 규칙이다

전면 텍스트 기반이며, 사망 장면은 직접 묘사하지 않는다.

사건 자체가 아니라 정황과 단절로 전달한다
하루가 끝나는 방식, 마지막에 남은 말, 되돌아온 아침으로 처리한다
공개 배포 환경이므로 폭력·유혈 묘사를 배제한다
손상은 설명되지 않고 발생만 한다. 시스템은 “무언가 이상하다”고 알려주지 않는다

화면이 조용해야 손상 연출이 드러납니다. 장식·애니메이션은 최소로 두고, 움직임은 아침 문장 타자기 한 곳뿐입니다.

레이아웃 선택 — 셋 중 무엇도 단독으로는 안 된다

안	비유	장점	단점
A · 메신저형	카톡처럼 말풍선이 쌓인다	처음 보는 사람이 0초 만에 조작법을 안다 — 12.4의 30초 진입에 최적. 발화 예산·전송 버튼이 자연스럽게 붙는다	미스터리 톤이 죽는다. 일상 앱처럼 보인다. 서술(아침·죽음·정황)이 들어갈 자리가 없다
B · 소설형	비주얼 노벨처럼 문장이 흐른다	4.9 연출 원칙(정황과 단절)에 가장 맞는 톤. 손상 1층(대사 미세 변형)이 텍스트 안에서 작동한다	예산·입력 같은 게임 UI가 붙을 자리가 어색하다. “내가 지금 뭘 할 수 있지?”를 학습해야 한다
C · 터미널형	로그가 흐르는 콘솔	인스펙터와 시각 언어가 통일된다. 1차 사용자(에이전트 개발자)에게 어필	3차 사용자 — 게임을 안 하는 사람 — 에게 진입장벽. 불특정 방문자에게 “개발자 장난감”으로 읽힐 위험

선택 — A+B 하이브리드, C는 인스펙터에만 서술(아침·정황·단절)은 소설형 문단으로, 발화는 메신저형 입력으로, 시스템(침묵 권고·인스펙터)은 모노스페이스로. 한 화면 안에서 글꼴과 색이 층을 구분합니다 — 세리프는 세계, 산세리프는 대화, 모노는 기계.

모바일 1열이 기준입니다(불특정 방문자 유입은 폰이 많다). 데스크톱에서는 노트·인스펙터가 우측 레일로 펼쳐집니다. 본 화면은 상단에 「오늘」과 발화 예산 점, 가운데에 대화·노트·인스펙터 중 하나, 하단에 세 탭을 둡니다. 인스펙터 탭에는 새 판정이 기록될 때 점 하나가 켜집니다.

서체 — 세 층이 세 목소리

층	서체	어디에
세계	세리프 (Noto Serif KR)	아침 문장, 정황, 단절, 시스템 서술
대화	산세리프	사람의 말 — 말풍선, 입력, 버튼
기계	모노스페이스	판정 로그, 권고 근거, 예산 점

읽기가 전부인 제품이므로 본문 타이포가 최우선입니다. 한글 행간 1.8 이상, 어절 단위 줄바꿈.

토큰

색·모션·정보 밀도는 잠정값입니다 컨셉 영상이 레포에 없는 상태에서 텍스트 전면 · 정황과 단절 · 손상은 조용히 발생이라는 연출 원칙만 확정이므로, 그 방향에 맞는 잠정 토큰을 둡니다.

게임의 소재에서 뽑았습니다 — 7시 12분의 새벽빛, 복사본의 복사본이 되어가는 세계, 종이 노트. 그래서 테크 블랙이 아니라 먹이 번진 어두운 세피아가 바탕이고, 개발 문서 사이트의 청록은 게임 프레임 안에서 일부러 쓰지 않습니다 — 문서(도구)와 게임(세계)이 색으로 구분됩니다.

게임 팔레트

이름	값	어디에
잉크 바탕	`#100e0b`	본 화면 배경
바랜 활자	`#d6cfc0`	본문, NPC 말풍선 글자, 전송 버튼
새벽빛	`#b6c2ce`	아침 문장·시간에만
연필	`#8a8172`	서술·노트
호박	`#c9973f`	침묵 권고
기계	`#6f9bbf`	인스펙터만 — 게임 밖 계층, 유일하게 차가운 색

아침 화면 배경은 잉크보다 한 단계 어두운 #0b0a08, 암전(단절)은 #000입니다. 노트 불일치(손상 2층)는 왼쪽 선 색만 #b5766f로 바뀌고 글자는 #c9a09a — 오류처럼 보이지 않아야 합니다.

상태색 · 간격 · 반경

상태색은 3종만 선확정: danger #EF6461 · warn #F2C94C · success #31D0AA
간격 4px 배수 / 반경 sm 6 · md 10 · lg 16
목업 프레임: 폭 min(420px, 100%), 높이 680, 반경 18

기획서 조항 → UI 결정

기획서	조항	UI 결정
12.4	30초 진입 · 로그인/설치 없음	첫 화면이 곧 게임 시작. 온보딩·타이틀 화면 자체를 두지 않는다
4.9	루프 카운터 미노출	헤더에 숫자 금지 — 노트가 대신 센다
4.9	사망 직접 묘사 금지	죽음 = 암전 + 문장 단절. 사인 텍스트를 쓰지 않는다
4.9	손상은 설명 없이 발생	시스템 알림 금지. 텍스트 자체가 변형되고 알아차림은 유저 몫
5.1	발화 예산 = 핵심 자원	항상 보이는 점(●●●○). 숫자보다 “줄어드는 감각”이 소모감에 맞는다
5.5	권고는 희소 · 근거 필수 · 무시 가능	모달(강제) 금지 → 배너. 따른다/무시한다 버튼이 곧 로깅 지점
8.8	인스펙터는 게임 밖 계층	모노스페이스 + 차가운 파란색으로 시각 언어를 일부러 분리

화면별 설계 메모

화면	목업에서 확인한 것	실제 구현에서 달라지는 것
아침	고정 문장 타자기 연출 · 2번째 아침에서 두 번째 문장이 달라진다(손상 1층)	후반 루프에서 첫 문장(7시 12분)을 딱 한 번 흔든다
대화창	예산 점이 줄어드는 감각 · 발화 후 되돌릴 수 없음	자유 입력 + NPC 동적 응답. 목업은 각본 미리보기 방식
침묵 권고	배너로 침입하고, 근거가 붙고, 무시할 수 있다	발동 빈도 자체가 튜닝 대상(5.5) — 희소해야 한다
노트	루프별 타임라인 + 검색 · 루프 카운터를 노트가 대신 센다	자연어 검색(임베딩) — 목업은 단순 텍스트 필터
인스펙터	ask_npc 호출 체인이 열린다 · 게임과 다른 시각 언어	실제 판정 로그 스트림 + 도메인 전이 시연에서 같은 화면 재사용

“7시 12분”은 프론트에서 하드코딩하지 않습니다 후반에 한 번 바뀝니다. 서버가 morning.fixed로 내려주는 값을 그대로 렌더합니다. 프론트가 상수로 박아두면 이 연출이 죽습니다.

무시 버튼을 눈에 띄지 않게 만들면 측정이 망가집니다 “근거 표시가 채택률을 올리는가”를 A/B로 재는 게 목적인데, UI가 수용을 유도하면 측정값이 UI 편향이 됩니다. 두 버튼을 동등하게 놓습니다. 목업에서 「따른다」는 호박색 테두리, 「무시한다」는 기본 테두리이지만 크기와 위치는 같습니다.

목업 각본 — 한 루프

기획서 8.8의 예시 시나리오를 LLM 없이 각본으로 넣어 아침 → 대화(예산 소모) → 출처 빌린 거짓말 발각 → 침묵 권고 → 하루의 끝 → 2번째 아침까지 한 루프를 돌게 했습니다. 실제 게임에서는 NPC 응답과 판정이 전부 동적입니다.

#	유저	채연	인스펙터에 기록되는 것
1	오늘 저녁에 뭐 해?	글쎄, 별일 없는데. 왜?	의심 판정 → 변화 없음 (일상 발화)
2	요즘 민석 좀 이상하지 않아?	민석이? 평소랑 똑같던데.	의심 판정 → 의심도 +3 (누적 29 / 임계 60)
3	어제 준이 네 얘기 물어보더라.	그래? …준이 그런 말을 했다고.	의심 판정 +5 (누적 41) → 도구 호출 `ask_npc(준, "유저 얘기")` [탐문 예산 2→1] → 도구 결과 “없음” · 부작용: 준.의심도 +6 → 불일치 판정 +15 (누적 56). 침묵 권고 배너 발동
4	오늘 밤에 밖에 나가지 마. 부탁이야.	…뭐? 너 요즘 왜 그래?	의심 판정 +9 (누적 65 / 임계 60) ⚠ 임계 돌파 → 재계획: 유저 유도를 역방향으로 해석

아침 1   7시 12분. 눈을 뜬다. / 창밖에서 물 트는 소리가 난다.
암전     오후 11시 40분. / 물 냄새가 났고, 그 다음은—
노트     L1 · 밤 11시 40분 · 물 냄새 · 계단 근처였다
         L1 · 준이 내 이름을 판 걸 알게 됐다 — 채연이 확인했다   ← 손상 2층 색
인스펙터 ── 루프 종결 · Evaluator ──
         원인 체인 → 채연 불안 상승 → 민석에게 보고 → 경로 성립
         메모리 정책 → 채연·은상 소거(5% 잔류) · 유저 노트 유지 · 손상 유지
아침 2   7시 12분. 눈을 뜬다. / 천장이 조금 낮아 보인다.          ← 손상 1층
         예산이 6에서 5로 줄었다. 정보는 남고, 사람은 닳는다.

권고를 따르면 adopt=true, 무시하면 adopt=false가 인스펙터에 기록됩니다 (11.2 채택률 지표).

접근성 최소선

본문 대비비 4.5:1 이상
터치 영역 44×44
주요 플로우를 키보드만으로 완주 (대화 입력 → 전송 → 권고 응답)
시스템 글자 크기 확대 시 잘림 없음
prefers-reduced-motion이면 타자기 연출을 포함한 움직임을 끈다

결정 로그

날짜	결정	이유
2026-09-03	화면을 5장으로 고정, 랜딩·로그인 삭제	12.2 · 12.4
2026-09-03	아침 고정 문장을 서버에서 내려받아 렌더	후반에 한 번 바뀌는 연출을 살리기 위해
2026-09-03	의심도·신뢰도 UI 비노출 확정	은닉형 설계. 인스펙터에서만 개봉
2026-09-03	권고 배너의 수용/무시 버튼 동등 배치	UI 편향이 11.2 측정을 오염시킴
2026-09-03	A+B 하이브리드 레이아웃, 터미널형은 인스펙터에만	30초 진입과 연출 원칙을 동시에 만족. 인스펙터는 게임 밖 계층
2026-09-03	게임 팔레트를 세피아 계열로, 문서 사이트의 청록은 프레임 안에서 금지	도구(문서)와 세계(게임)를 색으로 구분