밴드 설정 활용 사례 – ZenBlocks buttonBasic
결론
밴드 기능은 버튼에 **대각선 라벨**을 추가해 `SALE`, `NEW`, `추천`, `한정` 같은 짧은 문구를 강조할 때 효과적입니다.
—
밴드란?
밴드는 버튼 모서리에 겹쳐 표시되는 장식 리본으로, 배지 형태의 시선 유도 요소입니다.
### 특징
– 4개 모서리 위치 지원
– 대각선 형태 표시
– 배경색/텍스트색 개별 설정
– 버튼 본문 텍스트/아이콘과 독립 동작
– 반응형(기기별 크기 조정) 지원—
활용 사례
### 사례 1: 프로모션
– 문구: `SALE`, `-50%`, `기간 한정`
– 위치: 좌상단/우상단### 사례 2: 신규/추천
– 문구: `NEW`, `추천`, `인기`
– 위치: 우상단### 사례 3: 긴급/희소성
– 문구: `잔여 3석`, `D-2`
– 위치: 좌상단### 사례 4: 상태 표기
– 문구: `FREE`, `PRO`, `Beta`
– 위치: 우상단—
설정 절차
1. 밴드 설정 패널을 엽니다.
2. 짧은 문구를 입력합니다(권장 2~6자).
3. 위치를 선택합니다.
4. 배경색/텍스트색을 설정합니다.
5. 폰트 크기를 조정합니다.
6. 프런트엔드에서 균형을 확인합니다.—
주의사항
– 문구가 길면 대각선 레이아웃이 깨질 수 있습니다.
– 버튼 라운드가 큰 경우 모서리 밸런스를 확인하세요.
– 모바일에서는 밴드 크기를 조금 줄이는 것이 안정적입니다.—
관련 설정
– [밴드 설정](../band/)
– [스타일 설정](../style/)
– [레이아웃 설정](../layout/)