테마 구성 수정
테마 편집기에서 6개의 탭을 통해 상세하게 테마를 커스터마이징할 수 있습니다. 이 문서는 각 구성 페이지의 기능과 사용 방법을 설명합니다.
테마 편집기 열기
기존 테마 편집
- 커스텀 테마 페이지에서 테마 카드 우상단 더보기(⋮) 클릭
- "편집" 선택
새 테마 생성
- "새 테마 생성" 카드를 클릭
- 기본 템플릿을 선택해 커스터마이징 시작
테마 편집기 인터페이스
테마 편집기는 6개의 주요 구성 탭으로 이루어져 있습니다.
1. 기본 정보 (⚙️)
- 테마 이름: 식별하기 쉬운 이름 지정
- 테마 설명: 테마 특징·적용 장면을 간단히 서술
- 미리보기: 실시간 효과 확인
2. 컬러 스킴 (🎨)
- 라이트 모드 설정: 라이트 테마 색상 구성
- 다크 모드 설정: 다크 테마 색상 구성
- 주요 색상: primary/secondary
- 시맨틱 색상: error/warning/info/success
- 배경색: default/paper
- 텍스트 색상: primary/secondary/disabled
- 동작 색상: hover/selected/focus
3. 타이포그래피 (📝)
- 전역 글꼴 설정: 폰트 패밀리, 기본 크기
- 헤딩: H1~H6 크기와 스타일
- 본문: Body1, Body2 설정
- 버튼: 버튼 텍스트 스타일
- 캡션: 소형 텍스트 스타일
4. 컴포넌트 커스터마이징 (🧩)
주요 컴포넌트 구성 카드:
- CssBaseline: 전역 스타일 기본 설정
- List: 리스트 컨테이너 기본 스타일
- ListItem: 리스트 항목 스타일·간격
- ListItemButton: ⭐ 리스트 버튼(사이드패널 탭에 사용)
- Avatar: 아바타 크기·형태
- IconButton: 아이콘 버튼 스타일
- Icon: 아이콘 크기·색상
- Menu: 메뉴 배경·간격
- MenuItem: 메뉴 항목 스타일
- Dialog: 다이얼로그 외관
- DialogTitle: 다이얼로그 제목 스타일
- ButtonBase: 기본 버튼 속성
- Button: 일반 버튼 스타일
⭐ 표시는 인터페이스에 영향이 큰 컴포넌트를 의미합니다.
5. JSON 편집기 (📄)
- 직접 편집: JSON 형식으로 전체 테마 구성 편집
- 포맷팅: JSON 자동 포맷팅
- 검증: JSON 문법 오류 검사
- 고급 사용자용: 코딩 경험자에게 적합
6. 전역 스타일 (🎨)
- 커스텀 CSS: 추가 CSS를 적용
- 고급 커스터마이징: 기본 스타일 오버라이드
- 주의: CSS 지식 필요
저장 및 미리보기
실시간 미리보기
- 편집 중 변경 사항이 실시간으로 반영됩니다.
- 변경은 즉시 인터페이스에 적용됩니다.
저장 옵션
- 저장: 현재 변경 사항 저장
- 취소: 변경 취소 후 돌아가기
중요 안내
- 커스텀 테마 기능은 프리미엄 권한이 필요합니다.
- 편집 중에는 실시간 미리보기가 표시됩니다.
- 저장 후 테마는 전체 확장 인터페이스에 즉시 적용됩니다.
사용 팁
- 컬러 스킴부터: 주요 색상 톤을 먼저 정의하세요.
- 글꼴 크기 조정: 가독성을 우선 최적화하세요.
- ListItemButton 주의: 사이드패널 탭 표시를 좌우합니다.
- 미리보기 활용: 실제 효과를随時 확인하세요.
- 컴포넌트 설명 활용: 각 카드에 용도가 기재되어 있습니다.