학습 로드맵 플래너
지시사항
## 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 스타일의 인터랙티브 학습 웹사이트로 결과를 출력합니다.
관련 스킬
전체 보기
연구불씨｜인기 영상 오프닝 해부기
영상을 만들다 보면 이런 상황을 자주 마주합니다. 어떤 참고 영상이 “설명을 정말 잘한다”는 건 분명히 알겠는데, 막상 직접 만들 차례가 되면 감으로 따라 하는 것밖에 할 수 없습니다. 「불씨｜인기 영상 오프닝 해부기」는 바로 이 단계를 위해 만들어졌습니다. 명확한 YouTube 영상 하나를 제공하면, 먼저 영상 대상을 확인하고 검증 가능한 자막을 읽습니다. 그런 다음 서로 쉽게 뒤섞이는 세 가지를 구분합니다. Literal 30s: 영상의 0:00–0:30에 실제로 일어난 일. Intro: 본론에 들어가기 전 전체 오프닝. Hook / Re-hook: 시청자를 계속 머물게 하는 역할을 실제로 맡는 하나 이상의 구조적 포인트. 따라서 “처음 30초가 가장 중요하다”는 말을 이유로 모든 영상의 처음 30초를 억지로 Hook으로 해석하지 않습니다. 실제 Hook이 1분 이후에 있다면 그렇게 알려 주고, 자막이나 타임스탬프가 부족하면 그럴듯해 보이는 답을 지어내는 대신 근거의 공백을 명확히 표시합니다. 오프닝 분석을 마치면 개요를 활용해 영상 전체의 콘텐츠 구조도 복원합니다. 영상은 타임라인, 실험, 단계, 비교, 스토리, 질문의 연쇄 또는 다른 구성 장치를 통해 어떻게 전개되는지 살펴봅니다. 마지막으로 이러한 구조를 [슬롯] 템플릿으로 추상화합니다. 템플릿에 남기는 것은 구조의 순서와 기능이지, 원작자의 경험, 표현, 브랜드, 숫자, 관점 또는 권위 있는 신분이 아닙니다. 최종적으로 얻는 것은 단순한 영상 요약이 아니라, 다음 창작 단계에 바로 넘겨 사용할 수 있는 Hook Outline + 전체 영상 구조 템플릿입니다. 이 Skill이 하지 않는 일 다음 작업은 하지 않습니다. 최종 새 Hook을 대신 작성하지 않습니다. BRENS를 사용해 오프닝을 평가하거나 다시 작성하지 않습니다. 업계 전체나 채널을 대규모로 검색하지 않습니다. 완성된 스크립트를 생성하지 않습니다. 설명 이미지, 소스 자료, 애니메이션 또는 썸네일을 생성하지 않습니다. 참고 샘플을 대규모로 찾는 작업은 상위 단계인 「불씨｜YouTube 콘텐츠 연구원」의 역할이며, 직접 Hook을 다듬는 작업은 이후의 해당 Skill에서 진행합니다.
연구불씨｜YouTube 콘텐츠 연구자
영상을 하나 만들고 싶은데, 다른 사람들은 이미 이 주제를 어떻게 다뤘는지 모르겠나요? 「불씨｜YouTube 콘텐츠 연구자」는 실제로 YouTube에 들어가 관련 영상을 찾고, 자막을 읽고, 제목과 시작 30초를 분석하며, 콘텐츠 구조를 복원합니다. 또한 여러 샘플에서 반복적으로 나타나는 표현 방식, 뚜렷한 차이점, 아직 제대로 다뤄지지 않은 빈틈을 찾아냅니다. 다음과 같은 작업에 활용할 수 있습니다: 하나의 주제에서 어떤 콘텐츠가 반복적으로 활용되고 있는지 조사 한 영상이 실제로 어떻게 설명되고 전개되는지 깊이 분석 한 채널의 주제 선정, 제목, 콘텐츠 제작 습관을 스캔 시작 30초의 Hook과 전체 영상 구조 분석 기존 영상에서 새로운 제작 방향 찾기 내 완성 영상의 포장을 어떻게 다시 구성할지 연구 영상 하나의 조회수가 높다는 이유만으로 “이 제목은 반드시 효과가 있다”고 단정하지 않습니다. 자막, 타임스탬프 또는 성과 데이터를 확보하지 못한 경우에도 어떤 근거가 부족한지 명확히 알려드립니다. 최종적으로 제공하는 것은 단순한 영상 요약 모음이 아니라, 다음 단계의 주제 선정, Hook 또는 스크립트 작업에 바로 전달할 수 있는 YouTube 연구 브리프입니다. 대상: YouTube 크리에이터, 영상 기획자, 콘텐츠 운영자, 그리고 촬영을 시작하기 전에 “다른 사람들은 이 주제를 어디까지 다뤘을까?”를 먼저 확인하고 싶은 사람
엉뚱한 영단어 암기
영어 단어 하나를 입력하면 연속 만화 형식의 기억 카드 한 장을 만듭니다. 발음 연상, 뜻, 예문을 하나의 이어지는 짧은 장면 속에 담아 말풍선·간판·의성어로 표현합니다. 이미지 밖에는 한 줄의 헤더 정보와 한 줄의 회상 힌트만 남깁니다. 정교함보다 강렬한 인상을 우선하며, 아동에게 안전한 표현을 사용합니다.
학습 로드맵 플래너
지시사항
## 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 스타일의 인터랙티브 학습 웹사이트로 결과를 출력합니다.
관련 스킬
전체 보기연구불씨｜인기 영상 오프닝 해부기
영상을 만들다 보면 이런 상황을 자주 마주합니다. 어떤 참고 영상이 “설명을 정말 잘한다”는 건 분명히 알겠는데, 막상 직접 만들 차례가 되면 감으로 따라 하는 것밖에 할 수 없습니다. 「불씨｜인기 영상 오프닝 해부기」는 바로 이 단계를 위해 만들어졌습니다. 명확한 YouTube 영상 하나를 제공하면, 먼저 영상 대상을 확인하고 검증 가능한 자막을 읽습니다. 그런 다음 서로 쉽게 뒤섞이는 세 가지를 구분합니다. Literal 30s: 영상의 0:00–0:30에 실제로 일어난 일. Intro: 본론에 들어가기 전 전체 오프닝. Hook / Re-hook: 시청자를 계속 머물게 하는 역할을 실제로 맡는 하나 이상의 구조적 포인트. 따라서 “처음 30초가 가장 중요하다”는 말을 이유로 모든 영상의 처음 30초를 억지로 Hook으로 해석하지 않습니다. 실제 Hook이 1분 이후에 있다면 그렇게 알려 주고, 자막이나 타임스탬프가 부족하면 그럴듯해 보이는 답을 지어내는 대신 근거의 공백을 명확히 표시합니다. 오프닝 분석을 마치면 개요를 활용해 영상 전체의 콘텐츠 구조도 복원합니다. 영상은 타임라인, 실험, 단계, 비교, 스토리, 질문의 연쇄 또는 다른 구성 장치를 통해 어떻게 전개되는지 살펴봅니다. 마지막으로 이러한 구조를 [슬롯] 템플릿으로 추상화합니다. 템플릿에 남기는 것은 구조의 순서와 기능이지, 원작자의 경험, 표현, 브랜드, 숫자, 관점 또는 권위 있는 신분이 아닙니다. 최종적으로 얻는 것은 단순한 영상 요약이 아니라, 다음 창작 단계에 바로 넘겨 사용할 수 있는 Hook Outline + 전체 영상 구조 템플릿입니다. 이 Skill이 하지 않는 일 다음 작업은 하지 않습니다. 최종 새 Hook을 대신 작성하지 않습니다. BRENS를 사용해 오프닝을 평가하거나 다시 작성하지 않습니다. 업계 전체나 채널을 대규모로 검색하지 않습니다. 완성된 스크립트를 생성하지 않습니다. 설명 이미지, 소스 자료, 애니메이션 또는 썸네일을 생성하지 않습니다. 참고 샘플을 대규모로 찾는 작업은 상위 단계인 「불씨｜YouTube 콘텐츠 연구원」의 역할이며, 직접 Hook을 다듬는 작업은 이후의 해당 Skill에서 진행합니다.
연구불씨｜YouTube 콘텐츠 연구자
영상을 하나 만들고 싶은데, 다른 사람들은 이미 이 주제를 어떻게 다뤘는지 모르겠나요? 「불씨｜YouTube 콘텐츠 연구자」는 실제로 YouTube에 들어가 관련 영상을 찾고, 자막을 읽고, 제목과 시작 30초를 분석하며, 콘텐츠 구조를 복원합니다. 또한 여러 샘플에서 반복적으로 나타나는 표현 방식, 뚜렷한 차이점, 아직 제대로 다뤄지지 않은 빈틈을 찾아냅니다. 다음과 같은 작업에 활용할 수 있습니다: 하나의 주제에서 어떤 콘텐츠가 반복적으로 활용되고 있는지 조사 한 영상이 실제로 어떻게 설명되고 전개되는지 깊이 분석 한 채널의 주제 선정, 제목, 콘텐츠 제작 습관을 스캔 시작 30초의 Hook과 전체 영상 구조 분석 기존 영상에서 새로운 제작 방향 찾기 내 완성 영상의 포장을 어떻게 다시 구성할지 연구 영상 하나의 조회수가 높다는 이유만으로 “이 제목은 반드시 효과가 있다”고 단정하지 않습니다. 자막, 타임스탬프 또는 성과 데이터를 확보하지 못한 경우에도 어떤 근거가 부족한지 명확히 알려드립니다. 최종적으로 제공하는 것은 단순한 영상 요약 모음이 아니라, 다음 단계의 주제 선정, Hook 또는 스크립트 작업에 바로 전달할 수 있는 YouTube 연구 브리프입니다. 대상: YouTube 크리에이터, 영상 기획자, 콘텐츠 운영자, 그리고 촬영을 시작하기 전에 “다른 사람들은 이 주제를 어디까지 다뤘을까?”를 먼저 확인하고 싶은 사람
엉뚱한 영단어 암기
영어 단어 하나를 입력하면 연속 만화 형식의 기억 카드 한 장을 만듭니다. 발음 연상, 뜻, 예문을 하나의 이어지는 짧은 장면 속에 담아 말풍선·간판·의성어로 표현합니다. 이미지 밖에는 한 줄의 헤더 정보와 한 줄의 회상 힌트만 남깁니다. 정교함보다 강렬한 인상을 우선하며, 아동에게 안전한 표현을 사용합니다.
다음으로 즐겨 쓸 스킬을 찾아보세요
연구, 창작, 일상 업무에 유용한 엄선된 AI 스킬을 더 탐색해 보세요.