0006

HTML, CSS, JavaScript만 사용해서 단일 HTML 파일로 한국어 크리에이티브 디자인 스튜디오 웹사이트를 만들어줘. 스튜디오 이름은 "NAMU"이고, '나무'라는 뜻이야. 한국어 위주 + 영어 혼용 사이트이고, 전체적으로 신문(Newspaper / Broadsheet) 에디토리얼 레이아웃을 모티브로 한 라이트 테마로 만들어줘. "느린 것이 아름다운 스튜디오"가 슬로건이야.

1. 프로그램 개요
총 10개 섹션으로 구성된 원페이지 스크롤 웹사이트야. 전체 컨셉은 클래식 신문 1면처럼 그리드 라인, 세로 구분선(column rule), 드롭캡, 섹션 라벨, 페이지 번호 등 신문 타이포그래피 요소를 적극 활용하는 거야.

섹션 순서는 아래와 같아:

(1) Hero — 신문 1면 스타일 마스트헤드 + 메인 기사 레이아웃 (2) Philosophy — 어두운 배경의 에디토리얼 인용문 구간 (3) About — 신문 3단 칼럼 레이아웃 스튜디오 소개 (4) Services — 신문 표(table) 스타일 서비스 디렉토리 (5) Portfolio — 신문 브로드시트 스타일 이미지 그리드 (6) Centerfold — 전체 화면 피처드 이미지 (신문 중앙 화보) (7) Feature Article — 케이스 스터디 기사 레이아웃 (8) Team — 인물 디렉토리 카드 (9) Testimonials — "독자 편지(Letters to the Editor)" 스타일 후기 (10) Contact — "안내 광고(Classifieds)" 스타일 문의 섹션

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

2. 기능
2-1. 로딩 화면
페이지 처음 열리면 검정(--ink) 배경에 "NAMU" 텍스트가 크게 중앙에 표시돼. 텍스트 아래에 현재 날짜를 한국어 형식(예: "2026년 3월 22일 토요일")으로 작은 글씨, letter-spacing 넓게 표시해줘. 그 아래에 가로 200px짜리 얇은(1px) 로딩 바가 왼쪽에서 오른쪽으로 차오르는 애니메이션 넣어줘. 배경은 어두운 색, 채워지는 바는 밝은 색(--paper)으로 해줘. 약 1.6초 후에 로딩 화면이 clip-path: inset(100% 0 0 0) 방식으로 아래에서 위로 걷히듯 사라지게 해줘. transition은 1초, cubic-bezier(.77,0,.175,1) 이징 사용해줘.

