PORTFOLIO / 크로스핏
그릿박스 — 크로스핏
그릿박스 · 데모용 가상 브랜드이며 실존 업체가 아닙니다.
01
미리보기
조회 11
02
이 데모에 대하여
성수동 크로스핏 데모. P5 키네틱 볼드(볼트 옐로). 시그니처는 기록 숫자 스케일 — 초대형 숫자가 뷰포트를 뚫으며 카운트업되고 배경이 교체된다. 이미지는 ChatGPT(gpt-image)로 섹션별 생성 후 프리셋 필터로 톤을 통일했다. 가상 브랜드이며 실존 업체와 무관하다.
프롬프트 생성기 보기 — 이 데모를 만들 때 넣은 값
아래 값을 생성기에 넣어 이 페이지의 빌드 명세서를 뽑았습니다. 같은 방식으로 내 업종·브랜드를 넣으면 내 페이지용 명세서가 나옵니다.
| 브랜드 | 그릿박스 |
|---|---|
| 지역 | 서울 성수동 |
| 업종 | 피트니스·크로스핏 |
| 서비스 요약 | 크로스핏 그룹 클래스, 개인 PT, 오픈짐 |
| 타겟 고객 | 20~30대, 운동 경험 있는 직장인 |
| 브랜드 형용사 | 강렬한 · 역동적인 · 대담한 |
| 신뢰 숫자 | 코치 N명, 주간 클래스 N회, 회원 N명 |
| 무드 프리셋 | P5 키네틱 볼드 |
| 액센트 변주 | 볼트 옐로 #F2E31B |
| 히어로 | A안 |
| 시그니처 연출 | 기록 숫자 스케일 스크럽 |
| CTA 채널 | 전화, 네이버 예약·톡톡 |
| 기술 스택 | 순수 HTML + CSS + JS |
| 스크롤 | Lenis (부드러운 스크롤) |
| 페이지 구성 | 히어로 → 공감(문제 제기) → ★시그니처 챕터 → 서비스/작품 그리드 → 진행 프로세스 → 후기·소셜 프루프 → 성과 숫자 → FAQ → 최종 CTA(+폼) → 오시는 길/지도 → 푸터 |
| 선택 인터랙션 | 가로 드래그 스트립 · 무한 키워드 마퀴 · 패럴랙스 이미지 |
| 보유 에셋 | /assets/gear-chalk.webp — 1100×1100 — 185KB — 초크 가루와 손 클로즈업 /assets/gear-kettlebell.webp — 1100×1100 — 140KB — 케틀벨 금속 질감 클로즈업 /assets/gear-plate.webp — 1100×1100 — 86KB — 쌓여 있는 검은 원판 클로즈업 /assets/hero-box.webp — 900×1200 — 78KB — 측광이 들어오는 어두운 크로스핏 박스 내부와 바벨 /assets/move-barbell.webp — 1400×788 — 31KB — 바벨 리프팅 동작 /assets/move-box.webp — 1400×788 — 30KB — 박스 점프 동작 /assets/move-rope.webp — 1400×788 — 33KB — 로프 클라이밍 동작 /assets/space-floor.webp — 1400×934 — 176KB — 박스 바닥에 정렬된 기구들 /assets/wide-box.webp — 2000×858 — 113KB — 천장이 높은 창고형 크로스핏 박스 전경 보유 에셋이 이 수량에 못 미치면, 부족분은 회색 placeholder(비율 명시)로 두고 |
이 명세서 보기 — 어떤 문서가 나오는지 미리보기
이 데모는 11,328자 분량의 빌드 명세서로 만들었습니다. 아래는 앞부분 일부이며, 팔레트·타이포 수치, AI-티 판별 규칙, 인터랙션 구현 지침, 업종별 카피 어휘는 구매자에게만 공개됩니다.
나머지 10,428자에 이 페이지를 만든 실제 지침이 들어 있습니다.
PRESET
P5 키네틱 볼드
에너지로 압도 — 카본 × 핫 코랄 × 초대형 타이포. 젊고 강한 브랜드
Carbon#121212
Paper#F4F4F2
Accent#FF4D36
Sub#1F1F1F
Display **Anton/Archivo Black + 한글 검은고딕·에스코어드림 900** / Body Pretendard / 숫자 초대형
뷰포트 관통 초대형 타이포, 아웃라인 텍스트, 대각선 컷 섹션 경계, 스티커 배지, 노이즈 그레인
filter: contrast(1.15) saturate(1.05) + 카본×액센트 듀오톤 1~2장