학습 로드맵 플래너
지시사항
## 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 스타일의 인터랙티브 학습 웹사이트로 결과를 출력합니다.
관련 스킬
전체 보기학습 계획 Skill
‘배우고 싶다’는 생각을 오늘 바로 시작할 수 있고, 매일 무엇을 해야 하는지 알 수 있는 체계적인 학습 계획으로 바꿔보세요. 학습 목표, 현재 수준, 계획 기간, 투자할 수 있는 시간과 학습 선호도를 알려주면 실제 상황에 맞춰 학습 핵심을 정리하고, 강점과 취약점을 파악하며, 큰 목표를 검증 가능한 단계별 마일스톤으로 나눠 명확한 진척 기준을 제시합니다. 언어, 프로그래밍, 악기, 시험, 운동을 비롯한 다양한 기술 학습 상황을 지원합니다. 우선순위에 따라 정리한 지식 체계, 단계별 로드맵, 평일과 주말의 학습 리듬에 맞춘 일일 실행 템플릿을 제공합니다. 각 과제는 구체적인 학습 내용, 연습 방법, 투자 시간과 달성 기준으로 세분화하며, 입력과 출력을 함께 연습하도록 구성해 ‘보고 들은 것’을 실제로 활용할 수 있는 능력으로 바꿔줍니다. 또한 학습 선호도에 따라 동영상, 오디오, 도서와 도구 등의 자료를 분류하고, 인터넷을 통해 이용 가능한 링크를 확인합니다. 미루는 습관, 작심삼일, 완벽주의, 피드백 부족 또는 갑작스러운 중단과 같은 문제에는 포기하지 않도록 돕는 대응 장치를 제공합니다. 최종 결과물에는 첫날 행동 목록, 마일스톤 점검표와 전체 실행 문서가 포함됩니다. 계획을 확정한 후에는 오프라인에서 열 수 있는 HTML 학습 체크인 도구를 추가로 생성해 일일 과제, 단계별 진척도, 마일스톤과 학습 자료를 기록할 수도 있습니다.
AI 시대의 맞춤형 학습 가이드
급변하는 AI 시대, 효과적으로 AI를 학습하는 방법에 대해 막막함을 느끼고 계신가요? "AI 시대의 맞춤형 학습 가이드"는 여러분께 명확하고 실행 가능한 AI 학습 로드맵을 맞춤 제작해 드립니다. 이는 여러분의 학습 요구, 기술 배경, 그리고 잠재적인 불안감까지 깊이 이해하여, 마치 따뜻한 기술 멘토처럼 정확하게 안내합니다. 본 스킬은 여러분과의 지능적인 대화를 통해 체계적인 학습을 원하는 "목표형"인지, 방향 안내가 필요한 "방황형" 학습자인지를 파악할 뿐만 아니라, 구체적인 상황에 맞춰 부드럽게 학습 방향과 목표를 설정하도록 도와줍니다. 그 후, 실시간 웹 검색과 엄격한 리소스 검증 메커니즘을 활용하여 방대한 정보 속에서 최신의 권위 있는 학습 자료(공식 문서, 고품질 튜토리얼, 활발한 오픈소스 프로젝트 등)를 선별하여, 최첨단이면서도 신뢰할 수 있는 지식을 제공합니다. 최종적으로, 구조가 명확하고 실행 가능한 개인 맞춤형 학습 계획을 받게 됩니다. 이 계획은 학습 목표를 여러 구체적인 단계로 나누고, 각 단계마다 명확한 학습 목표, 엄선된 추천 리소스, 검증 가능한 완료 기준 및 예상 소요 시간을 포함합니다. 더욱 세심하게도, 계획에는 "마이크로 액션 스타터"가 포함되어 "실패할 수 없을 만큼 작은" 학습 과제를 즉시 시작하도록 안내하고, 학습 과정에서의 심리적 장애를 극복할 수 있도록 개인 맞춤형 마인드셋 구축 조언도 제공합니다. 또한 이 맞춤형 학습 계획을 웹 페이지로 내보내어 언제 어디서나 확인하고 공유할 수 있어, AI 학습 여정에 자신감과 동력을 불어넣어 드립니다.
연구개인 AI 학습 및 수익화 경로 계획
다양한 수준의 사용자를 위해 AI 학습부터 AI를 통한 부 창출까지의 로드맵을 맞춤 설계합니다. 완전 초보부터 전문 개발자까지 모두를 포괄합니다. 계층별 학습 계획(초보/중급/전문), 실전 프로젝트, 수익화 전략을 제공하고, 공유 가능한 시각적 웹페이지를 생성합니다. AI 도구 사용법 학습, AI 업계로의 전환, 현재 업무 효율성 향상, AI 제품 개발, 자유로운 부업 또는 직업 실현 등 어떤 목표든 적합한 학습 경로를 찾을 수 있습니다.
학습 로드맵 플래너
지시사항
## 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 스타일의 인터랙티브 학습 웹사이트로 결과를 출력합니다.
관련 스킬
전체 보기학습 계획 Skill
‘배우고 싶다’는 생각을 오늘 바로 시작할 수 있고, 매일 무엇을 해야 하는지 알 수 있는 체계적인 학습 계획으로 바꿔보세요. 학습 목표, 현재 수준, 계획 기간, 투자할 수 있는 시간과 학습 선호도를 알려주면 실제 상황에 맞춰 학습 핵심을 정리하고, 강점과 취약점을 파악하며, 큰 목표를 검증 가능한 단계별 마일스톤으로 나눠 명확한 진척 기준을 제시합니다. 언어, 프로그래밍, 악기, 시험, 운동을 비롯한 다양한 기술 학습 상황을 지원합니다. 우선순위에 따라 정리한 지식 체계, 단계별 로드맵, 평일과 주말의 학습 리듬에 맞춘 일일 실행 템플릿을 제공합니다. 각 과제는 구체적인 학습 내용, 연습 방법, 투자 시간과 달성 기준으로 세분화하며, 입력과 출력을 함께 연습하도록 구성해 ‘보고 들은 것’을 실제로 활용할 수 있는 능력으로 바꿔줍니다. 또한 학습 선호도에 따라 동영상, 오디오, 도서와 도구 등의 자료를 분류하고, 인터넷을 통해 이용 가능한 링크를 확인합니다. 미루는 습관, 작심삼일, 완벽주의, 피드백 부족 또는 갑작스러운 중단과 같은 문제에는 포기하지 않도록 돕는 대응 장치를 제공합니다. 최종 결과물에는 첫날 행동 목록, 마일스톤 점검표와 전체 실행 문서가 포함됩니다. 계획을 확정한 후에는 오프라인에서 열 수 있는 HTML 학습 체크인 도구를 추가로 생성해 일일 과제, 단계별 진척도, 마일스톤과 학습 자료를 기록할 수도 있습니다.
AI 시대의 맞춤형 학습 가이드
급변하는 AI 시대, 효과적으로 AI를 학습하는 방법에 대해 막막함을 느끼고 계신가요? "AI 시대의 맞춤형 학습 가이드"는 여러분께 명확하고 실행 가능한 AI 학습 로드맵을 맞춤 제작해 드립니다. 이는 여러분의 학습 요구, 기술 배경, 그리고 잠재적인 불안감까지 깊이 이해하여, 마치 따뜻한 기술 멘토처럼 정확하게 안내합니다. 본 스킬은 여러분과의 지능적인 대화를 통해 체계적인 학습을 원하는 "목표형"인지, 방향 안내가 필요한 "방황형" 학습자인지를 파악할 뿐만 아니라, 구체적인 상황에 맞춰 부드럽게 학습 방향과 목표를 설정하도록 도와줍니다. 그 후, 실시간 웹 검색과 엄격한 리소스 검증 메커니즘을 활용하여 방대한 정보 속에서 최신의 권위 있는 학습 자료(공식 문서, 고품질 튜토리얼, 활발한 오픈소스 프로젝트 등)를 선별하여, 최첨단이면서도 신뢰할 수 있는 지식을 제공합니다. 최종적으로, 구조가 명확하고 실행 가능한 개인 맞춤형 학습 계획을 받게 됩니다. 이 계획은 학습 목표를 여러 구체적인 단계로 나누고, 각 단계마다 명확한 학습 목표, 엄선된 추천 리소스, 검증 가능한 완료 기준 및 예상 소요 시간을 포함합니다. 더욱 세심하게도, 계획에는 "마이크로 액션 스타터"가 포함되어 "실패할 수 없을 만큼 작은" 학습 과제를 즉시 시작하도록 안내하고, 학습 과정에서의 심리적 장애를 극복할 수 있도록 개인 맞춤형 마인드셋 구축 조언도 제공합니다. 또한 이 맞춤형 학습 계획을 웹 페이지로 내보내어 언제 어디서나 확인하고 공유할 수 있어, AI 학습 여정에 자신감과 동력을 불어넣어 드립니다.
연구개인 AI 학습 및 수익화 경로 계획
다양한 수준의 사용자를 위해 AI 학습부터 AI를 통한 부 창출까지의 로드맵을 맞춤 설계합니다. 완전 초보부터 전문 개발자까지 모두를 포괄합니다. 계층별 학습 계획(초보/중급/전문), 실전 프로젝트, 수익화 전략을 제공하고, 공유 가능한 시각적 웹페이지를 생성합니다. AI 도구 사용법 학습, AI 업계로의 전환, 현재 업무 효율성 향상, AI 제품 개발, 자유로운 부업 또는 직업 실현 등 어떤 목표든 적합한 학습 경로를 찾을 수 있습니다.
다음으로 즐겨 쓸 스킬을 찾아보세요
연구, 창작, 일상 업무에 유용한 엄선된 AI 스킬을 더 탐색해 보세요.