• K-Theme Premium 업데이트 (2025.12.31) – Contact, Slider, Cardbox 위젯 개선

K-Theme Premium 업데이트 (2025.12.31) – Contact, Slider, Cardbox 위젯 개선

작성일 2025년 12월 31일 작성자 KTheme

안녕하세요, K-Theme 개발팀입니다!

2025년 마지막 날, K-Theme Premium 플러그인의 주요 업데이트를 진행했습니다. 사용자 여러분께서 보고해주신 버그들을 수정하고, 더 나은 사용 경험을 제공하기 위한 개선사항들을 적용했습니다.

업데이트 내용

Contact 위젯 개선

CSS 파일 로딩 문제 해결

문제: Contact 위젯의 스타일이 페이지에 적용되지 않는 문제가 있었습니다.

원인: CSS @import 규칙이 파일 끝부분에 위치하여 브라우저가 무시하고 있었습니다. CSS 표준에 따르면 @import 규칙은 반드시 파일 맨 위에 있어야 합니다.

해결: @import url('k-contact.css'); 규칙을 파일 맨 위로 이동했습니다.

효과: Contact 위젯의 모든 스타일(높이 100%, gutter 제거, hover 효과 등)이 정상적으로 적용됩니다.

다크모드 자동 적용 비활성화

문제: 사용자의 시스템/브라우저가 다크모드로 설정되어 있으면, Elementor에서 설정한 색상과 관계없이 자동으로 어두운 스타일이 적용되었습니다.

해결: @media (prefers-color-scheme: dark) 미디어 쿼리를 비활성화했습니다.

효과: 이제 Elementor에서 지정한 색상이 항상 정확하게 적용되며, 사용자가 완전히 색상을 제어할 수 있습니다.

✨ Ninja Forms 스타일 개선

  • 에러 필드: 에러 표시 아이콘을 Primary 색상으로 변경하고 배경 제거
  • Label 스타일: 폰트 굵기를 normal로 변경하고 크기를 1rem으로 통일

더 깔끔하고 일관된 폼 디자인을 제공합니다.

Slider 위젯 개선

GSAP Shrink 애니메이션 Border-Radius 충돌 해결

문제: GSAP 애니메이션 탭에서 “Shrink 둥근 모서리” 값을 0px로 설정해도, 스크롤 후에 슬라이더가 둥글게 표시되는 문제가 있었습니다.

원인 분석:

  • 스타일 탭: “모서리 반경” 설정 → 정적 CSS로 직접 적용
  • GSAP 애니메이션 탭: “Shrink 둥근 모서리” 설정 → JavaScript 애니메이션
  • 두 설정이 독립적이어서 정적 CSS 값이 남아있었습니다.

해결 방법:

  1. 자동 숨김: Shrink 애니메이션을 선택하면 스타일 탭의 “모서리 반경” 컨트롤이 자동으로 숨겨집니다.
  2. 강제 초기화: .gsap-width-shrink 클래스에 border-radius: 0 !important를 적용하여 초기 상태를 각지게 만듭니다.
  3. 사용자 안내: 명확한 설명을 추가하여 두 설정의 관계를 안내합니다.

결과:

  • Shrink 둥근 모서리를 0px로 설정하면 완전히 각진 상태 유지 ✅
  • Shrink 둥근 모서리를 60px로 설정하면 스크롤 시 부드럽게 둥글게 변함 ✅
  • 설정이 더 직관적이고 예측 가능해졌습니다 ✅

GSAP 애니메이션 동작 설명

Shrink 애니메이션의 둥근 모서리는 스크롤 진행에 따라 다음과 같이 적용됩니다:

스크롤 위치Border Radius상태
시작 지점 (bottom 60%)0px완전히 각진 상태
진행 중 (50%)30px점진적으로 둥글게
종료 지점 (bottom 20%)60px (설정값)완전히 둥근 상태

Cardbox 위젯 개선

카드 높이 설정 미적용 문제 해결

문제: 스타일 탭에서 “카드 높이”를 설정해도 Style 3, 4에는 적용되지 않았습니다.

원인: 템플릿마다 다른 CSS 클래스를 사용하고 있었지만, 위젯의 selector는 하나의 클래스만 타겟팅하고 있었습니다.

스타일클래스명이전 적용현재 적용
Style 1.ktheme-cardbox-item✅ 적용됨✅ 적용됨
Style 2.ktheme-cardbox-item-vertical❌ 제외 (세로 레이아웃)❌ 제외 (세로 레이아웃)
Style 3.ktheme-cardbox-item-style3❌ 적용 안됨✅ 적용됨
Style 4.ktheme-cardbox-item-style4❌ 적용 안됨✅ 적용됨

해결: 모든 스타일의 클래스를 CSS selector에 추가했습니다.

효과: Style 1, 3, 4의 카드 높이를 자유롭게 설정할 수 있으며, 반응형으로 데스크탑/태블릿/모바일 각각 다른 높이를 지정할 수 있습니다.

기술적 개선사항

CSS 관련

  • ✅ CSS 표준 준수 (@import 규칙 위치)
  • ✅ CSS Specificity 최적화 (!important 전략적 사용)
  • ✅ 다중 클래스 selector 지원
  • ✅ CSS 변수 활용 (var(--bs-primary))

Elementor 통합

  • ✅ Conditional display 개선 (조건부 컨트롤 표시)
  • ✅ 반응형 컨트롤 활용 (데스크탑/태블릿/모바일)
  • ✅ 사용자 친화적인 설명 추가

코드 품질

  • ✅ 린트 에러 없음 (모든 수정 파일)
  • ✅ 명확한 주석 및 문서화
  • ✅ 일관된 코딩 스타일

업그레이드 방법

  1. 백업: 기존 플러그인 파일을 백업합니다.
    plugins/ktheme-premium/
  2. 파일 업로드: 수정된 파일을 FTP/SFTP로 업로드합니다.
  3. Elementor 캐시 삭제:
    • WordPress 관리자 패널 접속
    • Elementor > 도구 메뉴 이동
    • “캐시 재생성” 버튼 클릭
    • “CSS 파일 재생성” 버튼 클릭
  4. 브라우저 캐시 삭제:
    • Windows: Ctrl + Shift + R
    • Mac: Cmd + Shift + R
  5. 확인: Contact, Slider, Cardbox 위젯이 정상 작동하는지 확인합니다.

수정된 파일 목록

파일변경사항
asset/css/ktheme-premium.css@import 위치 이동 (8줄)
asset/css/k-contact.css다크모드 비활성화, 폼 스타일 수정
widgets/ktheme-slider-widget.phpborder-radius 충돌 해결 (1573-1588줄)
widgets/cardbox-widget.php카드 높이 적용 수정 (388-392줄)

⚠️ 호환성 정보

WordPress6.0 이상
Elementor3.0 이상
PHP7.4 이상
브라우저Chrome, Firefox, Safari, Edge (최신 버전)

마치며

이번 업데이트로 K-Theme Premium의 안정성과 사용성이 크게 향상되었습니다. 앞으로도 지속적으로 개선하여 더 나은 제품을 제공하겠습니다.

문제가 발생하거나 궁금한 사항이 있으시면 언제든지 연락주세요!

지원 채널:

감사합니다!
K-Theme Development Team

«

답글 남기기

페이팔 구매시 USD를 선택하세요
KRW 한국 원화
USD 미국 달러