케이테마 테마 주요 업데이트 V2

# 케이테마 스타터 테마 주요 업데이트

들어가며

안녕하세요, 케이테마 사용자 여러분! 이번 업데이트에서는 웹사이트 제작을 더욱 효율적이고 창의적으로 만들어줄 강력한 기능들을 추가했습니다. 특히 GSAP 애니메이션 라이브러리, 버튼 라이브러리, 이미지 효과 라이브러리 등 개발자와 디자이너 모두가 환호할 만한 도구들이 포함되었습니다.

이번 업데이트의 핵심은 “재사용성”과 “효율성”입니다. 반복적인 작업을 최소화하고, 빠르게 고품질의 결과물을 만들 수 있도록 설계되었습니다.

주요 업데이트 항목

• GSAP 애니메이션 라이브러리 – 31개 애니메이션, 400개 이상 조합
• 버튼 라이브러리 – 200개 이상의 버튼 스타일
• 이미지 효과 라이브러리 – 다양한 이미지 호버 효과
• 커스터마이저 개선 – 컬러 프리셋 시스템
• 폰트 시스템 업그레이드 – Noto Sans KR, Pretendard 지원
• HTML 라이브러리 페이지 – 실시간 미리보기 지원

1. GSAP 애니메이션 라이브러리

개요

GSAP(GreenSock Animation Platform)을 기반으로 한 재사용 가능한 애니메이션 라이브러리입니다. 복잡한 JavaScript 코드 없이 HTML 클래스만 추가하면 전문가 수준의 애니메이션을 구현할 수 있습니다.

핵심 통계

• 총 31개 애니메이션 (Typing 4개 포함)
• 13개 수정자 (Duration 3 + Delay 6 + Easing 4)
• 400개 이상 조합 가능

주요 특징

• 간편한 사용: HTML 클래스만 추가하면 끝
• 자동 트리거: Intersection Observer로 스크롤 시 자동 실행
• ScrollTrigger 지원: Parallax 등 스크롤 기반 애니메이션
• Elementor 호환: Elementor 위젯에서도 완벽 동작
• 접근성 고려: prefers-reduced-motion 지원
• 성능 최적화: GPU 가속 활용

애니메이션 카테고리

1.1 Fade 애니메이션 (6개)

• gsap-fade-in – 페이드 인
• gsap-fade-in-up – 아래에서 위로 페이드 인
• gsap-fade-in-down – 위에서 아래로 페이드 인
• gsap-fade-in-left – 왼쪽에서 페이드 인
• gsap-fade-in-right – 오른쪽에서 페이드 인
• gsap-fade-out – 페이드 아웃

1.2 Slide 애니메이션 (4개)

• gsap-slide-up – 위로 슬라이드
• gsap-slide-down – 아래로 슬라이드
• gsap-slide-left – 왼쪽으로 슬라이드
• gsap-slide-right – 오른쪽으로 슬라이드

1.3 Scale 애니메이션 (4개)

• gsap-scale-in – 확대되며 나타남
• gsap-scale-in-up – 확대 + 위로 이동
• gsap-scale-in-fade – 확대 + 페이드 인
• gsap-zoom-in – 줌 인

1.4 Rotate 애니메이션 (3개)

• gsap-rotate-in – 회전하며 나타남
• gsap-rotate-in-left – 왼쪽에서 회전
• gsap-rotate-in-right – 오른쪽에서 회전

1.5 Text 애니메이션 (4개)

• gsap-text-reveal – 텍스트 리빌 효과
• gsap-text-split-fade – 글자별 페이드 인
• gsap-text-split-slide – 글자별 슬라이드
• gsap-text-split-rotate – 글자별 회전

1.6 Special 애니메이션 (6개)

• gsap-bounce – 통통 튀는 효과
• gsap-shake – 흔들림 효과
• gsap-rubber-band – 고무줄 효과
• gsap-pulse – 맥박 효과
• gsap-flip – 뒤집기 효과
• gsap-swing – 그네 효과

1.7 Scroll Move 애니메이션 (2개)

• gsap-scroll-move-x – 가로 스크롤 이동
• gsap-scroll-move-y – 세로 스크롤 이동

1.8 Typing 애니메이션 (4개)

