MEGAFONT

캠퍼스 공공 발화 시스템. 학생이 폰으로 한 줄을 쓰고 그 형식까지 직접 정해 캠퍼스 벽에 올린다. 올라간 글은 사흘 동안 다른 말들 사이를 흘러다니다 사라진다. 따로 보관하지 않는다 — 떠 있는 동안이 곧 기록이다.

쓰면, 저 벽에 뜹니다

라이브: https://megafont.vercel.app

---

화면 흐름

00 홈            워드마크 MegaFont · 부제 · 그 밑 글자 '자세히 보기'(누르면 About 한 장이 화면을
                 덮는다 — 제목과 네 문단, X로 닫는다) · 가운데 큰 메가폰트 ·
                 [처음이에요: 튜토리얼 3장 → 시작] / [써봤어요: 바로 01] (PhaseHome). 두 버튼은 같은 크기 ·
                 같은 글자, '처음이에요'만 강조색 면이고 '써봤어요'는 옅은 회색 면(2026-10-29 — 확인 창의 '아니오'도
                 같은 면. 1px 선 칸을 거쳤는데 선 칸 하나만 테두리가 있어 어색했다).
                 메가폰트의 나팔 입에서 옅은 회색 소리 결이 입이 향한 쪽으로 숨 쉬듯 퍼진다(벽의
                 평소 결과 같은 박자). 사람들이 걸어와 그림자 줄 가까이에 서서 빨개질 때마다 굵은
                 결이 한 번 나간다 — 소리의 결만 있고 말풍선은 없다. 메가폰트는 노란 빛 없이 옆모습만
                 오간다(HomeBubbles · HomeCrowd, 2026-10-21 결정 51 — 그전엔 큰 회색 말풍선이 떠올랐고,
                 10-06 ~ 10-20은 풍경 포스터 HomePoster였다. 51의 작은 점 말풍선은 10-22 결정 56에
                 뺐다 — 꼬리 단 말은 벽 하늘에만). 첫인사는 없다.
                 처음 열 때(한 번) 07의 기다리는 창이 떠 두 눈이 깜빡이다 감고, 옛 TV처럼 접혀
                 꺼지며 홈이 드러난다 — 누르면 바로 꺼지고, 움직임 줄이기면 없다(PhaseHome Boot ·
                 BOOT_K가 장면 전체를 한 배율로 늦춘다, 2026-10-20 · 21).
                 **영문판은 보류(2026-09-27)** — lib/lang.ts의 스위치 둘(ENGLISH_DEV ·
                 ENGLISH_PUBLIC)이 꺼져 있어 개발 서버도 배포본도 늘 한국어다. 코드와 영어 문구는 그대로다.
                 영어 화면: 앱의 말은 전부 Whois(빈칸·부호까지, 'Whois Text'),
                 참여자가 고른 성격 서체와 1단계 입력 글은 한국어판과 같다.
   튜토리얼      Step 1(쓰기+성격) · Step 2(꽂기) · Step 3(벽). 첫 장이던 About은
                 2026-09-27에 홈의 Info로 나왔다. 머리줄은
                 뒤로 · 장 이름 · X(첫 화면으로). 제목 22px 가운데
01 한 줄 (1/5)   60자까지. 빈 칸에는 안내 문장과 문장 끝의 커서. 입력은 Pretendard.
                 아래 행에 힌트 "어떤 말을 쓸지 모르겠어요." · 글자 수
02 성격 (2/5)    당당한 / 차분한 / 다정한 / 유머있는 — 줄마다 이름을 그 성격의 서체로,
                 3/5 기본형 모양 그대로(막대 가운데 · 말투 첫째 칸 — 넘어가도 안 바뀐다).
                 2×2 네 칸이 제목과 버튼 사이를 다 채운다(2026-09-27, 09-25~27은
                 세로 목록). 네 칸이 테두리 칸 하나(3/5 스위치 틀과 같은 값, 모서리
                 14)에 담겨 여백 안에 선다(2026-09-29, 그전엔 화면 끝까지 · 십자 선 ·
                 고른 칸 붉은 면 + 체크). 고른 칸에 회색 판(600, 모서리 10) — 누르면
                 그 칸으로 미끄러진다(대각선도). 끌기는 없다(2026-10-06 — 산만하다는 지적) —
                 누르기만. 칸 가운데를 가르는 십자는 우리 점으로 된 점선이고(2026-10-20, 그전엔 1px 실선),
                 고른 칸의 판과 마우스를 올려 밝아지는 칸(손가락엔 안 걸림)은 점선에서 한 칸 띄워 선다.
                 화살표 네 방향. 처음에는 판이 없다(성격을
                 미리 고르지 않는다). 확정 버튼은 아래에 붙는다.
                 320×568에서도 넷이 다 보인다. 그보다 낮아 칸이 가려지면 버튼 띠
                 위에 선 + 아래 화살표
                 목록 아래 선 하나 뒤에 안내 한 줄 — "성격은 앞으로 더 늘어날 예정이에요."
