📘 연 통합 규격 YUV-5.5

모든 연 앱 공통 기술 표준 · 메이저 버전
  • 📅 갱신일: 2026-05-19
  • 📋 역할: 앱 구현·코드·보안·디자인·배포 기술 표준 전용
  • 🔗 연동: 연소사 컨텍스트는 yeon-guidebook v5.5 참조
  • 📰 YLV 동기화: YLV-5.5 와 메이저 버전 일치
  • 🎨 v5.5: HTML 본체 전환 (Tarik Sefa · Karpathy 통찰)
⭐ v5.5 핵심 변화
모든 표준 문서를 HTML 본체로 전환. HTML 이 시각·인터랙티브로 정보 압축, Claude 도 더 정확히 파싱. 매번 읽기 효율 ↑ + 누적 비용 ↓.

§0. 이 문서의 사용법

연소사 컨텍스트·교육 철학·앱별 기능·작업 방식 = yeon-guidebook v5.5
앱 구현 기술 표준 (이 문서, 마무리 단계만 첨부) = YUV-5.5
   ├─ 시각 토큰 = yeon-design
   ├─ 음성 챗봇 = yeon-voice-chatbot
   ├─ 동화책 = donghwa 시작지침서
   └─ 그 외 = 해당 스킬

사용 흐름

📝 0~90%: yeon-guidebook 만으로 진행
🔔 90~95% (마무리): Claude 자동 "YUV-5.5.html 첨부해 주세요"
🚀 95~100% (배포): §15 체크리스트 일괄 적용

적용 대상 앱과 키 정책

키 정책
연플래너 / 수풀AI·영풀 / 스무고개 / 연학원관리 / 연 음성 입력기·통합플래너 / 그림동화책§7-0 서버 단일 키
연YouTube분석기이중 §7-0 + §10-15
단어장 도구류 (lesson3, word-generator)§10-15 사용자 본인 키

§1. 절대 규칙

1-1. 앱 간 격리 🔴
1-2. 한국어 전용
1-3. 한자 "然" 금지
1-4. 잘게 묻지 말 것
1-5. 같은 실패 반복 금지
1-6. Google Drive: Read/Edit/Write 만
★ 1-7. 작업 폴더 = C:\Claude 전용 🔴 — OneDrive 작업 감지 시 자동 미러(C:\Claude\<프로젝트명>\) + "기본 작업 장소 아님" 알림. OneDrive는 Read 만 허용
★ 1-8. OneDrive 동기화 함정 — Edit 후 bash로 byte/syntax 검증 X. Read 도구로 직접 확인 (캐시가 옛 데이터 보고함)
★ 1-9. 큰 레이아웃·정책 변경은 시안 SVG/스케치 먼저 → 사용자 OK → 작은 단계 검증·적용
★ 1-10. 버전 폴더 규칙 🔴 — 패치(4.2.1→4.2.2) 같은 폴더 OK / 마이너·메이저(4.2→4.3) 반드시 새 폴더 + 날짜 (연플래너_v4.3_2026-05-21 형식) + 앱 구동 모든 파일 복사 + 옛 폴더 보존

§2. 사용자 권한 4계층

계층코드접근 범위
서버 관리자 연소사 1인822000API 키·전체 통제·모든 지점
연아카데미 관리자123400선생님 관리 + 지점 운영
선생님123450학생 등록·수업 도우미
학생100001학습 기능만

2-3. 권한 누수 금지

§3. y-프로젝트 통합 계정 (SSO)

한 번 가입 → 모든 y-프로젝트 앱 자동 로그인. ID/PW 변경 자동 동기화.

3-1. 5가지 원칙

① 단일 저장y_accounts
② 한 번 가입 → 모든 앱 로그인
③ 동일 로그인 흐름
④ 실시간 ID/PW 동기화
⑤ 통합 사용 현황 추적

3-4. 사용자 고유 번호 + ID/PW 변경 이력

y_user_no 상세
  • 가입 순서대로 자동 발급 (1, 2, 3, …)
  • 표기: 7자리 (예: Y-0001234)
비밀번호 절대 평문 ❌ (bcrypt/argon2 해시만). 관리자도 평문 ❌, 변경 메타데이터만 조회.
역할조회 범위
서버 관리자모든 사용자
연아카데미 관리자자기 지점 소속만
선생님·학생본인만

