연플래닝 X 클로드 작업물

스무고개 통합 관리 허브

클로드에서 작업했던 스무고개 상담 도구와 관리 문서를 통합하여 편리하게 하나씩 실행하고 활용할 수 있는 포털 대시보드입니다.

💡 스무고개 도구 활용 및 실행 안내

1. 로컬에서 바로 실행

아래 목록에서 원하는 카드의 '바로 실행하기' 버튼을 클릭하면 브라우저에 해당 도구가 즉시 열립니다.

2. 로컬 웹 서버 실행 권장

일부 기능(AI 자동 분석 연동 등)은 보안상 로컬 웹 서버 환경이 필요할 수 있습니다. VS Code Live Server 플러그인을 이용하거나 cmd창에서 python -m http.server 8000을 구동 후 localhost:8000으로 접속해 사용하면 더욱 안전합니다.

3. AI API 연동 가이드

AI 자동 분석이 포함된 스무고개 파일은 소스코드의 const API_KEY = '...' 부분에 발급받으신 Anthropic/OpenAI API 키를 입력하여 사용하실 수 있습니다.

학생용 스무고개

에너지 배터리

에너지배터리.html

나의 일상 리듬과 관계 속에서 에너지가 충전되고 방전되는 구체적인 상황을 찾고, 나만의 회복 솔루션 및 미션을 제시해주는 시각화형 스무고개 진단 도구입니다.

학생용 스무고개
🔍

진짜 나를 찾는 스무고개

진짜나를찾는스무고개.html

에릭 에릭슨의 정체성 이론, 존 홀랜드의 흥미 유형, 긍정심리학 등을 반영하여 학생이 20가지 질문과 주관식 직접 답변을 통해 상세 진로 유형을 도출하는 핵심 진단 도구입니다. (AI 분석 탑재)

학생용 스무고개
🧭

진로탐색 스무고개

진로탐색_스무고개.html

기초 질문 10문항(관심사/경험/강점)과 심층 Yes/No 스무고개 20문항으로 구성되어, 8가지 대표 진로 유형(과학연구, 기술공학, 예술창작 등) 중 적합한 상위 직군을 레이더 차트와 함께 추천합니다.

학생용 스무고개
🧸

꿈모험 스무고개 (초등저학년)

꿈모험_스무고개_초등저학년.html

초등학교 저학년 학생들이 친근하게 느낄 수 있는 이모지와 쉬운 단어로 맞춤화된 놀이식 스무고개입니다. 일상 관찰을 통해 흥미와 꿈의 조각을 찾도록 설계되었습니다.

학부모용 스무고개
📚

학습스타일 찾기 (부모용)

학습스타일찾기.html

부모의 관점에서 자녀의 평소 학습 습관, 행동 패턴, 리액션을 관찰하여 질문에 답하면, 자녀에게 최적화된 학습 인지 스타일(시각, 청각, 운동감각 등)과 부모 양육 가이드를 분석해 줍니다.

상담/진단 도구
🎨

통합 스무고개 상담카드

스무고개_상담카드.html

중등용/고등용 질문지가 나뉘어 내장된 고도화된 전문 상담카드입니다. 학생의 인적사항 기재부터 시작해 9가지 다차원 역량(창의, 논리, 사회 등) 점수 통계와 간략/상세 보고서를 즉석에서 확인하고 인쇄할 수 있습니다.

상담/진단 도구
📱

스무고개 적응형 웹카드

스무고개_적응형_웹카드.html

모바일 또는 태블릿 기기에서 현장 상담 시 학생과 교사가 함께 화면을 넘기며 카드를 고르듯 직관적으로 진행할 수 있게 최적화된 반응형 적응 진단 도구입니다.

상담/진단 도구
📝

신입 첫 상담 기록지

신입_첫상담_기록지.html

신입 학생과의 첫 만남에서 초기 래포 형성과 정보 획득을 위해 필수적인 기본 성향, 진로 방향, 주치의적 관점을 기록할 수 있는 전자 양식 형태의 첫상담 기록 시트입니다.

수업/관리 도구
📊

스무고개 선생님 관리

스무고개_선생님관리.html

학급 또는 상담 센터의 선생님들이 학생들의 스무고개 완료 여부, 유형 분석 결과(스파크, 딥차지 등)를 한눈에 모니터링하고 상담 메모를 누적 관리할 수 있도록 설계된 관리 대시보드 화면입니다.

수업/관리 도구
👨‍🏫

수업교안 스무고개 1회차

수업교안_스무고개_1회차.html

스무고개 상담카드를 실제 오프라인 교실 수업이나 진로 동아리 시간에서 어떻게 도입하고(도입-전개-정리), 각 활동 단계를 어떻게 지도해야 하는지 적혀 있는 디지털 지도안 및 교안 페이지입니다.

수업/관리 도구
🔔

선생님 알림장 완성

선생님_알림장_완성.html

스무고개 수업 및 상담 종료 후, 해당 내용을 요약하고 가정과의 원활한 교육 연계를 도모하기 위해 학부모님께 발송할 안내장 및 알림장 템플릿 작성 도구입니다.

수업/관리 도구
🤝

삼산 파트너십 제안서

삼산_파트너십_제안서.html

연플래닝과 삼산 학원/기관과의 교육 파트너십 제안용 프레젠테이션 및 혜택 안내 페이지로, 대외 비즈니스 제안 및 소개 시 사용하는 웹 리소스입니다.

유틸리티/인쇄용
🔳

스무고개 QR코드

스무고개_QR코드.html

학생들이 스마트폰이나 태블릿으로 현장에서 스무고개 상담카드 웹에 즉시 접속할 수 있도록 접속 주소를 담은 안내용 QR코드를 생성하고 화면에 표시해주는 도구입니다.

유틸리티/인쇄용
🖨️

스무고개 1번 (인쇄용)

스무고개_1번_지금의나_인쇄용.html

지필 환경에서 상담 또는 기록을 해야 하는 학생들을 위해 '지금의 나'를 주제로 한 스무고개 진단지를 출력용(A4 규격 등)으로 깔끔하게 포맷팅해 둔 페이지입니다.

유틸리티/인쇄용
🖨️

스무고개 2번 (인쇄용)

스무고개_2번_시간가는줄모를때_인쇄용.html

인쇄 및 배포가 가능한 포맷의 '시간 가는 줄 모를 때(몰입)' 스무고개 시트입니다. 인터넷이나 기기를 사용하기 어려운 오프라인 단체 활동 시 프린트하여 사용합니다.

유틸리티/인쇄용
🧩

기존 스무고개 허브

스무고개_허브.html

클로드에서 작업했던 스무고개 종합 진행 포털 및 퍼즐 맞추기 화면의 UI 프로토타입입니다. 개별 진단 후 결과를 여기에 취합하여 진척도를 확인할 수 있습니다.

유틸리티/인쇄용
👁️

인터랙션 샘플

스무고개_인터랙션_샘플.html

스무고개 서비스 개발 과정에서 역동적이고 세련된 화면 전환 효과, 그래프 드로잉 효과 및 모션 처리를 테스트하기 위한 개발자용 동작 프로토타입 예제입니다.

🔮

📸 태블릿이나 스마트폰 카메라로 스캔하면
즉시 스무고개 검사를 시작할 수 있습니다.