수업 안내

여러분이 쓰고 싶은 작은 웹 서비스를 하나 떠올려 봅시다. 친구와 공유하는 할 일 목록, 공부한 내용을 남기는 메모장, 우리 반을 위한 간단한 게시판도 좋습니다.

이 수업에서는 AI와 함께 그런 웹을 만들고, 내가 만든 기능이 어떻게 움직이는지 이해하는 것을 목표로 합니다.

처음부터 큰 서비스를 완성할 필요는 없습니다. 내가 고친 문장이 친구 화면에 나타나고, 내가 적은 메모가 다시 접속해도 남는 것처럼 작은 결과를 하나씩 만들어 갑니다. 그중 하나라도 직접 바꾸고 설명할 수 있게 되는 것이 중요합니다.

수업의 큰 주제는 AI First Web Stack입니다. 여기서는 “AI의 도움을 개발 과정에 적극적으로 활용하면서, 사람이 만들 것과 확인할 것을 판단하는 방식”이라는 뜻으로 사용합니다.

AI가 코드를 만들어 주면, 우리는 무엇을 배울까요?

이 수업은 앞으로 AI와 함께 개발하는 일이 더 보편화될 것이라는 관점에서 출발합니다. AI에게 초안을 맡기고, 모르는 코드를 설명받고, 오류의 원인을 함께 찾아볼 것입니다.

그 과정에서도 여러분이 결정해야 할 일이 있습니다.

• 무엇을 만들지: 누가 쓰고, 어떤 일을 할 수 있어야 할까요?
• 어디를 바꿀지: 화면을 고치면 될까요, 서버나 저장 방식도 바꿔야 할까요?
• 무엇을 확인할지: 버튼이 눌리는 것만 보면 될까요, 저장한 내용이 남는지도 봐야 할까요?

예를 들어 AI에게 “메모 저장 기능을 만들어 줘”라고 부탁했다고 합시다. 화면에 ‘저장 완료’가 떴습니다. 정말 저장됐는지는 어떻게 알 수 있을까요? 새로고침하고 다시 열어 보면 무엇을 확인할 수 있을까요?

원하는 결과를 말하고, 바뀐 부분을 살펴보고, 실제 결과로 확인하는 것. 우리가 연습할 개발자의 일입니다.

그래서 ‘스택’을 알아봅니다

웹 서비스 하나에는 여러 기술이 함께 쓰입니다. 화면을 만드는 기술, 요청을 처리하는 기술, 데이터를 저장하는 기술처럼 역할이 다른 기술을 함께 구성한 것을 기술 스택이라고 부릅니다.

‘메모 저장’ 버튼 하나를 예로 들어 보겠습니다.

1. 브라우저의 화면: 메모를 입력하고 저장을 요청합니다.
2. 서버: 입력을 확인하고 데이터베이스에 저장을 요청합니다.
3. 데이터베이스: 메모를 보관하고 처리 결과를 돌려줍니다.
4. 서버 → 화면: 처리 결과를 응답하고, 화면에서 결과를 보여 줍니다.

개인 메모라면 서버에서 누가 요청했는지, 그 메모를 읽거나 바꿀 권한이 있는지도 확인해야 합니다. 로그인 화면을 만드는 것과 데이터 접근을 제한하는 것은 각각 확인할 일입니다.

앞으로 만날 기술 이름이 궁금하다면

지금은 이름을 외우기보다 어느 역할에 해당하는지 살펴보면 충분합니다.

역할	만나게 될 기술의 예	우리가 알아볼 것
코드를 표현하고 실행하기	JavaScript, TypeScript, Node.js	언어와 실행 환경은 어떻게 다를까?
화면을 만들고 조작에 반응하기	React, Tailwind CSS, shadcn/ui	입력이나 상태가 바뀌면 화면은 어떻게 달라질까?
화면과 서버 기능을 구성하기	Next.js	어떤 코드는 브라우저에서, 어떤 코드는 서버에서 실행될까?
데이터를 저장하고 꺼내기	PostgreSQL, Drizzle 또는 Prisma 같은 ORM	어떤 데이터를 어떤 관계로 저장할까?
사용자 확인과 로그인 관리	Better Auth	누구인지 확인한 뒤, 무엇을 허용해야 할까?
변경을 기록하고 결과를 확인하기	Git, 테스트 도구	무엇이 바뀌었고, 기대한 대로 작동하는지 어떻게 알까?

ORM은 프로그램에서 데이터베이스를 다루도록 돕는 도구입니다. 이런 도구가 있어도 무엇을 저장하고 어떻게 연결할지는 우리가 이해해야 합니다. 두 ORM을 모두 배우는 목록은 아닙니다. 실제 도구는 실습에 필요한 시점에 소개합니다.

CS는 우리가 만든 웹 안에서 찾습니다

CS는 컴퓨터와 프로그램이 작동하는 원리를 다루는 분야입니다. 이 수업에서는 실습하다 생긴 질문에 원리를 연결하겠습니다.

처음에는 짧은 코드에서 한 가지 흐름을 봅니다. 값을 바꾸거나 서버를 꺼 보면서 예상과 결과를 비교합니다. 원리가 보이면 AI와 함께 기능을 넓혀 봅니다.

직접 코드를 바꾸는 시간은 AI에게 맡긴 변경을 이해할 근거를 만드는 시간입니다. 함수의 조건 하나를 바꾸어 본 경험이 있으면 AI가 고친 조건도 살펴볼 수 있습니다. 서버를 직접 켜고 꺼 본 경험이 있으면 화면이 멈췄을 때 어디부터 확인할지 생각할 수 있습니다.

