시네마토그래픽 사이트 (영화 같은 사이트)
사이트에 잘 연출된 조각 같은 느낌을 줍니다. 스크롤할 때마다 새로운 내용이 드러나고, 각 버튼은 무게감 있게 반응하며, 타이포그래피는 포스터 수준의 스케일을 자랑합니다. 최종 고객은 로컬 비즈니스 오너이며, 방문자는 대부분 모바일(특히 4G 환경)에서 접속합니다. 따라서 모든 움직임은 가볍고 브라우저 네이티브 방식이며, 가독성을 해치거나 WhatsApp 버튼 클릭을 방해하지 않습니다.
살아있는 레퍼런스: fazer-site 스킬이 함께 제공하는 템플릿(fazer-site/template/)입니다. 리듬, 스케일 또는 밀도가 헷갈리면 레퍼런스를 열고 콘텐츠가 아닌 마감을 따라 하세요.
원칙 (Axiomas)
- 정체성은 고객의 것입니다. 색상과 타이포그래피는 로고, 매장 외관, 비즈니스 인스타그램에서 가져옵니다. 카탈로그에서 미리 준비된 팔레트는 사용하지 않습니다. 로고가 전혀 없는 경우에만 임시 색상을 사용하며, 임시 색상임을 명시해야 합니다.
- 비즈니스 이름은 히어로에 크게 표시됩니다. 이름이 없는 히어로는 거절되었습니다.
- 사진은 비즈니스의 실제 사진입니다. 스톡 사진은 절대 사용하지 않습니다. 매장 외관, 가게 내부, 제품, 결과물 사진입니다. 실제 사진이 전혀 없는 경우, 해당 블록은 '예시용'으로 표시되거나 제거됩니다.
- 움직임은 읽기를 돕기 위한 것입니다. 애니메이션이 콘텐츠를 늦추거나, 스크롤을 막거나, 버튼을 사라지게 하면 제거됩니다.
- 기본적으로 가볍습니다. HTML, CSS 및
IntersectionObserver로 해결합니다. GSAP 등의 애니메이션 라이브러리는 승인된 효과가 CSS로 구현 불가능할 때만, 그리고 CSS로 처리할 수 있는 부분에는 절대 사용하지 않습니다.
금지 사항 (각 항목은 실제 프로젝트에서 이미 거절되었습니다)
- 스크롤 시 쌓이거나 내려오는 카드 (스티키 스태킹,
pin+ 스케일 + 블러 효과). 사용 금지. - 매장, 제품, 공간 사진에 둥근 모서리, 아치형 또는 원형 클리핑.
border-radius가 큰 컨테이너도 제거합니다. 날카로운 모서리 또는 대각선 클리핑(clip-path)이 표준입니다. - 리뷰 뒤에 배경 사진.
- 제목에 가는 세리프체와 이탤릭체, 그리고 기본 강조색으로 금색 사용. '섬세함'으로 읽힙니다. 요청된 톤은 남성적이고, 공격적이며, 현대적입니다. 단, 고객의 브랜드가 다른 것을 지시하는 경우는 예외입니다.
- 가상의 가격표와 가상의 숫자. 가격, 평점, 마감일, 후기, 카운트는 모두 해당 비즈니스에서 공개된 실제 정보만 사용합니다.
- 로컬 비즈니스에 의미 없는 소프트웨어 장식: 실시간 대시보드를 흉내내는 카드, "System Operational", 스스로 클릭하는 커서, 로고 타자기 효과 등.
시네마토그래픽 효과의 구성 요소
포스터 수준의 타이포그래피. 제목에는 좁고 굵은 서체(예: Barlow Condensed 800 이탤릭)를, 본문에는 깔끔한 서체를 사용합니다. 제목은 크게(clamp()로 데스크탑에서 약 90~140px), 줄 간격은 짧게, text-wrap: balance를 적용합니다. 제목과 본문 간의 스케일 대비가 핵심 효과이며, 비용이 전혀 들지 않습니다.
히어로. 비즈니스 이름을 크게, 비즈니스가 하는 일과 위치를 설명하는 구체적인 문장, 간략한 증거(평점, 리뷰 수, 팔로워 수, 영업 시간) 및 주요 버튼으로 구성됩니다. 데스크탑에서는 텍스트와 사진이 나란히 배치됩니다. 모바일에서는 순서가 다음과 같습니다: 이름, 문장, 증거, 버튼, 사진. 사진은 대각선으로 모서리를 자르고 느린 줌 효과(scale 1에서 1.06으로 약 20초 동안)를 줄 수 있습니다.
계단식 등장. 로딩 시 히어로 요소들이 16~40px 위로 올라오며 순차적으로 나타납니다(각 요소 간 약 80ms 지연). 아래 섹션들은 화면에 들어올 때 IntersectionObserver(낮은 threshold 값 사용)로 동일한 움직임을 보이며 나타납니다.
텍스처. 히어로와 주요 섹션의 단색 배경 위에 5% 불투명도의 SVG <feTurbulence> 노이즈를 입혀 디지털 그라데이션 느낌을 없앱니다.
무게감 있는 버튼. overflow: hidden과 호버 시 색상이 변경되도록 슬라이딩하는 레이어, cubic-bezier(0.25, 0.46, 0.45, 0.94)를 사용한 약간의 scale(1.03) 효과를 적용합니다. 최소 터치 영역은 44px입니다.
와이드 스크린에서의 증거 강조. 실제 리뷰 하나를 선언문 크기로, 어두운 단색 배경에, 스크롤에 따라 단어가 순차적으로 밝아지게 표시합니다. 사이트당 하나만 사용하며, 나머지 리뷰는 간단한 그리드로 표시합니다.
카운트 업 숫자. 평점이나 다른 실제 숫자가 화면에 들어올 때 0부터 해당 값까지 카운트됩니다.
대비를 주는 서비스 섹션. 어두운 사이트 중간에 밝은 섹션(또는 그 반대)을 배치하고, 큰 순서 번호(01, 02...)를 사용하여 리듬을 끊고 주제 전환을 표시합니다.
선택 사항: 흐르는 텍스트(marquee) 서비스나 카테고리를 강조 색상으로 표시합니다.
기술 규칙
- 기반: 프로젝트가 다른 기반을 가지고 있지 않은 한, 정적 HTML에 CSS를 파일 내에 포함합니다. 기존 프로젝트에서는 기반과 승인된 카피를 유지하고 이 레이어만 적용합니다.
- 폰트: Google Fonts를
preconnect및display=swap과 함께 사용합니다. - 이미지: 히어로 이미지는
fetchpriority="high"를, 나머지는loading="lazy"와 함께width,height를 명시합니다. - 모션 축소: 모든 항목을
@media (prefers-reduced-motion: reduce)안에 넣어 애니메이션과 전환을 끕니다. - 모바일: 하단에 고정된 바(WhatsApp 및 전화 버튼)를 제공하며, 양식 필드가 포커스를 받거나 히어로 버튼이 보이는 동안에는 사라집니다. 360px 너비에서 가로 스크롤이 없어야 합니다.
완료 조건
- 360px, 375px, 1440px 스크린샷을 열어 확인했으며, 금지 목록의 어떤 항목도 나타나지 않습니다.
- 비즈니스 이름이 히어로에 있고, 사진은 실제 비즈니스 사진이거나 '예시용'으로 표시되었습니다.
prefers-reduced-motion이 활성화된 상태에서 사이트가 완전히 표시되고 읽기 쉬우며, 애니메이션을 기다리며 숨겨진 콘텐츠가 없습니다.