이 手稿를 어떻게 그렸는가

우리는 또 하나의 신비학 앱을 만들고 싶지 않았어요. 우리가 만들고 싶었던 건 마침 브라우저 안에 살게 된 한 권의 책이었어요 — 한 번에 카드 한 장씩 넘기는 책, 초고와 초고 사이에서 잉크가 마르는 책, 16세기 인쇄공이 서명으로 승인했을 법한 가는 선 장식을 여백에 두른 책이요. 이것을 「인터페이스」가 아니라 「手稿」라고 부르는 건 시적인 꾸밈이 아니에요. 그 이름은 그 아래로 이어지는 모든 결정을 바꿔요.

인터페이스는 처리량을 좇아 최적화해요. 의도에서 결과까지, 가장 적은 두드림으로 당신을 데려가려 하죠. 手稿는 주의를 좇아 최적화해요. 알맞은 순간에 당신의 걸음을 늦추려 해요 — 뽑기 전의 한 호흡, 카드가 뒤집히는 사이의 고요한 두 초, 해석이 스스로 잉크를 얹기 시작하기 전의 멈춤. 처리량을 극한까지 끌어올린 Lunarcana는 더 빠르고 더 작겠지만, 당신은 두 번 다시 돌아오지 않을 거예요.

흑요석 위의 아이보리는 이 자세가 우리에게 처음 건넨 청이에요. 어두운 페이지는 아래에서 켜진 양피지처럼 읽혀요 — 촛불이 책등 가까이 다가온, 바로 그 순간처럼요. 이 결은 보라색 그러데이션과 수정구 연출 사진으로 너무 오래 밝혀져 온 부류 속에서, 진지함의 옅은 신호이기도 해요. 우리는 Lunarcana가 첫눈에 응접실의 잔재주가 아니라, 조용한 내면의 작업을 진지하게 할 수 있는 자리로 읽히길 바랐어요.

세 가지를 처음부터 물리쳤어요. 어떤 형태든 신비풍 소재 이미지를 물리쳤어요 — 나부끼는 스카프도, 빛나는 손바닥도, 보라색 성운도 필요 없어요. 의례의 순간에 팝업을 쓰는 일도 물리쳤어요 — 마음을 가라앉히는 일도 흐름 안에서, 카드가 열리는 일도 흐름 안에서, 아무것도 끼어들지 않아요. 그리고 「점술」이라는 틀 자체를 물리쳤어요. Lunarcana는 디지털 手稿이자 기록하는 도구예요. 거울이지, 신탁이 아니에요. 아래에 이어지는 모든 규칙은 이 세 가지 물리침을 위해 일해요.

팔레트에는 세 개의 음뿐이에요. 아이보리는 기본이 되는 잉크예요 — 본문의 모든 문단, 모든 라벨, 조용한 메타데이터의 한 줄 한 줄이 아이보리이거나 그 옅어진 변주예요. 흑요석은 페이지예요 — 순수한 검정, 남색이나 목탄색으로 누그러뜨리지 않아요. 배경이 몇 도만 따뜻해져도 금은 문턱성을 잃고, 手稿는 마케팅 페이지처럼 보이기 시작하니까요. 금은 세 번째 음이고, 아껴 내어 줘요.

금은 오직 문턱의 신호로만 써요. 주의가 형태를 바꿔야 하는 순간을 표시해요 — 문서 머리의 브랜드 인장, 긴 대목을 여는 첫 글자 내림, 장 제목 아래의 가는 선, 버튼에 닿을 수 있다고 약속하는 호버 상태, 뒤집히는 중인 카드의 밝은 가장자리, 방금 드러난 자리 라벨, 껍데기 속 달의 위상 기호. 그 문턱들 밖에서 금은 금지돼요. 한 페이지 내내 금 픽셀 하나 없이 지나갈 수도 있고, 그건 결함이 아니라 설계예요.

아껴 쓰는 이유는 미학이 아니라 정보 이론이에요. 금이 어디에나 있으면, 금은 어디에도 없어요 — 신호이기를 멈추고 질감이 되죠. 독자와 페이지의 관계를 진짜로 바꾸는 순간에만 남겨 두면, 따뜻한 불꽃 한 점이, 규율 없는 설계라면 열 개의 그러데이션으로도 못 해낼 일을 해내요. 「문턱 규칙」은 이 문서에서 가장 중요한 한 조항이자, 기능의 압력 아래 가장 조용히 어겨지기 쉬운 조항이에요.

手稿에는 여덟 개의 서체 토큰이 있고, 저마다 한 가지 일을 해요. Display는 워드마크와 드문 의례적 제목이에요. H1은 장의 시작이에요. Section은 한 덩이를 여는 작은 눈썹 라벨이고요. Body는 지금 당신이 읽고 있는 긴 본문이에요. Body-CJK는 같은 본문의 중국어·일본어 변주로, 글자 모양이 세로 리듬에 맞춰 조정돼 있어요. Eyebrow는 작은 대문자 라벨이에요. Quiet는 여백의 메타데이터예요. Numeral은 세는 데 쓰는 등폭 숫자예요.

