0010

HTML, CSS, JavaScript만 사용해서 단일 HTML 파일로 프리미엄 크리에이티브 스튜디오 웹사이트를 만들어줘. 스튜디오 이름은 "NOVA"이고, '새로운 별'이라는 뜻이야. 한국어 + 영어 혼용 사이트이고, 전체적으로 깊은 우주 다크 테마에 퍼플/블루 글래스모피즘 디자인으로 만들어줘.

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

(1) Hero (전체화면 인트로) (2) Marquee (서비스 키워드 무한 흐름 띠) (3) About (스튜디오 소개) (4) Services (서비스 목록 - 6개 카드 그리드) (5) Portfolio (포트폴리오 비정형 그리드) (6) Parallax Quote (철학 인용 구간) (7) Case Study (대표 프로젝트 상세) (8) Team (팀 멤버 소개) (9) Testimonials (클라이언트 후기) (10) Contact (문의 폼 + 연락처)

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

기능
2-1. 로딩 화면 페이지 처음 열리면 우주 다크 배경에 보라색 테두리 원형 스피너가 회전하고, 그 아래에 "Entering NOVA" 텍스트가 표시되는 로딩 화면을 보여줘. 약 1.8초 후에 로딩 화면이 페이드아웃 되면서 사라지게 해줘.

2-2. 코스믹 배경 화면 전체 배경에 고정된 우주적 분위기의 배경을 만들어줘. 퍼플, 블루, 핑크, 시안 색상의 큰 원형 오브(Orb) 4개를 배치하고, 각각 blur 100px 처리해서 은하 성운처럼 보이게 해줘. 오브들은 20초 주기로 천천히 떠다니는 애니메이션을 넣고, 마우스 움직임에 따라 각 오브가 미세하게 따라오는 패럴랙스 효과도 적용해줘. 그 위에 radial-gradient로 만든 작은 점들을 겹쳐서 별이 박힌 밤하늘 느낌을 추가해줘.

2-3. 네비게이션 상단 중앙에 떠 있는 pill 형태 네비게이션 바를 만들어줘. 왼쪽에 "NOVA" 로고(앞에 작은 퍼플 그라데이션 원형 도트 장식), 가운데에 메뉴 링크들(About, Services, Works, Project, Team), 오른쪽에 "Let's Talk" CTA 버튼(퍼플-블루 그라데이션) 배치해줘. 네비게이션 자체가 글래스모피즘 스타일(반투명 배경 + backdrop-filter blur + 미세한 흰색 반투명 테두리)이고, 스크롤 60px 이상 내려가면 배경이 좀 더 불투명해지면서 그림자가 생기게 해줘. 768px 이하 모바일에서는 메뉴 링크와 CTA 숨기고 햄버거 버튼(가로 바 3개, X로 변환되는 애니메이션) 보여줘. 햄버거 누르면 전체화면 모바일 메뉴가 나타나고 메뉴 클릭하면 닫히게 해줘. 모든 앵커 링크에 부드러운 스크롤 적용해줘.

2-4. 스크롤 애니메이션 (Reveal) IntersectionObserver 사용해서 두 가지 reveal 애니메이션을 만들어줘: 아래에서 위로 올라오는 것(기본), 작은 스케일에서 원래 크기로 커지는 것. 같은 섹션 안에서도 요소마다 0.1초~0.5초씩 딜레이를 줘서 순차적으로 나타나게 해줘.

2-5. 마키 (Marquee) 서비스 키워드들(Branding, Web Design, Art Direction, Motion Design, Photography, 3D & Spatial, Strategy, Identity Systems)이 가로로 무한 반복 스크롤되는 띠 배너를 만들어줘. 각 키워드 사이에 퍼플-블루 그라데이션의 작은 원형 구분자를 넣어줘. 30초에 걸쳐 끝없이 흐르게 해줘.

2-6. 패럴랙스 효과 철학 인용 구간의 배경 이미지에 채도 낮추기 + 밝기 낮추기 필터를 적용하고, 바깥 가장자리가 메인 배경색으로 페이드되는 방사형 비네트 오버레이를 중앙 투명~가장자리 불투명으로 씌워줘.

2-7. 문의 폼 Name(필수), Email(필수), Project Type, Message(필수) 4개 필드로 만들어줘. 입력 필드는 반투명 배경 + 미세한 흰색 반투명 테두리, 포커스 시 퍼플 글로우가 생기게 해줘. 제출하면 버튼 텍스트가 "Sent Successfully ✓"로 바뀌면서 배경이 시안-그린 그라데이션으로 변하고, 3초 후 원래대로 복구되면서 폼 리셋해줘.

