# Feature Card Widget – 주요 기능을 카드 형태로 표현하기
들어가며
서비스나 제품의 핵심 기능을 효과적으로 전달하는 것은 웹사이트 성공의 핵심입니다. 케이테마 프리미엄 Feature Card Widget은 3개의 카드 형태로 주요 기능을 시각적으로 표현하여, 방문자가 한눈에 서비스의 가치를 파악할 수 있게 해줍니다.
간단한 드래그 앤 드롭만으로 전문적인 Feature 섹션을 구성할 수 있으며, 완전한 스타일 커스터마이징과 반응형 지원으로 어떤 디자인에도 완벽하게 어울립니다.
주요 기능
1. 3 카드 고정 레이아웃
- 3개의 카드가 가로로 균등 배치 (col-md-4)
- 각 카드는 독립적으로 설정 가능
- Bootstrap Grid 기반 반응형
- 모바일에서는 세로 스택으로 자동 전환
2. 각 카드 구성 요소
이미지
- 미디어 라이브러리에서 선택
- 아이콘, 일러스트, 사진 등 자유롭게 사용
- 권장 크기: 400x300px
제목
- 각 카드의 주요 기능명
- HTML 태그 사용 가능
- Typography 완전 커스터마이징
설명
- 기능에 대한 상세 설명
- Textarea 형식 (여러 줄)
- HTML 지원
3. 위젯 제목
- 전체 섹션의 제목 (예: “Our Features”)
- 중앙 정렬
- 선택 사항 (비워두면 표시 안 됨)
4. 완전한 반응형
- 데스크톱 (≥992px): 3열 가로 배치
- 태블릿 (768-991px): 3열 유지 (약간 좁아짐)
- 모바일 (<768px): 1열 세로 스택
5. 풍부한 스타일 옵션
- 위젯 제목 스타일
- 이미지 스타일 (크기, 테두리, 그림자)
- 카드 제목 스타일
- 카드 설명 스타일
- 카드 컨테이너 스타일 (배경, 테두리, 그림자, 패딩)
Elementor에서 설정하기
1. 위젯 추가
- Elementor 편집기에서 “Feature Card” 위젯 찾기
- 위젯 아이콘: 그리드 포스트 모양
- 카테고리: K-Theme Premium
- 페이지에 드래그 앤 드롭
2. 콘텐츠 섹션
위젯 제목
Our Key Features또는:
<strong>핵심 기능</strong>을 소개합니다카드 1 설정
이미지:
- 미디어 라이브러리에서 선택
- 또는 URL 직접 입력
- 아이콘 이미지 또는 일러스트 권장
제목:
빠른 속도설명:
최적화된 코드와 CDN 활용으로
초고속 로딩 속도를 제공합니다.카드 2 설정
이미지: 두 번째 기능 이미지
제목:
쉬운 사용설명:
직관적인 인터페이스로 누구나
쉽게 사용할 수 있습니다.카드 3 설정
이미지: 세 번째 기능 이미지
제목:
24/7 지원설명:
연중무휴 고객 지원으로
언제든지 도움을 받을 수 있습니다.스타일 탭 설정
1. 위젯 제목 스타일
Typography
- 폰트 패밀리: 기본 또는 커스텀
- 폰트 크기: 32px ~ 48px (기본: 36px)
- 폰트 굵기: Bold 또는 ExtraBold
- Text Transform: 대문자 (선택 사항)
- 줄 높이: 1.2 ~ 1.4
색상
- 텍스트 색상: #212529 (진한 회색) 또는 브랜드 컬러
간격
- Margin Bottom: 40px ~ 60px (카드와의 간격)
2. 이미지 스타일
크기
- Width: 100% (전체 너비)
- Max Width: 200px ~ 400px (기본: 300px)
- Height: Auto (비율 유지)
정렬
- Align: Center (중앙 정렬 권장)
간격
- Margin Bottom: 20px ~ 30px (제목과의 간격)
테두리 및 둥근 모서리
- Border: 없음 (기본값)
- Border Radius: 0px (각진) ~ 50% (원형)
그림자
- Box Shadow: 선택 사항
- 예: 0px 5px 15px rgba(0, 0, 0, 0.1)
3. 카드 제목 스타일
Typography
- 폰트 크기: 20px ~ 28px (기본: 24px)
- 폰트 굵기: Bold 또는 SemiBold
- 줄 높이: 1.3 ~ 1.5
색상
- 텍스트 색상: #000000 (검정) 또는 #212529 (진한 회색)
- 호버 색상: Primary Color (선택 사항)
간격
- Margin Bottom: 15px ~ 20px (설명과의 간격)
4. 카드 설명 스타일
Typography
- 폰트 크기: 14px ~ 18px (기본: 16px)
- 폰트 굵기: Regular 또는 Light
- 줄 높이: 1.6 ~ 1.8 (가독성 중요)
색상
- 텍스트 색상: #6c757d (중간 회색)
5. 카드 컨테이너 스타일
배경
- 배경색: #ffffff (흰색, 기본값)
- 또는 #f8f9fa (연한 회색)
- 그라디언트 배경도 가능
패딩
- 전체: 30px ~ 50px (기본: 40px)
- 카드 내부 여백
테두리
- 테두리 타입: 실선 (선택 사항)
- 테두리 굵기: 1px
- 테두리 색상: #dee2e6 (연한 회색)
- Border Radius: 10px ~ 20px (둥근 모서리)
그림자
- Box Shadow: 0px 5px 20px rgba(0, 0, 0, 0.1)
- 호버 그림자: 0px 10px 30px rgba(0, 0, 0, 0.15) (더 진하게)
호버 효과
- Transform: translateY(-10px) (위로 살짝 이동)
- Transition: 0.3s (부드러운 전환)
실전 활용 예제
예제 1: SaaS 제품 핵심 기능 (클린 디자인)
설정:
위젯 제목:
Why Choose Us?카드 1:
- 이미지: 속도 아이콘 (SVG 또는 PNG)
- 제목: Lightning Fast
- 설명: Optimized performance for the best user experience.
카드 2:
- 이미지: 클라우드 아이콘
- 제목: Cloud-Based
- 설명: Access your data anywhere, anytime, on any device.
카드 3:
- 이미지: 보안 아이콘
- 제목: Secure & Safe
- 설명: Enterprise-grade security to protect your data.
스타일:
- 배경: 흰색
- 테두리: 1px solid #e9ecef
- Border Radius: 15px
- 그림자: 0px 5px 20px rgba(0, 0, 0, 0.08)
- 호버: translateY(-10px) + 그림자 강화
- 이미지: 원형 (Border Radius 50%), Max Width 150px
결과: 깔끔하고 모던한 SaaS 제품 Feature 섹션
예제 2: 레스토랑 특징 (이미지 중심)
설정:
위젯 제목:
<strong>Our</strong> Specialties카드 1:
- 이미지: 신선한 재료 사진 (400x300px)
- 제목: Fresh Ingredients
- 설명: 매일 아침 직송되는 신선한 재료만 사용합니다.
카드 2:
- 이미지: 셰프 사진
- 제목: Expert Chefs
- 설명: 20년 경력의 전문 셰프가 직접 요리합니다.
카드 3:
- 이미지: 분위기 사진
- 제목: Cozy Atmosphere
- 설명: 아늑하고 편안한 공간에서 즐기는 식사.
스타일:
- 배경: #f8f9fa (연한 회색)
- 테두리: 없음
- Border Radius: 10px
- 그림자: 없음 (플랫 디자인)
- 이미지: 가로 100%, Border Radius 10px 10px 0 0 (상단만 둥글게)
- 패딩: 0 (이미지 끝까지)
- 텍스트 패딩: 30px (제목/설명만)
결과: 이미지가 강조된 감성적인 레스토랑 Feature 섹션
예제 3: 교육 플랫폼 특장점 (아이콘 스타일)
설정:
위젯 제목:
학습의 새로운 패러다임카드 1:
- 이미지: 비디오 아이콘 (컬러 아이콘)
- 제목: 동영상 강의
- 설명: HD 화질의 전문 강의를 언제든지 시청하세요.
카드 2:
- 이미지: 문서 아이콘
- 제목: 학습 자료
- 설명: PDF, 슬라이드, 연습 문제 등 풍부한 자료.
카드 3:
- 이미지: 인증서 아이콘
- 제목: 수료증 발급
- 설명: 과정 완료 시 공식 수료증을 발급해드립니다.
스타일:
- 배경: 그라디언트 (#667eea → #764ba2, 135deg)
- 텍스트 색상: 흰색 (전체)
- 테두리: 없음
- Border Radius: 20px
- 그림자: 0px 10px 30px rgba(102, 126, 234, 0.3) (그라디언트 색상 사용)
- 이미지: Max Width 100px, 중앙 정렬
- 패딩: 50px
결과: 눈길을 끄는 그라디언트 배경의 모던한 Feature 섹션
디자인 팁
1. 이미지 선택 가이드
아이콘 스타일
- 형식: SVG 또는 PNG (투명 배경)
- 크기: 128x128px ~ 256x256px
- 스타일: 일관된 스타일 (Line, Flat, 3D 중 통일)
- 색상: 브랜드 컬러 또는 단색
- 출처: Flaticon, IconFinder, FreePik
일러스트 스타일
- 형식: SVG 권장
- 크기: 400x300px ~ 600x450px
- 스타일: 일관된 일러스트 스타일
- 색상: 브랜드 컬러 팔레트
- 출처: unDraw, Storyset, Illustration Kit
사진 스타일
- 형식: JPG 또는 WebP
- 크기: 600x450px 이상 (고화질)
- 비율: 4:3 또는 16:9 (일관성)
- 편집: 필터/색 보정 통일
- 출처: Unsplash, Pexels, Pixabay
2. 카드 스타일 조합
클린 & 미니멀
- 배경: 흰색
- 테두리: 1px solid #e9ecef
- 그림자: 약하게 (0px 5px 15px rgba(0,0,0,0.05))
- Border Radius: 10px
- 호버: 그림자 강화
카드 플로팅
- 배경: 흰색
- 테두리: 없음
- 그림자: 강하게 (0px 10px 30px rgba(0,0,0,0.15))
- Border Radius: 15px
- 호버: translateY(-10px) + 그림자 더 강하게
플랫 디자인
- 배경: #f8f9fa (연한 회색)
- 테두리: 없음
- 그림자: 없음
- Border Radius: 8px
- 호버: 배경색 변화 (#e9ecef)
그라디언트 카드
- 배경: 그라디언트 (#667eea → #764ba2)
- 텍스트: 흰색
- 테두리: 없음
- 그림자: 그라디언트 색상 사용 (rgba(102,126,234,0.3))
- Border Radius: 20px
- 호버: 밝기 증가 (filter: brightness(1.1))
3. Typography 조합
위젯 제목 + 카드 제목 조합
조합 1 (대비 강조):
- 위젯 제목: 48px, ExtraBold, 대문자
- 카드 제목: 24px, SemiBold, 일반
조합 2 (균형형):
- 위젯 제목: 36px, Bold
- 카드 제목: 22px, Medium
조합 3 (우아함):
- 위젯 제목: 40px, Light, Letter Spacing -0.02em
- 카드 제목: 20px, Regular
제목 + 설명 조합
조합 1 (가독성 최우선):
- 카드 제목: 24px, Bold
- 카드 설명: 16px, Regular, Line Height 1.7
조합 2 (컴팩트):
- 카드 제목: 20px, SemiBold
- 카드 설명: 14px, Light, Line Height 1.6
4. 색상 팔레트 추천
비즈니스/전문적
- 배경: #ffffff (흰색)
- 위젯 제목: #212529 (진한 회색)
- 카드 제목: #000000 (검정)
- 카드 설명: #6c757d (중간 회색)
- 테두리: #dee2e6 (연한 회색)
모던/창의적
- 배경: 그라디언트 또는 흰색
- 위젯 제목: #667eea (보라)
- 카드 제목: #000000
- 카드 설명: #6c757d
- 강조 색상: #764ba2 (진한 보라)
밝고 친근한
- 배경: #f8f9fa (연한 회색)
- 위젯 제목: #0d6efd (파랑)
- 카드 제목: #212529
- 카드 설명: #495057
- 강조 색상: #ffc107 (노랑)
반응형 동작
데스크톱 (≥992px)
- 3열 가로 배치 (col-md-4 × 3)
- 각 카드 너비: 33.33%
- 간격: Bootstrap Gutter (15px 양쪽)
- 이미지 크기: 설정값
- 패딩: 설정값
태블릿 (768-991px)
- 3열 가로 배치 유지
- 각 카드 폭이 약간 좁아짐
- 폰트 크기: 약 90%
- 이미지 크기: 약 85%
- 패딩: 약 80%
모바일 (<768px)
- 1열 세로 스택으로 전환
- 각 카드 너비: 100%
- 카드 간 간격: 30px
- 폰트 크기: 약 85%
- 이미지 크기: 약 70%
- 패딩: 약 60%
접근성 및 성능
접근성
- 시맨틱 HTML – 적절한 태그 사용
- Alt 텍스트 – 모든 이미지에 설명 추가
- 색상 대비 – WCAG AA 기준 충족
- 키보드 네비게이션 – Tab 키로 이동 가능
- 스크린 리더 – 제목 계층 구조 명확
성능 최적화
- 이미지 최적화: WebP 포맷, 압축 (TinyPNG)
- Lazy Loading: 이미지 지연 로딩
- CSS 최소화: 불필요한 스타일 제거
- SVG 사용: 아이콘은 SVG 권장 (용량 작음)
자주 묻는 질문 (FAQ)
Q1. 카드 개수를 2개나 4개로 변경할 수 있나요?
A: 이 위젯은 3개 고정입니다. 다른 개수가 필요하면 Elementor의 기본 “Inner Section” 또는 “Iconbox” 위젯을 사용하세요.
Q2. 카드에 링크를 걸 수 있나요?
A: 기본 기능에는 없지만, CSS 커스텀 코드로 카드 전체를 클릭 가능하게 만들 수 있습니다.
Q3. 이미지 크기가 제각각이에요.
A: 모든 이미지를 동일한 비율과 크기로 준비하세요. 스타일 탭에서 “Max Width”와 “Height: Auto”를 설정하면 비율을 유지하며 크기가 조절됩니다.
Q4. 모바일에서 순서를 바꿀 수 있나요?
A: Bootstrap Grid 기반이므로 순서는 유지됩니다. 순서를 바꾸려면 카드 콘텐츠 자체를 변경하세요.
Q5. 위젯 제목을 숨기고 싶어요.
A: 위젯 제목 필드를 비워두면 표시되지 않습니다.
호환성
필수 요구사항
- WordPress 5.0+
- Elementor 3.0+
- PHP 7.4+
- 케이테마 프리미엄 플러그인 2.0+
브라우저 지원
- Chrome 90+
- Firefox 88+
- Safari 14+
- Edge 90+
- iOS Safari 14+
- Chrome Android 90+
마무리
Feature Card Widget은 서비스의 핵심 가치를 시각적으로 전달하는 가장 효과적인 방법입니다. 3개의 카드 형태로 주요 기능을 명확하게 표현하고, 풍부한 스타일 옵션으로 브랜드에 완벽하게 맞는 디자인을 만들 수 있습니다.
아이콘, 일러스트, 사진 등 다양한 이미지 스타일과 클린, 플로팅, 그라디언트 등의 카드 스타일을 조합하여 여러분만의 독특한 Feature 섹션을 구축하세요!
다음 단계
- 서비스의 핵심 기능 3가지 정하기
- 일관된 스타일의 이미지 준비하기 (아이콘 또는 일러스트)
- 간결하고 명확한 제목과 설명 작성하기
- 브랜드 색상에 맞게 스타일 커스터마이징하기
관련 문서
효과적인 Feature 섹션으로 서비스의 가치를 명확히 전달하세요!