03 조율 (3/5)    붉은 면 첫 장(설명 + 내 글이 그 성격의 서체로 서서 크기·폭을 스스로
                 훑는 시연) → 견본과 조절판. 첫 장 아래 "위로 밀어서 시작해요"(위로 떠오르는 꺾쇠)
                 — 위로 쓸거나 누르면 넘어간다(2026-10-21, 4/5 첫 장도 같다). 두 장 모두 글자마다 뒤에 그 성격의 모듈이 옅게
                 하나씩 선다 — 글은 그대로(GlyphModules, 2026-10-20). 모듈은 바탕이라 좌우 여백을
                 무시하고 붉은 면 양끝까지 번진다(화면 끝에서 잘린다). 첫 장은 앞으로 들어올 때만 선다 — 4/5에서
                 뒤로 오면 곧장 조절판이고, 조절판의 뒤로가기는 2/5로(2026-09-29).
                 줄마다 [이름 | 게이지] 한 줄로 셋:
                 크기 · 속도 · 무게(당당한 · 차분한 · 다정한) — 유머있는(핸드젯)은
                 속도 · 무게 · 말투(2026-10-04 — 벽 글자가 28px 하나라 크기는 묻지 않는다. 속도는 보통 ·
                 재잘재잘 · 한껏 재잘재잘 세 칸, 장평 없이 글자 기울기 0 · 9 · 18°와 떠다니는 박자.
                 말투 `귀여운 | 얄미운`은 2026-10-11에 만들어 10-21에 살렸다 — 얄미운이면 핸드젯 낱알이
                 톱니 세모가 되어 말풍선 속 글자까지 뾰족하게 선다, palettes.ts MANNER · rainFaceOf).
                 말투 스위치는 반으로 나눈 한 칸에 말은 칸 안(SnapSwitch) — 지금 말투를 묻는 성격은 유머있는뿐이다(당당한은
                 10-06 ~ 10-10에 둥켈의 `온화한 | 예리한`을 물었고, 29CM으로 갈리며 무게 다섯 칸이 되었다). 막대는 말의 개수만큼 칸을 낸다.
                 게이지(2026-09-27, 그전엔 1px 선 + 16px 손잡이): 양 끝이 둥글고
                 (규칙의 예외 — 3/5와 4/5의 조절판에서만 알약을 쓴다), 테두리 300 · 트랙 200 안에서
                 채움 600(09-29, 800에서 한 단계 물림)이 테두리에서 4 띄워 선다. 다섯 칸으로 보고 왼쪽부터 지금 칸까지
                 채운다 — 찬 만큼이 세기. 지금 칸의 말은 채움 끝 안(흰 글자 14), 첫 칸은
                 채움 바로 뒤(700). 누른 칸이 곧 값이고, 끌면 채움이 손가락을 따라오다
                 놓으면 가까운 칸에 붙는다. 칸을 지날 때 짧은 진동
                 (안드로이드는 브라우저 기능, 아이폰은 안 보이는 스위치를 대신 누르는
                 우회 — iOS 18 이상, 애플이 막으면 조용히 안 울린다). 끝 칸은 표 값,
                 가운데는 보통, 사이 칸은 이웃한 둘의 중간. 말투 스위치도 같은 틀
                 (판 600이 4 띄워 선다, 말 14). 둘 다 테두리 안 44px. 모양은
                 서체별 표 하나(palettes.ts · formFor)가 정한다. 기울기는 속도
                 가운데 0° → 오른쪽 끝 18°