2-8. 포트폴리오 필터 버튼 포트폴리오 그리드 위에 필터 버튼들(All, Brand, Digital, Photo)을 배치해줘. 클릭하면 활성 버튼에 퍼플 강조 스타일이 적용되게 해줘. 실제 필터링은 시각적 토글만 구현하면 돼.

디자인
3-1. 컬러 팔레트 메인 배경: #07060B (거의 검정에 가까운 딥 네이비) 보조 배경들: #0C0B12, #12111A 서피스: rgba(255,255,255,.04)~rgba(255,255,255,.06) 글래스모피즘 배경: rgba(255,255,255,.05), 테두리 rgba(255,255,255,.08) 강한 글래스: rgba(255,255,255,.1), 테두리 rgba(255,255,255,.12) 텍스트 흰색: #F8F8FA (100%/70%/50%/30%/15%/8% 투명도 변형) 퍼플 포인트: #A855F7 블루: #6366F1 시안: #22D3EE 핑크: #EC4899 오렌지(별점용): #F97316 그린: #34D399 그라데이션 3종: 퍼플→블루(메인), 핑크→오렌지(보조), 시안→그린(세번째)

3-2. 서체 Google Fonts에서 아래 3개 불러와줘. Sora (200~800) → 제목, UI용 Noto Sans KR (300~900) → 한글용 Space Mono (400, 700) → 서비스 번호 등 모노스페이스 기본 body 서체는 'Sora', 'Noto Sans KR', sans-serif로 해줘.

3-3. 전체 톤앤무드 우주적이고 신비로운 느낌, 글래스모피즘이 핵심이야. 모든 카드와 요소에 반투명 배경 + backdrop-filter blur + 미세한 흰색 반투명 테두리를 적용해줘. 섹션 제목 위에는 pill 형태의 작은 뱃지(반투명 배경 + 색상 테두리 + 앞에 작은 글로우 도트)를 넣어줘. 뱃지 색상은 퍼플, 시안, 핑크 세 가지 변형을 만들어 섹션마다 달리 써줘. 전체적으로 cubic-bezier(.25,.46,.45,.94) 이징 커브를 기본으로 써줘. ::selection 색상은 퍼플 배경 + 흰 글씨로 해줘. 호버 시 카드가 위로 살짝 떠오르면서 퍼플 글로우 그림자가 생기는 효과를 통일적으로 적용해줘.

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

(1) Hero 전체 화면(100vh), 우주 배경 위에 2컬럼 그리드(텍스트 / 비주얼). 왼쪽에 pill 뱃지("Creative Studio — Since 2018"), 큰 타이틀 "Design Beyond the Cosmos" (Cosmos는 퍼플-블루 그라데이션 텍스트), 한글 설명, 버튼 2개(그라데이션 채운 버튼 "Explore Works" + 글래스 버튼 "Our Story"), 하단에 가로로 통계 3개(200+ Projects, 35 Awards, 8yr Experience — 각각 다른 그라데이션 텍스트) 배치해줘. 오른쪽에 글래스 카드(안쪽 패딩 10px, 라운드 24px) 안에 메인 이미지(3:4 비율), 카드 좌상단에 "Featured Work" 작은 뱃지, 카드 아래에 퍼플 blur 글로우 장식. 카드 주변에 작은 플로팅 이미지 2개(하나는 원형, 하나는 라운드 사각형)가 6초 주기로 위아래 떠다니게 해줘.

(2) Marquee 상하에 흰색 반투명 보더가 있는 띠 형태, 반투명 배경. 위 2-5에서 설명한 대로 키워드 무한 흐름.

(3) About 2컬럼 그리드(비주얼 / 텍스트). 왼쪽에 2×2 이미지 그리드(왼쪽 하나는 세로로 2행 차지, 오른쪽 2개는 정사각형), 각 이미지에 글래스 테두리, 호버 시 미세 확대. 뒤에 블루 blur 글로우 장식. 오른쪽에 뱃지("About Nova"), 제목(일부 그라데이션 텍스트), 글로우 라인(60px, 3px, 퍼플-블루 그라데이션 + 글로우), 한글 설명 2단락, 그 아래 2×2 그리드로 특징 4개를 글래스 카드로 배치(각각 다른 색상 아이콘 — 퍼플, 시안, 핑크, 블루 — + 제목 + 한글 설명).

