0024

HTML, CSS, JavaScript만 사용해서 단일 HTML 파일로 몰입감 있는 크리에이티브 스튜디오 포트폴리오 웹사이트를 만들어줘. 스튜디오 이름은 "STUDIO"이고, 전체적으로 블랙 배경 다크 테마에 네온 컬러 포인트를 활용한 이머시브 스페이셜 디자인으로 만들어줘.

1. 프로그램 개요
총 2개 섹션으로 구성된 풀스크린 전환형 웹사이트야. 스크롤이 아니라 섹션 단위로 통째로 전환되는 방식이야.

(1) Gallery (전체화면 이미지/비디오 갤러리 그리드) (2) About (스튜디오 소개)

페이지 진입 시 로딩 화면이 있어야 하고, 커스텀 커서와 마우스 트레일 효과도 포함해줘.

2. 기능
2-1. 로딩 화면
페이지 처음 열리면 순수 검정 배경에 "STUDIO" 텍스트가 한 글자씩 아래에서 위로 순차적으로 올라오는 reveal 애니메이션을 보여줘. 각 글자마다 0.1초씩 딜레이를 줘. 그 아래에 가로 200px짜리 얇은(1px) 프로그레스 바를 넣고, 랜덤 속도로 채워지게 해줘. 프로그레스 바가 100%가 되면 0.5초 후에 로딩 화면이 페이드아웃 되면서 사라지고 메인 앱이 초기화되게 해줘.

2-2. 커스텀 커서
기본 마우스 커서를 숨기고(cursor: none) 두 가지 커서 요소로 대체해줘. 하나는 40px 흰색 반투명 원형 테두리 링, 다른 하나는 6px 흰색 실점(dot)이야. 링은 마우스를 약간 느리게 따라오는 느낌으로 해줘. 인터랙티브 요소(메뉴, 네비게이션 노드, 갤러리 아이템, 스킬 오브 등) 위에 올리면 링이 80px로 커지면서 반투명 흰색 배경이 채워지게 해줘.

2-3. 마우스 트레일
마우스가 움직일 때마다 3개의 컬러 트레일 파티클이 번갈아 나타나게 해줘. 각각 핑크(rgba(255,0,100,0.8)), 민트(rgba(0,255,200,0.8)), 보라(rgba(100,0,255,0.8)) 색상의 방사형 그라데이션 원이야. mix-blend-mode: screen 적용하고, 50ms 간격으로 생성되며 0.5초 후 페이드아웃 되게 해줘.

2-4. 플로팅 메뉴
좌상단에 60px 원형 햄버거 메뉴 버튼(반투명 배경 + backdrop-filter blur)을 배치해줘. 클릭하면 세 줄 아이콘이 X자로 변하면서 아래에 메뉴 아이템들("Gallery", "About")이 순차적으로 슬라이드인 되게 해줘. 각 아이템은 라운드 캡슐 형태(border-radius: 30px)이고, 호버 시 오른쪽으로 살짝 밀리면서 배경이 밝아지게 해줘. 메뉴 아이템 클릭 시 해당 섹션으로 전환되고 메뉴가 닫히게 해줘.

2-5. 섹션 네비게이션
화면 우측 중앙에 세로로 도트 네비게이션을 배치해줘. 각 노드는 12px 원형이고, 활성 섹션은 흰색 + 1.5배 크기로 강조해줘. 호버 시 왼쪽에 섹션명 라벨이 페이드인 되게 해줘. 마우스 휠, 키보드 방향키(↑↓), 도트 클릭 모두로 섹션 전환이 가능하게 해줘. 섹션 전환 시 0.5초 딜레이 후 새 섹션이 나타나는 크로스페이드 방식이고, 전환 중에는 추가 입력을 무시하게 해줘.