04 담기 (4/5)    3/5처럼 두 장(2026-09-28). 첫 장은 검은 무대에 "발화를 어떻게
                 담아볼까요?"와 안내, 그리고 시연 — 들어오자마자 낱개가 모여 서고, 다 모여 잠깐 머문 뒤
                 다른 모양 · 다른 색으로 흩어졌다 다시 모이기를 되풀이한다. 고르는 장에서 모양을 누를 때와 같은
                 움직임이다(2026-10-29 — 견본 셋 중 C. 그전엔 말풍선이 서 있고 1.7초 뒤부터 색만 돌아 "앵~" 늦었다).
                 색 여덟 짝 · 모양 칸을 같은 시간씩 차례로 돈다(어느 것도 권하지 않는다. 움직임 줄이기에서는
                 모인 채 그대로). 글은 그 안 제자리에서 옅게 나타난다(2026-10-21 — 그전엔 위에서 굴러 떨어졌다). "위로 밀어서 시작해요" — 위로 쓸거나 누르면 →
                 첫 장이 위로 빠지고 고르는 장이 올라온다(3/5처럼 첫 장은 앞으로 들어올
                 때만 — 5/5에서 돌아오면 곧장 고르는 장, 그 뒤로가기는 3/5로). 위는 미리보기(검은 무대
                 가운데에 꼬리 없는 내 말의 점 말풍선 — DotBubble), 아래는 3/5의 회색 조절판 그대로 [이름 | 잣대] 두 줄:
                 색 — 룰렛(2026-09-29). 둥근 틀 안 창 하나에 지금 짝 하나(배경색 면에
                 글자색으로 그 짝의 이름 — 흰 · 밤하늘 · 딸기우유 · 풍선껌 …), 오른쪽 끝에 ▲▼.
                 위아래로 쓸거나 ▲▼를 누르면 이웃 짝이 굴러 들어와 한 짝에 멈춘다 —
                 한 번의 손짓은 한 칸, 끝에서 처음으로 이어진다. 짝은 성격마다 여덟
                 (palettes-v2 `ATTITUDE_COLORS`, 네 성격이 서로 덜 겹치게 골랐다. 2026-10-21 성격의 결은 두고
                 색상을 고르게 넓혀 다시 짰고 이름은 사물로 — 당당한만 기본 색이름). 처음
                 들어오면 그 성격에 흰 짝이 있으면 흰 바탕 · 검정 글자, 없으면 첫 짝.
                 (10-04 ~ 10-19 유머있는의 획 처리 — 검은 알약에 색 테두리 — 는 비눗방울과 함께 걷혔다.)
                 고른 뒤에는 그 짝이 남는다. '이렇게 담을게요'는 고른 짝을 입고 테두리가
                 없다 — 판과 거의 같은 옅은 짝(흰 · 조약돌 · 안개 · 다정 하늘)에서는 진한 회색 칸.
                 모양(2026-10-01까지 '정렬', 안내문도 '모양과 색') — 네 성격 모두 같은 세 칸(말투 스위치와
                 같은 부품): `기본 | 미소 | 단호`. 미소는 아래로 볼록한 호, 단호는 덩어리째 오른쪽 위로
                 기울인다(lib/aggregate.ts arrangementsFor · SLANT, 2026-10-20 — 같은 날 아침의 성격마다 다른
                 열두 칸은 읽기 힘들고 도킹 때 효과가 안 나와 셋으로 줄였다). 고르면 미리보기의 말이 낱개부터
                 다시 모여 그 모양으로 선다. 고른 값은 벽까지 간다. 사흘 안의 옛 글이 지금 칸에 없는 값
                 (계단 · 하이킥 · 휘기 · 둥실 …)이면 기본으로 그린다.
                 트랙과 스위치는 3/5처럼 알약(규칙의 예외). 버튼 "이렇게 담을게요"
05 미리보기 (5/5) 화면째 검정(2026-09-27, 그전엔 흰 화면 속 16:9 액자). 4/5에서 담은 말풍선이
                 다 모인 모습 그대로 멈춰 서고, 마지막 확인만 받는다(2026-10-21 — 4/5와 같은
                 DotBubble · 같은 칸 폭이라 색 · 모양 · 크기가 같다. 그전엔 벽의 큰 말처럼 등장하고
                 '다시 보기'가 있었는데, 실제 폰에서 가운데에 말이 안 뜨는 일이 있어 걷었다).
                 그 말의 밑동에서 꼬리가 자라고(폰에서 꼬리가 있는 곳은 여기뿐 — 결정 56의 예외), 벽의 작은
                 사람 둘이 양옆에서 뛰어들어 두 번 폴짝 기뻐하며, 말풍선 아랫가장자리에서 그 말 색 부스러기가
                 튕튕 떨어져 양쪽 땅에 소복이 쌓인다. 한 번만. 말풍선 위 끝 ~ 사람 발이 한 덩어리로 무대 세로
                 가운데(2026-10-29 — PreviewYard. 처음엔 더미를 눈덩이로 굴려 내보냈는데 어색해 뺐다).
                 "보낸 뒤에는 수정할 수 없어요". CTA 안에서 전송·로딩·오류 재시도
06 도킹          위쪽부터 세로로 넣는 안내. 꽂히면 홈의 스위치가 다음을 부른다.
                 화면째 검정(5/5와 같은 무대, 2026-10-27). 머리줄은 오른쪽 X 하나(작성 단계와
                 같은 X, 그전엔 왼쪽 집 + '도킹') — 누르면 "정말 종료하시겠어요?"를 묻고 기록을 지운다
07 발화 중       브랜드 빨강 화면에 두 눈과 흰색 남은 시간. 최대 30초. 그 뒤로 벽의 도킹과
                 같은 순간 · 같은 박자로 소리의 결이 화면 아래(꽂힌 기기 쪽)에서 위로 퍼진다
                 (2026-10-20 — 벽과 같은 셈 dockPlanOf · lib/sky.ts. 움직임 줄이기면 결 없이)
