0001

HTML, CSS, JavaScript만 사용해서 단일 HTML 파일로 프리미엄 크리에이티브 디자인 스튜디오 웹사이트를 만들어줘. 스튜디오 이름은 "LUMIÈRE"이고, 프랑스어로 '빛'이라는 뜻이야. 한국어 + 영어 혼용 사이트이고, 전체적으로 어두운 다크 테마에 골드 포인트를 활용한 럭셔리 시네마틱 디자인으로 만들어줘.

프로그램 개요
총 10개 섹션으로 구성된 원페이지 스크롤 웹사이트야. 섹션 순서는 아래와 같아.

(1) Hero (전체화면 시네마틱 인트로) (2) About (스튜디오 소개 — 2컬럼 이미지+텍스트) (3) Services (서비스 카드 그리드) (4) Featured Work (전체화면 배경 이미지형 대표 프로젝트) (5) Portfolio (포트폴리오 갤러리 — 필터 + 비정형 그리드) (6) Parallax Quote (철학 인용 구간) (7) Process (작업 프로세스 타임라인) (8) Team (팀 멤버 소개) (9) Testimonials (클라이언트 후기 슬라이더) (10) Contact (2컬럼 — 이미지 + 문의 폼)

그리고 맨 아래에 Footer 넣어줘. 페이지 진입 시 로딩 화면도 있어야 하고, 커스텀 커서도 포함해줘.

