@도쌤

최신판은 늘 여기에 있습니다 → https://dokipedia.netlify.app/webdesign.html 바이브코딩으로 웹앱을 만들면서 뭐라고 설명을 하고 싶은데 용어를 몰라서 자꾸 막히더라구요. 밤티나는 AI 생성 웹사이트 느낌을 벗어나는데 도움이 되는 자료들을 모아보았습니다. 도움 되시기 바라요! ────────────── 📌 수정내역 v1.3 (26.08.23) — 모션 12종 전부에 작동 데모 연결. 신규 데모 5종(3D 모션·텍스트 리빌·마퀴·스크롤 고정·스켈레톤→콘텐츠) 추가, 나머지 7종은 기존 데모로 앵커 연결 v1.2 (26.08.23) — 「애니메이션 구현 수단」 장 신설(CSS 스크롤 연동·View Transitions API 작동 데모, caniuse 지원률, GSAP·Motion·Anime.js·Lenis·AOS 선택 지도), 「디자인 스킬」 장 신설(에이전트 범용 7종), 모션 효과 6종→12종 v1.1 (26.08.23) — 시리즈 명명 규칙 통일(제목 변경), 공통 디자인 규격 적용, 다크모드 제거(시리즈 통일), 깨진 링크 1건 교체, 출처 표기·워터마크 추가 v1.0 (26.08.09) — 최초 발행

최신판은 늘 여기에 있습니다 → https://dokipedia.netlify.app/apikey.html API키를 활용하면 웹앱에 다양한 기능을 추가할 수 있는 것을 알지만 API키와 관련된 여러 괴담 및 피해사례를 전해 듣고 막연한 두려움을 갖고 계시지는 않나요? 주의사항, API키의 종류, 종류별 활용방법, 요금 발생 여부 등을 총 정리한 API키 대백과를 공유합니다. 잘 읽어보시고 더 풍성한 웹앱을 만들어보세요! ────────────── 📌 수정내역 v1.2 (26.08.23) — 생성형 AI 요금 스냅샷 표 신설(Claude·Gemini·GPT 5종, 도입가 종료일 병기) v1.1 (26.08.23) — 시리즈 명명 규칙 통일(제목 변경), 사이드바 목차 추가, 출처 표기·워터마크 추가 v1.0 (26.08.13) — 최초 발행

최신판은 늘 여기에 있습니다 → https://dokipedia.netlify.app/deploy.html 도쌤 대백과 시리즈입니다. 바이브코딩에 막 입문하신 선생님들에게 은근히 높은 진입 장벽이고, 이미 많은 선생님들이 배포해서 사용하고 계시지만 주로 익숙한 배포도구를 활용하고 계십니다. 하지만 프로젝트 성격에 따라, 또 보안 중요도에 따라 배포 사이트를 달리해야 한다는 것을 알고 계신 분은 많지 않을 것 같습니다. 이에 따라 프로젝트 특성에 따라 어떤 배포도구를 활용해야 할지 정리해보았습니다. 도움 되시기 바랍니다.😃 ────────────── 📌 수정내역 v1.0 (26.08.29) — 최초 발행

최신판은 늘 여기에 있습니다 → https://dokipedia.netlify.app/claudecode.html 클로드코드를 처음 시작하면서 공부하기 위해 모아둔 자료들을 바탕으로 실전도구 백과를 만들어 보았습니다. 깃허브 스타 수가 많은 스킬이나 웹앱 개발에서 사용할 수 있는 여러 도구 등을 모아두었습니다. 도움이 되셨으면 좋겠어요😃 ────────────── 📌 수정내역 v1.2 (26.08.23) — 디자인 스킬 상호참조 추가(본문은 웹디자인 대백과로 이관) v1.1 (26.08.23) — 시리즈 명명 규칙 통일(제목 변경), 공통 디자인 규격 적용(다크 → 시리즈 라이트 팔레트, 히어로 목차 → 사이드바 목차), 출처 표기·워터마크 추가 v1.0 (26.07.25) — 최초 발행

최신판은 늘 여기에 있습니다 → https://dokipedia.netlify.app/github.html 도쌤 대백과 시리즈입니다. 바이브코딩을 하고 계신 90퍼센트의 선생님들이 쓰고 계실 깃허브 관련 지식들을 모은 깃허브 대백과를 공유합니다. 클로드코드나 코덱스 작업 중 푸시, 커밋 등 자주 나오는 용어부터 비교적 전문적인 용어들까지 용어를 정리해두었고 최근 공동작업에 대한 관심이 증가하는 것을 보며 깃허브 공동작업 방식에 대한 소개가 필요할 것 같아서 정리해보았습니다. ────────────── 📌 수정내역 v1.3 (26.09.02) — 부제 변경(용어부터 공동작업까지 → 용어부터 되돌리기까지), 5장 공동작업 축약(브랜치·PR·충돌·Issues 상세를 공동작업 대백과로 이관), 사실 정정 2건(개인 저장소는 읽기 전용 권한 불가, 파일 한도 50MiB 경고·100MiB 차단), 「확인 필요」 해제(보호 규칙은 Team 이상이고 교사 인증 시 Team 무료) v1.2 (26.08.23) — 교사 인증 혜택 갱신(2026-04 코파일럿 신규 가입 중단 → 6/17 순차 재개, 자격 매월 재평가), 「확인 필요」 표시 해제 v1.1 (26.08.23) — 시리즈 명명 규칙 통일(제목 변경), 공통 디자인 규격 적용(색 토큰 정리), 출처 표기·워터마크 추가 v1.0 (26.08.17) — 최초 발행

