에서 이용 가능HVACool
글쓴이: AutomatticHVACool은 주거용 냉난방 업체를 위해 특별히 제작된 테마입니다. 이런 사이트를 단순한 호기심으로 방문하는 사람은 거의 없다는 현실에 맞춰 설계되었습니다. 방문자는 덥거나, 춥거나, 누수가 걱정되어 빠르게 조치가 필요한 상황입니다. 이 테마는 핵심 비즈니스 정보를 늘 눈에 띄게 배치하고, 탐색을 바로 사용할 수 있게 하고, 불필요한 요소는 과감히 덜어냅니다.
고정 칼럼 구조, 핵심 정보 우선 배치
3칼럼 구조로는 로고, 탐색, CTA 같은 브랜드 요소는 왼쪽 사이드바에, 연락처 정보는 오른쪽에 고정해 배치했습니다. 덕분에 긴급한 상황에서 고객이 필요로 하는 정보—전화번호, 예약 링크, 주소—가 페이지 어디에 있든 항상 보입니다. 가운데 칼럼(전체 너비의 60%)에는 헤드라인, 서비스 설명, 뉴스 등의 콘텐츠가 표시됩니다.
둥근 모서리와 단일 강조색으로 통일감 있는 디자인
색상 팔레트는 의도적인 대비를 기반으로 합니다. 거의 검정에 가까운 배경과 오프화이트 콘텐츠 영역을 바탕으로, 로고 블록, 주요 CTA, 아이콘 배지, 마우스 오버 상태처럼 즉시 눈길을 끌어야 하는 요소에만 애시드 그린 포인트 컬러를 사용했습니다. 테마에는 4가지 팔레트 변형이 포함되어 있으며, 강조색을 따뜻한, 차가운, 중립적인 기본 톤과 조합해 분위기를 바꿀 수 있습니다.
타이포그래피는 Google Sans 한 가지 서체 패밀리로 통일했습니다. 제목에는 Display(72pt), 본문에는 Text(24pt)를 사용하며, 모든 굵기와 맥락에서 단일 서체 패밀리를 활용해 시스템의 일관성과 성능을 모두 확보합니다.
목적 있는 모션과 깔끔한 기술 기반
가벼운 애니메이션과 마우스 오버 효과가 콘텐츠를 방해하지 않으면서 개성을 더합니다. 이런 디테일은 적절한 순간에 상호작용이 가능하다는 신호를 주어, 바로 행동으로 이어지게 하는 테마의 성격을 더 또렷하게 보여줍니다. 버튼 스타일은 theme.json에 등록하고 functions.php를 통해 표시되도록 설정해, 사이트 소유자가 사용자 정의 CSS를 따로 작성하지 않아도 기본 버튼 UI에서 바로 사용할 수 있습니다. 전체적으로 CSS는 간결하고 체계적으로 정리되어 있으며 주석도 충실합니다.
히어로 섹션에 애니메이션 적용하기
HVACool의 첫 페이지는 짧은 애니메이션 시퀀스로 방문자를 맞이합니다. 기술자 아바타가 톡 튀어나오고, 말풍선이 스스로 타이핑되며, CTA 버튼이 페이드 인되면서 마무리됩니다. 이 애니메이션은 직접 만든 블록에도 그대로 재사용할 수 있고, 코드를 작성할 필요도 없습니다.
작동 방식
애니메이션은 세 가지 CSS 클래스로 구동됩니다. 첫 페이지의 아무 블록에나 블록 설정 → 고급 → 추가 CSS 클래스를 통해 추가하세요:
anim-avatar— 생동감 있는 확대 및 바운스 팝 효과입니다. 기술자 이미지에 사용되지만, 모든 이미지 블록에 적용할 수 있습니다.anim-pill— 대표적인 텍스트 등장 효과입니다. 블록의 첫 번째 텍스트 요소가 문단이면 글자가 한 글자씩 입력되듯 나타나고, 제목이면 위로 슬라이드하며 페이드 인됩니다. 여러 줄 제목에는 이 효과를 권장하지 않는데, 전체 높이를 먼저 잡아 두기 때문에 빈 말풍선이 잠시 보일 수 있습니다.anim-buttons— CTA 행을 위한 은은한 페이드 업 효과로, 말풍선 애니메이션이 끝난 뒤 나타나도록 타이밍이 맞춰져 있습니다.
애니메이션은 항상 같은 순서로 실행됩니다. 아바타 팝 효과가 먼저 나오고, 이어서 각 anim-pill 블록이 페이지에 배치된 순서대로 하나씩 애니메이션되며, 마지막으로 버튼이 페이드 인됩니다. 해당 섹션이 화면에 스크롤되면 시작됩니다.
알아두면 좋은 점
- 첫 페이지 전용. 시퀀스를 구동하는 스크립트는 첫 페이지에서만 로드됩니다. 다른 페이지의 블록에 클래스를 추가해도 애니메이션이 적용되지 않습니다. 나머지 사이트의 속도를 유지하기 위한 의도적인 설계입니다. (개발자는
is_front_page()가드를functions.php에서 제거하여 이를 변경할 수 있습니다.) - 접근성 기본 내장. 시스템 설정에서 “모션 줄이기”를 활성화한 방문자에게는 애니메이션 없이 콘텐츠가 즉시 표시됩니다. JavaScript가 비활성화된 경우에도 모든 콘텐츠가 표시되며, 숨겨지는 요소는 없습니다.
- 자유롭게 조합 가능. 세 가지 클래스 중 하나, 둘, 또는 전부를 사용할 수 있습니다.
anim-pill블록을 여러 개 사용해도 괜찮으며, 페이지에 나타나는 순서대로 애니메이션이 실행됩니다.