0005

HTML, CSS, JavaScript만 사용해서 단일 HTML 파일로 우주 테마 크리에이티브 디자인 스튜디오 웹사이트를 만들어줘. 스튜디오 이름은 "COSMO"이고, 우주(cosmos)에서 영감을 받은 이름이야. 한국어 위주 사이트이고, 전체적으로 깊은 우주 공간 느낌의 다크 테마에 보라색, 시안, 핑크 네온 글로우 효과를 사용해줘.

프로그램 개요 총 10개 섹션(페이지)으로 구성된 원페이지 스크롤 웹사이트야. 섹션 순서는 아래와 같아.
(1) Hero (전체화면 인트로 — 좌우 2컬럼) (2) Stats Ribbon (수치 통계 띠 배너) (3) About (스튜디오 소개 — 좌우 2컬럼) (4) Services (서비스 소개 카드 6개) (5) Portfolio (포트폴리오 갤러리 — 필터 버튼 포함) (6) Immersive Break (전체화면 대표 비주얼 + 카피) (7) Process (4단계 작업 프로세스) (8) Team (팀 멤버 소개 4명) (9) Testimonials (클라이언트 후기 슬라이더) (10) Contact (문의 폼 + 연락처 정보)

그리고 맨 아래에 Footer 넣어줘. 페이지 진입 시 우주 테마 로딩 화면도 있어야 해.