3-5. SSO 동작 흐름

1. 앱 A 6자리 코드 입력 → 인증 완료
2. localStorage 통합 키 저장 + postMessage 브로드캐스트
3. 앱 B 로드 시 yeon_unified_verified === 'true' 자동 확인
4. 있으면 자동 마이그레이션 → 코드 입력 ❌
localStorage.yeon_unified_code        // 6자리 코드
localStorage.yeon_unified_info        // { academy, teacher, role, expires }
localStorage.yeon_unified_verified    // 'true' / 없음
localStorage.yeon_unified_verifiedAt
localStorage.yeon_unified_role

§4. 로그인 + 잠금 + 학생 본인 확인

4-1. 화면 구조

"어떤 분이신가요?" — 세로 버튼 3개:
  1. 학생이에요 → 6자리 코드
  2. 선생님이에요 → 6자리 코드
  3. 서버 관리자입니다 (작게, 우측 하단)

4-2. 5회 실패 5분 잠금 ⭐

  • 5회 연속 실패 → 5분 입력 차단
  • 클라이언트 카운트다운 + 서버 검증 둘 다 필수
  • 5분 후 자동 해제. 또 5회 → 또 5분 (지수 증가 ❌)
구분예시
"Too many attempts"
"5번 잘못 입력하셨어요. 5분 뒤에 다시 도전해 주세요. ⏰"

4-4. 학생 본인 확인 (10일 유예)

10일 유예
임시 등록 상태로 모든 기능 사용 가능. 그 사이 선생님이 이름·학교·학년 확인 후 본 등록.
유예 중 자동 안내
학생 앱: "담당 선생님께 등록을 부탁드려요 🙏"
선생님 앱: "본인 확인이 필요한 학생이 N명"
{
  "verification_status": "pending" | "verified" | "rejected",
  "verification_grace_until": "2026-05-24T00:00:00Z",
  "verified_by": "teacher_uid",
  "extra_info": { "school": "...", "grade": "..." }
}

§5. 챗봇 — Gemma 4 26B 기본 ⭐

⭐ v5.0 부터 챗봇 기본 엔진 = Gemma 4 26B
비용 효율 (Gemini Pro 1/3~1/2) · 오픈 모델 · Gemini 동일 API 키 (별도 키 ❌) · 140개 언어 128K 컨텍스트
용도1순위2순위
AI 챗봇Gemma 4 26BClaude Haiku
학습 풀이·설명Claude SonnetGemma 4 26B
대량 자료 생성Gemma 3 12BGemini Flash
영상·문서 분석Claude SonnetGemini Pro
최고 품질 분석Claude OpusGemini Pro
이미지 생성Google Gemini

5-3. 시스템 프롬프트 공통 헤더

너는 연 AI 학습코칭 아카데미의 학습 도우미야.
한국어로만 답해. 학생과 선생님을 존중하는 톤으로,
짧고 친절하게 말해. 영어 기술용어는 쓰지 마.

5-5. 챗봇 FAB 필수 6가지

금지 단어: API, 토큰, rate limit, quota, endpoint

§6. 자동 백엔드 탐색

페이지 로드 → HTTPS 환경 감지 → 백엔드 후보 3개 병렬 헬스체크 → 자동 활성화 → 데이터 자동 이관 → 10분 백그라운드 동기화

§6-2 표준 IIFE 코드
(function autoDetectBackend(){
  if (location.protocol === 'file:' ||
      location.hostname === 'localhost' ||
      location.hostname === '127.0.0.1' ||
      location.hostname.endsWith('.local')) {
    return;
  }
  window.YEON_HOSTED = true;
  var domain = location.hostname.replace(/^www\./, '');
  Promise.any([
    location.origin + '/api',
    'https://api.' + domain,
    'https://' + domain + '/api'
  ].map(function(url){
    return fetch(url + '/health').then(function(r){
      if(!r.ok) throw 0; return url;
    });
  })).then(function(base){
    window.YEON_BACKEND_BASE = base;
    onBackendConnected();
  }).catch(function(){});
})();

§7. 호스팅 마이그레이션 마커

// 🚧 TODO[YEON-HOST]: 호스팅 시 활성화 — <어느 표준 항목인지>

