0009

HTML, CSS, JavaScript만 사용해서 단일 HTML 파일로 에디토리얼 디자인 스튜디오 웹사이트를 만들어줘. 스튜디오 이름은 "BOLDER"이고, 2018년 서울에서 설립된 컨셉이야. 한국어 + 영어 혼용 사이트이고, 전체적으로 따뜻한 종이(paper) 질감의 라이트 베이지 배경에 빨간색(#E63926) 포인트를 활용한 브루탈리즘 + 매거진 에디토리얼 디자인으로 만들어줘. 핵심 무드는 "날것의 에너지 + 정교한 타이포그래피 시스템"이야. 인쇄 매거진을 웹으로 옮긴 듯한 느낌을 줘야 해.

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

(1) Hero (매거진 커버 스타일 전체화면 인트로) (2) About (스튜디오 소개 + 매니페스토) (3) Services (서비스 목록 - 카드 그리드형) (4) Portfolio (포트폴리오 모자이크 그리드) (5) Editorial Break (철학 인용 구간) (6) Case Study (대표 프로젝트 상세) (7) Team (팀 멤버 소개) (8) Testimonials (클라이언트 후기) (9) Full Bleed Image (대형 이미지 + 타이포 오버레이) (10) Contact (문의 폼 + 연락처)

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

기능
2-1. 로딩 화면 페이지 처음 열리면 빨간색 배경 전체화면에 "BOLDER" 텍스트가 굵은 세리프 이탤릭으로 중앙에 보여줘. 우하단에 모노스페이스 폰트로 000에서 100까지 랜덤 간격으로 빠르게 올라가는 숫자 카운터를 표시해줘. 카운트가 100에 도달하면 약간의 딜레이 후 로딩 화면이 위쪽으로 scaleY(0) 되면서 접혀 사라지게 해줘. 카운터 숫자도 함께 페이드아웃.

2-2. 네비게이션 상단 고정 네비게이션 바를 만들어줘. 높이 56px, 하단에 2px 검정 실선 보더. 왼쪽에 "BOLDER" 로고(세리프 이탤릭 + 옆에 빨간 배경의 작은 "EST.18" 태그), 가운데에 메뉴 링크들(About, Services, Works, Case, Crew), 오른쪽에 모노스페이스 실시간 시계(KST)와 빨간 배경 "Contact" CTA 버튼 배치해줘. 메뉴 링크들은 각각 왼쪽에 2px 검정 보더로 구분하고, 호버 시 배경이 검정 + 글씨 밝은색으로 반전되게 해줘. 스크롤 내리면 네비게이션이 위로 숨고, 올리면 다시 나타나는 효과 넣어줘. 768px 이하 모바일에서는 메뉴/시계/CTA 숨기고 햄버거 버튼 보여줘. 햄버거 누르면 전체화면 메뉴가 열리고, 메뉴 항목은 큰 세리프 이탤릭으로 보여줘. 모든 앵커 링크에 부드러운 스크롤 적용.

2-3. 히어로 티커 히어로 섹션 하단에 검정 배경의 가로 띠를 넣고, 서비스 키워드들(Branding, Web Design, Art Direction, Motion, Photography, 3D Art, Spatial, Strategy)이 모노스페이스 대문자로 무한 흐름 스크롤되게 해줘. 각 키워드 사이에 작은 빨간 원형 도트 구분자 넣어줘.

2-4. 스크롤 애니메이션 (Reveal) 아래에서 위로 페이드인되는 reveal 애니메이션을 IntersectionObserver로 구현해줘. 같은 섹션 안에서도 요소마다 0.08초~0.4초씩 딜레이를 줘서 순차적으로 나타나게 해줘.

2-5. 포트폴리오 필터 포트폴리오 섹션 상단에 카테고리 필터 버튼들(All, Brand, Digital, Photo, Space)을 연결된 버튼 그룹 형태로 만들어줘. 2px 검정 보더로 이어 붙이고, 활성/호버 시 배경 검정 반전. 실제 필터 기능은 비주얼만 구현(클래스 토글).

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

디자인
3-1. 컬러 팔레트 메인 배경: #F7F4F0 (종이 질감 크림) 오프화이트: #F0EDEA 그레이 단계: #E5E2DE, #D0CBC4, #B5AFA6, #8A8279, #5C564E 빨간 포인트: #E63926 (메인 강조색, 호버 시 #C42F1F 다크 레드) 잉크 블랙: #1A1A1A (텍스트, 보더, 다크 요소) 보조 컬러: #F5D547(노랑), #2B5CE6(파랑), #1DB954(초록, 폼 성공 시) 모든 주요 구조 요소(섹션, 카드, 그리드 셀)에 2px 검정 실선 보더를 적극적으로 사용해서 브루탈리즘 느낌을 강하게 줘.

3-2. 서체 Google Fonts에서 아래 4개 불러와줘. Playfair Display (400~900, italic 포함) → 제목, 장식 텍스트, 큰 넘버링용 Space Grotesk (300~700) → 본문, UI, 버튼용 Noto Sans KR (300~900) → 한글용 JetBrains Mono (300~500) → 태그, 라벨, 카운터, 시계, 메타 정보용 기본 body 서체는 'Space Grotesk', 'Noto Sans KR', sans-serif로 해줘.

3-3. 전체 톤앤무드 인쇄 매거진의 에디토리얼 레이아웃을 웹으로 옮긴 느낌이야. 강한 타이포그래피 위계, 2px 검정 실선 보더로 그리드를 명확히 드러내는 브루탈리즘, 흑백+빨강의 강렬한 대비가 핵심이야. 섹션 태그는 모노스페이스 대문자로 작게, 앞에 빨간 작은 원(●) 장식을 넣어줘. 이미지는 기본적으로 약간의 그레이스케일 + 높은 콘트라스트 필터를 걸어두고, 호버 시 원래 색상으로 복원되게 해줘. ::selection 색상은 빨간 배경 + 흰 글씨로 해줘.

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

(1) Hero 매거진 커버 느낌이야. 상단에 "VOL.07 — ISSUE 01"과 날짜를 모노스페이스로 양쪽 정렬한 마스트헤드 바, 메인은 2컬럼 그리드(텍스트 / 이미지)로 구성해줘. 텍스트 쪽에 태그, 거대한 세리프 이탤릭 헤드라인 "We Make / Brands / Bolder." (Brands는 stroke-only 아웃라인 텍스트, Bolder.는 빨간색), 한글 설명, 버튼 2개(검정 채운 버튼 "View Works" + 테두리 버튼 "Our Story") 배치. 이미지 쪽에 전체를 채우는 사진, 좌상단에 빨간 배경 "Featured Project" 스탬프, 우하단에 반투명 큰 넘버 "01" 장식. 모든 컬럼 구분은 2px 검정 보더로 해줘. 하단에 검정 배경 티커 띠.

(2) About 2컬럼 그리드(왼쪽: 소개 / 오른쪽: 매니페스토). 컬럼 구분은 2px 검정 보더. 왼쪽에 큰 흐릿한 장식 텍스트 "Ab.", 태그, 한글 제목 "어중간함은 우리 사전에 없습니다", 한글 설명 2단락, 2칸짜리 이미지 그리드(2px 보더로 구분). 오른쪽에 보더로 감싼 3칸 가로 통계 바(200+ Projects, 8 Years, 35 Awards), 태그, 매니페스토 제목, 설명, "See Our Works →" 버튼.

(3) Services 카드 그리드 형태, 3컬럼. 각 카드는 2px 보더로 구분하고, 카드 안에 큰 세리프 이탤릭 번호(01~06), 서비스명, 한글 설명. 호버 시 아래에서 위로 검정 배경이 차오르면서 텍스트가 밝은색으로 반전, 번호는 빨간색으로 변하고, 화살표(→)가 슬라이드인 되게 해줘. 서비스: Brand Identity, Web & Digital, Motion & 3D, Space Design, Photography, Art Direction.

(4) Portfolio 12컬럼 비정형 모자이크 그리드로 6개 프로젝트를 다양한 크기(7칸+5칸, 4칸+8칸, 12칸 전폭 등)로 배치해줘. 각 셀에 2px 검정 보더. 기본 이미지는 그레이스케일 + 높은 콘트라스트, 호버 시 색상 복원 + 미세 확대. 호버 시 하단에서 올라오는 어두운 그라디언트 오버레이 위에 모노스페이스 카테고리 태그(빨간색) + 세리프 이탤릭 프로젝트명(흰색) 표시. 각 셀 좌상단에 작은 모노스페이스 ID 넘버(#047 등).

(5) Editorial Break 2컬럼(1:2 비율). 왼쪽은 빨간 배경에 모노스페이스 라벨 "Editorial Note" + 거대한 세리프 이탤릭 넘버 "05". 오른쪽은 종이 배경에 중앙 정렬된 세리프 이탤릭 한글 인용문 + 모노스페이스 출처.

(6) Case Study 2컬럼(이미지 1.4fr / 텍스트 1fr). 이미지 위에 좌하단 빨간 "REC" 인디케이터(깜빡이는 빨간 도트 + 타임코드) + 우하단 해상도 텍스트 오버레이. 텍스트 쪽에 태그, 큰 제목(일부 빨간색), 한글 설명, 메타 정보 테이블(Client/Year/Scope/Award를 행으로, 각 행 하단 보더 구분), "Full Case Study →" 빨간 버튼.

(7) Team 4컬럼 그리드, 카드 사이 2px 검정 보더. 각 카드에 세로 3:4 비율 이미지(기본 완전 흑백 + 높은 콘트라스트, 호버 시 컬러 복원), 호버 시 하단에서 올라오는 어두운 그라디언트 오버레이 + 모노스페이스 빨간색 직함. 이미지 아래 정보 영역(2px 상단 보더)에 세리프 이탤릭 한글 이름 + 모노스페이스 영문 직함. 팀원 4명.

(8) Testimonials 3컬럼 그리드, 카드 사이 2px 검정 보더. 각 카드에 큰 흐릿한 세리프 이탤릭 넘버(01~03), 세리프 이탤릭 한글 후기 텍스트, 빨간 구분선(40px), 작성자 이름(굵게), 모노스페이스 직함. 호버 시 배경이 오프화이트로 미세 변화.

(9) Full Bleed Image 높이 75vh, 전폭 이미지(그레이스케일 + 콘트라스트 필터) 위에 반투명 어두운 오버레이. 중앙에 거대한 세리프 이탤릭 텍스트 "BE / BOLDER" (BOLDER는 stroke-only 아웃라인 흰색).

(10) Contact 2컬럼(비주얼 / 폼). 왼쪽에 2px 보더가 있는 이미지 + 아래에 2×2 그리드 정보 카드(Email, Phone, Studio 주소, Hours), 각 항목 모노스페이스 라벨 + 값. 오른쪽에 세리프 이탤릭 한글 제목 "프로젝트를 시작합시다", 설명, 폼 4필드, 제출 버튼(검정 배경, 호버 시 빨간색).

Footer 검정 배경, 밝은 텍스트. 4컬럼(브랜드+설명 2fr / Navigation 1fr / Services 1fr / Social 1fr). 컬럼 구분은 미세한 흰색 반투명 보더. 하단에 모노스페이스 저작권(© 2026 BOLDER 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)로 컬러, 서체 등 모두 관리해줘. 반응형은 1100px, 768px 두 구간으로 미디어쿼리 작성해줘. 1100px 이하: Hero/About/Case Study/Contact/Editorial Break 1컬럼, Services 2컬럼, Portfolio 6컬럼 단위로 축소, Team 2컬럼, 후기 1컬럼. 768px 이하: 햄버거 메뉴 활성화, Services/Portfolio/Team 1컬럼, 섹션 패딩 축소, 풀블리드 이미지 높이 50vh.

4-3. JavaScript 관련 IntersectionObserver로 스크롤 reveal 애니메이션, setInterval로 로딩 카운터와 실시간 시계, scroll 이벤트로 네비게이션 숨김/표시 처리. DOM API만 사용, 별도 번들러 없이 전역 스코프에서 동작.

추가 조건 언어는 한국어 위주, 섹션 태그·메뉴·버튼 텍스트 등은 영어로 해줘. HTML lang="ko"로 설정해줘. 콘텐츠 최대 너비는 1440px, 섹션 좌우 패딩 2rem 기본. 버튼 화살표는 인라인 SVG로 직접 넣어줘. 모든 주요 구조 요소에 2px 검정 실선 보더를 적극 활용해서 브루탈리즘 에디토리얼 무드를 강하게 유지해줘. 코드에 영역별로 주석 넣어줘 (예: /* ===== HERO ===== */). 실제 서버 없이 로컬에서 HTML 파일 하나만 열어도 완전하게 동작해야 해.