PPP 이야기 서재

평생과정설계(PPP) 이용자의 초기접수 · 꿈과 계획 · 프로그램 이용 · 상담·회의 · 평가 기록을 이용자별 “한 권의 책”으로 모아 보고 분석하는 실무자용 웹앱입니다.

저장 방식은 두 가지입니다. js/config.js에 Supabase 주소·공개 키가 있으면 로그인 후 Supabase 서버에 저장하고(직원 명단·RLS로 보호), 비어 있으면 브라우저 저장 시제품 모드로 동작합니다. 아래 “데이터 저장 주의사항”은 시제품 모드 기준입니다. 서버 설정은 supabase/README.md.

대상 사용자

복지관 실무자(담당 사회복지사). 당사자·보호자가 직접 사용하는 화면은 범위 밖입니다.

주요 기능

화면	내용
마을(첫 화면, 3D)	입구부터 준비·계획·실천·평가 마을. 집 1채 = 이용자 1명. 굴뚝 연기(최근 14일 활동), 노란 깃발·‘확인 필요’ 표지(모니터링 확인 필요), 마당 꽃(달성 목표). 집에 들어가면 현관(초기접수)·거실(한눈에 보기)·꿈의 방(목표)·활동실(프로그램)·상담실(상담·회의)·추억의 방(평가·타임라인)을 고르고, 오른쪽 창에서 기록을 보고 추가
서재	준비·계획·실천·평가 단계별 서가에 이용자 책이 꽂혀 있음. 검색·단계·담당자 필터, 정렬, 서가/목록 보기 전환, 현황 지표(단계 분포, 이번 달 참여·상담, 모니터링 확인 필요)
펼친 책(개인)	왼쪽: 나를 소개합니다(꿈·강점·좋아하는 것·편안하게 하는 방법·우선 영역·단계 진행). 오른쪽 목차: 한눈에 보기 / 1장 초기접수 / 2장 꿈과 계획 / 3장 프로그램 이용 / 4장 상담·회의 / 5장 평가 / 부록 타임라인
분석	기간(3·6·12개월)별 영역 참여, 월별 추이, 우선순위 영역, 목표 달성 현황, 담당자별 현황
데이터 관리	JSON 백업·복원(구조 검증 후 복원), 가상 샘플 불러오기, 전체 삭제
공통	글자 크기 4단계, PDF 저장(인쇄), 키보드 조작, 모바일 대응

실행

빌드가 필요 없습니다.

# 저장소 루트에서
python3 -m http.server 8000
# 브라우저에서 http://localhost:8000 접속

index.html을 파일로 직접 열어도 동작하지만, 로컬 서버 실행을 권장합니다.

배포 (Vercel)

1. Vercel에서 이 저장소를 Import
2. Framework Preset: Other, Build Command: 비움, Output Directory: .(루트)
3. 배포 후 접근 제한(Vercel 비밀번호 보호 또는 기관 SSO)을 반드시 설정 — SECURITY.md §3

사용법

1. 처음 열면 가상 샘플 데이터(12명)가 자동으로 들어갑니다.
2. 마을에서 집을 누르거나 왼쪽 ‘집 목록’에서 이름을 고르면 집 안으로 들어갑니다. 방을 누르면 그 장의 기록이 열립니다. 드래그로 이동, 휠로 확대, Shift+드래그(또는 ⟲⟳ 버튼)로 회전, Esc로 나가기.
3. 서재에서 책을 누르면 그 사람의 책이 펼쳐집니다. 목차(탭)에서 장을 고르고 ＋ 버튼으로 기록을 추가합니다. (탭은 ←/→ 키로 이동)
4. 새 이용자는 ＋ 새 이용자 등록 → 저장하면 바로 1장(초기접수)이 열립니다.
5. 책의 PDF·인쇄를 누르면 모든 장이 순서대로 인쇄됩니다. 인쇄 대화상자에서 “PDF로 저장”을 고르세요.
6. 실제 사용 전 데이터 관리 → 모든 데이터 지우기로 샘플을 비우세요.

데이터 저장 및 백업 주의사항

• 데이터는 이 브라우저의 localStorage에만 저장됩니다. 다른 PC·다른 브라우저와 자동 동기화되지 않습니다.
• 암호화·로그인·사용자별 권한이 없습니다. 같은 PC를 쓰는 사람은 누구나 볼 수 있습니다.
• 브라우저 방문 기록/사이트 데이터 삭제, 사생활 보호 모드 종료 시 데이터가 사라집니다.
• 정기적으로 데이터 관리 → 백업 파일 내려받기를 하고, 백업 파일은 기관이 정한 보안 저장소에만 보관하세요(USB·개인 메일 금지).
• 복원은 현재 데이터를 전부 덮어씁니다.

문서

문서	내용
CLAUDE.md	AI 개발 지침
PROJECT_SPEC.md	요구사항 명세·미확정 사항
FEATURES.md	기능 명세
DATA_MODEL.md	데이터 구조·서버 DB 설계안
UI_UX.md	화면·디자인 규칙
SECURITY.md	개인정보·보안
DEVELOPMENT_PLAN.md	개발 단계
TEST_PLAN.md	테스트 시나리오