서비스를 만들다 보면 처음 정한 이름과 색이 끝까지 가지 않는 경우가 많다. 프리아이브의 모바일 청첩장 프로젝트도 마찬가지였다. 개발이 한창 진행 중인 시점에 서비스명을 바꾸고 전체 컬러 톤을 전환했다. 이 글은 그 피벗의 과정과 이유, 그리고 코드베이스에 미친 실제 영향을 정리한 기록이다.
invete는 왜 안 됐는가
처음 서비스명은 invete였다. "초대하다"라는 의미의 invite에서 변형한 이름으로, 발음이 독특하고 도메인 확보가 용이하다는 이유로 선택했다. 하지만 개발을 진행하면서 문제가 드러났다.
첫째, 발음과 인지가 어려웠다. "인베트"인지 "인비트"인지 처음 듣는 사람마다 다르게 읽었다. 청첩장이라는 제품은 하객에게 공유되는 것이므로, 링크를 받은 사람이 직관적으로 "아, 초대장이구나"라고 인식해야 한다. invete는 그 기대를 충족하지 못했다.
둘째, 브랜드 확장성이 떨어졌다. 프리아이브는 모바일 청첩장을 시작으로 가족 클라우드까지 확장할 계획이다. invete는 초대장에만 한정된 느낌이 강했고, 향후 서비스 확장 시 브랜드 정체성이 모호해질 것이 예상됐다.
invite로의 전환 — 직관성을 택하다
결국 invite로 변경했다. 누구나 아는 단어, 발음 혼동 없음, "초대"라는 핵심 가치를 그대로 전달한다. 도메인은 서브도메인 구조로 해결했다. 이름 하나 바꾸는 결정이었지만, 프론트엔드 코드베이스 전체에 영향을 주는 작업이었다.
rose에서 lime으로 컴러 토큰 전환 다이어그램
변경 범위는 예상보다 넓었다. 컴포넌트 이름, API 엔드포인트 경로, 환경변수 키, 메타 태그, OG 이미지 텍스트, 그리고 README까지. 일괄 치환(find & replace)으로 해결되는 부분도 있었지만, 대소문자 조합이나 복합어(InveteCard → InviteCard) 같은 부분은 수작업이 필요했다.
이름 변경을 결정한 시점이 프론트엔드 개발의 약 60% 지점이었다. 솔직히 "이걸 지금 바꾸는 게 맞나" 싶었지만, 론칭 후에 바꾸는 것보다 지금이 비용이 적다는 판단이었다. 사이드 프로젝트에서 브랜딩 피벗의 타이밍은 "불편함을 느낀 바로 그 순간"이라고 생각한다. 미루면 기술 부채가 아니라 브랜드 부채가 쌓인다.
rose에서 lime/emerald로 — 톤앤매너 전환
서비스명 변경과 함께 전체 컬러 시스템도 전환했다. 기존에는 rose(분홍/장미) 계열로 전형적인 웨딩 서비스의 톤을 따랐다. 하지만 프리아이브는 기존 청첩장 서비스와 차별화하고 싶었다.
구분 | Before (rose) | After (lime/emerald) |
|---|---|---|
Primary | rose-500 (#f43f5e) | lime-500 (#84cc16) |
Accent | rose-300 | emerald-500 (#10b981) |
느낌 | 전통적, 여성적, 웨딩 전형 | 신선한, 중성적, 기술 기업 |
타깃 인상 | "또 다른 청첩장 서비스" | "뭔가 다른 서비스" |
lime/emerald 조합을 선택한 이유는 명확하다. 모바일 청첩장 시장의 기존 플레이어들이 거의 예외 없이 핑크·골드·베이지 계열을 사용한다. 여기서 초록 계열로 가는 것만으로도 시각적 차별화가 생긴다. 또한 프리아이브의 장기 비전인 가족 클라우드에는 웨딩 특화 컬러보다 중성적이고 기술적인 톤이 더 적합하다.
컬러 토큰 전환 — 실제 코드에서 일어난 일
프리아이브 프론트엔드는 Tailwind CSS를 사용한다. 컬러 전환은 크게 세 단계로 진행했다.
1단계: 디자인 토큰 정의. Tailwind config에 커스텀 컬러를 정의하고, 기존 rose 계열 하드코딩을 토큰으로 대체했다. bg-rose-500 같은 직접 참조 대신 bg-primary로 추상화한 것이다.
2단계: 일괄 치환. 토큰화되지 않고 남아 있던 rose 직접 참조를 전부 찾아 lime/emerald로 교체했다.
3단계: 시각 검수. 모든 화면을 돌며 색이 의도대로 적용됐는지 확인했다. 특히 hover, focus, disabled 상태의 색상 조합이 접근성 기준(WCAG AA)을 충족하는지 체크했다.
CSS 컴러 토큰 변경 코드 화면
이번 경험에서 가장 크게 배운 점은 컬러를 처음부터 토큰화해야 한다는 것이다. 만약 처음부터
bg-primary,text-accent같은 시맨틱 토큰을 썼다면, 컬러 전환은 config 파일 한 곳만 수정하면 끝났을 것이다. rose를 직접 참조한 컴포넌트가 수십 개 있어서 생각보다 공수가 들었다. 사이드 프로젝트라도 디자인 시스템의 기본은 지켜야 나중에 고생하지 않는다.
피벗 후 달라진 것
브랜딩 피벗 후 랜딩 페이지의 첫인상이 확실히 달라졌다. 기존에는 "또 하나의 모바일 청첩장 서비스"처럼 보였다면, 지금은 "개발팀이 만든 기술 기반 서비스"라는 인상을 준다. 프리아이브가 지향하는 정체성에 훨씬 가까워졌다.