박아둘 위치 7곳: 글로벌 변수 / AI 호출 stub / 데이터 푸시 / 데이터 풀 / setInterval / IndexedDB 이관 / /api/health

§8. 공통 화면 요소

§9. 디자인 시스템

--yp-ink #1f2a2a · 기본 텍스트
--yp-deep #2f5d62 · 메인 브랜드
--yp-pine #427a71 · 중간 틸
--yp-accent #c38d56 · 웜 앰버

9-2. 서피스

--yp-sage #dfe8de  --yp-mist #f4f1eb  --yp-sand #e7d9bf
--yp-peach #f3e7dd  --yp-line #d7d1c5  --yp-card #fffdf8

9-3. 타이포그래피

§10. Firestore

10-1. 컬렉션 이름

개별 앱
users, branches, students, teachers, chat_logs, app_usage
y-프로젝트 통합
y_accounts, y_apps_registered, y_usage_events, y_auth_attempts, y_account_changes
10-2. y_accounts 문서 구조
{
  "uid": "...", "y_user_no": 1234,
  "role": "student" | "teacher" | "branch_admin" | "server_admin",
  "name": "...", "id": "...", "pw_hash": "...",
  "id_changed_at": "...", "pw_changed_at": "...",
  "branch_id": "본점" | "삼산",
  "code": "123450", "issued_by": "123400",
  "apps_installed": [...],
  "verification_status": "pending" | "verified",
  "verification_grace_until": "...",
  "extra_info": { "school": "...", "grade": "..." }
}
10-3. Security Rules
match /y_accounts/{uid} {
  allow read:  if request.auth.uid == uid
                  || request.auth.token.role == 'server_admin'
                  || (request.auth.token.role == 'branch_admin'
                      && resource.data.branch_id == request.auth.token.branch_id);
  allow write: if request.auth.uid == uid
                  || request.auth.token.role == 'server_admin';
}
match /y_account_changes/{cid} {
  allow create: if request.auth != null;
  allow update, delete: if false;  // 불변
}

§11. 반응형

크기 단위 고정 px 금지 / vh, vw, %, flex, grid
범위 최소 320px / 최대 1440px+
모바일 우선 380px 기준 / 태블릿 768+ / PC 1024+
터치 대상 모바일 최소 44×44px

§13. 메시지 톤

상황❌ 금지✅ 권장
일반 오류"Error occurred""잠시 후 다시 해볼까요?"
키 부족"API quota exceeded""선생님께 문의해주세요 🙇"
로그인 실패"Invalid credentials""코드가 맞지 않아요"
5회 잠금"Too many attempts""5번 잘못 입력하셨어요. 5분 뒤에 ⏰"

§14. 절대 하지 말 것

보안·데이터
  • ❌ API 키 클라이언트 노출 / 본점 키 하드코딩
  • ❌ 일반 사용자 화면 "API"·"토큰" 글자
  • ❌ 권한 누수 / 5회 잠금 우회 / 앱별 계정 DB
  • ❌ 비밀번호 평문 저장·조회
  • ❌ 변경 이력 로그 수정·삭제 (불변)
  • ❌ 클라이언트에 비즈니스 로직·프롬프트
챗봇·UI: 자동 전송 ❌ / 다른 앱 기능 응답 ❌ / TTS 마크다운·이모지 ❌ / FAB 위치 매번 초기화 ❌
작업: 잘게 묻기 ❌ / Google Drive bash 접근 ❌ / "올려주세요" 시키기 ❌

§15. 배포 전 점검 체크리스트 ⭐

🚀 마무리 단계 진입
yeon-guidebook §17 자동 트리거로 진입. YUV-5.5.html 첨부 후 일괄 점검.
통합 계정 + 변경 추적 (§3)
권한·보안
로그인 + 학생 본인 확인 (§4)
챗봇 (§5)
자동 백엔드 (§6·§7)
디자인 (§9) · 반응형 (§11)
자동 업데이트 (§18)
배포·코드 보호 (§19) — 충돌 #1 해결 ⭐
PWA (§23)
Vault·내보내기 (§21·§22)
폴더 (§17 / yeon-guidebook §10-35)

§16. 통합 업그레이드 시스템

