readme.md

🕯️ 프로젝트: 딥티크(Diptyque) 브랜드 클론 코딩

고급 향수 브랜드 '딥티크'의 웹사이트를 모티브로 한 프론트엔드 클론 코딩 프로젝트입니다. 브랜드 특유의 신비롭고 고급스러운 감성을 전달하기 위해 고해상도 이미지 활용과 부드러운 층별(Floor) 전환 인터랙션 구현에 집중했습니다.

🔗 프로젝트 링크

• Live Demo: 데모링크
• Original Site: 딥티크 공식 홈페이지

---

🛠 기술스택

• Language: HTML5, CSS3, JavaScript (Vanilla JS)
• Animation:
  • GSAP (Smooth Scrolling & Transitions)
  • CSS3 Transitions & Keyframes
• Tools: VS Code, Git

---

🚀 주요특징

1. 스토리텔링형 로딩 시퀀스

• 페이지 진입 시 브랜드 아이덴티티를 담은 로딩 애니메이션을 구현하여 리소스 로딩 대기 시간을 사용자 경험으로 승화시켰습니다.
• 이미지 프리로딩: 고해상도 리소스가 많은 특성을 고려하여, 메인 비주얼이 준비된 후 화면이 열리도록 제어했습니다.

2. 층별(Floor-based) 레이아웃 전환

• 1층부터 3층까지 구성된 독특한 수직 구조를 구현했습니다.
• Z-index & Opacity 제어: 사용자의 내비게이션 클릭에 따라 각 층의 레이어를 부드럽게 전환하며 공간감을 부여했습니다.

3. 제품 호버(Hover) 인터랙션

• 향수 제품 라인업에 마우스를 올리면 제품의 상세 이미지나 호버 전용 아트워크로 교체되는 효과를 적용했습니다.
• 단순한 이미지 교체가 아닌, 페이드 효과를 주어 브랜드의 부드러운 이미지를 유지했습니다.

4. 시각적 몰입감을 위한 배경 효과

• sky.jpg 등 배경 요소에 미세한 움직임을 주어 정적인 페이지에 생동감을 불어넣었습니다.

---

🔍 문제 해결 및 학습

1. 고해상도 이미지로 인한 렌더링 지연 해결

• 문제: 배경 및 제품 이미지가 고화질이라 페이지 로드 직후 레이아웃이 깨지거나 이미지가 뒤늦게 뜨는 현상 발생.
• 해결: window.onload와 로딩 스크린을 연동하여 모든 리소스가 로드된 시점에 인트로 애니메이션이 시작되도록 로직을 설계했습니다.

2. 절대 위치(Absolute) 요소들의 반응형 대응

• 문제: 이미지 기반의 고정 배치(position: absolute)가 많아 화면 해상도가 바뀔 때 요소들이 겹치는 문제 발생.
• 해결: px 단위 대신 vw, vh 등 뷰포트 상대 단위를 도입하고, 주요 중단점마다 미디어 쿼리를 세분화하여 레이아웃 무너짐을 방지했습니다.

3. 복잡한 층별 전환 로직 최적화

• 학습: 여러 개의 .floor 클래스를 관리하며 자바스크립트로 클래스를 토글할 때, 스타일 시트와 애니메이션 라이브러리 간의 간섭을 최소화하는 상태 관리 방식을 익혔습니다.

---

📂 프로젝트 구조

├── 1floor/         # 1층 관련 이미지 및 리소스
├── 2floor/         # 2층 제품 및 호버 이미지
├── 3floor/         # 3층 상세 정보 리소스
├── Loding/         # 로딩 시퀀스 전용 자원
├── intro/          # 인트로 슬라이드 이미지
├── index.html      # 메인 레이아웃
├── index.js        # 인터랙션 및 층 제어 로직
├── index.css       # 메인 스타일 및 애니메이션
└── reset.css       # 브라우저 스타일 초기화