눈을 뜨면, 강호다.
들어와서 간직하기까지, 차례대로.

첫 화면 — 코드로 그린 3D 수묵 산수

사실적인 3D가 아니라 산수화의 문법을 3D로 옮겼습니다. 카메라가 움직이면 산의 겹마다 다른 속도로 흘러 깊이가 생기고, 마우스를 따라 기울고, 스크롤하면 산속으로 날아듭니다. 머리띠 바로 아래에서 시작해 정확히 한 화면을 채웁니다.

1. 遠대기 원근 — 산 다섯 겹. 먼 겹일수록 옅어져 하늘에 녹습니다(삼원법의 평원).
2. 雲운무 — 봉우리 발치를 구름이 삼켜 봉우리가 떠 보입니다. 가로로 눕는 자락이 층 사이를 흐릅니다.
3. 皴준법 — 경사를 따라 마른 붓 결이 비스듬히 흐릅니다. 능선 가장자리는 먹이 번지듯 흔들립니다.
4. 松노송과 정자 — 캔버스에 붓으로 그려 세웠습니다. 처마 끝이 버선코처럼 들리고 등불이 깜빡입니다. 벼랑은 아래로 산자락처럼 퍼지며 운무 속으로 흐려집니다.
5. 月달과 별 — 얼룩진 원판, 두 겹 번짐, 앞을 스치는 구름 한 자락. 별은 화면 크기와 무관하게 1.6픽셀 남짓의 둥근 점입니다.
6. 梅매화 — 끝이 V자로 파인 꽃잎. 밑동은 희고 끝과 가장자리로 갈수록 분홍, 떨어지며 돌고 뒤집히고(옆으로 서면 가늘어짐), 넷에 하나는 다섯 잎 꽃송이(연둣빛 심·금빛 꽃술)입니다. 가까이 온 것은 초점이 나간 듯 흐립니다.

꽃잎을 다시 그린 이유

처음 꽃잎은 뾰족한 밑동에 둥근 끝, 가운데만 진한 분홍이라 휴대폰에서 물방울로 보였습니다(지적받음). 색이 아니라 모양 자체를 바꿨습니다.

점진적 향상입니다. 첫 화면은 2D로 즉시 뜨고 3D는 뒤에서 불러와 겹칩니다. WebGL이 없으면 2D가 그대로 남고, 느린 기계에서는 해상도를 스스로 낮추고, 화면 밖이거나 탭이 숨으면 그리지 않습니다. three.js는 쓰는 클래스만 담아 gzip 142KB입니다.

휴대폰에서 — 카드를 접어 산수를 드러냈습니다

입력 카드를 단추 둘로 접어 3D 산수가 보이게 했습니다. 「생년월일로 환생하기」를 누르면 칸이 펼쳐지며 날짜 칸에 초점이 가고, 날짜를 넣으면 단추가 「내 생일로 환생하기」로 바뀝니다.

1. 日날짜·시간 칸 — 사파리가 두 칸에 기본 최소 폭을 줘 나란한 칸이 카드 밖으로 넘쳤습니다(지적받음). 최소 폭을 풀고 기본 모양을 지웠습니다.
2. 大누르면 확대되던 것 — iOS는 16px보다 작은 입력 칸을 누르면 화면을 키웁니다. 휴대폰의 모든 입력 칸을 16px로 올렸습니다.
3. 星하늘의 회색 네모 — 실제 갤럭시에서 찾았습니다. 별을 격자 칸째로 칠하고 있었는데, 휴대폰 구도에선 한 칸이 30픽셀 가까이 되어 네모가 됐습니다. 칸 안의 작은 둥근 점으로 바꿨습니다.
4. 崖카드 아래 네모난 검은 덩어리 — 역시 실기에서 찾았습니다. 벼랑 아랫단이 곧게 떨어져 기둥처럼 보였고, 그림 판의 잘린 가장자리가 드러났습니다. 윤곽을 산자락처럼 퍼지게 하고 가장자리를 운무로 흐렸습니다.
5. 話관주·소리 손잡이 — 관주 얼굴을 말풍선 옆에 붙였습니다. 소리 손잡이는 오른쪽 위 아이콘이고, 첫 화면을 벗어나면 꺼져 있을 때 숨습니다.

첫 화면 아래 — 무엇을 받는지, 어떤 삶이 있는지, 먼저 한 사람

