Node.js 웹 서비스 개발 과정

세명컴퓨터고등학교에서 진행한 Node.js 웹 서비스 개발 과정. 고등학생 대상 실습 중심 / 5개 모듈 / AI 페어 프로그래밍 기반.

세명컴퓨터고 과정은 학생들이 Node.js 웹 서비스를 직접 만들어보며 개발의 전체 흐름을 경험하도록 설계했습니다. AI 페어 프로그래밍을 활용했지만, 목표는 코드를 대신 써주는 도구가 아니라 학생이 구조를 이해하고 자기 서비스를 완성하는 경험이었습니다.

학생 과정에서는 짧은 시간 안에 성취감을 느끼는 구조가 중요합니다. 문법 설명만 길어지면 흥미가 떨어지고, 반대로 AI에만 기대면 학습이 남지 않습니다.

백엔드와 프론트엔드를 따로 가르치다 보니 학생이 두 세계를 연결하는 감각을 끝내 못 잡습니다.

Node.js로 한 학기 안에 풀스택 한 사이클을 한 번이라도 끝내는 경험을 만들어주고 싶습니다.

AI 도구를 학생에게 허용하는 기준이 학교마다 달라 일관된 운영이 어렵습니다.

그래서 이 과정은 작은 기능을 만들고, 고치고, 배포 관점까지 연결하는 프로젝트형 흐름으로 구성했습니다.

교육 설계에서 중요했던 지점

고등학생이 AI 페어 프로그래밍을 활용해 Node.js 웹 서비스의 구조와 구현 흐름을 경험하는 실습 과정입니다.

커리큘럼은 이렇게 풀었습니다

1. JavaScript 기초 — 한 언어로 양쪽을 다 다루는 출발점

Node.js의 가장 큰 장점은 한 언어로 백엔드와 프론트엔드를 같이 다룰 수 있다는 점입니다. 그래서 첫 모듈은 JavaScript 자체에 시간을 충분히 쓰는 방향으로 설계했습니다.

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

• 변수, 함수, 객체 — 백엔드와 프론트엔드 양쪽에서 동일하게 쓰이는 기본 단위
• 비동기 흐름 — 화면이 멈추지 않게 만드는 핵심 패턴 (Promise, async/await)
• npm과 패키지 — 다른 사람이 만든 코드를 가져다 쓰는 흐름
• 오류 메시지를 읽는 법 — 콘솔에 빨간 글씨가 떴을 때 가장 먼저 볼 줄

2. AI 페어 프로그래밍 — 의도를 한국어로 적는 시간

AI에게 답을 받는 법보다, 무엇을 만들지 한국어로 정확히 적는 법부터 시작합니다. 이 순서가 학습 효과를 가장 크게 만든다고 생각합니다.

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

• Cursor 같은 AI IDE에서 의도를 한국어로 적고 결과를 검증하는 흐름
• AI가 만든 코드를 한 줄씩 본인 언어로 다시 설명하는 연습
• 오류가 났을 때 AI에 다시 묻기 전에 본인이 먼저 시도해보는 디버깅 체크리스트
• GPT, Claude, Gemini, Grok, 추론 모델 중 학습 단계마다 무엇을 쓸지 정리

3. 자료구조 — JSON과 객체로 화면을 다시 그려보기

Node.js에서는 거의 모든 데이터가 JSON 형태로 흐릅니다. 그래서 자료구조 모듈은 따로 떼어 두지 않고 JSON 위주로 다시 짭니다.

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

• 배열과 객체 — 화면 한 장을 데이터로 표현하는 연습
• 리스트 정렬과 필터 — 게시글·친구 목록 정렬 같은 작은 예제
• JSON 입출력 — 백엔드 응답 형식과 프론트엔드 렌더링 사이의 약속

4. Node 풀사이클 — Express 서버부터 화면 렌더링까지

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

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

• Express 기반 간단한 서버 — 입력과 출력 한 쌍을 먼저 만들어보기
• 라우트와 미들웨어 — 요청이 들어와서 응답이 나가기까지의 흐름
• 프론트엔드 화면 — 서버 API를 호출해 결과를 그리는 가장 작은 화면 한 장
• 로컬 환경 세팅과 간단한 배포 — 발표 때 다른 사람도 볼 수 있는 상태까지
• 버그가 났을 때 어디서부터 살펴볼지 — 프론트엔드 / 네트워크 / 서버 순서

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

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

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

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

이런 분께 추천드립니다

• 한 언어로 백엔드와 프론트엔드를 같이 가르치고자 하는 고등학교 정보 교과 담당 선생님
• AI 도구 활용 기준을 학교 단위로 정리하고자 하는 교육과정 운영진
• 수강생의 진학·취업 포트폴리오에 들어갈 결과물을 만들고자 하는 진로진학 담당 선생님

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

다음 단계

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

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

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

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

도입 전에 정리할 것

청소년 개발 교육은 결과물이 보여야 몰입이 생깁니다. 권앤컴퍼니는 학생 수준에 맞춰 난이도를 조절하면서도 실제 서비스 개발의 감각을 놓치지 않도록 커리큘럼을 설계합니다.

처음 설계할 때는 업종, 대상 직군, 보안 기준, 기대 산출물부터 맞추는 편이 좋습니다. 이 네 가지가 정리되면 표준 교안보다 훨씬 현실적인 과정으로 좁혀집니다.

Tags