천안쌍용고 조성주 @엔의 생명과학
지난 시간 빠른 복습
내 웹앱은 호텔이에요 (프론트엔드와 백엔드)
호텔은 이렇게 털려요 (개인정보보호)
에듀집 등록과 학운위 심의
스킬과 하네스 만들기
에셋과 UI/UX 레퍼런스, 깃허브 백업
선생님들이 올려 주신 사이트에 제가 직접 들어가 봐요.
방금 배운 눈으로 화면과 보안을 같이 살펴봐요.
안 되는 부분은 이때 편하게 물어보세요.
참여하지 못하신 선생님을 위해 다시보기를 제공할 예정이에요.
내장 브라우저에서 요소를 직접 고르거나, 캡처를 붙여 넣고 말해요.
인터넷 상가에 가게를 입점시키는 일이에요. 주소 자체가 결과물이에요.
대부분 선생님이 배포와 핵심 기능, 데이터 저장까지 마치셨어요. 오늘은 그다음 이야기예요.
A를 원했는데 공사하다 보니 B가 됐어요.
PRODUCT.md벽 하나 헐었더니 2층이 무너져요.
ARCHITECTURE.md사장인데 자기 건물 구조를 몰라요.
DECISIONS.md오늘 내용은 대부분 인지부채를 줄이는 이야기예요. 내 앱의 데이터가 어디에 있는지 내가 알아야 지킬 수 있어요.
시험할 때는 가짜 이름과 가짜 점수를 써요.
단톡방, 퀴즈앤, 캡처 화면 어디에도 올리지 않아요.
깃허브에 올라가지 않게 AI에게 꼭 말해요.
지난주에는 "하지 마세요"만 말씀드렸어요. 오늘은 왜 그런지를 호텔 이야기로 풀어 볼게요.
투숙객이 드나드는 로비, 직원만 들어가는 구역, 귀중품을 맡아 두는 보관실이 있어요.
학생과 선생님이에요. 브라우저로 호텔 문을 열고 들어와요.
버튼, 글자, 입력 칸이에요. 누구나 들어와서 구석구석 볼 수 있어요.
누구나 들어옴신분을 확인한 뒤 보관실에 넣고 꺼내요. 투숙객은 들어갈 수 없어요.
직원만 들어감학생 답안, 점수, 계정이 쌓이는 곳이에요. 마스터키가 있어야 열려요.
가장 깊은 곳로비와 직원 구역 사이를 오가는 부탁을 API라고 불러요. "제 점수 보여 주세요" 같은 요청서예요.
| 호텔에서는 | 개발에서는 | 내 프로젝트에서 보이는 모습 |
|---|---|---|
| 로비 | 프론트엔드 | HTML, CSS, 자바스크립트, React, 브라우저에서 보이는 화면 |
| 직원 구역 | 백엔드, 서버 | API 라우트, 서버 함수, Supabase나 Firebase가 대신 해 주는 일 |
| 귀중품 보관실 | 데이터베이스(DB) | Supabase 테이블, Firebase Firestore, 구글 시트 |
| 마스터키 | 비밀 API 키, 시크릿 | .env 파일 안의 긴 문자열 |
| 체크인과 객실 잠금 | 인증, 권한 | 로그인, Supabase RLS, Firebase 보안 규칙 |
| 호텔 건물 | 호스팅 | Vercel, Netlify |
| 설계도 보관소 | 저장소 | 깃허브 |
화면을 숨기거나 버튼을 안 보이게 해도 코드는 투숙객 기기에 이미 도착해 있어요.
그래서 비밀번호 확인이나 정답 채점을 로비에서만 하면 투숙객이 답을 먼저 볼 수 있어요.
귀중품은 보관실에 두고 꺼내는 일은 직원에게 맡겨요.
서버에 저장하지 않아요. 값이 학생 기기 안에만 남아요. 지킬 게 가장 적어요.
Supabase나 Firebase에 답안과 점수를 쌓아요. 오늘 내용이 전부 해당돼요.
AI API를 써요. 학생이 쓴 글이 밖으로 나가고 마스터키 관리가 더 중요해요.
마스터키를 로비에 걸어 둬요
카드키 하나로 모든 방이 열려요
직원 전용 문이 그냥 열려요
숙박부에 너무 많이 적어요
투숙객 누구나 집어 갈 수 있어요. 깃허브 공개 저장소에 올리면 길에 걸어 둔 것과 같아요.
AI API 키, Supabase service_role 키가 프론트 코드에 들어가거나 .env가 통째로 커밋돼요.
키는 .env와 배포 사이트의 환경 변수에만 둬요. 이미 올렸다면 지우는 것으로 끝나지 않아요. 키를 새로 발급받아요.
로비에서 나눠 줘도 되는 열쇠도 있어요. Supabase anon 키는 객실 카드키 같은 공개용이에요. 대신 경로 2의 객실 잠금이 꼭 걸려 있어야 해요.
공사할 때 편하려고 풀어 둔 잠금을 개업한 뒤에도 그대로 둔 거예요.
Supabase 테이블의 RLS가 꺼져 있거나 Firebase 보안 규칙이 테스트 모드로 남아 있어요.
모든 테이블에 RLS를 켜고 본인 데이터만 읽고 쓰게 해요. 로그아웃한 상태로 읽히는지 AI에게 직접 시험하게 해요.
바이브코딩으로 만든 앱에서 가장 자주 나오는 사고예요. AI는 "일단 돌아가게" 만들 때 잠금을 풀어 두는 경우가 있어요.
직원 전용 문에 팻말만 붙어 있고 잠금장치는 없어요.
/teacher 주소를 직접 치면 들어갈 수 있어요. 비밀번호를 화면 코드 안에서만 비교해서 F12로 보여요.
로그인과 권한 확인을 서버에서 해요. 비밀번호는 그대로 저장하지 않고 해시로 바꿔서 저장해요.
학생은 생각보다 주소창을 잘 만져요. 주소를 숨겨도 문은 잠기지 않아요.
털렸을 때 피해는 적어 둔 만큼 커져요.
혹시 몰라서 받은 항목이 쌓여요. 학년이 끝나도 지우지 않아요.
실명 대신 번호나 닉네임을 써요. 한 명 삭제와 학년도 끝 일괄 삭제 기능을 실제로 만들어요.
학생 개인정보를 코덱스나 클로드 대화창에 붙여 넣는 것도 숙박부를 호텔 밖으로 들고 나가는 일이에요.
회원가입, 로그인, 데이터베이스가 없어요.
학생이 만든 값은 그 기기의 브라우저 안에만 있어요.
결과물은 PDF로 저장해서 선생님께 직접 내요.
모둠 기록은 QR 코드로 기기에서 기기로 옮겨요.
수집하는 개인정보가 없으면 에듀집 서류도 훨씬 짧아져요.
"고치지 말고 보고만"을 빼지 마세요. 무엇이 문제인지 내가 먼저 이해한 다음에 하나씩 고쳐요.
내가 만든 웹앱도 학생이 수업에서 쓰면 학습지원 소프트웨어예요.
초·중등교육법 제29조의2, 제32조
교육부 「학습지원 소프트웨어 선정 기준 안내」(2025. 12. 30.)
에듀집 주소 하나만 정보부장님께 드리면 따로 자료를 받지 않으셔도 돼요.
확인 결과는 edzip.kr/learning-sw 에 올라와요. 제출과 서명, 결재는 작성자가 직접 해요.
| 영역 | 확인하는 것 | 오늘 배운 말로 |
|---|---|---|
| 1. 최소처리 원칙 | 최소한만 수집, 목적 명시, 항목과 보유기간 고지 | 숙박부에 적게 적고 언제 지울지 정해요 |
| 2. 안전조치 의무 | 개인정보 안전조치 | 마스터키 관리, 객실 잠금, HTTPS |
| 3. 정보주체 권리 | 열람, 정정, 삭제, 처리정지 절차 | 맡긴 사람이 보고 고치고 찾아갈 수 있어요 |
| 4. 만 14세 미만 보호 | 아동 개인정보 보호 | 초등학생이나 중학생이 쓰면 더 꼼꼼히 봐요 |
| 5. 책임자·제공·위탁 | 보호책임자, 제3자 제공, 처리 위탁 | 지배인, 그리고 건물주(Vercel 등) |
이 내용을 앱 안의 개인정보 처리방침 페이지에 적어요. 서류의 증빙 칸은 거의 다 이 페이지를 가리켜요.
| 파일 | 무엇 |
|---|---|
| 01 개인정보 처리방침 | 앱의 /privacy 페이지와 같은 내용 |
| 02 필수기준 자가점검표 | 5대 영역 9세부를 증빙과 함께 |
| 03 제품 설명자료 | 개요, 기능, 개인정보 처리 구조 |
| 04 제출 안내 | 절차와 문의처를 정리한 내 메모 |
개인정보 보호책임자 성명과 연락처
자가점검표 맨 아래 서명
구글 폼 제출 버튼
학교 기안문의 결재선
이름과 전화번호는 프로젝트 폴더에 저장하지 않아요.
라이브에서 실제 폴더를 열어 보여 드릴게요. 한글 양식 원본과 공식 안내 PDF도 같이 들어 있어요.
키 노출, 보안 헤더, 위험한 코드 패턴
처리방침 항목, 삭제 기능, 서류 초안
남의 저작물, 라이선스 파일
도구가 통과라고 해도 근거 파일과 줄을 열어 확인해요. 확인되지 않으면 통과로 치지 않아요.
매번 "한국어로 해 줘", "키 올리지 마"를 다시 말하고 있다면 하네스가 필요해요.
원래는 말에게 씌우는 마구예요. 힘센 말이 내가 원하는 방향으로 가게 해 줘요. 호텔로 치면 직원 근무 규정집이에요.
프로젝트에서 늘 지킬 규칙이에요. 새 대화를 열어도 AI가 먼저 읽어요.
CLAUDE.md, AGENTS.md특정한 일을 하는 순서와 기준이에요. 그 일을 시킬 때만 펼쳐 봐요.
SKILL.md지난주의 파일 3개와 작업 메모예요. 대화가 바뀌어도 맥락이 이어져요.
PRODUCT, ARCHITECTURE, DECISIONS| 무엇 | Codex | Claude Code |
|---|---|---|
| 항상 읽는 지시문 | AGENTS.md | CLAUDE.md |
| 이 프로젝트만 쓰는 스킬 | .agents/skills/이름/SKILL.md | .claude/skills/이름/SKILL.md |
| 모든 프로젝트에서 쓰는 스킬 | ~/.codex/skills/이름/SKILL.md | ~/.claude/skills/이름/SKILL.md |
| 스킬 파일 형식 | 똑같아요. 폴더 하나에 SKILL.md 하나면 돼요. | |
내가 직접 쓰지 않아도 돼요. AI에게 만들어 달라고 해요.
새 대화를 열고 "내 앱의 안내 문구를 윤문해 줘"라고 말해 봐요.
어떤 작업이 마음에 들게 끝났을 때 "방금 한 과정을 스킬로 만들어 줘"라고 해요.
| 스킬 | 하는 일 | 이럴 때 꺼내요 |
|---|---|---|
| humanize-korean | AI가 쓴 한글을 진단하고 다듬은 뒤 검증해요 | "AI 티 없애 줘" |
| korean-ui-readability | 단어 중간에서 줄이 끊기지 않게 화면을 손봐요 | 한국어 화면을 만들 때마다 |
| grill-me | 정하지 않은 부분을 AI가 나에게 캐물어요 | PRD를 쓰기 전 |
| dorms | 보안, 에듀집, 저작권을 점검해요 | 배포하기 전, 서류 내기 전 |
| project-handoff | 오늘 한 일을 메모로 남기고 다음에 이어 받아요 | 작업을 끝낼 때, 다시 시작할 때 |
스킬은 나만의 비법이 쌓이는 곳이에요. 남의 스킬을 받아 쓸 때는 안에 무엇이 적혀 있는지 먼저 읽어 봐요.
"예쁘게 해 줘"보다 "이 화면처럼 해 줘"가 훨씬 잘 통해요.
지난주에 소개한 @아인T의 바이브 디자인 랩, @도쌤의 도키피디아 웹디자인 편도 같이 보세요.
무료 에셋에도 이용 조건이 있어요. 쓰기 전에 라이선스를 확인하고 교과서 이미지와 문항은 프로젝트에 넣지 않아요.
로고, 그림, 문구를 그대로 가져오지 않아요. 도름스 선생님 앱을 참고할 때는 쪽지로 먼저 여쭤봐요.
"여기까지 저장해 줘"가 커밋이에요. 망가지면 이 시점으로 돌아와요.
세이브 파일을 깃허브에 올려요. 내 컴퓨터가 고장 나도 남아 있어요.
공개 저장소는 누구나 읽어요. 처음에는 Private로 두고 .gitignore에 .env가 있는지 봐요.
Vercel에 깃허브를 연결해 두셨다면 푸시할 때마다 배포도 같이 새로 돼요.
내가 원한 건가요?
내가 이해했나요?
나중에 고칠 수 있나요?
새 내용을 배우는 강의는 오늘까지예요. 3주차와 4주차는 내 앱을 다듬는 시간이에요.
.env가 빠졌는지 확인해요./dorms 읽기 검사를 돌려 보고 개인정보 처리방침 페이지부터 만들어요.
심의 전까지는 가짜 이름과 가짜 점수로만 시험해요.
처음 온 사람이 무엇을 눌러야 할지 바로 보이나요?
무엇을 저장하고 누가 볼 수 있나요?
교실의 어떤 문제를 풀어 주나요?
라이브 중에는 채팅으로, 끝난 뒤에는 단톡방이나 퀴즈앤 Q&A 칸에 남겨 주세요.
모둠 피드백 받아 다듬기
quizn.show/pbd/info/board/1225040