OPEN HYPER STEP
← 홈으로
🔰 BEGINNER GUIDE

처음 시작하는 분을
위한 6주 로드맵

"외우지 말고, 이해하고, 바로 만드세요"

── SECTION 01 ──

코딩은 외우는 게 아닙니다

많은 분들이 코딩을 시작할 때 모든 문법을 다 외우려고 합니다.
HTML 태그 외우고, CSS 속성 외우고, JavaScript 메서드 외우고...

그러다 6개월이 지나도 아무것도 못 만들고 포기합니다.

OPEN HYPER STEP의 방식은 다릅니다
✅이론은 "이런 게 있구나" 수준으로만
✅막히면 그때 찾아보면 됩니다
✅프로젝트를 만들면서 자연스럽게 익힙니다

의사도 의학책을 다 외우지 않습니다. 필요할 때 찾아보면서 치료합니다. 개발도 마찬가지입니다.

── SECTION 02 ──

이 순서로 따라오세요

1주차HTML5 기초
할 것
→ HTML5 Ch.1~8 — DOCTYPE, 시맨틱 태그, 텍스트 요소, 폼 기초
핵심
→ 웹 페이지의 뼈대를 이해한다
→ 태그는 의미를 담는 그릇이다
→ 외울 필요 없음, 흐름만
2주차HTML5 완성 + CSS3 시작
할 것
→ HTML5 Ch.9~15 — 멀티미디어, 폼 검증, 로컬스토리지
→ CSS3 Ch.1~5 — 박스모델, 선택자
핵심
→ HTML 전 챕터 완료 체크
→ CSS 레이아웃 원리 첫 접촉
3주차CSS3 완성
할 것
→ CSS3 Ch.6~30 — Flexbox, Grid, 애니메이션, 반응형
핵심
→ 레이아웃을 자유롭게 구성한다
→ 모바일/데스크탑 양쪽 대응
4주차JavaScript 기초
할 것
→ JS Ch.1~12 — 변수, 함수, 조건문, 반복문, DOM 조작
핵심
→ 버튼 클릭에 반응하는 페이지
→ 데이터를 저장하고 꺼낸다
5~6주차JavaScript 완성 + React 입문
할 것
→ JS Ch.13~30 — 비동기, API, ES6+
→ React Ch.1~5 — 컴포넌트, props, state
핵심
→ 외부 데이터(날씨, 뉴스) 불러오기
→ React의 왜 필요한지 체감
── SECTION 03 ──

지금 바로 시작하는 Todo 앱

아래 순서대로 따라하면 오늘 안에 첫 앱 완성 가능합니다.

Step 1환경 준비 (5분)

GitHub Codespaces — 로컬 설치 없이 브라우저에서 바로 시작

# Next.js 프로젝트 생성
npx create-next-app@latest my-todo-app
cd my-todo-app
npm run dev
Step 2AI에게 시작 요청 (1분)

Gemini 또는 Claude에 아래 프롬프트 붙여넣기

나는 코딩을 처음 배우는 초보자야.
Next.js 14로 Todo 앱을 만들고 싶어.

기능:
- 할일 추가
- 완료 체크
- 삭제

Tailwind CSS로 깔끔하게
초보자도 이해할 수 있게 주석 달아서
코드 작성해줘.
Step 3코드 적용 & 실행

AI가 만든 코드를 복붙 → 실행 확인

npm run dev
# → http://localhost:3000 에서 확인
Step 4기능 추가해보기

여기서 실력이 성장합니다

"마감일 추가 기능 넣어줘"
"완료된 항목 숨기기 버튼 추가해줘"
"로컬스토리지에 저장하게 해줘"
Step 5Vercel 배포 (5분)

전 세계 접속 가능한 나만의 앱 완성

npm install -g vercel
vercel
# → https://my-todo-app-xxxx.vercel.app
── SECTION 04 ──

자주 하는 실수 3가지

❌ 다 외우려 한다
→나중에 필요할 때 찾으면 됩니다. HTML 속성 300개 외우는 사람은 없어요.
❌ 완벽한 코드를 쓰려 한다
→일단 작동하면 됩니다. 완벽은 나중에 — 동작하는 코드가 항상 우선입니다.
❌ 혼자 너무 오래 고민한다
→30분 막히면 AI에게 물어보세요. 검색과 질문이 개발자의 핵심 역량입니다.
HTML5 챕터 1 시작하기 →