# FAQ Widget – 자주 묻는 질문 아코디언
들어가며
케이테마 프리미엄 FAQ Widget은 자주 묻는 질문을 아코디언 형태로 표시하는 위젯입니다. 클릭 한 번으로 답변이 펼쳐지고 접히는 인터랙티브한 UI로 고객 지원 페이지, 제품 설명 페이지 등에 필수적인 요소입니다.
주요 기능
- Repeater 기반: 원하는 만큼 FAQ 아이템 추가
- 아코디언 효과: 부드러운 펼침/접힘 애니메이션
- 단일/다중 열기: 한 번에 1개 또는 여러 개 열기
- 아이콘 커스터마이징: 열림/닫힘 아이콘 선택
- 번호 표시: 선택적 번호 매기기
- Schema Markup: SEO를 위한 구조화된 데이터
- 완전한 반응형: 모든 디바이스에서 완벽 동작
각 FAQ 아이템 구성
- 질문: FAQ 제목 (클릭 가능)
- 답변: 상세 답변 (HTML 지원, 접힘/펼침)
- 기본 열림: 페이지 로드 시 자동으로 열림 (선택 사항)
레이아웃 옵션
아코디언 모드
- Single: 한 번에 1개만 열림 (다른 것 클릭 시 자동 닫힘)
- Multiple: 여러 개 동시에 열림
번호 표시
- 활성화: 01, 02, 03… 자동 번호
- 비활성화: 번호 없이 질문만 표시
아이콘 선택
- 열림 아이콘: 펼쳐진 상태 (예: fa-minus, fa-chevron-up)
- 닫힘 아이콘: 접힌 상태 (예: fa-plus, fa-chevron-down)
- FontAwesome 아이콘 중 선택
스타일 옵션
1. 질문 스타일
Typography
- 폰트 크기: 16px ~ 24px (기본: 18px)
- 폰트 굵기: Medium, SemiBold, Bold
- 줄 높이: 1.4 ~ 1.6
색상
- 텍스트 색상: 기본 상태
- 활성 색상: 열린 상태 (예: Primary Color)
- 호버 색상: 마우스 오버 시
배경
- 배경색: 질문 영역 배경 (예: #f8f9fa)
- 활성 배경색: 열린 상태 배경
- 호버 배경색: 마우스 오버 시
패딩
- 전체: 15px ~ 30px (기본: 20px)
2. 답변 스타일
Typography
- 폰트 크기: 14px ~ 18px (기본: 16px)
- 폰트 굵기: Regular, Light
- 줄 높이: 1.6 ~ 1.8 (가독성)
색상
- 텍스트 색상: #6c757d (중간 회색)
배경
- 배경색: 흰색 또는 연한 회색
패딩
- 전체: 20px ~ 30px
3. 아이콘 스타일
- 색상: 아이콘 색상
- 활성 색상: 열린 상태
- 크기: 14px ~ 24px (기본: 16px)
- 위치: 오른쪽 (기본값)
4. 번호 스타일
- 색상: 번호 색상
- 폰트 크기: 16px ~ 20px
- 폰트 굵기: Bold
- Margin Right: 번호와 질문 사이 간격
5. 컨테이너 스타일
테두리
- 테두리 타입: 실선, 파선 등
- 테두리 굵기: 1px
- 테두리 색상: #dee2e6 (연한 회색)
- Border Radius: 0 ~ 15px
간격
- 아이템 간격: FAQ 아이템 사이 간격 (10px ~ 30px)
그림자
- Box Shadow: 0px 2px 10px rgba(0,0,0,0.1)
실전 활용 예제
예제 1: 클린 FAQ (테두리 스타일)
설정:
- 아코디언 모드: Single (한 번에 1개)
- 번호 표시: 활성화 (01, 02, 03…)
- 질문 배경: 흰색
- 질문 테두리: 1px solid #dee2e6
- 질문 색상: #212529 (진한 회색)
- 활성 질문 색상: #0d6efd (Primary)
- 답변 배경: #f8f9fa (연한 회색)
- 아이콘: Plus/Minus
- Border Radius: 8px
- 아이템 간격: 15px
결과: 깔끔하고 전문적인 FAQ 섹션
예제 2: 모던 FAQ (그림자 스타일)
설정:
- 아코디언 모드: Multiple (여러 개 열기)
- 번호 표시: 비활성화
- 질문 배경: 흰색
- 질문 테두리: 없음
- Box Shadow: 0px 5px 15px rgba(0,0,0,0.08)
- 질문 색상: #000000 (검정)
- 활성 질문 배경: #667eea (보라 그라디언트)
- 활성 질문 색상: 흰색
- 답변 배경: 흰색
- 아이콘: Chevron Down/Up
- Border Radius: 12px
- 아이템 간격: 20px
결과: 모던하고 세련된 FAQ
예제 3: 미니멀 FAQ (플랫 디자인)
설정:
- 아코디언 모드: Single
- 번호 표시: 비활성화
- 질문 배경: #f8f9fa (연한 회색)
- 질문 테두리: 없음
- Box Shadow: 없음
- 질문 색상: #495057
- 활성 질문 배경: #e9ecef (약간 더 어두운 회색)
- 답변 배경: 흰색
- 아이콘: Arrow Right/Down (회전 애니메이션)
- Border Radius: 0 (각진)
- 아이템 간격: 0 (붙어있음)
결과: 단순하고 깔끔한 미니멀 FAQ
디자인 팁
아코디언 모드 선택
Single (한 번에 1개)
- 장점: 정돈된 느낌, 덜 복잡함
- 단점: 여러 개 비교 어려움
- 추천: FAQ가 많을 때 (10개 이상)
Multiple (여러 개)
- 장점: 여러 개 동시 확인 가능
- 단점: 페이지가 길어질 수 있음
- 추천: FAQ가 적을 때 (5-10개)
색상 조합
전문적/비즈니스
- 질문 배경: 흰색
- 질문 색상: 진한 회색
- 활성 색상: Primary Color
- 답변 배경: 연한 회색
- 테두리: 연한 회색
창의적/모던
- 질문 배경: 그라디언트 (활성 시)
- 질문 색상: 흰색 (활성 시)
- 그림자: 강하게
- Border Radius: 크게 (15px)
미니멀/플랫
- 배경: 단색 (회색 계열)
- 테두리: 없음
- 그림자: 없음
- Border Radius: 0 또는 작게
SEO 최적화
- Schema Markup: FAQ Schema 자동 생성
- 명확한 질문: 실제 사용자 질문 그대로
- 상세한 답변: 50자 이상 권장
- 키워드 포함: 자연스럽게 키워드 삽입
접근성
- 키보드 네비게이션: Tab, Enter 키로 조작
- ARIA 속성: aria-expanded, aria-controls
- Focus 스타일: 포커스 시 명확한 표시
- 색상 대비: WCAG AA 기준 충족
호환성
- WordPress 5.0+
- Elementor 3.0+
- PHP 7.4+
- 케이테마 프리미엄 플러그인 2.0+
- 모든 최신 브라우저 지원
마무리
FAQ Widget은 고객 지원을 효율화하고 사용자 경험을 개선하는 필수 도구입니다. 아코디언 형태로 정보를 정리하여 페이지 길이를 줄이고, 필요한 정보만 빠르게 찾을 수 있게 하세요. SEO에도 유리하여 검색 엔진에서 Featured Snippet으로 표시될 수 있습니다!