최신판은 늘 여기에 있습니다 → https://dokipedia.netlify.app/prompt.html 교육청에서 구글 AI Pro를 기본으로 주는 학교가 많아서 안티그래비티로 작업하시는 분들 많으실 텐데, 저도 쓸 때마다 결과물에 오류가 자꾸 나서 답답하더라구요. 근데 알고 보니 오픈AI랑 앤트로픽 최신 가이드는 오히려 "이것저것 시키지 말고 목표만 던져라"는 정반대 얘기를 하고 있었고, 안티그래비티만 아직 폴더 구조부터 하나하나 쥐여줘야 하는 단계였던 거예요. 그래서 도구별로 프롬프트를 어떻게 다르게 써야 하는지, 특히 안티그래비티는 폴더·md 파일로 뭘 어떻게 쥐여줘야 하는지까지 정리해봤습니다. 도움 되시기 바라요! ────────────── 📌 수정내역 v1.2 (26.08.23) — Gemini 3.7 Flash(8/13 출시) 전면 반영, 「3.7 Flash 지시 문법」 소절 신설(thinking_level 3단계·폐기 파라미터·간결 프롬프트 원칙), 코덱스 GPT-5.6 Sol 8/6 튜닝 변화와 8/21 가격 인하 반영 v1.1 (26.08.23) — 시리즈 명명 규칙 통일(제목 변경), 공통 디자인 규격 적용(상단 탭 → 사이드바 목차), 다크모드 토글 제거(시리즈 통일), 출처 표기·워터마크 추가 v1.0 (26.08.09) — 최초 발행

최신판은 늘 여기에 있습니다 → https://dokipedia.netlify.app/aimodel.html 도쌤 대백과 시리즈입니다. "그래서 어떤 모델이 제일 좋아요?"라는 질문에 종합 점수 하나로 답하기가 늘 아쉬웠습니다. 같은 점수라도 어떤 모델은 터미널에서 강하고, 어떤 모델은 한국어 문서에서 강하더라구요. 그래서 그 하나의 점수를 여섯 개 대역(코딩·에이전트 / 추론·과학 / 장문맥·문서 / 멀티모달 / 속도·비용 / 한국어·창작)으로 나눠서 정리해보았습니다. 국내 4사 모델과 이미지·영상·음성 모델까지 함께 담았고, "이 작업엔 뭘 쓰지?"를 거꾸로 찾아볼 수 있는 장도 넣었습니다. 가격과 순위는 몇 주 단위로 바뀌는 영역이라 관측 기준일을 문서 안에 적어두었습니다. 도움 되시기 바라요! ────────────── 📌 수정내역 v1.1 (26.08.23) — 최초 발행

바이브코딩을 전혀 접하지 못한 '진짜' 입문자를 위한 학교 현장 비유를 기반으로 한 강의자료! 조금이라도 바이브코딩을 해보셨던 분들이라면 절대 보지 않으셔도 됩니다. 아예 처음 시작하고 싶은 선생님들만 살펴보시길 추천드려요. 2탄도 곧 업로드 예정입니다.

최신판은 늘 여기에 있습니다 → https://dokipedia.netlify.app/workspace.html 도쌤 대백과 시리즈입니다. 클로드코드·코덱스를 어디서 쓰느냐가 사실은 작업 속도보다 사고 위험과 월 지출을 더 크게 가른다는 걸 알게 돼 정리했습니다. 터미널(CLI), 앱(GUI), VS Code 같은 편집기(IDE), 그리고 paseo·Orca 같은 오케스트레이터까지 네 환경을 공식 문서 기준으로 비교했습니다. 학교 PC에서 설치가 막혔을 때 우회로, 학생 정보가 걸린 작업의 원칙, 사고 났을 때 되돌리는 법까지 담았습니다. 무엇을 어떻게 시킬지는 프롬프트 대백과에서 다룹니다. 도움 되시기 바라요! ────────────── 📌 수정내역 v1.0 (26.08.25) — 최초 발행

최신판은 늘 여기에 있습니다 → https://dokipedia.netlify.app/collab.html 도키피디아 시리즈 아홉 번째입니다. 혼자 쓸 때 깃허브는 그냥 백업이었는데, 옆 반 선생님과 같은 저장소를 쓰기 시작하면 이야기가 달라집니다. 누가 먼저 올리느냐에 따라 누군가의 작업이 사라질 수 있기 때문입니다. 클론, 브랜치, PR, 머지, 충돌, 포크, 워크트리 등 공동작업 이해에 필요한 용어를 정리했습니다. 다만 용어만 나열하지 않고, 말마다 학교에서 이미 해 보신 일로 비유를 붙이고 그 밑에 실제로 무슨 일이 일어나는지를 한 줄씩 적어 두었습니다. 저장소 하나를 공동으로 쓸 때 어떤 메커니즘으로 흘러가는지를 모식도 일곱 종으로 그렸습니다. 나와 동료가 각각 무엇을 하고 main이 언제 바뀌는지가 한 그림에 들어 있습니다. 가입과 저장소 만들기, 되돌리기는 깃허브 대백과에 있으니 그쪽을 먼저 보고 오시면 좋습니다. 도움 되시기 바라요! ────────────── 📌 수정내역 v1.0 (26.09.02) — 최초 발행