Awwwards 수상 수준 인터랙티브 랜딩 페이지

작성일: 2026-03-07 대상: index.html (현재 1319줄) 기술 제약: Vanilla JS, No build tools, No Service Worker, GitHub Pages

---

현재 상태

• inline CSS 895줄, inline JS 112줄
• 외부: design-system.css (1701줄), animations.js (507줄), app.js (300줄), scroll-effects.js
• 섹션: Hero(orb+shimmer) → Compass(bento) → Trinity(SVG) → Pentagon → Broadcast → Gate(fingerprint) → Footer
• 이미 있는 것: magneticButton(), tiltCard(), splitTextAnimate(), typewriter(), glitchText()

---

Phase 1: 첫인상 — Preloader + Hero + Navigation

1-1. Preloader Sequence

전체 화면 로딩 → 로고/텍스트 reveal → 메인 콘텐츠 등장
- CSS counter (0→100%) 또는 asset 로딩 추적
- 완료 시 clipPath circle → full reveal 트랜지션
- 3초 내 완료 보장 (fallback: 강제 dismiss)

1-2. Hero Text Split Reveal

현재: shimmer 텍스트 단순 등장
개선:
- 글자 단위 분할 → stagger 등장 (each 0.03s delay)
- Web Animations API (이미 animations.js에 있음)
- 스크롤 시 글자 단위 parallax 분산
- 배경 orb → Canvas 2D 파티클로 교체 (성능 + 인터랙티브)

1-3. Canvas Particle Background

Hero 섹션 배경:
- Canvas 2D 파티클 시스템 (100~200개)
- 마우스/터치 위치에 반응 (인력/척력)
- 색상: design-system.css --forest, --gold 토큰 사용
- requestAnimationFrame 기반, 뷰포트 밖 정지

1-4. Fullscreen Mobile Menu

현재: 없음 (모바일 네비게이션 부재)
구현:
- 햄버거 → X 모프 애니메이션
- 전체화면 오버레이 (backdrop-filter: blur)
- 메뉴 항목 stagger reveal (위→아래)
- 각 항목 hover → 배경 이미지/색상 변화

1-5. Magnetic CTA Button

현재: magneticButton() 존재하지만 미적용
개선:
- Hero CTA에 적용
- 호버 시 버튼이 커서 방향으로 끌려감 (15px 범위)
- 클릭 시 ripple + scale 피드백
- 글로우 효과 (box-shadow pulse)

---

Phase 2: 섹션 인터랙션 — Scroll + Cards + SVG

2-1. Scroll-triggered Stagger Animation

각 섹션 진입 시:
- IntersectionObserver (threshold 0.2)
- 자식 요소들 순차 등장 (stagger 0.08s)
- translateY(40px) + opacity 0 → 0 + 1
- 한 번만 실행 (once: true)

2-2. Compass Bento Grid — 3D Tilt Cards

현재: tiltCard() 존재
개선:
- 5개 bento 카드에 3D tilt 적용
- perspective: 1000px, rotateX/Y ±15deg
- 호버 시 내부 요소 translateZ 분리 (다층 효과)
- 그림자 동적 이동 (tilt 방향 반대)
- 모바일: tilt 비활성, 탭 시 scale 효과만

2-3. Trinity SVG — Draw Animation

현재: 정적 SVG 삼각형
개선:
- stroke-dasharray + dashoffset 애니메이션
- 스크롤 진입 시 삼각형 한 획씩 그려짐
- 각 꼭짓점 도달 시 라벨 fade-in
- 완성 후 fill opacity 서서히 채움

2-4. Pentagon — Interactive SVG

현재: 정적 표시
개선:
- 5각형 각 꼭짓점 클릭/호버 가능
- 호버 시 해당 노드 확대 + 정보 tooltip
- 연결선 pulse 애니메이션
- Center(Parksy) → 나머지 4개 연결선 순차 등장

2-5. Counter Animation

숫자 표시 영역 (레포 수, 도구 수 등):
- 스크롤 진입 시 0 → 목표값 카운트업
- duration 2s, easeOutExpo
- 천 단위 콤마 자동 삽입

---

Phase 3: 마감 — Broadcast + Gate + Performance

3-1. Broadcast Card Hover Preview

현재: 카드 목록만
개선:
- 호버 시 카드 확대 (scale 1.05) + 프리뷰 텍스트 슬라이드
- 카드 간 hover 이동 시 배경색 부드럽게 전환
- 클릭 시 카드 → 전체화면 확장 트랜지션 (FLIP 기법)

3-2. Gate Section — Fingerprint Upgrade

현재: 지문 아이콘 + 버튼
개선:
- 지문 SVG path draw 애니메이션 (스크롤 연동)
- 터치/클릭 시 지문 인식 시뮬레이션 (pulse + color shift)
- 성공 연출 후 CTA 활성화
- 모바일: 실제 터치 시 진동 (navigator.vibrate)

3-3. Scroll Progress Bar

- 상단 고정 2px 바
- 스크롤 진행률 표시
- 색상: --gold gradient
- 섹션 경계에서 색상 전환

3-4. Smooth Scroll + Section Snap (선택적)

- CSS scroll-snap-type: y proximity (강제 아닌 유도)
- 섹션 간 부드러운 전환
- 모바일에서는 snap 비활성 (자연 스크롤 유지)

3-5. Performance Optimization

- Canvas 파티클: 뷰포트 밖 정지, 저사양 감지 시 비활성
- 애니메이션: prefers-reduced-motion 존중
- 이미지: loading="lazy"
- 폰트: font-display: swap
- IntersectionObserver 단일 인스턴스로 통합
- 모바일 tilt/parallax 자동 비활성

---

파일 구조 (예상)

eae-univ/
├── index.html                    # 구조만 (CSS/JS 외부화)
├── assets/
│   ├── css/
│   │   ├── design-system.css     # 기존 유지
│   │   └── landing.css           # (신규) 랜딩 전용 스타일
│   └── js/
│       ├── animations.js         # 기존 확장
│       ├── app.js                # 기존 유지
│       ├── scroll-effects.js     # 기존 확장
│       ├── particles.js          # (신규) Canvas 파티클
│       └── preloader.js          # (신규) 프리로더

---

구현 순서

1. inline CSS/JS → 외부 파일 분리 (기반 작업)
2. Preloader + Hero split text (Phase 1 핵심)
3. Canvas 파티클 배경 (Phase 1)
4. Scroll stagger + 3D tilt 적용 (Phase 2)
5. SVG draw 애니메이션 (Phase 2)
6. Gate fingerprint 업그레이드 (Phase 3)
7. Performance 최적화 (Phase 3)
8. 모바일 전용 조정 (전 Phase)

---

레퍼런스 수준

사이트	참고 요소
awwwards.com 수상작	전체 UX 흐름
stripe.com	그라데이션 + 미니멀
linear.app	다크 테마 + 애니메이션
vercel.com	타이포 + 스크롤
apple.com	제품 스토리텔링

---

이 문서는 구현 시작 시 Phase별로 체크리스트로 전환된다.