## 지침

### 핵심 사명

**배경:** 사진작가, 일러스트레이터, 디자이너, 예술가 등 창작자들은 자신의 작품을 선보이고 잠재 고객이나 고용주를 유치하기 위해 전문적인 온라인 포트폴리오가 필요합니다. 기존의 포트폴리오 웹사이트는 제작 비용이 많이 들고 시간이 오래 걸리며, 개인적인 미적 감각을 반영하여 맞춤 설정하기 어렵습니다. 본 스킬은 시각적 아름다움과 기능적 완성도를 겸비한 포트폴리오 웹사이트를 신속하게 제작하는 방법을 제시합니다.

**구체적인 목표:**

- 작품 전시, 카테고리 필터링 및 작품 상세 정보를 포함하는 완벽한 포트폴리오 웹사이트를 제작하세요.

- 시각적 스타일이 제작자의 미적 관점 및 작업 성향과 매우 잘 부합함

- 다양한 탐색 방식(그리드/메이슨리/캐러셀 등)을 지원하는 매끄러운 상호 작용 경험

- 반응형 디자인으로 데스크톱과 모바일에 최적화되어 있습니다.

- 선택 사항: 개인 소개, 연락처 정보 및 기타 보조 모듈을 포함할 수 있습니다.

**주요 제약 조건:**

- 미적 감각은 핵심적인 경쟁 우위 요소이며, 틀에 박힌 평범한 디자인은 반드시 피해야 합니다.

- 작업 발표 방식은 내용 자체를 부각해야 하며, 과도한 디자인으로 내용을 가리는 것을 피해야 합니다.

- 로딩 속도와 브라우징 경험은 원활해야 합니다.

**작업을 공식적으로 시작하기 전에 먼저 사용자에게 작업 샘플을 제공했는지 확인하십시오. 자료가 준비된 것을 확인한 후에만 작업을 진행하십시오.**

### 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열로 조정하세요.

- **모바일:** 단일 또는 이중 열 레이아웃, 탭 영역 확대, 탐색 간소화

- 주요 정보(직함, 내비게이션, 연락처)는 모든 기기에서 명확하게 표시되어야 합니다.

### 일반적인 스타일 참조

- **미니멀리즘:** 풍부한 여백, 검정/흰색/회색의 기본 색상, 산세리프 글꼴, 단순한 아이콘, 모든 장식 제거

- **재패니즈 프레시:** 부드러운 색조(미색, 밝은 나무색, 은은한 파란색), 손글씨체, 따뜻하고 섬세한 디테일

- **패션 화보:** 높은 대비, 굵은 글꼴, 비대칭 레이아웃, 흑백 사진 스타일

- **빈티지:** 세월의 흔적이 느껴지는 질감, 따뜻한 노란색 톤, 세리프체 글꼴, 필름 그레인, 필름 같은 화질

- **기술/미래지향적:** 어두운 배경, 형광색 포인트, 기하학적 도형, 역동적인 효과, 사이버펑크 요소

- **미술관:** 순백색 배경, 매우 넓은 여백, 중앙에 배치된 작품, 최소한의 탐색 기능으로 실제 미술관 관람 경험을 시뮬레이션합니다.

### 피해야 할 디자인 함정

- ❌ 그라데이션, 그림자, 효과를 과도하게 사용하여 저렴해 보이는 디자인

- ❌ 너무 많거나 지나치게 화려한 글꼴은 가독성을 저해합니다.

- ❌ 색상 충돌 또는 과도한 채도, 시각적 피로

- ❌ 복잡한 배치, 작품 ​​간 숨 쉴 공간 부족

- ❌ 애니메이션이 너무 복잡하거나 느려서 사용자 경험에 영향을 줍니다.

- ❌ 모바일 환경에 최적화가 미흡함, 텍스트가 너무 작거나 버튼을 누르기 어려움

- ❌ 과도한 디자인, 디자인이 업무보다 주목받게 하는 것