0002

HTML, CSS, JavaScript만 사용해서 단일 HTML 파일로 프리미엄 비주얼 아뜰리에 웹사이트를 만들어줘. 스튜디오 이름은 "MONO"이고, '하나'라는 뜻으로 본질에 집중한다는 철학을 담고 있어. 한국어 + 영어 혼용 사이트이고, 전체적으로 따뜻한 크림톤 라이트 테마에 딥 레드(#c4371a) 포인트를 활용한 동양적 미니멀리즘 디자인으로 만들어줘.

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

(1) Hero (전체화면 인트로 — 2컬럼 분할) (2) Philosophy (철학 인용문 — 다크 배경) (3) About (스튜디오 소개 — 이미지 스택 레이아웃) (4) Services (서비스 목록 — 행 리스트형) (5) Works (포트폴리오 — 가로 스크롤 카드) (6) Full Image Break (전면 이미지 + 오버레이 텍스트) (7) Case Study (대표 프로젝트 상세) (8) Gallery (모자이크 그리드 갤러리 — 다크 배경) (9) Testimonials (클라이언트 후기 카드) (10) Contact (문의 폼 + 연락처 — 2컬럼)

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

기능
2-1. 로딩 화면 페이지 처음 열리면 어두운(거의 검정) 배경에 "MONO" 텍스트가 세리프체로 넓은 letter-spacing과 함께 중앙에 표시되고, 그 아래에 퍼센트 카운터(0%→100%)가 랜덤 속도로 올라가는 애니메이션을 보여줘. 100%에 도달하면 약간의 딜레이 후 로딩 화면이 아래에서 위로 clip-path 전환되면서 사라지게 해줘.

2-2. 네비게이션 상단 고정 네비게이션 바를 만들어줘. 왼쪽에 "MONO" 로고, 오른쪽에 메뉴 링크들(About, Services, Works, Gallery, Contact). mix-blend-mode: difference를 적용해서 어떤 배경 위에서도 흰색으로 보이게 해줘. 768px 이하 모바일에서는 메뉴 링크를 숨기고 햄버거 버튼(3줄, 활성화 시 X로 변형)을 보여줘. 햄버거 누르면 전체화면 오버레이 메뉴(다크 배경, 큰 세리프 링크)가 나타나고, 링크 클릭하면 닫히게 해줘. 모든 앵커 링크에 부드러운 스크롤 적용해줘.

2-3. 페이지 인디케이터 화면 오른쪽에 고정된 세로 도트 네비게이션을 만들어줘. 10개 섹션에 대응하는 10개 도트이고, 현재 보이는 섹션의 도트가 레드 포인트 색으로 채워지면서 살짝 커지게 해줘. 도트 아래에 "01 / 10" 형식의 세로 텍스트 페이지 번호 표시. 각 도트 클릭하면 해당 섹션으로 스크롤. IntersectionObserver로 현재 섹션 감지해줘. 768px 이하에서는 숨겨줘.

2-4. 스크롤 애니메이션 (Reveal) 세 가지 종류의 reveal 애니메이션을 만들어줘: 아래에서 위로(기본), 왼쪽에서 오른쪽, 오른쪽에서 왼쪽. IntersectionObserver 사용하고, 같은 섹션 안에서도 요소마다 0.1초~0.5초씩 딜레이를 줘서 순차적으로 나타나게 해줘.

2-5. 가로 스크롤 (Works 섹션) Works 섹션의 카드들을 가로로 나열하고, 마우스 드래그 및 터치 스와이프로 좌우 스크롤 가능하게 만들어줘. 드래그 시 cursor가 grabbing으로 변하게 해줘. 스크롤바는 숨겨줘.

2-6. 문의 폼 Name(필수), Email(필수), Subject, Message(필수) 4개 필드로 만들어줘. 입력 필드는 하단 보더만 있는 미니멀 스타일, 포커스 시 레드 포인트 색으로 변하게 해줘. 제출하면 버튼 텍스트가 "Sent Successfully ✓"로 바뀌면서 배경이 녹색으로 변하고, 3초 후 원래대로 복구되면서 폼 리셋해줘.

디자인
3-1. 컬러 팔레트 메인 배경: #f2f0eb (따뜻한 크림) 보조 배경: #e8e5de (약간 어두운 크림) 크림 하이라이트: #faf9f6 텍스트: #1a1a1a (거의 검정) 연한 텍스트: #6b6b6b 뮤트 텍스트: #999 레드 포인트: #c4371a (메인 강조색) 레드 소프트: rgba(196,55,26,0.08) 보더: rgba(26,26,26,0.1)

3-2. 서체 Google Fonts에서 아래 4개 불러와줘. Cormorant Garamond (300~700, italic 포함) → 제목, 큰 장식 텍스트용 Space Grotesk (300~700) → 본문, UI, 네비게이션용 Noto Sans KR (100~700) → 한글 산세리프용 Noto Serif KR (200~700) → 한글 세리프 인용문용 기본 body 서체는 'Space Grotesk', 'Noto Sans KR', sans-serif로 해줘.

3-3. 전체 톤앤무드 동양적 여백의 미를 현대 디자인에 녹인 느낌. 여백을 넉넉하게 쓰고 요소 간 간격을 넓게 해줘. 섹션 제목 위에는 항상 작은 아이브라우 태그(영문 대문자, 뮤트 색상, letter-spacing 넓게, 앞에 30px 레드 포인트 가로선 장식)를 넣어줘. 이미지는 기본적으로 약간의 grayscale 필터를 적용하고, 호버 시 컬러가 복원되는 스타일로 통일해줘. ::selection 색상은 레드 배경 + 흰 글씨로 해줘.

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

(1) Hero 전체 화면(100vh), 2컬럼 그리드(텍스트 / 이미지) 분할. 왼쪽에 "Est. 2016 — Seoul" 작은 텍스트, 큰 타이틀에서 "Visual"은 텍스트 아웃라인(stroke)으로, "Atelier"는 이탤릭 + 레드 포인트 색으로 표현해줘. 아래에 한글 3줄 설명. 좌하단에 "Scroll to explore" 텍스트와 가로 라인 안에서 레드 선이 왼쪽에서 오른쪽으로 반복 흐르는 애니메이션 넣어줘. 오른쪽은 큰 이미지가 꽉 채우고, 왼쪽 가장자리에서 배경색으로 자연스럽게 페이드되는 그라디언트 오버레이를 넣어줘. 1024px 이하에서는 이미지가 전체 배경으로 깔리면서 투명도 낮아지고, 텍스트가 위에 오게 해줘.

(2) Philosophy 다크(거의 검정) 배경, 크림 텍스트, 중앙 정렬. 한글 세리프체로 된 3~4줄 철학 인용문을 넣어줘. 핵심 키워드에 레드 포인트 색 + 하단 밑줄 강조. 하단에 "— MONO Manifesto, 2016" 작은 크레딧.

(3) About 2컬럼 그리드(텍스트 / 이미지 스택). 왼쪽에 큰 한자 장식 글자("余白" — 여백), 아이브라우, 세리프 한글 제목, 구분선, 본문 2단락, 2×2 그리드로 정보 4개(Founded/Team/Projects/Awards). 오른쪽에 2장의 이미지를 겹쳐서 배치하는 스택 레이아웃: 큰 이미지가 좌상단, 작은 이미지가 우하단에 겹치면서 크림 보더로 테두리. 각각 왼쪽/오른쪽에서 슬라이드인.

(4) Services 크림 하이라이트 배경. 상단에 좌측 헤더(아이브라우 + 제목)와 우측 설명을 양쪽 정렬로 배치해줘. 아래에 서비스 5개를 행 리스트 형태로 나열해줘. 각 행은 4컬럼 그리드(번호 / 서비스명 / 설명 / 화살표→)로 구성하고, 상하에 미세한 보더 구분선. 호버 시 왼쪽으로 패딩이 들어가면서 서비스명이 레드 포인트 색으로 변하고, 화살표가 오른쪽으로 살짝 이동. 서비스: Brand Identity & Strategy, Digital Product Design, Spatial Experience, Art Direction & Photography, Editorial & Publication. 각각 한글 설명 1줄. 1024px 이하에서는 설명 칼럼 숨기고 3컬럼으로.

(5) Works 기본 배경, 왼쪽 정렬 헤더. 가로 스크롤 영역에 카드 5개 나열. 각 카드는 min-width 380px, 세로형(aspect-ratio 3:4) 이미지 + 하단에 카테고리 태그(레드 소문자) + 프로젝트명. 이미지는 기본 grayscale, 호버 시 컬러 복원 + 미세 확대. 모바일에서는 카드 min-width를 280px로 줄여줘.

(6) Full Image Break 높이 80vh, 배경 이미지가 전체를 채우고 grayscale + 높은 contrast 필터 적용. 어두운 반투명 오버레이 위에 중앙 정렬로 아이브라우 + 매우 큰 세리프 제목(2줄).

(7) Case Study 2컬럼 그리드(이미지 1.3fr / 텍스트 1fr). 이미지에 좌하단 다크 배경 캡션 라벨("Project No. 047"). 텍스트에 아이브라우, 세리프 제목, 구분선, 한글 프로젝트 설명, 상세 정보 테이블(Client/Year/Category/Award를 라벨/값 행으로, 각 행 하단 보더). 1024px 이하에서는 1컬럼.

(8) Gallery 다크(거의 검정) 배경, 크림 텍스트. 아이브라우 + 제목 + 설명 후, 12컬럼 비정형 모자이크 그리드로 8개 이미지를 다양한 크기와 위치로 배치해줘. 각 이미지는 기본 grayscale 60%, 호버 시 컬러 복원 + 미세 확대. 1024px 이하에서는 2컬럼 균등 그리드로, 각 이미지에 4:3 비율 적용.

(9) Testimonials 크림 하이라이트 배경, 중앙 정렬 헤더. 3개 후기 카드를 가로 3컬럼 그리드로 배치. 각 카드에 큰 따옴표 장식(세리프, 레드 소프트 색, 좌상단에 absolute), 한글 세리프 후기 텍스트, 이름, 직함(레드 소문자). 호버 시 보더가 레드로 변하면서 살짝 위로 뜨고 그림자 추가. 1024px 이하에서는 1컬럼(max-width 600px).

(10) Contact 전체 높이, 2컬럼(정보 / 폼). 왼쪽에 아이브라우, 제목, 구분선, 설명, 그 아래 연락처 3블록(Email/Phone/Studio — 각각 레드 라벨 + 내용). 오른쪽에 크림 하이라이트 배경으로 구분하고 폼 필드 4개 + 제출 버튼(다크 배경, 호버 시 레드). 1024px 이하에서는 1컬럼.

Footer 다크 배경, 4컬럼(브랜드+설명 2fr / Navigate 1fr / Services 1fr / Connect 1fr). 하단에 모래색 보더로 구분 후 저작권 왼쪽, 언어 링크(KR/EN/JP) 오른쪽. 링크 호버 시 레드 포인트 색. 768px 이하에서는 1컬럼.

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

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

4-2. CSS 관련 CSS 변수(Custom Properties)로 컬러, 서체 등 모두 관리해줘. 반응형은 1024px, 768px 두 구간으로 미디어쿼리 작성해줘. 1024px 이하: Hero 1컬럼(이미지 배경화), About/Case Study/Contact 1컬럼, Services 설명 칼럼 숨김, Gallery 2컬럼 균등, Testimonials 1컬럼. 768px 이하: 햄버거 메뉴 활성화, 페이지 인디케이터 숨김, 섹션 패딩 축소, Works 카드 축소.

4-3. JavaScript 관련 IntersectionObserver로 스크롤 reveal 애니메이션 및 페이지 인디케이터 업데이트. 드래그 스크롤은 mousedown/mousemove/mouseup + touch 이벤트로 구현. 로딩 카운터는 setInterval + 랜덤 증가값. 모든 앵커 링크에 smooth scroll. 별도 번들러 없이 전역 스코프에서 동작.

추가 조건 언어는 한국어 위주, 섹션 태그·메뉴·버튼 텍스트 등은 영어로 해줘. HTML lang="ko"로 설정해줘. 모든 transition은 부드럽게 0.3~0.8초 사이로. 코드에 영역별로 주석 넣어줘. 실제 서버 없이 로컬에서 HTML 파일 하나만 열어도 완전하게 동작해야 해.