← 홈

바이브코딩 250강 100 LEVEL

컴퓨터 키는 법부터 SaaS 런칭까지 — 100단계 250강 무료

📖 250강
🎯 100 레벨
⭐ 2500 XP
⏱ ~3000분
Lv 1~10
컴맹 탈출
컴퓨터·인터넷 처음 만지는 분 — 키보드부터 검색까지
★ Lv 1 마일스톤 — 컴맹 탈출 시작 · 컴퓨터·인터넷 처음 만지는 분
Lv 1 001 전원 버튼 위치와 안전한 종료 +10 XP
Lv 1 002 잠금화면과 비밀번호 입력 +10 XP
Lv 1 003 와이파이 처음 연결하기 +10 XP
Lv 2 004 클릭과 더블클릭의 차이 +10 XP
Lv 2 005 드래그와 드롭 +10 XP
Lv 2 006 스크롤과 확대·축소 +10 XP
Lv 3 007 한영 전환 — 가장 중요한 한 가지 +10 XP
Lv 3 008 한자 변환과 특수문자 +10 XP
Lv 3 009 단축키 5개만 외우면 두 배 빨라진다 +10 XP
Lv 4 010 브라우저가 뭔가요 +10 XP
Lv 4 011 주소창과 검색창의 차이 +10 XP
Lv 4 012 새 탭과 즐겨찾기 +10 XP
Lv 5 013 키워드 두 단어 조합 +10 XP
Lv 5 014 이미지·뉴스·동영상 탭 활용 +10 XP
Lv 5 015 따옴표·마이너스 검색 연산자 +10 XP
Lv 6 016 다운로드 받은 파일 어디 가나요 +10 XP
Lv 6 017 폴더 만들고 정리하기 +10 XP
Lv 6 018 실전 응용 — 다운로드와 파일 관리 +10 XP
Lv 7 019 화면 캡처 (Print Screen / Cmd+Shift+4) +10 XP
Lv 7 020 종이 인쇄와 PDF로 저장 +10 XP
Lv 8 021 비밀번호 만들 때 지킬 3가지 +10 XP
Lv 8 022 비밀번호 매니저 (Bitwarden 무료) +10 XP
Lv 8 023 2단계 인증 켜기 +10 XP
Lv 9 024 수상한 링크 구별법 +10 XP
Lv 9 025 공공 와이파이 안전 사용 +10 XP
Lv 9 026 흔한 실수 모음 — 안전한 인터넷 +10 XP
Lv 10 027 Lv 10 점검 — 컴맹 탈출 체크리스트 +10 XP
Lv 10 028 궁금한 게 있을 때 어디서 찾나 +10 XP
Lv 11~20
디지털 시민
메일·문서·일정·메신저 자유자재로 다루기
Lv 11 029 구글 계정 만들기 +10 XP
Lv 11 030 첫 메일 보내기와 답장 +10 XP
Lv 11 031 한 번 더 다지기 — Gmail 만들고 첫 메일 +10 XP
Lv 12 032 첨부파일 주고받기 +10 XP
Lv 12 033 스팸·필터·라벨 +10 XP
Lv 13 034 첫 문서 만들고 공유하기 +10 XP
Lv 13 035 실시간 협업과 댓글 +10 XP
Lv 13 036 체크리스트 — 구글 문서(Docs) +10 XP
Lv 14 037 셀·행·열의 정체 +10 XP
Lv 14 038 표로 가게 매출 정리하기 +10 XP
Lv 15 039 파일 업로드와 폴더 공유 +10 XP
Lv 15 040 공유 링크 권한 설정 +10 XP
Lv 16 041 첫 일정 등록과 알림 +10 XP
Lv 16 042 일정 공유와 회의 링크 +10 XP
Lv 16 043 심화 연습 — 캘린더 일정 관리 +10 XP
Lv 17 044 Zoom과 Google Meet의 차이 +10 XP
Lv 17 045 카메라·마이크 안 켜질 때 +10 XP
Lv 18 046 카카오톡 PC 연동 +10 XP
Lv 18 047 슬랙(Slack) 첫 워크스페이스 +10 XP
Lv 18 048 실전 응용 — 메신저와 협업 도구 +10 XP
Lv 19 049 첫 페이지와 블록 개념 +10 XP
Lv 19 050 할 일과 메모를 한 곳에 +10 XP
Lv 20 051 Lv 20 체크포인트 +10 XP
Lv 20 052 앞으로 1주일 디지털 루틴 +10 XP
Lv 20 053 흔한 실수 모음 — 디지털 시민 졸업 점검 +10 XP
Lv 21~30
AI 첫 만남
ChatGPT·Claude·Gemini 일상 사용
Lv 21 054 AI·머신러닝·생성형 AI 차이 +10 XP
Lv 21 055 ChatGPT·Claude·Gemini 한 줄 소개 +10 XP
Lv 22 056 ChatGPT 무료 가입 +10 XP
Lv 22 057 무료 vs 유료(Plus) 차이 +10 XP
Lv 22 058 한 번 더 다지기 — ChatGPT 회원가입과 첫 사용 +10 XP
Lv 23 059 Claude 가입과 한국어 강점 +10 XP
Lv 23 060 긴 문서 다루기 — Claude의 무기 +10 XP
Lv 24 061 Gemini 무료 사용 +10 XP
Lv 24 062 실생활 AI — Gmail·문서에 이미 들어있다 +10 XP
★ Lv 25 마일스톤 — 디지털 시민 합격 · 메일·문서·AI 도구 자유롭게
Lv 25 063 하루 5번 AI 질문 챌린지 +10 XP
Lv 25 064 Lv 25 점검 — AI 손에 익었나 +10 XP
Lv 25 065 체크리스트 — ★ 디지털 시민 합격 — AI 일상화 +10 XP
Lv 26 066 한국어로 묻기 vs 영어로 묻기 +10 XP
Lv 26 067 존댓말과 반말 — AI 톤 조절 +10 XP
Lv 27 068 긴 글 3줄 요약 시키기 +10 XP
Lv 27 069 번역 — DeepL과 AI 비교 +10 XP
Lv 27 070 심화 연습 — 요약·번역·재작성 +10 XP
Lv 28 071 공식 메일 초안 부탁하기 +10 XP
Lv 28 072 SNS 글 30개 한 번에 만들기 +10 XP
Lv 29 073 음성으로 AI에게 말하기 +10 XP
Lv 29 074 이미지 보여주고 질문하기 +10 XP
Lv 29 075 실전 응용 — 음성과 이미지 +10 XP
Lv 30 076 DALL-E·Midjourney·이미지 생성 비교 +10 XP
Lv 30 077 프롬프트로 그림 만들기 +10 XP
Lv 31~40
프롬프트 패턴
프롬프트 엔지니어링의 기본기 다지기
Lv 31 078 역할·맥락·지시·형식 +10 XP
Lv 31 079 빠뜨리면 결과가 망가지는 항목 +10 XP
Lv 32 080 "당신은 ~입니다" 패턴 +10 XP
Lv 32 081 역할로 답변 톤 바꾸기 +10 XP
Lv 32 082 흔한 실수 모음 — 역할 부여 (Persona) +10 XP
Lv 33 083 표·리스트·JSON으로 받기 +10 XP
Lv 33 084 글자 수·문장 수 제한 +10 XP
Lv 34 085 "단계별로 생각해줘"의 위력 +10 XP
Lv 34 086 중간 결과 보여 달라고 하기 +10 XP
Lv 34 087 한 번 더 다지기 — 단계별 사고 (Chain of Thought) +10 XP
Lv 35 088 예시 3개 보여주고 패턴 시키기 +10 XP
Lv 35 089 실전 — 메일 답장 패턴 학습 +10 XP
Lv 36 090 세션 전체에 걸리는 룰 +10 XP
Lv 36 091 Claude Project / GPTs / Gem +10 XP
Lv 36 092 체크리스트 — 시스템 프롬프트 +10 XP
Lv 37 093 파일 업로드와 RAG 개념 +10 XP
Lv 37 094 요약 → 분석 → 인사이트 흐름 +10 XP
Lv 38 095 질문을 쪼개서 단계별로 +10 XP
Lv 38 096 "내가 더 좋게 만들어줘" +10 XP
Lv 38 097 심화 연습 — 멀티턴 대화 설계 +10 XP
Lv 39 098 반복 작업을 템플릿으로 +10 XP
Lv 39 099 업무별 템플릿 라이브러리 +10 XP
Lv 40 100 Notion으로 프롬프트 큐레이션 +10 XP
Lv 40 101 공개 라이브러리에서 배우기 +10 XP
Lv 40 102 Lv 40 점검 — 프롬프트 자유자재 +10 XP
Lv 41~50
★ 첫 사이트 만들기
식당 아저씨도 자기 가게 사이트를 가질 수 있다
Lv 41 103 세 가지 방식의 차이 +10 XP
Lv 41 104 v0 / Lovable / Bolt 첫 인상 +10 XP
Lv 42 105 v0 가입과 첫 화면 +10 XP
Lv 42 106 한 줄 명령으로 페이지 만들기 +10 XP
Lv 42 107 실전 응용 — v0.dev 첫 시도 +10 XP
Lv 43 108 Lovable로 회원가입까지 있는 앱 +10 XP
Lv 43 109 Bolt.new — 빠른 프로토타입 +10 XP
Lv 44 110 색상·폰트·여백 명령 +10 XP
Lv 44 111 모바일에서도 예쁘게 +10 XP
Lv 44 112 흔한 실수 모음 — 디자인 다듬기 +10 XP
Lv 45 113 가게 사진 업로드 +10 XP
Lv 45 114 Unsplash·Pexels 무료 이미지 +10 XP
Lv 46 115 상호·주소·전화 섹션 +10 XP
Lv 46 116 메뉴 항목과 가격 표기 +10 XP
Lv 46 117 후기와 SNS 연동 +10 XP
Lv 47 118 도메인의 정체와 가격 +10 XP
Lv 47 119 좋은 도메인 고르는 5가지 +10 XP
Lv 47 120 한 번 더 다지기 — 도메인이 뭐길래 +10 XP
Lv 48 121 가비아 회원가입과 결제 +10 XP
Lv 48 122 Cloudflare Registrar — 해외 옵션 +10 XP
Lv 49 123 Vercel 가입과 v0 연동 +10 XP
Lv 49 124 커스텀 도메인 연결 +10 XP
★ Lv 50 마일스톤 — ★ 식당 아저씨 졸업식 · 내 가게 사이트를 직접 배포한 사람
Lv 50 125 Lv 50 마일스톤 점검 +10 XP
Lv 50 126 손님에게 사이트 알리기 +10 XP
Lv 50 127 ★ 다음 단계 — 51강부터는 운영의 세계 +10 XP
Lv 51~60
사이트 운영
GA·SEO·결제·뉴스레터 — 운영자 마인드
Lv 51 128 GA4 가입과 측정 ID 부착 +10 XP
Lv 51 129 실시간 보고서 보기 +10 XP
Lv 51 130 체크리스트 — 구글 애널리틱스 4 (GA4) +10 XP
Lv 52 131 Google Search Console +10 XP
Lv 52 132 네이버 서치어드바이저 +10 XP
Lv 53 133 카카오 비즈니스 가입 +10 XP
Lv 53 134 알림톡과 친구톡 차이 +10 XP
Lv 53 135 심화 연습 — 카카오톡 채널 연동 +10 XP
Lv 54 136 제목 태그와 메타 설명 +10 XP
Lv 54 137 스키마 마크업 — 검색에 별점·이미지 +10 XP
Lv 55 138 손가락 터치 영역 44x44 +10 XP
Lv 55 139 로딩 속도 — 모바일이 더 어렵다 +10 XP
Lv 55 140 실전 응용 — 모바일 최적화 +10 XP
Lv 56 141 v0/Vercel 자동 버전관리 +10 XP
Lv 56 142 DB 데이터 백업 (Supabase) +10 XP
Lv 57 143 Vercel 자동 SSL +10 XP
Lv 57 144 HTTPS 안 되면 검색에서 빠진다 +10 XP
Lv 57 145 흔한 실수 모음 — SSL과 HTTPS +10 XP
Lv 58 146 토스페이먼츠 가입 +10 XP
Lv 58 147 결제 위젯 붙이기 (v0/Stripe 비교) +10 XP
Lv 59 148 Stibee 가입과 첫 발송 +10 XP
Lv 59 149 구독 폼을 사이트에 붙이기 +10 XP
Lv 60 150 예약·구독·광고 — 3가지 길 +10 XP
Lv 60 151 Lv 60 점검 — 운영자 마인드 +10 XP
Lv 60 152 한 번 더 다지기 — 첫 수익화 모델 +10 XP
Lv 61~70
HTML / CSS
웹페이지의 골격과 디자인을 직접 손으로
Lv 61 153 웹페이지의 골격 언어 +10 XP
Lv 61 154 첫 HTML 파일 만들기 +10 XP
Lv 62 155 열기·닫기 태그의 짝 +10 XP
Lv 62 156 속성 — class·id·href +10 XP
Lv 62 157 체크리스트 — 태그와 속성 +10 XP
Lv 63 158 ~··<a> +10 XP
Lv 63 159 목록 — ·· +10 XP
Lv 64 160 +10 XP
Lv 64 161 · +10 XP
Lv 64 162 심화 연습 — 이미지와 동영상 +10 XP
Lv 65 163 HTML과 CSS의 분업 +10 XP
Lv 65 164 선택자 종류 5가지 +10 XP
Lv 66 165 hex·rgb·hsl +10 XP
Lv 66 166 웹 폰트와 한글 +10 XP
Lv 67 167 margin·border·padding·content +10 XP
Lv 67 168 display 속성 +10 XP
Lv 67 169 실전 응용 — 박스 모델 +10 XP
Lv 68 170 display: flex 첫 사용 +10 XP
Lv 68 171 flex-grow·shrink·basis +10 XP
Lv 69 172 CSS Grid 첫 시도 +10 XP
Lv 69 173 갤러리·카드 레이아웃 +10 XP
Lv 69 174 흔한 실수 모음 — Grid 레이아웃 +10 XP
Lv 70 175 미디어쿼리 @media +10 XP
Lv 70 176 Lv 70 점검 — 손으로 디자인 가능 +10 XP
Lv 71~80
JavaScript
프로그래밍 언어와 친해지기
Lv 71 177 와 console.log +10 XP
Lv 71 178 주석과 세미콜론 +10 XP
Lv 71 179 한 번 더 다지기 — 자바스크립트 첫 줄 +10 XP
Lv 72 180 let·const·var +10 XP
Lv 72 181 숫자·문자열·boolean·null·undefined +10 XP
Lv 73 182 function 키워드와 화살표 +10 XP
Lv 73 183 매개변수와 반환값 +10 XP
Lv 73 184 체크리스트 — 함수 +10 XP
Lv 74 185 if·else·else if +10 XP
Lv 74 186 삼항 연산자와 switch +10 XP
★ Lv 75 마일스톤 — 코드 읽고 쓰기 · HTML/CSS/JS를 자기 손으로
Lv 75 187 for·while·do-while +10 XP
Lv 75 188 for...of·forEach·map +10 XP
Lv 76 189 배열 만들고 접근 +10 XP
Lv 76 190 push·pop·slice·splice +10 XP
Lv 76 191 filter·map·reduce +10 XP
Lv 77 192 키·값·중첩 +10 XP
Lv 77 193 구조 분해 할당 +10 XP
Lv 77 194 심화 연습 — 객체 +10 XP
Lv 78 195 querySelector와 textContent +10 XP
Lv 78 196 요소 추가·삭제·이동 +10 XP
Lv 79 197 addEventListener +10 XP
Lv 79 198 이벤트 전파와 위임 +10 XP
Lv 79 199 실전 응용 — 이벤트 +10 XP
Lv 80 200 콜백 지옥에서 Promise로 +10 XP
Lv 80 201 async/await 패턴 +10 XP
Lv 81~90
API · DB · 인증
백엔드의 절반을 익히는 단계
Lv 81 202 API의 정의 +10 XP
Lv 81 203 공개 API 5개 둘러보기 +10 XP
Lv 81 204 흔한 실수 모음 — API란 뭐길래 +10 XP
Lv 82 205 fetch 기본 사용 +10 XP
Lv 82 206 CORS 에러 — 가장 자주 막히는 벽 +10 XP
Lv 83 207 JSON.parse·JSON.stringify +10 XP
Lv 83 208 중첩 JSON 깊은 곳 꺼내기 +10 XP
Lv 84 209 GET·POST·PUT·DELETE +10 XP
Lv 84 210 상태코드 200·201·400·404·500 +10 XP
Lv 84 211 한 번 더 다지기 — REST의 메서드 +10 XP
Lv 85 212 관계형 vs NoSQL +10 XP
Lv 85 213 CRUD의 정체 +10 XP
Lv 86 214 SELECT·WHERE·ORDER BY +10 XP
Lv 86 215 JOIN으로 테이블 연결 +10 XP
Lv 86 216 체크리스트 — SQL 기초 +10 XP
Lv 87 217 Supabase 가입과 프로젝트 생성 +10 XP
Lv 87 218 Auth·DB·Storage 한 곳에 +10 XP
Lv 88 219 컬럼·타입·기본값 +10 XP
Lv 88 220 외래 키와 인덱스 +10 XP
Lv 88 221 심화 연습 — 테이블 만들기 +10 XP
Lv 89 222 OAuth가 뭐길래 +10 XP
Lv 89 223 Supabase Auth 한 번에 +10 XP
Lv 90 224 내 데이터만 보이게 +10 XP
Lv 90 225 Lv 90 점검 — 풀스택 손맛 +10 XP
Lv 90 226 실전 응용 — Row Level Security +10 XP
Lv 91~100
★ 모던 풀스택 — 프로그래머
React · Next.js · Git · CI/CD · SaaS 런칭
Lv 91 227 컴포넌트의 정체 +10 XP
Lv 91 228 State와 useState +10 XP
Lv 92 229 useEffect 기본 패턴 +10 XP
Lv 92 230 커스텀 훅 만들기 +10 XP
Lv 93 231 App Router 구조 +10 XP
Lv 93 232 Server vs Client Components +10 XP
Lv 93 233 흔한 실수 모음 — Next.js 라우팅 +10 XP
Lv 94 234 TailwindCSS 클래스 기반 +10 XP
Lv 94 235 shadcn/ui 컴포넌트 +10 XP
Lv 95 236 react-hook-form + zod +10 XP
Lv 95 237 에러 바운더리와 모니터링 +10 XP
Lv 95 238 한 번 더 다지기 — 폼·검증·에러 +10 XP
Lv 96 239 git init·add·commit +10 XP
Lv 96 240 Branch와 GitHub Push +10 XP
Lv 97 241 PR 만들고 머지하기 +10 XP
Lv 97 242 리뷰 코멘트 잘 받기·잘 주기 +10 XP
Lv 97 243 체크리스트 — Pull Request와 코드 리뷰 +10 XP
Lv 98 244 actions/workflow 첫 설정 +10 XP
Lv 98 245 Vercel 자동 배포 +10 XP
Lv 99 246 좋은 첫 이슈 찾기 +10 XP
Lv 99 247 첫 PR 머지되기까지 +10 XP
★ Lv 100 마일스톤 — ★ 프로그래머 도착 · SaaS 런칭 후 첫 매출까지
Lv 100 248 아이디어 검증과 MVP 정의 +10 XP
Lv 100 249 결제·법적 책임·약관 +10 XP
Lv 100 250 ★ Lv 100 — 프로그래머 도착 +10 XP
Made by