# 다타랩 TV — 반응형 홈페이지 설계 스펙 - **작성일**: 2026-04-23 - **대상**: 시안 `KakaoTalk_20260423_113613184.jpg` (1920×10378)를 기반으로 한 단일 페이지 반응형 홈페이지 - **스택**: HTML5 + CSS3 + Vanilla JavaScript (프레임워크/빌드 도구 없음) - **배포 환경**: XAMPP `htdocs/20260426` 하위 정적 서빙 ## 1. 목표와 범위 ### 1.1 목표 - 시안 구조를 섹션 단위로 충실히 재현하는 데스크톱/태블릿/모바일 반응형 페이지를 제공한다. - 다타랩 TV(유튜브 구독자 전용 장기렌트/리스 견적 서비스)의 히어로, 차량 전시, 비용 절약 비교, 견적 폼, 통계, 후기, 제휴사, 푸터까지 전 섹션을 포함한다. - 풀 인터랙션 수준(옵션 C)을 구현한다 — 햄버거 메뉴, 스크롤 카운터, 슬라이더, 스크롤 페이드, 스무스 스크롤. ### 1.2 범위 내 - 단일 `index.html` 랜딩 페이지 - 정적 폼 UI (실제 제출 엔드포인트는 연결하지 않음, `console.log` + 성공 모달 stub) - 시안 원본에서 직접 crop한 이미지 자원 활용 ### 1.3 범위 외 - 서버 사이드 처리 (PHP, DB 연동, 메일 발송) - 견적 결과 페이지, 관리자 페이지, 로그인 - 다국어 - SEO 메타 태그 자동화, sitemap 생성 ## 2. 파일/디렉토리 구조 ``` 20260426/ ├── index.html ├── assets/ │ ├── css/ │ │ ├── reset.css # 리셋 + CSS 변수 토큰 │ │ ├── layout.css # 공통 레이아웃, 헤더, 푸터, 유틸리티 │ │ └── sections.css # 섹션별 스타일 │ ├── js/ │ │ ├── main.js # 메뉴, 스무스 스크롤, 슬라이더, 폼 │ │ └── counter.js # IntersectionObserver 카운터 애니메이션 │ └── images/ │ ├── extracted/ # 시안에서 crop한 이미지 (섹션별) │ └── placeholder/ # crop 품질 낮은 경우의 fallback ├── docs/superpowers/specs/ │ └── 2026-04-23-datalab-tv-homepage-design.md # 본 문서 └── KakaoTalk_20260423_113613184.jpg # 원본 시안 ``` ## 3. 디자인 토큰 ```css :root { /* Colors */ --color-bg-dark: #0D0D0D; --color-bg-surface: #1A1A1A; --color-bg-light: #F5F5F5; --color-bg-white: #FFFFFF; --color-text-primary: #111111; --color-text-inverse: #FFFFFF; --color-text-muted: #9A9A9A; --color-brand-red: #ED1C24; --color-brand-red-dark: #C4141B; --color-accent-youtube: #FF0000; /* Typography */ --font-sans: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --fs-display: clamp(2rem, 4vw, 3rem); --fs-h1: clamp(1.75rem, 3vw, 2.5rem); --fs-h2: clamp(1.5rem, 2.5vw, 2rem); --fs-body: 1rem; --fs-small: 0.875rem; /* Spacing */ --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 2rem; --space-lg: 4rem; --space-xl: 6rem; /* Layout */ --max-container: 1200px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px; /* Motion */ --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); --dur-fast: 150ms; --dur-base: 300ms; --dur-slow: 600ms; } ``` ## 4. 반응형 브레이크포인트 | 이름 | 범위 | 그리드 | |-----|------|-------| | mobile | ~ 767px | 1 column | | tablet | 768 ~ 1023px | 2 columns (차량), 축약 헤더 | | desktop | 1024 ~ 1439px | 3 columns (차량), 풀 레이아웃 | | wide | 1440px ~ | 3 columns, `max-width: 1200px` 유지 | - 모바일 우선 (`min-width` 미디어 쿼리) - 히어로 이미지는 모바일에서 세로 스택, 데스크톱에서 가로 배치 - 테이블(비용 비교)은 모바일에서 카드 형태로 변환 ## 5. 섹션 스펙 각 섹션은 `
` 로 감싸고 `id`로 앵커 링크를 제공한다. ### 5.1 상단 고정바 + 헤더 (`#top`) - 고정 위치(`position: sticky`), 스크롤 시 배경 투명도/패딩 축소. - 좌측: 유튜브 아이콘 + "유튜브 한정 혜택 최대 25% 할인" - 중앙: 로고 `다타랩 TV` (흰색 워드마크) - 우측 데스크톱: 버튼 "내 조건에 맞는 최저가 견적받기 →" → `#quote-form` 스크롤 - 모바일: 햄버거 아이콘 → 슬라이드 인 메뉴 (anchor 링크 목록) ### 5.2 Hero (`#hero`) - 배경: 다크 그라데이션 + 차량 이미지 (좌), 유튜브 플레이어 목업 (중앙), 여성 모델 (우) - 상단 배지: "YouTube 다타랩 유튜브 구독자 전용 혜택" - 헤드라인: **방금 유튜브에서 본 그 차량, 구독자 전용 최대 25% 할인 혜택** - YouTube 플레이어 목업 (정지된 썸네일, ▶ 오버레이) - 썸네일 텍스트: "26년 그랜저 기습 할인" - 하단 캡션: `"26년형 그랜저 기습 폭풍할인" 그랜저 특가 마지막 기회입니다!` - CTA 버튼: **유튜브 특가 견적 신청하기** (빨강) → `#quote-form` - 모바일: 모델/차량 이미지 축소, 썸네일을 헤드라인 아래로 ### 5.3 QR 혜택 배너 (`#qr-banner`) - 다크 배경. - 좌측 텍스트: "다타랩TV가 숨겨둔 특급 혜택!" / "오직 유튜브 시청자만 받을 수 있는 최대 25% 할인!" - 부연: "견적을 받아본 수많은 고객들이 입을 모아 말합니다." / "'다타랩 TV 시크릿 프로모션은 비교 불가다.'" - 우측: QR 코드 이미지 + "QR코드 스캔하기 / 스마트폰 QR코드 스캔시 최대 25% 할인 적용 됩니다." - 모바일: QR을 하단으로 이동 ### 5.4 YOUTUBE PICK (`#youtube-pick`) - 다크 배경. - 상단 배지: "YOUTUBE PICK" (빨강) - 타이틀: **유튜브 속 그 차량** - 서브: "지금 시청한 그 차량은 물론, 많은 분들이 함께 비교한 인기 모델도 확인해 보세요!" - 그리드: 3×2 (데스크톱), 2×3 (태블릿), 1×6 (모바일) - 카드 구조: - 상단 이미지 (차량 + 여성 모델 합성) + 좌상단 라벨 뱃지 (SOLD OUT / 리미티드 / K5 HEV) - 모델명 (e.g. "르노 필랑트 1955") - 메타: "2026.02 출시 | 준대형 SUV | 가솔린 6.2" - 가격: "월 **000,000원~**" - CTA: "견적 신청" (빨강 버튼 full-width) - 하단 주석: `*견적 조건: 만 26세이상 / 36개월 / 초기비용 선납금 30%` - 하단 CTA: "인기 차량 더보기 +" ### 5.5 댓글문의 BEST 인기 차종 (`#comment-best`) - 밝은 배경 (`--color-bg-light`). - 상단 배지: "다타랩 BEST" (빨강) - 타이틀: **댓글문의 BEST 인기 차종** - 그리드: 6대 (1~6위 번호 뱃지) - 카드 구조: - 좌상단 삼각 뱃지 + 번호 (1~6) - 상단 이미지 (차량 단독) - 모델명, 연식/엔진 메타 - "**렌트월 332,646**원" 포맷 - 샘플 데이터: | # | 모델 | 스펙 | 렌트월 | |---|------|------|--------| | 1/4 | 기아 니로 EV | 2026년형 | 가솔린 터보 2.5WD | 332,646원 | | 2/5 | 현대 디 올 뉴 싼타페 | 2026년형 | 가솔린 터보 1.6 하이브리드 2WD | 225,340원 | | 3/6 | 현대 더 뉴 아반떼 | 2026년형 | 가솔린 1.6 | 174,967원 | ### 5.6 견적 신청 폼 (`#quote-form`) - 다크 배경. - 우측 여성 모델 이미지 (차량 모델 들고 있는) + YouTube 배지 엠블럼. - 좌측 폼: - 헤드라인: "영상에서 보신 차량 견적이 궁금하시다면? / 부담없이 견적부터 신청해보세요!" - 필드: - `이름` * (text, placeholder "성함을 입력해 주세요.") - `연락처` * (tel, placeholder `연락처를 "-"없이 입력해 주세요.`) - `차종` (text, placeholder "희망하는 차종을 입력해 주세요.") - 약관: - 전체 동의 체크 - [필수] 개인정보 제3자 제공 동의 (펼침) - [선택] 마케팅 활용 및 서비스 관련 정보 수신 동의 - CTA: **유튜브 특가 견적받기** (흰 배경 빨간 텍스트, full-width) - 제출 시: 필수 필드 검증 + `alert("견적 신청이 접수되었습니다. 빠르게 연락드리겠습니다.")` stub - 모바일: 모델 이미지 축소, 폼 100% ### 5.7 비용 절약 비교표 (`#cost-compare`) - 밝은 배경. - 좌측 제목 (왜곡된 타이포 효과): **실비용 절반 이하! 파격적인 비용 절약!** - 서브: "장기렌트 계약시 신차 구매 대비 어마어마한 비용이 절감돼요!" - 우측: 검정 세단 차량 + "-55% 비용 절감" 빨간 뱃지 - 비교 표 (행: 장기렌트 [빨강 강조] / 신차 할부): | 구분 | 출고가 | 이자 | 자동차세 | 취등록세 | 보험료(5년) | 월납입료 | |------|--------|------|----------|----------|-------------|----------| | 장기렌트 | 43,470,000원 | 0% | 0원 | 0원 | 0원 | 370,000원 | | 신차 할부 | 43,470,000원 | 최저 5.8% | 550,000원 | 2,715,623원 | 4,250,000원 | 840,000원 | - 모바일: 표를 세로 카드 2개로 변환 ### 5.8 초기 비용 0원 (`#zero-cost`) - 밝은 배경. - 타이틀: **초기 비용 0원! / 전국 최저가 견적!** - 서브: "초기 비용 단돈 '0원'!, 이젠 할부의 부담에서 벗어나세요!" - 좌측 비교 바: - 신차 구매 — `초기비용 450만원` (회색 높은 바) - 장기렌트/리스 — `0원` (빨강 낮은 바, 화살표 강조) - 우측 텍스트 (투명 대형 글자): "선수금, 취등록세, 공제, 각종 세금, 할부 수수료, 이자, 차량 정비 등" 그 위에 덮이는 빨간 강조: "**전부 0원**" ### 5.9 실적 통계 (`#stats`) - 다크 배경. - 4컬럼 숫자: - 누적 계약 수: **54,329** - 현재 상담 진행중: **312** - 이용 고객 수: **173,270** - 재계약률: **93%** - IntersectionObserver로 뷰포트 진입 시 0에서 목표값까지 카운트업 애니메이션 (약 1.5초). ### 5.10 다타랩 TV 후기 영상 (`#youtube-reviews`) - 밝은 배경. - 상단 배지 "다타랩 TV" - 타이틀: **다타랩 TV 속 생생한 출고 후기들** - 가로 슬라이더 (드래그 + 버튼): - 카드 4장 이상: 프로 알파드 출고 / KCM 차 최초공개 (SUV S클래스 1억원대) / 벤츠 타려고 목숨 걸었는데 / 유다연 쏘렌토 출고 - 각 카드: 유튜브 썸네일 + 빨간 ▶ 뱃지 + 캡션 - 모바일: 스와이프 지원, 1.2장 보임 ### 5.11 REAL REVIEW — 실제 계약 후기 (`#reviews`) - 밝은 배경. - 상단 배지: "REAL REVIEW" - 타이틀: **실제 계약 후기** - 서브: "상담부터 차량 인도까지, 100% 만족한 다타랩 고객님들의 진짜 후기를 만나보세요!" - 3컬럼 카드: - 차량 이미지 + 모델명 + 고객 닉네임 + 별점(★★★★★) + 후기 본문 + 작성일 2026-02-xx - 좌우 화살표 (더 많은 카드 순환 슬라이더) - 데이터 예시: 1. 테슬라 New Model Y — 오*중 고객님 — "아침 일찍 타고 있던 차량 계약기간이 끝나서 상담받다가 바빠서 연락이 잘 안되어..." 2. 기아 디 올 뉴 셀토스 — 이*화 고객님 — "신용등급이 덜 좋지만 걱정과 달리하였습니다..." 3. 제네시스 GV70 — 주*치 고객님 — "다른데 계약했을때 실수가 너무 많아서 힘들었는데..." - 하단 CTA: "계약 후기 더보기 +" ### 5.12 다타랩 공식 제휴사 (`#partners`) - 밝은 배경. - 타이틀: **다타랩 공식 제휴사** - 서브: "국내 1위!! 국내 최대 제휴로 실시간 특가견적을 안내드립니다." - 로고 그리드 (6×3 데스크톱, 3×6 모바일): KB캐피탈, SK렌터카, 하나캐피탈, 우리금융캐피탈, NH농협캐피탈, KDB캐피탈, iM캐피탈, BNK캐피탈, ORIX, MG캐피탈, 신한카드, 메리츠캐피탈, MIRAE ASSET, SAMSUNG 삼성카드, 롯데캐피탈, DGB캐피탈, 우리카드, JB우리캐피탈 - 원본 시안에서 crop하여 사용, 배경 제거된 PNG가 최선이지만 품질이 낮으면 JPG 유지. ### 5.13 푸터 + 상담 전화 (`#footer`) - 다크 배경. - 좌측: 회사 정보 - 링크: 이용약관 | 개인정보 처리방침 | 이메일무단수집거부 - 법인명: (주)지에이아이 / 대표이사: 하재준 - 주소: 강남 본점 주소 - 서울 강남구 봉은사로322 젤트월딩 6층 - 전화: 862-88-00653 - 통신판매업번호: 2020-서울강남-0186 - © GNA. All Rights Reserved. - 서브 로고 "지에이에이" - 우측: 상담 CTA - "편하게 물어보세요" - "평일: 오전 9시 ~ 오후 10시" - **1600-6384** (큰 타이포, 클릭 시 `tel:` 링크) - "상담 시 제공되는 특별한 할인 혜택을 확인하세요!" - 남성 모델 이미지 (손가락으로 가리키는 포즈) ## 6. 인터랙션 상세 | 기능 | 트리거 | 동작 | 구현 | |------|--------|------|------| | 모바일 메뉴 | 햄버거 클릭 | 우측 슬라이드 인 + 배경 디머 | CSS transform + `aria-expanded` | | 스무스 스크롤 | 앵커 `` 클릭 | `scrollIntoView({behavior: 'smooth'})` | `main.js` 위임 리스너 | | 헤더 축소 | scrollY > 80 | 패딩 축소, 배경 불투명 증가 | `scroll` 이벤트 + rAF 스로틀 | | 카운터 애니메이션 | 섹션 50% 가시 | 0 → target 1.5s ease-out | IntersectionObserver | | 섹션 페이드인 | 섹션 진입 | `opacity 0→1`, `translateY 20→0` | IntersectionObserver + CSS class | | 후기 영상 슬라이더 | 좌우 버튼 / 드래그 | 가로 스크롤 + 스냅 | `scroll-snap-type: x mandatory` + 버튼은 `scrollBy` | | 차량 카드 호버 | 포인터 진입 | `transform: translateY(-4px)`, 그림자 | CSS `:hover` | | 폼 검증 | submit | 필수 필드 비어있으면 테두리 빨강 + 메시지 | native `required` + 커스텀 핸들러 | | prefers-reduced-motion | 시스템 설정 | 애니메이션 비활성 | `@media (prefers-reduced-motion: reduce)` | ## 7. 접근성 - 랜드마크: `
`, `
`, `