(4) Services 중앙 정렬 헤더(뱃지 + 제목 + 설명). 아래에 3컬럼 그리드로 서비스 카드 6개 배치해줘. 각 카드는 글래스 스타일이고, 상단에 모노스페이스 번호(01~06), 색상 그라데이션 배경 아이콘 박스, 서비스명, 한글 설명. 호버 시 상단에 색상 라인(3px)이 나타나고 카드가 떠오르면서 그림자가 생기게 해줘. 카드마다 라인 색상을 그라데이션 3종이 번갈아 적용되게 해줘.

(5) Portfolio 좌측에 뱃지+제목, 우측에 필터 버튼들(위 2-8 참고)을 양쪽 정렬로 배치. 아래에 3컬럼 비정형 그리드로 6개 프로젝트를 배치해줘. 일부는 가로 2칸(wide), 일부는 세로 2칸(tall)을 차지하게 해서 변화를 줘. 각 아이템은 라운드 20px, 호버 시 이미지 1.06배 확대 + 하단에서 올라오는 어두운 그라디언트 오버레이 위에 카테고리 pill 태그(퍼플 반투명) + 프로젝트명 표시.

(6) Parallax Quote 높이 70vh, 배경 이미지에 밝기 40% + 채도 80%로 어둡게. 중앙에 시안 뱃지("Philosophy"), 한글 명언 "우리는 픽셀 하나에도 우주의 깊이를 담습니다." (em 태그 부분은 흰색 강조), 아래에 "— Nova Creative Studio" 크레딧. 방사형 비네트 오버레이를 씌워줘.

(7) Case Study 베이지가 아니라 기본 우주 배경 위에 글래스 카드 형태. 중앙 정렬 헤더(핑크 뱃지 + 제목) 아래에 큰 글래스 카드를 2컬럼(이미지 1.3fr / 텍스트 1fr)으로 배치해줘. 이미지 좌상단에 "Featured 2025" 뱃지. 텍스트 쪽에 뱃지("Case #047"), 제목("Neon District", District는 핑크-오렌지 그라데이션 텍스트), 한글 프로젝트 설명, 상세 정보 행 4줄(Client, Year, Scope, Award — 각 행은 하단 흰색 반투명 보더로 구분), "View Full Case →" 버튼 배치.

(8) Team 중앙 정렬 헤더(뱃지 + 제목 + 설명), 아래에 4컬럼 그리드. 각 카드는 글래스 스타일이고, 정사각형 이미지(하단에 어두운 그라디언트 오버레이), 아래에 이름(한글) + 역할(영문 퍼플색). 호버 시 카드가 떠오르면서 이미지 미세 확대 + 테두리 밝아지는 효과.

(9) Testimonials 기본 우주 배경 위에 중앙 정렬 헤더(시안 뱃지 + 제목). 3컬럼 그리드로 후기 카드 3개 배치. 각 카드는 글래스 스타일이고, 별 5개(오렌지색 작은 사각형 안에 ★), 후기 텍스트(한글), 가로 구분선(중앙에서 양쪽으로 페이드되는), 작성자 아바타(원형, 그라데이션 배경에 성(姓) 한 글자) + 이름 + 직함.

(10) Contact 중앙 정렬 헤더(핑크 뱃지 + 제목, 일부 그라데이션 텍스트) 아래에 큰 글래스 카드를 2컬럼(비주얼 / 폼)으로 배치. 왼쪽에 이미지 위에 퍼플-블루 반투명 그라데이션 오버레이, 하단에 연락처 정보 카드(글래스 안의 글래스 — 이메일, 전화번호, 주소). 오른쪽에 제목(일부 그라데이션), 설명, 폼 4개 필드, 제출 버튼(퍼플-블루 그라데이션, 글로우 그림자).

Footer 상단 흰색 반투명 보더, 4컬럼(브랜드+설명 2fr / Navigation 1fr / Services 1fr / Social 1fr). 하단에 저작권(© 2026 NOVA Creative Studio) 왼쪽, "Seoul, South Korea" 오른쪽.

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

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

4-2. CSS 관련 CSS 변수(Custom Properties)로 컬러, 서체, 이징 커브, border-radius 등 모두 관리해줘. 반응형은 1024px, 768px 두 구간으로 미디어쿼리 작성해줘. 1024px 이하: Hero/About/Case Study/Contact 1컬럼, Services 2컬럼, Portfolio 2컬럼(wide/tall 해제), Team 2컬럼, Reviews 1컬럼. 768px 이하: 햄버거 메뉴 활성화, Services/About 특징/폼 필드 1컬럼, Portfolio 1컬럼, Footer 1컬럼, 섹션 패딩 축소, Hero 플로팅 이미지 숨김.

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

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