플러그인 업데이트 Logo Showcase Widget

# Logo Showcase Widget – 완벽한 로고 쇼케이스 위젯

들어가며

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

HTML 태그 사용 가능합니다.

설명

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

텍스트 정렬

왼쪽
중앙
오른쪽

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. 애니메이션이 작동하지 않아요.

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

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

미디어 라이브러리에 이미지가 업로드되었는지 확인
이미지를 다시 선택
이미지 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 그리드 효과 비교하기
다른 섹션과 조화로운 레이아웃 구성하기

들어가며

주요 기능

1. 듀얼 모드 지원

슬라이더 모드

그리드 모드 (신규 개선)

2. 두 가지 레이아웃

Vertical (Style 1)

Horizontal (Style 2)

3. 호버 효과 (4가지)

4. GSAP 애니메이션 (17가지) – 신규 개선

v2.0.2 업데이트 내용

GSAP 애니메이션 로직 개선

문제점 (이전 버전)

해결 (v2.0.2)

코드 변경 사항

Elementor에서 설정하기

1. 위젯 추가

2. 헤더 섹션

레이아웃

제목

설명

텍스트 정렬

3. 로고 목록 섹션

4. 슬라이더 설정 섹션

슬라이더 활성화

슬라이더 모드 옵션

그리드 모드 옵션

5. 네비게이션 & Pagination 섹션

네비게이션 버튼

Pagination (Dots)

6. 애니메이션 섹션

스타일 탭 설정

1. 제목 스타일

2. 설명 스타일

3. 로고 컨테이너 스타일

4. 네비게이션 스타일

5. Pagination 스타일

실전 활용 예제

예제 1: 파트너사 로고 슬라이더

예제 2: 클라이언트 로고 그리드 (애니메이션)

예제 3: 미니멀 로고 리스트

반응형 동작

데스크톱 (≥1024px)

태블릿 (768-1023px)

모바일 (<768px)

성능 최적화 팁

1. 이미지 최적화

2. 슬라이더 개수 조절

3. 애니메이션 최적화

4. 캐싱

자주 묻는 질문 (FAQ)

Q1. 슬라이더와 그리드 중 어떤 것을 선택해야 하나요?

Q2. 애니메이션이 작동하지 않아요.

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

Q4. 같은 페이지에 여러 개 사용할 수 있나요?

Q5. 모바일에서 슬라이드 개수를 0으로 할 수 있나요?

호환성

필수 요구사항

브라우저 지원

라이브러리

마무리

다음 단계

관련 문서