2-2. 네비게이션
상단 고정(fixed) 네비게이션 바를 만들어줘. 높이 56px. 왼쪽에 "NAMU" 텍스트 로고(letter-spacing 넓게, 앵커 링크로 #hero 이동), 가운데에 메뉴 링크들(소개, 서비스, 작업, 프로젝트, 팀, 연락 — 한글), 오른쪽에 호수 정보(예: "No. 147 · 2026") 작은 글씨 + 앞에 짧은 가로선 장식을 배치해줘. 스크롤 50px 이상 내려가면 배경이 반투명 밝은색(rgba) + backdrop-filter: blur(10px)로 바뀌고, 하단에 얇은 보더가 생기게 해줘. 768px 이하 모바일에서는 메뉴 링크와 날짜 정보 숨기고 햄버거 버튼(가로선 3개) 보여줘. 햄버거 누르면 전체화면 모바일 메뉴(밝은 배경)가 페이드인 되면서 나타나고, 메뉴 항목 클릭하면 닫히게 해줘. 햄버거 활성화 시 위아래 선이 X자로 회전하고 가운데 선은 투명해지게 해줘. 모든 앵커 링크 클릭 시 부드러운 스크롤(smooth scroll)로 이동하게 해줘.

2-3. 스크롤 애니메이션 (Reveal)
각 섹션의 주요 요소들에 스크롤 시 아래에서 위로 25px 이동하면서 페이드인 되는 애니메이션 넣어줘. IntersectionObserver 사용하고, threshold 0.08, rootMargin "0px 0px -30px 0px"으로 설정해줘. 같은 섹션 안에서도 요소마다 0.1초~0.5초씩 딜레이를 줘서 순차적으로 나타나게 해줘 (d1~d5 클래스로 관리). transition은 opacity 0.7s ease, transform 0.7s cubic-bezier(.25,.46,.45,.94)로 해줘.

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

3. 디자인
3-1. 컬러 팔레트 (CSS 변수로 관리)
--ink: #1c1917         (가장 어두운 텍스트, 주요 제목)
--ink-soft: #44403c    (본문 텍스트)
--stone: #78716c       (보조 텍스트, 캡션)
--warm: #a8a29e        (메타 정보, 아주 연한 텍스트)
--sand: #d6d3d1        (구분선, 보더)
--linen: #f5f5f4       (일부 섹션 배경 — Services, Team, Contact)
--paper: #fafaf9       (메인 배경)
--white: #ffffff       (카드 배경)
--red: #dc2626         (강조 포인트 — 카테고리 라벨, 드롭캡)
--red-soft: #fecaca    (연한 레드)
--green: #16a34a       (폼 성공 상태)
--blue: #2563eb        (필요시 보조 강조)
3-2. 서체
Google Fonts에서 Jua (한글 서체, 부드럽고 둥근 느낌) 하나만 불러와줘. 기본 body 서체를 'Jua', sans-serif로 설정해줘. 전체 사이트가 이 하나의 서체로 통일되며, 크기와 letter-spacing, 굵기 변화로 위계를 만들어줘.

3-3. 전체 톤앤무드 — 신문 에디토리얼 스타일
핵심 디자인 원칙: 클래식 신문(broadsheet)의 타이포그래피와 그리드 시스템을 웹에 재해석한 것이야. 구체적으로:

신문 그리드 라인: body에 ::before 가상 요소로 페이지 좌우 경계를 나타내는 세로선을 고정 배경으로 깔아줘. linear-gradient로 중앙 기준 좌우 600px 지점에 1px 짜리 연한 선(--sand)을 35% 투명도로 넣어줘.

섹션 공통 장식 요소 (매 섹션 상단에 반복):

2px 두께의 검정 가로 구분선(section-rule)
그 아래에 좌측에 영문 대문자 섹션 라벨(font-size .65rem, letter-spacing .4em, --stone 색), 우측에 "PAGE XX" 형태의 페이지 번호(font-size .6rem, --warm 색)
한글 큰 제목(headline 클래스)
1px 얇은 구분선(section-rule-thin, --sand 색)
세로 구분선(column rule): 멀티 컬럼 레이아웃에서 칼럼 사이에 1px 세로선을 넣어 신문 단 느낌을 내줘.

드롭캡(Drop Cap): 주요 본문 첫 글자를 ::first-letter로 크게(3.5rem) 만들고 빨간색(--red)으로 처리해줘. float:left, line-height .85, 오른쪽 패딩 .4rem.

텍스트 선택 스타일: ::selection을 검정 배경 + 밝은 텍스트로 해줘.

이미지 공통: 기본적으로 filter: grayscale(15~30%)를 적용하고, 호버 시 grayscale(0)으로 컬러 복원되게 해줘. 이것이 신문 사진 느낌을 줘.

전체 콘텐츠 최대 너비: 1200px, 좌우 패딩 2rem.

본문 텍스트: font-size .95rem, color --ink-soft, line-height 2.1로 넉넉한 행간 사용해줘.

3-4. 각 섹션 디자인 상세
(1) Hero — 신문 1면 마스트헤드 min-height 100vh, padding-top 80px (네비게이션 공간 확보).

마스트헤드 영역 (중앙 정렬):

"NAMU" 를 아주 큰 타이틀(clamp(3rem,8vw,7rem), letter-spacing .08em)로 배치
그 아래에 "느린 것이 아름다운 크리에이티브 스튜디오" 서브타이틀(font-size .75rem, letter-spacing .5em, --stone 색)
1px 검정 가로선
가로로 양쪽 정렬된 메타 정보 3개: 좌측 "서울특별시 · 날짜", 중앙 "제147호 · 창간 2018년", 우측 "ISSN 0000-0000" (font-size .7rem, --warm 색, letter-spacing .15em)
마스트헤드 전체에 하단 4px double 보더(이중선, --ink 색)
메인 기사 그리드: 마스트헤드 아래에 2컬럼 그리드 grid-template-columns: 1.5fr 1px 1fr (메인 영역 : 세로 구분선 : 사이드바) 배치.

왼쪽 메인 기사:

3:2 비율 대형 이미지
이미지 아래에 캡션(font-size .7rem, --stone 색, 상단 1px 보더)
큰 헤드라인(clamp(1.8rem,4vw,2.8rem))으로 "디자인이란 세상을 바라보는 또 하나의 언어입니다" (줄바꿈 포함)
드롭캡 적용된 리드 문단 — 나무 스튜디오 소개 텍스트 (느림의 가치, 나무 성장 비유 등)
오른쪽 사이드바: 3개의 작은 기사 아이템을 세로로 쌓아줘.

각 아이템: 카테고리 라벨(font-size .6rem, --red 색, letter-spacing .25em) + 16:10 비율 이미지(일부 아이템) + 제목(1rem) + 짧은 설명(.8rem, --stone 색)
아이템 사이에 하단 1px 보더(--sand), 마지막은 보더 없음
카테고리 예시: "LATEST WORK", "AWARD", "EDITORIAL"
내용 예시: "고요한 정원 양평 프로젝트", "iF 디자인 어워드 2026 수상", "느린 디자인 선언문"
(2) Philosophy — 에디토리얼 인용문 배경 검정(--ink), 텍스트 밝은색(--paper). padding 5rem 상하. 내부에 최대 800px 너비 중앙 정렬 박스를 넣고, 1px --ink-soft 색 보더로 테두리를 쳐줘. 내부 패딩 4rem. 박스 좌상단과 우하단에 ✦ 문자를 작은 크기(.7rem, --stone 색)로 장식 배치(position:absolute). 중앙에 큰 인용문(clamp(1.3rem,3vw,2rem), line-height 2): "우리는 빠르게 만들지 않습니다. / 나무가 자라듯, 천천히 그리고 단단하게. / 유행이 지나도 남는 것만 만듭니다. / 그것이 우리가 믿는 디자인입니다." 강조 단어는 <em> 태그로 감싸되 font-style:normal로 하고, 하단에 2px --red 보더(밑줄)를 넣어줘. 인용문 아래에 "— NAMU 선언문, 2018" (font-size .75rem, --stone 색, letter-spacing .3em).

(3) About — 신문 3단 칼럼 배경 --paper, padding 5rem 상하. 상단에 신문식 섹션 헤더(섹션 라벨 "ABOUT THE STUDIO" + 페이지 번호 "PAGE 03" + 한글 제목 "스튜디오 소개" + 얇은 구분선). 3컬럼 그리드 grid-template-columns: 1fr 1px 1fr 1px 1fr (칼럼 사이에 세로 구분선 포함).

칼럼 1 "뿌리": 3:4 비율 이미지 + 제목 + 드롭캡 적용 본문(2018년 연남동 시작, 시간이 증명하는 디자인) + 하단 통계 "8 YEARS" (숫자 2.5rem --red 색, 라벨 .8rem --stone 색, 상단 1px 보더) 칼럼 2 "가지": 3:4 비율 이미지 + 제목 + 드롭캡 적용 본문(서울과 제주 두 곳, 12명 크리에이터) + 하단 통계 "12 MEMBERS" 칼럼 3 "열매": 이미지 없이 제목 + 드롭캡 적용 본문(170개 프로젝트, 어워드) + 하단 통계 2개 "170+ PROJECTS", "28 AWARDS"

(4) Services — 신문 표(Table) 스타일 배경 --linen, padding 5rem 상하. 상단에 신문식 섹션 헤더("SERVICES DIRECTORY" + "PAGE 04" + "서비스 안내"). HTML <table> 요소를 사용해서 실제 표처럼 만들어줘. thead: 4개 컬럼 헤더(NO. / SERVICE / DESCRIPTION / CATEGORY) — font-size .6rem, letter-spacing .3em, --stone 색, font-weight 400, 하단 2px --ink 보더. tbody: 5개 행, 각 행에 하단 1px --sand 보더, 호버 시 아주 연한 빨강 배경(rgba(220,38,38,.02)).

001: 브랜드 아이덴티티 / 설명 / IDENTITY 태그
002: 디지털 디자인 / 설명 / DIGITAL 태그
003: 공간 디자인 / 설명 / SPACE 태그
004: 에디토리얼 & 출판 / 설명 / PRINT 태그
005: 포토그래피 / 설명 / PHOTO 태그 각 행의 번호는 .8rem --warm 색 tabular-nums, 서비스명은 1.15rem, 설명은 .85rem --stone 색 max-width 400px, 카테고리는 인라인 태그(작은 테두리 박스, .6rem, letter-spacing .15em). 768px 이하 모바일에서는 thead 숨기고 각 행을 블록으로 쌓아줘.
(5) Portfolio — 브로드시트 이미지 그리드 배경 --paper, padding 5rem 상하. 상단에 신문식 섹션 헤더("SELECTED WORKS" + "PAGE 05" + "포트폴리오"). display:grid; grid-template-columns: repeat(6,1fr); grid-auto-rows: 180px; gap: .8rem 그리드에 7개 아이템을 다양한 크기로 배치:

아이템1: col 1-4, row 1-3 (큰 메인) — "고요한 정원" / BRANDING
아이템2: col 4-6, row 1-2 — "숲속 서재" / SPACE
아이템3: col 6-7, row 1-3 (세로 길게) — "새벽빛" / PHOTOGRAPHY
아이템4: col 4-6, row 2-3 — "계절의 기록" / EDITORIAL
아이템5: col 1-3, row 3-4 — "느린 산책" / DIGITAL
아이템6: col 3-5, row 3-5 — "지평선" / BRANDING
아이템7: col 5-7, row 3-5 — "네온 산책" / ART DIRECTION 각 아이템: 이미지 꽉 채움(object-fit:cover), 기본 grayscale(30%), 호버 시 grayscale(0) + scale(1.04). 호버 시 하단에서 올라오는 어두운 그라디언트 오버레이(opacity 0→1) 위에 카테고리(.55rem, --warm 색) + 프로젝트명(1rem, --paper 색) 표시. 1024px 이하: 2컬럼, grid-auto-rows 200px, 첫 아이템만 col span 2. 768px 이하: 1컬럼, grid-auto-rows 220px.
(6) Centerfold — 전체 화면 피처드 높이 75vh(768px 이하에서 60vh), overflow:hidden. 전체를 채우는 배경 이미지(object-fit:cover, grayscale 20%). 위에 그라디언트 오버레이: linear-gradient(to top, rgba(28,25,23,.85) 0%, rgba(28,25,23,.2) 50%, transparent). 하단 좌측에 텍스트 배치(max-width 600px, padding 4rem):

카테고리 "FEATURED STORY" (.6rem, letter-spacing .4em, --red-soft 색)
제목 "좋은 디자인은 오래된 나무와 같습니다" (clamp(2rem,4vw,3rem), --paper 색)
설명 (.9rem, --sand 색, line-height 1.9) — 빠르게/천천히 자란 나무 비유
(7) Feature Article — 케이스 스터디 배경 --paper, padding 5rem 상하. 상단에 신문식 섹션 헤더("FEATURE ARTICLE" + "PAGE 07" + "프로젝트 이야기"). 2컬럼 그리드 grid-template-columns: 2fr 1px 1fr (본문 : 세로 구분선 : 사이드바).

왼쪽 본문:

4:3 비율 이미지(grayscale 15%)
바이라인 "NAMU STUDIO · 2025" (앞에 20px 빨간 가로선 장식, .7rem, --stone 색)
부제 "양평의 작은 카페에 사계절을 담다" (subheadline 클래스)
드롭캡 적용 본문 2단락 — 양평 서종면 목조 건물 카페 리노베이션, 사계절 정원 컨셉, 자연스러움 중시 등
오른쪽 사이드바:

"PROJECT DATA" 라벨(--red 색)
메타 정보 목록(각 항목: 라벨 + 값, justify-content:space-between, 하단 1px 보더): 클라이언트/사계정원 카페, 위치/경기 양평, 연도/2025, 분야/브랜딩·공간·패키지, 면적/182㎡, 수상/iF Design Award 2026, 사진/김민호
아래에 클라이언트 인용문 + "— 사계정원 오너, 박준서"
(8) Team — 인물 디렉토리 배경 --linen, padding 5rem 상하. 상단에 신문식 섹션 헤더("STAFF DIRECTORY" + "PAGE 08" + "팀 소개"). 4컬럼 그리드, gap 1.5rem. 각 카드: 1px --sand 보더 + --white 배경, 호버 시 부드러운 box-shadow(0 4px 20px rgba(0,0,0,.06)). 카드 내부: 1:1 정사각형 비율 이미지(object-fit:cover, 기본 grayscale 25%, 호버 시 컬러 복원, 이미지 하단 1px --sand 보더) + 하단 정보 영역(padding 1rem)에 이름(1.05rem) + 역할(영문, .7rem, --red 색, letter-spacing .15em). 팀원 4명:

한서윤 / CREATIVE DIRECTOR
윤재혁 / ART DIRECTOR
정다은 / SPACE DESIGNER
김민호 / PHOTOGRAPHER 1024px 이하: 2컬럼. 768px 이하: 2컬럼 유지.
(9) Testimonials — 독자 편지(Letters to the Editor) 배경 --paper, padding 5rem 상하. 상단에 신문식 섹션 헤더("LETTERS TO THE EDITOR" + "PAGE 09" + "독자 편지"). 3컬럼 그리드, gap 1.5rem. 1024px 이하에서 1컬럼.

각 카드: 1px --sand 보더 + --white 배경 + padding 2rem. 카드 좌상단에 " (큰따옴표) 장식 문자를 position:absolute로 배치(font-size 4rem, --sand 색, line-height 1). 호버 시 보더 색이 --ink로 진해짐. 카드 내부: 후기 텍스트(.9rem, --ink-soft 색, line-height 2) + 1px 구분선(--sand) + 작성자 이름(.9rem) + 직함(.7rem, --stone 색).

후기 3개:

이나연 / 대표 · 숲속작업실 — "오래된 편지를 주고받는 것 같았습니다" 느낌의 정성스러운 작업 후기
박준서 / 오너 · 사계정원 카페 — 매장 손님들이 '편안하다'고 느끼는 공간 디자인 후기
강하은 / 대표 · 꿀빛농원 — 패키지 디자인 후 고객들이 상자를 버리지 않고 보관한다는 후기
(10) Contact — 안내 광고(Classifieds) 스타일 배경 --linen, padding 5rem 상하. 상단에 신문식 섹션 헤더("CLASSIFIEDS & INQUIRIES" + "PAGE 10" + "연락 & 문의"). 2컬럼 그리드 grid-template-columns: 1fr 1px 1fr (정보 : 세로 구분선 : 폼).

왼쪽 정보 영역:

4:5 비율 이미지(grayscale 15%)
그 아래에 연락 정보 목록(각 항목: 카테고리 라벨(.6rem, --red 색, letter-spacing .3em) + 내용(.9rem, --ink-soft)):
이메일: hello@namu-studio.kr (링크, 하단 1px --sand 보더, 호버 시 --ink)
전화: 02-322-0818
서울 스튜디오: 마포구 연남로 23, 2층
제주 스튜디오: 제주시 한림읍 귀덕리 17
오른쪽 폼 영역:

부제 "편지를 보내주세요" (subheadline 클래스)
안내 문구 "새 프로젝트, 협업, 혹은 가벼운 인사도 좋습니다. 48시간 내에 정성껏 답장 드리겠습니다."
폼 필드 스타일: 1px --sand 보더, --white 배경, 포커스 시 보더 --ink로 변경. font-family는 Jua 유지.
라벨은 .65rem, letter-spacing .25em, --stone 색, display:block.
이름 + 이메일은 2컬럼 그리드(fr fr, gap 1rem).
프로젝트 유형 input, 메시지 textarea(resize:vertical, min-height 100px).
제출 버튼: width 100%, --ink 배경, --paper 텍스트, letter-spacing .1em, 호버 시 --red 배경.
Footer: 상단에 4px double 보더(이중선, --ink), --paper 배경, padding 3rem 상 1.5rem 하. 4컬럼 그리드(2fr 1fr 1fr 1fr):

컬럼1: "NAMU" 브랜드명(1.3rem, letter-spacing .2em) + 소개문(.8rem, --stone, max-width 280px)
컬럼2 "NAVIGATION": 소개, 서비스, 작업, 연락 링크
컬럼3 "SERVICES": 브랜딩, 디지털, 공간 디자인, 포토그래피 링크
컬럼4 "SOCIAL": Instagram, Behance, LinkedIn, Vimeo 링크
각 컬럼 제목: .6rem, letter-spacing .3em, --red 색
링크: .8rem, --stone 색, 호버 시 --ink 하단에 1px --sand 보더 후 저작권 줄: 좌측 "© 2026 NAMU Studio. All rights reserved." 우측 "ISSN 0000-0000 · 제147호" (.65rem, --warm 색).
4. 기술
4-1. 기본 구조
단일 HTML 파일 하나에 CSS(<style> 태그)와 JavaScript(<script> 태그) 모두 포함해줘. 외부 라이브러리나 프레임워크 절대 사용하지 말고, 순수 HTML + CSS + Vanilla JS로만 만들어줘. Google Fonts CDN만 외부 링크 허용 (https://fonts.googleapis.com/css2?family=Jua&display=swap).

4-2. CSS 관련
CSS 변수(Custom Properties)로 모든 컬러 관리해줘. *,*::before,*::after { margin:0; padding:0; box-sizing:border-box } 리셋 적용. html에 scroll-behavior:smooth, body에 -webkit-font-smoothing:antialiased, overflow-x:hidden 적용. 반응형은 1024px, 768px 두 구간으로 미디어쿼리 작성해줘:

1024px 이하: Hero 그리드 1컬럼(세로 구분선 숨김), About 1컬럼(세로 구분선 숨김), Feature Article 1컬럼, Portfolio 2컬럼, Team 2컬럼, Testimonials 1컬럼, Contact 1컬럼, Footer 2컬럼, 서비스 테이블 폰트 .85rem
768px 이하: 네비게이션 메뉴/날짜 숨기고 햄버거 표시, 컨테이너 패딩 1.2rem, Portfolio 1컬럼, Team 2컬럼 유지, 서비스 테이블 thead 숨기고 각 행/셀 블록 표시, 폼 2컬럼→1컬럼, Footer 1컬럼, Centerfold 60vh + 패딩 2rem
4-3. JavaScript 관련
4개 기능만 구현:

로더: window load 이벤트 후 1.6초 뒤에 로더에 'done' 클래스 추가
모바일 메뉴 토글: 햄버거와 모바일 메뉴에 'on' 클래스 토글
네비게이션 고정: scroll 이벤트에서 scrollY>50이면 'stuck' 클래스 토글
스크롤 리빌: IntersectionObserver로 'rv' 클래스 요소 감시, 뷰포트 진입 시 'show' 클래스 추가
폼 전송: submit 이벤트 가로채서 버튼 텍스트/색상 변경 후 3초 뒤 복원
부드러운 스크롤: a[href^="#"] 클릭 시 preventDefault 후 해당 요소로 scrollIntoView
별도의 번들러나 모듈 시스템 없이 전역 스코프에서 동작하게 해줘.

5. 추가 조건
HTML lang="ko"로 설정해줘.
<title>은 "NAMU — 느린 것이 아름다운 스튜디오"로 해줘.
콘텐츠 최대 너비 1200px, 기본 좌우 패딩 2rem.
모든 transition에 일관된 이징 적용하고, 호버 효과는 0.3~0.6초 사이로 부드럽게 해줘.
코드에 영역별로 주석 구분 넣어서 가독성 좋게 해줘. (예: /* ===== HERO ===== */ 형태)
실제 서버 없이 로컬에서 HTML 파일 하나만 열어도 완전하게 동작해야 해.
이미지는 적절한 placeholder URL을 넣거나, 실제 이미지가 없으면 빈 이미지 또는 그라디언트 배경으로 대체해줘.
한국어 콘텐츠(제목, 본문, 메뉴, 버튼 등)와 영어 콘텐츠(섹션 라벨, 카테고리 태그, 역할명, 통계 라벨 등)를 자연스럽게 혼용해줘.