제품별 테마

제품·브랜드별 테마를 적용하는 방법과 제공 테마

밀당 디자인 시스템은 제품별 테마를 지원합니다. 같은 컴포넌트라도 테마만 바꾸면 디자인이 달라집니다.

개요

하나의 공유 컴포넌트에 테마(mildang·educore·goes)를 적용하면 제품마다 다른 UI가 된다

밀당은 mildang·educore·goes 처럼 브랜드가 다른 여러 제품을 함께 운영합니다. 제품마다 색상이나 글꼴 같은 시각적 요소는 다르지만, 버튼·입력창·다이얼로그가 동작하는 방식은 같습니다. 그래서 제품마다 컴포넌트를 따로 만들지 않고, 하나의 컴포넌트와 기능 코드를 공유한 채 테마(디자인 값의 묶음)만 바꿔 제품별 차이를 표현합니다.

한 번 만든 컴포넌트를 모든 제품에서 그대로 재사용합니다.
컴포넌트의 사용법(prop)·동작·접근성은 제품과 관계없이 동일합니다.
브랜드에 따른 화면 차이는 컴포넌트 코드가 아니라 토큰 체계에서 관리합니다.

제공 테마

mildang (기본 테마)
educore (경기도온라인학교)
goes (글로벌)

테마는 색상·타이포그래피·간격·모서리·그림자 같은 시각 토큰을 하나로 묶은 값입니다. 테마를 바꿔도 컴포넌트의 prop·동작·접근성은 달라지지 않습니다.

사용법

테마를 적용할 요소에 data-panda-theme 속성을 지정하면, 그 안에 있는 모든 컴포넌트가 해당 테마의 토큰을 사용합니다. 보통 앱의 최상위 요소에 한 번만 지정합니다.

html

<body data-panda-theme="educore">
  <!-- 이 안의 컴포넌트는 educore 테마로 표시됩니다 -->
</body>

특정 영역만 다른 테마로 보여 주려면, 그 영역을 data-panda-theme 로 감쌉니다.

html

<div data-panda-theme="mildang">
  <!-- educore 앱 안에서 이 영역만 mildang 테마로 표시됩니다 -->
</div>

다크 모드

다크 모드는 제품 테마와 별개이며, .dark 클래스로 켭니다. 제품 테마와 함께 쓸 때는 data-panda-theme 와 .dark 를 같은 요소에 함께 지정합니다.

html

<body data-panda-theme="mildang" class="dark">
  ...
</body>

mildang-frontend 저장소에서는 빌드할 때 각 테마의 CSS 가 함께 생성되어 어떤 테마든 적용할 수 있습니다. 반면 배포 패키지의 styles.css 는 용량을 줄이기 위해 현재 mildang 테마만 포함하므로, 외부에서는 mildang 테마를 기준으로 사용합니다.

권장 사항

구분	내용
권장	테마는 앱의 최상위 요소에 한 번만 지정하고, 하위 컴포넌트는 그대로 사용합니다.
권장	일부 영역만 다른 테마가 필요할 때 그 영역을 `data-panda-theme` 로 감쌉니다.
지양	브랜드에 따른 시각 차이를 컴포넌트 코드에 직접 분기하지 않습니다(토큰 체계에서 관리).
지양	다크 모드를 함께 쓸 때 `data-panda-theme` 와 `.dark` 를 서로 다른 요소에 나눠 지정하지 않습니다.

참고

@mildang/styled-system/themes 의 getTheme·injectTheme 은 Storybook 같은 미리보기 환경에서 테마를 실행 중에 교체할 때 사용하는 도구입니다. 제품 앱에서는 data-panda-theme 만으로 충분합니다.
새 테마를 추가하거나 테마 값을 보정하는 테마 제작은 이 문서의 범위를 벗어납니다. 자세한 내용은 DS 기여자용 가이드 packages/design-system/docs/custom-theme.md 를 참고하세요.