첫 화면을 내려오면 관주의 한마디 다음에 「還生館에서 받는 것」 네 장(출신·무공과 생업·인연·운명), 121가지 직업이 흐르는 띠, 그리고 견본 포스터가 차례로 나옵니다.

1. 帶직업 띠 — 강호 직업 67가지와 생활의 일 54가지가 두 줄로 서로 반대로 흐릅니다. 붉은 점은 자주 나오는 직업(S·A 등급), 가리키면 멈춥니다
2. 濾걸러 보는 알약 — [전체 121 · 강호 직업 67 · 생활의 일 54]. 고른 알약은 붓으로 쓸어 칠한 자리로 표시됩니다(recent.design에서 배움)
3. 釋한 줄 설명 — 가리키거나 누른 직업의 하는 일이 띠 아래에 한 줄로(예: 「금창의 — 칼과 화살 외상을 전문으로 다룬다」, SEE+SAW에서 배움)
4. 見견본 포스터 — 「먼저 한 사람을 엿보기」를 글줄 링크에서 먹 포스터로: 붓으로 그은 침 세 대, 「침구사」를 큰 붓 글씨로, 「점창파의 석월담 「창파도」」, 見本 인장(큰 글자 포스터 갤러리에서 배움)

생일 넣기와 환생 — 예시를 누르거나, 내 생일을 넣거나

발급 카드 아래 「이런 생일이면?」 예시 세 개(1988.11.2 낮 · 1995.7.21 새벽 · 2001.2.4 저녁)는 누르면 칸을 채우고 바로 환생합니다(Refero의 예시 질문에서 배움). 내 생일을 넣으면, 넣는 순간 그 사람의 기둥 글자가 산수의 밤하늘에 오른쪽(年柱)부터 하나씩 떠오르고, 누르면 그 글자들이 명식 시퀀스로 날아듭니다.

재생되는 영상이 아닙니다. 입력한 생년월일에서 나온 그 사람의 실제 사주 여덟 글자가 사방에서 저마다 다른 궤적으로 날아와 年月日時 네 기둥에 박힙니다.

1. 一먹이 번져 강호를 지웁니다 · 0.00–0.75s
2. 二여덟 글자가 날아와 기둥에 박히며 제 오행 색으로 획이 그어집니다 · 0.45–2.05s
3. 三그 획들이 모여 오행의 고리를 이룹니다 · 1.85–2.55s
4. 四글자가 가운데로 모이고 還生館印이 찍히며 파문이 퍼집니다 · 2.45–3.15s

생일을 비우면 글자가 없으므로 그 대목을 건너뛰고 먹과 인장만으로 갑니다. 이제는 기기의 「동작 줄이기」 설정과 상관없이 이 시퀀스가 늘 재생됩니다(갤럭시 실기에서 확인). 시퀀스가 도는 동안은 먹 뒤에 가려진 3D 산수를 그리지 않아 약한 기기에서도 끊기지 않습니다.

소리 — 녹음 없이 전부 합성했습니다

기본은 꺼져 있고, 「소리」를 누르면 켜집니다. 켜 둔 사람은 다음 방문의 첫 입력에서 되살립니다.

위는 실제 사이트에서 소리를 켜고 40초 녹음한 그대로입니다(음량만 맞춤). 처음 녹음에서 바람이 현을 덮어 바람을 낮췄습니다. 트레일러의 소리는 같은 합성기로 오프라인 렌더링했고, 인장 쿵이 설계 12.025s, 실측 12.04s입니다.

결과 첫 장 — 이름, 꼬리표, 그리고 마음에 남는 것

