리스트 간격 조정

리스트 간격은 주로 ListItemButton 편집기로 제어하며, 사이드패널 탭 리스트에 사용됩니다.

접근 경로

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

구성 옵션

기본 속성

밀집 모드 (Dense)

• 켜면 리스트 항목의 세로 간격을 줄입니다.
• 더 많은 내용을 보여줄 때 적합합니다.

좌우 패딩 제거 (Disable Gutters)

• 리스트 항목의 좌우 패딩을 제거합니다.
• 콘텐츠가 가장자리에 더 가깝게 배치됩니다.

구분선 (Divider)

• 리스트 항목 사이에 구분선을 추가합니다.
• 활성화 시 하단 테두리 설정이 노출됩니다.

리플 비활성화 (Disable Ripple)

• 클릭 시 리플 애니메이션을 끕니다.
• 보다 단정한 인터랙션 경험을 제공합니다.

스타일 오버라이드

모서리 반경 (Border Radius)

• 리스트 항목의 모서리 반경을 조정(0~20px)

패딩 (Padding)

• 상하 패딩: 항목 내부의 세로 간격
• 좌우 패딩: 항목 내부의 가로 간격
• 최대값: 20px
• 주의: "좌우 패딩 제거"를 켜면 좌우 패딩 값이 적용되지 않을 수 있음

마진 (Margin)

• 상하 마진: 항목 간 세로 간격
• 좌우 마진: 항목과 컨테이너 가장자리 간 거리
• 최대값: 20px

적용 장면

사이드패널 탭 리스트

• 주요 용도: 사이드패널의 탭 리스트 간격 제어
• 시각 효과: 탭 사이의 밀집도에 영향
• 사용자 경험: 적절한 간격이 탐색 효율을 높임

조정 가이드

컴팩트 레이아웃

1. "밀집 모드" 켜기
2. 상하 패딩·마진 축소
3. 구분선 비활성화 고려

여유 레이아웃

1. "밀집 모드" 끄기
2. 패딩·마진 확대
3. 구분선으로 시각적 분리 강화

미니멀 스타일

1. "좌우 패딩 제거" 켜기
2. "리플 비활성화" 켜기
3. 작은 모서리 반경 또는 없음

사용 방법

기본 간격 조정

1. 필요에 따라 "밀집 모드"를 켜거나 끕니다.
2. "패딩"의 상하 값을 조정해 내부 간격을 제어합니다.
3. "마진"의 상하 값을 조정해 항목 간 간격을 제어합니다.

수평 간격 조정

1. 내용이 가장자리에 가깝게 필요하면 "좌우 패딩 제거"를 켭니다.
2. 그렇지 않으면 "패딩" 좌우 값으로 간격을 조정합니다.
3. "마진" 좌우 값으로 전체 위치를 조정합니다.

시각 최적화

1. 적절한 "모서리 반경"을 설정합니다.
2. 디자인에 맞춰 "구분선" 적용 여부를 결정합니다.
3. 더 단정한 외관을 원하면 "리플 비활성화"를 고려합니다.

미리보기

모든 설정은 사이드패널 탭 리스트에 실시간 적용되어 즉시 효과를 확인할 수 있습니다.

사용 팁

1. 콘텐츠 밀도 고려: 탭이 많을 때는 컴팩트 레이아웃 권장
2. 시각 균형 유지: 과도한 크고/작은 간격은 미관을 해침
3. 다양한 화면 테스트: 창 크기별로 효과 확인
4. 사용자 습관 고려: 과도한 특이 간격은 사용성을 해칠 수 있음

저장

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