제품은 여럿, 로고는 2개만: 1인 개발 브랜드 자산 프론트 구현

라이프케어로그는 1인 개발 브랜드예요. 플랜씨(plan-c) 금융계산기, 플랜엘(plan-l) 법령·판례 검색, 플랜비(plan-b) 농구 동호회 매니저, 그리고 개발 중인 플랜티(plan-t)까지 제품은 계속 늘어나는데 로고는 지금까지 딱 2개만 만들었어요. 브랜드 심볼 하나, 공용 워드마크 하나. 디자인을 아껴서가 아니라, 나머지는 프론트엔드 구현으로 대신할 수 있었기 때문이에요.

제품마다 로고를 그리면 파일이 몇 개일까

직접 계산해 보니 답이 금방 나왔어요. 제품 4개에 라이트·다크 변형만 붙여도 8개, 여기에 파비콘·앱 아이콘·OG 이미지 규격이 곱해져요. 이 파일을 제품마다 손으로 갱신하는 건 관리가 아니라 부채예요. 그래서 그림 대신 규칙을 만들기로 했어요.

1단계: 워드마크는 이미지가 아니라 텍스트 컴포넌트

로고 대신 컴포넌트 하나를 두고 브랜드명과 제품명을 글꼴로 렌더링해요. 한글은 Pretendard, 영문은 Geist로 고정하고 굵기는 2종만 써요.

export function Brand({ product }: { product?: ProductId }) {
  return (
    <span className="brand" data-product={product}>
      LifeCareLog{product && <b>{PRODUCT_NAME[product]}</b>}
    </span>
  );
}

직접 만들어 보니 제품이 늘어도 이름 문자열 한 줄만 추가하면 끝이었어요. 적용해 봤더니 덤도 있었어요. 텍스트라서 다크 모드가 CSS만으로 따라오고, 스크린리더가 브랜드명을 그대로 읽어요.

2단계: 심볼은 SVG 1개, 색은 currentColor

심볼 SVG 파일은 딱 1개예요. 내부 색을 currentColor로 두면 부모의 색 토큰이 그대로 스며들어요. 파비콘도 이 SVG를 그대로 쓰고, SVG 안에 prefers-color-scheme 미디어쿼리를 넣어 다크 탭에서도 잘 보이게 했어요. 테스트해 보면 SVG 파비콘을 지원하는 브라우저에서는 시스템 테마가 바뀔 때 탭 아이콘이 같이 따라와요. 래스터가 꼭 필요한 자리는 180px 애플 터치 아이콘 정도라 빌드 때 SVG에서 뽑아요.

3단계: 제품 차이는 토큰 한 줄로

제품별 정체성은 로고가 아니라 액센트 색 하나로 갈라요. 토큰은 원시·시맨틱·컴포넌트 3층을 유지하고, 제품은 시맨틱 층의 --accent 한 줄만 덮어써요.

[data-product="plan-c"] { --accent: oklch(0.62 0.12 160); }
[data-product="plan-l"] { --accent: oklch(0.55 0.10 250); }

돌려 보니 OG 이미지도 같은 규칙으로 풀렸어요. 프레임워크의 OG 이미지 생성 기능에 워드마크 컴포넌트를 그대로 넣어 1200×630 규격으로 뽑으니, 제품이 추가돼도 디자인 파일을 열 일이 없었어요.

로고를 안 만든 게 아니라 순서를 정한 것

브랜드 심볼과 워드마크, 이 2개는 사람 손이 필요한 자산이라 먼저 만들었어요. 나머지는 코드에서 파생되게 두는 쪽이 1인 개발사에는 맞는 우선순위였어요. 어느 제품 하나가 독립 브랜드로 커지면 그때 전용 로고를 그리면 돼요. 그 전까지는 컴포넌트 하나와 토큰 한 줄이 로고 여러 개 몫을 해요.