썸네일과 배경의 차이와 선택 기준 – ZenBlocks buttonBasic
결론
**썸네일**은 버튼 내부의 독립 이미지이고, **배경**은 버튼 전체 하단 레이어입니다.
—
비교
| 비교 항목 | 썸네일 | 배경 |
|—|—|—|
| 위치 | 버튼 내부 | 버튼 전체 배경 |
| 텍스트 관계 | 나란히/상하 배치 | 텍스트가 위에 놓임 |
| 크기 제어 | `너비` / `높이` | `Background 크기` |
| 호버 | 크기/위치 변화 가능 | 오버레이/색상 변화 |
| 동영상 | 불가 | 가능 |
| 오버레이 | 불가 | 가능 |
| 라운드 | 썸네일 자체 설정 | 보통 버튼 라운드 따름 |
| 반응형 | 기기별 설정 가능 | 기기별 설정 가능 |—
사용 기준
### 썸네일이 적합한 경우
1. 제품/로고를 명확히 보여줘야 할 때
2. 텍스트+이미지 조합이 필요할 때
3. 이미지에 별도 스타일을 적용할 때
4. 호버 시 이미지 확대 효과가 필요할 때### 배경이 적합한 경우
1. 버튼 전체 분위기를 만들고 싶을 때
2. 사진 위 텍스트 + 오버레이 구성이 필요할 때
3. 배경 동영상이 필요할 때
4. `기본값/Hover` 상태를 다르게 쓰고 싶을 때### 둘 다 사용하는 경우
– 배경: 분위기 연출
– 썸네일: 핵심 시각 요소
– 텍스트: 행동 유도 메시지—
주의사항
– 썸네일은 `object-fit` 특성상 비율에 따라 잘릴 수 있습니다.
– 오버레이가 너무 불투명하면 배경이 보이지 않습니다.
– 고용량 이미지 2개 이상 사용 시 성능 저하가 발생할 수 있습니다.—
관련 설정
– [썸네일 설정](../thumbnail/)
– [배경 설정](../background/)
– [레이아웃 설정](../layout/)