제품 라인을 미리 여는 프론트엔드 구조: plan-a~z 네이밍

제품 이름을 plan-a, plan-b, plan-c 이렇게 알파벳으로 미리 잡아두면, 다음에 뭘 더 만들어도 이름 고민이 줄어요. 그런데 이름만 정해두는 걸로 끝은 아니더라고요. 막상 화면을 짜다 보면 플랜이 하나 늘 때마다 네비게이션·푸터·랜딩 카드를 손으로 다 고치고 있는 저를 발견해요. 혹시 비슷한 적 없나요?

이름은 26칸, 화면은 몇 칸?

plan-a부터 plan-z까지면 슬롯이 26개예요. 이름은 공짜로 열어뒀는데 화면 구조가 안 받쳐주면, 세 번째 제품쯤부터 복사·붙여넣기가 쌓여요. 그래서 저는 네이밍을 정한 김에 프론트엔드도 "플랜이 늘어난다"를 전제로 짜기로 했어요.

제품 레지스트리를 한 곳에

가장 먼저 한 건 제품 목록을 설정 파일 1곳에 모으는 일이었어요. 슬러그·이름·짧은 소개·대표 색을 배열 하나에 두고, 네비게이션·푸터·랜딩의 카드 목록이 전부 이 배열을 읽게 했어요. 직접 이렇게 묶어보니 화면 곳곳에 흩어져 있던 "plan-c는 여기, plan-l은 저기" 같은 하드코딩이 사라지더라고요.

• ✓레지스트리 한 곳
• ✓공유 셸
• ✓플랜별 색 토큰

라우트와 셸은 공유

두 번째는 공유 셸이에요. 헤더·푸터·공통 여백을 감싸는 레이아웃을 하나 두고, 각 플랜 화면은 그 안에 내용만 채워요. 동적 라우트 하나로 /플랜슬러그 형태를 받으면 새 제품이 생겨도 라우트를 새로 설계할 일이 없어요. 플랜엘(plan-l)을 붙일 때 해보니, 화면 뼈대는 그대로 두고 안쪽만 바꾸면 됐어요.

색은 플랜마다, 뼈대는 공유

플랜마다 성격이 다르니 색은 구분하고 싶었어요. 그래서 기본 중립색 위에 강조색 토큰만 플랜별로 바꿨어요. CSS 변수로 강조색 하나를 갈아끼우는 식이라, 카드·버튼·링크가 알아서 그 플랜 색을 따라가요. 색 토큰은 플랜당 2~3개면 충분했어요. 전체를 새로 칠하지 않아도 제품이 달라 보여요.

새 플랜은 몇 분이면 붙어요

이렇게 해두니 새 제품을 붙이는 절차가 단순해져요.

설정 배열에 한 줄 추가→라우트 파일 1개→네비게이션·랜딩 자동 반영

레지스트리에 한 줄 추가하고, 필요하면 라우트 파일 하나 만들고, 강조색만 지정하면 네비게이션과 랜딩 카드가 알아서 갱신돼요. 돌려보니 예전에 30분 넘게 걸리던 "제품 하나 붙이기"가 10분 안쪽으로 줄었어요. 테스트해보면 레지스트리 배열 길이와 화면 카드 수가 같은지만 확인해도 빠진 제품을 금방 잡아요.

저는 플랜씨(plan-c) 같은 무료 계산기부터 월 3건 무료로 법령을 찾는 플랜엘(plan-l), 개발 중인 플랜티(plan-t)까지 라이프케어로그라는 이름 아래 늘려가는 중이에요. 혼자 운영하면서 배운 건, 이름을 미리 열어두는 것만큼 화면 구조도 미리 열어둬야 반복이 줄어든다는 점이었어요. 이름으로 26칸을 잡아뒀으니, 화면도 그만큼 받아줄 수 있게 만들어두면 나중이 편해져요.