08 완료          “발화 종료” + 메아리 안내 + 익명성·운영 원칙 + [한 줄 더 쓰기]. 메가폰트도
                 구경꾼도 없다 — 위쪽 띠에서 회색 지난 말들이 부채꼴로 맴돌고, 그 아래 내 말풍선
                 (5/5와 같은 모양 · 색, 화면 폭 가까이) 위에 벽의 작은 사람 둘이 웃으며 앉아 발을
                 까딱인다. 말에는 회색 말도 내 말도 꼬리가 없다(결정 56). 말풍선과 사람이 한 덩어리로
                 위아래로만 두둥실 뜨고, 규칙 목록 바로 위에 앉는다(꼬리가 있던 몫만큼 내렸다).
                 자리가 모자란 작은 화면에선 크기를 지키고 메아리 띠까지 올라간다
                 — 회색 말들이 그 뒤로 지난다(DoneSky, 결정 32 · 2026-10-20. 그 오후까지는
                 메가폰트 위 부채꼴 하늘에 내 말이 쏘아 올라 앉았다).
                 그 아래 화면 끝까지 가는 선 하나 뒤에 의견 칸(최대 200자, 보낸 시각과
                 본문만 저장 — /admin에서 관리자만 읽는다. '보내기'는 입력칸 오른쪽 선에 맞춘 오른쪽 끝,
                 2026-10-29 — 왼쪽에선 아래 '© 2026'과 한 줄로 읽혔다)과 만든 사람 줄

번호는 2026-09-25에 실제 차례대로 다시 매겼다. 옛 표는 성격 → 조율 → 한 줄 순서였고 스플래시가 있었다 — 옛 번호로 02 성격 · 03 조율은 그대로, 옛 09 완료는 이 표의 08이다.

01~05의 머리줄은 뒤로 · 점 다섯 · X다. 화면 맨 위에 붙고(위 여백은 안전 영역뿐), 밑에 1px 선이 끝에서 끝까지 하나 있다. 질문 제목은 22px 왼쪽 정렬.

메시지의 모습은 도트 집합체 말풍선이다(2026-10-20) — 글자마다 그 성격의 작은 모듈 (당당한 사각형 · 차분한 육각형 · 다정한 원 · 유머있는 별)을 점으로 짓고, 처음엔 낱개로 크게 섰다가 안주하면 모여 한 덩어리가 된다. 꼬리는 벽 하늘에만 있다(결정 56, 2026-10-22 — 디자이너 "벽 도킹 때 꼬리가 먼저 나오는 게 어색하다 — 꼬리는 벽 하늘에 날아가 자리 잡은 뒤에"). 폰(4/5 · 08)과 홈의 말엔 꼬리가 없다 — 5/5만 예외로 다 모인 말의 밑동에서 벽 하늘과 같은 박자로 자란다(2026-10-29, DotBubble tail). 벽에서는 도킹 · 1분 돌림 모두 꼬리 없이 날아가 하늘 제자리에 붙은 뒤, 밑동에서 기기 쪽으로 꼬리가 자라 메가폰트(기기)를 가리킨다(WallSky.tsx — 붙은 때부터 --t-hold · --ease-standard. 켤 때 이미 하늘에 있던 말은 다 자란 꼬리, 움직임 줄이기면 붙자마자 다 자람, 다 자라기 전에 터지면 그 길이에서 멈춘다). 그전(결정 9)엔 꼬리가 말의 시작이라 먼저 섰다. 폰(4/5 · 5/5 · 08)과 벽이 같은 셈을 쓴다 — 모듈 · 배치 · 등장 · 꼬리는 lib/aggregate.ts, 그리기는 DotBubble · lib/dotPaint.ts. 말풍선 속 글자는 성격 서체 그대로인데, 유머있는만 키운다 — 핸드젯이 같은 크기에서 훨씬 작아 별 한가운데가 비어 보였다(VoiceBubble IN_BUBBLE, 2026-10-21). 규칙과 고른 이유는 design/landscape.md에 있다. 그전(2026-09-27 ~ 10-19)의 사진 형상 — 돌 · 나무 · 구름 · 비눗방울 — 도 거기 기록으로 남아 있다 (그보다 전 구름 어휘는 design/cloud-rules.md, 더 전에는 bubbles.ts의 네 모양 말풍선). 정렬·장평·크기와 독립 색상은 전송 후 벽 화면에도 유지된다. 조정 범위 및 검증 결과는 피드백 반영 기록을 참조한다.

