버튼 - 케이테마 쇼핑몰케이테마 쇼핑몰

들어가며

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

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

주요 업데이트 항목

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

개요

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

핵심 통계

주요 특징

애니메이션 카테고리

1.1 Fade 애니메이션 (6개)

1.2 Slide 애니메이션 (4개)

1.3 Scale 애니메이션 (4개)

1.4 Rotate 애니메이션 (3개)

1.5 Text 애니메이션 (4개)

1.6 Special 애니메이션 (6개)

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

1.8 Typing 애니메이션 (4개)

수정자 (Modifiers)

Duration (속도)

Delay (지연)

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 그라디언트 버튼

2.2 호버 효과

2.3 배경 전환 효과

2.4 테두리 효과

2.5 그림자 효과

2.6 3D 효과

2.7 아이콘 버튼

2.8 특수 효과

사용 예시

기본 버튼

<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 효과

3.2 Overlay 효과

3.3 Grayscale 효과

3.4 특수 효과

사용 예시

<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개의 프리셋이 포함되어 있습니다.

프리셋 목록

실시간 미리보기

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

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

지원 폰트

Noto Sans Korean

Pretendard (신규)

최적화

6. 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>

성능 및 호환성

브라우저 지원

성능 최적화

접근성

마무리

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

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

다음 업데이트 예고

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