• OhNine, Git Dojo, Statusline Builder, Blueprint, RAXXO Studio라는 5개의 라이브 제품이 하나의 다크 UI (dark UI) 시스템을 공유합니다.

• 첫 번째 제품이 출시된 이후 변하지 않은 시안(cyan)과 라임(lime)이라는 단 두 가지의 강조 색상(accent colors)이 모든 도구에 적용됩니다.

• 가장 중요한 단 하나의 CSS 규칙은 커스텀 코드가 스토어 테마와 충돌하지 않도록 유지해 주는 공유 클래스 접두사(shared class prefix)입니다.

• 그 결과, 로고 없이도 인지도를 확보할 수 있으며, 새로운 도구를 출시할 때마다 그것이 어떻게 보여야 할지 결정하는 데 드는 시간을 크게 줄일 수 있습니다.

두 번째 제품을 만들기 전에 디자인 규칙을 작성한 이유

내가 출시한 첫 번째 도구는 대부분의 사람들이 첫 번째 결과물을 만드는 방식인 '감(feel)'에 의존해 디자인했습니다. 배경색을 고르고, 그에 어울리는 색을 고르고, 출시하고, 다음으로 넘어가는 식이었죠. 제품이 하나일 때는 이 방식이 잘 작동합니다. 하지만 두 번째 제품이 생기는 순간 작동을 멈춥니다. 왜냐하면 다른 날의 '감'은 다른 팔레트(palette), 다른 간격 리듬(spacing rhythm), 다른 목소리(voice)를 만들어내기 때문입니다. 이런 것들을 다섯 개나 엮어 놓으면, 그 사이를 이동하는 방문자는 이를 하나의 스튜디오가 아닌, 같은 스토어 이름을 달고 있는 다섯 개의 서로 다른 프리랜서 작업물로 인식하게 됩니다.

그래서 두 번째 제품을 만들기 전에, 첫 번째 제품에 본능적으로 적용해 왔던 규칙들을 글로 적었습니다. 브랜드 북(brand book)처럼 거창한 것은 아니었고, 새로운 섹션을 만들 때마다 대조해 볼 수 있는 짧은 목록이었습니다. 하나의 배경색, 두 개의 강조 색상(accent colors), 하나의 헤딩 폰트(heading font), 코드나 라벨처럼 보이는 모든 것을 위한 하나의 모노스페이스 폰트(monospace font), 그리고 순수한 흰색이 아닌 오프 화이트(off white) 텍스트였습니다. 마지막 규칙은 어두운 배경 옆에 두기 전까지는 사소하게 들릴 수 있습니다. 숯색(charcoal) 배경 위의 순수한 흰색은 거칠고, 거의 임상적이며, 옆에 더 부드러운 버전을 두기 전까지는 이름 붙이기 어려운 방식으로 약간 저렴해 보입니다. FFFFFF보다는 F5F5F7에 가까운 오프 화이트(off white)는 더 차분하고 신중하게 읽힙니다. 그 차이를 깨달은 이후로, 나는 다시는 스타일시트(stylesheet)에 순수한 흰색을 작성하지 않았습니다.

즉각적으로 중요하게 작용했던 또 다른 규칙은 네이밍 접두사(naming prefix)였습니다. 모든 섹션 파일의 모든 커스텀 클래스(custom class)는 rx-로 시작합니다. 사소한 일처럼 보이고 실제로도 그렇지만, 테마 업데이트나 베이스 템플릿(base template)이 커스텀 섹션에서 사용 중인 이름과 우연히 충돌하는 클래스 이름을 도입하는 순간, 홈페이지의 요소가 의도치 않은 패딩(padding)을 빌려 쓰는 상황이 발생합니다. 일관된 접두사를 사용하는 것은 어떤 규칙이 승리했는지 디버깅(debugging)하며 오후 시간을 허비하는 것을 방지하는 5초짜리 습관입니다. 첫 주에는 그 사실을 몰랐습니다. 한 번 그런 일이 발생했고, 다시는 발생하지 않도록 규칙을 적어두었기 때문에 이제는 알고 있습니다.

