블록과 컴포넌트: 리브랜딩 후에도 유지되는 것

모든 템플릿이 “쉬운 맞춤 설정”을 약속하지만, 제목 하나를 바꾸려고 수많은 파일을 검색해야 하는 경우가 있습니다. ShipAny Next는 다음 규칙으로 이 문제를 피합니다.

번역을 읽는 파일은 블록입니다. 모든 콘텐츠를 props로 받는 파일은 컴포넌트입니다.

블록은 교체를 전제로 합니다

블록은 src/blocks/에 있는 별도 설정 없이 사용하는 페이지 섹션입니다. <Hero />, <Pricing />, <Footer /> 등이 여기에 해당합니다. 각 블록은 i18n 메시지를 읽고 콘텐츠 설정을 구성하여 컴포넌트에 전달합니다. 데모용 자료이므로 실제 프로젝트를 시작할 때 삭제하고 직접 작성하면 됩니다.

// src/blocks/header.tsx — a block: reads i18n, wires a component
export async function Header() {
  const t = await getTranslations('landing');
  const navLinks = [{ href: '/#features', label: t('nav.features') }];
  return <SiteHeader navLinks={navLinks} />;
}

컴포넌트는 계속 재사용합니다

컴포넌트는 src/components/에 있으며 번역을 직접 읽지 않습니다. SiteHeader, PricingTable, AppSidebar 모두 콘텐츠를 props로 받습니다. 앱 이름, 문구, 언어를 알 필요가 없으므로 리브랜딩 후에도 계속 사용할 수 있습니다.

분리가 중요한 이유

리브랜딩하거나 템플릿에서 새 프로젝트를 시작할 때는 다음과 같이 작업합니다.

1. 유지: src/components/* — UI의 기반입니다.
2. 다시 작성: src/blocks/* — 콘텐츠를 연결하는 부분입니다.
3. 다시 작성: 블록에 콘텐츠를 제공하는 번역 JSON 파일입니다.

페이지 파일 자체는 작게 유지됩니다. page.tsx는 블록을 쌓아 페이지를 구성하는 역할만 합니다. 랜딩 페이지 전체를 바꿔도 기본 요소 대신 블록과 JSON만 수정합니다. 이 분리는 단순한 정리가 아닙니다. 다른 사람의 디자인 결정과 씨름하지 않고 전달할 내용을 다시 작성하는 것만으로 맞춤 설정할 수 있게 합니다.