개인 웹사이트
지시사항
## 핵심 작업
### 작업 배경
현대의 구직 환경에서, 다양한 직종에 맞춰 맞춤 제작된 개인 프로필 웹사이트는 구직자의 전문적인 이미지와 경쟁력을 크게 향상시킬 수 있습니다. 기존의 이력서는 종종 초점이 부족하고 구직자와 지원 직종 간의 적합성을 충분히 보여주지 못합니다. 본 기술은 인공지능(AI) 기능을 활용하여 구직 요건을 자동으로 분석하고, 개인 정보 표현을 최적화하며, 고품질의 개인 맞춤형 구직 웹사이트를 생성하는 것을 목표로 합니다.
### 구체적인 목표
1. 구직자의 기본적인 개인 정보(신분증, 학력, 경력, 기술 목록, 사진)를 모두 수집합니다.
2. 목표 직무의 산업 프로필, 요구되는 기술, 선호 특성에 대해 심층 분석을 실시하여 최소 5~8가지 핵심 영역에 걸쳐 통찰력을 확보하십시오.
3. 개인의 이력서와 직무 요건을 지능적으로 매칭하여 최소 3~5개의 맞춤형 최적화 제안을 생성합니다.
4. 시각적으로 매력적이고, 구조가 명확하며, 다양한 산업 분야에서 활용 가능한 대화형 개인 웹사이트를 제작하십시오.
5. 웹사이트 콘텐츠의 추적성을 확보하십시오. 모든 최적화 제안은 실제 업무 분석 데이터를 기반으로 합니다.
### 주요 제약 조건
개인 정보는 사실이고 완전해야 하며, 허위 또는 과장되어서는 안 됩니다.
직무 분석은 최소 세 가지 출처를 참고하여 실제 인터넷 검색 결과를 바탕으로 해야 합니다.
- 웹사이트 디자인 스타일은 "보편적인 미학, 우아한 미니멀리즘, 전문적이고 기억에 남는 인상"이라는 기준을 충족해야 합니다.
- 최종 웹사이트는 모든 핵심 정보를 단일 페이지에 완벽하게 표시하고 반응형 레이아웃을 지원해야 합니다.
### 1단계: 이력서에 필요한 개인 정보를 수집하고 정리합니다.
**목표:** 구직자에 대한 모든 필수 정보를 수집하고, 이를 구조화된 데이터로 정리하여 향후 분석 및 웹사이트 제작에 활용한다.
**행동**:
- 사용자가 개인 정보를 업로드하도록 요구하거나, 또는:
- 사용자가 YouMind에서 다음 필수 정보를 제공하거나 편집하도록 안내합니다.
- **기본 정보**: 이름, 나이, 연락처 (이메일, 전화번호, LinkedIn/GitHub 등)
- **개인 사진:** 전문적인 느낌의 개인 사진(JPG/PNG 형식 권장)을 업로드해 주세요.
- **학력**: 학교명, 전공, 학위, 학업 기간, 필수 과목 또는 수상 경력(있는 경우)
- **경력**: 회사명, 직위, 근무 기간, 주요 업무 및 성과 (3~5단락 분량 권장)
- **기술 목록**: 전문 기술, 도구/플랫폼 활용 능력, 언어 능력, 소프트 스킬 등
- **기타 주요 사항**(선택 사항): 프로젝트 경험, 수상 경력, 출판물, 봉사 활동 경험 등
- 수집한 정보를 명확하고 체계적인 형식으로 정리하세요 (마크다운 또는 표 형식을 권장합니다).
- 정보 완전성 확인: 모든 필수 입력란이 채워져 있는지, 사진이 올바른 형식으로 업로드되었는지 확인하십시오.
- 정리된 개인 정보를 YouMind에 자료 또는 메모로 저장하여 나중에 쉽게 참조할 수 있습니다.
**품질 기준**:
- 모든 필수 입력 항목(이름, 나이, 연락처, 학력, 직업, 기술, 사진)이 100% 작성되었습니다.
- 업무 경험과 학력 사항을 상세하고 정량적으로 설명하십시오 (예: "XX 프로젝트 담당, YY 성과 지표 30% 향상").
- 깔끔하고 전문적인 느낌의 개인 사진 (배경은 단순함).
### 문서 언어 스타일
**어조**: 전문적이고, 직접적이며, 체계적인 어조를 유지하십시오. 지나치게 구어체적이거나 학술적인 표현은 피하십시오.
**문구**: 능동태를 사용하고 동사로 시작하는 문장(예: "XX를 담당하는", "XX를 이끄는", "XX를 달성하는")을 사용하여 행동과 결과를 강조하십시오.
**데이터:** 결과를 최대한 수치화하세요(예: "전환율 30% 증가", "50만 달러 예산 관리", "10명으로 구성된 팀 관리").
**키워드:** 직무 분석에서 자주 등장하는 키워드를 경력 및 기술 설명에 자연스럽게 포함시키되, 억지로 또는 인위적으로 키워드를 과도하게 사용하는 것은 피하십시오.
### 2단계: 목표 직책의 산업 프로필 및 요구 사항 분석
**목표:** 포괄적인 온라인 검색을 통해 지원자의 일반적인 프로필, 핵심 역량 요구 사항, 업계 선호도 및 목표 직종에 대한 암묵적인 기대치를 심층적으로 파악하여 이력서 최적화를 위한 데이터 기반 자료를 제공합니다.
**행동**:
- 사용자가 입력한 목표 직책을 가져옵니다(예: "AI 기업 해외 성장 관리자", "제품 운영 전문가" 등).
- `googleSearch` 도구를 사용하여 다음 검색어를 포함하여 다차원 검색을 수행하십시오.
- "[지원 직위] 직무 설명 및 요구 사항"
- "[지원 직책]에 필요한 기술 및 자격"
- "[목표 직책] 면접 질문" (고용주의 중점 사항을 반영하는 면접 질문)
- "[목표 직위] 경력 경로" (경력 경로, 업계 배경 이해)
- 특정 산업 분야(예: AI, SaaS)의 경우, 검색어에 해당 산업 관련 키워드를 포함하세요.
- 검색 결과에서 다음의 핵심 정보를 추출하고 요약하십시오:
- **핵심 역량**: 필수적인 전문 기술, 도구, 플랫폼 및 기술 스택 (자주 사용하는 기술 5~8가지 나열)
- **소프트 스킬 선호도**: 의사소통 능력, 리더십, 다문화 협업 능력 등 (3~5개 항목 기재)
- **교육 및 경력**: 학력 요건, 경력 연수, 업종 선호도.
- **직무 책임**: 본 직책에서 일반적으로 수행하는 핵심 업무 (3-5개 항목)
- **산업 동향**: 이 직무는 현재 시장에서 수요가 높거나 새롭게 요구되는 분야입니다(예: AI 도구 활용, 데이터 기반 의사 결정 등).
- **기업 문화 선호도:** 가능하다면, 목표 산업/기업 유형의 문화적 특성(예: 기업가 정신, 결과 중심적 접근 방식 등)을 기록해 주세요.
- 분석 결과를 구조화된 보고서로 정리하고, 각 항목별 원본 자료 링크(최소 3개 이상)를 포함시키십시오.
- 해당 직무의 핵심 특징을 요약한 "목표 직무 프로필 요약"(200-300단어)을 작성하십시오.
**품질 기준**:
- 최소 3개 이상의 서로 다른 공신력 있는 출처(예: LinkedIn, Glassdoor, 업계 보고서, 채용 웹사이트)에서 정보를 수집하십시오.
- 하드 스킬 목록에는 최소 5개 항목, 소프트 스킬 목록에는 최소 3개 항목이 포함되어야 합니다.
- 각 주요 결과에는 추적성을 보장하기 위해 원본 링크가 함께 제공됩니다.
- 직무 설명 요약은 모호한 일반론을 피하고 명확하고 구체적이어야 합니다.
# 목표 직무 분석 보고서
## 목표 위치
[직책 (예: "AI 기업의 해외 성장 관리자")]
## 직무 개요
[본 직책의 핵심 특징, 주요 책임 및 업계 배경을 200~300단어 내외로 간략하게 설명하십시오.]
## 필수 기술 요건
1. [스킬 1] - 출처: [링크]
2. [스킬 2] - 출처: [링크]
3. [스킬 3] - 출처: [링크]
...
## 소프트 스킬 선호도
1. [스킬 1] - 출처: [링크]
2. [스킬 2] - 출처: [링크]
...
## 주요 업무
1. [책임 1]
2. [책임 2]
...
## 교육 및 경력 요건
- 학력: [필수]
- 경력: [필수]
- 산업 분야 경력: [선호도]
## 산업 동향 및 새로운 요구 사항
[인공지능 도구 활용 및 데이터 기반 접근 방식 등 이 직무와 관련된 최신 트렌드를 설명하십시오.]
## 참고자료
1. [출처 1 제목] - [링크]
2. [출처 2 제목] - [링크]
3. [출처 3 제목] - [링크]
### 3단계: 구직 요건에 맞춰 개인 이력서를 지능적으로 최적화하세요
**목표:** 개인 정보와 직무 요건을 심층적으로 비교 분석하고, 강점과 부족한 부분을 파악하여, 맞춤형 이력서 작성을 위한 구체적인 내용 최적화 방안을 제시합니다.
**행동**:
- 1단계에서 얻은 개인 정보와 2단계에서 얻은 직무 프로필을 비교하고, 항목별 일치 분석을 수행합니다.
- **기술 적합성:** 본인의 기술 중 어떤 기술이 직무 요구 사항과 일치합니까? 어떤 기술이 부족합니까?
- **경험 관련성**: 업무 경험 중 어떤 부분이 현재 직무와 매우 관련이 깊습니까? 이러한 관련성을 강조하기 위해 어떻게 다시 표현할 수 있을까요?
- **키워드 일치도:** 채용 공고에 자주 등장하는 키워드(예: "성장 해킹", "데이터 기반", "국경 간 운영")가 개인 프로필에 포함되어 있습니까?
- **소프트 스킬 역량 입증:** 해당 직책에 필요한 소프트 스킬(예: 리더십, 의사소통 능력)을 보여주는 구체적인 개인 경험 사례가 있습니까?
- 3~5개의 구체적인 최적화 제안을 제시하고, 각 제안에는 다음 내용이 포함됩니다.
- **최적화 지점:** 조정이 필요한 구체적인 세부 사항(예: "업무 경험에 데이터 분석 능력을 추가하는 예시").
- **최적화 이유:** 이러한 조정이 이루어진 이유(예: "목표 직책은 '데이터 기반 의사 결정'을 요구하지만, 현재 설명에는 정량적 데이터가 부족합니다").
- **최적화 예시**: 구체적인 재작성 제안이나 추가 콘텐츠를 제공해 주세요.
- 개인의 "차별화된 강점" 2~3가지를 파악하십시오(즉, 직무 설명에 명시적으로 언급되지는 않았지만 개인이 보유하고 있는 특성이나 경험으로, 이는 장점이 될 수 있습니다).
- 만약 중요한 기술이나 경험 부족 부분을 발견했다면, 솔직하게 지적하고 웹사이트에서 "학습 동기" 또는 "관련 경험 활용" 지표로 제시할 수 있는 방법을 제안하십시오.
- 최적화 제안을 바탕으로 원본 정보의 진정성은 유지하면서도 관련성을 강조하기 위해 단어 선택과 내용 순서를 조정한 "최적화된 개인 정보" 버전이 생성됩니다.
**품질 기준**:
- 최소 3가지의 구체적이고 실행 가능한 최적화 방안을 제시하십시오.
- 각 제안에는 "최적화 전 - 최적화 후" 비교 또는 구체적인 예시가 명확하게 포함되어 있습니다.
최적화된 콘텐츠는 사실에 근거해야 하며, 날조되거나 과장되어서는 안 됩니다.
- 최소 두 가지 이상의 차별화된 장점을 제시하십시오.
# 이력서 최적화 제안
## 매칭 분석
- **스킬 매칭**: [매칭된 스킬] / [부족한 스킬]
- **경험 관련성**: [매우 관련성 높은 경험] / [개선이 필요한 부분]
- **키워드 정렬**: [포함된 키워드] / [추가할 키워드]
## 최적화 제안
### 제안 1: [최적화 포인트]
- **이유:** [최적화가 필요한 이유]
- **최적화 전**: [원문]
- **최적화됨**: [표현 방식 개선]
### 제안 2: [최적화 포인트]
...
## 차별화 우위
1. [장점 1]: [상세 설명]
2. [장점 2]: [상세 설명]
## 최적화된 개인 정보
[완전히 최적화된 개인 정보이며, "구조화된 개인 정보 문서"와 동일한 형식으로 작성되었습니다.]
### 문서 언어 스타일
**어조**: 전문적이고, 직접적이며, 체계적인 어조를 유지하십시오. 지나치게 구어체적이거나 학술적인 표현은 피하십시오.
**문구**: 능동태를 사용하고 동사로 시작하는 문장(예: "XX를 담당하는", "XX를 이끄는", "XX를 달성하는")을 사용하여 행동과 결과를 강조하십시오.
**데이터:** 결과를 최대한 수치화하세요(예: "전환율 30% 증가", "50만 달러 예산 관리", "10명으로 구성된 팀 관리").
**키워드:** 직무 분석에서 자주 등장하는 키워드를 경력 및 기술 설명에 자연스럽게 통합하되, 억지로 또는 인위적으로 키워드를 과도하게 삽입하지 마십시오.
### 4단계: 포스트모던 스타일의 개인 구직 웹사이트 제작
**목표:** YouMind의 `generateWebpage` 도구를 사용하여 최적화된 개인 정보를 완벽하게 보여주는, 포스트모던적이고 시각적으로 강렬하며 독창적인 단일 페이지 개인 구직 웹사이트를 제작하세요.
**행동**:
- `generateWebpage` 도구를 실행하고 다음 명령과 매개변수를 전달합니다.
- **지시사항**: "구직자의 이력서 정보를 모두 보여주는 단일 페이지 개인 구직 웹사이트를 제작하세요. 웹사이트는 다음 요건을 충족해야 합니다."
- **디자인 스타일:** 포스트모더니즘. 규칙 파괴, 스타일 혼합, 해체주의, 아이러니, 콜라주, 비대칭, 대담한 색상, 미학적 충돌을 강조합니다. 보수적이거나 획일적인 디자인을 지양하고, 시각적으로 기억에 남고 독특하며 도전적인 웹사이트를 만드는 것이 목표입니다.
- **레이아웃 구조**: 기존 그리드의 파편화되고 비대칭적인 레이아웃에서 벗어나세요. 요소들을 겹치거나 회전시켜 깊이감과 혼돈감을 표현할 수 있습니다. 모듈 순서는 무작위로 배치하거나 비선형적으로 제시할 수 있습니다. Z축 계층 구조를 권장합니다. 다음 모듈들이 포함되지만, 표현 방식은 기존 방식과 다를 수 있습니다.
1. **히어로 섹션** (첫 화면): 콜라주, 텍스트와 이미지 겹침, 글리치 아트 등의 효과를 활용하여 시각적으로 강렬한 오프닝을 연출할 수 있습니다.
2. **자기소개**: 이 텍스트는 페이지의 여러 영역에 나누어 표시하거나 다양한 글꼴을 조합하여 서식을 지정할 수 있습니다.
3. **경험**: 기존의 시간 순서 방식을 버리고 크기가 다양하거나 모양이 불규칙한 카드, 또는 패럴랙스 스크롤링을 사용하여 각 경험을 표시하세요.
4. **교육**: 독립적인 구조 모듈이라기보다는 전체 레이아웃의 장식적 또는 구조적 요소로서 활용되는 경우.
5. **기술:** 무질서한 태그 클라우드를 사용하거나, 텍스트를 그래픽 요소로 활용하여 배치하거나, 독창적인 방식으로 시각화할 수 있습니다.
6. **연락처**: 아이콘과 링크는 크기를 크게 또는 작게 조절할 수 있으며 페이지의 예상치 못한 곳에 배치할 수 있습니다.
- **색 구성**: 대담하고 대비가 강하며 채도가 높은 색상 조합을 사용하세요. 형광색, 서로 어울리지 않는 인접 색상, 강렬한 그라데이션을 활용해 보세요. 예를 들어, 밝은 분홍색(#FF00FF)과 연두색(#00FF00)을 조합하거나, 글리치 아트 스타일의 색상 깨짐 효과를 사용할 수 있습니다. 배경은 여러 색상을 조합한 콜라주나 노이즈/격자 패턴으로 꾸밀 수 있습니다.
- **폰트 시스템**: 굵은 세리프체와 기하학적 산세리프체처럼 각기 다른 스타일의 폰트를 혼합하여 사용합니다. 글자 크기의 극단적인 대비가 허용됩니다. 제목은 매우 크게, 본문은 매우 작게 사용할 수 있습니다. 텍스트는 회전, 기울임, 겹침은 물론, 부분적으로는 순수하게 장식적인 그래픽 요소로 활용될 수도 있습니다.
- **상호작용 디자인**: 과장되고 예상치 못한 상호작용 효과. 마우스 커서를 올리면 글리치 효과, 색상 반전 또는 요소 위치 변경이 발생할 수 있습니다. 스크롤은 껑충껑충 뛰거나 강한 시차 효과를 낼 수 있습니다. 탐색 링크를 클릭하면 예상치 못한 애니메이션이 표시될 수 있습니다.
**반응형 디자인:** 핵심 정보의 가독성을 보장하면서 다양한 기기에서 포스트모던적이고 "분절된" 느낌을 유지해야 합니다. 모바일 버전에서는 특정 효과를 간소화할 수 있지만, 스타일의 일관성은 반드시 유지해야 합니다.
- **참고 자료**: 3단계에서 생성된 "최적화된 개인 정보"의 자료/참고 자료와 개인 사진의 URL을 입력하세요.
- 웹사이트 생성 후 다음 품질 항목을 확인하세요.
- 모든 개인 정보가 (레이아웃이 다소 어수선하더라도) 완전하고 정확하게 표시되어 있습니까?
이 시각적 스타일은 "포스트모더니즘"의 요건을 충족합니까? 대담하고 강렬한가요?
- 각 모듈의 정보를 찾고 이해할 수 있습니까?
- 예상치 못한 상황이 발생하더라도 상호작용 효과는 예상대로 작동합니까?
- 생성된 웹사이트가 기대에 미치지 못하는 경우, 구체적인 문제를 기록하고 `generateWebpage` 함수의 `webpage_id` 매개변수를 사용하여 반복적인 최적화를 진행하십시오.
**품질 기준**:
- 웹사이트에는 필요한 모든 모듈(주인공, 소개, 경력, 학력, 기술, 연락처)이 포함되어 있지만, 형식은 제한되지 않습니다.
- 시각적 디자인은 대담하고 포스트모더니즘에 부합하며, 강렬한 개성과 기억에 남는 매력을 지니고 있습니다.
- 모든 개인 정보는 정확하며 최적화된 콘텐츠와 일치합니다.
- 웹사이트의 핵심 정보는 데스크톱과 모바일 기기 모두에서 읽기 쉽고, 디자인 스타일도 일관적입니다.
- 전반적인 인상은 "대담하고, 전위적이며, 창의성이 넘친다"는 것으로, 이는 수많은 이력서 중에서 그들을 돋보이게 하는 데 도움이 됩니다.
## 스타일 및 프레젠테이션
### 웹사이트 시각적 스타일 (핵심 표준)
**디자인 미학:** 포스트모더니즘. 그 핵심은 "모더니즘에 대한 반항과 해체"입니다. 혼돈, 모순, 아이러니, 그리고 유쾌한 정신을 포용합니다. 디자인은 생동감 넘치고, 절충적이며, 심지어 약간 도발적일 수도 있습니다. 고급 예술과 대중문화를 융합하여 "좋은 디자인"의 전통적인 규칙을 깨뜨립니다.
**색상 구성**:
- **핵심 원칙:** 대담함, 갈등, 높은 채도. 조화를 거부하고 시각적 긴장감을 추구하라.
- **색상 조합**: 형광색, 네온색, 그리고 서로 어울리지 않는 인접한 색상을 사용하세요. 예를 들어, 글리터(#FF00FF) + 밝은 노란색(#FFFF00) + 청록색(#00FFFF)을 조합해 보세요.
- **배경:** 순백색 배경은 피하세요. 노이즈, 격자선, 기하학적 패턴 또는 여러 색상의 블록이 있는 배경을 사용하세요. 강렬한 그라데이션 배경도 시도해 볼 수 있습니다.
- **보조색**: 보조색에는 엄격한 개념이 없습니다. 어떤 색이든 주색이 될 수 있습니다. 의도적으로 "보기 흉한" 색 조합을 사용하여 아이러니한 효과를 만들어낼 수도 있습니다.
**폰트 시스템**:
**핵심 원칙:** 획일성과 단일성을 반대한다. 혼합, 갈등, 그리고 대조가 핵심이다.
- **다양한 글꼴**: 한 페이지에 여러 가지 스타일의 글꼴을 함께 사용하는 것. 예를 들어, 클래식 세리프 글꼴(타임스 뉴 로만 등)과 굵은 산세리프 글꼴(에리얼 블랙 등) 또는 손글씨 글꼴을 나란히 사용하는 것입니다.
- **크기 대비**: 극단적인 경우. 헤드라인은 화면의 절반을 차지할 정도로 크고, 본문 텍스트는 읽기 힘들 정도로 작을 수 있습니다(디자인 의도에 따른 것일 수 있음).
- **텍스트 처리**: 텍스트를 그래픽처럼 취급합니다. 회전, 기울이기, 세로 정렬, 좌우 반전, 겹치기 등의 기능을 제공합니다. 텍스트는 경로를 따라 배열하거나, 개별 글자로 나누어 페이지 전체에 배치할 수 있습니다.
**레이아웃 원칙**:
- **격자 구조를 깨뜨려라:** 기존의 격자 시스템을 완전히 버려라. 요소들을 비대칭적이고 무작위적인 것처럼 보이는 레이아웃으로 배치하라.
- **콜라주 및 겹침**: 레이어와 Z축을 적극적으로 활용하여 이미지, 텍스트, 색상 블록을 겹쳐 콜라주 효과를 연출합니다.
- **파편화**: 하나의 완전한 디자인 요소(예: 이미지 또는 텍스트 블록)를 여러 부분으로 나누어 다양한 위치에 흩어 놓는 것.
- **여백**: 불규칙적이고 역동적인 여백으로, 여백 자체가 단순히 "숨 쉴 공간"이 아니라 형태와 디자인 요소가 되는 공간입니다.
**상호작용 세부 정보**:
- **호버 효과**: 과장되고 파격적입니다. 마우스 커서가 요소 위에 올라가면 요소가 급격하게 변형되거나, 색상이 반전되거나, 오류 효과가 나타나거나, 예상치 못한 GIF가 재생될 수 있습니다.
- **스크롤링**: 강렬한 시차 스크롤링 효과로, 각 레이어가 서로 다른 속도로 움직여 깊이감과 환각적인 효과를 자아냅니다.
- **애니메이션**: 갑작스럽고 비선형적인 애니메이션. 요소들이 예상치 못한 방향에서 날아오거나 "잘못된" 방식으로 로드될 수 있습니다.
- **커서**: 사용자 지정 커서, 대형 커서 또는 끊임없이 변하는 커서를 사용하여 상호작용의 재미를 더할 수 있습니다.
**모듈 설계 사양**:
1. **주인공 섹션** (첫 화면):
- 콜라주 스타일을 사용하여 개인 사진(필터 또는 글리치 효과 처리 가능), 이름의 큰 이니셜, 회전하는 목표 직업 텍스트, 기하학적 도형 등을 함께 조합하세요.
- 배경은 동적 노이즈 또는 빠르게 변화하는 색상 블록일 수 있습니다.
2. **저에 대하여**:
텍스트는 서로 다른 글꼴과 크기를 사용하는 여러 개의 작은 블록으로 나뉘어 페이지 곳곳에 흩어져 있습니다. 일부 텍스트는 배경과 섞여 있어 사용자가 주의 깊게 찾아야 합니다.
3. **경력** (업무 경험):
각각의 경험은 불규칙한 모양에 밝은 색상의 "카드"로 구성되어 있으며, 이 카드들은 서로 겹쳐지고 기울어진 형태로 쌓여 있습니다. 마우스 커서를 카드 위로 가져가면 카드가 맨 위로 "떠올라" 상세 정보를 표시합니다.
4. **교육** (학력):
정보는 페이지의 장식 테두리에 통합되거나 매우 작은 글꼴로 배경 질감의 일부로 사용될 수 있습니다.
5. **기술**
- 다양한 크기, 글꼴, 색상의 스킬 단어들이 역동적이고 혼란스러운 워드 클라우드를 생성합니다. 마우스 커서를 단어 위에 올리면 단어가 커지거나 흔들릴 수 있습니다.
6. **연락처 정보:**
- 크기가 크거나 픽셀화된 아이콘을 사용하고 페이지 가장자리나 모서리에 배치하세요. 링크는 예상치 못한 그래픽 요소 뒤에 숨길 수 있습니다.
**반응형 디자인**:
- **핵심**: 다양한 기기에서 "질서 있는 혼돈"을 유지합니다.
- **데스크톱 버전**(>1200px): 겹치는 열과 여러 열이 있는 복잡한 레이아웃을 완벽하게 표시합니다.
- **플랫 패널**(768-1200px): 비대칭성과 파편화된 느낌을 유지하면서 요소 간 겹침을 줄입니다.
- **모바일**(<768px): 단일 열 레이아웃으로 변환되었지만, 과장된 글꼴 크기 대비, 굵은 색상 블록 및 비선형 스크롤링을 통해 포스트모던 스타일을 유지합니다.
###
### 5단계: 품질 검사 및 납품
**목표:** 제작된 웹사이트에 대한 종합적인 품질 검사를 실시하여 정확한 정보, 세련된 디자인, 원활한 사용자 경험을 보장하고 사용자 가이드를 제공하는 것입니다.
**행동**:
- 품목별 품질 검사를 실시합니다.
- **정보 정확성**: 웹사이트에掲載된 모든 이름, 연락처 정보, 경력, 학력 및 기술은 원본 정보와의 일관성을 보장하기 위해 꼼꼼하게 검증되었습니다.
- **시각적 일관성**: 글꼴, 색상, 간격 및 정렬의 일관성을 확인하고 시각적 결함이 있는지 살펴보세요.
- **상호작용 부드러움:** 내비게이션 전환, 스크롤 효과 및 마우스 오버 애니메이션이 올바르게 작동하는지 테스트합니다.
- **반응형 적응:** 다양한 기기 크기를 시뮬레이션하여 레이아웃이 적절한지 확인합니다.
- **가독성:** 적절한 글자 크기, 충분한 대비, 명확한 정보 계층 구조를 확보하십시오.
- 다음 내용을 포함하는 "웹사이트 사용자 가이드"를 생성하세요:
- 웹사이트 접속 링크 (YouMind에서 생성한 웹페이지 URL)
- 웹사이트 공유 방법 (링크 복사, QR 코드 생성 등)
- 다양한 직무에 맞춰 콘텐츠를 빠르게 조정하는 방법 (예: 목표 직무 변경, 경력 업데이트 등)
- 향후 최적화를 위한 제안 (예: 정기적인 콘텐츠 업데이트, 프로젝트 사례 추가 등)
사용자에게 최종 웹사이트를 보여주고 수정이 필요한 부분이 있는지 물어보세요.
- 사용자가 수정 사항을 제안하면 이를 기록하고 `generateWebpage`를 사용하여 반복적인 최적화를 수행하십시오.
**품질 기준**:
- 모든 정보는 100% 정확하며, 오타나 서식 오류가 없습니다.
- 웹사이트는 최소 두 가지 기기(데스크톱 + 모바일)에서 테스트를 통과했습니다.
- 명확한 사용자 지침을 제공하여 사용자가 웹사이트를 독립적으로 공유하고 관리할 수 있도록 합니다.
- 사용자가 최종 결과에 만족했거나, 피드백을 기반으로 최적화를 완료했습니다.
설명
추천한 사람
nene@YouMind
이 스킬을 추천하는 이유
많은 구직자들 사이에서 두각을 나타내고 싶으신가요? 이 스킬은 '포스트모더니즘' 스타일의 개인 구직 웹사이트를 맞춤 제작해 드립니다. 직무 요구 사항을 심층 분석하고 이력서를 지능적으로 최적화할 뿐만 아니라, 시각적으로 대담하고 창의적인 인터랙티브 웹 페이지를 생성하여 독특한 개성으로 면접관에게 깊은 인상을 남기고 원하는 오퍼를 받을 수 있도록 도와줍니다!
개인 이력 정보를 수집하고, 목표 직무 프로필을 분석하며, 이력서 내용을 지능적으로 최적화하여 심미적으로 우아하고 미니멀하며 전문적인 개인 구직 웹사이트를 생성합니다.
개인 웹사이트
지시사항
## 핵심 작업
### 작업 배경
현대의 구직 환경에서, 다양한 직종에 맞춰 맞춤 제작된 개인 프로필 웹사이트는 구직자의 전문적인 이미지와 경쟁력을 크게 향상시킬 수 있습니다. 기존의 이력서는 종종 초점이 부족하고 구직자와 지원 직종 간의 적합성을 충분히 보여주지 못합니다. 본 기술은 인공지능(AI) 기능을 활용하여 구직 요건을 자동으로 분석하고, 개인 정보 표현을 최적화하며, 고품질의 개인 맞춤형 구직 웹사이트를 생성하는 것을 목표로 합니다.
### 구체적인 목표
1. 구직자의 기본적인 개인 정보(신분증, 학력, 경력, 기술 목록, 사진)를 모두 수집합니다.
2. 목표 직무의 산업 프로필, 요구되는 기술, 선호 특성에 대해 심층 분석을 실시하여 최소 5~8가지 핵심 영역에 걸쳐 통찰력을 확보하십시오.
3. 개인의 이력서와 직무 요건을 지능적으로 매칭하여 최소 3~5개의 맞춤형 최적화 제안을 생성합니다.
4. 시각적으로 매력적이고, 구조가 명확하며, 다양한 산업 분야에서 활용 가능한 대화형 개인 웹사이트를 제작하십시오.
5. 웹사이트 콘텐츠의 추적성을 확보하십시오. 모든 최적화 제안은 실제 업무 분석 데이터를 기반으로 합니다.
### 주요 제약 조건
개인 정보는 사실이고 완전해야 하며, 허위 또는 과장되어서는 안 됩니다.
직무 분석은 최소 세 가지 출처를 참고하여 실제 인터넷 검색 결과를 바탕으로 해야 합니다.
- 웹사이트 디자인 스타일은 "보편적인 미학, 우아한 미니멀리즘, 전문적이고 기억에 남는 인상"이라는 기준을 충족해야 합니다.
- 최종 웹사이트는 모든 핵심 정보를 단일 페이지에 완벽하게 표시하고 반응형 레이아웃을 지원해야 합니다.
### 1단계: 이력서에 필요한 개인 정보를 수집하고 정리합니다.
**목표:** 구직자에 대한 모든 필수 정보를 수집하고, 이를 구조화된 데이터로 정리하여 향후 분석 및 웹사이트 제작에 활용한다.
**행동**:
- 사용자가 개인 정보를 업로드하도록 요구하거나, 또는:
- 사용자가 YouMind에서 다음 필수 정보를 제공하거나 편집하도록 안내합니다.
- **기본 정보**: 이름, 나이, 연락처 (이메일, 전화번호, LinkedIn/GitHub 등)
- **개인 사진:** 전문적인 느낌의 개인 사진(JPG/PNG 형식 권장)을 업로드해 주세요.
- **학력**: 학교명, 전공, 학위, 학업 기간, 필수 과목 또는 수상 경력(있는 경우)
- **경력**: 회사명, 직위, 근무 기간, 주요 업무 및 성과 (3~5단락 분량 권장)
- **기술 목록**: 전문 기술, 도구/플랫폼 활용 능력, 언어 능력, 소프트 스킬 등
- **기타 주요 사항**(선택 사항): 프로젝트 경험, 수상 경력, 출판물, 봉사 활동 경험 등
- 수집한 정보를 명확하고 체계적인 형식으로 정리하세요 (마크다운 또는 표 형식을 권장합니다).
- 정보 완전성 확인: 모든 필수 입력란이 채워져 있는지, 사진이 올바른 형식으로 업로드되었는지 확인하십시오.
- 정리된 개인 정보를 YouMind에 자료 또는 메모로 저장하여 나중에 쉽게 참조할 수 있습니다.
**품질 기준**:
- 모든 필수 입력 항목(이름, 나이, 연락처, 학력, 직업, 기술, 사진)이 100% 작성되었습니다.
- 업무 경험과 학력 사항을 상세하고 정량적으로 설명하십시오 (예: "XX 프로젝트 담당, YY 성과 지표 30% 향상").
- 깔끔하고 전문적인 느낌의 개인 사진 (배경은 단순함).
### 문서 언어 스타일
**어조**: 전문적이고, 직접적이며, 체계적인 어조를 유지하십시오. 지나치게 구어체적이거나 학술적인 표현은 피하십시오.
**문구**: 능동태를 사용하고 동사로 시작하는 문장(예: "XX를 담당하는", "XX를 이끄는", "XX를 달성하는")을 사용하여 행동과 결과를 강조하십시오.
**데이터:** 결과를 최대한 수치화하세요(예: "전환율 30% 증가", "50만 달러 예산 관리", "10명으로 구성된 팀 관리").
**키워드:** 직무 분석에서 자주 등장하는 키워드를 경력 및 기술 설명에 자연스럽게 포함시키되, 억지로 또는 인위적으로 키워드를 과도하게 사용하는 것은 피하십시오.
### 2단계: 목표 직책의 산업 프로필 및 요구 사항 분석
**목표:** 포괄적인 온라인 검색을 통해 지원자의 일반적인 프로필, 핵심 역량 요구 사항, 업계 선호도 및 목표 직종에 대한 암묵적인 기대치를 심층적으로 파악하여 이력서 최적화를 위한 데이터 기반 자료를 제공합니다.
**행동**:
- 사용자가 입력한 목표 직책을 가져옵니다(예: "AI 기업 해외 성장 관리자", "제품 운영 전문가" 등).
- `googleSearch` 도구를 사용하여 다음 검색어를 포함하여 다차원 검색을 수행하십시오.
- "[지원 직위] 직무 설명 및 요구 사항"
- "[지원 직책]에 필요한 기술 및 자격"
- "[목표 직책] 면접 질문" (고용주의 중점 사항을 반영하는 면접 질문)
- "[목표 직위] 경력 경로" (경력 경로, 업계 배경 이해)
- 특정 산업 분야(예: AI, SaaS)의 경우, 검색어에 해당 산업 관련 키워드를 포함하세요.
- 검색 결과에서 다음의 핵심 정보를 추출하고 요약하십시오:
- **핵심 역량**: 필수적인 전문 기술, 도구, 플랫폼 및 기술 스택 (자주 사용하는 기술 5~8가지 나열)
- **소프트 스킬 선호도**: 의사소통 능력, 리더십, 다문화 협업 능력 등 (3~5개 항목 기재)
- **교육 및 경력**: 학력 요건, 경력 연수, 업종 선호도.
- **직무 책임**: 본 직책에서 일반적으로 수행하는 핵심 업무 (3-5개 항목)
- **산업 동향**: 이 직무는 현재 시장에서 수요가 높거나 새롭게 요구되는 분야입니다(예: AI 도구 활용, 데이터 기반 의사 결정 등).
- **기업 문화 선호도:** 가능하다면, 목표 산업/기업 유형의 문화적 특성(예: 기업가 정신, 결과 중심적 접근 방식 등)을 기록해 주세요.
- 분석 결과를 구조화된 보고서로 정리하고, 각 항목별 원본 자료 링크(최소 3개 이상)를 포함시키십시오.
- 해당 직무의 핵심 특징을 요약한 "목표 직무 프로필 요약"(200-300단어)을 작성하십시오.
**품질 기준**:
- 최소 3개 이상의 서로 다른 공신력 있는 출처(예: LinkedIn, Glassdoor, 업계 보고서, 채용 웹사이트)에서 정보를 수집하십시오.
- 하드 스킬 목록에는 최소 5개 항목, 소프트 스킬 목록에는 최소 3개 항목이 포함되어야 합니다.
- 각 주요 결과에는 추적성을 보장하기 위해 원본 링크가 함께 제공됩니다.
- 직무 설명 요약은 모호한 일반론을 피하고 명확하고 구체적이어야 합니다.
# 목표 직무 분석 보고서
## 목표 위치
[직책 (예: "AI 기업의 해외 성장 관리자")]
## 직무 개요
[본 직책의 핵심 특징, 주요 책임 및 업계 배경을 200~300단어 내외로 간략하게 설명하십시오.]
## 필수 기술 요건
1. [스킬 1] - 출처: [링크]
2. [스킬 2] - 출처: [링크]
3. [스킬 3] - 출처: [링크]
...
## 소프트 스킬 선호도
1. [스킬 1] - 출처: [링크]
2. [스킬 2] - 출처: [링크]
...
## 주요 업무
1. [책임 1]
2. [책임 2]
...
## 교육 및 경력 요건
- 학력: [필수]
- 경력: [필수]
- 산업 분야 경력: [선호도]
## 산업 동향 및 새로운 요구 사항
[인공지능 도구 활용 및 데이터 기반 접근 방식 등 이 직무와 관련된 최신 트렌드를 설명하십시오.]
## 참고자료
1. [출처 1 제목] - [링크]
2. [출처 2 제목] - [링크]
3. [출처 3 제목] - [링크]
### 3단계: 구직 요건에 맞춰 개인 이력서를 지능적으로 최적화하세요
**목표:** 개인 정보와 직무 요건을 심층적으로 비교 분석하고, 강점과 부족한 부분을 파악하여, 맞춤형 이력서 작성을 위한 구체적인 내용 최적화 방안을 제시합니다.
**행동**:
- 1단계에서 얻은 개인 정보와 2단계에서 얻은 직무 프로필을 비교하고, 항목별 일치 분석을 수행합니다.
- **기술 적합성:** 본인의 기술 중 어떤 기술이 직무 요구 사항과 일치합니까? 어떤 기술이 부족합니까?
- **경험 관련성**: 업무 경험 중 어떤 부분이 현재 직무와 매우 관련이 깊습니까? 이러한 관련성을 강조하기 위해 어떻게 다시 표현할 수 있을까요?
- **키워드 일치도:** 채용 공고에 자주 등장하는 키워드(예: "성장 해킹", "데이터 기반", "국경 간 운영")가 개인 프로필에 포함되어 있습니까?
- **소프트 스킬 역량 입증:** 해당 직책에 필요한 소프트 스킬(예: 리더십, 의사소통 능력)을 보여주는 구체적인 개인 경험 사례가 있습니까?
- 3~5개의 구체적인 최적화 제안을 제시하고, 각 제안에는 다음 내용이 포함됩니다.
- **최적화 지점:** 조정이 필요한 구체적인 세부 사항(예: "업무 경험에 데이터 분석 능력을 추가하는 예시").
- **최적화 이유:** 이러한 조정이 이루어진 이유(예: "목표 직책은 '데이터 기반 의사 결정'을 요구하지만, 현재 설명에는 정량적 데이터가 부족합니다").
- **최적화 예시**: 구체적인 재작성 제안이나 추가 콘텐츠를 제공해 주세요.
- 개인의 "차별화된 강점" 2~3가지를 파악하십시오(즉, 직무 설명에 명시적으로 언급되지는 않았지만 개인이 보유하고 있는 특성이나 경험으로, 이는 장점이 될 수 있습니다).
- 만약 중요한 기술이나 경험 부족 부분을 발견했다면, 솔직하게 지적하고 웹사이트에서 "학습 동기" 또는 "관련 경험 활용" 지표로 제시할 수 있는 방법을 제안하십시오.
- 최적화 제안을 바탕으로 원본 정보의 진정성은 유지하면서도 관련성을 강조하기 위해 단어 선택과 내용 순서를 조정한 "최적화된 개인 정보" 버전이 생성됩니다.
**품질 기준**:
- 최소 3가지의 구체적이고 실행 가능한 최적화 방안을 제시하십시오.
- 각 제안에는 "최적화 전 - 최적화 후" 비교 또는 구체적인 예시가 명확하게 포함되어 있습니다.
최적화된 콘텐츠는 사실에 근거해야 하며, 날조되거나 과장되어서는 안 됩니다.
- 최소 두 가지 이상의 차별화된 장점을 제시하십시오.
# 이력서 최적화 제안
## 매칭 분석
- **스킬 매칭**: [매칭된 스킬] / [부족한 스킬]
- **경험 관련성**: [매우 관련성 높은 경험] / [개선이 필요한 부분]
- **키워드 정렬**: [포함된 키워드] / [추가할 키워드]
## 최적화 제안
### 제안 1: [최적화 포인트]
- **이유:** [최적화가 필요한 이유]
- **최적화 전**: [원문]
- **최적화됨**: [표현 방식 개선]
### 제안 2: [최적화 포인트]
...
## 차별화 우위
1. [장점 1]: [상세 설명]
2. [장점 2]: [상세 설명]
## 최적화된 개인 정보
[완전히 최적화된 개인 정보이며, "구조화된 개인 정보 문서"와 동일한 형식으로 작성되었습니다.]
### 문서 언어 스타일
**어조**: 전문적이고, 직접적이며, 체계적인 어조를 유지하십시오. 지나치게 구어체적이거나 학술적인 표현은 피하십시오.
**문구**: 능동태를 사용하고 동사로 시작하는 문장(예: "XX를 담당하는", "XX를 이끄는", "XX를 달성하는")을 사용하여 행동과 결과를 강조하십시오.
**데이터:** 결과를 최대한 수치화하세요(예: "전환율 30% 증가", "50만 달러 예산 관리", "10명으로 구성된 팀 관리").
**키워드:** 직무 분석에서 자주 등장하는 키워드를 경력 및 기술 설명에 자연스럽게 통합하되, 억지로 또는 인위적으로 키워드를 과도하게 삽입하지 마십시오.
### 4단계: 포스트모던 스타일의 개인 구직 웹사이트 제작
**목표:** YouMind의 `generateWebpage` 도구를 사용하여 최적화된 개인 정보를 완벽하게 보여주는, 포스트모던적이고 시각적으로 강렬하며 독창적인 단일 페이지 개인 구직 웹사이트를 제작하세요.
**행동**:
- `generateWebpage` 도구를 실행하고 다음 명령과 매개변수를 전달합니다.
- **지시사항**: "구직자의 이력서 정보를 모두 보여주는 단일 페이지 개인 구직 웹사이트를 제작하세요. 웹사이트는 다음 요건을 충족해야 합니다."
- **디자인 스타일:** 포스트모더니즘. 규칙 파괴, 스타일 혼합, 해체주의, 아이러니, 콜라주, 비대칭, 대담한 색상, 미학적 충돌을 강조합니다. 보수적이거나 획일적인 디자인을 지양하고, 시각적으로 기억에 남고 독특하며 도전적인 웹사이트를 만드는 것이 목표입니다.
- **레이아웃 구조**: 기존 그리드의 파편화되고 비대칭적인 레이아웃에서 벗어나세요. 요소들을 겹치거나 회전시켜 깊이감과 혼돈감을 표현할 수 있습니다. 모듈 순서는 무작위로 배치하거나 비선형적으로 제시할 수 있습니다. Z축 계층 구조를 권장합니다. 다음 모듈들이 포함되지만, 표현 방식은 기존 방식과 다를 수 있습니다.
1. **히어로 섹션** (첫 화면): 콜라주, 텍스트와 이미지 겹침, 글리치 아트 등의 효과를 활용하여 시각적으로 강렬한 오프닝을 연출할 수 있습니다.
2. **자기소개**: 이 텍스트는 페이지의 여러 영역에 나누어 표시하거나 다양한 글꼴을 조합하여 서식을 지정할 수 있습니다.
3. **경험**: 기존의 시간 순서 방식을 버리고 크기가 다양하거나 모양이 불규칙한 카드, 또는 패럴랙스 스크롤링을 사용하여 각 경험을 표시하세요.
4. **교육**: 독립적인 구조 모듈이라기보다는 전체 레이아웃의 장식적 또는 구조적 요소로서 활용되는 경우.
5. **기술:** 무질서한 태그 클라우드를 사용하거나, 텍스트를 그래픽 요소로 활용하여 배치하거나, 독창적인 방식으로 시각화할 수 있습니다.
6. **연락처**: 아이콘과 링크는 크기를 크게 또는 작게 조절할 수 있으며 페이지의 예상치 못한 곳에 배치할 수 있습니다.
- **색 구성**: 대담하고 대비가 강하며 채도가 높은 색상 조합을 사용하세요. 형광색, 서로 어울리지 않는 인접 색상, 강렬한 그라데이션을 활용해 보세요. 예를 들어, 밝은 분홍색(#FF00FF)과 연두색(#00FF00)을 조합하거나, 글리치 아트 스타일의 색상 깨짐 효과를 사용할 수 있습니다. 배경은 여러 색상을 조합한 콜라주나 노이즈/격자 패턴으로 꾸밀 수 있습니다.
- **폰트 시스템**: 굵은 세리프체와 기하학적 산세리프체처럼 각기 다른 스타일의 폰트를 혼합하여 사용합니다. 글자 크기의 극단적인 대비가 허용됩니다. 제목은 매우 크게, 본문은 매우 작게 사용할 수 있습니다. 텍스트는 회전, 기울임, 겹침은 물론, 부분적으로는 순수하게 장식적인 그래픽 요소로 활용될 수도 있습니다.
- **상호작용 디자인**: 과장되고 예상치 못한 상호작용 효과. 마우스 커서를 올리면 글리치 효과, 색상 반전 또는 요소 위치 변경이 발생할 수 있습니다. 스크롤은 껑충껑충 뛰거나 강한 시차 효과를 낼 수 있습니다. 탐색 링크를 클릭하면 예상치 못한 애니메이션이 표시될 수 있습니다.
**반응형 디자인:** 핵심 정보의 가독성을 보장하면서 다양한 기기에서 포스트모던적이고 "분절된" 느낌을 유지해야 합니다. 모바일 버전에서는 특정 효과를 간소화할 수 있지만, 스타일의 일관성은 반드시 유지해야 합니다.
- **참고 자료**: 3단계에서 생성된 "최적화된 개인 정보"의 자료/참고 자료와 개인 사진의 URL을 입력하세요.
- 웹사이트 생성 후 다음 품질 항목을 확인하세요.
- 모든 개인 정보가 (레이아웃이 다소 어수선하더라도) 완전하고 정확하게 표시되어 있습니까?
이 시각적 스타일은 "포스트모더니즘"의 요건을 충족합니까? 대담하고 강렬한가요?
- 각 모듈의 정보를 찾고 이해할 수 있습니까?
- 예상치 못한 상황이 발생하더라도 상호작용 효과는 예상대로 작동합니까?
- 생성된 웹사이트가 기대에 미치지 못하는 경우, 구체적인 문제를 기록하고 `generateWebpage` 함수의 `webpage_id` 매개변수를 사용하여 반복적인 최적화를 진행하십시오.
**품질 기준**:
- 웹사이트에는 필요한 모든 모듈(주인공, 소개, 경력, 학력, 기술, 연락처)이 포함되어 있지만, 형식은 제한되지 않습니다.
- 시각적 디자인은 대담하고 포스트모더니즘에 부합하며, 강렬한 개성과 기억에 남는 매력을 지니고 있습니다.
- 모든 개인 정보는 정확하며 최적화된 콘텐츠와 일치합니다.
- 웹사이트의 핵심 정보는 데스크톱과 모바일 기기 모두에서 읽기 쉽고, 디자인 스타일도 일관적입니다.
- 전반적인 인상은 "대담하고, 전위적이며, 창의성이 넘친다"는 것으로, 이는 수많은 이력서 중에서 그들을 돋보이게 하는 데 도움이 됩니다.
## 스타일 및 프레젠테이션
### 웹사이트 시각적 스타일 (핵심 표준)
**디자인 미학:** 포스트모더니즘. 그 핵심은 "모더니즘에 대한 반항과 해체"입니다. 혼돈, 모순, 아이러니, 그리고 유쾌한 정신을 포용합니다. 디자인은 생동감 넘치고, 절충적이며, 심지어 약간 도발적일 수도 있습니다. 고급 예술과 대중문화를 융합하여 "좋은 디자인"의 전통적인 규칙을 깨뜨립니다.
**색상 구성**:
- **핵심 원칙:** 대담함, 갈등, 높은 채도. 조화를 거부하고 시각적 긴장감을 추구하라.
- **색상 조합**: 형광색, 네온색, 그리고 서로 어울리지 않는 인접한 색상을 사용하세요. 예를 들어, 글리터(#FF00FF) + 밝은 노란색(#FFFF00) + 청록색(#00FFFF)을 조합해 보세요.
- **배경:** 순백색 배경은 피하세요. 노이즈, 격자선, 기하학적 패턴 또는 여러 색상의 블록이 있는 배경을 사용하세요. 강렬한 그라데이션 배경도 시도해 볼 수 있습니다.
- **보조색**: 보조색에는 엄격한 개념이 없습니다. 어떤 색이든 주색이 될 수 있습니다. 의도적으로 "보기 흉한" 색 조합을 사용하여 아이러니한 효과를 만들어낼 수도 있습니다.
**폰트 시스템**:
**핵심 원칙:** 획일성과 단일성을 반대한다. 혼합, 갈등, 그리고 대조가 핵심이다.
- **다양한 글꼴**: 한 페이지에 여러 가지 스타일의 글꼴을 함께 사용하는 것. 예를 들어, 클래식 세리프 글꼴(타임스 뉴 로만 등)과 굵은 산세리프 글꼴(에리얼 블랙 등) 또는 손글씨 글꼴을 나란히 사용하는 것입니다.
- **크기 대비**: 극단적인 경우. 헤드라인은 화면의 절반을 차지할 정도로 크고, 본문 텍스트는 읽기 힘들 정도로 작을 수 있습니다(디자인 의도에 따른 것일 수 있음).
- **텍스트 처리**: 텍스트를 그래픽처럼 취급합니다. 회전, 기울이기, 세로 정렬, 좌우 반전, 겹치기 등의 기능을 제공합니다. 텍스트는 경로를 따라 배열하거나, 개별 글자로 나누어 페이지 전체에 배치할 수 있습니다.
**레이아웃 원칙**:
- **격자 구조를 깨뜨려라:** 기존의 격자 시스템을 완전히 버려라. 요소들을 비대칭적이고 무작위적인 것처럼 보이는 레이아웃으로 배치하라.
- **콜라주 및 겹침**: 레이어와 Z축을 적극적으로 활용하여 이미지, 텍스트, 색상 블록을 겹쳐 콜라주 효과를 연출합니다.
- **파편화**: 하나의 완전한 디자인 요소(예: 이미지 또는 텍스트 블록)를 여러 부분으로 나누어 다양한 위치에 흩어 놓는 것.
- **여백**: 불규칙적이고 역동적인 여백으로, 여백 자체가 단순히 "숨 쉴 공간"이 아니라 형태와 디자인 요소가 되는 공간입니다.
**상호작용 세부 정보**:
- **호버 효과**: 과장되고 파격적입니다. 마우스 커서가 요소 위에 올라가면 요소가 급격하게 변형되거나, 색상이 반전되거나, 오류 효과가 나타나거나, 예상치 못한 GIF가 재생될 수 있습니다.
- **스크롤링**: 강렬한 시차 스크롤링 효과로, 각 레이어가 서로 다른 속도로 움직여 깊이감과 환각적인 효과를 자아냅니다.
- **애니메이션**: 갑작스럽고 비선형적인 애니메이션. 요소들이 예상치 못한 방향에서 날아오거나 "잘못된" 방식으로 로드될 수 있습니다.
- **커서**: 사용자 지정 커서, 대형 커서 또는 끊임없이 변하는 커서를 사용하여 상호작용의 재미를 더할 수 있습니다.
**모듈 설계 사양**:
1. **주인공 섹션** (첫 화면):
- 콜라주 스타일을 사용하여 개인 사진(필터 또는 글리치 효과 처리 가능), 이름의 큰 이니셜, 회전하는 목표 직업 텍스트, 기하학적 도형 등을 함께 조합하세요.
- 배경은 동적 노이즈 또는 빠르게 변화하는 색상 블록일 수 있습니다.
2. **저에 대하여**:
텍스트는 서로 다른 글꼴과 크기를 사용하는 여러 개의 작은 블록으로 나뉘어 페이지 곳곳에 흩어져 있습니다. 일부 텍스트는 배경과 섞여 있어 사용자가 주의 깊게 찾아야 합니다.
3. **경력** (업무 경험):
각각의 경험은 불규칙한 모양에 밝은 색상의 "카드"로 구성되어 있으며, 이 카드들은 서로 겹쳐지고 기울어진 형태로 쌓여 있습니다. 마우스 커서를 카드 위로 가져가면 카드가 맨 위로 "떠올라" 상세 정보를 표시합니다.
4. **교육** (학력):
정보는 페이지의 장식 테두리에 통합되거나 매우 작은 글꼴로 배경 질감의 일부로 사용될 수 있습니다.
5. **기술**
- 다양한 크기, 글꼴, 색상의 스킬 단어들이 역동적이고 혼란스러운 워드 클라우드를 생성합니다. 마우스 커서를 단어 위에 올리면 단어가 커지거나 흔들릴 수 있습니다.
6. **연락처 정보:**
- 크기가 크거나 픽셀화된 아이콘을 사용하고 페이지 가장자리나 모서리에 배치하세요. 링크는 예상치 못한 그래픽 요소 뒤에 숨길 수 있습니다.
**반응형 디자인**:
- **핵심**: 다양한 기기에서 "질서 있는 혼돈"을 유지합니다.
- **데스크톱 버전**(>1200px): 겹치는 열과 여러 열이 있는 복잡한 레이아웃을 완벽하게 표시합니다.
- **플랫 패널**(768-1200px): 비대칭성과 파편화된 느낌을 유지하면서 요소 간 겹침을 줄입니다.
- **모바일**(<768px): 단일 열 레이아웃으로 변환되었지만, 과장된 글꼴 크기 대비, 굵은 색상 블록 및 비선형 스크롤링을 통해 포스트모던 스타일을 유지합니다.
###
### 5단계: 품질 검사 및 납품
**목표:** 제작된 웹사이트에 대한 종합적인 품질 검사를 실시하여 정확한 정보, 세련된 디자인, 원활한 사용자 경험을 보장하고 사용자 가이드를 제공하는 것입니다.
**행동**:
- 품목별 품질 검사를 실시합니다.
- **정보 정확성**: 웹사이트에掲載된 모든 이름, 연락처 정보, 경력, 학력 및 기술은 원본 정보와의 일관성을 보장하기 위해 꼼꼼하게 검증되었습니다.
- **시각적 일관성**: 글꼴, 색상, 간격 및 정렬의 일관성을 확인하고 시각적 결함이 있는지 살펴보세요.
- **상호작용 부드러움:** 내비게이션 전환, 스크롤 효과 및 마우스 오버 애니메이션이 올바르게 작동하는지 테스트합니다.
- **반응형 적응:** 다양한 기기 크기를 시뮬레이션하여 레이아웃이 적절한지 확인합니다.
- **가독성:** 적절한 글자 크기, 충분한 대비, 명확한 정보 계층 구조를 확보하십시오.
- 다음 내용을 포함하는 "웹사이트 사용자 가이드"를 생성하세요:
- 웹사이트 접속 링크 (YouMind에서 생성한 웹페이지 URL)
- 웹사이트 공유 방법 (링크 복사, QR 코드 생성 등)
- 다양한 직무에 맞춰 콘텐츠를 빠르게 조정하는 방법 (예: 목표 직무 변경, 경력 업데이트 등)
- 향후 최적화를 위한 제안 (예: 정기적인 콘텐츠 업데이트, 프로젝트 사례 추가 등)
사용자에게 최종 웹사이트를 보여주고 수정이 필요한 부분이 있는지 물어보세요.
- 사용자가 수정 사항을 제안하면 이를 기록하고 `generateWebpage`를 사용하여 반복적인 최적화를 수행하십시오.
**품질 기준**:
- 모든 정보는 100% 정확하며, 오타나 서식 오류가 없습니다.
- 웹사이트는 최소 두 가지 기기(데스크톱 + 모바일)에서 테스트를 통과했습니다.
- 명확한 사용자 지침을 제공하여 사용자가 웹사이트를 독립적으로 공유하고 관리할 수 있도록 합니다.
- 사용자가 최종 결과에 만족했거나, 피드백을 기반으로 최적화를 완료했습니다.
설명
추천한 사람
nene@YouMind
이 스킬을 추천하는 이유
많은 구직자들 사이에서 두각을 나타내고 싶으신가요? 이 스킬은 '포스트모더니즘' 스타일의 개인 구직 웹사이트를 맞춤 제작해 드립니다. 직무 요구 사항을 심층 분석하고 이력서를 지능적으로 최적화할 뿐만 아니라, 시각적으로 대담하고 창의적인 인터랙티브 웹 페이지를 생성하여 독특한 개성으로 면접관에게 깊은 인상을 남기고 원하는 오퍼를 받을 수 있도록 도와줍니다!
개인 이력 정보를 수집하고, 목표 직무 프로필을 분석하며, 이력서 내용을 지능적으로 최적화하여 심미적으로 우아하고 미니멀하며 전문적인 개인 구직 웹사이트를 생성합니다.
다음으로 즐겨 쓸 스킬을 찾아보세요
연구, 창작, 일상 업무에 유용한 엄선된 AI 스킬을 더 탐색해 보세요.