• gsap-typing – 타이핑 효과
• gsap-typing-cursor – 커서 포함
• gsap-typing-loop – 반복 타이핑
• gsap-typing-multiple – 여러 줄 타이핑

수정자 (Modifiers)

Duration (속도)

• gsap-duration-fast – 빠르게 (0.3초)
• gsap-duration-normal – 보통 (0.6초, 기본값)
• gsap-duration-slow – 느리게 (1.2초)

Delay (지연)

• gsap-delay-1 – 0.1초 지연
• gsap-delay-2 – 0.2초 지연
• gsap-delay-3 – 0.3초 지연
• gsap-delay-5 – 0.5초 지연
• gsap-delay-8 – 0.8초 지연
• gsap-delay-10 – 1.0초 지연

Easing (가속도)

• gsap-ease-power – Power easing (기본값)
• gsap-ease-back – Back easing (반동 효과)
• gsap-ease-elastic – Elastic easing (탄성 효과)
• gsap-ease-bounce – Bounce easing (튕김 효과)

사용 예시

기본 사용법

<div class="gsap-fade-in">
    페이드 인 애니메이션
</div>

수정자와 함께

<div class="gsap-fade-in-up gsap-duration-slow gsap-delay-2">
    느리게, 0.2초 지연 후 아래에서 위로 페이드 인
</div>

복합 사용

<h1 class="gsap-text-reveal gsap-duration-slow">
    멋진 제목
</h1>
<p class="gsap-fade-in-up gsap-delay-5">
    제목 다음에 나타나는 설명
</p>

ScrollTrigger 고급 사용

<div class="gsap-scroll-move-x" data-scroll-speed="500">
    스크롤 시 좌우로 이동
</div>

<div class="gsap-fade-in" data-scroll-start="top bottom" data-scroll-end="center center">
    특정 구간에서 페이드 인
</div>

2. 버튼 라이브러리

개요

Bootstrap 5와 완벽 호환되는 200개 이상의 버튼 클래스를 제공합니다. 기본 Bootstrap 버튼을 확장하여 더욱 다양한 스타일과 효과를 적용할 수 있습니다.

주요 카테고리

2.1 그라디언트 버튼

• btn-gradient-primary – Primary 그라디언트
• btn-gradient-secondary – Secondary 그라디언트
• btn-gradient-success – Success 그라디언트
• btn-gradient-purple – Purple 그라디언트
• btn-gradient-orange – Orange 그라디언트
• btn-gradient-pink – Pink 그라디언트

2.2 호버 효과

• btn-hover-lift – 살짝 떠오르는 효과
• btn-hover-grow – 커지는 효과
• btn-hover-shrink – 작아지는 효과
• btn-hover-shake – 흔들림 효과
• btn-hover-float – 부드럽게 떠오르기
• btn-hover-pulse – 맥박 효과
• btn-hover-rotate – 회전 효과
• btn-hover-skew – 기울임 효과

2.3 배경 전환 효과

• btn-hover-sweep – 쓸어내는 효과
• btn-hover-sweep-left – 왼쪽으로 쓸기
• btn-hover-sweep-right – 오른쪽으로 쓸기
• btn-hover-sweep-top – 위로 쓸기
• btn-hover-sweep-bottom – 아래로 쓸기
• btn-hover-invert – 색상 반전
• btn-hover-radial – 원형 확장

2.4 테두리 효과

• btn-hover-border-slide – 테두리 슬라이드
• btn-hover-border-grow – 테두리 확장
• btn-hover-border-fade – 테두리 페이드
• btn-hover-underline – 밑줄 효과
• btn-hover-overline – 윗줄 효과

2.5 그림자 효과

• btn-shadow-sm – 작은 그림자
• btn-shadow-md – 중간 그림자
• btn-shadow-lg – 큰 그림자
• btn-shadow-glow – 발광 효과
• btn-shadow-neon – 네온 효과

2.6 3D 효과

• btn-3d – 기본 3D 효과
• btn-3d-primary – Primary 3D
• btn-3d-hover-press – 눌리는 효과
• btn-3d-hover-lift – 떠오르는 3D

2.7 아이콘 버튼

