2026년도 “문법 공부” 중심보다 “프로젝트 게임처럼 레벨업” 방식

JavaScript RPG 방식 (추천)

LV1. 움직이는 화면 만들기 (재미 구간)

목표:

“오~ 웹페이지가 움직이네?”

만드는 것

1. 글자 바꾸기
2. 버튼 누르면 색 바뀌기
3. 다크모드
4. 랜덤 명언
5. 부산 오늘 뭐하지 랜덤 추천기

배우는 개념:

querySelector
innerText
style
classList
onclick
Math.random()

 

재미도: ⭐⭐⭐⭐⭐

---

LV2. 카드 UI 생성기 (실무 연결 시작)

목표:

“내가 회원관리 만드는 느낌인데?”

만드는 것

1. 회원 카드 생성기 ← 지금 여기
2. 골프 회원 카드
3. 유튜브 영상 카드
4. AI 툴 카드 리스트
5. 부산 맛집 카드

배우는 개념:

배열
객체
반복문
함수
DOM 생성
createElement
append

 

예:

 

users[i]

 

이 순간 실무 느낌 남.

재미도: ⭐⭐⭐⭐⭐

---

LV3. 실제 프로그램 느낌

목표:

“어? 진짜 프로그램 같은데?”

만드는 것

1. 출석부 앱
2. 회원 추가 삭제
3. Todo 리스트
4. 골프 스코어 카드
5. 게시판 리스트

배우는 개념:

input
value
push()
filter()
조건문
이벤트

 

재미도: ⭐⭐⭐⭐

---

LV4. 저장 기능 (진짜 재밌어짐)

목표:

“닫아도 데이터 살아있네?”

만드는 것

1. 회원관리 저장
2. Todo 저장
3. 골프 점수 저장

배우는 것:

localStorage
JSON

 

이때 갑자기 프로그램 느낌 강해짐.

재미도: ⭐⭐⭐⭐⭐

---

LV5. 포트폴리오형 프로젝트

목표:

“취업/창업용 작품”

커사맨 기준 추천:

A. 부산 50대 배움 커뮤니티

기능:

• 회원 카드
• 모임 리스트
• 일정
• 후기

---

B. 부산 오늘 뭐하지?

기능:

• 랜덤 추천
• 카테고리
• 카드 UI
• 저장

---

C. BJ 골프 커뮤니티

(이미 하고 있음)

기능:

• 회원
• 스코어
• 모임
• 게시판

---

제일 중요한 규칙

1. 20분 문법 → 80분 만들기

❌ 문법만 보기

for문 공부
객체 공부
함수 공부

 

재미 없음.

⭕ 바로 연결

for문 → 회원 목록 만들기
객체 → 회원 데이터 만들기
함수 → 회원 카드 함수 만들기

 

---

2. “한 화면 완성” 습관

예:

오늘 목표:

회원 카드 UI 하나 완성

 

끝.

내일:

추가 버튼 만들기

 

이렇게.

---

3. 내가 좋아하는 소재 사용

커사맨은 관심사가 명확함.

• 부산
• 골프
• 배움
• 커뮤니티
• AI
• 유튜브

그러면 예제도 이렇게 바꿔.

❌ 학생 이름

 

홍길동
김철수

 

⭕ 내 관심사

 

스크린 골프 회원
부산 맛집
AI 툴
50대 배움 모임

 

재미가 달라짐.

---

커사맨 기준으로 보면 지금 다음 루트가 제일 재밌을 가능성 높아:

회원 카드 생성기
↓
회원 추가 버튼
↓
회원 삭제
↓
검색
↓
정렬
↓
localStorage 저장
↓
회원관리 앱

 

이렇게 가면 학원 과제 + 포트폴리오 + 실제 서비스 감각이 한 번에 연결돼.
그리고 어느 순간:

“아 이게 게시판 구조구나”

느낌이 갑자기 온다.