1. 변경 정리
2. 영향 앱 목록
3. 앱별 업그레이드
4. §15 자동 검증
5. 결과 보고
6. 실패 시 별도 수정

§17. 로컬 폴더·백업 — yeon-guidebook 위임

항목참조
저장 위치 (OneDrive + Google Drive 이중)yeon-guidebook §10-8·§10-9
새 버전 폴더 ({앱이름}_v{주.부}_{YYYYMMDD})yeon-guidebook §10-35
옛 버전 백업 이동yeon-guidebook §10-35 + §17-3
G 드라이브 표준 문서 자동 백업yeon-guidebook §10-38

§18. 자동 업데이트 시스템

🎯 핵심 약속
학생·선생님이 "새로고침" 절대 누를 필요 없음. GitHub push만 하면 5분 안에 모든 앱 새 버전.
Service Worker
백그라운드 자동 다운로드
버전 폴링 5분마다
version.json 비교
HTML no-cache + 해시 파일명

18-2. 부드러운 자동 리로드

새 버전 감지 시 즉시 리로드 ❌. 다음 모두 만족 시 리로드:
  1. 사용자 입력 중 ❌
  2. 최근 30초간 클릭·키 입력 없음 (idle)
  3. 챗봇 응답 대기 중 ❌
18-3. 표준 구현 코드
const VERSION_CHECK_INTERVAL = 5 * 60 * 1000;
let currentVersion = window.YEON_BUILD_VERSION || 'dev';

async function checkVersion() {
  try {
    const r = await fetch('/version.json?t=' + Date.now(), { cache: 'no-cache' });
    const j = await r.json();
    if (j.version !== currentVersion) {
      if (j.force) { showToast('보안 업데이트…'); setTimeout(() => location.reload(), 1000); }
      else { showToast('새 버전이 준비됐어요 ✨'); scheduleSoftReload(); }
    }
  } catch(_) {}
}
function scheduleSoftReload() {
  let lastActivity = Date.now();
  ['click','keydown','touchstart'].forEach(ev =>
    window.addEventListener(ev, () => lastActivity = Date.now()));
  const tick = setInterval(() => {
    const idle = Date.now() - lastActivity > 30000;
    const isInput = ['INPUT','TEXTAREA'].includes(document.activeElement?.tagName);
    if (idle && !isInput && !window.YEON_CHAT_PENDING) {
      clearInterval(tick);
      showToast('새 버전 적용됐어요 ✨', 3000);
      setTimeout(() => location.reload(), 600);
    }
  }, 5000);
}
setInterval(checkVersion, VERSION_CHECK_INTERVAL);
checkVersion();

§19. 배포·코드 보호 ⭐ 충돌 #1 해결

🔐 핵심 원칙
가치 있는 코드 (AI 프롬프트·풀이 알고리즘·학습 사전·API 키) → 서버에. 클라이언트는 UI만.

19-1. 권장 스택 (Cloudflare + Firebase 단일 표준)

역할플랫폼
정적 호스팅·CDNCloudflare Pages 무료·전세계 엣지·DDoS 자동
서버 함수Cloudflare Workers 일 10만 무료·50ms
DB·인증·실시간Firebase Firestore + Auth + Functions + FCM
DNS·SSL·DDoSCloudflare 자동
금지 (v5.0 명시):
  • ❌ Netlify
  • ❌ GitHub Pages (백엔드 불가)
  • ❌ Vercel (선택적·임시만)
  • Supabase (Firebase 와 역할 중복)

19-2. Thin Client 원칙

