우리 회사만의 Backstage 만들기: 권장 테마 커스터마이징 가이드

안녕하세요! 오늘은 Backstage의 사용자 경험을 결정짓는 가장 중요한 요소 중 하나인 '테마(Theme) 커스터마이징'에 대해 심층적으로 다뤄보겠습니다. 🎨

Backstage는 단순히 기능을 제공하는 툴을 넘어, 우리 회사의 브랜드 아이덴티티를 투영할 수 있는 플랫폼이어야 합니다. 기본 제공되는 테마도 훌륭하지만, 회사의 로고 색상이나 디자인 가이드에 맞춰 테마를 변경하는 것은 개발자들의 소속감을 높이는 데 큰 역할을 하죠. Backstage에서 권장하는 테마 커스터마이징 기법을 단계별로 완벽히 정리해 드립니다! 💡

---

🏗️ Backstage 테마 시스템의 기초: Material UI

Backstage의 UI는 Material UI (MUI)를 기반으로 구축되었습니다. 따라서 테마를 커스터마이징한다는 것은 곧 MUI의 테마 시스템을 활용한다는 의미와 같습니다.

Backstage는 크게 두 가지 수준의 커스터마이징 방식을 제공합니다.

1. Light/Dark 모드 전환 및 기본 색상 변경
2. 완전한 커스텀 테마 생성 및 적용

---

🌟 1단계: 기본 색상 및 폰트 커스터마이징 (추천 방식)

가장 권장되는 방식은 Backstage에서 제공하는 createUnifiedTheme 함수를 사용하는 것입니다. 이 함수는 MUI 테마를 Backstage의 특수한 요구사항에 맞게 확장해 줍니다.

✅ 주요 설정 항목

• Palette: 주색상(Primary), 보조색상(Secondary), 배경색 등을 지정합니다.
• Typography: 폰트 패밀리, 크기, 굵기 등을 설정합니다.
• Default Page Themes: Backstage 특유의 헤더 그라데이션 등을 정의합니다.

---

🛠️ 2단계: 실제 코드 적용하기 (패키지: packages/app)

테마 작업은 프론트엔드 앱인 packages/app 폴더 내에서 이루어집니다.

📝 커스텀 테마 정의 예시 (src/theme/myTheme.ts)

TypeScript

import { createUnifiedTheme, themes } from '@backstage/theme';

export const myCustomTheme = createUnifiedTheme({
  palette: {
    ...themes.light.palette,
    primary: {
      main: '#3498db', // 우리 회사의 메인 블루 컬러!
    },
    secondary: {
      main: '#2ecc71',
    },
  },
  fontFamily: 'Roboto, Arial',
  /* 헤더 테마 등을 추가로 정의할 수 있습니다 */
});

📝 앱에 테마 등록하기 (src/App.tsx)

정의한 테마를 App.tsx의 createApp 함수에 등록해야 합니다.

TypeScript

import { myCustomTheme } from './theme/myTheme';

const app = createApp({
  apis: ...,
  themes: [
    {
      id: 'my-theme',
      title: 'Company Theme',
      variant: 'light',
      Provider: ({ children }) => (
        <ThemeProvider theme={myCustomTheme}>
          {children}
        </ThemeProvider>
      ),
    },
    // 기존 dark 테마 등도 함께 유지할 수 있습니다.
  ],
});

---

🎨 3단계: 페이지별 헤더 테마 커스텀 (Advanced)

Backstage는 엔티티 타입(Service, API, Website 등)에 따라 상단 헤더의 색상이나 패턴을 다르게 가져갈 수 있는 기능을 제공합니다. 이를 통해 사용자가 현재 어떤 종류의 자원을 보고 있는지 직관적으로 알 수 있게 합니다.

• Shape: 헤더에 들어갈 기하학적 무늬를 선택합니다.
• Colors: 그라데이션에 사용될 색상 조합을 지정합니다.

---

💡 테마 커스터마이징 시 꼭 기억해야 할 팁!

1. 접근성 준수: 색상을 바꿀 때 텍스트와 배경의 대비가 충분한지 꼭 확인하세요. ♿
2. 일관성 유지: 모든 플러그인이 동일한 테마를 공유하므로, 특정 화면에서만 튀는 색상은 피하는 것이 좋습니다.
3. 다크 모드 배려: 라이트 모드만 만들지 마세요! 개발자들은 다크 모드를 사랑합니다. 🌙

---

🏁 결론: 테마는 개발자 경험의 시작입니다

Backstage에서 권장하는 테마 커스터마이징 기법의 핵심은 createUnifiedTheme을 통해 MUI 테마를 확장하고, 이를 앱의 themes 배열에 등록하는 것입니다.

이 방식을 사용하면 Backstage의 모든 코어 컴포넌트와 플러그인에 일관된 스타일이 즉시 적용됩니다. 지금 바로 우리 회사만의 독창적인 개발자 포털을 디자인해 보세요! 🚀