모듈화를 폴더 정리로 착각했던 시절

모듈화를 편의성으로 오해하기 쉽습니다. 컴포넌트 만들고, 이름 붙이고, 재사용하면 시스템이 알아서 확장될 거라고요. 저도 그랬습니다. 그런데 진짜 모듈 아키텍처는 폴더 구조가 아니라 합의였습니다. 뭘 바꿔도 되고 뭘 함부로 바꾸면 안 되는지에 대한 합의.

실루엣이 수십 년 진화해도 코드가 알아볼 수 있게 유지되는 브랜드들이 있는데, 좋은 디지털 아키텍처도 똑같이 굴어야 한다고 생각합니다. 바꿀 때마다 재발명처럼 느껴지지 않게, 움직일 공간을 주는 거요.

프리미티브

저희 시스템은 프리미티브에서 시작합니다. 간격, 타입 리듬, 인터랙션 상태, 미디어 비율, 데이터 계약, 운영 용어. 미적 취향의 문제만은 아니고, 팀이 시각적·기술적 빚 없이 얼마나 빨리 출시할 수 있는지를 결정하는 것들입니다.

인터페이스 계약

아키텍처가 눈에 보이는 지점은 인터페이스입니다. 에디터가 글을 올릴 때마다 레이아웃이 깨진다면 모듈화가 아닙니다. 제품명이 길어지면 카드가 무너진다면 모듈화가 아닙니다. 페이지마다 말투가 다르다면, 그것도 모듈화가 아닙니다.

그래서 흔한 표면들에 계약을 정해둡니다. 헤드라인이 어떻게 줄바꿈되는지, 메타데이터가 어디 붙는지, 이미지 크롭이 어떻게 보호되는지, 로딩 상태가 구도를 어떻게 유지하는지. 조용한 작업인데, 사이트가 비싸 보이는 건 사실 이런 데서 갈립니다.

보호된 결정

모듈 아키텍처에서 제일 유용한 질문은 "뭘 재사용할까?"가 아니라 "뭘 함부로 못 바꾸게 할까?"였습니다. 어떤 시스템이든 나머지 전부가 기대고 있는 결정이 몇 개 있습니다. 간격 스케일, 제품 데이터 계약, 카테고리 라벨의 의미, 에러 메시지의 톤. 저희는 이걸 보호된 결정이라고 부르고, 첫 컴포넌트를 만들기 전에 문서로 적습니다.

보호가 영구불변이라는 뜻은 아닙니다. 바꾸려면 의도적인 절차 — 리뷰, 마이그레이션 노트, 버전 범프 — 를 거치라는 뜻입니다. 겪어보니 아키텍처가 썩는 건 나쁜 결정 때문이 아니었습니다. 좋은 결정이 마감에 쫓겨 한 번씩 조용히 오버라이드되다가, 어느 순간 돌아갈 중심이 없어지는 거였습니다.

이 사이트가 케이스 스터디

이 사이트 자체가 실험대입니다. 지금 보시는 저널 카드, 제품 모듈, 리빌 모션 전부 토큰 레이어 하나와 인터랙션 레이어 하나에서 나옵니다. 철학 페이지를 추가할 때 새 색상도, 새 이징도, 새 타입 사이즈도 만들지 않았습니다. 보호된 프리미티브로만 조립했더니, 새 페이지인데 원래 있던 것처럼 보이더라고요.

그게 모듈화의 실질적인 보상이었습니다. 열 번째 페이지는 첫 페이지의 몇 분의 일 비용으로 만들어지고, 페이지가 늘수록 브랜드가 희석되는 게 아니라 단단해집니다.