들어가며

로고 쇼케이스는 파트너사, 클라이언트, 브랜드 등을 효과적으로 보여주는 필수 요소입니다. 케이테마 프리미엄 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. 위젯 추가

1. Elementor 편집기에서 “Logo Showcase” 위젯을 찾습니다
2. 위젯 아이콘: 갤러리 그리드 모양
3. 카테고리: K-Theme Widgets
4. 페이지에 드래그 앤 드롭

2. 헤더 섹션

레이아웃

• Vertical – 제목 상단, 슬라이더 하단
• Horizontal – 제목 좌측, 슬라이더 우측

제목

Our Partners

HTML 태그 사용 가능합니다.

설명

함께하는 파트너사들을 소개합니다.

텍스트 정렬

• 왼쪽
• 중앙
• 오른쪽

3. 로고 목록 섹션

로고 아이템 추가하기:

1. “로고 아이템” 추가 버튼 클릭
2. 각 아이템마다 설정:
   • 로고 이미지 – 미디어 라이브러리에서 선택
   • 링크 URL – 클릭 시 이동할 주소
   • 호버 효과 – 4가지 중 선택
3. 드래그하여 순서 변경 가능

권장 이미지 사양:

• 포맷: 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:

1. 슬라이더 모드인지 확인 (슬라이더 모드에서는 애니메이션 비활성화)
2. 그리드 모드로 변경
3. 애니메이션 종류를 “없음”이 아닌 다른 것으로 선택
4. 페이지 새로고침 후 스크롤하여 위젯이 뷰포트에 들어오도록 하기

Q3. 로고 이미지가 표시되지 않아요.

A:

1. 미디어 라이브러리에 이미지가 업로드되었는지 확인
2. 이미지를 다시 선택
3. 이미지 URL이 올바른지 확인
4. 서버 권한 확인

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 그리드 효과 비교하기
• 다른 섹션과 조화로운 레이아웃 구성하기

관련 문서