🚸 코딩스타랩 들어가기전 Part 8-1 — 학년·실력별 배우는 순서 로드맵: 명령어 정리
🚸 코딩스타랩 들어가기전 Part 8-1 — 학년·실력별 배우는 순서 로드맵: 명령어 정리 & 실전 예제편
이 문서는 Part 8 “학년·실력별 로드맵”에서 제시한 흐름을 명령어와 짧은 예제로 정리한 복습편이에요. “무엇을 먼저, 왜 그렇게?”에 집중하면서도, 실제로 손이 가는 코드로 감각을 확인합니다.
1️⃣ 로드맵 기준 — 학년 & 실력 2축
| 축 | 구분 | 핵심 목표 |
|---|---|---|
| 학년 | 초등 저학년 · 초등 고학년 · 중등 | 표현 → 논리 → 구조 |
| 실력 | 입문 · 기초 · 응용 · 프로젝트 | 패턴 익히기 → 합치기 → 완성하기 |
💡 원칙: 시각(HTML·CSS·Scratch)로 “보는 법”을 먼저 익히고,
Python/JavaScript로 “생각을 움직이는 법”을 이어 갑니다.
2️⃣ 추천 순서 — 학년·수준별 빠른 지도
초등 저학년 (입문)
ScratchHTML블록으로 반복/조건 감각을 만들고, 제목·문단·이미지처럼 화면 구조를 익혀요.
// Scratch 감각 → HTML 구조
<h1>내가 좋아하는 것</h1>
<ul><li>강아지</li><li>피자</li></ul>초등 고학년 (기초)
PythonJavaScript변수·조건·반복으로 간단한 계산/반응을 만듭니다.
# Python
x = int(input("나이? "))
print("티켓:", "청소년" if x < 19 else "일반")중등 (응용~프로젝트)
JavaScriptCanvasPython브라우저 이벤트/캔버스, 파일 나누기, 간단 로직 테스트까지.
<button id="b">0</button>
<script>let n=0; b.onclick=()=>b.textContent=++n;</script>3️⃣ 핵심 명령 패턴 — 단계별 체크
| 단계 | 핵심 패턴 | Python | JavaScript | Scratch/HTML·CSS |
|---|---|---|---|---|
| 입문 | 출력/입력 | print / input |
console.log / prompt |
[말하기]/HTML 텍스트 |
| 기초 | 조건/반복/함수 | if / for / def |
if / for / function |
[만약][반복]/나만의 블록 |
| 응용 | 이벤트/상태 | 입출력 루프, 리스트/딕셔너리 | addEventListener, DOM/Canvas |
[키 눌렀을 때]/변수 |
| 프로젝트 | 파일 분리/저장 | import, 예외 |
module, localStorage |
스테이지/스프라이트 구성 |
4️⃣ 같은 주제, 다른 난이도 — “점수 더하기”
입문 (JS DOM)
<button id="btn">0</button>
<script>
let s=0; btn.onclick=()=>{ s++; btn.textContent=s; };
</script>응용 (JS + 저장)
<button id="btn">0</button>
<script>
let s = Number(localStorage.getItem("score")||0);
btn.textContent = s;
btn.onclick=()=>{ s++; btn.textContent=s; localStorage.setItem("score",s); };
</script>Scratch: 버튼 스프라이트 클릭 → [점수 1 더하기] → [점수 말하기]
5️⃣ 반응형 예제 — “키보드로 이동”
기초 (개념/Python)
x=0
key=input("왼/오: ")
if key=="오": x+=1
if key=="왼": x-=1
print("x=",x)응용 (JS DOM)
<div id="p" style="position:relative;width:40px;height:40px;background:#93c5fd"></div>
<script>
let x=0; document.addEventListener("keydown",e=>{
if(e.key==="ArrowRight") x+=5;
if(e.key==="ArrowLeft") x-=5;
p.style.left = x+"px";
});
</script>6️⃣ 설계 습관 — 어린이식 로드맵 문장
- 보여줘 (HTML·CSS) → 제목/버튼을 만든다.
- 기억해 (변수) → 점수/위치/시간을 변수에 둔다.
- 반응해 (이벤트) → 클릭/키 입력에 반응한다.
- 반복해 (루프) → 계속 움직이고, 시간이 흐르게 한다.
- 분리해 (함수/파일) → 시작/게임/종료를 나눠 읽기 쉽게 한다.
7️⃣ 단계별 체크리스트
| 단계 | 통과 기준(예) |
|---|---|
| 입문 | 콘솔/화면에 글자를 내보낸다(출력), 질문을 받는다(입력). |
| 기초 | 조건/반복/함수로 간단한 규칙을 만든다. |
| 응용 | 이벤트로 인터랙션을 만들고 상태를 업데이트한다. |
| 프로젝트 | 파일을 나누고 저장/불러오기를 추가한다. |
8️⃣ 미니 프로젝트 세트(학년·실력 매칭)
① 클릭러(Clicker) — 초등 전학년 가능
<button id="b">0</button>
<script>let n=0; b.onclick=()=>b.textContent=++n;</script>응용: 저장/타이머/랭킹 추가
② 미로탈출 — 초등 고학년~중등
<canvas id="c" width="360" height="240" style="border:1px solid #e5e7eb"></canvas>
<script>
const cv=c.getContext("2d"); let x=20,y=20;
document.addEventListener("keydown",e=>{
if(e.key==="ArrowUp")y-=5; if(e.key==="ArrowDown")y+=5;
if(e.key==="ArrowLeft")x-=5; if(e.key==="ArrowRight")x+=5;
cv.clearRect(0,0,360,240); cv.fillRect(x,y,10,10);
});
</script>응용: 충돌/골인지점/타이머
9️⃣ 에러는 성장 지도 — 디버깅 문장 4개
- “언제부터 안 됐지?” → 문제 재현
- “어디가 실제로 실행됐지?” →
print / console.log찍기 - “한 줄에 일을 몇 개 하니?” → 줄 나누기
- “같은 일을 반복하니?” → 함수/반복으로 묶기
🔟 결론 — 로드맵은 ‘순서’가 아니라 ‘속도’
학년과 실력에 따라 속도만 다를 뿐, 패턴은 같습니다. “보여줘(HTML·CSS) → 반응해(JS/Scratch) → 생각해(Python/JS)”의 리듬을 잊지 마세요. 오늘은 버튼 하나, 내일은 작은 게임, 모레는 프로젝트가 됩니다. 🚀
Leave a Comment