랜딩 페이지 빌더은(는) 무엇을 하나요?
개요
순수 HTML/CSS/JS로 아름답고 인터랙티브한 랜딩 페이지를 구축하기 위한 완전한 디자인 시스템 + 컴포넌트 라이브러리입니다. 프레임워크나 빌드 단계가 필요 없습니다. 재사용 가능한 CSS 디자인 토큰, JS 인터랙션 패턴, HTML 컴포넌트 템플릿으로 제공됩니다.
핵심 원칙: 디자인 시스템 파일을 복사하고, 컴포넌트 템플릿에서 섹션을 조합한 후 토큰을 커스터마이즈합니다. 모든 것은 종속성 없이 작동합니다 (선택사항: Google Fonts CDN).
사용 시기
- 제품 랜딩 페이지, 마케팅 사이트, 쇼케이스 구축
- 인터랙티브 요소가 포함된 문서 사이트 생성
- GitHub Pages, Netlify 또는 정적 호스트에 배포
- 다크/라이트 테마 전환, 스크롤 애니메이션, 툴팁 필요
- React/Vue/빌드 도구 없이 세련된 디자인 필요
사용하지 말아야 할 경우:
- 상태 관리가 필요한 복잡한 웹 앱 (프레임워크 사용)
- 서버 렌더링 페이지 (정적 전용)
- 내부 관리자 대시보드 (과도한 사양)
빠른 참조
| 컴포넌트 | 파일 | 주요 클래스 |
|---|---|---|
| 디자인 토큰 | design-system/design-system.css | :root 변수, --accent-*, --gradient-* |
| 내비게이션 바 | components-reference.html | .navbar, .nav-links, .lang-toggle |
| 히어로 | components-reference.html | .hero, .hero-title, .gradient-text, .hero-stats |
| 기능 카드 | components-reference.html | .feature-grid, .feature-card, .reveal |
| 코드 블록 | components-reference.html | .code-block, .code-header, .code-copy |
| 툴팁 | components-reference.html | .tooltip-trigger, [data-tooltip] |
| 탭 | components-reference.html | .tab-list, .tab-btn, .tab-panel |
| 테마 전환 | design-system.css + app-template.js | [data-theme], .icon-btn[data-toggle="theme"] |
| 언어 버튼 | design-system.css | .lang-toggle, .lang-btn[data-lang] |
| 스크롤 리빌 | app-template.js | .reveal → .visible (IntersectionObserver 사용) |
| i18n | app-template.js | [data-i18n] + 번역 사전 |
디자인 시스템
design-system.css는 두 테마 모두에 대한 완전한 토큰 세트를 제공합니다. 브랜드에 맞게 조정하세요. 자세한 내용은 파일을 읽어보세요.
design-system/design-system.css를 읽어 유지 관리되는 다크/라이트 토큰을 확인하고, 여기에 두 번째 토큰 목록을 유지하는 대신 요청된 브랜드에 맞게 조정하세요.
파일
| 파일 | 용도 |
|---|---|
design-system/design-system.css | 전체 CSS: 토큰, 내비게이션 바, 히어로, 카드, 코드 블록, 툴팁, 탭, 푸터, 반응형 |
design-system/app-template.js | JS: 스크롤 리빌, 내비게이션 바 스크롤, 코드 복사, 탭, 테마 전환, 모바일 메뉴, i18n |
design-system/components-reference.html | 복사하여 붙여넣기 가능한 HTML 스니펫이 포함된 모든 컴포넌트 |
templates/landing-template.html | 모든 섹션이 포함된 완전한 시작 템플릿 (와이어프레임) |
툴팁 패턴
툴팁은 데스크톱(호버) 및 모바일/터치(탭하여 전환)에서 작동합니다. 터치 지원을 위해 app-template.js가 필요합니다.
<!-- 위로 열림 (기본) -->
<span class="tooltip-trigger" data-tooltip="여기에 도움말 설명">
호버하세요
</span>
<!-- 아래로 열림 (페이지 상단 근처 트리거용) -->
<span class="tooltip-trigger tooltip-bottom" data-tooltip="설명">
호버하세요
</span>
<!-- 긴 텍스트를 위한 넓은 변형 (모바일에서 줄바꿈) -->
<span class="tooltip-trigger tooltip-wide" data-tooltip="더 긴 여러 줄 설명...">
호버하세요
</span>
데스크톱: CSS :hover가 툴팁을 표시합니다. 모바일/태블릿: JS가 탭하여 전환 및 외부 클릭 시 닫기 기능을 추가합니다. 키보드: Tab으로 포커스, Enter/Space로 전환, Escape로 닫습니다.
터치 및 키보드 경로는 트리거에서 .tooltip-active를 전환하여 작동합니다. 수동으로 작성하는 툴팁 CSS는 .tooltip-trigger:hover::after와 .tooltip-trigger.tooltip-active::after를 함께 스타일링해야 합니다. 그렇지 않으면 탭이 작동하지 않습니다. 직접 작성하기 전에 design-system/design-system.css의 섹션 10(툴팁)을 읽어보세요.
쌓임 순서: 툴팁은 .feature-card:hover, .code-block:hover, .callout:hover에서 z-index:10을 통해 컨테이너에서 벗어납니다. 해당 규칙을 유지하고, 하위 요소에 border-radius로 모서리를 둥글게 처리하세요 (.feature-card::before처럼). 컨테이너에 overflow:hidden을 설정하면 툴팁이 잘리고 z-index로도 해결할 수 없습니다.
빌드 워크플로우
design-system.css,app-template.js,templates/landing-template.html(이름을index.html로 변경)을 프로젝트에 복사합니다. 템플릿이 파일 이름으로 연결하므로 세 파일 모두 같은 위치에 두어야 합니다.components-reference.html에서 섹션을 추가합니다 (기능, 코드 블록, 탭, 콜아웃, 푸터 등).:root에서 토큰을 커스터마이즈합니다 (색상, 글꼴, 그라디언트).- HTML에 콘텐츠를 추가하고, 다국어인 경우
data-i18n키를 연결합니다. - 로컬에서 테스트합니다. 브라우저에서
index.html을 열고 아래 일반적인 실수 표의 모든 행을 확인합니다. 각 행이 통과하면 완료입니다. - 확인된 파일을 전달합니다. 요청 시에만 배포하며, 합의된 호스트 및 저장소 워크플로우를 따릅니다.
GitHub Pages에 배포
게시가 요청되면 기존 저장소 및 Pages 구성을 검사하고, 검토된 파일을 준비한 후 해당 배포 워크플로우를 따릅니다. 승인된 경우에만 공개 저장소를 만들거나 가시성을 변경합니다. 명명된 출력 파일을 스테이징하고, 관련 없는 작업은 보존합니다. 공개 URL을 보고하기 전에 배포된 리비전과 라이브 콘텐츠를 확인합니다. HTTP 200만으로는 시각적 증명이 되지 않습니다.
일반적인 실수
| 실수 | 해결 방법 |
|---|---|
| 메타 뷰포트 없음 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> 추가 |
<html>에 [data-theme] 누락 | 기본 테마를 위해 <html data-theme="dark"> 설정 |
| 리빌 요소가 보이지 않음 | app-template.js가 로드되었고 .reveal에 일치하는 .visible 로직이 있는지 확인 |
| 숨겨진 탭 패널 내부의 리빌 | 탭 전환 시 자동 리빌; 또는 탭 콘텐츠에서 .reveal 제거 |
| 툴팁이 상단에서 잘림 | 뷰포트 상단 근처 트리거에는 .tooltip-bottom 변형 사용 |
| 로드 시 테마 깜빡임 | 렌더링 전에 <head>에서 localStorage.getItem('lp-theme')를 data-theme에 읽어들이는 인라인 <script> — 이미 templates/landing-template.html에 있음 |
| No-JS 콘텐츠 보이지 않음 | <html>에 class="no-js" + .no-js .reveal { opacity:1 } 폴백 |
| 코드 복사가 작동하지 않음 | .code-copy 버튼이 존재하고 JS가 로드되었는지 확인 |
| 스타일이 적용되지 않은 콘텐츠 깜빡임 | 스타일시트 앞에 <head>에 글꼴 <link> 배치 |
| 포커스 스타일 누락 | 모든 인터랙티브 요소에 :focus-visible 아웃라인이 내장됨 |
접근성
디자인 시스템에는 다음이 포함됩니다:
- 모든 인터랙티브 요소에
:focus-visible아웃라인 (키보드 탐색) prefers-reduced-motion미디어 쿼리 (애니메이션 비활성화).no-js폴백 (JavaScript 없이도 콘텐츠 표시)- 아이콘 전용 버튼에 ARIA 레이블
- 의미론적 HTML 구조 (적절한 제목 계층)
- 테마 대비 토큰; WCAG 적합성을 주장하기 전에 커스터마이즈 후 대비를 확인하세요.