손으로 그린 로고 하나가 디자인 시스템이 되기까지

이 사이트의 모든 것 — 검색 파이프라인부터 지금 보고 계신 페이지의 모션까지 — 은 물건 하나에서 출발했습니다. 검은 보드에 한 번에 그은 손글씨 시그니처. 옆에 V1.0, 2025라고 적혀 있고, 첫 주석은 이렇게 씁니다. "A single, fluid signature. Speed. Control. Intent."

보통 아이덴티티 작업은 무드보드에서 시작해서 타협으로 수렴하는데, 저희는 제스처 하나에서 시작했습니다. 획이 빨랐던 건 망설임이 티가 나서고, 통제됐던 건 비율 없는 에너지는 그냥 소음이라서고, 정확히 의도한 곳에서 끝난 건 헤매는 선은 내리지 못한 결정이라서입니다. 그 뒤로 만든 모든 건 그 1초의 드로잉을 배신하지 않으려는 시도였습니다.

보드 읽기

아이덴티티 보드는 포스터가 아니라 도면처럼 짜여 있습니다. 시그니처 락업, 대체 락업, 여백 규칙, 모노그램, 패턴, 팔레트, 타이포, 톤, 애플리케이션 — 아홉 섹션 전부 번호가 붙어 있고, 장식은 하나도 없습니다. 그래피티 스타일 글자에도 치수가 있습니다. 여백은 A 높이의 X배, 디지털 최소 너비 64픽셀.

이 이중성이 브랜드의 축소판이었습니다. 사람 손으로 만든 마크를 곧바로 시스템 규율에 집어넣기. 대체 락업들은 스타일 바리에이션이 아니라 웹사이트가 생기기 전에 미리 그려둔 반응형 동작이었고, 모노그램 탐색은 사실상 컴포넌트 라이브러리의 배아였습니다. 보드가 디자인 시스템을 예언한 게 아니라, 보드가 이미 디자인 시스템이었습니다.

거친 질감, 좁은 공차

보드 8번 섹션의 톤 항목에서 사람들이 제일 자주 오해하는 게 "Street Roots"입니다. 스트리트웨어 스타일링이 아니라, 거리를 검증장으로 쓴다는 뜻입니다. 날씨가 진짜고 마일리지가 진짜인 곳, 마케팅으로는 아무것도 못 버티는 곳이요. 그 맞은편에 "Raw Precision"이 있습니다. 질감은 거칠게 두되 공차는 좁게. 거친 셸 안의 테이핑된 솔기, 손으로 그린 로고의 64픽셀 최소 규격.

이 긴장은 해소해야 할 모순이 아니라 브랜드가 돌아가는 동력원에 가깝습니다.

잉크에서 토큰으로

보드를 웹으로 옮기는 작업은 존중의 문제였습니다. 팔레트는 그대로 CSS 변수가 됐습니다. void, charcoal, graphite, steel, bone, smoke — 회색 여섯에 포인트 컬러 없음. 절제가 곧 포인트 컬러니까요. 모션 토큰 이름도 보드의 모션 원칙에서 왔습니다. 들어올 때 --ape-ease-intent, 나갈 때 --ape-ease-precision.

06 팔레트          ->  :root 커스텀 프로퍼티 (회색 6)
07 타이포          ->  디스플레이 스케일 + 트래킹 토큰
05 그래픽 요소      ->  스트로크, 링, 화살표 마크
모션 원칙          ->  ease-intent / ease-precision / 360ms
09 애플리케이션     ->  페이지 템플릿

번역하면서 지킨 규칙은 하나였습니다. 웹은 보드를 확장할 수 있지만 뒤집을 수는 없다. 보드에 없는 표면이 필요해지면 — 커맨드 팔레트라든가 — 기존 프리미티브에서 파생시키고 파생 근거를 기록합니다. 보드가 원전이고 나머지는 판례입니다.

Never perfect

보드에서 제일 중요한 주석은 제일 작게 적혀 있습니다. "Handcrafted. Always human. Never perfect." 공차에 집착하는 시스템 안에서 이상한 문장인데, 이 문장이 시스템을 정직하게 유지해줍니다. 완벽은 기계의 야심이고, 저희 야심은 의도가 보이는 것 정도입니다.

그래서 시그니처를 폰트 엔진으로 다시 그리는 일은 없을 거고, 사진에서 그레인을 걷어내는 일도 없을 겁니다. 시스템은 맥박을 보호하려고 있는 거지 대체하려고 있는 게 아니라서요.