여러 페이지에 새 테마 일괄 적용, 디자인 시스템 통합 완성

이번 작업은 CAPSULE과 VITRINE이라는 두 가지 디자인 테마를 전체 페이지에 일관성 있게 적용하고, 각 페이지의 레이아웃을 통일하는 "reskin" 프로젝트를 마무리한 것이다. FigureCard에서 시작한 디자인 변경이 BrandDetail, Drops, FigureDetail, Releases, SeriesDetail 등 6개 컴포넌트에 걸쳐 완전히 통합됐다는 의미다.

왜 "전체 페이지"에 한 번에 적용했나

일반적으로 디자인 리스킨을 진행할 때 가장 큰 도전은 일관성 문제다. 한 페이지는 새 테마, 다른 페이지는 옛 디자인이라면 사용자 경험이 깨진다. 특히 이미지/상품 검색, 상세 조회, 필터링, 목록 등 여러 도메인이 엮여 있으면 어디 하나 빠지면 전체 사용성이 떨어진다.

내가 본 전형적인 안티 패턴은 이런 것들이었다:

• 점진적 마이그레이션 → 완료 못함: "일단 홈은 새 테마로, 나머지는 나중에" 하다가 결국 섞여 있음
• 컴포넌트별로 따로 수정 → 중복 코드: 각 페이지에서 테마 조건부 렌더링을 따로 작성
• 레이아웃 불일치: 같은 역할의 컴포넌트인데 각 페이지에서 margin/padding이 다름

이번에는 한 번에 6개 파일을 수정함으로써 디자인 시스템 측면에서 "finalize"(완성) 상태를 만들었다. 즉, 앞으로 새로운 페이지가 추가되거나 기존 페이지가 수정될 때 이미 정의된 CAPSULE/VITRINE 테마를 바로 적용하면 된다는 뜻이다.

수정된 컴포넌트들의 역할

이 6개는 모두 "Body" 컴포넌트인데, 즉 페이지의 메인 콘텐츠 영역을 담당한다. 각각 다른 도메인(브랜드, 상품, 출시 일정)을 다루지만, 이제는 모두 같은 디자인 테마를 공유한다.

이번 작업에서 얻은 교훈

1) "Finalize"의 무게
단순히 파일을 수정한 게 아니라, 이걸 통해 팀원들이나 미래의 나에게 "이제 CAPSULE/VITRINE 테마는 완성됐다"는 신호를 보냈다. 누군가 새 페이지를 만들 때 이전 코드를 참고하면 패턴이 명확하다.

2) 컴포넌트 계층 설계의 중요성
"Body" 컴포넌트라는 네이밍과 구조로 페이지별 내용 영역을 분리했기에, 테마를 한 곳에서 일괄 적용할 수 있었다. 만약 Card → Detail → List → Header가 계층도 없고 섞여 있었다면 이 작업이 10배는 걸렸을 거다.

3) 레이아웃 통일의 함정
각 페이지의 콘텐츠가 다르다고 해서 레이아웃까지 다르게 만들면 안 된다. 예를 들어 마진/패딩, 그리드 열 수, 카드 크기 같은 기본 변수들은 프로젝트 전체에서 공통 변수로 관리하는 게 낫다. (CSS 변수나 Astro의 layout props 활용)

4) 코드 리뷰와 의사소통
6개 파일을 함께 수정하는 건 복잡해 보이므로, 이때 "왜 이런 변경을 했는지", "어떤 부분이 핵심인지"를 동료와 명확히 해야 한다. 나중에 누군가 이 코드를 보며 "왜 여기서는 CAPSULE이고 저기서는 VITRINE이지?"라고 헷갈리지 않도록.

Astro에서 테마 적용하는 일반적 패턴

이런 류의 작업을 할 때 자주 쓰는 접근법:

---
// 예: BrandDetailBody.astro
interface Props {
  theme: 'CAPSULE' | 'VITRINE';
  data: BrandData;
}

const { theme, data } = Astro.props;
const layoutClass = theme === 'CAPSULE' 
  ? 'layout-capsule' 
  : 'layout-vitrine';
---

<section class={layoutClass}>
  <Card theme={theme} item={data.hero} />
  <DetailSection theme={theme} info={data.details} />
</section>

테마를 prop으로 내려받으면, 각 자식 컴포넌트도 테마를 알 수 있다. 이렇게 하면:
- 테마 변경이 부모에서 한 곳만
- 자식들은 일관되게 같은 테마 적용
- 나중에 테마 추가/변경할 때 영향 범위가 명확함

정리하면, 이번 "finalize" 작업은 단순 디자인 변경을 넘어 시스템 관점에서 "이제 여기까지는 완성" 이라는 선을 그었다는 점이 중요하다. 팀이 성장하고 페이지가 늘어날 때 이런 명확한 경계가 얼마나 도움이 되는지 나중에 느끼게 될 것 같다.

🛒 이 글과 어울리는 추천 상품

• 27인치모니터 쿠팡에서 보기 →
• 기계식키보드 쿠팡에서 보기 →
• 사무의자 쿠팡에서 보기 →

*위 링크는 쿠팡파트너스 활동의 일환이며, 일정액의 수수료를 제공받을 수 있습니다.