이 중 어느 것도 사전에 계획된 것은 아니었습니다. 이미 작동하고 있는 첫 번째 제품으로부터 역공학(reverse-engineered)되었으며, 그 후 모든 제품이 빈 페이지가 아닌 동일한 기준점에서 시작할 수 있도록 앞으로 적용되었습니다.

모든 도구를 관통하는 두 가지 색상과 하나의 폰트 조합

모든 RAXXO 제품은 대략 #1F1F21인 동일한 차콜(charcoal) 배경 위에 놓여 있으며, 동일한 두 가지 강조색(accent)이 모든 신호를 전달합니다. 사이언(cyan) 색상인 #00FCED는 링크, 활성 상태(active states), 그리고 "이것은 상호작용이 가능하다"라고 말해야 하는 모든 것에 사용됩니다. 라임(lime) 색상인 #E3FC02는 더 강렬한 순간, 기본 버튼(primary buttons), 강조된 숫자, 즉 페이지에서 시선을 가장 먼저 끌어야 하는 단 하나의 요소에 사용됩니다. 이것이 팔레트(palette)의 전부입니다. 첫 번째 도구가 출시된 이후 세 번째 강조색은 추가되지 않았으며, 이는 게으름으로 인한 우연이 아니라 의도적인 결정입니다.

제품이 하나라면 특정 섹션을 위해 세 번째 색상을 추가하는 것이 해롭지 않습니다. 하지만 시간이 흐르며 서로 다른 기분과 서로 다른 날에 만들어진 다섯 개의 제품이 있다면, 개방된 팔레트는 서서히 표류하게 되어 모든 새로운 도구가 이전 도구와 약간씩 다르게 보이게 되고, 제품들을 나란히 놓기 전까지는 아무도 이를 알아차리지 못하게 됩니다. 두 가지 강조색을 사용하는 것은 의사결정을 제거하는 제약(constraint)입니다. 새로운 섹션 파일을 시작할 때, 나는 색상을 선택하는 것이 아니라 기존의 두 색상 중 어느 것이 이 순간에 적합한지를 선택하며, 이는 훨씬 더 작고 훨씬 더 빠른 질문입니다.

타이포그래피 (Typography) 또한 동일한 논리를 따릅니다. 제목 (Headings)과 본문 (Body copy)은 Outfit을 사용하는데, 이는 기업적인 느낌보다는 친근하게 읽히는 둥글고 약간 두꺼운 산세리프 (Sans-serif) 서체입니다. 코드, 터미널, 레이블 (Label) 또는 데이터 조각을 나타내는 모든 요소는 JetBrains Mono를 사용하며, 이는 눈길이 닿는 순간 별도의 설명 없이도 "이것은 기술적인 것이다"라는 신호를 즉각적으로 보냅니다. 인간의 목소리를 위한 산세리프와 기술적인 목소리를 위한 모노 (Mono) 서체를 의도적으로 혼합하는 것은, 그 어떤 문구보다도 방문자에게 자신이 어떤 종류의 콘텐츠를 보고 있는지 더 효과적으로 전달합니다.

