0032

HTML, CSS, JavaScript만 사용해서 단일 HTML 파일로 실험적인 크리에이티브 스튜디오 웹사이트를 만들어줘. 스튜디오 이름은 "ORBITAL STUDIO"이고, 궤도를 도는 행성처럼 역동적이고 미래적인 콘셉트야. 영어 전용 사이트이고, 전체적으로 순수 블랙(#0a0a0a) 다크 테마에 화이트 포인트, 글래스모피즘, mix-blend-mode를 활용한 실험적 미니멀 디자인으로 만들어줘.

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

(1) Hero (전체화면 리퀴드 갤러리 인트로) (2) About (스튜디오 소개 — "Beyond Traditional Design") (3) Vision (비전 소개) (4) Process (작업 프로세스 3단계) (5) Lab (디지털 실험실 소개) (6) Philosophy (디자인 철학) (7) Connect (연락처 — "Enter Our Orbit")

페이지 진입 시 로딩 화면도 있어야 하고, 리퀴드 느낌의 커스텀 커서도 포함해줘. 상단에 플로팅 메뉴 버튼과 원형 궤도(Orbital) 네비게이션 시스템을 넣어줘.

기능
2-1. 로딩 화면 페이지 처음 열리면 검정 배경(#0a0a0a) 중앙에 흰색 원형 스피너가 회전하는 로딩 화면을 보여줘. 원형 테두리의 상단 부분만 흰색이고 나머지는 연한 투명 흰색으로 처리해줘. 약 1초 후에 로딩 화면이 페이드아웃 되면서 사라지게 해줘.

2-2. 커스텀 커서 마우스 포인터를 두 개의 레이어로 대체해줘. 첫 번째는 20px 크기의 밝은 원형 커서(radial-gradient, 중심 흰색에서 투명으로)로 마우스를 즉시 따라다니게 해줘. 두 번째는 40px 크기의 더 큰 연한 커서 트레일로, 마우스를 느리게(lerp 0.1) 따라오게 해줘. 둘 다 mix-blend-mode: screen 적용해줘. 갤러리 셀, 카드, 메뉴 아이템 등 인터랙티브 요소 위에 올리면 첫 번째 커서가 60px로 확대되게 해줘. body에 cursor: none을 적용해서 기본 커서를 숨겨줘.

2-3. 궤도형(Orbital) 네비게이션 우상단에 60px 원형 플로팅 메뉴 버튼을 고정 배치해줘. 글래스모피즘(반투명 배경 + backdrop-filter blur) 스타일이고, 내부에 햄버거 아이콘(가로선 3개) 넣어줘. 호버 시 1.1배 확대 + 90도 회전 효과 적용해줘.

버튼을 클릭하면 화면 정중앙에 원형 궤도 네비게이션이 나타나줘. 중앙에 120px 원형 버튼(X 닫기 역할, conic-gradient로 천천히 회전하는 장식 효과 포함)이 있고, 그 주위 반지름 180px 궤도 위에 7개 메뉴 아이템(Home, About, Vision, Process, Lab, Philosophy, Connect)이 원형으로 균등 배치되게 해줘. 각 메뉴 아이템은 80px 원형, 글래스모피즘 스타일이야. 메뉴 열릴 때 scale(0)에서 scale(1)로 확대되는 애니메이션, 닫힐 때 반대로 축소되는 애니메이션 적용해줘. 메뉴 아이템 클릭 시 해당 섹션으로 부드럽게 스크롤하고 메뉴가 자동으로 닫히게 해줘. ESC 키로도 닫을 수 있게 해줘. 메뉴가 열리면 Hero의 타이틀에 blur(10px) 효과를 적용해줘.

2-4. 스크롤 애니메이션 IntersectionObserver를 사용해서, Hero를 제외한 각 섹션(.section)이 뷰포트에 들어오면 아래에서 위로(translateY 50px → 0) 페이드인 되게 해줘. transition은 1초, cubic-bezier(0.4, 0, 0.2, 1) 이징으로 적용해줘.

2-5. 패럴랙스 효과 각 섹션 배경의 .floating-element(반투명 원형 빛 장식)들이 스크롤 시 서로 다른 속도로 움직이는 패럴랙스 효과를 넣어줘. requestAnimationFrame을 사용해서 성능 최적화해줘.

디자인
3-1. 컬러 팔레트 메인 배경: #0a0a0a (거의 순수 블랙) 카드/요소 배경: rgba(255,255,255,0.03)~rgba(255,255,255,0.05) (극미세 흰색 투명) 테두리: rgba(255,255,255,0.1) (미세한 흰색 투명) 호버 테두리: rgba(255,255,255,0.3) 텍스트: #ffffff 연한 텍스트: opacity 0.8 커서/강조: 순수 흰색, radial-gradient 활용

3-2. 서체 시스템 폰트 스택 사용: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif. 외부 폰트 CDN 없이 시스템 기본 서체만 사용해줘. 제목은 font-weight 800~900, letter-spacing -0.02em~-0.05em, line-height 0.9~1.1로 타이트하게. 본문은 font-size 1.1rem, line-height 1.8.

3-3. 전체 톤앤무드 우주적이고 실험적인 디지털 스튜디오 느낌. 완전한 어둠 속에서 빛이 부유하는 듯한 분위기야. 글래스모피즘(backdrop-filter: blur, 반투명 배경, 미세 테두리)을 카드와 네비게이션 요소에 전반적으로 적용해줘. mix-blend-mode(screen, difference)를 커서와 타이틀에 활용해줘. 각 섹션 배경에 radial-gradient로 아주 옅은 빛 장식(floating-element)을 넣고, 30초 주기로 천천히 떠다니는 애니메이션을 적용해줘. 카드(liquid-card)는 border-radius 30px, 호버 시 위로 10px 떠오르면서 배경이 살짝 밝아지는 효과. 카드 테두리에 linear-gradient가 회전하는 빛 흐름 장식을 호버 시 보여줘.

3-4. 섹션 디자인 상세

(1) Hero — 리퀴드 갤러리 전체 화면(100vh). 배경 전체를 4열 × 3행(모바일에서는 2열 × 4행) 그리드로 분할하고, 각 셀에 이미지 또는 비디오를 꽉 채워 넣어줘(object-fit: cover). 셀 사이 간격은 2px. 각 셀 호버 시 scale(1.1)로 확대 + 박스 섀도우 + 내부 이미지 scale(1.2) 확대 + 중심에서 퍼지는 원형 흰색 오버레이 효과. 그리드 위 정중앙에 mix-blend-mode: difference로 "ORBITAL STUDIO" 타이틀을 크게(clamp(3rem, 10vw, 8rem)) 겹쳐줘. font-weight 900, 두 줄로(ORBITAL / STUDIO).

아래는 각 셀에 들어갈 미디어야 (왼쪽 위부터 순서대로): 셀 1 (이미지): https://cdn.midjourney.com/e2961bd3-5f3e-4df5-97b0-372cde33881e/0_3.png 셀 2 (이미지): https://cdn.midjourney.com/e2961bd3-5f3e-4df5-97b0-372cde33881e/0_2.png 셀 3 (이미지): https://cdn.midjourney.com/e2961bd3-5f3e-4df5-97b0-372cde33881e/0_1.png 셀 4 (비디오, autoplay/loop/muted): https://cdn.midjourney.com/video/8c31b1e5-f7c1-488d-8eb2-3afff61b32a8/0.mp4 셀 5 (이미지): https://cdn.midjourney.com/921d92cb-996f-4d3a-aa06-257595ab9574/0_1.png 셀 6 (이미지): https://cdn.midjourney.com/921d92cb-996f-4d3a-aa06-257595ab9574/0_0.png 셀 7 (비디오, autoplay/loop/muted): https://cdn.midjourney.com/video/8c31b1e5-f7c1-488d-8eb2-3afff61b32a8/1.mp4 셀 8 (이미지): https://cdn.midjourney.com/7e67b738-f518-4963-ab7f-0f6aee68631f/0_0.png 셀 9 (이미지): https://cdn.midjourney.com/7e67b738-f518-4963-ab7f-0f6aee68631f/0_1.png 셀 10 (비디오, autoplay/loop/muted): https://cdn.midjourney.com/video/8c31b1e5-f7c1-488d-8eb2-3afff61b32a8/2.mp4 셀 11 (이미지): https://cdn.midjourney.com/a727665f-52bb-4f12-8ab5-a14de7d37fa0/0_0.png 셀 12 (이미지): https://cdn.midjourney.com/a727665f-52bb-4f12-8ab5-a14de7d37fa0/0_1.png

(2) About — "Beyond Traditional Design" 검정 배경, liquid-card 안에 제목 + 설명 + 3컬럼 서브 그리드(Liquid Motion, Spatial Design, Emotional Tech 소개). 배경에 floating-element 2개 배치.

(3) Vision — "Our Vision" liquid-card 안에 비전 제목과 설명 텍스트. "디지털 인터랙션을 재정의하여 살아 숨 쉬고, 반응하며, 깊이 개인적인 경험을 만든다"는 내용.

(4) Process — "The Orbital Process" liquid-card 안에 3단계 프로세스(01. Exploration, 02. Fusion, 03. Evolution)를 세로로 나열. 각 단계마다 번호 + 제목 + 설명 텍스트.

(5) Lab — "Digital Laboratory" liquid-card 안에 제목과 짧은 설명.

(6) Philosophy — "Design Philosophy" liquid-card 안에 제목과 "정적인 것은 죽었다. 미래는 유동적이고 반응적이며 살아있다"는 철학 텍스트.

(7) Connect — "Enter Our Orbit" liquid-card 안에 제목, 설명, 이메일 주소(hello@orbitalstudio.space), "24시간 내 응답" 안내 텍스트.

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

4-2. CSS 관련 반응형은 768px 한 구간으로 미디어쿼리 작성해줘. 768px 이하: 궤도 네비게이션 350px로 축소, 중앙 버튼 80px, 메뉴 아이템 60px, 갤러리 2열×4행으로 변경, 플로팅 메뉴 버튼 크기 축소. 모든 애니메이션에 cubic-bezier 이징 커브 적용.

4-3. JavaScript 관련 갤러리 셀과 궤도 메뉴 아이템은 JavaScript로 동적 생성해줘. 미디어 데이터(이미지/비디오 URL, 타입)와 메뉴 데이터를 배열로 관리하고, DOM을 동적으로 생성해서 삽입해줘. IntersectionObserver로 스크롤 reveal 애니메이션, requestAnimationFrame으로 커서 트레일 lerp 애니메이션과 패럴랙스 처리. 이벤트 위임과 querySelectorAll 등 기본 DOM API만 사용. 별도 번들러 없이 전역 스코프에서 동작.

추가 조건 언어는 영어 전용. HTML lang="ko"로 설정해줘. body 기본 overflow-x: hidden 적용해줘. 코드에 영역별로 주석 넣어줘. 실제 서버 없이 로컬에서 HTML 파일 하나만 열어도 완전하게 동작해야 해.