0008

HTML, CSS, JavaScript만 사용해서 단일 HTML 파일로 프리미엄 크리에이티브 아틀리에 웹사이트를 만들어줘. 스튜디오 이름은 "AURUM"이고, 라틴어로 '금(金)'이라는 뜻이야. 한국어 + 영어 혼용 사이트이고, 전체적으로 따뜻한 크림톤 라이트 테마에 골드 포인트를 활용한 럭셔리 미니멀 디자인으로 만들어줘.

1. 프로그램 개요

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

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

그리고 맨 아래에 Footer 넣어줘. 페이지 진입 시 로딩 화면도 있어야 하고, 커스텀 커서도 포함해줘.

2. 기능

2-1. 로딩 화면 페이지 처음 열리면 짙은 갈색(거의 검정) 배경에 "AURUM" 텍스트가 골드색으로 아래에서 위로 페이드인 되고, 그 아래에 가로 120px짜리 골드 라인이 왼쪽에서 오른쪽으로 펼쳐지는 애니메이션을 보여줘. 라인 아래에 "Creative Atelier" 서브텍스트도 순차 페이드인 해줘. 약 2.2초 후에 로딩 화면이 페이드아웃 되면서 사라지게 해줘.

2-2. 커스텀 커서 마우스 포인터를 골드색 원형 테두리(36px)로 대체해줘. mix-blend-mode: difference 적용해줘. 커서가 마우스를 약간 느리게 따라오는 지연(lerp) 효과를 넣어줘. 링크, 버튼, 카드, 포트폴리오 아이템 위에 올리면 커서가 60px로 커지면서 반투명 골드 배경이 채워지게 해줘. 768px 이하 모바일에서는 커스텀 커서 숨겨줘.

2-3. 네비게이션 상단 고정 네비게이션 바를 만들어줘. 왼쪽에 "AURUM" 로고(세리프, letter-spacing 넓게), 가운데에 메뉴 링크들(About, Services, Works, Project, Team, Contact), 오른쪽에 "Inquire" CTA 버튼 배치해줘. 스크롤 60px 이상 내려가면 네비게이션 배경이 반투명 크림색 + backdrop-filter blur로 바뀌면서 높이가 줄어드는 효과 넣어줘. 하단에 모래색 보더도 생기게 해줘. 768px 이하 모바일에서는 메뉴 링크와 CTA 숨기고 햄버거 버튼 보여줘. 햄버거 누르면 전체화면 모바일 메뉴가 나타나고, 메뉴 항목들이 순차적으로 아래에서 위로 페이드인 되게 해줘. 메뉴 클릭하면 닫히게 해줘. 모든 앵커 링크에 부드러운 스크롤 적용해줘.

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

2-5. 마키 (Marquee) 서비스 키워드들(Branding, Web Design, Art Direction, Photography, Motion Design, Spatial Design, 3D Visualization, Identity Systems)이 가로로 무한 반복 스크롤되는 띠 배너를 만들어줘. 각 키워드 사이에 45도 회전된 작은 골드색 다이아몬드 구분자를 넣어줘. 세리프 이탤릭 스타일로 해줘.

2-6. 패럴랙스 효과 철학 인용 구간의 배경 이미지가 스크롤 시 느리게 따라오는 패럴랙스 효과를 넣어줘. 이미지에 채도 낮추기 + 밝기 낮추기 필터를 적용해줘.

2-7. 후기 슬라이더 3개의 후기 카드를 가로로 나열하고, 좌/우 화살표 버튼으로 슬라이드하는 형태로 만들어줘. 카드는 반투명 배경 + 미세한 테두리, 호버 시 테두리가 골드빛으로 변하게 해줘.

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

3. 디자인

3-1. 컬러 팔레트 메인 배경: #FAF7F2 (따뜻한 크림) 보조 배경: #F3EDE4 (따뜻한 베이지) 모래색: #E8DFD3 토프: #C4B5A4 골드 포인트: #C9A96E (메인 강조색) 밝은 골드: #D4B97A 다크 브라운: #2C2418 (서비스 섹션 배경, 후기 섹션 배경에 사용) 텍스트: #4A3F35 (본문) 연한 텍스트: #7A6F63 순백: #FFFFFF

