파이썬 및 자바스크립트 웹서비스 개발 과정

미래산업과학고등학교에서 진행한 파이썬 및 자바스크립트 웹 서비스 개발 과정. 고등학생 대상 실습 중심 / 5개 모듈 / AI 페어 프로그래밍 기반.

안녕하세요, 권앤컴퍼니의 권기현입니다. 이번에는 미래산업과학고등학교에서 진행한 파이썬 및 자바스크립트 웹 서비스 개발 과정을 소개하려고 합니다. 어떻게 설계했고, 어떤 흐름으로 언어 기초부터 웹 서비스 발표까지 이어졌는지에 대한 기록입니다.

고등학교 코딩 과정을 검토하고 계신 선생님이나 담당자분이 이 페이지에 도착하셨다면, 다음과 같은 고민을 갖고 계실 가능성이 높습니다.

학생들이 처음 코드를 만지자마자 문법 오류에 막혀 흥미를 잃습니다.

한 학기 안에 백엔드부터 프론트엔드까지 풀사이클을 한 번이라도 끝내는 경험을 만들어주고 싶습니다.

AI 도구를 어디까지 학생에게 허용해야 학습이 무너지지 않을지 기준이 없습니다.

이 과정은 위 세 가지 질문에 대한 답을 5개 모듈로 정리해 드리는 학습 과정으로 설계되었습니다.

한 줄 요약

문법을 외우는 시간 대신, 학생이 직접 만든 웹 서비스를 발표 자료에 띄울 수 있는 상태까지 데려가는 과정으로 설계했습니다.

5개 모듈로 나누어 진행했습니다

1. 언어 기초 — Python과 JavaScript를 같은 시간에 배우는 이유

두 언어를 같이 배우면 헷갈리지 않을까라는 질문을 첫날 가장 많이 받았습니다. 결과적으로는 반대였습니다. 두 언어를 비교하면서 "문법은 다르지만 같은 일을 한다"는 감각을 빠르게 잡을 수 있었기 때문이라고 생각합니다.

이 모듈에서는 다음 내용을 학습 시나리오에 묶어 다룹니다.

• 변수, 조건문, 반복문 같은 핵심 문법을 두 언어에서 동일한 예제로 비교
• 함수와 리턴값의 의미를 손으로 그려가며 추적하는 디버깅 패턴
• 파일 입출력과 모듈 임포트 — 다음 모듈로 넘어가는 데 필요한 최소 단위
• 문법 오류 메시지를 읽는 법 — 빨간 글씨에 막히지 않도록

2. AI 페어 프로그래밍 — 문법보다 의도를 먼저 적는 습관

AI에게 너무 많이 물어보면 실력이 안 늘 것 같다는 우려가 있을 수 있습니다. 그래서 이 모듈은 "답을 받는 법"이 아니라 "무엇을 만들지 한국어로 정확히 적는 법"부터 시작합니다.

이 모듈에서는 다음 내용을 다룹니다.

• Cursor 같은 AI IDE에서 의도를 한국어로 적고 결과를 검증하는 흐름
• 코드를 한 줄씩 따라 읽으며 "왜 이렇게 짰는지"를 본인 언어로 다시 설명하는 연습
• AI가 만든 코드의 오류를 직접 고치는 디버깅 체크리스트
• GPT, Claude, Gemini, Grok, 추론 모델 중 무엇을 어떤 작업에 쓸지 정리

3. 자료구조 — 작은 데이터를 손으로 다루는 시간

자료구조는 어렵다는 인식이 있지만, 학생들이 매일 쓰는 메신저나 게임 화면에 이미 배열과 객체가 들어있습니다. 그 화면을 다시 그려보는 시간으로 진행됩니다.

이 모듈에서는 다음 내용을 다룹니다.

• 배열, 객체, 딕셔너리 — 화면 한 장을 데이터로 표현하는 연습
• 리스트 정렬과 필터 — 친구 목록·게시글 정렬 같은 작은 예제
• JSON 구조 — 백엔드와 프론트엔드 사이에서 데이터가 흐르는 형식

4. 웹 서비스 풀사이클 — 백엔드와 프론트엔드를 한 번에 연결

한 학기 안에 풀사이클을 끝낸다는 목표가 가장 부담되는 모듈입니다. 그래서 작은 단위로 잘라, 매 차시마다 "오늘 동작하는 한 부분"을 남기도록 진행됩니다.

이 모듈에서는 다음 내용을 다룹니다.

• Python 기반 간단한 백엔드 API 만들기 — 입력과 출력 한 쌍을 먼저
• JavaScript 기반 프론트엔드 화면 — 백엔드 API를 호출해 결과 표시
• 로컬 환경 세팅과 간단한 배포 흐름 — 발표 때 다른 사람도 볼 수 있는 상태까지
• 버그가 났을 때 어디서부터 살펴볼지 — 프론트엔드 / 네트워크 / 백엔드 순서

5. 프로젝트 발표 — 본인이 만든 결과물을 본인 언어로 설명

마지막 모듈은 코드를 더 짜는 시간이 아니라, "내가 무엇을 왜 만들었는지"를 본인 언어로 정리하는 시간입니다. 이 시간이 그 학기에 배운 내용을 본인의 것으로 만들어주는 단계라고 생각합니다.

이 모듈에서는 다음 내용을 다룹니다.

• 기획서 한 장 — 누구를 위해, 어떤 문제를, 어떻게 풀었는지
• 시연 시나리오 — 5분 안에 핵심 동작을 보여주는 흐름
• 피드백 회고 — 다음 학기 또는 진학에 가져갈 한 가지

이런 분께 추천드립니다

• 한 학기 안에 풀사이클 결과물까지 학생이 가져가도록 설계하고자 하는 고등학교 정보 교과 담당 선생님
• AI 도구를 학생에게 허용하는 기준을 정리하고자 하는 학교 교육과정 운영진
• 수강생의 진학·취업 포트폴리오에 들어갈 결과물을 만들고자 하는 진로진학 담당 선생님

특히 특성화고·마이스터고 환경에서, 학생이 산업체 면접·진학 포트폴리오에 가지고 갈 수 있는 결과물을 한 학기 안에 만들고자 하는 담당자분께 가장 큰 시간 절약이 됩니다.

다음 단계

학교 일정에 맞춰 한 학기 정규 과정으로 그대로 진행하실 수도 있고, 동아리·방과후 단위의 압축본으로 시작하셔서 차수를 늘려가시는 것도 가능합니다.

가장 빠른 길은 학교 상황과 가능한 일정을 메일로 보내주시는 것입니다. 24시간 안에 비슷한 사례 2-3건과 견적 초안을 함께 회신드리겠습니다.

→ 상담 문의 보내기 | 강의 카탈로그 PDF 받기

교육과정 결재 라인에 공유해야 하시는 경우, 카탈로그 PDF를 먼저 받아두시는 편이 편리합니다.

Tags