CTA 컴포넌트를 8종에서 4종으로: 두 앱 이상에서 쓸 때만 디자인 시스템에

"기업 맞춤 소프트웨어 개발, 듀오랩스 / 무료로 상담받기." 금색 버튼이 달린 이 상담 카드가 형제 앱 여섯 곳의 리포에 각각 복사돼 있었습니다. 처음 만든 앱에서 잘 동작하니 다음 앱에 복사했고, 그다음 앱에도 복사했습니다. 여섯 벌은 조금씩 달랐습니다. 링크 주소가 다르고, 창 안에서의 동작이 다르고, 모바일에서 보이는지가 달랐습니다.

이것을 디자인 시스템으로 올리기로 했습니다. 처음에는 여덟 종을 올렸고, 한 버전 뒤에 네 종으로 줄였습니다.

있는 모양을 전부 올리면 된다는 오해

공통 컴포넌트를 만들 때 가장 쉬운 방법은 지금 있는 모양을 전부 모으는 것입니다. 형제 앱 열여덟 곳의 운영 화면을 돌며 본진으로 가는 링크를 잘라 모았더니 67개, 모양은 열한 가지였습니다. 이 도감을 보고 CTA 컴포넌트 여덟 종을 디자인 시스템에 올렸습니다.

올리고 나서 보니 여덟 종 중 절반은 한 앱에서만 쓰는 모양이었습니다. 한 앱에서만 쓰는 컴포넌트는 공통 컴포넌트가 아닙니다. 그 앱의 컴포넌트가 디자인 시스템에 들어와 있을 뿐입니다. 이런 컴포넌트는 디자인 시스템의 문서와 버전 관리 비용을 먹으면서, 정작 공유되는 이득은 없습니다.

두 앱 이상에서 쓰는 모양만

다음 버전에서 기준을 하나로 정했습니다. 두 앱 이상에서 쓰는 모양만 디자인 시스템에 둔다. 남은 것은 네 종입니다.

컴포넌트	모양
CtaPill	머리 영역의 작은 알약, 높이 28px
CtaButton	금색 단추, 높이 32px과 38px 두 가지
CtaCard	본문 끝 카드, 세로로 쌓는 형태와 가로 띠 형태
TopLevelOnly	창(iframe) 안에서는 자식을 그리지 않는 감싸개

빠진 네 종은 사라진 것이 아닙니다. 그 모양을 쓰는 앱 안으로 돌아갔습니다. 나중에 두 번째 앱이 같은 모양을 쓰게 되면 그때 올립니다.

저는 이 기준이 공통 컴포넌트를 판단하는 가장 실용적인 질문이라고 봅니다. "이 모양이 좋은가"가 아니라 "이 모양을 두 번째로 쓰는 곳이 있는가"입니다. 앞의 질문에는 끝없이 예라고 답할 수 있지만, 뒤의 질문에는 사실로 답해야 합니다.

모양과 주소를 나눈 이유

컴포넌트만 공통으로 만들면 절반만 해결됩니다. 여섯 벌의 상담 카드가 달랐던 가장 큰 이유는 모양이 아니라 링크 주소였습니다. 어느 앱은 문의 페이지로, 어느 앱은 견적 페이지로, 어느 앱은 홈으로 보냈고 UTM 값도 제각각이었습니다.

그래서 둘을 나눴습니다. 디자인 시스템은 모양만 갖습니다. 어디로 보내고 어떤 UTM을 붙일지는 별도의 CTA 패키지가 갖습니다. 이 패키지 안에 CTA 이름, 앱별 제품, 주소를 만드는 함수가 있고, <DuolabsCta app="..." place="..." />처럼 앱과 자리만 넘기면 모양과 주소가 함께 나옵니다. 창 안에서 숨는 동작은 이 패키지가 항상 포함합니다.

이렇게 나누면 바뀌는 속도가 다른 두 가지가 서로를 붙잡지 않습니다. 버튼 모양은 거의 바뀌지 않지만, 문구와 도착 페이지는 마케팅 판단에 따라 자주 바뀝니다.

복사본 여섯 벌을 지운 뒤

패키지로 옮긴 앱에서는 복사해 두었던 상담 카드와 링크 파일을 지웠습니다. 이제 문구나 주소를 바꾸려면 패키지 한 곳을 고쳐 새 버전을 내고, 형제 앱들의 의존성을 올리면 됩니다. 의존성을 올리는 일도 스크립트로 만들었습니다. 앱마다 버전을 올리고, 타입 검사와 빌드를 돌리고, 통과한 앱만 커밋하고, 실패한 앱은 되돌립니다.

복사본이 있던 시절에는 문구 하나를 바꾸려면 여섯 리포를 열어야 했고, 그중 하나는 늘 빠졌습니다. 공통화의 이득은 코드가 줄어드는 것보다, 바꿀 때 빠지는 곳이 없어지는 데 있습니다.