아바타 크기 조정

MuiAvatar 편집기를 통해 아바타 컴포넌트의 외관과 크기를 정밀하게 제어할 수 있습니다.

접근 경로

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

아바타 구성 옵션

기본 속성

변형 (Variant)

• 원형(Circular): 표준 원형 아바타
• 라운드(Rounded): 둥근 모서리의 사각형 아바타
• 사각(Square): 사각형 아바타

크기 (Size)

• 범위: 9~32px
• 슬라이더: 드래그로 실시간 크기 조정
• 효과: 너비/높이가 함께 변경

글꼴 크기 (Font Size)

• 범위: 9~24px
• 효과: 아바타 내부 문자(예: 이니셜) 크기에 영향
• 독립 제어: 아바타 실크기에는 영향 없음

고급 스타일

모서리 반경 (Border Radius)

• 라운드/사각 변형일 때 모서리 반경 사용자 설정

마진 (Margin)

• 아바타와 주변 요소 간 간격 조정(최대 20px)

사용 방법

아바타 크기 조정

1. "크기" 슬라이더의 핸들을 드래그합니다.
2. 실시간 미리보기를 확인합니다.
3. 적절한 크기에서 마우스를 놓습니다.

문자 크기 조정

1. "글꼴 크기" 슬라이더를 조정합니다.
2. 주로 아바타 내부 이니셜 크기에 영향합니다.
3. 아바타 크기와 텍스트가 조화롭게 보이도록 맞춥니다.

외관 스타일 수정

1. 적절한 변형을 선택합니다.
2. 필요 시 모서리 반경을 조정합니다.
3. 적절한 마진을 설정합니다.

활용 예시

• 사용자 아바타: 프로필·댓글 등 위치에 표시
• 플레이스홀더 아바타: 사용자 이니셜 표시 스타일
• UI 일관성: 모든 아바타 컴포넌트에 동일 설정 적용

사용 팁

1. 조화 유지: 아바타 크기를 주변 UI 요소와 조화롭게 유지
2. 가독성 고려: 내부 문자가 선명하게 보이도록 설정
3. 다양한 위치 테스트: 여러 화면 위치에서 검증
4. 과유불급: 과도하게 크거나 작지 않도록 주의

저장

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