두는 곳무엇
클라이언트UI·사용자 입력·결과 표시·/api/* 호출 (minify 90% 숨김)
서버 (Functions)AI 프롬프트·풀이 알고리즘·학습 사전·API 키·인증 검증 (100% 숨김)

19-4. 자동 배포 흐름

연소사님이 OneDrive\Projects\수풀AI\index.html 저장
Claude (또는 GitHub Desktop)가 git commit + push
Cloudflare + Firebase 자동 webhook 감지 (5초)
클라이언트 minify · Workers · Firebase 동기화 (1~3분)
모든 학생·선생님 앱: §18 자동 업데이트로 새 버전
✅ 연소사님이 한 일: 파일 저장 1번
19-5. 폴더 구조
수풀AI_v2.1_20260519\
├── index.html
├── /public
├── /src
├── /functions          ← Cloudflare Workers ⭐
│   ├── api/
│   │   ├── solve.js    ← 풀이 알고리즘 (클라이언트 ❌)
│   │   ├── chat.js     ← 챗봇 (프롬프트 포함)
│   │   ├── auth.js
│   │   └── health.js
│   └── _shared/prompts/
├── version.json
├── wrangler.toml
└── firebase.json

§21. Obsidian Vault

1개 메인 Vault + 1개 민감자료 Vault 구조. 깊이 최대 4단.
가능 ✅금지 ❌
04_영상분석/강의/수학/영상.md (4단)5단 이상 → 태그 (#키워드)

21-3. AI 자동 분류 + Wiki Link

  1. AI (Gemma 4 26B) 가 핵심 키워드 5개 추출
  2. 가장 적합한 1곳에 원본 노트 저장
  3. 비슷한 2~3개 폴더에 [[원본]] Wiki Link 자동 생성
  4. 모든 노트에 키워드 태그(#키워드) 자동 부여
21-4. AI 분류 JSON 응답
{
  "keywords": ["수학", "미적분", "수능", "함수", "도함수"],
  "main_folder": "04_영상분석/강의/수학",
  "shortcut_folders": ["05_학습자료/시험대비/수학", "00_일반분석"]
}

§22. 내보내기 v1.1.10

형식확장자추천 용도
📝 Markdown.md옵시디언·노션·깃허브
🌐 HTML.html브라우저 공유
📄 Word.doc학부모 인쇄
📕 PDF.pdf최종 보고서
📦 JSON.json백업·재가져오기
📚 Obsidian Vault.md × N도메인별 + index.md

22-1. 파일명 규칙

학습지도_<도메인>_<날짜>.<확장자>

보안: 학생 본인 데이터만, 다른 학생 섞이지 않음. student_id는 JSON에만, 사람용에는 노출 ❌. 기본 비공개.

§23. PWA

23-1. 필수 요건 6가지

23-2. 파일 구성
앱폴더/
├── index.html       (PWA 메타)
├── manifest.json
├── sw.js
├── icon-192.svg
├── icon-512.svg
└── apple-touch-icon.svg (180×180)

§24. v5.6 신표준 체크리스트 ⭐

🎨 v5.6 메인 점검 — 자동화 한 번에 정확하게
v5.6 부터 모든 컴퓨터 자동화 작업은 §25 시간 budget·검증 패턴 준수. v5.5의 HTML 본체 전환 유지.
자동화 정확성 (v5.6 신규)
두 문서 역할 분담 (§0)
LLM (§5-1)
배포 스택 (§19-1)

§25. 한 번에 정확하게 (NEW 5.6) 🎯

⚠️ 2026-05-20 세션 피드백
"너무도 간단한 문제를 너무 오래 걸려서 내가 컴퓨터를 제어하지도 못하게 만들었네 ㅠㅠㅠ 이런 실수도 반복하지 않도록 딱 한 번에 정확하게 일을 할 수 있도록 공부 열심히 해라" — 연소사

25-1. 자동화 시간 budget

컴퓨터 자동화(computer-use, PowerShell, 파일 이동 등)는 2분 안에 못 끝나면 사용자에게 수동 안내로 즉시 전환. 사용자가 그 시간 동안 컴퓨터를 제어할 수 없게 됨을 명심.

25-2. 같은 카테고리 재시도 금지

실패한 방법다음 시도 (다른 카테고리)
.bat 호출PowerShell 직접 (.cmd 다시 ❌)
PowerShell 직접파일 탐색기 GUI (Base64 ❌)
파일 탐색기 GUI사용자에게 수동 안내
Python /mnt/ 쓰기 (EACCES)/tmp 작업 후 cp로 옮김

25-3. 검증된 패턴 — 한국어 경로 파일 이동

powershell -ep Bypass -c "ni '<목적지>' -ItemType Directory -Force >$null;mv '<원본>\*.확장자' '<목적지>\'"

25-4. 컴퓨터 자동화 직전 점검

25-5. 정리(cleanup)도 본 작업과 같은 신중함

임시 파일·OneDrive 잠금 파일을 못 지우면 즉시 사용자 안내하고 끝낼 것. 정리에 추가로 화면 점유 ❌. 무해한 잔존 파일은 안내만 하고 다음 세션에서 처리.

25-6. "대답부터 먼저" 강화

사용자 질문이 누적된 상태에서 도구 호출 먼저 하면 안 됨. 짧게라도 먼저 답변 → 도구 호출. 도구 호출이 길어지면 사용자가 한 번 더 답답해함.

§26. 메모리·가이드북 권한 한계 + 통합 지침 관리 (NEW 5.6) 🚨

🚨 2026-05-20 발견
시스템 프롬프트는 "메모리·가이드북 자동 업데이트하라" 하지만 Write 도구는 다음 위치 접근 거부:
  • 메모리: local-agent-mode-sessions\{uuid}\{uuid}\spaces\{uuid}\memory\
  • 가이드북: skills-plugin\{uuid}\{uuid}\skills\yeon-guidebook\
"outside this session's connected folders" 오류.

26-1. 약속하기 전에 점검

"자동 업데이트하겠습니다" "기억했습니다 ✅" 같은 약속을 하기 전에 Write 권한이 있는지 사전 확인. 못 하면서 약속하면 신뢰 손상 + 사용자 시간 또 빼앗음.

26-2. 통합 지침 관리 폴더 (마스터 위치)

모든 통합 지침은 한 곳에서 관리:
C:\Claude\1.y-통합규격과_지침-에이젼트팀-관리\통합_지침\
  • YUV (이 문서) → 여기에 누적 보관 (5.5, 5.6, 5.7…)
  • 연에이전트 호출명령서 → 여기에 누적
  • 학습 노트는 별도: C:\Claude\learnings\

26-3. 우회 절차

1. 새 규칙·피드백을 작업 폴더(연 프로젝트 폴더)에 마크다운으로 정리
2. YUV 새 버전(.html)으로 통합 발행
3. 통합 지침 관리 폴더에 PowerShell로 옮김
4. "기억했습니다 ✅" 알림은 YUV·관리 폴더에 기록된 후에만 사용

26-4. Everything 검색 활용

사용자 PC에 Everything 검색 프로그램 설치돼 있음. YUV·가이드북·연앱 파일 위치를 찾을 때 사용자에게 Everything 검색을 요청. 작업 폴더 외부의 파일도 1분 안에 찾음.

권장 키워드: yuv, 통합규격, guidebook, 학습.md, 피드백

26-5. 역할 분담

종류위치용도Write 권한
YUV (이 문서)C:\Claude\1.y-통합규격과_지침-에이젼트팀-관리\통합_지침\모든 연 앱 마스터 표준 + 글로벌 규칙OK PowerShell 경유
가이드북 스킬skills\yeon-guidebook\모든 세션 자동 적용차단
메모리memory\MEMORY.md사용자 선호 누적차단
학습 노트C:\Claude\learnings\패턴·교훈 (참조용)간접 PowerShell 경유
연에이전트 호출명령서통합 지침 관리 폴더14인 팀 즉시 가동OK

📅 변경 이력

버전날짜변경
YUV-5.62026-05-20자동화 정확성 + 권한 한계 + 통합 지침 관리 폴더 §25 (시간 budget·한국어 경로 PowerShell 패턴·같은 카테고리 재시도 금지·정리 신중함·대답부터 먼저), §26 (메모리·가이드북 Write 거부 사실 인지·Everything 검색 활용·통합 지침 관리 폴더 C:\Claude\1.y-통합규격과_지침-에이젼트팀-관리\통합_지침\). 2026-05-20 연그림판 v3.2.0 세션 피드백 반영.
YUV-5.52026-05-19HTML 본체 전환 (Tarik Sefa · Karpathy). MD → HTML 형식. 인터랙티브 체크리스트 강화. yeon-guidebook §10-39 연동.
YUV52026-05-19메이저: 두 문서 역할 분담. 충돌 6개 해결.
YUV42026-05-17Vault·내보내기·PWA·Gemma 4 통합
YUV3.12026-05-14Cloudflare + Firebase 확정
YUV32026-05-14y_user_no · ID/PW 추적 · 자동 업데이트 · Thin Client
YUV22026-05-14학생 본인 확인 10일 유예
YUV12026-05-14새 명명 규칙 시작