작성 1~5단계의 머리줄은 뒤로 · 점 다섯 · X다 (src/components/StepHeader.tsx). 점은 지금 단계 하나만 선명하고 화면의 정확한 가운데에 선다. 낭독기에는 "전체 5단계 중 2단계, 성격"을 따로 준다. X는 도킹의 홈과 같은 창으로 한 번 묻고 ("정말 종료하시겠어요? / 10분 안에 돌아오면 이어서 쓸 수 있어요.") 초기 화면으로 간다 — 초안은 남는다(전송 기록을 지우는 것은 도킹 화면의 홈 버튼뿐이다). 튜토리얼의 X는 묻지 않는다. 튜토리얼의 Step 표기와 About 판의 이름은 그대로다. 머리줄 밑에는 모든 화면에 같은 1px 선이 끝에서 끝까지 하나 있다.

07→08은 홈의 물리 스위치가 부른다. 폰이 07에 도착해 대기 자리에 제 이름을 올려 두고, 파이가 꽂힘을 알리면 그 자리의 주인이 송출을 확정한다. 폰과 벽은 같은 사건을 보고 같은 시각에서 30초를 센다 — 신호가 흐르는 길과 안 될 때 볼 곳은 pi/README.md에 있다. 벽의 끄기 단추는 파이 안의 pi/power.py가 받는다 — 2026-10-21 전에 깐 파이는 배포 뒤 pi/install.sh를 한 번 더 돌려야 듣는다(파이에서는 아직 안 해 봤다).

벽 비율 액자는 어디에도 없다. 쓰는 동안은 화면을 통째로 쓰고 60자에서도 18px로 읽힌다 — 담은 모습은 05 미리보기가 폰 화면 전체로 보여 준다(2026-09-27에 05의 16:9 액자도 걷었다).

경로

경로	무엇
/	입력 앱 (위 흐름)
/?stage=enter	NFC 태그 진입 — 홈을 건너뛰고 자형부터
/wall	벽 출력(2026-10-20 — 그전의 나무 · 돌 · 구름 풍경은 landscape.md에 기록). 위에 넓게 하늘, 아래 가운데가 꼭짓점인 역삼각 구도. 하늘 — 지난 말들이 메가폰트(벽 아래 가운데 바깥)를 중심으로 한 세 겹 부채꼴에 호를 따라 기울어 앉는다. 정해진 수까지만 뜨고, 못 뜬 말은 기다림 줄에 서서 차례로 돌려 보인다(사흘 약속을 이것으로 지킨다). 배경 — 점으로 지은 대학 스카이라인(강의동 · 시계탑 · 도서관 · 기숙사 · 학생회관 돔), 실제 시계로 하늘 위 큰 호를 지나는 해(밤엔 같은 길로 초승달), 위 두 귀에서 화면 끝에 잘린 채 제자리로만 오가는 큰 구름이 모두 건물과 한 색으로 물러나 있다. 해에는 07의 두 눈이 있어 평소엔 느리게 끔뻑, 도킹 땐 움찔 놀라 큰 말을 본다. 낮의 해 둘레엔 둥근 점 햇살 8줄(줄마다 점 둘)이 아주 천천히 돈다. 달은 같은 눈을 반만 뜬다. 가운데(로고 · 기기 자리)는 비운다. 건물은 그릇이다 — 새 글이 도킹할 때만(한 글 한 번 · 돌림 · 터질 때는 안 떨어진다) 글자 점이 쏘아 오르는 동안 그 말 점의 일부가 로고 칸 바깥 땅에 그 말 색으로 쌓이고, 작은 사람 둘이 곧장 제 쪽 더미를 눈덩이로 굴려 가까운 건물부터(차면 바깥 건물로) 날라 건물 앞에서 부수면 한 줄기로 솟았다가 꼭대기에 새 층으로 앉는다(지붕까지 차면 맨 아래부터 가라앉아 꼭대기는 늘 최근 말의 색 · 건물 색으로 바래 다 바래면 원래 건물 · 켤 때 · 움직임 줄이기는 곧장 담아 새로고침해도 같은 도시 · 하늘 말 뒤). 바닥 — 땅 띠에 박힌 로고타입 'MegaFont', 그 양옆을 걷는 작은 사람 둘(가끔 하늘 말풍선 윗선에 올라 이웃 말풍선으로 건너다니다 하나에 앉아 함께 떠다닌다 — 글자는 가리지 않는다. 도킹이면 화들짝 뛰고 둘이 서로 다른 호들갑 — 폴짝 · 동동 · 우왕좌왕. 땅에 부스러기 더미가 생기면 앉기 · 수다 · 하늘 나들이를 멈추고 곧장 눈덩이로 굴려 나른다), 땅 띠 양 끝에 마우스를 올려야 드러나는 두 단추(왼쪽 새로고침, 오른쪽 끄기 — '종료하시겠어요?' 동안 해 · 사람이 슬퍼하고, '예'면 옛 TV처럼 접혀 파이가 정상 종료한다). 도킹 — 강조는 상한까지, 도킹 · 해제 모두 텀 뒤에 반영(lib/wall.ts). 큰 말은 꼬리 없이 글자가 성격의 박자로 서며, 하늘 말들은 광각처럼 가장자리로 퍼져 회색으로 가라앉고, 메가폰의 소리의 결이 퍼진다(평소엔 얕게 숨 쉬듯 · 결은 둥근 점의 점선). 해제되면 모여 꼬리 없이 하늘의 제자리로 날아가 붙고, 그 뒤 밑동에서 기기 쪽으로 꼬리가 자란다(1분 돌림으로 쏘아 오르는 말도 같다 — 결정 56). 값은 lib/sky.ts(부채꼴 · 결 · 광각 · 상한) · WallSky.tsx(돌림 · 꼬리 자람 · 부스러기 · 쏟음 · 시간) · WallSkyline.tsx(배경 · 건물 모양 · 해 눈) · WallWalkers.tsx(작은 사람 · 호들갑 · 눈덩이 나르기) · WallGround.tsx(땅 · 두 단추) · WallPower.tsx(끄기 창)
/admin	저장된 메시지 목록
?mock=1	Firestore 대신 localStorage. 어느 경로에나 붙는다
?dev=1	파이 없이 꽂음·뺌을 흉내 내는 버튼이 07·08에 나온다. Firestore는 진짜를 쓴다