3-2. 서체 Google Fonts에서 아래 3개 불러와줘. Cormorant Garamond (300~700, italic 포함) → 제목, 장식 텍스트용 DM Sans (300~700) → 본문, UI용 Noto Sans KR (300~900) → 한글용 기본 body 서체는 'DM Sans', 'Noto Sans KR', sans-serif로 해줘.

3-3. 전체 톤앤무드 따뜻하고 고급스러운 아틀리에/갤러리 느낌. 여백을 넉넉하게 쓰고 요소 간 간격을 넓게 해줘. 섹션 제목 위에는 항상 작은 아이브라우 태그(영문 대문자, 골드색, letter-spacing 넓게, 앞에 30px 골드 가로선 장식)를 넣어줘. 전체적으로 cubic-bezier(.22,1,.36,1) 이징 커브를 기본으로 써줘. ::selection 색상은 골드 배경 + 흰 글씨로 해줘.

3-4. 이미지 처리 스타일 이미지에 다양한 모양 처리를 적용해줘: 아치형(상단 둥근 사각형, border-radius 상단만 300px), 원형, 일반 라운드(16~20px). 일부 이미지에는 안쪽으로 12px 들어간 골드색 얇은 테두리 프레임 장식을 넣어줘. 호버 시 이미지가 1.03~1.05배 살짝 확대되는 효과 적용해줘.

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

(1) Hero 전체 화면(100vh), 크림 배경, 2컬럼 그리드(텍스트 / 비주얼). 왼쪽에 이탤릭 서브타이틀("Crafting beauty since 2018"), 큰 타이틀 "Where Art Meets Purpose" (Purpose는 이탤릭 + 골드), 한글 설명, 버튼 2개(채운 버튼 "View Works" + 테두리 버튼 "Our Story") 배치해줘. 오른쪽에 아치형 메인 이미지, 그 위에 떠 있는 작은 원형 이미지 2개(그림자 + 크림 테두리 적용), 배경에 흐릿한 큰 "A" 글자 장식 넣어줘. 하단 중앙에 "Scroll" 텍스트(세로 쓰기)와 세로 라인 안에서 골드 선이 위에서 아래로 반복 흐르는 애니메이션 넣어줘. 배경에 우상단 방향으로 골드색 방사형 그라데이션(매우 옅은 8% 투명도)을 장식으로 깔아줘.

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

(3) About 2컬럼 그리드(비주얼 / 텍스트). 왼쪽에 아치형 메인 이미지(75% 너비) + 우하단에 겹쳐진 정사각형 보조 이미지(55% 너비, 크림 테두리, 그림자) + 우상단에 원형으로 돌아가는 텍스트 스탬프("AURUM • CREATIVE ATELIER • SINCE 2018 •", SVG textPath로 구현, 20초에 360도 회전). 오른쪽에 아이브라우, 이탤릭 서브타이틀, 한글 제목, 구분선, 한글 설명 2단락, 그 아래 2×2 그리드로 통계 4개(200+ 프로젝트, 35 어워드, 8 Years 여정, Global 서울에서 세계로) 배치해줘. 각 통계 항목은 상단 모래색 보더로 구분해줘.

(4) Services 다크 브라운 배경, 크림/골드 텍스트. 상단에 좌측 헤더(아이브라우 + 제목)와 우측 설명을 양쪽 정렬로 배치해줘. 아래에 서비스 6개를 리스트 형태로 나열해줘. 각 항목은 4컬럼 그리드(번호 / 서비스명 / 설명 / 화살표)로 구성하고, 상하에 미세한 흰색 반투명 보더 구분선을 넣어줘. 번호는 CSS counter로 자동 생성(01~06). 호버 시 왼쪽으로 패딩이 들어가면서 서비스명이 골드색으로 변하고, 오른쪽 화살표(→)가 페이드인 + 슬라이드인 되게 해줘. 서비스: Brand Identity, Web & Digital, Motion & 3D, Space Design, Photography, Art Direction. 각각 한글 설명 1~2줄.