환생이 끝나면 관주의 한마디, 별호와 이름, 소속·생업·성별 한 줄, 그 아래 해시태그 꼬리표(#침구사 #강호의술 #강호직업 #점창파 #정인 — UX Pattern Archive에서 배움)가 차례로 놓입니다. 내려가면 마음·손끝·인연 세 장, 아무에게도 하지 못한 말, 첫 장면이 이어지고, 제목은 붓이 왼쪽부터 지나가듯 드러납니다.

아래쪽 세 장 중 생업 카드는 바로 위 「강호에서 맡은 일」 한 폭과 겹쳐 「武 · 손끝」(대표 무공·절기·품 안의 물건)으로 바꿨습니다. 관주 카드의 「나이 미상」도 뺐습니다.

강호에서 맡은 일 — 생업 한 폭, 그리고 나이 없는 새 인물

결과지를 내려 이 자리에 닿으면 「화룡점정(畫龍點睛)」 무대가 열립니다. 평면 그림 대신 실제 3D 공간입니다 — 어두운 한지 위로 털 결이 보이는 붓이 날아와 직업 문양을 한 획씩 긋고, 카메라는 붓을 쫓아 돌며, 획이 쌓일수록 먼 산이 세 겹으로 솟습니다. 마지막 점을 찍는 순간 문양이 종이에서 일어나 우뚝 서고, 직업 갈래마다 다른 마무리를 보인 뒤 다시 종이로 내려앉아 카드의 제자리에 겹칩니다. 화면을 누르거나 스크롤하면 빨리 감깁니다.

1. 定입정 — 높은 곳에서 내려다보던 카메라가 종이로 내려오고, 달과 운무가 차오릅니다
2. 滴낙수 — 들린 붓끝에서 먹 한 방울이 떨어져 종이에 파문이 번지고, 먹이 종이 결을 따라 스밉니다
3. 筆한 획 = 한 초식 — 붓이 다음 시작점으로 날아가 역입·누름·행필. 카메라는 획 방향 뒤에서 좌우를 번갈아 쫓습니다. 획마다 왼쪽 위에 필진도(筆陣圖)의 초식 이름이 붓글씨로 떠오릅니다 — 점은 「高峰墜石(높은 봉우리에서 돌이 떨어지듯)」, 가로획은 「千里陣雲」, 세로획은 「萬歲枯藤」, 갈고리는 「百鈞弩發」 …
4. 境경지가 붓끝에 — 삼류는 붓끝이 크게 떨리고, 일류·절정으로 갈수록 잦아들며, 초절정·화경은 흔들림이 없습니다
5. 靜정적 → 일격 — 마지막 획 앞에서 0.5초 모든 것이 멈췄다가, 가장 빠른 획 끝에서 슬로모션 → 동결 → 반전 섬광 → 흔들림·먹 폭발
6. 立지화천(紙化天) — 종이에 그은 문양이 일어나 서고, 바닥엔 먹 그림자가 비치며 빛이 한 번 훑고 지나갑니다
7. 流갈래별 마무리 — 의술은 옥빛 경락선이 이어지고, 은밀은 그림자로 스며들고, 방술은 부적 빛 고리가 돌고, 병기·제작은 담금질 불꽃, 나머지는 인장 고리가 퍼집니다
8. 名이름과 낙관, 그리고 착지 — 직업 이름과 「江湖」 낙관 뒤, 문양이 종이로 눕고 카메라가 위에서 내려다보며 카드 문양 자리에 정확히 겹쳐 앉습니다

왜 이렇게 — 3D 연출 조사와 우리 세계관

「너무 평면적이야」라는 말씀에 따라 3D 무대로 옮기며, 게임·영화의 3D 붓 연출과 무협 세계관의 개념을 함께 조사하고 브레인스토밍해 방향을 하나로 묶었습니다(2026-10-03).

• 서검동원(書劍同源) — 글씨와 검은 뿌리가 같다는 무협의 오래된 생각. 그래서 붓질 하나하나를 초식으로 다루고, 왕희지 필진도의 일곱 비유를 초식 이름으로 붙였습니다.
• 화룡점정 — 마지막 점을 찍어야 그림이 살아난다. 마지막 획 앞 정적과 일격, 그리고 문양이 일어서는 순간이 여기서 나왔습니다.
• 지화천(紙化天) · 기선어형(氣先於形) — 종이가 하늘이 되고, 기운이 모양보다 먼저 온다. 획이 쌓일수록 산이 솟고 운무가 일어, 붓질이 세계를 만들어 가는 느낌을 줍니다.
• 반박귀진(返璞歸眞) — 높은 경지일수록 꾸밈없이 고요하다. 경지에 따라 붓끝의 떨림을 줄여, 화경의 붓은 흔들림이 없습니다.
• 참고한 3D 연출 — 오카미의 붓 시점, 고스트 오브 쓰시마의 정적→일격, 「영웅」의 색 지배, 흑신화: 오공의 수묵 산수 원경, 셀 셰이딩 붓(안쪽을 뒤집은 외곽선)으로 3D 붓을 수묵 그림처럼.

갤럭시에서 고친 것. 처음 3D 무대는 크롬에선 매끄러웠지만 삼성 인터넷에서 붓질 내내 프레임당 50~100ms(초당 10~20장)로 떨어졌습니다. 먹을 그리는 캔버스를 매 프레임 GPU에서 되읽어 텍스처로 올리던 것이 원인이라, 휴대폰에선 그 캔버스를 CPU 메모리에 두었습니다. 산 능선은 매 픽셀 계산하던 것을 한 번 구운 텍스처로 바꾸고, 획마다 붓글씨 초식 이름을 새로 그리느라 0.15초씩 멈칫하던 것은 글자를 미리 한 번 그려 두는 것으로 없앴습니다. 결과 갤럭시 크롬·삼성 인터넷 모두 중앙값 16.7ms, 95%가 16.8ms(초당 60, 삼성 인터넷 99%도 16.9ms) — 애니메이션 끔 설정 그대로 측정했습니다. WebGL이 안 되는 기기는 예전 2D 무대로, 그것도 안 되면 카드 안 붓질로 물러섭니다.

그 밖에: 일터·손에 익은 도구·벌이 세 줄 뒤 붉은 쪽지의 일에서 걸린 단서, 제목 옆 「121가지 생업 가운데 제91호」 번호(60fps에서 배움)는 그대로입니다. 첫 화면 견본 포스터의 문양은 무대 없이 카드 안에서 한 획씩 그어집니다.

이 한 폭 뒤의 설정 — 나이 없는 인물, 강호 직업 121가지

정해 주신 설정을 생성기(v8)에 넣었습니다. 예전 공유 주소(v7 이하)는 그 판본 그대로 열립니다.

1. 齡나이를 없앴습니다 — 나이·출생 연도·입문 나이·수련 기간·인연의 나이·연표의 연도까지. 문장 속 「12세에」「경원 285년:」「실제 수련 10년」도 걷어냈고, 하나라도 남으면 검수에서 떨어집니다. 같은 인물이 나이만 다른 결과는 이제 나오지 않습니다
2. 光가장 빛나던 때 기준 — 기능으로 드러내지 않고 설정 규칙으로만 둡니다. 경지는 오른 가장 높은 곳, 생업과 지위는 한창때의 것, 초상은 한창때 모습, 인연과 첫 장면도 그때의 것. 지난 일은 순서(입문 → 전수 → 사건 → 지금)만 남깁니다
3. 業강호 직업 121가지 — Codex 조사의 64가지에 강호 직업 57가지(쟁자수·밀정·금창의·침구사·신투·역용술사·현상금 사냥꾼…)를 더해 강호 직업이 67가지입니다
4. 選조사 순위대로 뽑기 — 웹소설·게임·테스트형 콘텐츠 세 갈래로 매긴 선호 등급(S 5 · A 3 · B 2 · C 1)에 따라 뽑고, 생일이 있으면 사주에서 두드러진 십성과 닿는 직업을 세 배로 반깁니다

하나 고친 판단. 직업마다 설 수 있는 소속을 표 그대로 쓰니 문파가 39%에서 16%로, 무소속이 13%에서 37%로 바뀌어 무협 맛이 도리어 옅어졌습니다. 그래서 문파·세가·교단·방회에 속한 사람은 관부·살수 조직 전속이 아닌 한 어떤 생업이든 겸할 수 있게 했습니다(정파는 도둑·밀수 같은 은밀한 일 제외). 표사처럼 표국의 일은 표국 소속을 조금 더 반깁니다.

함께 바뀐 곳. 이름 아래 한 줄은 「점창파 · 침구사 · 여성」(나이 없음), 강호 기록의 방문엔 나이 대신 성별·생업, 족보는 「…에서 나고 자랐다」, 사문첩은 전수 허가 문장, 연표는 연도 없이 입문 → 전수 → 사건 → 지금, 서신은 이름·관계만. 아래쪽 「業 · 생업」 카드는 새 한 폭과 겹쳐 「武 · 손끝」(무공·절기·품 안의 물건)으로 바꿨고, 관주 카드의 「나이 미상」도 뺐습니다. 첫 화면 견본은 v8 인물 「점창파의 침구사, 석월담」으로 바꿨습니다.
아직 남은 것. 조사 문서에 적어 둔 대로 장원 호원·수로 호위·접골사를 한 등급 올리는 안, 「전업 무인(문파 수행)」 한 자리를 두는 안, 출시 뒤 실제 공유·다시 환생 비율로 가중치를 다시 매기는 일은 결정을 기다립니다.

사주 원국 — 짚으면 뜻이 나오는 원국

네 기둥 여덟 글자는 그대로 두고, 읽기를 돕는 것 열 가지를 얹었습니다.

1. 五오행 다섯 점 — 원국 위에 목화토금수의 글자 수. 없는 기운은 점선 빈 칸, 가장 많은 기운은 테두리
2. 動오행별 모션 — 칸이 나타날 때와 짚을 때 오행마다 다르게: 나무는 싹이 차오르고 흔들림, 불은 불티가 날고 일렁임, 흙은 쿵 내려앉으며 먼지, 쇠는 광택이 스치고 떨림, 물은 파문
3. 圖오행 아이콘 — 칸 모서리에 나뭇가지·불꽃·흙더미·엽전·물결
4. 十십성 풀이 — 겁재·정인 같은 이름을 짚으면 한 줄 뜻과 무협 비유(예: 겁재 — 같은 스승 밑에서 한 권의 비급을 두고 겨루는 사형제)
5. 我일간 강조 — 일주 천간에 「이것이 그대」
6. 序읽는 순서 — ① 나(일간) ② 태어난 계절(월지) ③ 가장 많은 기운
7. 柱기둥마다 한 줄 — 연주 가문·뿌리 / 월주 부모·젊은 날 / 일주 나와 배우자 / 시주 자식·말년. 월주엔 계절 글자(春夏秋冬), 시주엔 낮밤 표시
8. 藏속 글자 — 지장간을 제 오행 색 알로. 기둥을 짚으면 떠오름
9. 合합과 충 — 짝을 이루는 기둥 사이를 끈(합)과 번개(충)로 잇기. 전엔 아래 표에 글로만 있었습니다

강호 기록 일곱 장 — 「인물의 모든 사연」을 문서로

193항목이 「이름 / 설소겸」 식 두 줄로 이어지던 표를, 같은 기록에서 문장을 엮은 강호의 문서 일곱 장으로 바꿨습니다. 새 설정은 지어내지 않고, 문서마다 기록의 값으로만 문장을 만듭니다. v8부터 방문엔 나이 대신 성별·생업, 족보는 「…에서 나고 자랐다」, 연표는 연도 없이 순서만입니다.

입구 문구도 바꿨습니다. 막연한 「인물의 모든 사연 읽기」 대신 일곱 인장과 「방문 한 장, 족보, 사문첩, 비급 서문, 객잔 풍문, 강호 연표, 그대 앞으로 온 서신 4통」처럼 무엇이 있는지 예고합니다. 원래 항목표는 맨 아래 「원 기록 전부 보기」에 남겼고, 「도호 없음」 같은 빈 항목과 겹치는 문장은 걸렀습니다(설소겸의 경우 193 → 165항목).
문장 검수. 무작위 인물 여덟 명의 문장을 모두 뽑아 읽고 조사·어미를 고쳤습니다 — 「제자소」「과묵하소」 같은 어미, 「나는 나의 원수를 돕고 있다고 오해하오」처럼 주어가 빠진 편지, 「…확인되지 않았다..」 같은 겹 온점.

전생록 장마다의 편집

1. 章장마다 第 壹 章 머리글과 주제 한 글자(命 性 家 盾 友 學 業 移 財 緣 婚 壽 行 歲 俠)
2. 首붉은 먹 드롭캡, 격장마다 본문의 한 문장을 인용구로(반쪽 문장은 고르지 않음), 장 사이 붓 한 획
3. 目장 차례 — 휴대폰은 目 단추에 장이 바뀔 때만 이름을 잠깐, 읽는 동안엔 접혀 글줄을 가리지 않음
4. 語관주의 맺음말 — 「글자는 길을 짚을 뿐이오. 걷는 건 그대요.」(전: 「틀리면 태우시게. 종이는 잘 타오.」)

호패 — 손에 쥐고 돌려 보는 목패, 그리고 간직하기

결과지 끝 「이제, 당신의 이름으로」에서 호패를 만납니다. 호패 그림의 윤곽에 두께만 주어 3D로 뽑아 앞면 그림과 테두리가 어긋나지 않고, 스크롤하면 몸을 틀고, 끌면 돌다가 끈에 매달린 듯 앞면으로 돌아옵니다. 「내 인물로 간직하기」를 누르면 신분록에 남습니다.

1. 前앞면: 이름을 한 자씩 세로로 새긴 호패 그림 · 뒷면: 還生館印 새김 · 옆면: 두께로 흐르는 나뭇결
2. 繩끈 — 앞면에서 구멍으로 들어가 뒷면으로 나와, 패 머리 위에서 매듭짓는 고리입니다. 처음엔 끈이 판 두께 속을 지나 윗모서리로 삐져나왔고, 평면 그림의 끈이 모서리에 붉게 묻어났습니다(지적받음).
3. 傾휴대폰에서 크게 눕던 것 — 손가락 스크롤의 먼 좌표가 기울기에 들어가고 있었습니다(지적받음). 기울임은 마우스가 호패 위에 있을 때만 받습니다. 호패 틀이 종이보다 넓어 「간직하기」 단추가 종이 밖으로 밀리던 것도 고쳤습니다.
4. 轉스크롤하면 몸을 튼다 — 화면 아래에서 올라올 때는 틀어져 두께와 옆면이 보이다가, 한가운데에서 앞면을 보고, 위로 지나가며 반대로 틉니다. 광택도 함께 흐릅니다. 손대지 않아도 그림이 아니라 쥘 수 있는 패라는 걸 알 수 있게(요청).
5. 三삼성 인터넷에서 옆으로 선 채 멈추던 것 — 이 폰은 시스템 애니메이션이 꺼져 있어 삼성 인터넷이 '동작 줄이기'로 알립니다. 그 모드에선 손을 떼는 순간 그리기를 멈췄고, 삼성 인터넷은 스크롤로 넘어갈 때 '손 뗌' 신호도 보내지 않아 호패가 돌린 각도 그대로 남았습니다. 손을 뗀 신호를 모두(포인터 캡처 해제·터치 끝) 받고, 이제는 동작 줄이기 상태에서도 관성으로 돌다가 돌아옵니다.
6. 指갤럭시에서 실제 손가락으로 확인 — 대각선으로 쓸면 호패가 돌고 똑바로 돌아오며, 세로로 쓸면 매번 페이지가 정상 스크롤됐습니다(크롬 ±280px, 삼성 인터넷 ±340px). 브라우저가 스크롤을 가져갈 때 오는 취소 신호도 받게 해 끌기 상태가 남지 않게 했습니다.

다시 만나기 — 언제 만났던 사람인지

간직한 인물은 첫 화면의 「다시 만나고 싶은 사람」에 별호 · 소속 · 생업과 함께 「방금 만남」「3일 전 만남」처럼 언제 펼쳤는지가 붙습니다(Siteinspire의 「20시간 전」에서 배움). 누르면 그 인물의 기록으로 갑니다.

시각은 그 기기 브라우저에만 공유 코드와 함께 남고(생일은 남기지 않음), 이번 업데이트 뒤에 펼친 인물부터 표시됩니다.

여섯 화면 — 같은 강호, 저마다의 장면

신분록·문파·설정실·서가·취향소·입문첩은 같은 수묵 바탕으로 잇고, 화면마다 무협 세계의 물건 하나씩을 세웠습니다. 들어올 때마다 먹이 스미듯 나타납니다.

공통

공통

1. 景뒤에 고정된 옅은 수묵 풍경: 먼 능선 두 겹, 발치의 운무, 달빛 번짐, 첫 화면과 같은 모양의 매화 꽃잎
2. 題화면마다 주제 한자(身 門 設 入 書 趣)를 표제 뒤에 크게, 들어올 때 인장처럼 내려앉게
3. 空빈 상태는 점선 상자 대신 還生 인장과 다음 행동을 권하는 장면으로

화면마다

1. 門우리 문파 — 금빛으로 새긴 현판, 문훈을 둘로 나눈 주련, 차례로 내려와 걸리는 족자(동문), 족자 아래 인연의 붓선(숙적은 붉게), 첫 장면은 인장 찍힌 서신
2. 身신분록 — 3D 호패, 인장 달린 장부 줄(직접 다듬기·모든 설정·가져오기), 간직한 인물에 얼굴
3. 入입문첩 — 강호→무림→문파·세가·표국으로 좁아지는 먹 그림. 용어는 분류(界·勢·稱·武·敍)별 사전이고, 휴대폰에선 두 줄씩 접힘
4. 設설정실 — 사건 연표를 양 끝 축 사이로 펼쳐지는 두루마리로, 설정마다 종류 인장(人 派 武 事). 휴대폰에선 적어 둔 목록이 입력 판보다 먼저
5. 書서가 — 책등이 꽂힌 책장(읽는 중은 서표 끈, 완독은 붉은 讀 인장). 누르면 그 기록으로 갑니다
6. 趣취향소 — 각진 도형 산을 붓으로 칠한 수묵 산수로, 표지를 실로 꿰맨 선장본과 세로 제첨으로

화면마다

화면마다

1. 門우리 문파 — 금빛으로 새긴 현판, 문훈을 둘로 나눈 주련, 차례로 내려와 걸리는 족자(동문), 족자 아래 인연의 붓선(숙적은 붉게), 첫 장면은 인장 찍힌 서신
2. 身신분록 — 3D 호패, 인장 달린 장부 줄(직접 다듬기·모든 설정·가져오기), 간직한 인물에 얼굴
3. 入입문첩 — 강호→무림→문파·세가·표국으로 좁아지는 먹 그림. 용어는 분류(界·勢·稱·武·敍)별 사전이고, 휴대폰에선 두 줄씩 접힘
4. 設설정실 — 사건 연표를 양 끝 축 사이로 펼쳐지는 두루마리로, 설정마다 종류 인장(人 派 武 事). 휴대폰에선 적어 둔 목록이 입력 판보다 먼저
5. 書서가 — 책등이 꽂힌 책장(읽는 중은 서표 끈, 완독은 붉은 讀 인장). 누르면 그 기록으로 갑니다
6. 趣취향소 — 각진 도형 산을 붓으로 칠한 수묵 산수로, 표지를 실로 꿰맨 선장본과 세로 제첨으로

모든 화면에 걸쳐 — 수묵·붓

반듯한 1px 테두리·평평한 패널·기계적인 선이 남아 있던 곳을 모두 붓의 결로 바꿨습니다. 외부 그림 없이, 선 하나를 굵기가 변하는 붓획으로 바꾸는 작은 붓 엔진(brush.mjs)을 만들어 모든 문양과 결을 거기서 뽑았습니다. 위 모든 영상이 이 상태입니다.

1. 筆붓획 — 누르며 들어가 가늘게 빠지고, 몸통이 흔들리고, 한쪽으로 쏠리고, 마른붓 결(飛白)이 끊겨 보입니다
2. 業직업 문양 — 갈래 그림을 붓으로 다시 긋고, 붓이 지나간 자리만 차례로 드러나게 그립니다. 뒤로 먹이 번집니다
3. 印소속 문장 42종 — 가장자리가 번진 먹 바탕, 한 번에 돌린 원상(圓相) 테, 붓 문양, 인주가 고르지 않게 묻은 얼룩. 호패·초상·공유 그림·전생록 어디서나 같은 인장입니다
4. 字글꼴 — 한자는 붓글씨(Ma Shan Zheng, 한자 영역만 받아 숫자·한글은 그대로), 제목 한글은 붓 명조(Song Myung). 큰 표제는 가장자리가 먹처럼 살짝 번집니다
5. 紙바탕과 선 — 어두운 바탕엔 먹 번짐, 종이엔 한지 결, 카드는 붓으로 그은 네 획 테두리, 구분선은 한 획, 단추는 붓으로 쓸어 칠한 자리
6. 動움직임 — 나타남은 먹이 스미듯(번진 채 떠올라 또렷해짐), 제목은 붓이 왼쪽부터 지나가듯, 인장은 먹이 퍼지며 찍히고, 누르는 자리마다 먹 한 방울이 번집니다. 기기의 「동작 줄이기」 설정과 상관없이 모두 그대로 재생됩니다

무거워지지 않았는지. 갤럭시 S9+ 두 브라우저에서 결과지를 손가락으로 여섯 번 쓸어 올리는 동안 프레임 간격이 중앙 16.7ms · 상위 5% 16.8ms(60fps 유지)였습니다. 붓 결은 미리 만든 그림(자동 생성 CSS)이라 화면에서 계산하지 않고, 번짐 필터는 큰 표제와 작은 문장에만 씁니다.

움직임은 늘 전부 — 기기 설정과 상관없이

연결해 주신 갤럭시는 휴대폰 애니메이션이 꺼져 있어(창·전환·애니메이터 배율 모두 0) 브라우저가 사이트에 「동작을 줄여 달라」고 알립니다. 사이트에는 그 신호를 받으면 모든 CSS 애니메이션을 강제로 끄는 전역 규칙과 화면별 끄기 규칙 28묶음, 스크립트 분기 13곳이 있어 그 폰에서는 붓질·등장·인장·환생 연출이 거의 다 멈춰 있었습니다(지적받음).

1. 全전부 걷어냈습니다 — 환생 먹 연출, 3D 카메라 비행, 마우스 기울임, 호패 회전, 먹 안개, 오행 링, 흐렸다 또렷해지기, 튀어오름, 인장, 붓질까지 만든 그대로(잔잔한 축소판도 두지 않음)
2. 驗갤럭시 실기(애니메이션 끔 그대로)에서 크롬·삼성 인터넷 모두 생일을 넣고 환생해 먹 덮개부터 결과 등장까지 재생됨을 확인
3. 記앞으로 새 움직임에도 동작 줄이기 분기를 넣지 않도록 프로젝트 기억에 남겼습니다

레퍼런스 일곱 곳에서 하나씩

보내 주신 인스타그램 게시물(웹디자인 레퍼런스 7곳)의 영상에서 일곱 사이트를 찾아 직접 열어 보고, 하나씩 배워 위의 장들에 넣었습니다.

전체 검수 — 지적받은 것, 제가 찾은 것, 실기에서 나온 것

한때 제가 첫 화면을 9점으로 매겼는데, 그 첫 화면의 꽃잎이 물방울로 보였습니다. 그래서 스스로 매긴 점수는 모두 거뒀습니다. 대신 모든 화면을 넓은 화면(1440), 휴대폰 흉내(390, 크롬과 사파리 엔진), 그리고 연결해 주신 갤럭시 S9+ 실기(안드로이드 10, 크롬 154와 삼성 인터넷 29)에서 한 화면씩 찍어 확대해 보고 찾은 결함을 고쳤습니다. 위의 각 장은 그 결과로 다시 썼고, 여기엔 흩어진 결함을 한데 모읍니다.

갤럭시에서 확인한 방법. 폰의 크롬과 삼성 인터넷에 각각 원격 디버깅으로 붙어, 제가 연 탭에서만 일곱 화면과 전생록 끝까지 찍었습니다. 손가락 조작은 adb로 실제 화면을 쓸었습니다. 크롬의 네모 두 개는 3D 장면의 물체를 하나씩 꺼 보며 원인이 하늘 셰이더와 벼랑 그림임을 찾았습니다. 삼성 인터넷에서는 가로 넘침이 없었고(모든 화면 문서 폭 411px = 화면 폭), 날짜·시간 칸도 카드 안에 들어갔으며, 호패 결함 하나가 나왔습니다. 고친 뒤 두 브라우저 모두 운영 사이트를 다시 열어 확인했습니다. 끝나고 제가 연 탭만 닫았고(크롬 1개, 삼성 인터넷 2개), 원래 있던 탭은 건드리지 않았습니다. v8 확인 때도 운영 사이트를 크롬·삼성 인터넷에 한 탭씩 열어 찍고 그 탭만 닫았습니다(두 브라우저 모두 동작 줄이기 상태였고, 이제는 그 상태에서도 모든 움직임이 재생됨을 같은 방식으로 확인). 테스트 중 뜬 '기본 브라우저 변경' 창은 취소해 기본 브라우저는 그대로 삼성 인터넷입니다.
아직 못 본 것. 아이폰 실기는 없어, 지적받은 사파리 날짜 칸은 흉내 브라우저와 코드 분석으로만 고쳤습니다.

만든 방식 — 찍고, 채점하고, 고치기를 일곱 번

한 번에 잘 만들었다고 말하지 않고, 매 라운드 실제 화면을 찍어 보고 가장 눈에 띄는 문제의 원인을 찾아 고쳤습니다. 아래는 첫 화면 3D 산수의 기록입니다.

같은 방식으로 잡은 것들. 명식 시퀀스가 도는 동안 먹 뒤에 가려진 3D 산수가 계속 그려지며 GPU를 먹어 시퀀스가 끊겼습니다(약한 기기에서 실제로 생길 문제). 덮개가 있는 동안은 그리지 않습니다. 그 탓에 첫 트레일러는 녹화가 프레임을 떨궈 소리가 화면과 1.7초 어긋났고, 그래서 명식 구간은 화면 녹화를 버리고 프레임 단위 렌더로 바꿨습니다.