001
장기렌트/리스 랜딩 페이지 시안 6종을 한 페이지에서 비교·확인할 수 있는 데모 갤러리입니다. 각 카드의 미리보기는 실제 페이지의 라이브 렌더링이며, 클릭하면 해당 시안이 새 탭에서 열립니다.
시안마다 구조와 수정 포인트가 다릅니다. 작업 전 해당 시안의 구조를 먼저 확인하고, 공통 사항 → 시안별 가이드 → 자주 묻는 변경 순서로 참고하세요.
빌드 도구는 사용하지 않습니다. 정적 파일이므로 다음 중 하나면 됩니다.
Live Server, python -m http.server, XAMPP htdocs/ 등file://)할 경우 007의 React/Babel은 CORS로 동작하지 않으니 반드시 정적 서버 사용v1.3.9 CDN (cdn.jsdelivr.net) — 인터넷 연결 필요_source/ (KakaoTalk 시안 원본). 섹션별 crop은 _preview/_preview/qa/에 desktop/tablet/mobile별로 저장각 시안의 CSS에서 일관되게 사용하는 breakpoint입니다.
~ 600px 모바일 / 601 ~ 1024px 태블릿 / 1025px ~ 데스크톱네 시안 모두 동일한 보일러플레이트에서 파생된 구조입니다. 시안별로 색상·이미지·섹션 구성만 다르고 파일 위치는 동일합니다.
00X/
├── index.html ← 마크업 (섹션 단위 <section>)
└── assets/
├── css/
│ ├── reset.css ← 리셋 + :root 디자인 토큰 (색상·간격·폰트 변수)
│ ├── layout.css ← 헤더·푸터·컨테이너·유틸리티
│ └── sections.css ← 섹션별 스타일 (대부분의 시각 변경은 여기)
├── js/
│ ├── main.js ← 메뉴 토글·슬라이더·스무스 스크롤·폼
│ └── counter.js ← IntersectionObserver 카운터 (004는 없음)
└── images/extracted/ ← 시안에서 crop한 이미지 자원assets/css/reset.css 상단 :root { --color-* / --space-* / --fs-* } 변수만 바꾸면 전 사이트에 반영assets/css/sections.css — 각 섹션에 BEM 유사 네이밍(.hero, .hero__inner) 사용index.html에 <section id="..."> 추가 → sections.css에 스타일 → 모바일 메뉴 <ul>에 앵커 링크 추가main.js 하단에 이벤트 바인딩. 카운터 추가 시 counter.js의 패턴(IntersectionObserver) 재사용assets/images/extracted/ 안에 동일 파일명으로 덮어쓰기 — HTML 수정 불필요메인·이벤트·이벤트 상세·후기·후기 상세·빠른 견적 6개 페이지로 구성된 시안입니다. 각 HTML이 자체 <style> 블록을 가지고 있고 일부 공통 스타일만 shared.css에 분리되어 있습니다.
006/
├── index.html, events.html, event-detail.html
├── reviews.html, review-detail.html, quick-quote.html
├── shared.css ← 헤더·푸터 등 페이지간 공통 스타일
└── uploads/<head> 안의 :root { --green-* / --ink-* } 변수. 모든 페이지를 함께 동기화해야 일관성이 유지됨shared.css에 정의되어 있으나, 마크업 자체는 각 HTML 파일에 중복되어 있어 6개 모두 수정 필요shared.css로 옮긴 뒤 각 HTML의 인라인 스타일을 제거하는 리팩터링을 먼저 고려하세요.빌드 단계 없이 브라우저에서 Babel이 JSX를 즉시 변환합니다. 데모/디자인 검토용이며 프로덕션 사용은 권장되지 않습니다.
007/
├── 드리브렌트 랜딩.html ← 진입 페이지 (React 마운트)
├── 스타일 탐색.html ← 스타일 가이드
├── styles.css ← 모든 컴포넌트 공통 스타일
├── design-canvas.jsx ← 별도 디자인 캔버스 (스탠드얼론)
└── components/
├── chrome.jsx ← Nav, MobileMenu
├── hero.jsx ← Hero 섹션
└── sections.jsx ← TrustBar, Cars, Features, Process, Plans, FAQ 등components/*.jsx에서 해당 컴포넌트 직접 수정 → 브라우저 새로고침styles.css에 클래스 단위로 작성. 컴포넌트 안 className="..."와 매칭components/에 foo.jsx 작성 → 드리브렌트 랜딩.html에 <script type="text/babel" src="components/foo.jsx"></script> 추가 → App JSX 안에 <Foo /> 배치드리브렌트 랜딩.html의 <script type="text/babel"> 안 App 컴포넌트에서 useState 사용%20 인코딩이 필요합니다 (드리브렌트%20랜딩.html). 빌드를 도입할 경우 Vite/Next.js로 마이그레이션 권장.| 변경 항목 | 001 ~ 004 | 006 | 007 |
|---|---|---|---|
| 브랜드 컬러 | assets/css/reset.css의 --color-* |
각 HTML :root의 --green-* 등 |
styles.css(또는 :root 변수) |
| 타이포 크기 | reset.css --fs-* |
각 HTML :root |
styles.css |
| 헤더 메뉴 항목 | index.html <nav> |
각 HTML 상단 <header> 마크업 |
components/chrome.jsx Nav |
| 히어로 카피 | index.html .hero 영역 |
index.html 상단 |
components/hero.jsx |
| 폼 검증·제출 | assets/js/main.js |
quick-quote.html <script> |
components/sections.jsx |
| 이미지 교체 | assets/images/extracted/ |
uploads/ |
uploads/ |
docs/superpowers/specs/의 설계 스펙(시안 001 한정)과 _source/ 원본 시안 대조_preview/qa/에 보관 (선택)