아이콘 크기 조정

아이콘 크기는 주로 MuiIcon 편집기에서 제어하며, IconButton 편집기의 설정도 영향을 줍니다.

기본 제어: MuiIcon 편집기

접근 경로

1. VertiTab 설정 페이지 열기
2. "커스텀 테마" 메뉴 클릭
3. 편집할 테마 선택 → "편집"
4. "🧩 컴포넌트 커스터마이징" 탭 클릭
5. "Icon" 카드 펼치기

아이콘 구성 옵션

기본 속성

• 기본 fontSize: Inherit, Small, Medium, Large 중 선택
• 기본 색상: 아이콘의 기본 표시 색상

스타일 오버라이드

• 사용자 정의 크기: 8~48px 슬라이더로 정밀 조정
• 우선순위: 모든 아이콘의 기본 fontSize를 덮어씀
• 실시간 미리보기: 조정 즉시 반영

사용 방법

1. 적절한 기본 fontSize 레벨을 선택합니다.
2. 보다 정밀 제어가 필요하면 사용자 정의 슬라이더를 사용합니다.
3. 미리보기를 확인하며 만족스러운 크기로 조정합니다.

영향 요소: IconButton 편집기

접근 경로

1. "컴포넌트 커스터마이징" 탭에서
2. "IconButton" 카드 펼치기

관련 설정

기본 속성

• 크기 (Size): Small/Medium/Large
• 영향 범위: 버튼 컨테이너 크기 → 내부 아이콘 시각 효과에 간접 영향

스타일 오버라이드

• 패딩 (Padding): 버튼 내부 여백
• 마진 (Margin): 주변 요소와의 간격
• 간접 영향: 내부 아이콘의 시각적 균형에 영향

두 편집기의 관계

편집기	직접 영향	간접 영향
MuiIcon	아이콘 자체 크기	전체 인터페이스의 아이콘
IconButton	버튼 컨테이너 크기	버튼 내부 아이콘 표시

조정 전략

전역 아이콘 크기

1. MuiIcon 편집기를 우선 사용
2. "사용자 정의 크기"로 정밀 제어
3. 권장 범위: 12~24px (대부분 장면에 적합)

버튼 아이콘 최적화

1. IconButton 설정과 함께 조정
2. 패딩을 늘리면 시각적 여유가 생깁니다.
3. 버튼 크기를 조절해 터치/클릭 경험을 개선합니다.

특수 장면 처리

1. 소형 아이콘: 8~12px — 보조 요소용
2. 표준 아이콘: 16~20px — 일반 UI 요소용
3. 대형 아이콘: 24~32px — 주요 동작 버튼용

적용 예시

• 메뉴 아이콘: 설정·내비게이션 등 위치의 아이콘
• 동작 아이콘: 닫기·최소화·새로고침 등 기능 아이콘
• 상태 아이콘: 로딩·경고·성공 등 상태 표시
• 장식 아이콘: UI 미화·시각 안내

사용 팁

1. 일관성 유지: 동일 계열 기능은 같은 크기 사용
2. 사용성 고려: 클릭/터치가 쉬울 만큼 충분한 크기
3. 밀도 테스트: 고해상도 화면에서 가독성 검증
4. 미와 기능의 균형: 보기 좋고 쓰기 좋게

저장

모든 조정은 실시간 미리보기로 반영되며, "저장"을 눌러 변경사항을 저장하세요.