2-6. 갤러리 그리드 (Gallery 섹션)
5열 × 3행 총 15칸 그리드로 갤러리를 만들어줘. 각 아이템은 이미지 또는 비디오(20% 확률로 비디오)를 랜덤 배정하되 중복 없이 채워줘. perspective: 1500px을 적용한 3D 공간 안에서, 아이템들이 초기에는 translateZ(-100px) rotateY(45deg) 상태에서 50ms 간격 스태거로 원래 위치에 착지하는 애니메이션을 넣어줘. 마우스 위치에 따라 전체 그리드에 미세한 3D 틸트(rotateX/Y) 패럴랙스 효과를 줘. 각 아이템 호버 시 translateZ(50px) scale(1.05)로 앞으로 튀어나오면서 z-index가 올라가게 하고, 이미지가 1.1배 확대되면서 그라데이션 오버레이(핑크→블루 반투명)와 프로젝트 타이틀이 나타나게 해줘. 비디오 아이템에는 우상단에 재생 아이콘 뱃지를 넣어줘. 아이템 클릭 시 프로젝트 모달이 열리게 해줘.

2-7. 프로젝트 모달
검정 반투명(0.95) 배경에 중앙 정렬된 모달이 scale(0.8)에서 scale(1)로 확대되며 나타나게 해줘. 모달 내부는 반투명 배경 + backdrop-filter blur 처리한 라운드 카드(20px)이고, 2컬럼으로 왼쪽에 이미지/비디오, 오른쪽에 프로젝트 제목 + 설명 + "View Live Project" 버튼을 배치해줘. 우상단에 원형 닫기 버튼(호버 시 90도 회전) 넣어줘.