기능
2-1. 로딩 화면 페이지 처음 열리면 검정 배경(#05020e) 중앙에 3중 동심원 궤도 링 애니메이션을 보여줘. 가장 바깥 링은 보라색(#8b5cf6), 중간 링은 시안(#22d3ee), 안쪽 링은 핑크(#f472b6) 테두리로 만들고, 각각 다른 속도(1.2초, 1.8초, 2.4초)로 회전하게 해줘. 두 번째 링은 반대 방향으로 회전해줘. 중심에는 작은 흰색 원(10px)을 넣고 보라색 글로우(box-shadow) 효과 줘. 궤도 아래에 "COSMO" 텍스트를 보라색 톤으로 letter-spacing 넓게 표시해줘. 약 1.5초 후에 로딩 화면이 페이드아웃(opacity + visibility 전환) 되면서 사라지게 해줘.

2-2. 네비게이션 상단 고정 네비게이션 바를 만들어줘. 왼쪽에 "✦ COSMO" 로고(보라~시안 그라디언트 텍스트, letter-spacing 넓게), 오른쪽에 메뉴 링크들(소개, 서비스, 포트폴리오, 프로세스, 팀, 연락) 배치해줘. 스크롤 60px 이상 내려가면 네비게이션 배경이 반투명 다크(rgba(5,2,14,0.85)) + backdrop-filter: blur(20px)로 바뀌면서 하단에 얇은 반투명 보더가 생기는 효과 넣어줘. 768px 이하 모바일에서는 메뉴 링크들 숨기고 햄버거 버튼(가로선 3개) 보여줘. 햄버거 누르면 전체화면 모바일 메뉴(반투명 다크 배경 + blur(30px))가 페이드인 되면서 나타나고, 메뉴 항목 클릭하면 닫히게 해줘. 햄버거 활성화 시 위아래 선이 X자로 회전하고 가운데 선은 사라지게 해줘. 모든 앵커 링크 클릭 시 부드러운 스크롤(smooth scroll)로 이동하게 해줘.

2-3. 스크롤 애니메이션 (Reveal) 4가지 종류의 등장 애니메이션을 만들어줘:

아래에서 위로 30px 올라오면서 페이드인 (기본)
왼쪽에서 오른쪽으로 35px 슬라이드하면서 페이드인
오른쪽에서 왼쪽으로 35px 슬라이드하면서 페이드인
작은 크기(0.92)에서 원래 크기로 커지면서 페이드인 IntersectionObserver 사용하고, threshold 0.1, rootMargin "0px 0px -30px 0px"으로 설정해줘. 같은 섹션 안에서도 요소마다 0.1초~0.6초씩 딜레이를 줘서 순차적으로 나타나게 해줘. 딜레이 클래스를 6단계(dl1~dl6)로 만들어줘.
2-4. 포트폴리오 필터 포트폴리오 섹션 상단 오른쪽에 필터 버튼들(전체, 브랜딩, 디지털, 공간) 넣어줘. 버튼 클릭하면 활성 버튼에 보라~블루 그라디언트 배경 + 흰 텍스트로 강조 스타일 적용해줘. (실제 필터링 기능은 토글 스타일만 구현)

2-5. 후기 슬라이더 3개의 후기를 가로로 슬라이드하는 형태로 만들어줘. 각 슬라이드는 글래스 카드 안에 별 5개(✦ 기호), 후기 텍스트, 작성자 이름, 직함을 담아줘. 하단에 점(dot) 인디케이터 넣어줘. 점 클릭으로 이동 가능하게 하고, 7초마다 자동 슬라이드 되게 해줘. 현재 슬라이드에 해당하는 점은 시안색 + 가로로 넓어지는(24px) 캡슐 형태로 강조하고 시안 글로우 효과 줘.

2-6. 문의 폼 이름(필수), 이메일(필수), 프로젝트 유형, 메시지(필수) 4개 필드로 만들어줘. 이름과 이메일은 같은 행에 2컬럼으로 배치해줘. 제출하면 실제 전송 없이, 버튼 텍스트가 "전송 완료! ✦"로 바뀌면서 배경이 시안~블루 그라디언트로 변하게 해줘. 3초 후 원래대로 복구되면서 폼 리셋해줘.

디자인
3-1. 컬러 팔레트 (CSS 변수로 관리) 최심부 배경: #05020e (거의 완전한 암흑) 딥 배경: #0c0620 (진한 다크 퍼플) 성운 배경: #1a0f3a (네뷸러 보라) 메인 보라: #8b5cf6 밝은 보라: #a78bfa 시안: #22d3ee 핑크: #f472b6 블루: #3b82f6 틸: #2dd4bf 앰버: #fbbf24 흰색: #f0eef6 흰색 반투명: rgba(240,238,246,0.6) — 본문 텍스트용 글래스 배경: rgba(255,255,255,0.04) 글래스 보더: rgba(255,255,255,0.06) 보라 글로우: 0 0 40px rgba(139,92,246,0.25) 시안 글로우: 0 0 40px rgba(34,211,238,0.2)

3-2. 서체 Google Fonts에서 'Jua' 서체를 불러와줘 (한글 둥근 캐주얼 서체). 기본 body 서체는 'Jua', sans-serif로 설정해줘. 모든 곳에 이 서체 하나만 사용해.

3-3. 배경 효과 고정(fixed) 위치로 두 가지 배경 레이어를 깔아줘: ① 별 배경: radial-gradient로 다양한 크기(0.8px~1.5px)와 밝기의 점들을 여러 위치에 찍어서 별처럼 보이게 해줘. 2개 레이어로 나눠서 하나는 120초에 걸쳐 위로 100px 이동하는 애니메이션, 다른 하나는 200초에 걸쳐 반대 방향으로 이동하게 해줘. 일부 별은 보라색이나 시안색 틴트를 줘. ② 성운 블롭: 3개의 거대한 원형 블롭(400~600px)을 absolute로 배치해줘. 하나는 보라색(좌상단), 하나는 시안(우하단), 하나는 핑크(정중앙). filter: blur(100px), opacity 0.12로 은은하게 처리하고, 30초 주기로 위치와 스케일이 미세하게 변하는 떠다니는 애니메이션 넣어줘. 두 레이어 모두 pointer-events: none, z-index: 0으로 콘텐츠 뒤에 깔아줘.

3-4. 글래스모피즘 카드 스타일 재사용 가능한 .glass 클래스를 만들어줘: 반투명 배경(rgba(255,255,255,0.04)), 얇은 반투명 보더(rgba(255,255,255,0.06)), border-radius 16px, backdrop-filter: blur(10px). 호버 시 보더 색이 보라 20%로 밝아지고, 보라 글로우 box-shadow 추가, 4px 위로 떠오르는 효과 넣어줘.

3-5. 공통 UI 요소 섹션 태그(tag): 알약 모양(border-radius 999px), 글래스 배경 + 글래스 보더, 안에 시안색 작은 원형 점(5px, 시안 글로우) + 시안색 대문자 텍스트(font-size 0.75rem, letter-spacing 넓게). 섹션 구분선(line-glow): 50px 너비, 2px 높이, 보라→시안 그라디언트 배경. 대형 제목(.h-xl): clamp(2.5rem, 6vw, 5rem), 흰색→밝은보라 그라디언트 텍스트(-webkit-background-clip: text). 중형 제목(.h-lg): clamp(1.8rem, 4vw, 3rem). 본문(.p-body): 0.95rem, 흰색 반투명 색상, line-height 2, max-width 520px. 강조 텍스트(.accent): 시안색.

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

(1) Hero 전체 화면(100vh), 2컬럼 그리드(1:1 비율, gap 4rem)로 왼쪽에 텍스트, 오른쪽에 비주얼 배치해줘. 왼쪽 텍스트: "✦ 우주적 상상력의 시작" 작은 인트로(밝은 보라색, letter-spacing), "상상의 경계를 (줄바꿈) 우주 너머로" 대형 제목("우주 너머로"는 시안~보라 그라디언트 텍스트), 한글 설명 2줄, CTA 버튼 2개("은하계 탐험 →"은 보라~블루 그라디언트 채움 버튼 + 보라 글로우, "신호 보내기"는 시안 테두리 아웃라인 버튼) 순서로 배치해줘. 오른쪽 비주얼: 이미지 1장에 뒤로 2개의 동심원 링(보라색, 시안색 반투명 보더, 110%/130% 크기)이 6초 주기로 맥동하는 애니메이션 넣어줘. 이미지 주변에 떠다니는 글래스 카드 2개(우상단: 🚀 200+ 프로젝트, 좌하단: ⭐ 99.4% 만족도) 넣고, 5초 주기로 위아래 떠다니는 애니메이션 줘.

(2) Stats Ribbon 보라시안핑크 반투명 그라디언트 배경 띠, 상하단에 글래스 보더. 4개 수치를 가로로 균등 배치: "200+" 완성 프로젝트, "9년" 크리에이티브 경력, "38" 국제 수상, "15" 팀 크루원. 숫자는 보라~시안 그라디언트 텍스트, 2.5rem 크기. 라벨은 0.8rem 흰색 반투명.

(3) About 2컬럼(1:1, gap 5rem). 왼쪽에 이미지 2장 겹치기 배치: 메인 이미지(65% 너비, 75% 높이, 좌상단 정렬, border-radius 20px)와 보조 이미지(55% 너비, 55% 높이, 우하단 정렬, 4px 다크 보더). 두 이미지가 교차하는 중앙에 작은 궤도 장식(80px 보라색 원형 링 + 시안 점이 회전하는 애니메이션, 8초 주기). 오른쪽: 태그(ABOUT), 제목 "무한한 우주에서 (줄바꿈) 영감을 수집합니다"("영감을 수집합니다"는 시안색), 구분선, 설명 2단락, 그 아래 2x2 그리드로 글래스 카드 4개(설립: 2017 서울, 크루: 15명의 탐험가, 미션: 200+ 완료, 수상: 38개 국제상). 카드 안 제목은 시안색 소형 대문자.

(4) Services 중앙 정렬 헤더(태그 SERVICES + 제목 "우리의 궤도" + 구분선 + 설명) 아래에 3컬럼 그리드로 글래스 카드 6개 배치. 각 카드: 중앙 정렬, 상단에 아이콘(이모지, 60px 정사각 라운드 박스 안에 배치, 보라~시안 반투명 그라디언트 배경), 서비스 제목, 한글 설명. 호버 시 카드 상단 중앙에 보라~시안 그라디언트 가로선(너비 60%)이 나타나는 효과. 서비스 6개: 🪐 브랜드 유니버스(로고, 아이덴티티, 스토리텔링부터 가이드라인까지), 🛸 디지털 항해(웹사이트, 앱, 인터랙티브 경험), 🔭 공간 탐사(상업 공간, 전시, 팝업), 📡 아트 디렉션(캠페인, 화보, 영상의 시각적 방향성), 🌌 포토 & 필름(전문 포토그래피와 영상 제작), ✨ 모션 그래픽(움직이는 비주얼로 브랜드에 생명력).

(5) Portfolio 헤더를 좌우 분리(왼쪽: 태그 PORTFOLIO + 제목 "우주 탐사 기록", 오른쪽: 필터 버튼들). 3컬럼 그리드, grid-auto-rows 280px. 6개 프로젝트 중 첫 번째는 세로 2칸(grid-row: span 2), 마지막은 가로 2칸(grid-column: span 2) 차지하게 해줘. 각 아이템: border-radius 16px, overflow hidden, 이미지가 꽉 차게(object-fit: cover). 호버 시 이미지 1.06배 확대 + 밝기 1.1배 + 하단에서 올라오는 어두운 그라디언트 오버레이 위에 카테고리(시안, 소형 대문자)와 프로젝트명(흰색) 표시. 프로젝트 6개: Nebula Core/BRANDING, Starway/DIGITAL, Aurora Field/PHOTOGRAPHY, Orbit Lounge/SPACE, Solar Wind/ART DIRECTION, Event Horizon/BRANDING.

(6) Immersive Break 높이 80vh, 배경 이미지에 보라+다크+시안 대각선 그라디언트 오버레이(각각 50%, 60%, 30% 불투명도). 중앙 정렬로 태그(FEATURED), 제목 "우주에서 보면 (줄바꿈) 모든 경계는 사라집니다" (clamp(2rem, 5.5vw, 4.5rem), 흰색), 설명 1줄(흰색 70% 불투명도), "프로젝트 시작하기 →" 보라 그라디언트 버튼 배치.

(7) Process 중앙 정렬 헤더(태그 PROCESS + 제목 "발사 시퀀스" + 구분선 + 설명) 아래에 4컬럼 가로 배치. 4컬럼 사이를 잇는 가로 연결선(보라시안핑크~앰버 그라디언트, opacity 0.2, 상단 35px 위치)을 pseudo-element로 넣어줘. 각 단계: 중앙 정렬, 상단에 70px 원형 글래스 오브(이모지 아이콘 포함, 바깥에 보라색 대시 보더가 20초 주기로 회전하는 장식), 제목(한글+영문), 설명(0.8rem, 흰색 반투명, max-width 220px). 호버 시 오브에 보라 글로우 + 보더 색 보라색으로 변화. 4단계: 🔍 탐사 Discovery, 💡 설계 Concept, 🎨 제작 Create, 🚀 발사 Launch. 각 단계별 한글 설명 2줄씩.

(8) Team 중앙 정렬 헤더(태그 CREW + 제목 "우주 탐사 크루" + 구분선 + 설명) 아래에 4컬럼 그리드. 각 카드: 중앙 정렬, 160px 원형 아바타(2px 글래스 보더, overflow hidden), 이름(한글), 역할(시안색 소형 텍스트). 아바타 호버 시 보더가 사라지면서 바깥에 보라시안핑크 conic-gradient 링이 나타나는 효과 + 4px 위로 떠오름. 팀원 4명: 김소라/크리에이티브 캡틴, 이도현/아트 네비게이터, 박예진/디자인 엔지니어, 최우진/UX 파일럿.

(9) Testimonials 배경에 성운 보라 30% 불투명도 배경색 깔아줘. 중앙 정렬 헤더(태그 SIGNALS + 제목 "수신된 신호들" + 구분선) 아래에 최대 900px 슬라이더. 각 슬라이드: 글래스 카드 안에 별 5개(✦ ✦ ✦ ✦ ✦), 후기 텍스트(clamp(1rem, 2vw, 1.25rem), 흰색 반투명, line-height 2), 작성자 이름(흰색), 직함(시안색 소형). 3개 후기: ① 정하늘/CEO, 스텔라 뷰티 — 미래지향적이면서 따뜻한 브랜드 경험 관련, ② 윤서준/CTO, 오르빗 테크 — 정밀하고 직관적인 UX 관련, ③ 김나래/브랜드 디렉터, 루나 코스메틱 — 다른 행성에 온 것 같은 팝업 공간 관련.

(10) Contact 2컬럼(1:1, gap 4rem). 왼쪽: 이미지에 conic-gradient(보라시안핑크) 글로우 테두리 장식(z-index -1, opacity 0.15, blur 2px), 이미지 좌하단에 글래스 뱃지("교신 가능" + 틸색 맥동 점 애니메이션). 오른쪽: 태그(CONTACT) + 제목 "신호를 (줄바꿈) 보내주세요"("보내주세요"는 시안색) + 구분선 + 설명 + 연락처 정보 3개(이메일: hello@cosmo-studio.kr, 전화: 02-555-0917, 스튜디오: 서울시 성동구 성수이로 77) + 문의 폼. 연락처 항목 제목은 시안색 소형 대문자, 이메일은 링크로 만들고 호버 시 하단 보더 시안색으로 변화. 폼 입력 필드: 글래스 배경 + 글래스 보더, border-radius 12px, 포커스 시 보더 색 보라색으로 변화. 전체 폼 배경은 투명.

Footer 상단에 글래스 보더, 배경 반투명 다크. 4컬럼(2fr 1fr 1fr 1fr) 그리드: 첫 번째에 "✦ COSMO" 브랜드(보라~시안 그라디언트 텍스트) + 한글 소개 1줄(0.85rem, 흰색 반투명 60%), 나머지 3개 컬럼은 탐색(소개, 서비스, 포트폴리오, 연락), 궤도(브랜딩, 디지털, 공간 디자인, 포토그래피), 소셜(Instagram, Behance, LinkedIn, Vimeo) 링크 목록. 컬럼 제목은 시안색 소형 대문자. 하단에 글래스 보더 구분선, 그 아래 "© 2026 COSMO Studio. All rights reserved." 저작권 표시(작은 텍스트, 흰색 반투명 30%).

3-7. 이미지 모든 이미지는 Midjourney CDN URL을 사용해줘. 우주적이고 추상적인 비주얼 이미지를 사용할 거야. 이미지 URL은 다음과 같아: Hero 메인: https://cdn.midjourney.com/4f946fe5-cf51-43c3-b11a-e0d3ffaeb3c0/0_3.png About 메인: https://cdn.midjourney.com/4f946fe5-cf51-43c3-b11a-e0d3ffaeb3c0/0_1.png About 보조: https://cdn.midjourney.com/4f946fe5-cf51-43c3-b11a-e0d3ffaeb3c0/0_0.png Portfolio 1: https://cdn.midjourney.com/e3408a9e-40e0-41bc-9f5a-f13f2737926b/0_2.png Portfolio 2: https://cdn.midjourney.com/e3408a9e-40e0-41bc-9f5a-f13f2737926b/0_3.png Portfolio 3: https://cdn.midjourney.com/e3408a9e-40e0-41bc-9f5a-f13f2737926b/0_0.png Portfolio 4: https://cdn.midjourney.com/e3408a9e-40e0-41bc-9f5a-f13f2737926b/0_1.png Portfolio 5: https://cdn.midjourney.com/dbc88526-ecdb-40d7-b993-8832074f29fd/0_2.png Portfolio 6: https://cdn.midjourney.com/dbc88526-ecdb-40d7-b993-8832074f29fd/0_1.png Immersive: https://cdn.midjourney.com/b4ac3502-02d3-4be3-a23c-7e823f4f3fd9/0_2.png Team 1: https://cdn.midjourney.com/b4ac3502-02d3-4be3-a23c-7e823f4f3fd9/0_1.png Team 2: https://cdn.midjourney.com/b4ac3502-02d3-4be3-a23c-7e823f4f3fd9/0_2.png Team 3: https://cdn.midjourney.com/e3408a9e-40e0-41bc-9f5a-f13f2737926b/0_0.png Team 4: https://cdn.midjourney.com/e3408a9e-40e0-41bc-9f5a-f13f2737926b/0_1.png Contact: https://cdn.midjourney.com/a755fab3-724b-416a-9f0a-80db917f4e86/0_2.png

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

4-2. CSS 관련 CSS 변수(Custom Properties)로 모든 컬러, 글로우 값 관리해줘. ::selection은 보라 배경 + 흰 텍스트로 해줘. 반응형은 1024px, 768px 두 구간으로 미디어쿼리 작성해줘. 1024px 이하: Hero 1컬럼(비주얼 아래로), Hero 떠다니는 카드 숨김, About 1컬럼, Services 2컬럼, Portfolio 2컬럼(span 해제), Process 2컬럼(연결선 숨김), Team 2컬럼, Contact 1컬럼, Footer 2컬럼. 768px 이하: 햄버거 메뉴 활성화, Services 1컬럼, Portfolio 1컬럼, Process 1컬럼, About 카드 그리드 1컬럼, 폼 2컬럼→1컬럼, Footer 1컬럼, 연락처 정보 2컬럼 그리드.

4-3. JavaScript 관련 IntersectionObserver로 스크롤 애니메이션 처리해줘. querySelectorAll 등 기본 DOM API만 사용해줘. 별도의 번들러나 모듈 시스템 없이 전역 스코프에서 동작하게 해줘.

추가 조건 HTML lang="ko"로 설정해줘. 전체적으로 콘텐츠 최대 너비는 1300px, 섹션 좌우 패딩 2.5rem 기본으로 해줘. 모든 transition에 0.3초~0.8초 사이로 부드럽게, cubic-bezier(0.25, 0.46, 0.45, 0.94) 이징 커브를 기본으로 써줘. 코드에 영역별로 주석 구분 넣어서 가독성 좋게 해줘. (예: /* ============ HERO ============ */ 형태) 실제 서버 없이 로컬에서 HTML 파일 하나만 열어도 완전하게 동작해야 해. 버튼 스타일은 border-radius 999px 알약 형태를 기본으로 해줘.