🎨간결하고 우아한 아트 웹페이지
지시사항
사용자가 제공한 콘텐츠를 기반으로 웹페이지를 생성하세요. 웹페이지 스타일 요구사항은 다음과 같습니다.
### 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)로 제작되었습니다.
설명
추천한 사람
nene@YouMind
이 스킬을 추천하는 이유
이 스킬은 콘텐츠를 단아한 아트 손그림 스타일 웹페이지로 변환하여 현대 디지털 디자인과 전통 미학을 완벽하게 융합합니다. 요구에 따라 맞춤형 일러스트를 지능적으로 생성하고, 정교한 색상과 타이포그래피 시스템을 활용하여 예술성과 브랜드 온기를 지닌 웹페이지를 만들어, 제품이나 서비스가 시각적으로 돋보이게 합니다.
콘텐츠를 예술적인 손으로 그린 듯한 스타일의 웹페이지로 변환합니다. 정교한 선 일러스트와 색상 조합으로 정보에 온기와 품격을 더하세요.
관련 스킬
전체 보기
웹페이지탐색형 설명 페이지 빌더
보고서는 설명합니다. 페이지는 사람들이 스스로 알아내게 만듭니다. YouMind는 이미 웹페이지를 만들 수 있습니다. Explorable Explainer는 무엇을 만들지 결정합니다 — 연구, 데이터셋 또는 주제 하나를 뉴스룸 그래픽과 탐구형 설명의 전통을 따르는 단일 인터랙티브 페이지로 바꿉니다: 스크롤 기반 내러티브, 실제 차트, 움직일 수 있는 컨트롤, 확인할 수 있는 출처. 코딩하기 전에 계획을 세웁니다. 먼저 빌드 계획을 승인받습니다: 페이지가 답하는 하나의 질문, 리빌(reveal) — 독자가 '아!' 하고 느끼는 순간 — 5~8개 섹션의 스크롤 뼈대, 각각이 움직여 얻는 배움이 근거가 되는 2~4개의 인터랙션, 그리고 모든 숫자와 그 출처를 나열하는 데이터 계약. 그런 다음 빌드 단계가 필요 없는 단일 자체 포함 HTML 파일을 만듭니다. 의미론적 마크업. 모든 숫자는 파일 상단의 단일 편집 가능한 DATA 상수에 들어갑니다. 휴대폰에서도 깨지지 않는 스크롤 리빌. 모든 컨트롤은 실제 키보드로 조작 가능한 폼 요소이며, 현재 값을 설명하는 라이브 텍스트가 함께합니다. 접근성은 나중에 덧붙이는 것이 아니라 처음부터 내장되어 있습니다: 4.5:1 대비, 보이는 포커스 링, 모든 곳의 대체 텍스트, 색상만으로 전달되지 않는 의미, 축소 모션 존중, 360px부터 반응형. 인계하기 전에 5개 항목의 자체 점검을 실행하고 결과를 정직하게 보고합니다: 리빌이 실제로 성공하는지, JavaScript를 끈 상태에서도 페이지가 읽히는지, 탭 순서가 타당한지, 모든 숫자를 추적할 수 있는지, 독자가 멈추고 싶어 할 애니메이션이 있는지. 지키지 않을 두 가지 규칙이 있습니다: 차트를 보기 좋게 만들려고 데이터를 절대 꾸며내지 않으며, 숫자가 초안과 모순될 때 알려줍니다. 자신의 작업이 훑어보기가 아니라 탐구되기를 원하는 연구자, 분석가, 저널리스트, 교육자, 인디 창업자와 컨설턴트를 위한 도구입니다.
웹페이지은은한 낮빛 플로팅 스타일 웹
은은한 낮빛 스타일의 웹 디자인 시스템입니다. 옅은 하늘색 캔버스(#ebf5ff), 고정 굵기 500의 초대형 디스플레이 텍스트(반응형 최대 148px), 32px 라운드 카드와 9999px 필(pill), 거의 검은색에 가까운 #181d27 솔리드 CTA, 파스텔 컬러 블록과 떠 있는 3D 클레이 질감 일러스트를 갖추고 있습니다. 깊이감은 캔버스에서 카드로 이어지는 색상 단계 변화만으로 표현되며, 콘텐츠 카드에는 그림자가 없습니다. '은은한 낮빛 스타일', '3D 일러스트 랜딩 페이지', '옅은 블루 캔버스', '라운드 카드 스타일', 'SaaS 공식 웹사이트', 'Linear/Framer 스타일' 등의 요구에 적합하며, 접근성과 반응형 제약이 내장되어 있습니다.
웹페이지Fashion Creative Design 웹스타일
패션 에디토리얼 포스터 스타일의 웹 디자인 시스템: 따뜻한 크림색 종이 질감의 캔버스(#fffef7), 300 웨이트의 초대형 제목(64–84px), 끝까지 꽉 차는 사진, 그림자 없음, 카드 직각 + 버튼 1440px 알약형 둥근 모서리. 패션 디자인 스타일, 매거진 레이아웃, 포스터 스타일, 아트북 웹페이지, 스튜디오 포트폴리오, 갤러리 페이지 등의 요구에 적합하며, 모든 콘텐츠를 하이패션 에디토리얼 스타일의 페이지로 재작성할 수 있습니다.
🎨간결하고 우아한 아트 웹페이지
지시사항
사용자가 제공한 콘텐츠를 기반으로 웹페이지를 생성하세요. 웹페이지 스타일 요구사항은 다음과 같습니다.
### 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)로 제작되었습니다.
설명
추천한 사람
nene@YouMind
이 스킬을 추천하는 이유
이 스킬은 콘텐츠를 단아한 아트 손그림 스타일 웹페이지로 변환하여 현대 디지털 디자인과 전통 미학을 완벽하게 융합합니다. 요구에 따라 맞춤형 일러스트를 지능적으로 생성하고, 정교한 색상과 타이포그래피 시스템을 활용하여 예술성과 브랜드 온기를 지닌 웹페이지를 만들어, 제품이나 서비스가 시각적으로 돋보이게 합니다.
콘텐츠를 예술적인 손으로 그린 듯한 스타일의 웹페이지로 변환합니다. 정교한 선 일러스트와 색상 조합으로 정보에 온기와 품격을 더하세요.
관련 스킬
전체 보기웹페이지탐색형 설명 페이지 빌더
보고서는 설명합니다. 페이지는 사람들이 스스로 알아내게 만듭니다. YouMind는 이미 웹페이지를 만들 수 있습니다. Explorable Explainer는 무엇을 만들지 결정합니다 — 연구, 데이터셋 또는 주제 하나를 뉴스룸 그래픽과 탐구형 설명의 전통을 따르는 단일 인터랙티브 페이지로 바꿉니다: 스크롤 기반 내러티브, 실제 차트, 움직일 수 있는 컨트롤, 확인할 수 있는 출처. 코딩하기 전에 계획을 세웁니다. 먼저 빌드 계획을 승인받습니다: 페이지가 답하는 하나의 질문, 리빌(reveal) — 독자가 '아!' 하고 느끼는 순간 — 5~8개 섹션의 스크롤 뼈대, 각각이 움직여 얻는 배움이 근거가 되는 2~4개의 인터랙션, 그리고 모든 숫자와 그 출처를 나열하는 데이터 계약. 그런 다음 빌드 단계가 필요 없는 단일 자체 포함 HTML 파일을 만듭니다. 의미론적 마크업. 모든 숫자는 파일 상단의 단일 편집 가능한 DATA 상수에 들어갑니다. 휴대폰에서도 깨지지 않는 스크롤 리빌. 모든 컨트롤은 실제 키보드로 조작 가능한 폼 요소이며, 현재 값을 설명하는 라이브 텍스트가 함께합니다. 접근성은 나중에 덧붙이는 것이 아니라 처음부터 내장되어 있습니다: 4.5:1 대비, 보이는 포커스 링, 모든 곳의 대체 텍스트, 색상만으로 전달되지 않는 의미, 축소 모션 존중, 360px부터 반응형. 인계하기 전에 5개 항목의 자체 점검을 실행하고 결과를 정직하게 보고합니다: 리빌이 실제로 성공하는지, JavaScript를 끈 상태에서도 페이지가 읽히는지, 탭 순서가 타당한지, 모든 숫자를 추적할 수 있는지, 독자가 멈추고 싶어 할 애니메이션이 있는지. 지키지 않을 두 가지 규칙이 있습니다: 차트를 보기 좋게 만들려고 데이터를 절대 꾸며내지 않으며, 숫자가 초안과 모순될 때 알려줍니다. 자신의 작업이 훑어보기가 아니라 탐구되기를 원하는 연구자, 분석가, 저널리스트, 교육자, 인디 창업자와 컨설턴트를 위한 도구입니다.
웹페이지은은한 낮빛 플로팅 스타일 웹
은은한 낮빛 스타일의 웹 디자인 시스템입니다. 옅은 하늘색 캔버스(#ebf5ff), 고정 굵기 500의 초대형 디스플레이 텍스트(반응형 최대 148px), 32px 라운드 카드와 9999px 필(pill), 거의 검은색에 가까운 #181d27 솔리드 CTA, 파스텔 컬러 블록과 떠 있는 3D 클레이 질감 일러스트를 갖추고 있습니다. 깊이감은 캔버스에서 카드로 이어지는 색상 단계 변화만으로 표현되며, 콘텐츠 카드에는 그림자가 없습니다. '은은한 낮빛 스타일', '3D 일러스트 랜딩 페이지', '옅은 블루 캔버스', '라운드 카드 스타일', 'SaaS 공식 웹사이트', 'Linear/Framer 스타일' 등의 요구에 적합하며, 접근성과 반응형 제약이 내장되어 있습니다.
웹페이지Fashion Creative Design 웹스타일
패션 에디토리얼 포스터 스타일의 웹 디자인 시스템: 따뜻한 크림색 종이 질감의 캔버스(#fffef7), 300 웨이트의 초대형 제목(64–84px), 끝까지 꽉 차는 사진, 그림자 없음, 카드 직각 + 버튼 1440px 알약형 둥근 모서리. 패션 디자인 스타일, 매거진 레이아웃, 포스터 스타일, 아트북 웹페이지, 스튜디오 포트폴리오, 갤러리 페이지 등의 요구에 적합하며, 모든 콘텐츠를 하이패션 에디토리얼 스타일의 페이지로 재작성할 수 있습니다.
다음으로 즐겨 쓸 스킬을 찾아보세요
연구, 창작, 일상 업무에 유용한 엄선된 AI 스킬을 더 탐색해 보세요.