수업은 작은 성공을 이어 갑니다

매번 다음과 같은 흐름으로 진행합니다.

1. 해 보고 싶은 일 하나를 정합니다. 이번에는 문장 하나, 버튼 하나, 저장 기능 하나면 충분합니다.
2. 준비된 예제를 실행합니다. 결과를 먼저 보고, 입력과 출력이 어디인지 찾습니다.
3. 핵심 한 곳을 바꿉니다. 바꾸기 전에 결과를 예상하고 실제 결과와 비교합니다.
4. 필요한 원리를 짚습니다. 방금 본 현상에 실행·통신·상태·저장 같은 이름을 붙입니다.
5. AI와 작은 확장을 시도합니다. 원하는 동작을 설명하고, 바뀐 부분과 결과를 확인합니다.

AI는 초반부터 설명이나 오류 분석에 활용할 수 있습니다. 핵심을 알아보는 짧은 실험에서는 잠시 직접 예상하고 바꿔 봅니다. 배운 범위 안에서 기능을 확장할 때는 AI의 도움을 적극적으로 사용합니다.

메모 목록을 다룬다면 이렇게 요청해 볼 수 있습니다.

“완료한 메모를 숨기는 버튼을 추가해 줘. 메모를 삭제하면 안 되고, 버튼을 다시 누르면 모두 보여야 해. 바꾼 파일과 직접 확인할 방법도 설명해 줘.”

그다음에는 직접 버튼을 눌러 보고, 다시 표시되는지 확인하고, 어느 조건이 달라졌는지 찾아봅니다. 기능의 범위를 작게 잡으면 AI의 변경을 따라가기도 쉬워집니다.

폴더와 실험 번호는 하루 할당량이 아닙니다. 수업 속도는 이해 정도에 맞춥니다. 한 주제를 여러 번 다룰 수도 있습니다. 준비된 진도표를 모두 끝내는 것보다, 오늘 다룬 한 가지를 자기 것으로 만드는 데 무게를 둡니다.

막히면 힌트와 도움을 사용해도 됩니다. 먼저 끝났다면 같은 구조에서 문구나 조건을 바꾸는 선택 과제를 해 봅니다. 내가 고른 내용이 결과에 반영되고, 친구가 그것을 써 보는 경험을 쌓아 갑니다.

오늘의 첫 성공: 내 문장을 친구 화면에

오늘은 준비된 짧은 서버 코드를 실행하고, Hello!를 내가 고른 영문 문장으로 바꾸어 친구 브라우저에 띄워 봅니다. 첫 예제는 영어·숫자·기본 기호로 시작하며, 한글이 전달되는 방식은 이후에 따로 실험합니다.

문장이 나타나면 세 군데를 찾아봅시다.

• 내가 바꾼 파일은 어디에 있나요?
• 응답을 보내는 서버 프로그램은 어느 컴퓨터에서 실행 중인가요?
• 결과를 보는 브라우저는 어느 컴퓨터에 있나요?

이제 서버를 끄면 어떻게 될지 예상해 봅시다. 친구 화면에 이미 보이는 문장과, 새 요청을 보냈을 때의 결과가 같을까요?

이 작은 실험은 앞으로 AI와 만들 웹의 한 부분을 보여 줍니다. 화면 뒤에는 실행 중인 프로그램이 있고, 프로그램 사이에는 데이터가 오갑니다. 이후에는 그 흐름에 화면 조작, 저장, 사용자 구분을 하나씩 연결합니다.

통신 단원에서는 소켓 채팅으로 직접 대화하고, HTTP 요청과 응답을 읽습니다. 이어 공개용 가짜 로그인으로 평문 전송과 HTTPS를 비교합니다. 나중에는 같은 로그인 사례에 비밀번호 저장·세션·데이터 권한을 붙입니다. 여러 기술을 한 번에 외우기보다 방금 생긴 질문 하나씩 해결합니다.

오늘의 성공은 내가 바꾼 문장을 보여 주고, 내 파일·서버·친구 브라우저를 구분해 보는 것입니다. 연결이 막혔다면 강사와 함께 접속 주소와 실행 상태부터 확인합니다. 자세한 실행 방법은 첫 성공 교재, 설치가 필요하면 실습 준비를 참고하세요.

수업을 통해 남기고 싶은 능력

작은 기능 하나를 두고 다음과 같이 말할 수 있으면 좋겠습니다.

“무엇을 만들고 싶은지 설명할 수 있어요.

어떤 부분이 화면이고 서버인지 찾을 수 있어요.

AI가 바꾼 핵심을 보고, 제가 직접 결과를 확인할 수 있어요.”

메모 서비스라면 입력부터 저장, 다시 불러오기까지 이어 보는 것이 하나의 목표가 될 수 있습니다. 그 과정에서 필요한 원리를 익히고, 익힌 만큼 다음 기능으로 나아갑니다.

수업을 마칠 때는 짧게 세 가지만 남깁니다. 내가 바꾼 것, 직접 확인한 결과, 아직 궁금한 것. 이 기록을 보고 다음 수업에서 이어 갈 일을 정합니다.

이 포털에서는 실습 안내를 보고 기록과 도움을 주고받습니다. 코드는 내 컴퓨터의 편집기에서 고치고 터미널에서 실행합니다. 앞으로의 단원과 현재 제공하는 자료는 학습 지도에서 확인할 수 있습니다.