0033

HTML, CSS, JavaScript만 사용해서 단일 HTML 파일로 프리미엄 디지털 아트 스튜디오 웹사이트를 만들어줘. 스튜디오 이름은 "ATELIER"이고, 전체적으로 모던 다크/라이트 대비 테마에 레드 코럴(#ff6b6b) 포인트를 활용한 미니멀 하이엔드 디자인으로 만들어줘.

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

(1) Hero (전체화면 이미지 갤러리 슬라이더) (2) About (스튜디오 소개 — 스플릿 레이아웃) (3) Works (포트폴리오 메이슨리 그리드 + 필터링) (4) Process (작업 프로세스 — 타임라인) (5) Team (팀 멤버 소개) (6) Video (풀스크린 비디오 섹션) (7) Contact (문의 폼 + 연락처) (8) Footer

그리고 페이지 진입 시 로딩 화면도 있어야 해.

기능
2-1. 로딩 화면 페이지 처음 열리면 짙은 다크(#1a1a1a) 배경에 "ATELIER" 텍스트가 한 글자씩 아래에서 위로 순차적으로 올라오는 애니메이션을 보여줘. 각 글자마다 0.1초씩 딜레이를 줘서 웨이브 느낌으로. 약 1.5초 후에 로딩 화면이 페이드아웃 되면서 사라지게 해줘.

2-2. 네비게이션 상단 고정 네비게이션 바를 만들어줘. 왼쪽에 "ATELIER" 로고(세리프, 굵게), 오른쪽에 메뉴 링크들(Home, About, Works, Process, Team, Contact) 배치해줘. Hero 영역에서는 mix-blend-mode: difference를 적용해서 텍스트가 흰색으로 보이게 하고, 스크롤 100px 이상 내려가면 반투명 크림 배경 + backdrop-filter blur로 전환되면서 mix-blend-mode를 해제하고 텍스트를 다크로 바꿔줘. 768px 이하 모바일에서는 메뉴 링크 숨기고 햄버거 버튼(2줄 라인, X로 트랜지션) 보여줘. 햄버거 누르면 전체화면 모바일 메뉴가 슬라이드로 나타나게 해줘. 모든 앵커 링크에 부드러운 스크롤 적용해줘.

2-3. 스크롤 애니메이션 (Reveal) .reveal 클래스가 붙은 요소들이 스크롤 시 뷰포트에 진입하면 아래에서 위로 60px 올라오면서 페이드인되는 애니메이션을 적용해줘. IntersectionObserver 사용하고, threshold 150px 여유를 둬서 진입 전에 미리 트리거 되게 해줘.

2-4. Hero 이미지 갤러리 슬라이더 전체화면(100vw × 100vh) 배경 이미지 슬라이더를 만들어줘. 4장의 이미지가 translateX로 슬라이드 전환되고, 각 이미지는 활성화 시 scale(1.1)에서 scale(1)로 천천히(8초) 줌아웃되는 켄번스 효과를 넣어줘. 하단 중앙에 가로 막대형 도트 네비게이션(60px 너비 막대, 활성화 시 왼쪽에서 오른쪽으로 흰색이 채워지는 프로그레스 애니메이션 3초)을 배치해줘. 5초 간격으로 자동 재생하고, 도트 클릭 시 수동 이동 + 자동 재생 타이머 리셋. 이미지 위에 중앙 정렬로 "DIGITAL ATELIER" 큰 타이틀(mix-blend-mode: difference, 흰색)과 "Where Art Meets Technology" 서브타이틀(대문자, letter-spacing 넓게) 오버레이해줘.

2-5. 필터 기능 Works 섹션에 All, Branding, Web Design, Motion, Digital Art 5개 필터 탭을 만들어줘. 탭은 둥근 pill 형태 버튼이고, 활성화/호버 시 다크 배경 + 흰 텍스트로 변해. 탭 클릭 시 해당 카테고리의 작품만 표시하고 나머지는 opacity 0으로 페이드아웃 후 display none 처리해줘.

2-6. 비디오 섹션 배경에 자동재생 + 음소거 + 루프 비디오를 깔고, 반투명 검정 오버레이를 씌워줘. 중앙에 "Watch Our Story" 제목과 원형 재생 버튼(테두리 + 블러 배경)을 배치해줘. 재생 버튼 클릭하면 비디오 재생/일시정지 토글하고, 아이콘이 재생↔일시정지로 전환되게 해줘.

2-7. 문의 폼 Your Name(필수), Email Address(필수), Project Type, Tell us about your project(필수) 4개 필드로 만들어줘. 입력 필드는 반투명 배경 + 미세 테두리의 라운드 스타일, 포커스 시 배경이 살짝 밝아지면서 테두리가 진해지게 해줘. 제출하면 alert로 감사 메시지 띄우고 폼 리셋해줘.

2-8. 마그네틱 버튼 효과 제출 버튼, 재생 버튼, 필터 탭에 마우스 위치에 따라 버튼이 살짝 따라오는 마그네틱 효과를 넣어줘. mousemove 시 마우스 위치 기준으로 버튼 중심과의 차이를 계산해서 0.3배 만큼 translate 적용하고, mouseleave 시 원래 위치로 복귀해줘.

디자인
3-1. 컬러 팔레트 메인 다크: #1a1a1a 액센트: #ff6b6b (레드 코럴) 텍스트 연한: #666 텍스트 진한: #111 밝은 배경: #fafafa 크림 배경: #f5f2ed 순백: #ffffff

3-2. 서체 Google Fonts에서 아래 2개 불러와줘. Playfair Display (400, 700, 900) → 제목, 히어로 타이틀, 장식 텍스트용 Inter (300~700) → 본문, UI, 네비게이션용 기본 body 서체는 'Inter', sans-serif로 해줘.

3-3. 전체 톤앤무드 다크/라이트 대비가 강하면서도 세련된 디지털 아트 스튜디오 느낌. 히어로는 다크 배경에 풀스크린 이미지, 나머지 섹션들은 크림과 화이트 배경을 교차 사용해줘. 전체적으로 cubic-bezier(0.4, 0, 0.2, 1) 이징 커브를 기본으로 써줘. 커스텀 스크롤바는 8px 너비, 다크 thumb에 라운드 처리. scroll-snap-type: y proximity로 섹션 스냅 느낌을 가볍게 넣어줘.

3-4. 이미지 처리 스타일 포트폴리오 아이템은 라운드 10px, 호버 시 1.1배 확대 + 하단에서 올라오는 어두운 그라디언트 오버레이 위에 작품명과 카테고리가 translateY(20px→0)으로 슬라이드인 되게 해줘. 팀 멤버 사진은 라운드 20px, 기본 grayscale(100%), 호버 시 컬러 복원 + 미세하게 0.98배 축소되는 독특한 효과. About 이미지도 라운드 20px, 호버 시 1.05배 확대.

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

(1) Hero 전체화면(100vh), 다크 배경. 4장의 이미지가 가로 슬라이드로 전환되는 풀스크린 갤러리. 이미지 위 정중앙에 "DIGITAL" + 줄바꿈 + "ATELIER" 초대형 타이틀(Playfair Display, 900 weight, clamp(4rem, 12vw, 10rem), mix-blend-mode: difference, letter-spacing -0.05em). 아래에 "Where Art Meets Technology" 서브타이틀(대문자, letter-spacing 0.2em, 300 weight, 살짝 투명). 하단 중앙에 가로 막대형 프로그레스 도트 네비게이션. 사용 이미지:

슬라이드 1: https://cdn.midjourney.com/e2961bd3-5f3e-4df5-97b0-372cde33881e/0_3.png
슬라이드 2: https://cdn.midjourney.com/921d92cb-996f-4d3a-aa06-257595ab9574/0_1.png
슬라이드 3: https://cdn.midjourney.com/7e67b738-f518-4963-ab7f-0f6aee68631f/0_0.png
슬라이드 4: https://cdn.midjourney.com/a727665f-52bb-4f12-8ab5-a14de7d37fa0/0_0.png
(2) About 크림(#f5f2ed) 배경, 2컬럼 그리드(텍스트 / 이미지), gap 80px. 왼쪽에 Playfair Display 대형 제목 "We craft digital experiences that inspire", 설명 텍스트 2단락, 아래에 2×2 통계 그리드(150+ Projects Completed, 50+ Happy Clients, 25+ Team Members, 15+ Awards Won — 숫자는 레드 코럴, 라벨은 대문자 작은 텍스트). 오른쪽에 라운드 20px 이미지(높이 600px). 사용 이미지:

About 이미지: https://cdn.midjourney.com/6f1e16bb-1c36-4d96-a63a-07d287befbb5/0_0.png
(3) Works 화이트(#fff) 배경, 중앙 정렬 헤더에 "Selected Works" 제목 + 필터 탭. 아래에 메이슨리 스타일 그리드(auto-fit, minmax 350px). 작품 8개를 배치하되 일부는 large(2컬럼×2행), tall(1컬럼×2행), wide(2컬럼×1행) 클래스로 다양한 크기를 줘. 각 작품에 호버 오버레이(하단 그라디언트 + 작품명 + 카테고리 슬라이드인). 사용 이미지:

Work 1 (Branding, large): https://cdn.midjourney.com/e2961bd3-5f3e-4df5-97b0-372cde33881e/0_0.png
Work 2 (Web Design): https://cdn.midjourney.com/e2961bd3-5f3e-4df5-97b0-372cde33881e/0_1.png
Work 3 (Digital Art, tall): https://cdn.midjourney.com/e2961bd3-5f3e-4df5-97b0-372cde33881e/0_2.png
Work 4 (Motion): https://cdn.midjourney.com/921d92cb-996f-4d3a-aa06-257595ab9574/0_0.png
Work 5 (Branding, wide): https://cdn.midjourney.com/921d92cb-996f-4d3a-aa06-257595ab9574/0_2.png
Work 6 (Web Design): https://cdn.midjourney.com/921d92cb-996f-4d3a-aa06-257595ab9574/0_3.png
Work 7 (Digital Art): https://cdn.midjourney.com/7e67b738-f518-4963-ab7f-0f6aee68631f/0_1.png
Work 8 (Motion, tall): https://cdn.midjourney.com/7e67b738-f518-4963-ab7f-0f6aee68631f/0_2.png
(4) Process 크림(#f5f2ed) 배경, 중앙 정렬 "Our Process" 제목. 세로 타임라인으로 4단계 표시 — 중앙에 세로 라인(#ddd, 2px), 라인 위에 레드 코럴 원형 도트(30px, 크림색 바깥 그림자 링). 단계가 좌우 교대로 배치(홀수 왼쪽, 짝수 오른쪽). 각 단계는 흰 카드(라운드 20px, 그림자, 호버 시 위로 10px 이동)에 큰 반투명 번호(01~04) + 제목 + 설명. 단계: Discovery, Design, Development, Launch.

(5) Team 화이트(#fff) 배경, 중앙 정렬 "Meet Our Team" 제목. 4컬럼 그리드(auto-fit, minmax 300px). 각 카드는 중앙 정렬, 이미지(라운드 20px, 높이 400px, 기본 grayscale 100%, 호버 시 컬러 복원 + scale 0.98), 아래에 이름 + 역할(대문자). 팀원 4명: Alex Chen / Creative Director, Sarah Johnson / Lead Designer, Marcus Williams / Tech Lead, Emma Davis / Motion Designer. 사용 이미지:

Alex Chen: https://cdn.midjourney.com/435bc734-6093-48be-8671-a03dac8c0646/0_0.png
Sarah Johnson: https://cdn.midjourney.com/435bc734-6093-48be-8671-a03dac8c0646/0_1.png
Marcus Williams: https://cdn.midjourney.com/435bc734-6093-48be-8671-a03dac8c0646/0_2.png
Emma Davis: https://cdn.midjourney.com/435bc734-6093-48be-8671-a03dac8c0646/0_3.png
(6) Video 전체화면(100vh), 배경에 자동재생 음소거 루프 비디오 + 반투명 검정(50%) 오버레이. 중앙에 "Watch Our Story" 제목(흰색, Playfair Display) + 설명 텍스트 + 원형 재생 버튼(100px, 반투명 흰색 배경 + 흰 테두리, 블러 효과, 호버 시 1.1배 확대). 사용 비디오:

배경 비디오: 적절한 무료 비디오 URL이 없으면 빈 비디오 태그로 두거나, 다크 그라디언트 배경으로 대체해줘.
(7) Contact 다크(#1a1a1a) 배경, 흰색 텍스트. 2컬럼 그리드(정보 / 폼). 왼쪽에 "Let's create something amazing together" 대형 제목, 설명, 연락처 정보(Email: hello@atelier.studio, Phone: +1 (555) 123-4567, Address: 123 Creative Street, San Francisco, CA 94107). 오른쪽에 반투명 카드(rgba 흰색 10% + 블러, 라운드 20px, 패딩 60px)에 폼 4개 필드 + 제출 버튼(흰 배경, 다크 텍스트, 호버 시 위로 2px + 그림자).

(8) Footer 검정(#000) 배경, 중앙 정렬. 소셜 링크들(Instagram, Behance, Dribbble, LinkedIn, Twitter) 가로 나열, 아래에 "© 2025 ATELIER. All rights reserved." 카피라이트.

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

4-2. CSS 관련 CSS 변수(Custom Properties)로 컬러, 서체, 이징 커브 등 관리해줘. 반응형은 1024px, 768px, 480px 세 구간으로 미디어쿼리 작성해줘. 1024px 이하: About/Contact 1컬럼, 타임라인 세로 라인 숨김 + 단계 전부 세로 정렬, 메이슨리 그리드 large/wide 클래스 span 해제. 768px 이하: 햄버거 메뉴 활성화, Hero 타이틀 축소, 통계 1컬럼, Team 1컬럼, 폼 패딩 축소. 480px 이하: 타이틀 더 축소, 필터 탭 간격/사이즈 축소.

4-3. JavaScript 관련 scroll 이벤트로 네비게이션 상태 변화 처리, IntersectionObserver로 reveal 애니메이션, setInterval + 클릭 이벤트로 갤러리 자동/수동 전환, 비디오 재생/일시정지 토글, 필터 탭 클릭 시 카테고리 필터링, 마그네틱 버튼 mousemove/mouseleave 이벤트, 폼 제출 시 alert + 리셋. 별도 번들러 없이 전역 스코프에서 동작.

추가 조건 HTML lang="ko"로 설정해줘. 콘텐츠 최대 너비는 1400px, 섹션 좌우 패딩 40px 기본. 모든 transition에 일관된 이징 커브(cubic-bezier(0.4, 0, 0.2, 1)) 적용하고 호버 효과는 0.3~0.6초 사이로 부드럽게. 실제 서버 없이 로컬에서 HTML 파일 하나만 열어도 완전하게 동작해야 해.