0004

HTML, CSS, JavaScript만 사용해서 단일 HTML 파일로 자연 친화적 크리에이티브 디자인 스튜디오 웹사이트를 만들어줘. 스튜디오 이름은 "BARAM(바람)"이고, 한국어로 'wind'라는 뜻이야. 한국어 위주 사이트이고, 전체적으로 자연·대지·따뜻한 톤의 어시(Earthy) 테마로 만들어줘. 종이 질감과 흙, 모래, 숲의 색감을 전면에 활용해서 "자연에서 영감받은 공방" 같은 분위기를 만들어줘.

프로그램 개요 총 10개 섹션(페이지)으로 구성된 원페이지 스크롤 웹사이트야. 섹션 순서는 아래와 같아.
(1) Hero — 좌우 분할 패널 (2) Manifesto — 대형 타이포 선언문 (3) About — 비대칭 이미지+텍스트 레이아웃 (4) Services — 아코디언 형태 (5) Portfolio — 비대칭 매이슨리 갤러리 (6) Image Break — 전체화면 이미지+인용문 (7) Case Study — 대표 프로젝트 상세 (8) Team — 원형 프로필 카드 (9) Testimonials — 슬라이드 후기 (10) Contact — 좌우 분할 폼

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

기능
2-1. 프리로더 페이지 처음 열리면 어두운 흙색(var(--earth), #3d2c1e) 배경에 "바람"이라는 한글 텍스트가 모래색(var(--sand))으로 크게 표시돼. 텍스트 아래에 가로로 왔다갔다 하는 얇은 바람 느낌의 라인 애니메이션을 넣어줘 (scaleX 0→1→0 좌우 반복). 그 아래에 "BARAM STUDIO" 서브텍스트를 연한 모래색으로 작게 표시해줘. 페이지 로드 후 약 1.2초 뒤에 프리로더가 왼쪽에서 오른쪽으로 clip-path inset 애니메이션으로 슬라이드되며 사라지게 해줘 (1.2초 동안).

2-2. 네비게이션 상단 고정 네비게이션 바를 만들어줘. 왼쪽에 BARAM 로고 — 바람을 형상화한 인라인 SVG 아이콘(곡선 path 3개)과 "BARAM" 텍스트를 나란히 배치해줘. SVG에 호버 시 20도 회전 효과 넣어줘. 오른쪽에 메뉴 링크들(소개, 서비스, 작업, 프로젝트, 팀, 연락) 배치해줘. 스크롤 60px 이상 내려가면 네비게이션 배경이 반투명 크림색(rgba(250,247,242,0.92)) + backdrop-filter blur(12px)로 바뀌고, 하단에 아주 연한 그림자가 생기게 해줘. 768px 이하 모바일에서는 메뉴 링크들 숨기고 햄버거 버튼(가로선 3개, 각 22px×2px) 보여줘. 햄버거 누르면 전체화면 모바일 메뉴(var(--cream) 배경)가 페이드인 되면서 나타나고, 메뉴 항목(2rem 크기) 클릭하면 닫히게 해줘. 햄버거 활성화 시 위아래 선이 X자로 회전하고 가운데 선은 투명해지게 해줘. 모든 앵커 링크 클릭 시 부드러운 스크롤로 이동하게 해줘 (e.preventDefault() + scrollIntoView).

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

.anim: 아래에서 위로 30px 이동 + 페이드인 (0.7초)
.anim-left: 왼쪽에서 오른쪽으로 40px 이동 + 페이드인 (0.8초)
.anim-right: 오른쪽에서 왼쪽으로 40px 이동 + 페이드인 (0.8초)
.anim-scale: 0.92배에서 1배로 스케일업 + 페이드인 (0.7초) IntersectionObserver 사용하고, threshold 0.1, rootMargin "0px 0px -30px 0px"으로 설정해줘. 같은 섹션 안에서 요소마다 순차 딜레이를 주기 위해 .d1~.d6 클래스(0.1초~0.6초 transition-delay)를 만들어서 활용해줘. 모든 애니메이션의 이징은 cubic-bezier(0.25,0.46,0.45,0.94)로 통일해줘.
2-4. 서비스 아코디언 서비스 5개 항목을 아코디언 형태로 만들어줘. 각 항목 헤더 클릭 시 해당 항목만 열리고(max-height 전환), 나머지는 닫히게 해줘. 열린 항목의 토글 버튼(+ 기호)은 45도 회전하면서 배경이 모래색으로 채워지고, 닫힌 항목은 원형 테두리만 보이게 해줘. 헤더 호버 시 padding-left가 1rem 추가되면서 이름 색이 모래색으로 바뀌는 인터랙션 넣어줘. 첫 번째 항목은 기본으로 열려있게 해줘.

2-5. 후기 슬라이더 3개의 후기를 가로로 슬라이드하는 형태로 만들어줘. 하단에 점(dot) 인디케이터 넣어줘. 점 클릭으로도 이동 가능하게 하고, 6초마다 자동 슬라이드 되게 해줘. 현재 슬라이드에 해당하는 점은 모래색(var(--sand))으로 채워지고 가로로 28px까지 늘어나는(border-radius: 5px) 알약 형태로 강조해줘.

2-6. 문의 폼 이름(필수), 이메일(필수), 프로젝트 유형, 메시지(필수) 4개 필드로 만들어줘. 이름과 이메일은 한 줄에 나란히 2컬럼 배치해줘 (모바일에서는 1컬럼). 제출하면 실제 전송 없이, 버튼 텍스트가 "보냈습니다!"로 바뀌면서 배경이 숲초록색(var(--forest-light))으로 변하게 해줘. 3초 후 원래대로 복구되면서 폼 리셋해줘.

2-7. 그레인(Grain) 텍스처 오버레이 body::before로 전체 화면을 덮는 고정 오버레이를 만들고, SVG 인라인 필터(feTurbulence fractalNoise, baseFrequency 0.9, numOctaves 4)로 미세한 종이 노이즈 질감을 넣어줘. opacity 0.03, pointer-events: none으로 설정해줘.

디자인
3-1. 컬러 팔레트 CSS 변수(Custom Properties)로 아래 컬러들을 :root에 전부 정의해줘:

--earth: #3d2c1e (짙은 흙색, 주요 다크 배경)
--earth-mid: #5c4033 (중간 흙색)
--earth-light: #8b6f47 (밝은 흙색)
--sand: #d4a76a (모래색, 메인 포인트)
--sand-light: #e8c9a0 (밝은 모래색)
--cream: #f5efe6 (크림, 보조 배경)
--paper: #faf7f2 (종이색, 메인 밝은 배경)
--forest: #2d5016 (숲 초록, 진한)
--forest-light: #5a8a3c (숲 초록, 밝은)
--sky: #6ba3be (하늘색)
--sky-light: #a8d4e6 (밝은 하늘색)
--rust: #b85c38 (녹슨 붉은색, 서브 포인트)
--rust-light: #e07b50 (밝은 러스트)
--clay: #c4956a (점토색)
--charcoal: #2a2a28 (숯색, 푸터 배경)
--text: #2a2520 (본문 텍스트)
--text-mid: #6b5e52 (중간 톤 텍스트)
--text-light: #9a8d80 (연한 텍스트)
--white: #ffffff
3-2. 서체 Google Fonts에서 'Jua' (한글 라운드 서체) 불러와줘. body 전체 font-family를 'Jua', sans-serif로 설정해줘. 모든 텍스트에 Jua 서체 하나만 사용해서 통일감 있는 따뜻한 느낌을 줘.

3-3. 전체 톤앤무드 자연 공방, 수공예 장인의 작업실 같은 따뜻하고 정직한 느낌이야. 배경은 주로 var(--paper)와 var(--cream)을 교차 사용해서 부드러운 리듬을 만들어줘. 다크 섹션(Hero 왼쪽, Services, Testimonials)은 var(--earth) 배경을 사용해줘. 섹션 제목 위에는 항상 작은 태그(.sec-tag)를 넣어줘 — 영문 대문자, var(--rust) 색, letter-spacing 0.35em, 왼쪽에 6px 원형 도트(.sec-tag-dot) 포함. 섹션 제목(.sec-title)은 clamp(2rem, 4vw, 3rem) 크기, var(--earth) 색. 제목 아래에는 60px 너비, 3px 높이의 모래색 구분선(.divider-organic, border-radius 2px)을 넣어줘. 텍스트 선택(::selection)은 모래색 배경 + 흙색 글자로 해줘. 다크 섹션에서 밝은 섹션으로 전환될 때, 대각선 삼각형 형태의 경계선(CSS linear-gradient로 만든 대각 슬라이스, 높이 80px)을 넣어줘.

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

(1) Hero — 좌우 분할 패널 전체 화면(100vh)을 좌 45% / 우 55% 2컬럼 grid로 분할해줘. [왼쪽 패널] 배경 var(--earth), 하단에 모래색 광채 효과(radial-gradient, 30% 70% 위치, 10% 불투명도). 상단에 "CREATIVE STUDIO" 태그(모래색, letter-spacing 0.4em, 왼쪽에 30px 가로선), 그 아래 큰 제목 "바람처럼 / 자유로운 / 크리에이티브" (3줄, cream색, "자유로운"만 sand색 highlight 클래스), 그 아래 한글 설명 2줄(sand-light, opacity 0.8), 그 아래 "작업 보기" 버튼(sand 테두리 + 텍스트 + 화살표 인라인 SVG, 호버 시 sand 배경+earth 텍스트로 반전). 왼쪽 하단에 "SCROLL" 세로 텍스트(writing-mode: vertical-rl) + 세로선 넣어줘. [오른쪽 패널] 큰 이미지가 가득 차게 배치, 이미지 위에 왼쪽에서 20%까지만 var(--earth)에서 투명으로 그라디언트 오버레이(::after)를 깔아서 왼쪽 패널과 자연스럽게 연결해줘. 모든 텍스트 요소에 순차적 anim 클래스와 d1~d3 딜레이 적용해줘.

(2) Manifesto — 대형 타이포 선언문 전체 화면(min-height 100vh) 가운데 정렬, 배경 var(--cream). 배경에 거대한 한자 '風' 글자를 clamp(15rem, 30vw, 35rem) 크기, rgba(61,44,30,0.03) 색으로 정중앙에 깔아줘 (::before 의사요소). 중앙에 선언문 텍스트: "우리는 흙의 진심으로 빚고, / 바람의 자유로움으로 표현하며, / 빛과 함께 성장하는 / 디자인을 만듭니다." — "흙", "바람", "빛" 단어에 .em 클래스(rust색, 하단에 sand-light 2px 밑줄 장식) 적용. 아래에 "— BARAM 선언문, 2017" 크레딧(text-light, letter-spacing 0.2em). 텍스트 크기 clamp(1.5rem, 3.5vw, 2.5rem), line-height 2.

(3) About — 비대칭 이미지+텍스트 2컬럼 grid(1.1fr 1fr, gap 6vw), 양쪽 패딩 6vw. [왼쪽 — 비주얼] 메인 이미지: 상단은 둥근 반원(border-radius: 200px 200px 20px 20px), 3:4 비율, 그림자. 플로팅 이미지: 우하단에 45% 크기 원형(border-radius 50%) 이미지가 겹쳐서 떠 있게 해줘. paper색 6px 테두리와 그림자 적용. 회전 뱃지: 좌상단에 90px 원형 뱃지(rust 배경, cream 텍스트), 안에 "9" 큰 숫자 + "YEARS" 작은 텍스트. 15초 주기로 360도 회전하는 @keyframes 애니메이션 무한 반복해줘. [오른쪽 — 텍스트] sec-tag "ABOUT US", sec-title "대지 위에 뿌리내린 / 크리에이티브 공방", divider-organic, 한글 설명 2단락. 하단에 4개 정보 블록(2×2 grid, gap 1.5rem) — 각 블록은 cream 배경, border-radius 12px, 왼쪽에 sand색 3px 세로 보더. 블록 내용: 설립 "2017, 서울 · 양평" / 팀원 "9명의 장인들" / 프로젝트 "180+ 완성" / 수상 "22개 국내외". 레이블은 rust색 0.7rem letter-spacing 0.25em, 값은 text-mid 0.9rem.

(4) Services — 다크 배경 아코디언 배경 var(--earth), 상단과 하단에 대각선 삼각 경계선(::before, ::after로 paper→earth 대각 슬라이스, 높이 80px). 내부 콘텐츠 max-width 1100px, 가운데 정렬. sec-tag, sec-title, divider, sec-desc 모두 cream/sand 계열로 바꿔줘. 아코디언 5개 항목, 각 항목 사이에 sand 15% 투명도 하단 보더:

01 브랜드 아이덴티티: "로고, 컬러, 타이포그래피부터 브랜드 스토리텔링까지..."
02 디지털 경험 디자인: "웹사이트, 앱, 인터랙티브 콘텐츠를 자연스럽고 직관적으로..."
03 공간 디자인: "카페, 전시 공간, 쇼룸 등에 자연의 결을 담습니다..."
04 포토그래피 & 아트디렉션: "제품, 공간, 라이프스타일을 자연광 중심으로..."
05 에디토리얼 & 패키지: "매거진, 아트북, 브로슈어, 제품 패키지까지..." 헤더에 왼쪽 번호(sand 30% 투명도, 1.2rem) + 서비스명(clamp(1.2rem, 2.5vw, 1.7rem)), 오른쪽에 원형 토글 버튼(36px, sand 25% 보더).
(5) Portfolio — 비대칭 매이슨리 배경 paper, 상단에 좌우 분할 헤더(왼쪽에 sec-tag+title, 오른쪽에 설명 텍스트 우측 정렬). 3컬럼 grid, gap 1.5rem, 5개 프로젝트:

Soil & Root / BRANDING / pm-a 클래스(2:3 비율, grid-row span 2)
Wind Path / DIGITAL / pm-b 클래스(3:2 비율)
Dawn Field / PHOTOGRAPHY / pm-c 클래스(1:1 비율)
Earth Shelter / SPACE / pm-d 클래스(3:2 비율, grid-column span 2)
Grain Journal / EDITORIAL / pm-e 클래스(2:3 비율, grid-row span 2) 각 아이템에 border-radius 12px, overflow hidden. 이미지 기본 saturate(0.85), 호버 시 1.06배 확대 + saturate(1.1). 호버 시 하단에서 올라오는 어두운 그라디언트 오버레이(90% 투명 → 투명) 위에 카테고리(sand, 0.7rem, letter-spacing 0.25em) + 프로젝트명(cream, 1.2rem) 표시.
(6) Image Break — 전체화면 인용문 높이 70vh, 배경 이미지 object-fit cover, 기본 sepia(15%) saturate(0.9) 필터. 45% 어두운 오버레이. 중앙에 큰 텍스트: "좋은 디자인은 / 좋은 땅에서 자란 나무처럼 / 오래 갑니다" (cream, clamp(2rem, 5vw, 4rem)). 아래에 "BARAM PHILOSOPHY" 작은 태그(sand-light, 0.85rem, letter-spacing 0.3em).

(7) Case Study — 대표 프로젝트 배경 var(--cream), 패딩 8rem 6vw. 상단에 sec-tag "CASE STUDY" + sec-title "프로젝트 이야기" + divider. 2컬럼 grid(1:1, gap 4rem): [왼쪽] 이미지(4:3 비율, border-radius 16px, 그림자). 좌상단에 -1.5rem 오프셋으로 70px 원형 숫자 뱃지(earth 배경, sand 텍스트, "047"). [오른쪽] sec-tag "FEATURED", 제목 "자연 속 쉼터, / Earth Shelter" (clamp(1.5rem,3vw,2.2rem)), divider, 한글 설명(양평 카페 브랜딩 프로젝트 내용), 하단에 메타 정보 4줄(세로 리스트, 각 줄 1rem 세로 패딩 + earth 8% 하단 보더, 좌측 label은 text-light, 우측 value는 earth색): 클라이언트 "Earth Shelter 카페", 연도 "2025", 분야 "브랜딩 / 공간 / 패키지", 수상 "iF Design Award 2025".

(8) Team — 원형 프로필 배경 paper, 중앙 정렬 헤더. 4명을 flexbox(justify-content center, gap 3rem, flex-wrap)로 배치. 각 멤버 max-width 200px, 텍스트 중앙 정렬. 원형 아바타(180px, 50% border-radius, sand-light 3px 보더). 호버 시 보더 rust색, 6px 위로 이동, rust 15% 그림자 효과. 이미지 기본 sepia(10%), 호버 시 sepia(0%). 팀원: 한서윤/크리에이티브 디렉터, 윤재혁/아트 디렉터, 정다은/공간 디자이너, 김민호/포토그래퍼. 이름 earth색 1.15rem, 역할 rust색 0.8rem letter-spacing 0.1em.

(9) Testimonials — 다크 배경 슬라이더 배경 var(--earth), 상단에 대각선 경계(paper→earth). 중앙 정렬 헤더(sec-tag, sec-title, divider 모두 sand/cream 계열). 슬라이더 max-width 800px, 가운데. 각 슬라이드 패딩 3rem, 반투명 배경(white 4%), sand 12% 보더, border-radius 16px. 큰 따옴표(3rem, sand, opacity 0.5) + 후기 텍스트(sand-light, clamp(1.1rem, 2vw, 1.4rem), line-height 2) + 작성자 정보(48px 원형 아바타에 이모지: 🌿, ☕, 🍯 / 이름 cream / 역할 sand). 후기 3개: 이나연/대표,숲속작업실(도예가 비유), 박준서/오너,토담카페(편안함 디자인), 강하은/대표,꿀빛농원(패키지 촉감).

(10) Contact — 좌우 분할 2컬럼 grid(1:1), min-height 100vh. [왼쪽] 이미지 + 어두운 그라디언트 오버레이(135도, earth 70% → rust 30%). 하단에 큰 텍스트 "함께 / 만들어 볼까요?" (cream, clamp(2rem,4vw,3.5rem)) + 설명 (sand-light). [오른쪽] paper 배경, 세로 중앙 정렬. sec-tag "CONTACT", sec-title "연락 주세요". 상단에 4개 정보 블록(2×2 grid): 이메일 hello@baram.studio(링크, sand-light 밑줄, 호버 시 rust), 전화 02-987-6543, 서울 스튜디오 마포구 연남동 45-12, 양평 작업실 양평군 서종면 12-8. 레이블 rust 0.7rem, 값 text-mid 0.9rem. 폼 필드는 cream 배경, earth 10% 보더, border-radius 10px, 포커스 시 보더 rust색. 제출 버튼: 100% 너비, earth 배경 + sand 텍스트, border-radius 10px, 호버 시 rust 배경 + cream 텍스트 + 위 2px + rust 25% 그림자.

Footer charcoal 배경(#2a2a28), sand 50% 투명도 텍스트. 4컬럼 grid(2fr 1fr 1fr 1fr):

첫 열: "🌿 BARAM" 로고(sand, 1.5rem) + 한글 소개.
메뉴 열: 소개, 서비스, 작업, 연락.
서비스 열: 브랜딩, 디지털 디자인, 공간 디자인, 포토그래피.
소셜 열: Instagram, Behance, LinkedIn, Vimeo. 하단에 구분선(sand 8% 보더) + © 2026 BARAM Studio. All rights reserved.
3-5. 이미지 모든 이미지는 실제 이미지 URL을 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컬럼(왼쪽 패널 위 + 오른쪽 이미지 아래 50vh), About 1컬럼(이미지 max-width 450px 가운데), Portfolio 2컬럼, Case Study 1컬럼, Contact 1컬럼(이미지 50vh), Footer 2컬럼. 768px 이하: 햄버거 메뉴 활성화, Portfolio 1컬럼, 정보 블록 1컬럼, 폼 row 1컬럼, Footer 1컬럼, 패딩 전체 축소, hero scroll cue 숨기기.

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

추가 조건 HTML lang="ko"로 설정해줘. 전체적으로 섹션 좌우 패딩 6vw 기본으로 해줘. hero-btn 버튼의 화살표는 인라인 SVG(→ 모양 path)로 직접 넣어줘. 모든 transition에 cubic-bezier(0.25,0.46,0.45,0.94) 이징 커브 적용하고, 호버 효과는 0.3~0.5초 사이로 부드럽게 해줘. 코드에 영역별로 주석 구분 넣어서 가독성 좋게 해줘. (예: /* ===== HERO ===== */ 형태) 실제 서버 없이 로컬에서 HTML 파일 하나만 열어도 완전하게 동작해야 해.