제품 8개가 UI 킷 하나를 공유하는 법: 공통과 분기

혼자서 제품을 여러 개 만들다 보면 이상한 순간이 와요. 버튼 하나를 또 만들고 있는 거예요. 플랜씨(plan-c)에서 만든 버튼을 플랜비(plan-b)에서 다시, 플랜엘(plan-l)에서 또. 색만 조금 다르고 하는 일은 똑같은데 말이죠.

그래서 제품 8개가 나눠 쓰는 UI 킷을 하나로 묶어 봤어요. 그런데 직접 만들어 보니 "전부 공통"도 답이 아니고 "전부 따로"도 답이 아니더라고요. 어디까지 합치고 어디서 갈라지는지가 진짜 핵심이었어요.

왜 하나로 묶었나

처음엔 제품마다 버튼·입력창·카드를 따로 짰어요. 색 하나 바꾸려면 8곳을 열어야 했죠. 겪어 보니 이건 유지보수가 아니라 반복 노동이더라고요.

공통 킷을 만들면 한 곳만 고쳐도 전체에 반영돼요. 대신 한 번 잘못 만들면 그 실수도 8곳에 똑같이 퍼져요. 그래서 공통화는 "고민 없이 합치기"가 아니라 "합쳐도 안전한 것만 고르기"에 가까웠어요.

어디까지 공통화했나

돌려 보니 안전하게 합쳐지는 건 대부분 생김새의 기본기였어요.

• ✓색 토큰 3층
• ✓8px 간격 그리드
• ✓타이포 위계
• ✓버튼/입력 기본형

• 색: 원시값을 직접 쓰지 않고 의미 이름(강조·위험·배경)으로 3층
• 간격: 8px 배수 그리드로 통일 (13px 같은 임의값은 금지)
• 타이포·기본 컴포넌트: 버튼, 입력창, 카드의 뼈대

이 영역은 어느 제품에 놔도 어색하지 않아요. 테스트해 보면 색 토큰만 바꿔도 제품 전체 분위기가 한 번에 정리돼요.

어디서 갈라졌나

문제는 도메인 화면이었어요. 플랜씨(plan-c)의 금융 계산기 결과표, 플랜비(plan-b)의 출전 로테이션 보드, 플랜엘(plan-l)의 판례 검색 결과는 생김새가 완전히 달라요.

여기까지 억지로 공통 컴포넌트로 묶으려다 오히려 각 제품이 어색해졌어요. 적용해 봤더니 도메인 화면은 공통 킷의 색·간격만 물려받고, 배치와 흐름은 각자 가는 편이 나았어요.

정리하면 기준은 하나예요. 겉모습의 기본기는 공통, 도메인 로직이 묻어나는 화면은 분기.

만드는 사람 입장에서 남는 것

혼자 운영하면서 얻은 건 속도만이 아니었어요. 플랜엘(plan-l)처럼 월 3건 무료로 쓰는 서비스든, 로그인 없이 쓰는 플랜씨(plan-c)든, 라이프케어로그의 제품이라는 인상이 화면에서 자연스럽게 이어져요.

새 제품을 시작할 때도 빈 화면부터가 아니라 공통 킷 위에서 출발해요. 만약 지금 여러 화면을 각자 만들고 있다면, 색·간격·버튼부터 하나로 모아 보세요. 나머지는 그다음에 갈라도 늦지 않아요.