# 케이테마 스타터 테마 주요 업데이트
들어가며
안녕하세요, 케이테마 사용자 여러분! 이번 업데이트에서는 웹사이트 제작을 더욱 효율적이고 창의적으로 만들어줄 강력한 기능들을 추가했습니다. 특히 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 3Dbtn-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 기반 디자인 추천 기능을 준비하고 있습니다. 케이테마와 함께 더 멋진 웹사이트를 만들어보세요!
관련 문서
문의사항이나 제안이 있으시면 언제든지 연락주세요!
