읽고, 풀고, 레벨을 올립니다.

1

AI 도구 지도 그리기 CH1

Claude, ChatGPT, Gemini, Cursor의 역할을 구분하고 상황에 맞게 고르는 법을 익힙니다.

+80 XP ⏱ 8분

→

2

첫 프롬프트 작성법 CH2

머릿속 의도를 AI가 알아듣는 구체적인 지시로 바꾸는 방법을 배웁니다.

+95 XP ⏱ 9분

→

3

터미널 기초 명령 8개 CH3

폴더를 이동하고 만들고 살펴보는 핵심 터미널 명령 8개를 익힙니다.

+120 XP ⏱ 11분

→

4

HTML 구조 읽기 CH4

태그와 중첩 구조를 이해하고 AI가 만든 HTML 코드를 읽는 눈을 기릅니다.

+110 XP ⏱ 10분

→

5

CSS로 색과 모양 입히기 CH5

HTML 뼈대에 색·여백·글꼴을 입히는 CSS의 규칙 구조와 선택자, 자주 쓰는 속성을 익힙니다.

+115 XP ⏱ 10분

→

6

브라우저 개발자도구 첫걸음 CH6

F12 개발자도구의 Elements·Console·Network 패널로 페이지를 들여다보고 문제를 찾는 법을 익힙니다.

+100 XP ⏱ 9분

→

7

첫 사이트 배포하기 CH7

Netlify Drop이나 Cloudflare Pages로 내 HTML을 인터넷에 공개하는 법을 배웁니다.

+140 XP ⏱ 12분

→

1

디자인 토큰 이해 CH1

색, 타이포, 간격을 흩어진 값이 아니라 이름 붙은 시스템으로 다루는 법을 배웁니다.

+130 XP ⏱ 10분

→

2

타이포그래피 — 글꼴과 위계 CH2

글꼴 선택, 크기·굵기로 만드는 위계, 줄 간격과 줄 길이 등 글을 읽기 좋게 만드는 원칙을 익힙니다.

+130 XP ⏱ 10분

→

3

색·대비·접근성 CH3

60-30-10 색 배분, 글자와 배경의 대비, 그리고 누구나 읽을 수 있게 만드는 접근성 원칙을 익힙니다.

+135 XP ⏱ 10분

→

4

Tailwind 시작하기 CH4

유틸리티 클래스로 HTML에서 바로 스타일을 입히는 Tailwind의 작동 방식을 익힙니다.

+140 XP ⏱ 11분

→

5

Flexbox와 Grid 레이아웃 CH5

한 줄 정렬에 강한 Flexbox와 격자 배치에 강한 Grid의 차이와, 가운데 정렬 같은 핵심 패턴을 익힙니다.

+150 XP ⏱ 12분

→

6

컴포넌트로 분리하기 CH6

버튼, 카드, 네비처럼 반복되는 묶음을 재사용 단위로 떼어 내 관리하는 법을 배웁니다.

+150 XP ⏱ 11분

→

7

반응형 레이아웃 CH7

모바일을 기본으로 두고 화면이 넓어질 때 단계적으로 펼치는 모바일 우선 설계를 익힙니다.

+160 XP ⏱ 12분

→

1

Git 버전관리 기초 CH1

commit으로 작업을 저장하고, push로 공유하고, 실수를 안전하게 되돌리는 흐름을 익힙니다.

+180 XP ⏱ 14분

→

2

서버와 백엔드의 개념 CH2

프론트엔드와 백엔드의 역할, 요청-응답과 HTTP 메서드, 라우팅, 그리고 서버를 신뢰의 경계로 두는 이유를 익힙니다.

+175 XP ⏱ 12분

→

3

API 호출 기초 CH3

fetch로 서버에서 데이터를 받아오고, JSON을 다루고, API 키를 안전하게 보관하는 기본기를 익힙니다.

+190 XP ⏱ 14분

→

4

데이터베이스 입문 CH4

테이블 개념과 CRUD(생성·조회·수정·삭제)를 MariaDB의 SQL 예시로 익힙니다.

+200 XP ⏱ 15분

→

5

폼과 사용자 입력 다루기 CH5

form과 input의 구조, label 연결, 그리고 클라이언트·서버 2단계 검증과 입력을 항상 의심해야 하는 이유를 익힙니다.

+185 XP ⏱ 13분

→

6

로그인·세션·인증 기초 CH6

인증과 인가의 차이, 비밀번호 해시 저장, 세션과 쿠키, 그리고 HTTPS·서버측 권한 검증의 필요성을 익힙니다.

+200 XP ⏱ 14분

→

7

AI와 함께 디버깅 CH7

에러 메시지를 제대로 읽고, 문제를 재현하고, AI에게 답을 끌어내는 질문법을 익힙니다.

+170 XP ⏱ 13분

→