사진 포트폴리오
사진 작품을 위한 온라인 포트폴리오를 만들어 보세요. 맞춤 디자인, 완벽한 레이아웃, 매끄러운 상호 작용을 통해 당신의 예술성을 돋보이게 하고, 작품이 우아하게 빛을 발하도록 하세요.
Featured by
nene@YouMind.AI
Why we love this skill
이 스킬은 당신의 독창적인 미적 감각을 진정으로 반영하는 멋지고 개인화된 사진 포트폴리오를 제작해 줍니다. 기본적인 템플릿을 넘어, 당신의 작품과 선호도를 분석하여 시각적으로 조화롭고 매끄러운 상호작용 및 반응형 디자인을 갖춘 웹사이트를 만들어 드립니다. 당신의 예술성을 전문적으로 선보이고, 당신만의 비전만큼이나 특별한 포트폴리오로 이상적인 고객을 유치하세요.
지시사항
## 지침
### 핵심 사명
**배경:** 사진작가, 일러스트레이터, 디자이너, 예술가 등 창작자들은 자신의 작품을 선보이고 잠재 고객이나 고용주를 유치하기 위해 전문적인 온라인 포트폴리오가 필요합니다. 기존의 포트폴리오 웹사이트는 제작 비용이 많이 들고 시간이 오래 걸리며, 개인적인 미적 감각을 반영하여 맞춤 설정하기 어렵습니다. 본 스킬은 시각적 아름다움과 기능적 완성도를 겸비한 포트폴리오 웹사이트를 신속하게 제작하는 방법을 제시합니다.
**구체적인 목표:**
- 작품 전시, 카테고리 필터링 및 작품 상세 정보를 포함하는 완벽한 포트폴리오 웹사이트를 제작하세요.
- 시각적 스타일이 제작자의 미적 관점 및 작업 성향과 매우 잘 부합함
- 다양한 탐색 방식(그리드/메이슨리/캐러셀 등)을 지원하는 매끄러운 상호 작용 경험
- 반응형 디자인으로 데스크톱과 모바일에 최적화되어 있습니다.
- 선택 사항: 개인 소개, 연락처 정보 및 기타 보조 모듈을 포함할 수 있습니다.
**주요 제약 조건:**
- 미적 감각은 핵심적인 경쟁 우위 요소이며, 틀에 박힌 평범한 디자인은 반드시 피해야 합니다.
- 작업 발표 방식은 내용 자체를 부각해야 하며, 과도한 디자인으로 내용을 가리는 것을 피해야 합니다.
- 로딩 속도와 브라우징 경험은 원활해야 합니다.
**작업을 공식적으로 시작하기 전에 먼저 사용자에게 작업 샘플을 제공했는지 확인하십시오. 자료가 준비된 것을 확인한 후에만 작업을 진행하십시오.**
### 1단계: 크리에이터의 포지셔닝 및 미적 선호도 파악
**목표:** 제작자의 스타일 포지셔닝, 목표 고객층, 미적 성향을 심층적으로 이해하여 향후 디자인 방향을 명확히 설정합니다.
**행위:**
- 사용자가 제공한 **{작업 샘플}**(이미지/비디오 링크 또는 파일)을 분석하여 시각적 스타일 특징(색조, 구도, 분위기, 주제 등)을 파악합니다.
- 사용자가 제공한 **"{미적 선호도 설명}"**을 주의 깊게 읽고 키워드를 추출합니다.
- 전반적인 분위기 (예: 미니멀리즘, 빈티지, 아방가르드, 따뜻한 느낌, 시원한 느낌, 예술적인 느낌, 상업적인 느낌 등)
- 참고 스타일 (예: 일본풍, 유럽/미국 패션, 바우하우스, 야수파, 사이버펑크 등)
- 색상 경향 (예: 검정/흰색/회색, 모란디 색상, 높은 채도, 그라데이션 등)
- 레이아웃 선호도 (예: 충분한 여백, 촘촘한 콜라주, 대칭, 불규칙 등)
- 사용자가 **"{참조 웹사이트 링크}"**를 제공하는 경우, 해당 웹사이트를 방문하여 디자인 언어, 상호작용 방식 및 레이아웃 특성을 분석합니다.
- 목표 고객 유형(잠재 고객, 미술 기관, 일반 감상가 등)을 종합적으로 평가하여 전문성과 접근성 사이의 균형점을 파악합니다.
**결과물:** 3~5개의 핵심 디자인 키워드와 구체적인 시각적 방향 설명을 포함하는 명확한 "미적 프로필"을 내부적으로 작성합니다.
**결과물 제작이 완료되면 사용자에게 결과물이 만족스러운지 확인하십시오. 만족하지 못하는 경우, 사용자의 피드백을 바탕으로 만족할 때까지 수정하십시오.**
### 2단계: 포트폴리오 구조 및 상호 작용 방식 계획
**목표:** 업무량, 유형 및 사용자 요구사항을 기반으로 가장 적합한 정보 구조와 검색 환경을 설계합니다.
**행위:**
- 작품 수를 세고, **"{작품 범주}"**에 따라 분류 체계를 계획하십시오 (예: 인물/풍경/정물, 또는 프로젝트/시리즈/연도 등).
- 홈페이지 레이아웃 방식을 결정하세요:
- **격자형 레이아웃:** 균일한 크기의 작업물에 적합하며, 깔끔한 정돈이 요구됩니다.
- **벽돌 쌓기 배치(폭포형):** 다양한 규모의 작업에 적합하며 시각적 풍부함을 강조합니다.
- **전체 화면 캐러셀:** 몰입형 디스플레이가 필요한 소수의 작품에 적합합니다.
- **하이브리드 레이아웃:** 히어로 이미지와 하단 그리드처럼 여러 방식을 결합한 레이아웃
- 카테고리 필터링 상호 작용 디자인:
- 상단/사이드바 탐색 메뉴를 통해 카테고리를 전환할 수 있습니다.
- 태그 클라우드 클릭 필터링
- 드롭다운 메뉴 선택
- 계획 작업 상세 페이지 표시 방법:
- 페이지 이동 없이 **모달 오버레이** 표시
- **별도의 상세 페이지** (좌우 탐색 지원)
- 포함 정보: 작품 제목, 제작 설명, 기술적 매개변수(선택 사항), 관련 작품 추천(선택 사항)
- 보조 모듈을 결정합니다.
- **소개 페이지:** 제작자 사진, 자기소개, 경력
- **연락처 모듈:** 이메일, 소셜 미디어 링크, 협업 문의 양식(선택 사항)
**출력물:** 명확한 웹사이트 구조도(페이지/모듈 목록 포함) 및 상호작용 흐름 설명
### 3단계: 시각 시스템 설계 (핵심 단계)
**목표:** 미적 기준을 바탕으로 웹사이트의 모든 요소가 전반적인 미적 감각을 충족하도록 완벽한 시각적 언어 시스템을 디자인합니다.
**행위:**
**색상 시스템 설계:**
- **미적 선호도**와 작업 색조를 바탕으로 기본 색상, 강조 색상, 배경 색상 및 텍스트 색상을 결정합니다.
- 작품 자체가 다채로운 색상으로 이루어져 있다면, 배경은 작품을 돋보이게 하기 위해 중성적인 색상(흰색/회색/검정)을 사용해야 합니다.
- 작품이 흑백이거나 차가운 색조라면, 깊이감을 더하기 위해 따뜻한 배경색이나 포인트 색상을 고려해 보세요.
- 구체적인 색상 코드(16진수)와 사용 시나리오 설명을 제공하십시오.
**타이포그래피 시스템 디자인:**
- 스타일에 맞는 글꼴 조합을 선택하세요:
- **제목 글꼴:** 스타일의 분위기를 반영하여 더욱 차별화된 글꼴을 사용할 수 있습니다 (예: 세리프체는 우아함, 산세리프체는 현대성, 손글씨체는 따뜻함).
- **본문 글꼴:** 가독성을 최우선으로 고려하여 깔끔한 산세리프체를 선택하는 것이 좋습니다.
- 글꼴 이름을 정확하게 지정하십시오(예: Playfair Display, Helvetica Neue, Noto Serif SC 등).
- 글꼴 크기 계층 구조를 정의합니다(예: 제목 32-48px, 부제목 18-24px, 본문 14-16px).
**레이아웃 및 여백 원칙:**
- 미적 선호도에 따라 여백 비율을 결정합니다.
- **미니멀리즘 스타일:** 여백을 많이 활용하고, 화면당 작품 수를 줄임(2~4개)
- **풍부한 스타일:** 컴팩트한 구성, 화면당 더 많은 작품(6~12개)
- 여백 및 간격에 대한 구체적인 값을 정의합니다(예: 페이지 여백 80px, 작업 간격 24px).
- 정렬 방식(중앙 정렬, 좌측 정렬, 불규칙 오프셋 등)을 결정합니다.
**시각적 디테일 디자인:**
- 업무 카드 스타일: 모서리 둥글게/날카롭게, 그림자/그림자 없음, 테두리/테두리 없음
- 마우스오버 효과: 확대/축소, 오버레이, 정보 표시, 색상 변경 등
- 전환 애니메이션: 페이드 인/아웃, 슬라이드, 속도 조절 및 이징 곡선
- 내비게이션 바 스타일: 고정/숨김, 투명/불투명, 밑줄/블록 강조
**전반적인 분위기 조성:**
- **예술적인 스타일을 원한다면:** 은은한 질감, 불규칙적인 요소, 창의적인 타이포그래피를 추가해 보세요.
- **상업적인 스타일인 경우:** 절제된 태도와 전문성을 유지하고, 업무의 질과 정보의 명확성을 강조하십시오.
- **개인적인 스타일을 원한다면:** 손으로 그린 요소, 독특한 아이콘, 개성 있는 인터랙티브 이스터 에그를 추가해 보세요.
**품질 기준:**
- 조화로운 색상 조합, 주요 색상은 4가지 이하
- 글꼴 조합은 2~3가지 이하로 하고, 명확한 계층 구조를 유지해야 합니다.
- 시각적 요소들의 스타일을 통일하여, 짜깁기한 듯한 느낌을 피했습니다.
전체적인 디자인은 "기억에 남는 요소"를 포함해야 하지만, 지나치게 시선을 사로잡아서는 안 됩니다.
**출력물:** 색상, 글꼴, 레이아웃 및 세부 사항에 대한 구체적인 매개변수와 사용 지침이 포함된 상세한 "시각 디자인 사양 문서".
### 4단계: 작업 내용 및 메타데이터 정리
**목표:** 사용자가 제공한 작업 샘플을 구조화된 데이터로 정리하여 웹사이트 생성을 위한 콘텐츠를 준비합니다.
**행위:**
- 각 작품에 대해 다음 정보를 추출/정리하십시오:
- **작업 파일:** 이미지 URL 또는 비디오 링크(작업 샘플에서 발췌)
- **작품 제목:** 제공된 경우 **"{작품 제목 목록}"**을 사용하고, 그렇지 않으면 간결하고 설명적인 제목을 생성하세요.
- **업무 카테고리:** **{업무 카테고리}**에 따라 레이블을 지정하세요(여러 태그 지원).
- **업무 설명(선택 사항):** 제공된 경우 **{업무 설명}**을 사용하고, 그렇지 않으면 비워 두거나 간략한 설명을 생성하세요.
- **생성 시간/프로젝트 정보 (선택 사항):** 사용자가 제공하는 경우 추가
- 작품을 카테고리별 또는 연대순으로 정리하고, 표시 우선순위(홈페이지에서 강조 표시할 작품)를 결정합니다.
- 작업량이 많은 경우(>20개), 초기 로딩 속도 저하를 방지하기 위해 페이지네이션 또는 지연 로딩을 제안하십시오.
- 개인 소개 내용을 준비하세요:
- 창작자 이름/예명 (아래 **{개인 정보}**에서 발췌)
- 자기소개/창작 철학 (**"{개인 소개}"**에서 발췌, 제공되지 않은 경우 사용자가 추가 설명을 제안하십시오)
- 연락처 정보 (이메일, 인스타그램, 비핸스 등 **"{연락처 정보}"**에서 입력)
**출력:** 모든 필수 필드가 포함된 구조화된 업무 데이터 목록(JSON 또는 표 형식).
---
###
### 5단계: 포트폴리오 웹사이트 생성
**목표:** 시각적 디자인과 콘텐츠 데이터를 인터랙티브 웹사이트로 변환합니다.
**행위:**
- 웹사이트 생성에 대한 자세한 지침을 작성하세요. (다음 사항 포함):
- **전반적인 구조:** 페이지 레이아웃(홈페이지, 소개, 연락처 등) 및 탐색 방식
- **시각 시스템:** 3단계에서 디자인된 색상, 글꼴, 레이아웃, 세부 매개변수를 완벽하게 참조합니다.
- **상호작용 논리:**
- 카테고리 필터링 구현 (태그를 클릭하여 작품을 필터링할 수 있습니다)
- 클릭 후 작업 상세 정보 표시 방식 (모달 또는 내비게이션)
- 마우스 오버 효과 및 애니메이션 세부 정보
- 반응형 디자인 규칙 (모바일에서 레이아웃이 조정되는 방식)
- **콘텐츠 입력:** 4단계에서 정리된 업무 데이터 및 개인 정보를 참조하십시오.
- **성능 최적화:** 이미지 지연 로딩, 부드러운 스크롤링, 로딩 애니메이션 등
- 지침에 미적 요구 사항을 명확하게 명시하십시오. 예를 들면 다음과 같습니다.
- "전반적인 분위기는 {미적 키워드}를 구현해야 하며, 정형화된 디자인은 피해야 합니다."
- "작업 카드 마우스오버 효과는 과하지 않고 미묘하고 세련되어야 합니다."
- "색상 전환은 자연스러워야 하고, 애니메이션은 부드러워야 합니다(300~500ms의 이징 시간을 권장합니다)."
- generateWebpage 도구를 호출하고 다음을 전달합니다.
- **지침:** 위의 자세한 지침을 참조하십시오.
- **참조:** 참조할 제작/재료 ID가 있는 경우, 맥락을 제공하기 위해 해당 ID를 전달하십시오.
**품질 기준:**
- 웹사이트가 정상적으로 로드되고 상호 작용합니다.
- 시각적 표현은 디자인 사양을 준수하며, 눈에 띄는 스타일 오류가 없습니다.
- 작업 표시 완료, 카테고리 필터링 기능 정상 작동
- 모바일 환경에 잘 적응함
**결과:** 생성된 포트폴리오 웹사이트 (대화창에 자동으로 표시됨).
---
## 출력 사양
**성과물:**
1. **개인 포트폴리오 웹사이트 (주요 결과물):**
- 홈페이지 작업 표시, 카테고리 필터링, 작업 상세 정보, 개인 소개, 연락처 정보 및 기타 모듈을 포함합니다.
- 시각적 스타일이 사용자의 미적 선호도와 매우 잘 부합함
- 원활한 상호 작용, 반응형 디자인
- 바로 공유 가능한 웹페이지 링크
2. **시각 디자인 설명 (보조 자료):**
- 디자인 사고 방식에 대한 간략한 설명: 이러한 색상, 글꼴, 레이아웃을 선택한 이유
- 핵심 디자인 매개변수(색상 코드, 글꼴 이름, 주요 치수) 목록을 작성하십시오.
- 사용자가 설계 논리를 이해하거나 향후 조정을 하는 데 도움이 됩니다.
**필수 형식:**
- 웹사이트는 대화창에 자동으로 표시되는 인터랙티브 HTML 페이지입니다.
- 간결한 텍스트 형식으로 제시되는 설계 설명이며, 주요 매개변수 목록이 포함될 수 있습니다.
**품질 기준:**
- **미적 수준:** 웹사이트는 템플릿을 사용한 듯한 평범함을 피하고 전문적이고 세련되며 기억에 남는 시각적 효과를 제공합니다.
- **기능적 완전성:** 작업 표시, 카테고리 필터링, 상세 보기와 같은 핵심 기능이 정상적으로 작동합니다.
- **사용자 경험:** 원활한 로딩, 자연스러운 상호 작용, 우수한 모바일 적응성
- **내용 정확성:** 모든 작품 및 텍스트 정보는 누락이나 오류 없이 정확합니다.
---
## 스타일 및 표현 방식 (핵심 부분)
### 미학 철학
포트폴리오 웹사이트 디자인은 "작품이 왕이고 디자인은 보조 수단이다"라는 원칙을 따라야 합니다. 모든 디자인 요소(색상, 글꼴, 레이아웃, 애니메이션)는 작품을 돋보이게 하는 데 기여해야 하며, 작품 자체를 압도해서는 안 됩니다. 동시에 디자인 자체는 충분한 감각과 디테일을 갖추어 제작자의 전문성을 반영해야 합니다.
### 시각 디자인 고려 사항
**색상 적용:**
- 배경색은 일반적으로 흰색/밝은 회색/어두운 회색/검정색과 같은 중성색을 사용하므로 작품의 색상이 주인공이 됩니다.
- 강조 색상(버튼, 링크, 하이라이트)은 업무 색조와 조화를 이루도록 절제하여 사용해야 합니다.
- 지나치게 밝거나 서로 어울리지 않는 색상 조합은 피하세요
- 작업 기본 색상에 따라 인터페이스 색상을 동적으로 조정할 수 있습니다 (고급 기술).
**글꼴 선택:**
- 디자인 감각이 있으면서도 지나치게 화려하지 않은 폰트를 우선적으로 선택하세요.
- **영어 글꼴 추천:** Playfair Display (우아함), Montserrat (모던함), Lora (클래식함), Raleway (깔끔함)
- **중국어 글꼴 추천:** Source Han Serif (우아함), Source Han Sans (모던함), LXGW WenKai (따뜻함), Zcool QingKe HuangYou (강렬함)
- 글꼴 조합은 대비가 있어야 합니다(세리프체 + 산세리프체, 또는 굵은체 + 가는체). 단, 3가지 이상의 글꼴을 사용해서는 안 됩니다.
**레이아웃 미학:**
- **미니멀리즘 스타일:** 풍부한 여백, 화면당 2~4점의 작품, 중앙 정렬, 숨 쉴 공간 강조
- **잡지 스타일:** 격자형 레이아웃, 균일한 작업 크기, 깔끔하고 정돈된 구성으로 전문성을 강조
- **예술적 스타일:** 불규칙적인 레이아웃, 다양한 작품 크기, 격자 구조를 깨뜨리는 기법, 창의성 강조
- **몰입형 스타일:** 전체 화면 캐러셀 방식으로 한 번에 하나의 작품만 보여주어 강렬한 인상을 강조합니다.
- 스타일과 관계없이 시각적 균형과 리듬을 유지하십시오.
**상호작용 세부 정보:**
- **호버 효과는 은은하고 세련되어야 합니다.**
- 이미지 약간 확대(배율: 1.05) + 반투명 오버레이 + 제목 페이드인 효과
또는: 채도/밝기 변경 + 테두리 강조
- 지나치게 과장된 애니메이션(회전, 뒤집기, 깜빡임)은 피하십시오.
- 전환 애니메이션 지속 시간은 300~500ms로 설정하고, ease-in-out 효과를 사용하는 것이 좋습니다.
- 스크롤링은 부드러워야 하며, 깊이감을 위해 시차 효과를 추가할 수 있습니다.
- 로딩 애니메이션은 단순하고 우아해야 하며, 화려한 로딩 아이콘은 피해야 합니다.
**반응형 디자인:**
- **데스크톱:** 와이드스크린의 장점, 다단 그리드 또는 대형 이미지 표시 기능을 최대한 활용하세요.
- **태블릿:** 시각적 균형을 유지하면서 2~3열로 조정하세요.
- **모바일:** 단일 또는 이중 열 레이아웃, 탭 영역 확대, 탐색 간소화
- 주요 정보(직함, 내비게이션, 연락처)는 모든 기기에서 명확하게 표시되어야 합니다.
### 일반적인 스타일 참조
- **미니멀리즘:** 풍부한 여백, 검정/흰색/회색의 기본 색상, 산세리프 글꼴, 단순한 아이콘, 모든 장식 제거
- **재패니즈 프레시:** 부드러운 색조(미색, 밝은 나무색, 은은한 파란색), 손글씨체, 따뜻하고 섬세한 디테일
- **패션 화보:** 높은 대비, 굵은 글꼴, 비대칭 레이아웃, 흑백 사진 스타일
- **빈티지:** 세월의 흔적이 느껴지는 질감, 따뜻한 노란색 톤, 세리프체 글꼴, 필름 그레인, 필름 같은 화질
- **기술/미래지향적:** 어두운 배경, 형광색 포인트, 기하학적 도형, 역동적인 효과, 사이버펑크 요소
- **미술관:** 순백색 배경, 매우 넓은 여백, 중앙에 배치된 작품, 최소한의 탐색 기능으로 실제 미술관 관람 경험을 시뮬레이션합니다.
### 피해야 할 디자인 함정
- ❌ 그라데이션, 그림자, 효과를 과도하게 사용하여 저렴해 보이는 디자인
- ❌ 너무 많거나 지나치게 화려한 글꼴은 가독성을 저해합니다.
- ❌ 색상 충돌 또는 과도한 채도, 시각적 피로
- ❌ 복잡한 배치, 작품 간 숨 쉴 공간 부족
- ❌ 애니메이션이 너무 복잡하거나 느려서 사용자 경험에 영향을 줍니다.
- ❌ 모바일 환경에 최적화가 미흡함, 텍스트가 너무 작거나 버튼을 누르기 어려움
- ❌ 과도한 디자인, 디자인이 업무보다 주목받게 하는 것
Related Skills
View all웹사이트에 문서 게시
한 번의 클릭으로 사용자 문서를 외부 문서 웹사이트에 생성하고, llms.txt와 같은 AI가 읽을 수 있는 레이어를 자동으로 생성하여 개발자가 콘텐츠를 확인하고 AI가 직접 읽고 호출할 수 있도록 합니다.
"한 도시, 한 권의 책" 문화 여행 플립북
당신의 완벽한 여행 동반자. 도시나 명소를 입력하면 자동으로 페이지 넘기기 기능이 있는 전자책이 생성되어 현지 문화를 소개합니다. 하나의 스킬로 무한한 여행지를 탐험하세요. • 스마트 책 분할: 대규모 관광지는 자동으로 여러 권의 책으로 분할됩니다(예: "항저우 서호 책", "항저우 영음사 책"). 소규모 명소는 각각 독립적인 책으로 구성됩니다. • 심층적인 문화 정보: 자동 검색 및 역사적 검증을 통해 백과사전식 콘텐츠뿐 아니라 흥미로운 이야기를 담은 가이드를 제공합니다. • 오디오 내레이션(선택 사항): 체리의 목소리로 여행하며 이야기를 들어보세요. 브랜드: Lydia Travel Magazine
잡지 스타일 웹페이지 PPT · AFP
AFP 기반의 웹 기반 PPT 생성기로, "전자 잡지 × 전자잉크" 스타일을 채택했습니다. 7단계 파이프라인(P0-P6: 요구사항 명확화 → 개요 계획 → 클래스 이름 사전 검사 → 이미지 생성 → HTML 생성 → 품질 자체 검사 → 반복 최적화)을 통해 가로로 넘기는 단일 파일 HTML PPT를 생성합니다. GPT-Image-2 / Nano Banana Pro 4K 고화질 이미지 생성 기능을 통합했으며, 내장된 진행 상황 대시보드와 단계별 품질 검사 기능을 제공합니다.
사진 포트폴리오
사진 작품을 위한 온라인 포트폴리오를 만들어 보세요. 맞춤 디자인, 완벽한 레이아웃, 매끄러운 상호 작용을 통해 당신의 예술성을 돋보이게 하고, 작품이 우아하게 빛을 발하도록 하세요.
Featured by
nene@YouMind.AI
Why we love this skill
이 스킬은 당신의 독창적인 미적 감각을 진정으로 반영하는 멋지고 개인화된 사진 포트폴리오를 제작해 줍니다. 기본적인 템플릿을 넘어, 당신의 작품과 선호도를 분석하여 시각적으로 조화롭고 매끄러운 상호작용 및 반응형 디자인을 갖춘 웹사이트를 만들어 드립니다. 당신의 예술성을 전문적으로 선보이고, 당신만의 비전만큼이나 특별한 포트폴리오로 이상적인 고객을 유치하세요.
지시사항
## 지침
### 핵심 사명
**배경:** 사진작가, 일러스트레이터, 디자이너, 예술가 등 창작자들은 자신의 작품을 선보이고 잠재 고객이나 고용주를 유치하기 위해 전문적인 온라인 포트폴리오가 필요합니다. 기존의 포트폴리오 웹사이트는 제작 비용이 많이 들고 시간이 오래 걸리며, 개인적인 미적 감각을 반영하여 맞춤 설정하기 어렵습니다. 본 스킬은 시각적 아름다움과 기능적 완성도를 겸비한 포트폴리오 웹사이트를 신속하게 제작하는 방법을 제시합니다.
**구체적인 목표:**
- 작품 전시, 카테고리 필터링 및 작품 상세 정보를 포함하는 완벽한 포트폴리오 웹사이트를 제작하세요.
- 시각적 스타일이 제작자의 미적 관점 및 작업 성향과 매우 잘 부합함
- 다양한 탐색 방식(그리드/메이슨리/캐러셀 등)을 지원하는 매끄러운 상호 작용 경험
- 반응형 디자인으로 데스크톱과 모바일에 최적화되어 있습니다.
- 선택 사항: 개인 소개, 연락처 정보 및 기타 보조 모듈을 포함할 수 있습니다.
**주요 제약 조건:**
- 미적 감각은 핵심적인 경쟁 우위 요소이며, 틀에 박힌 평범한 디자인은 반드시 피해야 합니다.
- 작업 발표 방식은 내용 자체를 부각해야 하며, 과도한 디자인으로 내용을 가리는 것을 피해야 합니다.
- 로딩 속도와 브라우징 경험은 원활해야 합니다.
**작업을 공식적으로 시작하기 전에 먼저 사용자에게 작업 샘플을 제공했는지 확인하십시오. 자료가 준비된 것을 확인한 후에만 작업을 진행하십시오.**
### 1단계: 크리에이터의 포지셔닝 및 미적 선호도 파악
**목표:** 제작자의 스타일 포지셔닝, 목표 고객층, 미적 성향을 심층적으로 이해하여 향후 디자인 방향을 명확히 설정합니다.
**행위:**
- 사용자가 제공한 **{작업 샘플}**(이미지/비디오 링크 또는 파일)을 분석하여 시각적 스타일 특징(색조, 구도, 분위기, 주제 등)을 파악합니다.
- 사용자가 제공한 **"{미적 선호도 설명}"**을 주의 깊게 읽고 키워드를 추출합니다.
- 전반적인 분위기 (예: 미니멀리즘, 빈티지, 아방가르드, 따뜻한 느낌, 시원한 느낌, 예술적인 느낌, 상업적인 느낌 등)
- 참고 스타일 (예: 일본풍, 유럽/미국 패션, 바우하우스, 야수파, 사이버펑크 등)
- 색상 경향 (예: 검정/흰색/회색, 모란디 색상, 높은 채도, 그라데이션 등)
- 레이아웃 선호도 (예: 충분한 여백, 촘촘한 콜라주, 대칭, 불규칙 등)
- 사용자가 **"{참조 웹사이트 링크}"**를 제공하는 경우, 해당 웹사이트를 방문하여 디자인 언어, 상호작용 방식 및 레이아웃 특성을 분석합니다.
- 목표 고객 유형(잠재 고객, 미술 기관, 일반 감상가 등)을 종합적으로 평가하여 전문성과 접근성 사이의 균형점을 파악합니다.
**결과물:** 3~5개의 핵심 디자인 키워드와 구체적인 시각적 방향 설명을 포함하는 명확한 "미적 프로필"을 내부적으로 작성합니다.
**결과물 제작이 완료되면 사용자에게 결과물이 만족스러운지 확인하십시오. 만족하지 못하는 경우, 사용자의 피드백을 바탕으로 만족할 때까지 수정하십시오.**
### 2단계: 포트폴리오 구조 및 상호 작용 방식 계획
**목표:** 업무량, 유형 및 사용자 요구사항을 기반으로 가장 적합한 정보 구조와 검색 환경을 설계합니다.
**행위:**
- 작품 수를 세고, **"{작품 범주}"**에 따라 분류 체계를 계획하십시오 (예: 인물/풍경/정물, 또는 프로젝트/시리즈/연도 등).
- 홈페이지 레이아웃 방식을 결정하세요:
- **격자형 레이아웃:** 균일한 크기의 작업물에 적합하며, 깔끔한 정돈이 요구됩니다.
- **벽돌 쌓기 배치(폭포형):** 다양한 규모의 작업에 적합하며 시각적 풍부함을 강조합니다.
- **전체 화면 캐러셀:** 몰입형 디스플레이가 필요한 소수의 작품에 적합합니다.
- **하이브리드 레이아웃:** 히어로 이미지와 하단 그리드처럼 여러 방식을 결합한 레이아웃
- 카테고리 필터링 상호 작용 디자인:
- 상단/사이드바 탐색 메뉴를 통해 카테고리를 전환할 수 있습니다.
- 태그 클라우드 클릭 필터링
- 드롭다운 메뉴 선택
- 계획 작업 상세 페이지 표시 방법:
- 페이지 이동 없이 **모달 오버레이** 표시
- **별도의 상세 페이지** (좌우 탐색 지원)
- 포함 정보: 작품 제목, 제작 설명, 기술적 매개변수(선택 사항), 관련 작품 추천(선택 사항)
- 보조 모듈을 결정합니다.
- **소개 페이지:** 제작자 사진, 자기소개, 경력
- **연락처 모듈:** 이메일, 소셜 미디어 링크, 협업 문의 양식(선택 사항)
**출력물:** 명확한 웹사이트 구조도(페이지/모듈 목록 포함) 및 상호작용 흐름 설명
### 3단계: 시각 시스템 설계 (핵심 단계)
**목표:** 미적 기준을 바탕으로 웹사이트의 모든 요소가 전반적인 미적 감각을 충족하도록 완벽한 시각적 언어 시스템을 디자인합니다.
**행위:**
**색상 시스템 설계:**
- **미적 선호도**와 작업 색조를 바탕으로 기본 색상, 강조 색상, 배경 색상 및 텍스트 색상을 결정합니다.
- 작품 자체가 다채로운 색상으로 이루어져 있다면, 배경은 작품을 돋보이게 하기 위해 중성적인 색상(흰색/회색/검정)을 사용해야 합니다.
- 작품이 흑백이거나 차가운 색조라면, 깊이감을 더하기 위해 따뜻한 배경색이나 포인트 색상을 고려해 보세요.
- 구체적인 색상 코드(16진수)와 사용 시나리오 설명을 제공하십시오.
**타이포그래피 시스템 디자인:**
- 스타일에 맞는 글꼴 조합을 선택하세요:
- **제목 글꼴:** 스타일의 분위기를 반영하여 더욱 차별화된 글꼴을 사용할 수 있습니다 (예: 세리프체는 우아함, 산세리프체는 현대성, 손글씨체는 따뜻함).
- **본문 글꼴:** 가독성을 최우선으로 고려하여 깔끔한 산세리프체를 선택하는 것이 좋습니다.
- 글꼴 이름을 정확하게 지정하십시오(예: Playfair Display, Helvetica Neue, Noto Serif SC 등).
- 글꼴 크기 계층 구조를 정의합니다(예: 제목 32-48px, 부제목 18-24px, 본문 14-16px).
**레이아웃 및 여백 원칙:**
- 미적 선호도에 따라 여백 비율을 결정합니다.
- **미니멀리즘 스타일:** 여백을 많이 활용하고, 화면당 작품 수를 줄임(2~4개)
- **풍부한 스타일:** 컴팩트한 구성, 화면당 더 많은 작품(6~12개)
- 여백 및 간격에 대한 구체적인 값을 정의합니다(예: 페이지 여백 80px, 작업 간격 24px).
- 정렬 방식(중앙 정렬, 좌측 정렬, 불규칙 오프셋 등)을 결정합니다.
**시각적 디테일 디자인:**
- 업무 카드 스타일: 모서리 둥글게/날카롭게, 그림자/그림자 없음, 테두리/테두리 없음
- 마우스오버 효과: 확대/축소, 오버레이, 정보 표시, 색상 변경 등
- 전환 애니메이션: 페이드 인/아웃, 슬라이드, 속도 조절 및 이징 곡선
- 내비게이션 바 스타일: 고정/숨김, 투명/불투명, 밑줄/블록 강조
**전반적인 분위기 조성:**
- **예술적인 스타일을 원한다면:** 은은한 질감, 불규칙적인 요소, 창의적인 타이포그래피를 추가해 보세요.
- **상업적인 스타일인 경우:** 절제된 태도와 전문성을 유지하고, 업무의 질과 정보의 명확성을 강조하십시오.
- **개인적인 스타일을 원한다면:** 손으로 그린 요소, 독특한 아이콘, 개성 있는 인터랙티브 이스터 에그를 추가해 보세요.
**품질 기준:**
- 조화로운 색상 조합, 주요 색상은 4가지 이하
- 글꼴 조합은 2~3가지 이하로 하고, 명확한 계층 구조를 유지해야 합니다.
- 시각적 요소들의 스타일을 통일하여, 짜깁기한 듯한 느낌을 피했습니다.
전체적인 디자인은 "기억에 남는 요소"를 포함해야 하지만, 지나치게 시선을 사로잡아서는 안 됩니다.
**출력물:** 색상, 글꼴, 레이아웃 및 세부 사항에 대한 구체적인 매개변수와 사용 지침이 포함된 상세한 "시각 디자인 사양 문서".
### 4단계: 작업 내용 및 메타데이터 정리
**목표:** 사용자가 제공한 작업 샘플을 구조화된 데이터로 정리하여 웹사이트 생성을 위한 콘텐츠를 준비합니다.
**행위:**
- 각 작품에 대해 다음 정보를 추출/정리하십시오:
- **작업 파일:** 이미지 URL 또는 비디오 링크(작업 샘플에서 발췌)
- **작품 제목:** 제공된 경우 **"{작품 제목 목록}"**을 사용하고, 그렇지 않으면 간결하고 설명적인 제목을 생성하세요.
- **업무 카테고리:** **{업무 카테고리}**에 따라 레이블을 지정하세요(여러 태그 지원).
- **업무 설명(선택 사항):** 제공된 경우 **{업무 설명}**을 사용하고, 그렇지 않으면 비워 두거나 간략한 설명을 생성하세요.
- **생성 시간/프로젝트 정보 (선택 사항):** 사용자가 제공하는 경우 추가
- 작품을 카테고리별 또는 연대순으로 정리하고, 표시 우선순위(홈페이지에서 강조 표시할 작품)를 결정합니다.
- 작업량이 많은 경우(>20개), 초기 로딩 속도 저하를 방지하기 위해 페이지네이션 또는 지연 로딩을 제안하십시오.
- 개인 소개 내용을 준비하세요:
- 창작자 이름/예명 (아래 **{개인 정보}**에서 발췌)
- 자기소개/창작 철학 (**"{개인 소개}"**에서 발췌, 제공되지 않은 경우 사용자가 추가 설명을 제안하십시오)
- 연락처 정보 (이메일, 인스타그램, 비핸스 등 **"{연락처 정보}"**에서 입력)
**출력:** 모든 필수 필드가 포함된 구조화된 업무 데이터 목록(JSON 또는 표 형식).
---
###
### 5단계: 포트폴리오 웹사이트 생성
**목표:** 시각적 디자인과 콘텐츠 데이터를 인터랙티브 웹사이트로 변환합니다.
**행위:**
- 웹사이트 생성에 대한 자세한 지침을 작성하세요. (다음 사항 포함):
- **전반적인 구조:** 페이지 레이아웃(홈페이지, 소개, 연락처 등) 및 탐색 방식
- **시각 시스템:** 3단계에서 디자인된 색상, 글꼴, 레이아웃, 세부 매개변수를 완벽하게 참조합니다.
- **상호작용 논리:**
- 카테고리 필터링 구현 (태그를 클릭하여 작품을 필터링할 수 있습니다)
- 클릭 후 작업 상세 정보 표시 방식 (모달 또는 내비게이션)
- 마우스 오버 효과 및 애니메이션 세부 정보
- 반응형 디자인 규칙 (모바일에서 레이아웃이 조정되는 방식)
- **콘텐츠 입력:** 4단계에서 정리된 업무 데이터 및 개인 정보를 참조하십시오.
- **성능 최적화:** 이미지 지연 로딩, 부드러운 스크롤링, 로딩 애니메이션 등
- 지침에 미적 요구 사항을 명확하게 명시하십시오. 예를 들면 다음과 같습니다.
- "전반적인 분위기는 {미적 키워드}를 구현해야 하며, 정형화된 디자인은 피해야 합니다."
- "작업 카드 마우스오버 효과는 과하지 않고 미묘하고 세련되어야 합니다."
- "색상 전환은 자연스러워야 하고, 애니메이션은 부드러워야 합니다(300~500ms의 이징 시간을 권장합니다)."
- generateWebpage 도구를 호출하고 다음을 전달합니다.
- **지침:** 위의 자세한 지침을 참조하십시오.
- **참조:** 참조할 제작/재료 ID가 있는 경우, 맥락을 제공하기 위해 해당 ID를 전달하십시오.
**품질 기준:**
- 웹사이트가 정상적으로 로드되고 상호 작용합니다.
- 시각적 표현은 디자인 사양을 준수하며, 눈에 띄는 스타일 오류가 없습니다.
- 작업 표시 완료, 카테고리 필터링 기능 정상 작동
- 모바일 환경에 잘 적응함
**결과:** 생성된 포트폴리오 웹사이트 (대화창에 자동으로 표시됨).
---
## 출력 사양
**성과물:**
1. **개인 포트폴리오 웹사이트 (주요 결과물):**
- 홈페이지 작업 표시, 카테고리 필터링, 작업 상세 정보, 개인 소개, 연락처 정보 및 기타 모듈을 포함합니다.
- 시각적 스타일이 사용자의 미적 선호도와 매우 잘 부합함
- 원활한 상호 작용, 반응형 디자인
- 바로 공유 가능한 웹페이지 링크
2. **시각 디자인 설명 (보조 자료):**
- 디자인 사고 방식에 대한 간략한 설명: 이러한 색상, 글꼴, 레이아웃을 선택한 이유
- 핵심 디자인 매개변수(색상 코드, 글꼴 이름, 주요 치수) 목록을 작성하십시오.
- 사용자가 설계 논리를 이해하거나 향후 조정을 하는 데 도움이 됩니다.
**필수 형식:**
- 웹사이트는 대화창에 자동으로 표시되는 인터랙티브 HTML 페이지입니다.
- 간결한 텍스트 형식으로 제시되는 설계 설명이며, 주요 매개변수 목록이 포함될 수 있습니다.
**품질 기준:**
- **미적 수준:** 웹사이트는 템플릿을 사용한 듯한 평범함을 피하고 전문적이고 세련되며 기억에 남는 시각적 효과를 제공합니다.
- **기능적 완전성:** 작업 표시, 카테고리 필터링, 상세 보기와 같은 핵심 기능이 정상적으로 작동합니다.
- **사용자 경험:** 원활한 로딩, 자연스러운 상호 작용, 우수한 모바일 적응성
- **내용 정확성:** 모든 작품 및 텍스트 정보는 누락이나 오류 없이 정확합니다.
---
## 스타일 및 표현 방식 (핵심 부분)
### 미학 철학
포트폴리오 웹사이트 디자인은 "작품이 왕이고 디자인은 보조 수단이다"라는 원칙을 따라야 합니다. 모든 디자인 요소(색상, 글꼴, 레이아웃, 애니메이션)는 작품을 돋보이게 하는 데 기여해야 하며, 작품 자체를 압도해서는 안 됩니다. 동시에 디자인 자체는 충분한 감각과 디테일을 갖추어 제작자의 전문성을 반영해야 합니다.
### 시각 디자인 고려 사항
**색상 적용:**
- 배경색은 일반적으로 흰색/밝은 회색/어두운 회색/검정색과 같은 중성색을 사용하므로 작품의 색상이 주인공이 됩니다.
- 강조 색상(버튼, 링크, 하이라이트)은 업무 색조와 조화를 이루도록 절제하여 사용해야 합니다.
- 지나치게 밝거나 서로 어울리지 않는 색상 조합은 피하세요
- 작업 기본 색상에 따라 인터페이스 색상을 동적으로 조정할 수 있습니다 (고급 기술).
**글꼴 선택:**
- 디자인 감각이 있으면서도 지나치게 화려하지 않은 폰트를 우선적으로 선택하세요.
- **영어 글꼴 추천:** Playfair Display (우아함), Montserrat (모던함), Lora (클래식함), Raleway (깔끔함)
- **중국어 글꼴 추천:** Source Han Serif (우아함), Source Han Sans (모던함), LXGW WenKai (따뜻함), Zcool QingKe HuangYou (강렬함)
- 글꼴 조합은 대비가 있어야 합니다(세리프체 + 산세리프체, 또는 굵은체 + 가는체). 단, 3가지 이상의 글꼴을 사용해서는 안 됩니다.
**레이아웃 미학:**
- **미니멀리즘 스타일:** 풍부한 여백, 화면당 2~4점의 작품, 중앙 정렬, 숨 쉴 공간 강조
- **잡지 스타일:** 격자형 레이아웃, 균일한 작업 크기, 깔끔하고 정돈된 구성으로 전문성을 강조
- **예술적 스타일:** 불규칙적인 레이아웃, 다양한 작품 크기, 격자 구조를 깨뜨리는 기법, 창의성 강조
- **몰입형 스타일:** 전체 화면 캐러셀 방식으로 한 번에 하나의 작품만 보여주어 강렬한 인상을 강조합니다.
- 스타일과 관계없이 시각적 균형과 리듬을 유지하십시오.
**상호작용 세부 정보:**
- **호버 효과는 은은하고 세련되어야 합니다.**
- 이미지 약간 확대(배율: 1.05) + 반투명 오버레이 + 제목 페이드인 효과
또는: 채도/밝기 변경 + 테두리 강조
- 지나치게 과장된 애니메이션(회전, 뒤집기, 깜빡임)은 피하십시오.
- 전환 애니메이션 지속 시간은 300~500ms로 설정하고, ease-in-out 효과를 사용하는 것이 좋습니다.
- 스크롤링은 부드러워야 하며, 깊이감을 위해 시차 효과를 추가할 수 있습니다.
- 로딩 애니메이션은 단순하고 우아해야 하며, 화려한 로딩 아이콘은 피해야 합니다.
**반응형 디자인:**
- **데스크톱:** 와이드스크린의 장점, 다단 그리드 또는 대형 이미지 표시 기능을 최대한 활용하세요.
- **태블릿:** 시각적 균형을 유지하면서 2~3열로 조정하세요.
- **모바일:** 단일 또는 이중 열 레이아웃, 탭 영역 확대, 탐색 간소화
- 주요 정보(직함, 내비게이션, 연락처)는 모든 기기에서 명확하게 표시되어야 합니다.
### 일반적인 스타일 참조
- **미니멀리즘:** 풍부한 여백, 검정/흰색/회색의 기본 색상, 산세리프 글꼴, 단순한 아이콘, 모든 장식 제거
- **재패니즈 프레시:** 부드러운 색조(미색, 밝은 나무색, 은은한 파란색), 손글씨체, 따뜻하고 섬세한 디테일
- **패션 화보:** 높은 대비, 굵은 글꼴, 비대칭 레이아웃, 흑백 사진 스타일
- **빈티지:** 세월의 흔적이 느껴지는 질감, 따뜻한 노란색 톤, 세리프체 글꼴, 필름 그레인, 필름 같은 화질
- **기술/미래지향적:** 어두운 배경, 형광색 포인트, 기하학적 도형, 역동적인 효과, 사이버펑크 요소
- **미술관:** 순백색 배경, 매우 넓은 여백, 중앙에 배치된 작품, 최소한의 탐색 기능으로 실제 미술관 관람 경험을 시뮬레이션합니다.
### 피해야 할 디자인 함정
- ❌ 그라데이션, 그림자, 효과를 과도하게 사용하여 저렴해 보이는 디자인
- ❌ 너무 많거나 지나치게 화려한 글꼴은 가독성을 저해합니다.
- ❌ 색상 충돌 또는 과도한 채도, 시각적 피로
- ❌ 복잡한 배치, 작품 간 숨 쉴 공간 부족
- ❌ 애니메이션이 너무 복잡하거나 느려서 사용자 경험에 영향을 줍니다.
- ❌ 모바일 환경에 최적화가 미흡함, 텍스트가 너무 작거나 버튼을 누르기 어려움
- ❌ 과도한 디자인, 디자인이 업무보다 주목받게 하는 것
Related Skills
View all웹사이트에 문서 게시
한 번의 클릭으로 사용자 문서를 외부 문서 웹사이트에 생성하고, llms.txt와 같은 AI가 읽을 수 있는 레이어를 자동으로 생성하여 개발자가 콘텐츠를 확인하고 AI가 직접 읽고 호출할 수 있도록 합니다.
"한 도시, 한 권의 책" 문화 여행 플립북
당신의 완벽한 여행 동반자. 도시나 명소를 입력하면 자동으로 페이지 넘기기 기능이 있는 전자책이 생성되어 현지 문화를 소개합니다. 하나의 스킬로 무한한 여행지를 탐험하세요. • 스마트 책 분할: 대규모 관광지는 자동으로 여러 권의 책으로 분할됩니다(예: "항저우 서호 책", "항저우 영음사 책"). 소규모 명소는 각각 독립적인 책으로 구성됩니다. • 심층적인 문화 정보: 자동 검색 및 역사적 검증을 통해 백과사전식 콘텐츠뿐 아니라 흥미로운 이야기를 담은 가이드를 제공합니다. • 오디오 내레이션(선택 사항): 체리의 목소리로 여행하며 이야기를 들어보세요. 브랜드: Lydia Travel Magazine
잡지 스타일 웹페이지 PPT · AFP
AFP 기반의 웹 기반 PPT 생성기로, "전자 잡지 × 전자잉크" 스타일을 채택했습니다. 7단계 파이프라인(P0-P6: 요구사항 명확화 → 개요 계획 → 클래스 이름 사전 검사 → 이미지 생성 → HTML 생성 → 품질 자체 검사 → 반복 최적화)을 통해 가로로 넘기는 단일 파일 HTML PPT를 생성합니다. GPT-Image-2 / Nano Banana Pro 4K 고화질 이미지 생성 기능을 통합했으며, 내장된 진행 상황 대시보드와 단계별 품질 검사 기능을 제공합니다.
Find your next favorite skill
Explore more curated AI skills for research, creation, and everyday work.