• btn-icon-left – 왼쪽 아이콘
• btn-icon-right – 오른쪽 아이콘
• btn-icon-top – 위 아이콘
• btn-icon-only – 아이콘만
• btn-icon-circle – 원형 아이콘 버튼
• btn-icon-square – 사각 아이콘 버튼

2.8 특수 효과

• btn-glass – 유리 효과 (glassmorphism)
• btn-neumorphic – 뉴모피즘
• btn-neon – 네온 사인
• btn-retro – 레트로 스타일
• btn-minimal – 미니멀

사용 예시

기본 버튼

<button class="btn btn-primary">기본 버튼</button>

그라디언트 + 호버 효과

<button class="btn btn-gradient-primary btn-hover-lift">
    그라디언트 버튼
</button>

아이콘 버튼

<button class="btn btn-primary btn-icon-left btn-hover-sweep">
    <i class="bi bi-heart"></i> 좋아요
</button>

3D 효과 버튼

<button class="btn btn-primary btn-3d btn-3d-hover-press">
    3D 버튼
</button>

복합 사용

<button class="btn btn-gradient-purple btn-hover-lift btn-shadow-glow rounded-pill px-5 py-3">
    멋진 버튼
</button>

3. 이미지 효과 라이브러리

개요

이미지에 적용할 수 있는 다양한 호버 효과를 제공합니다. CSS만으로 구현된 성능 최적화된 효과들입니다.

주요 효과

3.1 Zoom 효과

• img-hover-zoom – 확대
• img-hover-zoom-out – 축소
• img-hover-zoom-rotate – 확대 + 회전

3.2 Overlay 효과

• img-overlay-fade – 페이드 오버레이
• img-overlay-slide-up – 위로 슬라이드
• img-overlay-slide-down – 아래로 슬라이드
• img-overlay-gradient – 그라디언트 오버레이

3.3 Grayscale 효과

• img-grayscale – 기본 흑백 (호버 시 컬러)
• img-grayscale-reverse – 컬러 (호버 시 흑백)

3.4 특수 효과

• img-hover-tilt – 기울임 효과
• img-hover-3d – 3D 효과
• img-hover-glitch – 글리치 효과

사용 예시

<div class="img-hover-zoom">
    <img src="image.jpg" alt="이미지">
</div>

<div class="img-grayscale img-hover-zoom">
    <img src="image.jpg" alt="흑백에서 컬러로">
</div>

4. 커스터마이저 개선

컬러 프리셋 시스템

사전 정의된 컬러 조합을 한 번의 클릭으로 적용할 수 있습니다. 총 10개의 프리셋이 포함되어 있습니다.

프리셋 목록

• Default – 기본 블루 테마
• Modern Dark – 모던한 다크 테마
• Vibrant – 생동감 있는 컬러
• Professional – 전문적인 컬러
• Minimal – 미니멀 컬러
• Sunset – 석양 테마
• Ocean – 바다 테마
• Forest – 숲 테마
• Purple Dream – 보라 드림
• Coral – 코랄 테마

실시간 미리보기

커스터마이저에서 색상을 변경하면 즉시 미리보기에 반영됩니다. CSS 변수를 활용하여 전체 사이트 색상이 일괄 변경됩니다.

5. 폰트 시스템 업그레이드

지원 폰트

Noto Sans Korean

• Regular (400)
• Medium (500)
• Bold (700)

Pretendard (신규)

• Light (300)
• Regular (400)
• Medium (500)
• Bold (700)
• ExtraBold (800)
• Variable Font 지원

최적화

• WOFF2 포맷 – 최신 브라우저 지원
• 서브셋 – 한글 2,350자 + 영문/숫자/기호
• 용량 최적화 – 평균 200KB 이하
• 로컬 호스팅 – GDPR 준수, 빠른 로딩

6. HTML 라이브러리 페이지

제공 페이지

• k-library-gsap.html – GSAP 애니메이션 갤러리
• k-library-button.html – 버튼 라이브러리 쇼케이스
• k-library-image-effect.html – 이미지 효과 데모

특징

• 실시간 미리보기 – 모든 효과를 즉시 확인
• 코드 복사 – 클릭 한 번으로 코드 복사
• 필터링 – 카테고리별 정렬
• 검색 기능 – 원하는 효과 빠르게 찾기
• 반응형 – 모바일에서도 완벽 동작

