들어가며
로고 쇼케이스는 파트너사, 클라이언트, 브랜드 등을 효과적으로 보여주는 필수 요소입니다. 케이테마 프리미엄 Logo Showcase Widget은 Swiper 슬라이더와 GSAP 애니메이션을 결합하여 전문적이고 세련된 로고 쇼케이스를 단 몇 분 만에 구현할 수 있게 해줍니다.
이번 v2.0.2 업데이트에서는 GSAP 애니메이션 로직이 대폭 개선되어 그리드 모드에서도 17가지 애니메이션을 완벽하게 활용할 수 있습니다.
주요 기능
1. 듀얼 모드 지원
슬라이더 모드
- Swiper 기반 부드러운 슬라이더
- 자동재생 설정 가능
- 무한 루프 지원
- 네비게이션 버튼 (화살표)
- Pagination (Dots)
- 반응형 슬라이드 개수 조절
그리드 모드 (신규 개선)
- CSS Grid 기반 레이아웃
- 17가지 GSAP 애니메이션 지원
- 순차 애니메이션 (Stagger) 효과
- 반응형 컬럼 수 조절
- 간격 조절 가능
2. 두 가지 레이아웃
Vertical (Style 1)
- 제목과 설명이 상단
- 로고 슬라이더/그리드가 하단
- 중앙 정렬이 기본
Horizontal (Style 2)
- 제목과 설명이 왼쪽 (col-lg-4)
- 로고 슬라이더/그리드가 오른쪽 (col-lg-8)
- 좌측 정렬이 기본
- 모바일에서는 세로 스택으로 전환
3. 호버 효과 (4가지)
- None – 효과 없음
- Scale – 확대 효과 (1.1배)
- Opacity – 투명도 변화 (0.7)
- Grayscale to Color – 흑백에서 컬러로 전환
4. GSAP 애니메이션 (17가지) – 신규 개선
그리드 모드에서 사용 가능한 애니메이션:
- Fade In
- Fade In Up/Down/Left/Right
- Slide Up/Down/Left/Right
- Scale In, Scale In Up, Scale In Fade
- Zoom In
- Rotate In, Rotate In Left/Right
속도 조절:
- 빠르게 (0.3초)
- 보통 (0.6초)
- 느리게 (1.2초)
순차 지연 시간: 0 ~ 2초 (0.1초 단위)
v2.0.2 업데이트 내용
GSAP 애니메이션 로직 개선
문제점 (이전 버전)
그리드 모드에서 GSAP 애니메이션이 적용되지 않았습니다. 슬라이더 모드와 그리드 모드 모두에서 애니메이션 클래스가 비어있었습니다.
해결 (v2.0.2)
슬라이더 모드:
- GSAP 애니메이션 비활성화
- Swiper 자체 슬라이드 애니메이션 사용
- 부드러운 전환 효과
그리드 모드:
- GSAP 애니메이션 활성화
- 17가지 애니메이션 중 선택 가능
- 각 로고마다 순차적으로 나타남 (Stagger 효과)
- 스크롤 시 자동 트리거
코드 변경 사항
변경 전:
// 슬라이더 모드에서는 GSAP 비활성화
$animation_class = '';
$duration_class = '';변경 후 (그리드 모드):
// 그리드 모드에서만 GSAP 활성화
$animation_class = $animation_type;
$duration_class = $animation_duration;Elementor에서 설정하기
1. 위젯 추가
- Elementor 편집기에서 “Logo Showcase” 위젯을 찾습니다
- 위젯 아이콘: 갤러리 그리드 모양
- 카테고리: K-Theme Widgets
- 페이지에 드래그 앤 드롭
2. 헤더 섹션
레이아웃
- Vertical – 제목 상단, 슬라이더 하단
- Horizontal – 제목 좌측, 슬라이더 우측
제목
Our PartnersHTML 태그 사용 가능합니다.
설명
함께하는 파트너사들을 소개합니다.텍스트 정렬
- 왼쪽
- 중앙
- 오른쪽
3. 로고 목록 섹션
로고 아이템 추가하기:
- “로고 아이템” 추가 버튼 클릭
- 각 아이템마다 설정:
- 로고 이미지 – 미디어 라이브러리에서 선택
- 링크 URL – 클릭 시 이동할 주소
- 호버 효과 – 4가지 중 선택
- 드래그하여 순서 변경 가능
권장 이미지 사양:
- 포맷: PNG (투명 배경 권장) 또는 SVG
- 크기: 200x80px ~ 400x160px
- 용량: 50KB 이하
4. 슬라이더 설정 섹션
슬라이더 활성화
- 예 – Swiper 슬라이더 모드
- 아니요 – CSS Grid 모드
슬라이더 모드 옵션
자동재생:
- 활성화/비활성화
- 지연시간: 1000ms ~ 10000ms (기본 3000ms)
무한 루프:
- 활성화 시 끝에서 처음으로 자동 이동
전환 속도:
- 100ms ~ 3000ms (기본 600ms)
슬라이드 개수 (반응형):
- 데스크톱 (≥1024px): 1 ~ 10개 (기본 4)
- 태블릿 (768-1023px): 1 ~ 10개 (기본 3)
- 모바일 (<768px): 1 ~ 10개 (기본 2)
슬라이드 간격:
- 0px ~ 100px (기본 30px)
그리드 모드 옵션
그리드 컬럼 수 (반응형):
- 데스크톱: 2 ~ 6개 (기본 4)
- 태블릿: 2 ~ 4개 (기본 3)
- 모바일: 1 ~ 3개 (기본 2)
그리드 간격:
- 0px ~ 100px (기본 30px)
5. 네비게이션 & Pagination 섹션
네비게이션 버튼
- 표시/숨김
- 버튼 위치:
- Inside – 슬라이더 안쪽
- Outside – 슬라이더 바깥쪽
- 이전 버튼 아이콘 – FontAwesome 아이콘 선택
- 다음 버튼 아이콘 – FontAwesome 아이콘 선택
Pagination (Dots)
- 표시/숨김
- Pagination 위치:
- Bottom – 하단 (기본값)
- Top – 상단
6. 애니메이션 섹션
애니메이션 종류 (그리드 모드 전용):
- 없음
- Fade In
- Fade In Up
- Fade In Down
- Fade In Left
- Fade In Right
- Slide Up
- Slide Down
- Slide Left
- Slide Right
- Scale In
- Scale In Up
- Scale In Fade
- Zoom In
- Rotate In
- Rotate In Left
- Rotate In Right
속도:
- 빠르게 (0.3초)
- 보통 (0.6초)
- 느리게 (1.2초)
순차 지연 시간:
- 0초 ~ 2초 (0.1초 단위)
- 각 로고 사이의 애니메이션 간격
스타일 탭 설정
1. 제목 스타일
- Typography – 폰트, 크기, 굵기, 줄 높이
- 색상 – 제목 색상
- 마진 – 상하좌우 마진
2. 설명 스타일
- Typography – 폰트, 크기, 굵기, 줄 높이
- 색상 – 설명 색상
- 마진 – 상하좌우 마진
3. 로고 컨테이너 스타일
- 로고 높이 – 30px ~ 200px (기본 80px)
- 패딩 – 상하좌우 패딩
- 배경색 – 로고 박스 배경
- 테두리 – 스타일, 굵기, 색상
- 둥근 모서리 – Border radius
4. 네비게이션 스타일
- 색상 – 버튼 색상
- 호버 색상 – 마우스 오버 시 색상
- 배경색 – 버튼 배경
- 배경 호버 색상 – 마우스 오버 시 배경
5. Pagination 스타일
- 색상 – Dot 색상 (비활성)
- 활성 색상 – Dot 색상 (활성)
실전 활용 예제
예제 1: 파트너사 로고 슬라이더
설정:
- 레이아웃: Vertical
- 슬라이더 활성화: 예
- 슬라이드 개수 (데스크톱): 5
- 자동재생: 예 (3초)
- 무한 루프: 예
- 호버 효과: Grayscale to Color
- 네비게이션: Inside
- Pagination: 숨김
결과: 5개씩 보이는 자동 슬라이더, 호버 시 흑백에서 컬러로 전환
예제 2: 클라이언트 로고 그리드 (애니메이션)
설정:
- 레이아웃: Horizontal
- 슬라이더 활성화: 아니요
- 그리드 컬럼 (데스크톱): 4
- 그리드 간격: 40px
- 애니메이션: Fade In Up
- 속도: 느리게
- 순차 지연: 0.2초
- 호버 효과: Scale
결과: 4열 그리드, 스크롤 시 순차적으로 아래에서 위로 나타남, 호버 시 확대
예제 3: 미니멀 로고 리스트
설정:
- 레이아웃: Vertical
- 슬라이더 활성화: 아니요
- 그리드 컬럼 (데스크톱): 6
- 그리드 간격: 20px
- 애니메이션: Fade In
- 속도: 빠르게
- 순차 지연: 0.1초
- 호버 효과: Opacity
- 로고 높이: 60px
- 배경색: 투명
- 테두리: 없음
결과: 깔끔한 6열 그리드, 빠르게 페이드 인, 호버 시 살짝 투명
반응형 동작
데스크톱 (≥1024px)
- 설정한 데스크톱 슬라이드/컬럼 수 적용
- Outside 네비게이션 정상 표시
- 로고 높이: 80px (기본값)
태블릿 (768-1023px)
- 설정한 태블릿 슬라이드/컬럼 수 적용
- Outside 네비게이션 → Inside로 자동 전환
- 로고 높이: 60px
모바일 (<768px)
- 설정한 모바일 슬라이드/컬럼 수 적용
- Horizontal 레이아웃 → Vertical로 스택
- 텍스트 정렬: 중앙
- 로고 높이: 50px
- 네비게이션 버튼: 작게 (22px)
성능 최적화 팁
1. 이미지 최적화
- 포맷: SVG > PNG > JPG
- 압축: TinyPNG, ImageOptim 활용
- 크기: 실제 표시 크기의 2배 (Retina 대응)
- Lazy Loading: 자동 적용 (loading=”lazy”)
2. 슬라이더 개수 조절
- 로고가 많을 때: 5~6개씩 표시
- 로고가 적을 때: 3~4개씩 표시
- 모바일은 2개 권장
3. 애니메이션 최적화
- 그리드 모드에서만 GSAP 사용
- 순차 지연은 0.1~0.2초 권장
- 너무 느린 애니메이션은 사용자 경험 저하
4. 캐싱
- CSS/JS 파일 자동 캐싱
- Swiper 라이브러리 CDN 사용
- 이미지 브라우저 캐싱
자주 묻는 질문 (FAQ)
Q1. 슬라이더와 그리드 중 어떤 것을 선택해야 하나요?
A: 로고가 많고 공간이 제한적이면 슬라이더, 모든 로고를 한눈에 보여주고 애니메이션 효과를 원하면 그리드를 선택하세요.
Q2. 애니메이션이 작동하지 않아요.
A:
- 슬라이더 모드인지 확인 (슬라이더 모드에서는 애니메이션 비활성화)
- 그리드 모드로 변경
- 애니메이션 종류를 “없음”이 아닌 다른 것으로 선택
- 페이지 새로고침 후 스크롤하여 위젯이 뷰포트에 들어오도록 하기
Q3. 로고 이미지가 표시되지 않아요.
A:
- 미디어 라이브러리에 이미지가 업로드되었는지 확인
- 이미지를 다시 선택
- 이미지 URL이 올바른지 확인
- 서버 권한 확인
Q4. 같은 페이지에 여러 개 사용할 수 있나요?
A: 네, 가능합니다. 각 위젯은 고유한 ID를 가지므로 독립적으로 동작합니다.
Q5. 모바일에서 슬라이드 개수를 0으로 할 수 있나요?
A: 아니요, 최소 1개는 표시되어야 합니다. 대신 모바일에서 위젯을 숨기려면 Elementor의 반응형 설정을 사용하세요.
호환성
필수 요구사항
- 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+
라이브러리
- Swiper 8.0+ (슬라이더 모드)
- GSAP 3.12+ (그리드 모드 애니메이션)
- ScrollTrigger (GSAP 플러그인)
마무리
Logo Showcase Widget은 단순히 로고를 나열하는 것을 넘어, 브랜드 신뢰도를 높이고 전문성을 강조하는 강력한 도구입니다. v2.0.2 업데이트로 그리드 모드에서 17가지 GSAP 애니메이션을 완벽하게 활용할 수 있게 되어, 더욱 다양하고 창의적인 표현이 가능해졌습니다.
슬라이더의 부드러운 전환 효과와 그리드의 순차적 애니메이션 중 선택하여, 여러분의 웹사이트에 가장 적합한 로고 쇼케이스를 만들어보세요!
다음 단계
- 파트너사 로고를 수집하고 최적화하기
- 브랜드 색상에 맞게 스타일 커스터마이징하기
- A/B 테스팅으로 슬라이더 vs 그리드 효과 비교하기
- 다른 섹션과 조화로운 레이아웃 구성하기
관련 문서
- Logo Widget 상세 문서 (LOGO-WIDGET-CHANGELOG.md)
- Logo Widget 테스트 가이드 (LOGO-WIDGET-TESTING.md)
- GSAP 라이브러리 문서
- Swiper 설정 가이드
궁금한 점이 있으시면 언제든지 문의주세요!