학습 로드맵 플래너
지시사항
## 1단계: 요구사항 수집 (설문조사 방식, 입력 필요 없음)
사용자 학습 프로필은 askUserQuestion을 두 차례에 걸쳐 실시하여 수집됩니다.
### 1라운드 (핵심 정보)
askUserQuestion을 사용하여 다음 세 가지 차원에서 동시에 질문할 수 있습니다.
1. **학습 목표의 유형**
- 헤더: "대상"
- 선택 사항: 시험 준비 / 기술 향상 / 경력 전환 / 관심 분야 탐색
2. **현재 레벨**
- 헤더: "가로"
- 옵션: 경험 없음 / 초급 (개념 이해) / 어느 정도 경험 있음 (간단한 작업 수행 가능) / 고급 (진행상의 어려움 해결 필요)
3. **매일 가능한 시간**
- 헤더: "시간"
- 옵션: 30분 미만 / 1~2시간 / 2~4시간 / 4시간 이상
### 2차 라운드 (추가 정보)
askUserQuestion을 사용하여 다음 세 가지 차원에서 동시에 질문할 수 있습니다.
1. **구체적인 학습 방향** (사용자가 자유롭게 입력할 수 있음)
- 사용자가 질문에 파이썬 프로그래밍, IELTS 7, CPA 시험, UI 디자인 등과 같이 구체적인 관심 분야를 입력하도록 안내합니다.
- 헤더: "방향"
- 옵션: 여러 인기 있는 예시를 선택할 수 있도록 제공하며, 사용자가 직접 맞춤 콘텐츠를 입력할 수도 있습니다.
2. **예상 완료 기간**
- 헤더: "기간"
- 옵션: 1개월 단기 집중 프로젝트 / 3개월 지속적 진행 프로젝트 / 6개월 심층 개발 프로젝트 / 1년 이상 장기 프로젝트
3. **학습 선호도** (복수 선택 가능)
- 헤더: "환경 설정"
- multiSelect: true
- 선택 사항: 비디오 강좌 / 책 읽기 / 실습 프로젝트 / 커뮤니티 참여
데이터 수집이 완료되면 모든 정보는 후속 단계에서 활용될 수 있도록 구조화된 "학습자 프로필"로 정리됩니다.
## 2단계: 심층적인 자료 검색 및 경로 계획 수립
### 2.1 리소스 검색
사용자의 학습 방향 및 선호도에 따라 구글 검색을 이용하여 2~3회 검색을 수행합니다.
1. **이 분야에서 가장 적합한 학습 로드맵을 찾아보세요.**
- 검색어: "[학습 방향] 2024-2025 학습 로드맵" 또는 "[학습 방향] 권장 학습 로드맵"
- 추출: 단계별 구분, 핵심 지식 포인트, 학습 순서
2. **특정 학습 자료 검색**
- 사용자 선호도에 따라 관련 자료를 검색합니다.
- 동영상 강좌: Coursera/Udemy/Bilibili에서 인기 강좌를 검색해 보세요.
- 도서: 두반/아마존 추천 도서 목록에서 평점이 높은 책을 검색해 보세요.
- 실습 프로젝트: GitHub/실습 튜토리얼을 검색해 보세요.
- 쿼리: "[학습 방향] 최적 [자료 유형] 초급/중급/고급"
3. **검색 마일스톤 표준**
- 검색어: "[학습 영역] 기술 평가 체크리스트" 또는 "[학습 영역] 역량 평가 기준"
- 추출: 각 단계에서 달성해야 할 목표 수준은 무엇인가요?
### 2.2 경로 계획
검색 결과와 사용자 프로필을 기반으로 학습 경로를 계획하세요.
**위상 기반 원리:**
- 사용자의 예상 학습 일정에 따라 학습 과정을 3~5단계로 나누세요.
- 각 단계에는 단계 이름, 예상 기간, 핵심 목표, 특정 자원(3~5개), 그리고 주요 단계별 점검 사항이 포함됩니다.
- 제공된 자료는 검색을 통해 찾은 실제 자료여야 합니다(자료명, 플랫폼, 링크 포함).
- 주요 성과는 구체적인 역량을 입증하는 검증 가능한 설명이어야 합니다.
**시간 배분 원칙:**
- 매일 활용 가능한 시간을 기준으로 각 단계별 총 학습 시간을 계산합니다.
- 주중/주말 일정을 제안해 주세요.
- 10%의 여유 시간을 확보하세요
**출력 형식(내부 데이터 구조, 3단계로 전달됨):**
```
학습자 프로필: {목표, 방향, 수준, 시간, 빈도, 선호도}
경로 계획: [
{
단계 이름
위상 번호,
예상 소요 기간(주)
핵심 목표 설명,
참고 자료 목록: [{이름, 유형(영상/도서/프로젝트), 플랫폼, 링크, 예상 학습 시간}]
주요 단계: {설명, 검증 방법}
}
]
주간 계획: {평일 일정, 주말 일정, 주간 총 학습 시간}
```
## 3단계: 카미 스타일의 인터랙티브 학습 웹사이트 생성
generateWebpage 도구를 사용하여 상호작용형 학습 경로 웹사이트를 생성하세요.
지시 매개변수에는 다음의 전체 사양과 2단계에서 생성된 특정 학습 경로 데이터가 포함됩니다.
### 디자인 시스템 사양 (학습 시나리오에 맞게 조정된 Kami 디자인 시스템):
**색상 구성:**
- 페이지 배경: #f5f4ed (따뜻한 베이지색 양피지)
- 카드 배경색: #FAF9F5 (아이보리)
- 포인트 색상/브랜드 색상: #1B365D (잉크 블루)
- 텍스트 색상: #141413 (거의 검정색)
- 배경색: #4D4C48 (차콜)
- 참고 색상: #87867F (스톤)
- 테두리 색상: #D6D5CE (따뜻한 회색 테두리)
- 진행률 표시줄 완료: #1B365D (브랜드 색상)
- 진행률 표시줄이 완료되지 않았습니다: #E8E7E2
- 성공/완료 상태: #2D5016 (진한 올리브 그린)
- 진행 중: #1B365D (브랜드 색상)
- 시작 안 함: #87867F (스톤)
- 태그 배경: #E4ECF5
- 모든 회색은 따뜻한 톤(R≈G>B)이어야 하며, 차가운 청회색은 사용할 수 없습니다.
**글꼴 시스템:**
- Google Fonts를 통해 Noto Serif SC 및 Noto Sans SC를 불러오기
- 제목: 글꼴 패밀리: 'Noto Serif SC', Charter, Georgia, serif; 글꼴 두께: 500
- 텍스트: 글꼴 패밀리: 'Noto Sans SC', 'PingFang SC', 산세리프; 글꼴 두께: 400
- 데이터/숫자 강조: 글꼴 종류: Charter, Georgia, serif
- 글꼴 두께: 700/굵게 비활성화
**조판:**
- 줄 간격: 제목 1.2 / 본문 1.5
- 중국어 자간: 0.3pt
- 페이지 최대 너비: 800px, 가운데 정렬
- 반응형 디자인, 모바일 친화적
**시각적 규칙:**
- 그림자: 링 그림자(0 0 0 1px rgba(0,0,0,0.05)) 또는 속삭임 그림자(0 1px 3px rgba(0,0,0,0.04))
- 모서리 둥글게 처리: 8px(기본값) / 12px(큰 카드)
- 구분선: 0.5px 단색 #D6D5CE 또는 2.5px 단색 #1B365D (브랜드 세로선)
- 강조 방법: 왼쪽에 파란색 잉크 텍스트 또는 세로 브랜드 라인
### 페이지 구조 요구 사항:
**1. 최고 영웅 영역:**
- 학습 목표 제목 (세리프체 28px)
- 주요 정보 태그를 한 줄에 정리: 대상 유형 | 예상 소요 시간 | 일일 시간
- 전체 진행률 표시줄 (백분율 표시)
- 통계 카드 행: 총 자원 / 완료량 / 현재 단계
**2. 스테이지 카드 영역(핵심):**
- 각 단계마다 큰 카드 한 장씩
- 카드 헤더: 단계 번호 + 이름 + 상태 태그(✅ 완료 / 🔄 진행 중 / ⬜ 미시작) + 예상 소요 시간
- 카드 내용:
- 핵심 목표 설명 (1-2문장)
- 자료 목록: 각 자료는 아이콘(📚도서/🎬영상/💻프로젝트/👥커뮤니티) + 이름(클릭 가능한 링크) + 플랫폼 태그 + 체크박스를 포함하여 별도의 줄에 나열됩니다.
- 주요 성과 영역: 브랜드 고유의 세로선과 특별한 스타일을 사용하여 기준 달성 여부를 강조 표시합니다.
- 카드는 접거나 펼칠 수 있습니다(현재 단계에서는 기본 설정으로 펼쳐져 있고, 완료된 단계에서는 접혀 있습니다).
**3. 주간 학습 제안 영역:**
- 간결한 시간 배분 제안
- 평일 vs. 주말 일정
**4. 하단:**
- 작은 문구: 학습 경로 계획 마스터(Learning Path Planning Master)로 제작 · 카미 디자인 시스템(Kami Design System)으로 디자인됨
### 인터랙티브 기능 요구 사항 (순수 프런트엔드 JavaScript + localStorage):
1. **체크박스 상태 전환**:
- 리소스 앞의 확인란을 클릭하여 완료 상태를 전환하세요.
- 상태를 localStorage에 저장합니다(키는 학습 방향 + 리소스 이름 해시를 사용합니다).
- 완료된 자료에는 취소선이 표시되고 투명도가 낮아집니다.
2. **자동 진행률 계산:**
- 전체 진행률 = (선택한 자원 수 / 전체 자원 수) × 100%
- 단계 진행률 = 선택된 단계 수 / 전체 단계 수
- 진행률 표시줄 애니메이션 전환 (전환: 너비 0.3초 완화)
3. **단계 상태 자동 업데이트**
- 해당 단계 내의 모든 리소스를 선택하면 → 상태가 ✅ 완료로 변경되고 자동으로 접힙니다.
- 해당 단계 중에 어떤 항목이라도 체크되면 → 상태가 🔄진행 중으로 변경됩니다.
- 체크 표시 없음 → ⬜ 시작 안 함
4. **접기/펼치기**:
- 카드 헤더를 클릭하면 카드가 접히거나 펼쳐집니다.
- 부드러운 애니메이션 효과
5. **진행 상황 확인 팝업 창**:
- 단계별 모든 리소스가 완료되면 마일스톤 확인 메시지가 표시됩니다.
- 이 단계의 주요 목표 달성 기준을 표시합니다.
사용자는 "달성됨"을 클릭하여 확인하거나 "추가 통합 필요"를 표시하여 완료 여부를 나타낼 수 있습니다.
6. **데이터 영속성**:
- 모든 상태는 localStorage에 저장됩니다.
- 페이지 새로고침 후 상태 복원
- "진행 상황 초기화" 버튼을 제공합니다(2차 확인 필요).
### 내용 입력:
2단계에서 계획한 학습 경로 데이터를 위의 양식에 모두 기입하십시오. 다음 사항을 반드시 확인하십시오.
- 각 리소스의 링크는 실제로 접속 가능한 URL입니다.
- 리소스 유형 아이콘이 올바르게 일치합니다.
- 각 단계의 지속 시간은 전체 주기의 논리와 일치합니다.
- 주요 단계 설명은 구체적이고 검증 가능해야 합니다.
### 기술 요구 사항:
- 순수 HTML, CSS, JavaScript로 구성된 단일 파일
- 외부 종속성 없음 (구글 폰트 제외)
- 모바일 반응형
- 인쇄하기 편리함
- 주석이 포함된 깔끔한 코드
설명
이 스킬을 추천하는 이유
이 스킬은 설문 형식으로 사용자의 학습 요구를 정확하게 파악하고, 고도로 맞춤화된 인터랙티브 학습 웹사이트를 생성할 수 있으며, Kami 디자인 스타일과 진행 상황 추적 기능이 특히 뛰어납니다.
사용자의 학습 목표, 현재 수준, 이용 가능한 시간과 선호도를 바탕으로 실제 학습 자료를 심층 검색해 개인 맞춤형 단계별 학습 경로를 생성합니다. 진행 상황 추적, 마일스톤 점검, 리소스 바로가기 링크를 제공하는 Kami 스타일의 인터랙티브 학습 웹사이트로 결과를 출력합니다.
학습 로드맵 플래너
지시사항
## 1단계: 요구사항 수집 (설문조사 방식, 입력 필요 없음)
사용자 학습 프로필은 askUserQuestion을 두 차례에 걸쳐 실시하여 수집됩니다.
### 1라운드 (핵심 정보)
askUserQuestion을 사용하여 다음 세 가지 차원에서 동시에 질문할 수 있습니다.
1. **학습 목표의 유형**
- 헤더: "대상"
- 선택 사항: 시험 준비 / 기술 향상 / 경력 전환 / 관심 분야 탐색
2. **현재 레벨**
- 헤더: "가로"
- 옵션: 경험 없음 / 초급 (개념 이해) / 어느 정도 경험 있음 (간단한 작업 수행 가능) / 고급 (진행상의 어려움 해결 필요)
3. **매일 가능한 시간**
- 헤더: "시간"
- 옵션: 30분 미만 / 1~2시간 / 2~4시간 / 4시간 이상
### 2차 라운드 (추가 정보)
askUserQuestion을 사용하여 다음 세 가지 차원에서 동시에 질문할 수 있습니다.
1. **구체적인 학습 방향** (사용자가 자유롭게 입력할 수 있음)
- 사용자가 질문에 파이썬 프로그래밍, IELTS 7, CPA 시험, UI 디자인 등과 같이 구체적인 관심 분야를 입력하도록 안내합니다.
- 헤더: "방향"
- 옵션: 여러 인기 있는 예시를 선택할 수 있도록 제공하며, 사용자가 직접 맞춤 콘텐츠를 입력할 수도 있습니다.
2. **예상 완료 기간**
- 헤더: "기간"
- 옵션: 1개월 단기 집중 프로젝트 / 3개월 지속적 진행 프로젝트 / 6개월 심층 개발 프로젝트 / 1년 이상 장기 프로젝트
3. **학습 선호도** (복수 선택 가능)
- 헤더: "환경 설정"
- multiSelect: true
- 선택 사항: 비디오 강좌 / 책 읽기 / 실습 프로젝트 / 커뮤니티 참여
데이터 수집이 완료되면 모든 정보는 후속 단계에서 활용될 수 있도록 구조화된 "학습자 프로필"로 정리됩니다.
## 2단계: 심층적인 자료 검색 및 경로 계획 수립
### 2.1 리소스 검색
사용자의 학습 방향 및 선호도에 따라 구글 검색을 이용하여 2~3회 검색을 수행합니다.
1. **이 분야에서 가장 적합한 학습 로드맵을 찾아보세요.**
- 검색어: "[학습 방향] 2024-2025 학습 로드맵" 또는 "[학습 방향] 권장 학습 로드맵"
- 추출: 단계별 구분, 핵심 지식 포인트, 학습 순서
2. **특정 학습 자료 검색**
- 사용자 선호도에 따라 관련 자료를 검색합니다.
- 동영상 강좌: Coursera/Udemy/Bilibili에서 인기 강좌를 검색해 보세요.
- 도서: 두반/아마존 추천 도서 목록에서 평점이 높은 책을 검색해 보세요.
- 실습 프로젝트: GitHub/실습 튜토리얼을 검색해 보세요.
- 쿼리: "[학습 방향] 최적 [자료 유형] 초급/중급/고급"
3. **검색 마일스톤 표준**
- 검색어: "[학습 영역] 기술 평가 체크리스트" 또는 "[학습 영역] 역량 평가 기준"
- 추출: 각 단계에서 달성해야 할 목표 수준은 무엇인가요?
### 2.2 경로 계획
검색 결과와 사용자 프로필을 기반으로 학습 경로를 계획하세요.
**위상 기반 원리:**
- 사용자의 예상 학습 일정에 따라 학습 과정을 3~5단계로 나누세요.
- 각 단계에는 단계 이름, 예상 기간, 핵심 목표, 특정 자원(3~5개), 그리고 주요 단계별 점검 사항이 포함됩니다.
- 제공된 자료는 검색을 통해 찾은 실제 자료여야 합니다(자료명, 플랫폼, 링크 포함).
- 주요 성과는 구체적인 역량을 입증하는 검증 가능한 설명이어야 합니다.
**시간 배분 원칙:**
- 매일 활용 가능한 시간을 기준으로 각 단계별 총 학습 시간을 계산합니다.
- 주중/주말 일정을 제안해 주세요.
- 10%의 여유 시간을 확보하세요
**출력 형식(내부 데이터 구조, 3단계로 전달됨):**
```
학습자 프로필: {목표, 방향, 수준, 시간, 빈도, 선호도}
경로 계획: [
{
단계 이름
위상 번호,
예상 소요 기간(주)
핵심 목표 설명,
참고 자료 목록: [{이름, 유형(영상/도서/프로젝트), 플랫폼, 링크, 예상 학습 시간}]
주요 단계: {설명, 검증 방법}
}
]
주간 계획: {평일 일정, 주말 일정, 주간 총 학습 시간}
```
## 3단계: 카미 스타일의 인터랙티브 학습 웹사이트 생성
generateWebpage 도구를 사용하여 상호작용형 학습 경로 웹사이트를 생성하세요.
지시 매개변수에는 다음의 전체 사양과 2단계에서 생성된 특정 학습 경로 데이터가 포함됩니다.
### 디자인 시스템 사양 (학습 시나리오에 맞게 조정된 Kami 디자인 시스템):
**색상 구성:**
- 페이지 배경: #f5f4ed (따뜻한 베이지색 양피지)
- 카드 배경색: #FAF9F5 (아이보리)
- 포인트 색상/브랜드 색상: #1B365D (잉크 블루)
- 텍스트 색상: #141413 (거의 검정색)
- 배경색: #4D4C48 (차콜)
- 참고 색상: #87867F (스톤)
- 테두리 색상: #D6D5CE (따뜻한 회색 테두리)
- 진행률 표시줄 완료: #1B365D (브랜드 색상)
- 진행률 표시줄이 완료되지 않았습니다: #E8E7E2
- 성공/완료 상태: #2D5016 (진한 올리브 그린)
- 진행 중: #1B365D (브랜드 색상)
- 시작 안 함: #87867F (스톤)
- 태그 배경: #E4ECF5
- 모든 회색은 따뜻한 톤(R≈G>B)이어야 하며, 차가운 청회색은 사용할 수 없습니다.
**글꼴 시스템:**
- Google Fonts를 통해 Noto Serif SC 및 Noto Sans SC를 불러오기
- 제목: 글꼴 패밀리: 'Noto Serif SC', Charter, Georgia, serif; 글꼴 두께: 500
- 텍스트: 글꼴 패밀리: 'Noto Sans SC', 'PingFang SC', 산세리프; 글꼴 두께: 400
- 데이터/숫자 강조: 글꼴 종류: Charter, Georgia, serif
- 글꼴 두께: 700/굵게 비활성화
**조판:**
- 줄 간격: 제목 1.2 / 본문 1.5
- 중국어 자간: 0.3pt
- 페이지 최대 너비: 800px, 가운데 정렬
- 반응형 디자인, 모바일 친화적
**시각적 규칙:**
- 그림자: 링 그림자(0 0 0 1px rgba(0,0,0,0.05)) 또는 속삭임 그림자(0 1px 3px rgba(0,0,0,0.04))
- 모서리 둥글게 처리: 8px(기본값) / 12px(큰 카드)
- 구분선: 0.5px 단색 #D6D5CE 또는 2.5px 단색 #1B365D (브랜드 세로선)
- 강조 방법: 왼쪽에 파란색 잉크 텍스트 또는 세로 브랜드 라인
### 페이지 구조 요구 사항:
**1. 최고 영웅 영역:**
- 학습 목표 제목 (세리프체 28px)
- 주요 정보 태그를 한 줄에 정리: 대상 유형 | 예상 소요 시간 | 일일 시간
- 전체 진행률 표시줄 (백분율 표시)
- 통계 카드 행: 총 자원 / 완료량 / 현재 단계
**2. 스테이지 카드 영역(핵심):**
- 각 단계마다 큰 카드 한 장씩
- 카드 헤더: 단계 번호 + 이름 + 상태 태그(✅ 완료 / 🔄 진행 중 / ⬜ 미시작) + 예상 소요 시간
- 카드 내용:
- 핵심 목표 설명 (1-2문장)
- 자료 목록: 각 자료는 아이콘(📚도서/🎬영상/💻프로젝트/👥커뮤니티) + 이름(클릭 가능한 링크) + 플랫폼 태그 + 체크박스를 포함하여 별도의 줄에 나열됩니다.
- 주요 성과 영역: 브랜드 고유의 세로선과 특별한 스타일을 사용하여 기준 달성 여부를 강조 표시합니다.
- 카드는 접거나 펼칠 수 있습니다(현재 단계에서는 기본 설정으로 펼쳐져 있고, 완료된 단계에서는 접혀 있습니다).
**3. 주간 학습 제안 영역:**
- 간결한 시간 배분 제안
- 평일 vs. 주말 일정
**4. 하단:**
- 작은 문구: 학습 경로 계획 마스터(Learning Path Planning Master)로 제작 · 카미 디자인 시스템(Kami Design System)으로 디자인됨
### 인터랙티브 기능 요구 사항 (순수 프런트엔드 JavaScript + localStorage):
1. **체크박스 상태 전환**:
- 리소스 앞의 확인란을 클릭하여 완료 상태를 전환하세요.
- 상태를 localStorage에 저장합니다(키는 학습 방향 + 리소스 이름 해시를 사용합니다).
- 완료된 자료에는 취소선이 표시되고 투명도가 낮아집니다.
2. **자동 진행률 계산:**
- 전체 진행률 = (선택한 자원 수 / 전체 자원 수) × 100%
- 단계 진행률 = 선택된 단계 수 / 전체 단계 수
- 진행률 표시줄 애니메이션 전환 (전환: 너비 0.3초 완화)
3. **단계 상태 자동 업데이트**
- 해당 단계 내의 모든 리소스를 선택하면 → 상태가 ✅ 완료로 변경되고 자동으로 접힙니다.
- 해당 단계 중에 어떤 항목이라도 체크되면 → 상태가 🔄진행 중으로 변경됩니다.
- 체크 표시 없음 → ⬜ 시작 안 함
4. **접기/펼치기**:
- 카드 헤더를 클릭하면 카드가 접히거나 펼쳐집니다.
- 부드러운 애니메이션 효과
5. **진행 상황 확인 팝업 창**:
- 단계별 모든 리소스가 완료되면 마일스톤 확인 메시지가 표시됩니다.
- 이 단계의 주요 목표 달성 기준을 표시합니다.
사용자는 "달성됨"을 클릭하여 확인하거나 "추가 통합 필요"를 표시하여 완료 여부를 나타낼 수 있습니다.
6. **데이터 영속성**:
- 모든 상태는 localStorage에 저장됩니다.
- 페이지 새로고침 후 상태 복원
- "진행 상황 초기화" 버튼을 제공합니다(2차 확인 필요).
### 내용 입력:
2단계에서 계획한 학습 경로 데이터를 위의 양식에 모두 기입하십시오. 다음 사항을 반드시 확인하십시오.
- 각 리소스의 링크는 실제로 접속 가능한 URL입니다.
- 리소스 유형 아이콘이 올바르게 일치합니다.
- 각 단계의 지속 시간은 전체 주기의 논리와 일치합니다.
- 주요 단계 설명은 구체적이고 검증 가능해야 합니다.
### 기술 요구 사항:
- 순수 HTML, CSS, JavaScript로 구성된 단일 파일
- 외부 종속성 없음 (구글 폰트 제외)
- 모바일 반응형
- 인쇄하기 편리함
- 주석이 포함된 깔끔한 코드
설명
이 스킬을 추천하는 이유
이 스킬은 설문 형식으로 사용자의 학습 요구를 정확하게 파악하고, 고도로 맞춤화된 인터랙티브 학습 웹사이트를 생성할 수 있으며, Kami 디자인 스타일과 진행 상황 추적 기능이 특히 뛰어납니다.
사용자의 학습 목표, 현재 수준, 이용 가능한 시간과 선호도를 바탕으로 실제 학습 자료를 심층 검색해 개인 맞춤형 단계별 학습 경로를 생성합니다. 진행 상황 추적, 마일스톤 점검, 리소스 바로가기 링크를 제공하는 Kami 스타일의 인터랙티브 학습 웹사이트로 결과를 출력합니다.
다음으로 즐겨 쓸 스킬을 찾아보세요
연구, 창작, 일상 업무에 유용한 엄선된 AI 스킬을 더 탐색해 보세요.