본문은 bodyClass(locale)로 골라요 — 이 헬퍼는 라틴 문자에는 t-body를, zh/ja에는 t-body-cjk를 돌려줘요 — 중국어와 일본어의 글자 모양이 라틴 문자와는 다르게 숨 쉬기 때문이에요. 영어에서 넉넉하게 읽히는 행간이 중국어에서는 답답하게 읽히죠. JSX 안에 locale === 「zh」 || 「ja」 같은 판정을 직접 적어선 안 돼요. 헬퍼가 그 경계예요.

서체 캐스케이드에는 기억해 둘 만한 함정이 하나 있어요. globals.css의 .t-* 클래스는 레이어에 얹혀 있지 않아서, text-[1rem] 같은 Tailwind 임의 유틸리티가 .t-display나 .t-h1의 글자 크기·자간·행간을 덮어쓰지 못해요. 이 셋을 반응형으로 덮어써야 할 때는 인라인 style로 내려가 clamp()를 써요 — 인라인 스타일이 두 층 모두를 눌러요. Header 워드마크에서 한 번 물렸고, 두 번은 없어요.

Lunarcana의 국면 전환은 스미고 빠져요. 미끄러지지 않고, 튀지 않고, y축에서 튕기지 않아요. 리딩 전체 — 질문·마음 가라앉히기·뽑기·열기·해석 — 는 하나의 AnimatePresence, wait 모드 안에서 일어나고, 각 국면은 투명도로 들어와 투명도로 물러나요. 예외가 딱 하나 있어요 — 카드 자체는 뒤집히는 동안 Y축으로 돌아요. 카드는 카드이고, 카드는 뒤집히니까요. 그 밖의 모든 전환은 잉크가 페이지에 스미거나 빠지는 것뿐이에요.

첫 판을 지나면서 layoutId를 걷어 냈어요. layoutId는 기술적으로 아름다워요 — Framer가 두 배치 사이에서 FLIP 애니메이션을 하게 해 주죠 — 하지만 우리 경우엔, 카드를 연 뒤 스프레드가 다시 배치될 때 미세한 위치 흔들림을 일으켰어요. 그 비행을 left에 얹은 CSS 전환과 새 껍데기에 얹은 별도의 투명도 스밈으로 바꾸자, 手稿는 경련을 멈췄어요. 불변식은 「위치 흔들림은 결코 없다」예요. 두 상태 사이에서 페이지 치수가 달라진다면, 새 상태는 변화에 앞서 빈자리를 미리 잡아 둬야 해요.

「움직임 줄이기」는 모든 층에서 존중돼요. prefers-reduced-motion 아래에서는 호흡하는 원이 호흡을 멈추고, 카드 뒤집기는 300ms의 투명도 토글이 되고, 덱은 떨기를 멈추고, 촛불은 깜빡이기를 멈추고, 뒤집힐 때의 금빛 섬광은 잦아들어요. 여기서 접근성은 체크박스가 아니에요 — 명상 도구에게 그것은 표면적 그 자체예요.

대부분의 디자인 시스템은 자기가 「하는 수」를 적어요. 더 쓰기 어렵고, 우리가 가장 자주 다시 읽는 문서는 「하지 않기로 한 수」의 목록이에요. 여백이 곧 교의예요. 다음 다섯 가지를 경계로 세워요.

Lunarcana의 어느 한 구석도 무에서 지어 낸 게 아니에요. 이 手稿는 느리고 손으로 짓고 정성껏 장식한 작업이 길게 늘어선 선반 위에 서 있고, 그 선반에 감사를 바치는 일은 이 규율의 한 부분이에요. 아래는 긴 반복의 나날 동안 우리가 늘 마음에 두었던 영향들이에요. 어느 하나도 이름을 자랑하려고 늘어놓은 게 아니에요 — 저마다 이 마지막 책에 구체적인 자세 하나씩을 보태 주었기에 적어요.

교의가 제 할 일을 하고 있다면, 그것은 몸에 밴 뒤엔 사라져요. 위에 적힌 것 대부분은 몇 분 뒤면 그저 당신이 앉아 있는 이 방의 모습처럼 느껴질 거예요. 그게 의도예요. 표면 아래의 규칙들이 거기 있는 건, 표면이 조용히 있을 수 있게 하기 위해서예요.

준비되었을 때, 카드를 한 장 뽑아 보세요. 덱은 옆방에 있어요. 지침서는 그 위 선반에 있고요. 「소개」 페이지가 누가 이 手稿를 지키고 있는지 알려 줄 거예요. 제본이 오래 버텨 주기를 바라요.