접근 방법

테마 루트 디렉토리의 HTML 파일을 브라우저로 열면 됩니다:

https://your-domain.com/wp-content/themes/ktheme_starter/k-library-gsap.html

실전 활용 예제

히어로 섹션 만들기

<section class="hero-section">
    <div class="container">
        <h1 class="gsap-text-reveal gsap-duration-slow">
            멋진 제목
        </h1>
        <p class="gsap-fade-in-up gsap-delay-5">
            설명 텍스트가 제목 다음에 나타납니다.
        </p>
        <div class="gsap-fade-in-up gsap-delay-8">
            <button class="btn btn-gradient-primary btn-hover-lift btn-shadow-glow rounded-pill px-5 py-3">
                <i class="bi bi-rocket"></i> 시작하기
            </button>
        </div>
    </div>
</section>

카드 그리드 만들기

<div class="row">
    <div class="col-md-4 gsap-fade-in-up gsap-delay-1">
        <div class="card img-hover-zoom">
            <img src="image1.jpg" class="card-img-top" alt="이미지">
            <div class="card-body">
                <h5 class="card-title">카드 제목 1</h5>
                <button class="btn btn-primary btn-hover-sweep">
                    더보기
                </button>
            </div>
        </div>
    </div>
    <div class="col-md-4 gsap-fade-in-up gsap-delay-2">
        <!-- 카드 2 -->
    </div>
    <div class="col-md-4 gsap-fade-in-up gsap-delay-3">
        <!-- 카드 3 -->
    </div>
</div>

CTA 섹션 만들기

<section class="cta-section gsap-fade-in">
    <div class="container text-center">
        <h2 class="gsap-scale-in">지금 시작하세요!</h2>
        <p class="gsap-fade-in-up gsap-delay-3">
            무료 체험 기간 동안 모든 기능을 사용해보세요.
        </p>
        <div class="gsap-fade-in-up gsap-delay-5">
            <button class="btn btn-gradient-purple btn-hover-lift btn-shadow-neon rounded-pill px-5 py-3 me-3">
                무료 체험 시작
            </button>
            <button class="btn btn-outline-light btn-hover-invert rounded-pill px-5 py-3">
                더 알아보기
            </button>
        </div>
    </div>
</section>

성능 및 호환성

브라우저 지원

• Chrome 90+
• Firefox 88+
• Safari 14+
• Edge 90+
• iOS Safari 14+
• Chrome Android 90+

성능 최적화

• GPU 가속 – transform과 opacity 활용
• Lazy Loading – Intersection Observer 활용
• CSS 변수 – 동적 스타일링
• 최소화 – 압축된 CSS/JS 파일

접근성

• prefers-reduced-motion 지원
• 키보드 네비게이션 지원
• 스크린 리더 호환
• 고대비 모드 지원

마무리

이번 케이테마 스타터 테마 업데이트는 웹사이트 제작의 효율성과 창의성을 동시에 높이는 데 중점을 두었습니다. 31개의 GSAP 애니메이션, 200개 이상의 버튼 스타일, 다양한 이미지 효과를 활용하면 코딩 없이도 전문가 수준의 결과물을 만들 수 있습니다.

특히 HTML 라이브러리 페이지를 통해 실시간으로 모든 효과를 미리 보고 코드를 복사할 수 있어, 학습 곡선을 크게 낮출 수 있습니다. Elementor와의 완벽한 호환성으로 드래그 앤 드롭 방식으로도 이 모든 기능을 활용할 수 있습니다.

다음 업데이트 예고

다음 업데이트에서는 더 많은 애니메이션 프리셋과 템플릿, 그리고 AI 기반 디자인 추천 기능을 준비하고 있습니다. 케이테마와 함께 더 멋진 웹사이트를 만들어보세요!

관련 문서

• GSAP 라이브러리 상세 문서 (LIBRARY-GSAP-README.md)
• 버튼 라이브러리 상세 문서 (LIBRARY-BUTTON-README.md)
• 이미지 효과 라이브러리 문서
• 커스터마이저 가이드

문의사항이나 제안이 있으시면 언제든지 연락주세요!