사용자가 제공한 콘텐츠를 기반으로 웹페이지를 생성하세요. 웹페이지 스타일 요구사항은 다음과 같습니다.

### I. 시각적 스타일 포지셔닝 - **예술적인 손 그림 스타일**: 라인 아트 스타일을 채택하여 현대적인 디지털 디자인과 전통적인 손 그림의 미학을 조화롭게 결합했습니다. - **색 구성**: 중성적인 색상(미색/밝은 회색)을 기본으로 사용하고, 주요 텍스트는 진회색으로, 시각적 초점 색상으로는 주황색-빨간색(액센트 색상)을 사용했습니다. - **브랜드 톤**: 세련되고 예술적이며 따뜻한 느낌으로, 안목 있는 사용자층을 겨냥합니다. ### II. 레이아웃 구조 원칙 **히어로 섹션 (첫 화면 디자인)** - 좌우 열 레이아웃 (60:40 황금 비율) - 왼쪽: - 큰 제목 (디스플레이 글꼴, 72-96px), 어두운 글꼴, 강렬한 시각적 효과 - 주요 데이터는 강조 색상으로 표시 (예: "15개 도시, 4749개 위치") - 핵심 가치 제안을 간결하고 강력하게 전달하는 부제목 - 고급스러운 느낌을 주는 충분한 여백 - 오른쪽: - 시각적 공간의 50%를 차지하는 맞춤형 손 그림 일러스트레이션 - 일관된 일러스트레이션 스타일: 선 그림 + 지역 색상 강조 - 브랜드 스토리에 깊이 통합된 일러스트레이션 콘텐츠 - **내비게이션 바 디자인** - 미니멀한 상단 내비게이션, 고정 위치 - 로고 + 2-3개의 주요 메뉴 항목 - 오른쪽 아이콘 그룹 (검색/즐겨찾기/메뉴) - 은은한 그림자가 있는 투명 또는 순백색 배경 - **콘텐츠 카드 영역** - 카드 그리드 레이아웃 (3-4열, 반응형) - 각 카드 포함 내용: - 제목 (제목 3, 32-40px) - 설명 (2-3줄, 16-18px, 선 높이 1.6) - 함께 제공되는 손으로 그린 ​​일러스트 (메인 비주얼 스타일과 일관성 유지) - 밝은 배경 (#F5F3F0), 둥근 모서리 (8-12px) - 마우스 오버 상태: 살짝 상승 + 그림자 짙어짐 - ### III. 일러스트 시스템 사양 **일러스트 제작 가이드라인** 1. 2. **선 처리**: - 1-2px의 불규칙한 손으로 그린 ​​선을 사용하여 사실적인 회화 질감을 표현합니다. - 과도한 기계적인 느낌을 피하고, 약간의 인위적인 느낌을 더해 부드러운 선을 유지합니다. 3. **색상 사용:** - 회색 선 80% + 브랜드 색상 채우기 20% - 주황색-빨간색은 요소(사람, 창문, 주요 건물)를 강조하는 데만 사용 - 배경은 베이지색 그라데이션(#FDFBF7 → #F5F1EB) 사용 - 5. **장면 구성:** - 도시 장면: 랜드마크 건물과 일상생활 장면의 조화 - 위에서 내려다본 시점 또는 등각 투영 시점 - 서사와 친밀감을 높이기 위해 작은 인물 추가 - 7. **디테일 밀도:** - 풍부한 전경 디테일, 적당히 단순화된 중경, 윤곽선 처리된 배경 - 시각적 계층 구조를 유지하여 시선을 핵심 정보로 유도 - 9. ### IV. 글꼴 시스템 - **표시 글꼴(제목):** 세리프체, 굵고 강렬한 글꼴(예: Freight Display, Tiempos) - **본문 글꼴(본문):** 산세리프체, 가독성이 뛰어난 글꼴(예: Inter, Manrope) - **글꼴 크기 비율**: 모듈식 비율(1.25 또는 1.333) 사용 - **글꼴 굵기**: 약함(300) / 보통(400) / 중간(500) / 굵음(700) - ### 상호 작용 세부 정보 - **마이크로 애니메이션**: 마우스 오버 시 카드가 4-8px 위로 떠오르며, 전환 시간은 300-400ms - **로딩 상태**: 브랜드 분위기를 유지하기 위해 기본 화면 사용 - **반응형 화면 크기**: - 데스크톱: 1440px 이상 - 태블릿: 768-1439px - 모바일: 375-767px ### VI. 디자인 결과물 요구사항 각 디자인 결과물에는 다음 사항이 포함되어야 합니다. 1. 명확한 시각적 계층 구조 (크기/색상/여백을 통해 구현) 2. 최소 하나 이상의 맞춤형 일러스트레이션 (콘텐츠와 밀접하게 관련된 일러스트레이션으로, Nano Banana Pro를 사용하여 제작) 6. 2~3개의 강조 색상 (최대 7개) 8. 충분한 여백 (섹션 간격 ≥ 120px) 9. 명확한 사용자 동작 경로 11. --- **디자인 철학**: 예술적인 시각적 언어를 사용하여 브랜드의 고유성과 따뜻함을 전달합니다. 모든 픽셀은 단순히 기능을 보여주는 것이 아니라 이야기를 전달하는 역할을 합니다. 디자인은 차갑고 상업적인 제품이 아닌, "삶을 소중히 여기는 사람들을 위한 제품"이라는 느낌을 사용자에게 전달해야 합니다.

웹페이지의 모든 삽화는 nano banana pro로 제작되었습니다.