한곳에서 정하는 값

파일	담긴 것
src/lib/wall.ts	벽 크기, 체류 기간, 강조 상한, 도킹 텀
src/lib/aggregate.ts	말풍선 — 성격별 모듈 · 4/5 배치 · 성격별 등장 박자 · 꼬리(그리는 건 벽과 5/5뿐 — 결정 56). 폰과 벽이 공유
src/lib/sky.ts	벽 하늘 — 부채꼴 자리 · 상한 · 소리의 결 · 광각 고리
src/lib/fit.ts	글 줄 나누기 · 액자에 맞추는 계산
src/lib/palettes-v2.ts	성격마다의 색 짝 (배경+글자)
src/lib/palettes.ts	자형 4종 → 실제 서체 매핑
src/lib/banned.ts	쓸 수 없는 표현(욕설 · 혐오 · 차별어). 고치면 node scripts/banned-rules.mjs로 규칙까지 — 운영엔 콘솔에서 게시해야 걸린다

체류 기간이나 강조 시간을 바꾸면 화면 카피와 벽 필터가 함께 따라간다.

스택

• Vite 6 + React 18 + TypeScript
• vite-plugin-pwa (Workbox)
• Firestore — SDK가 아니라 REST로 직접 호출한다 (iOS에서 SDK 전송이 실패한 이력이 있어 74e775a에서 갈아탔다)
• 배포: Vercel — main에 push하면 자동으로 나간다 (약 30초)

실행

npm install
npm run dev        # http://localhost:5173
npm run typecheck
npm run build
npm run check      # 코드를 바꾼 뒤: 빌드(타입 검사 포함) → 접근성 감사. dev 서버를 띄운 채로

화면 캡처

dev 서버를 띄운 채로:

npm i --no-save playwright-core
node scripts/shoot-screens.mjs

시스템에 설치된 Chrome/Edge를 그대로 쓴다(브라우저를 내려받지 않는다). ?mock=1로 돌기 때문에 캡처 과정의 전송이 실제 벽에 닿지 않는다. 결과는 design/screens/에 390×844 @2x로 떨어진다.

서체

2026-09-20에 넷이 전부 갈렸다. 함께 '발랄한'이 **'유머있는'**이 되었다. 2026-10-01에 당당한이 한 번 더 갈렸다 — 둥켈산스는 면 채움이 0.60이라 벽에서 다른 셋(0.100.18)을 덮었다. 아침 Medium은 0.23이다. 2026-10-04에 다시 이사만루로 — 디자이너가 SM견출고딕의 '꽉 찬 네모꼴과 각'을 원했는데 견출은 웹 사용권을 얻을 길이 없어, 웹 사용권과 한글 11172자를 다 갖춘 후보 다섯 가운데서 골랐다(Medium 농도 0.42 · 네모 채움 0.91). 같은 날 Kim jung chul Gothic으로 한 번 더 — 디자이너가 Adobe 킷에 더해 두었다. 꽉 찬 네모꼴은 그대로(네모 채움 0.870.92)이고 이사만루보다 한결 가볍다(Regular 농도 0.23). 2026-10-06에 둥켈산스로 되돌렸다 — 지금 앱에 둥켈만 바꿔 끼운 목업을 보고 디자이너가 골랐다. 3/5의 셋째 막대도 무게에서 말투(온화한 · 예리한)로 돌아왔다. 둥켈이 벽에서 다른 셋보다 크게 읽히는 것은 알고 되돌렸다. 2026-10-10에 29CM Editorial VF로 — 디자이너가 웹폰트 파일을 public/fonts에 넣어 두었다. 굵기 축 하나뿐이라 말투를 빼고 다른 셋처럼 무게를 묻는다.