2-8. About 섹션
어두운 그라데이션 배경(#0a0a0a → #1a1a2e) 위에 세 가지 레이어를 겹쳐줘. 첫째, 배경 애니메이션으로 3개의 거대한 블롭 셰이프(핑크-보라, 블루-그린, 옐로우-오렌지 그라데이션)가 filter: blur(80px)로 흐릿하게 20초 주기로 border-radius와 rotation이 모핑하는 애니메이션. 둘째, 5개의 스킬 오브(Creative, Innovation, Design, Technology, Experience)가 화면 곳곳에 배치되어 6초 주기로 떠다니는(float) 애니메이션. 각 오브는 100px 원형에 반투명 방사형 그라데이션 배경, 호버 시 1.2배 확대. 셋째, 중앙에 큰 타이틀 "We Create Experiences"가 한 글자씩 순차 페이드인 + 아래에서 올라오는 애니메이션으로 나타나고, 그 아래 설명 텍스트. 최하단 배경에 "STUDIO" 텍스트가 20vw 크기로 2% 투명도로 깔려 있게 해줘.

3. 디자인
3-1. 컬러 팔레트
메인 배경: #000000 (순수 블랙) 보조 배경: #0a0a0a, #1a1a2e (다크 네이비) 텍스트: #FFFFFF (흰색) 핑크 포인트: rgba(255, 0, 100) — 트레일, 오버레이 민트 포인트: rgba(0, 255, 200) — 트레일 보라 포인트: rgba(100, 0, 255) — 트레일 블루: #3a86ff, 그린: #06ffa5, 옐로우: #ffbe0b, 오렌지: #fb5607 — 배경 블롭용 UI 요소: rgba(255, 255, 255, 0.1~0.5) 반투명 흰색 단계별 사용

3-2. 서체
시스템 폰트 스택 사용: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif. 외부 폰트 CDN 없이 시스템 폰트만 사용해줘.

3-3. 전체 톤앤무드
몰입감 있는 다크 스페이셜 갤러리 느낌. 모든 UI 요소에 backdrop-filter: blur(10~20px) + 반투명 배경을 적용한 글래스모피즘 스타일. transition 이징은 cubic-bezier(0.4, 0, 0.2, 1) 기본 사용. 3D perspective와 transform을 적극 활용해서 공간감을 살려줘.

3-4. 이미지 처리 스타일
갤러리 아이템은 border-radius: 10px, object-fit: cover로 통일해줘. 호버 시 이미지 1.1배 확대 + 컬러 그라데이션 오버레이. 모달 내 이미지/비디오도 border-radius: 10px.

3-5. 각 섹션 디자인 상세 및 미디어
(1) Gallery 전체 화면(100vh), 중앙 방사형 그라데이션 배경(rgba(20,20,40,0.8) → #000). 90vw × 90vh 크기의 5×3 그리드. perspective: 1500px 적용. gap 20px. 아래 이미지/비디오 목록에서 15개를 중복 없이 랜덤 선정해서 채워줘.

이미지 목록:

https://cdn.midjourney.com/e2961bd3-5f3e-4df5-97b0-372cde33881e/0_3.png
https://cdn.midjourney.com/e2961bd3-5f3e-4df5-97b0-372cde33881e/0_2.png
https://cdn.midjourney.com/e2961bd3-5f3e-4df5-97b0-372cde33881e/0_1.png
https://cdn.midjourney.com/e2961bd3-5f3e-4df5-97b0-372cde33881e/0_0.png
https://cdn.midjourney.com/921d92cb-996f-4d3a-aa06-257595ab9574/0_1.png
https://cdn.midjourney.com/921d92cb-996f-4d3a-aa06-257595ab9574/0_0.png
https://cdn.midjourney.com/921d92cb-996f-4d3a-aa06-257595ab9574/0_2.png
https://cdn.midjourney.com/921d92cb-996f-4d3a-aa06-257595ab9574/0_3.png
https://cdn.midjourney.com/7e67b738-f518-4963-ab7f-0f6aee68631f/0_0.png
https://cdn.midjourney.com/7e67b738-f518-4963-ab7f-0f6aee68631f/0_1.png
https://cdn.midjourney.com/7e67b738-f518-4963-ab7f-0f6aee68631f/0_2.png
https://cdn.midjourney.com/7e67b738-f518-4963-ab7f-0f6aee68631f/0_3.png
https://cdn.midjourney.com/a727665f-52bb-4f12-8ab5-a14de7d37fa0/0_0.png
https://cdn.midjourney.com/a727665f-52bb-4f12-8ab5-a14de7d37fa0/0_1.png
https://cdn.midjourney.com/a727665f-52bb-4f12-8ab5-a14de7d37fa0/0_2.png
https://cdn.midjourney.com/a727665f-52bb-4f12-8ab5-a14de7d37fa0/0_3.png
https://cdn.midjourney.com/6f1e16bb-1c36-4d96-a63a-07d287befbb5/0_0.png
https://cdn.midjourney.com/6f1e16bb-1c36-4d96-a63a-07d287befbb5/0_1.png
https://cdn.midjourney.com/6f1e16bb-1c36-4d96-a63a-07d287befbb5/0_2.png
https://cdn.midjourney.com/6f1e16bb-1c36-4d96-a63a-07d287befbb5/0_3.png
https://cdn.midjourney.com/435bc734-6093-48be-8671-a03dac8c0646/0_0.png
https://cdn.midjourney.com/435bc734-6093-48be-8671-a03dac8c0646/0_1.png
https://cdn.midjourney.com/435bc734-6093-48be-8671-a03dac8c0646/0_2.png
https://cdn.midjourney.com/435bc734-6093-48be-8671-a03dac8c0646/0_3.png
https://cdn.midjourney.com/24bf6d75-335f-4e3e-a0ac-51f1b596650d/0_0.png
https://cdn.midjourney.com/24bf6d75-335f-4e3e-a0ac-51f1b596650d/0_1.png
https://cdn.midjourney.com/24bf6d75-335f-4e3e-a0ac-51f1b596650d/0_2.png
https://cdn.midjourney.com/24bf6d75-335f-4e3e-a0ac-51f1b596650d/0_3.png
https://cdn.midjourney.com/b20cfa8a-047e-4cc9-9cb1-fd00cf5b6868/0_0.png
https://cdn.midjourney.com/b20cfa8a-047e-4cc9-9cb1-fd00cf5b6868/0_1.png
https://cdn.midjourney.com/b20cfa8a-047e-4cc9-9cb1-fd00cf5b6868/0_2.png
https://cdn.midjourney.com/b20cfa8a-047e-4cc9-9cb1-fd00cf5b6868/0_3.png
https://cdn.midjourney.com/deb55a2f-c5dd-4f0e-91ae-a4a29a82ed7c/0_0.png
https://cdn.midjourney.com/deb55a2f-c5dd-4f0e-91ae-a4a29a82ed7c/0_1.png
https://cdn.midjourney.com/deb55a2f-c5dd-4f0e-91ae-a4a29a82ed7c/0_2.png
https://cdn.midjourney.com/deb55a2f-c5dd-4f0e-91ae-a4a29a82ed7c/0_3.png
https://cdn.midjourney.com/d88cbb51-1d35-4110-8c22-a159348485cf/0_0.png
https://cdn.midjourney.com/d88cbb51-1d35-4110-8c22-a159348485cf/0_1.png
https://cdn.midjourney.com/d88cbb51-1d35-4110-8c22-a159348485cf/0_2.png
https://cdn.midjourney.com/d88cbb51-1d35-4110-8c22-a159348485cf/0_3.png
비디오 목록:

https://cdn.midjourney.com/video/8c31b1e5-f7c1-488d-8eb2-3afff61b32a8/0.mp4
https://cdn.midjourney.com/video/8c31b1e5-f7c1-488d-8eb2-3afff61b32a8/1.mp4
https://cdn.midjourney.com/video/8c31b1e5-f7c1-488d-8eb2-3afff61b32a8/2.mp4
https://cdn.midjourney.com/video/8c31b1e5-f7c1-488d-8eb2-3afff61b32a8/3.mp4
프로젝트 타이틀 목록: Digital Dreams, Future Vision, Creative Flow, Innovation Lab, Design System, Motion Magic, Tech Forward, User First, Brand Evolution, Digital Art, Web 3.0, Minimal Beauty, Bold Moves, Color Theory, Space Design

(2) About 어두운 그라데이션 배경. 배경 블롭 3개(핑크-보라 600px, 블루-그린 500px, 옐로우-오렌지 400px)가 filter: blur(80px), opacity: 0.3으로 20초 주기 모핑 애니메이션. 5개 스킬 오브가 화면 각 모서리와 중앙에 배치되어 6초 주기 float 애니메이션. 중앙에 "We Create Experiences" 타이틀(clamp(3rem, 8vw, 6rem), font-weight: 100) + 영문 설명 텍스트. 최하단 배경에 "STUDIO" 워터마크(20vw, opacity 0.02).

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

4-2. CSS 관련
overflow: hidden으로 페이지 스크롤 비활성화. 섹션은 position: absolute로 같은 위치에 겹쳐놓고 opacity와 visibility로 전환. mix-blend-mode, backdrop-filter, perspective, transform-style: preserve-3d 등 모던 CSS 속성 적극 활용. 반응형은 768px 한 구간으로 미디어쿼리 작성해줘. 768px 이하: 갤러리 그리드 3열×5행으로 변경, gap 축소, 네비게이션 오른쪽 여백 축소.

4-3. JavaScript 관련
갤러리 아이템은 JavaScript로 동적 생성. 미디어 중복 방지 로직 포함. mousemove 이벤트로 커서 추적, 트레일 생성, 갤러리 3D 틸트 패럴랙스 처리. wheel 이벤트와 keydown 이벤트로 섹션 전환. 전환 중 입력 잠금(isTransitioning 플래그). 별도 번들러 없이 전역 스코프에서 동작.

5. 추가 조건
HTML lang="ko"로 설정해줘. About 섹션 텍스트는 영어로 해줘. 코드에 영역별로 주석 넣어줘. 실제 서버 없이 로컬에서 HTML 파일 하나만 열어도 완전하게 동작해야 해.