(5) Portfolio 크림 배경, 중앙 정렬 헤더. 12컬럼 비정형 그리드로 6개 프로젝트를 다양한 크기로 배치해줘 (큰 것은 6컬럼×2행, 중간은 3컬럼×1행, 넓은 것은 8컬럼×2행 등). 각 카드는 라운드 16px, 호버 시 이미지 1.05배 확대 + 채도 복원, 하단에서 올라오는 어두운 그라디언트 오버레이 위에 카테고리 태그 + 프로젝트명 표시. 기본 이미지는 채도를 약간 낮춰둬. 하단에 "View All Projects →" 테두리 버튼.

(6) Parallax Quote 높이 80vh, 배경 이미지에 채도 낮추기 + 밝기 40%로 어둡게. 중앙에 한글 명언 "아름다움은 절제에서 태어난다. 본질만 남길 때, 비로소 빛난다." (세리프 이탤릭), 아래에 "— Aurum Creative Atelier" (골드색).

(7) Case Study 따뜻한 베이지 배경, 2컬럼(이미지 1.3fr / 텍스트 1fr). 이미지에 라운드 20px, 우상단에 골드 원형 뱃지(년도 2025 + "Featured" 라벨) 넣어줘. 텍스트 쪽에 아이브라우, 제목("Neon District", District는 골드 이탤릭), 구분선, 한글 프로젝트 설명, 그 아래 상세 정보 테이블(Client, Year, Scope, Award를 라벨/값 행으로), "View Full Case" 버튼 배치.

(8) Team 크림 배경, 중앙 정렬 헤더, 4컬럼 그리드. 각 카드에 아치형(상단 둥근) 이미지, 이름(한글), 역할(영문). 이미지는 기본 약간 desaturate, 호버 시 컬러 복원 + 미세 확대 + 골드 테두리 표시. 팀원 4명: 강지수/Creative Director, 박현우/Art Director, 이서연/Lead Designer, 최동건/Motion & 3D Lead.

(9) Testimonials 다크 브라운 배경, 크림/골드 텍스트. 3개 후기 카드를 가로로 나란히(데스크탑 기준 3개 보임). 각 카드에 별 5개(골드), 세리프 이탤릭 후기 텍스트, 구분선, 작성자 이름, 직함. 하단에 좌/우 원형 화살표 버튼. 모바일에서는 1개씩 보이게.

(10) Contact 크림 배경, 2컬럼(비주얼 / 폼). 왼쪽에 라운드 이미지 + 우하단에 겹쳐지는 흰색 카드(이메일, 전화번호, 주소 정보 담긴 플로팅 카드). 오른쪽에 아이브라우, 제목("이야기를 시작해볼까요", 일부 골드 이탤릭), 설명, 폼 필드 4개, 제출 버튼(다크 배경, 호버 시 골드).

Footer 상단 모래색 보더, 4컬럼(브랜드+설명 2fr / Navigation 1fr / Services 1fr / Connect 1fr). 하단에 저작권(© 2026 Aurum Creative Atelier) 왼쪽, "Seoul, South Korea" 오른쪽.

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

4. 기술

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

4-2. CSS 관련 CSS 변수(Custom Properties)로 컬러, 서체, 이징 커브 등 모두 관리해줘. 반응형은 1024px, 768px 두 구간으로 미디어쿼리 작성해줘. 1024px 이하: Hero/About/Case Study/Contact 1컬럼, Services 2컬럼(번호+이름만), Portfolio 2컬럼, Team 2컬럼, 후기 카드 2개 보임. 768px 이하: 햄버거 메뉴 활성화, Portfolio/Team 등 1~2컬럼, 후기 카드 1개, 섹션 패딩 축소, 커스텀 커서 숨김, Hero 플로팅 이미지 숨김.

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

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