자형	실제 서체	어디서	가진 축
당당한	29CM Editorial VF	public/fonts	wght 300~800
차분한	Source Han Serif KR VF	Adobe 킷 qgd6cda	wght 250~900
다정한	마포 다카포	public/fonts	없음
유머있는	Handjet 2.004	public/fonts	wght 100900 · ELSH 016 · ELGR 1~2

축은 눈이 아니라 파일의 fvar를 직접 읽어 확인한 값이다. 워드마크는 Lineal VF를 무게 1150으로, UI는 영문·숫자 Lineal VF + 한글 Pretendard를 쓴다.

Whois(Raphaël Bastide, 굵기 500 한 벌)는 정해진 자리의 영문·숫자에 쓴다 — 튜토리얼 머리줄, 첫 화면, 푸터, 1단계 입력칸의 숫자. 영어 화면에서는 앱의 말 전부. 모자란 굵기는 윤곽선에 획을 구워 넣은 판으로 채운다(public/fonts/ WhoisMono-400 · 500 · 600 · 700 · 900, 덧댄 양은 tokens.css --mark-stroke-*, 만드는 법은 global.css). 원본은 WhoisMono.ttf.

다정한은 무게 축이 없다. 그 칸에서는 무게를 덧댄 획이 대신 답한다(src/lib/palettes.ts의 STROKE_LADDER). 브라우저의 합성 굵기는 꺼 두었다 — 켜 두면 600·700에서만 갑자기 뛰어 다섯 칸이 '셋+둘'로 갈라지고, 둥켈 시절의 당당한은 속공간이 통째로 메워져 검은 덩어리가 됐다.

당당한은 무게를 묻는다(2026-10-10, 29CM Editorial, 디자이너). 다섯 칸이 굵기 300 · 406 · 513 · 619 · 725 — 끝(800)까지 쓰면 '매우 무겁게'가 그때 "너무 굵다"던 김정철 Bold보다 진해서 꼭대기를 725로 두고 고르게 나눴다. 가장 가는 300도 김정철 Regular만큼 진해 아래는 더 못 내린다. 크기감 0.83(다른 셋 옆에서 글줄 길이 1.00 · 높이 1.04). 속도의 진중한 쪽은 폭 축 대신 장평 115% + 자간 +0.06em(아침 · 김정철 때 고른 값), 거침없는 쪽은 기울기. 말투가 남은 옛 글(10-06 ~ 10-10 둥켈)은 글자는 29CM으로 선다(10-10 ~ 10-19에는 무게 · 말투가 나무 종류 — 버드나무 · 소나무 — 도 골랐다). 10-06 ~ 10-10의 둥켈은 말투 축(GLAT)과 폭 축(wdth)으로 물었고, 그 앞 김정철 고딕 (10-04 ~ 10-06)은 무게 세 칸이었다. 10-01~10-04에 쓰던 온화한의 둥글기(바깥 0.025em · 안쪽 0.02em)는 R24 앞 커밋(ae35884)에 있다.

Adobe 웹 프로젝트에는 허용 도메인 목록이 있다. 새 도메인에 올릴 때는 Adobe Fonts 설정에서 그 목록을 먼저 확인한다 — 빠져 있으면 차분한이 사라진다(당당한은 2026-10-10부터 우리 파일이라 상관없다).

지금 킷에 megafont.vercel.app이 들어 있는지는 밖에서 확인할 방법이 없었다. 킷 파일에 도메인 목록이 없고(찾아봤다), 아무 도메인인 척하고 불러도 서체가 떠서 그 시험으로는 가릴 수가 없다. Adobe Fonts 화면에서 직접 봐야 한다.

핸드젯에 한글이 있는 판과 없는 판이 있다

구글 폰트가 내주는 Handjet에는 한글이 한 글자도 없다 — 1339자가 들었고 완성형 한글 0자, 자모조차 없다. 그런데도 화면에는 글자가 멀쩡히 나온다. 없는 글자는 조용히 다른 서체로 대신 그려지기 때문에, 라틴만 보면 '적용됐다'로 읽힌다. 실제로 그렇게 한 번 속았다.

쓰는 것은 Rosetta 공식 저장소의 2.004다. 이 판의 이름이 그대로 'Handjet with Korean support'이고 한글 11172자가 다 들어 있다. OFL 1.1이라 우리가 파일을 품는다.