기능
2-1. 로딩 화면 페이지 처음 열리면 다크 배경(#0a0a0f)에 "LUMIÈRE" 텍스트가 골드색으로 펄스(밝아졌다 어두워졌다) 애니메이션되고, 그 아래에 가로 200px짜리 골드 라인이 왼쪽에서 오른쪽으로 채워지는 프로그레스 바 애니메이션을 보여줘. 약 1.8초 후에 로딩 화면이 페이드아웃 되면서 사라지게 해줘.

2-2. 커스텀 커서 마우스 포인터를 골드색 원형 테두리(20px)로 대체해줘. mix-blend-mode: difference 적용해줘. 링크, 버튼, 카드, 포트폴리오 아이템 위에 올리면 커서가 2.5배로 커지면서 반투명해지게 해줘. pointer: fine 미디어쿼리로 터치 디바이스에서는 커스텀 커서 숨겨줘.

2-3. 네비게이션 상단 고정 네비게이션 바를 만들어줘. 왼쪽에 "LUMIÈRE" 로고(세리프, letter-spacing 넓게, 골드색), 오른쪽에 메뉴 링크들(About, Services, Portfolio, Process, Team, Contact) 배치해줘. 스크롤 80px 이상 내려가면 네비게이션 배경이 반투명 다크 + backdrop-filter blur(20px)로 바뀌면서 패딩이 줄어드는 효과 넣어줘. 하단에 미세한 골드 반투명 보더도 생기게 해줘. 768px 이하 모바일에서는 메뉴 링크 숨기고 햄버거 버튼(가로선 3개, 클릭 시 X자로 변하는 애니메이션) 보여줘. 햄버거 누르면 전체화면 반투명 다크 모바일 메뉴가 backdrop-filter blur와 함께 나타나고, 메뉴 항목은 Playfair Display 세리프로 크게 표시해줘. 메뉴 클릭하면 닫히게 해줘. 모든 앵커 링크에 부드러운 스크롤 적용해줘. 메뉴 링크에는 호버 시 아래에서 펼쳐지는 골드색 언더라인 효과 넣어줘.

2-4. 스크롤 애니메이션 (Reveal) 아래에서 위로 올라오면서 페이드인 되는 reveal 애니메이션을 만들어줘. IntersectionObserver 사용하고, 같은 섹션 안에서도 요소마다 0.1초~0.4초씩 딜레이를 줘서 순차적으로 나타나게 해줘.

2-5. 숫자 카운트업 애니메이션 About 섹션의 통계 숫자들이 뷰포트에 들어오면 0에서 목표 숫자까지 카운트업 되는 애니메이션을 넣어줘. 숫자 뒤에 '+' 기호도 붙여줘. IntersectionObserver로 한 번만 실행되게 해줘.

2-6. 패럴랙스 효과 인용 구간의 배경 이미지가 스크롤 시 느리게 따라오는 패럴랙스 효과를 넣어줘. 배경 이미지 영역을 상하 20%씩 넓게 잡아서 스크롤 시 자연스럽게 움직이게 해줘.

2-7. 후기 슬라이더 3개의 후기를 한 번에 1개씩 보여주는 수평 슬라이드 방식으로 만들어줘. 좌/우 화살표 버튼과 하단 도트 인디케이터를 넣어줘. 6초마다 자동으로 다음 슬라이드로 넘어가게 해줘. 도트 클릭으로도 특정 슬라이드로 이동 가능하게 해줘.

2-8. 포트폴리오 필터 포트폴리오 섹션에 카테고리 필터 버튼(All, Branding, Digital, Space, Photography)을 넣어줘. 버튼 클릭 시 해당 카테고리만 보이고 나머지는 축소+페이드아웃 후 display none 처리해줘. 활성 필터 버튼은 골드색 테두리+텍스트로 강조해줘.

2-9. 이미지 라이트박스 포트폴리오 아이템 클릭 시 전체화면 어두운 오버레이(95% 불투명) 위에 이미지를 크게 보여주는 라이트박스를 띄워줘. 우상단에 닫기(×) 버튼 넣고, 오버레이 클릭이나 ESC 키로도 닫히게 해줘. 라이트박스 열리면 body 스크롤 잠금해줘.

2-10. 문의 폼 Name(필수), Email(필수), Project Type, Message(필수) 4개 필드로 만들어줘. 입력 필드는 하단 보더만 있는 미니멀 스타일, 포커스 시 골드색으로 변하게 해줘. 제출하면 버튼 텍스트가 "Sent Successfully!"로 바뀌면서 배경이 초록색(#4CAF50)으로 변하고, 3초 후 원래대로 복구되면서 폼 리셋해줘.

2-11. Back to Top 버튼 스크롤 600px 이상 내려가면 우하단에 골드 원형 위 화살표(↑) 버튼이 페이드인 되어 나타나게 해줘. 클릭 시 부드럽게 최상단으로 스크롤해줘. 호버 시 위로 살짝 올라가면서 그림자가 강해지는 효과 넣어줘.

디자인
3-1. 컬러 팔레트 메인 배경: #0a0a0f (깊은 다크) 보조 배경: #1a1a2e (네이비 다크) 골드 포인트: #c9a96e (메인 강조색) 밝은 골드: #e8d5a8 화이트: #ffffff 오프화이트: #f8f6f1 (프로세스 섹션 라이트 배경) 회색 텍스트: #8a8a9a 연한 회색: #c4c4d0

3-2. 서체 Google Fonts에서 아래 3개 불러와줘. Playfair Display (400, 700, 900, italic 포함) → 제목, 장식 텍스트용 Inter (300~700) → 본문, UI용 Noto Sans KR (300~700) → 한글용 기본 body 서체는 'Inter', 'Noto Sans KR', sans-serif로 해줘.

3-3. 전체 톤앤무드 시네마틱하고 고급스러운 디자인 스튜디오 느낌. 어둡고 깊은 배경 위에 골드 포인트가 돋보이게 해줘. 여백을 넉넉하게 쓰고, 섹션 제목 위에는 항상 작은 태그(영문 대문자, 골드색, letter-spacing 넓게)를 넣어줘. 제목 아래에는 60px 골드 가로선 구분자를 넣어줘. cubic-bezier(0.25, 0.46, 0.45, 0.94) 이징 커브를 기본으로 써줘.

3-4. 이미지 처리 스타일 About 섹션 이미지에는 15px 오프셋된 골드색 테두리 프레임 장식(::after)을 넣어줘. 팀 멤버 사진은 기본 grayscale(40%) 적용, 호버 시 컬러 복원 + 미세 확대. 포트폴리오 아이템 호버 시 1.08배 확대 + 하단 그라디언트 오버레이 위에 프로젝트 정보 표시.

3-5. 각 섹션 디자인 상세

(1) Hero 전체 화면(100vh), 배경 이미지(center/cover) 위에 하단으로 갈수록 짙어지는 어두운 그라디언트 오버레이. 중앙 정렬 텍스트로 "Creative Design Studio" 서브타이틀(골드, letter-spacing 넓게), "Art Meets Vision" 큰 타이틀(Vision은 이탤릭 + 골드), 한글 설명, "Explore Works" CTA 버튼(골드 테두리, 호버 시 골드 배경 채워짐, 인라인 SVG 화살표 포함). 하단 중앙에 "Scroll" 텍스트와 아래로 흐르는 골드 세로 라인 애니메이션. 히어로 콘텐츠 각 요소는 순차적으로 아래에서 올라오는 페이드인 애니메이션(0.5초 간격).

(2) About 다크 배경, 2컬럼 그리드(이미지 / 텍스트). 왼쪽에 3:4 비율 이미지(호버 시 미세 확대), 이미지 우하단에 15px 오프셋된 골드 테두리 프레임 장식. 오른쪽에 섹션 태그, 한글 제목, 골드 구분선, 한글 설명 2단락, 그 아래 3컬럼 통계(150+ Projects, 10+ Years, 35+ Awards). 통계 숫자는 Playfair Display 세리프, 골드색.

(3) Services 네이비 다크(#1a1a2e) 배경. 중앙 정렬 헤더(태그 + 한글 제목 + 구분선 + 한글 설명). 3컬럼 카드 그리드, 6개 서비스. 각 카드에 반투명 배경 + 미세 골드 테두리, 큰 번호(01~06, 골드 15% 투명도), 서비스명(세리프), 한글 설명. 호버 시 상단에서 골드 라인이 가로로 펼쳐지고 카드가 위로 5px 이동, 테두리가 골드빛으로 강해짐. 서비스: Brand Identity, Digital Experience, Space Design, Art Direction, Photography, Motion & Film.

(4) Featured Work 전체화면(100vh), 배경 이미지(center/cover) 위에 좌측에서 우측으로 갈수록 밝아지는 어두운 그라디언트 오버레이. 좌측 정렬 콘텐츠(최대 650px)로 섹션 태그, 영문 프로젝트 타이틀("Ethereal Horizons"), 골드 구분선, 한글 프로젝트 설명, "View Project" CTA 버튼.

(5) Portfolio 다크 배경, 중앙 정렬 헤더, 카테고리 필터 버튼 바. 4컬럼 비정형 그리드로 6개 프로젝트(일부는 세로 2행 차지 tall, 일부는 가로 2열 차지 wide). 각 아이템은 1:1 비율(tall/wide 제외), 호버 시 이미지 확대 + 하단에서 올라오는 어두운 그라디언트 위에 프로젝트명(세리프) + 카테고리(골드) 표시. 클릭 시 라이트박스 오픈.

(6) Parallax Quote 높이 70vh, 배경 이미지에 패럴랙스 효과, 어두운 반투명 오버레이(60%). 중앙에 한글 명언(세리프 이탤릭, "디자인은 단순히 어떻게 보이느냐가 아닙니다. 어떻게 작동하느냐의 문제입니다."), 아래에 "— Steve Jobs" (골드색).

(7) Process 오프화이트(#f8f6f1) 밝은 배경, 다크 텍스트. 중앙 정렬 헤더. 세로 타임라인 형태로 4단계(Discovery, Concept, Design, Delivery). 중앙에 세로선, 각 단계마다 원형 골드 도트. 홀수 단계는 좌측, 짝수 단계는 우측에 콘텐츠 배치. 각 단계에 큰 번호(골드 30% 투명도), 단계명(세리프), 한글 설명. 1024px 이하에서는 타임라인을 좌측 정렬로 변경.

(8) Team 다크 배경, 중앙 정렬 헤더, 4컬럼 그리드. 각 카드에 3:4 비율 이미지(grayscale 40% 기본, 호버 시 컬러 복원 + 미세 확대), 아래에 한글 이름(세리프) + 영문 역할(골드색). 팀원 4명.

(9) Testimonials 네이비 다크 배경. 중앙 정렬 헤더. 1개씩 보이는 수평 슬라이더, 세리프 이탤릭 후기 텍스트(연한 회색), 작성자 이름(볼드), 직함(골드). 하단에 좌/우 사각형 화살표 버튼(골드 테두리, 호버 시 골드 배경 채워짐) + 도트 인디케이터.

(10) Contact 다크 배경, 2컬럼(이미지 / 폼), 패딩 없이 꽉 차는 레이아웃. 왼쪽에 풀 높이 이미지 + 살짝 어두운 오버레이. 오른쪽에 중앙 정렬된 폼 영역(최대 500px)에 섹션 태그, 한글 제목, 구분선, 한글 설명, 폼 필드 4개(하단 보더 미니멀), 풀 너비 제출 버튼(골드 배경 + 다크 텍스트, 호버 시 밝은 골드 + 위로 살짝 이동 + 골드 그림자).

Footer 상단 미세 골드 반투명 보더, 4컬럼(브랜드+설명 2fr / Navigation 1fr / Services 1fr / Contact 1fr). 하단에 저작권(© 2026 Lumière Studio) 왼쪽, 소셜 링크(Instagram, Behance, LinkedIn, Vimeo) 오른쪽. 링크 호버 시 골드색 변환.

3-6. 이미지 실제 이미지는 placeholder로 넣어줘. 적절한 무료 이미지 URL이 없으면 빈 이미지 태그로 두거나, 그라디언트 배경으로 대체해줘.

기술
4-1. 기본 구조 단일 HTML 파일 하나에 CSS(style 태그)와 JavaScript(script 태그) 모두 포함해줘. 외부 라이브러리나 프레임워크 절대 사용하지 말고, 순수 HTML + CSS + Vanilla JS로만 만들어줘. Google Fonts CDN만 외부 링크 허용.

4-2. CSS 관련 CSS 변수(Custom Properties)로 컬러, 서체, 이징 커브 등 모두 관리해줘. scrollbar도 accent + dark 조합으로 커스텀 스타일링해줘. 반응형은 1024px, 768px, 480px 세 구간으로 미디어쿼리 작성해줘. 1024px 이하: About/Contact 1컬럼, Services 2컬럼, Portfolio 2컬럼, Team 2컬럼, 타임라인 좌측 정렬. 768px 이하: 햄버거 메뉴 활성화, Services 1컬럼, Portfolio 2컬럼(tall/wide 해제), Featured 콘텐츠 패딩 축소, 섹션 패딩 축소. 480px 이하: Portfolio/Team 1컬럼, 통계 1컬럼.

4-3. JavaScript 관련 IntersectionObserver로 스크롤 reveal 애니메이션과 카운터 애니메이션, scroll 이벤트로 네비게이션 상태 변화, Back to Top 버튼 표시, 패럴랙스 효과 처리. 이벤트 위임과 querySelectorAll 등 기본 DOM API만 사용. 별도 번들러 없이 전역 스코프에서 동작.

추가 조건 언어는 한국어 위주, 섹션 태그·메뉴·버튼 텍스트·서비스명 등은 영어로 해줘. HTML lang="ko"로 설정해줘. 콘텐츠 최대 너비는 1400px, 섹션 좌우 패딩 3rem 기본. 버튼 화살표는 인라인 SVG로 직접 넣어줘. 모든 transition에 일관된 이징 커브 적용하고 호버 효과는 부드럽게. 코드에 영역별로 주석 넣어줘. 실제 서버 없이 로컬에서 HTML 파일 하나만 열어도 완전하게 동작해야 해.