# Iconbox Widget – 아이콘 기반 정보 전달의 완성
들어가며
케이테마 프리미엄 Iconbox Widget은 아이콘과 텍스트를 조합하여 서비스, 기능, 이점 등을 시각적으로 효과적으로 전달하는 위젯입니다. Repeater 기능으로 원하는 만큼 아이템을 추가할 수 있으며, 다양한 레이아웃과 스타일 옵션을 제공합니다.
주요 기능
- Repeater 기반: 아이템 개수 제한 없음
- FontAwesome 아이콘: 수천 개의 아이콘 중 선택
- Grid 레이아웃: 2, 3, 4, 6열 선택 가능
- 정렬 옵션: 좌, 중앙, 우 정렬
- 완전한 반응형: 데스크톱/태블릿/모바일 별도 설정
- 풍부한 스타일: 아이콘 색상, 크기, 배경, 테두리, 그림자 등
각 아이템 구성
- 아이콘: FontAwesome 아이콘 선택
- 제목: 기능 또는 서비스 이름
- 설명: 상세 설명 (HTML 지원)
- 링크: 클릭 시 이동할 URL (선택 사항)
레이아웃 설정
컬럼 수 (반응형)
- 데스크톱: 2, 3, 4, 6열 (기본: 3)
- 태블릿: 1, 2, 3, 4열 (기본: 2)
- 모바일: 1, 2열 (기본: 1)
정렬
- 왼쪽: 아이콘과 텍스트 좌측 정렬
- 중앙: 중앙 정렬 (기본값)
- 오른쪽: 우측 정렬
간격
- Row Gap: 행 간격 (0 ~ 100px)
- Column Gap: 열 간격 (0 ~ 100px)
스타일 옵션
1. 아이콘 스타일
- 색상: 아이콘 색상
- 크기: 24px ~ 100px (기본: 48px)
- 배경색: 아이콘 배경 (선택 사항)
- 배경 크기: 패딩으로 조절
- 테두리: 스타일, 굵기, 색상, Border Radius
- 그림자: Box Shadow
- 호버 효과: 색상 변화, Transform 등
- Margin Bottom: 제목과의 간격
2. 제목 스타일
- Typography: 폰트, 크기, 굵기, 줄 높이
- 색상: 텍스트 색상
- 호버 색상: 마우스 오버 시
- Margin Bottom: 설명과의 간격
3. 설명 스타일
- Typography: 폰트, 크기, 굵기, 줄 높이
- 색상: 텍스트 색상
4. 박스 스타일
- 배경: 단색, 그라디언트, 이미지
- 패딩: 내부 여백
- 테두리: 스타일, 굵기, 색상, Border Radius
- 그림자: Box Shadow
- 호버 효과: 배경 변화, 그림자 강화, Transform 등
실전 활용 예제
예제 1: 서비스 소개 (3열 그리드)
설정:
- 컬럼: 3열 (데스크톱)
- 정렬: 중앙
- 아이템: 6개 (서비스 6가지)
- 아이콘: 컬러 아이콘 (각기 다른 색상)
- 아이콘 크기: 56px
- 배경: 원형 (Border Radius 50%), 연한 브랜드 컬러
- 박스: 흰색 배경, 그림자, Border Radius 15px
- 호버: translateY(-10px)
예제 2: 통계 정보 (4열 그리드)
설정:
- 컬럼: 4열 (데스크톱)
- 정렬: 중앙
- 아이템: 4개 (통계 4가지)
- 아이콘: 단색 (Primary Color)
- 아이콘 크기: 64px
- 배경: 없음 (아이콘만)
- 제목: 큰 숫자 (36px, Bold)
- 설명: 작은 텍스트 (14px)
- 박스: 테두리만 (1px solid)
예제 3: 프로세스 단계 (1열 세로)
설정:
- 컬럼: 1열 (모든 디바이스)
- 정렬: 왼쪽
- 아이템: 4개 (단계 4가지)
- 아이콘: 숫자 아이콘 (1, 2, 3, 4)
- 아이콘 배경: 원형, 그라디언트
- 제목: 왼쪽 정렬, Bold
- 설명: 긴 텍스트
- 박스: 왼쪽 테두리만 (5px solid)
디자인 팁
아이콘 스타일 조합
원형 배경 + 컬러 아이콘
- Border Radius: 50%
- 배경: 연한 브랜드 컬러 (예: rgba(13, 110, 253, 0.1))
- 아이콘 색상: 진한 브랜드 컬러 (#0d6efd)
- 크기: 80px × 80px 영역, 아이콘 48px
사각 배경 + 흰색 아이콘
- Border Radius: 10px
- 배경: 그라디언트 (#667eea → #764ba2)
- 아이콘 색상: 흰색
- 크기: 70px × 70px 영역, 아이콘 40px
배경 없음 + 큰 아이콘
- 배경: 없음
- 아이콘 색상: Primary Color
- 크기: 64px ~ 80px (큰 사이즈)
- 간결하고 미니멀
호환성
- WordPress 5.0+
- Elementor 3.0+
- PHP 7.4+
- 케이테마 프리미엄 플러그인 2.0+
- 모든 최신 브라우저 지원
마무리
Iconbox Widget은 서비스, 기능, 통계, 프로세스 등 다양한 정보를 시각적으로 전달하는 만능 위젯입니다. Repeater 기능으로 원하는 만큼 아이템을 추가하고, Grid 레이아웃과 풍부한 스타일 옵션으로 완벽한 디자인을 구현하세요!