이것이 다섯 개의 서로 다른 코드베이스 (Codebases) 전반에 걸쳐 일관성을 유지할 수 있는 이유는, 색상 값이 반복되는 헥스 코드 (Hex codes)가 아니라 공유 변수 (Shared variables)로 존재하기 때문입니다. 새로운 섹션은 개발자(이 경우에는 저 또한 포함됩니다)가 기억에 의존해 비슷하지만 완전히 같지는 않은 색상을 추측하는 대신, 다른 모든 섹션이 이미 사용하고 있는 것과 동일한 사이언 (Cyan), 동일한 차콜 (Charcoal), 동일한 테두리 색상을 참조합니다. 저는 AI처럼 보이지 않는 다크 모드 디자인 (Dark Mode Design That Doesn't Look AI)에서 다크 팔레트 (Dark palette)가 기본 설정처럼 보이지 않고 의도된 것처럼 느껴지게 만드는 심리학에 대해 더 자세히 썼는데, 요약하자면 다크 테마를 디자인된 것처럼 느껴지게 만드는 것은 영리함이 아니라 일관성입니다.

의도적으로 반복되는 작은 상호작용 패턴들

색상과 폰트는 사람들이 가장 먼저 알아차리는 부분이지만, 그 밑바탕에 깔린 패턴들이 실제로 모든 새로운 빌드 (Build)에서 시간을 절약해 줍니다. 몇 가지 작은 상호작용 규칙 (Interaction rules)이 모든 제품에 걸쳐 반복되며, 저는 이를 팔레트와 마찬가지로 고정된 것으로 취급합니다.

스크롤 공개 애니메이션 (Scroll-reveal animation)이 그중 하나입니다. 방문자가 스크롤함에 따라 요소들이 서서히 나타나며 제자리로 올라오는데, 모든 제품의 모든 페이지에서 동일한 이징 곡선 (easing curve)과 동일한 짧은 지연 스태거 (delay stagger)를 사용합니다. 그리고 이 모든 사례는 prefers-reduced-motion 설정을 준수합니다. 만약 방문자의 시스템이 동작 감소 (reduce motion)를 요청하면, 애니메이션은 완전히 생략되고 콘텐츠는 단순히 나타납니다. 이러한 폴백 (fallback)은 선택 사항이거나 나중에 추가되는 것이 아니라 패턴 자체의 일부입니다. 왜냐하면 접근성 설정을 무시하는 모션 효과는 세밀한 다듬기 (polish detail)가 아니라 버그이기 때문입니다.

비디오와 임베드 (embeds)는 클릭 시 로드 (click-to-load) 규칙을 따릅니다. 제3자 서비스, YouTube 플레이어, 외부 스크립트 등 그 어떤 것도 방문자가 재생 버튼을 클릭하여 실제로 요청하기 전에는 로드되지 않습니다. 눈에 보이는 요소는 재생 버튼이 있는 정적 미리보기이며, 실제 임베드는 해당 클릭 시에만 생성됩니다. 이는 제가 한 제품을 위해 한 번 구축한 패턴이며, 이제는 비디오가 나타나는 곳이라면 어디든 재사용합니다. 왜냐하면 이는 누군가 최적화를 기억해야만 빨라지는 것이 아니라, 기본적으로 모든 페이지가 빠르게 유지됨을 의미하기 때문입니다.

카드 (Cards)에는 테두리 (border)를 적용하며, 강한 드롭 섀도 (drop shadow)는 절대 사용하지 않습니다. 배지 (Badges)는 모노 타입 (mono type)의 둥근 필 (pills) 형태입니다. 명령어나 스크립트 출력 결과가 어떻게 보이는지 보여주기 위해 사용하는 터미널 목업 (Terminal mockups)은 하나의 시각적 구조를 공유합니다. 창 제어용 점 세 개, 모노스페이스 (monospace) 본문, 그리고 내부의 구문 스타일 컬러링 (syntax-style coloring)이 그것입니다. 저는 이러한 디테일 뒤에 숨겨진 몇 가지 CSS 기술에 대해 5 CSS Animations That Needed JavaScript Until 2026에서 작성한 적이 있는데, 그 관통하는 핵심은 팔레트와 동일합니다. 패턴을 한 번 구축하고 어디에서나 재사용하십시오. 그러면 새로운 제품은 이미 결정되어 있어야 할 것을 재발명하는 데 시간을 쓰는 대신, 그 제품을 차별화하는 요소에 빌드 시간을 쏟을 수 있습니다.

파일 명명 (File naming) 또한 동일한 규율을 따릅니다. 모든 섹션은 section-[page]-[name].liquid 형식을 따르므로, 6개월 후에 다시 보든 Claude에게 적절한 파일을 찾아달라고 요청하든 파일 이름만으로 그 목적을 명확히 알 수 있습니다. 파일 시스템 수준에서의 일관성은 픽셀 수준의 일관성과 동일한 개념이며, 단지 한 단계 아래 계층일 뿐입니다.

일관성이 1인 스튜디오에 실제로 가져다주는 것

이 방식이 작동한다는 가장 명확한 증거는 지표가 아니라, 어떤 '순간'입니다. 누군가 채팅창에 로고도 보이지 않고 프레임 안에 URL도 없는 한 제품의 스크린샷을 올렸을 때, 다른 누군가가 즉시 "그건 RAXXO 스타일이네"라고 말하는 순간 말입니다. 그러한 인지(recognition)는 전적으로 색상, 타이포그래피 (type), 그리고 레이아웃 리듬 (layout rhythm)을 통해 이루어집니다. 이름이 붙어 있지 않아도 여전히 읽히는 것입니다.

두 번째 이점은 속도이며, 이는 새로운 제품을 시작할 때마다 복리로 쌓입니다. 팔레트 (palette), 타이포그래피 조합 (type pairing), 그리고 상호작용 규칙 (interaction rules)이 이미 결정되어 있기 때문에, 새로운 섹션 파일은 동일한 변수와 패턴을 참조함으로써 이 모든 것을 상속받습니다. 새로운 빌드에서 남겨진 미결 질문들은 실제로 중요한 것들뿐입니다. 즉, 이 도구가 무엇을 하는지, 레이아웃이 무엇을 설명해야 하는지, 방문자의 주의가 어디로 가장 먼저 향해야 하는지 같은 것들입니다. 두 개의 제품 이전에 이미 결정된 색상 선택을 다시 논쟁하는 데 시간을 쓰지 않습니다.

세 번째 이점은 신뢰이며, 이는 방문자가 명시적으로 표현하지 않더라도 실제로 느끼는 것이기에 가장 중요합니다. 하나의 RAXXO 제품에 시간을 할애하며 잘 만들어졌다고 느낀 사람은, 다른 제품에 도착했을 때도 동일한 정성을 기대하게 됩니다. 시각적 언어 (visual language)가 두 제품 모두 동일한 사람이 만들었다는 사실을 올바르게 전달했기 때문입니다. 저는 거대한 하나의 제품 대신 여러 개의 작고 집중된 도구들을 일관성 있게 유지하는 이 규율의 더 넓은 버전에 대해 How to Structure a Monorepo for Multiple Products에서 작성한 바 있습니다. 디자인 시스템은 이 동일한 아이디어의 시각적 절반입니다. 즉, 작고 분리된 것들이 여전히 하나의 스튜디오처럼 읽히도록 만드는 것입니다.

이 규칙들은 전혀 복잡하지 않습니다. 숯색 (charcoal) 배경, 두 가지 강조 색상 (accent colors), 두 가지 서체 (typefaces), 짧은 상호작용 패턴 (interaction patterns) 목록, 그리고 모든 요소가 충돌하지 않도록 유지해 주는 접두사 (prefix)가 전부입니다. 이 규칙들이 효과를 발휘하는 이유는 새로운 페이지를 만들 때마다 처음부터 다시 고민하는 것이 아니라, 고정된 것으로 취급하여 매번 대조하며 확인하기 때문입니다.

핵심 요약 (Bottom Line)

1인 스튜디오는 팀의 생산성을 앞지를 수 없습니다. 단 한 명의 사람과 한정된 시간만이 존재하기 때문입니다. 하지만 1인 스튜디오는 팀의 일관성을 앞지를 수 있습니다. 모든 결정, 모든 색상, 모든 애니메이션, 모든 명명 규칙 (naming choice)이 매번 동일한 사람을 거쳐 가기 때문입니다. 이것은 재능이 아니라 습관이며, 새로운 제품을 만들 때의 설렘이 가라앉고 그저 평범한 화요일의 작업이 되었을 때, 디자인 시스템을 실제로 유지시켜 주는 것은 바로 이 습관입니다.

제가 따르는 규칙들은 머릿속에 담아둘 수 있을 만큼 충분히 작습니다. 하나의 배경, 두 개의 강조 색상, 두 개의 서체, 몇 가지 상호작용 패턴, 그리고 하나의 접두사입니다. 이 규칙들 자체는 특별히 영리하지 않습니다. 하지만 이 규칙들이 모여 만들어내는 결과물은, 다섯 가지 서로 다른 문제를 해결하기 위해 만들어진 다섯 가지의 서로 다른 도구들이 여전히 같은 곳에서 나온 것처럼 보이게 하는 스튜디오입니다. 실제로 그랬기 때문입니다. 이를 직접 확인하고 싶다면, RAXXO의 페이지 두 개를 나란히 열어보십시오. 증거는 제가 여기서 주장하는 무엇에 있는 것이 아니라, 단 한 단어를 읽기도 전에 그 페이지들이 같은 공간처럼 느껴지는지에 있습니다.