서체 파일은 woff2로 둔다. 원본이 핸드젯 915KB · 다카포 1377KB였는데 압축만 바꿔 85KB · 304KB가 됐다 — 글자는 하나도 안 버렸다.

실제 렌더 확인: node scripts/shoot-faces.mjs

아직 성격별 축이 아니다

안내서(design/의 '타입 안내')는 성격마다 다른 축을 둔다 — 당당함의 말투는 GLAT(둥켈산스 — 2026-10-10부터 29CM이라 그 축이 없다), 차분함의 무게는 wght, 엉뚱함의 말투는 ELSH/ELGR. 지금 03 조율은 넷에게 같은 세 축(크기·빠르기·무게)을 묻는다 — 유머있는만 크기 대신 말투(귀여운 | 얄미운 — ELSH/ELGR 낱알, 2026-10-21)를 더 묻는다. 그 개편은 아직이다.

문서

문서	내용
design/instructions.md	안내판 문안, 앱 인스트럭션 원칙, 어휘 규칙
design/direction-v0.md	절대원칙 — 편집권은 발화자에게, 시스템은 추천하지 않는다
design/reference-adoption.md	참조 디자인 채택 기록 + 검사 스크립트 돌리는 법
design/references.md	레퍼런스
design/type-inventory.md	지금 쓰는 서체·크기·굵기·행간 (실측)
design/landscape.md	태도 → 모듈, 말풍선 · 벽 장면의 규칙과 고른 이유. 지난 형상(돌 · 나무 · 구름 · 비눗방울)의 기록
design/cloud-rules.md	기록 — 9월의 발화 배경(구름) 규칙. 도트 집합체로 낡았다
design/bubble-brief.md	기록 — 말풍선 네 모양을 작가 손으로 바꾸기 위해 부탁했던 것. 구름 규칙으로 낡았다

디자인 토큰은 문서가 아니라 src/styles/tokens.css에 있다. design/tokens.md는 2026-05 시점의 옛 체계를 적어 둔 기록이다.

design/ 안에서 맨 위에 > **날짜 시점의 기록이다** 가 붙은 문서는 그때의 결정을 남긴 것이고, 거기 적힌 화면 이름·버튼 문구·수치는 지금과 다르다. 왜 그렇게 정했는지를 볼 때만 읽는다.

아직 안 된 것

• 영문판(보류) — 스위치 둘이 닫혀 있다(lib/lang.ts ENGLISH_DEV · ENGLISH_PUBLIC). 남은 것: ① 튜토리얼 그림 속 한글 — example_step1_1_1의 "내 생각은", example_step1_4_1~4의 견본 "가"와 칸 이름 "크기 · 빠르기 · 무게". 글자가 윤곽선이라 작가가 영어판 그림을 따로 줘야 한다(조율판 네 컷은 윤곽 수·순서가 네 컷 모두 같아야 모핑한다) ② 만든 사람 이름의 로마자 ③ 문구는 초안(영국식 철자) 영어 글의 줄 나눔은 2026-09-26에 고쳤다 — 한글이 없는 글만 영문자·숫자를 반 칸으로 센다(lib/fit.ts lineCells). 한국어 글은 전과 같다

• 성격별 축 개편 — 안내서는 당당함의 말투=GLAT, 차분함의 무게=wght, 엉뚱함의 말투=ELSH/ELGR로 성격마다 다른 축을 둔다. 03은 아직 넷에게 같은 세 축을 묻는다. 당당한(29CM)은 2026-10-10부터 무게 축이 있어 그 칸이 제대로 움직인다. 유머있는은 2026-10-21부터 무게와 함께 말투(ELSH · ELGR 낱알)를 묻는다

• 본체가 벽을 보고 서는가 — 앱 카피의 '저 벽'이 여기에 걸려 있다

• 물리 트랙 전반 (본체·프로젝터·Pi). /wall이 그 미리보기

• 출시 전 보안: Firestore 규칙 좁히기, App Check, rate limit

• 벽 하늘을 파이 실기에서 본다 — 하늘 말들 + 도킹 큰 말 + 쏘는 점 + 소리의 결을 매 장면 그리는 것이 파이의 크로미움에서 매끄러운가. 무거우면 붙어 있는 말은 그림으로 구워 두고 움직임만 옮긴다

• 3/5 → 4/5에 처음 들어갈 때 아주 잠깐 멈칫한다(CPU 4배 느림에서 가장 긴 틈 0.12 ~ 0.17초) — 그 절반쯤은 Adobe 킷 (qgd6cda, 차분한)이 새 글을 훑어 글꼴 조각을 받아 오는 일이라 우리 코드 밖이다. 바꾸려면 글꼴을 싣는 방식을 바꿔야 한다. 모양을 바꿀 때의 멈칫은 fcb2a57, 모듈 셈은 da91c7a에서 고쳤다

• 관리자 삭제 경로