4회 · 목업을 진짜 웹앱으로: Next.js 시작
웹사이트와 웹앱, 프레임워크와 컴포넌트를 이해하고, 2회의 기획서와 목업으로 내 컴퓨터에서 돌아가는 Next.js 웹앱을 만듭니다.
“목업은 그림, 웹앱은 기계. Claude Code가 그림을 기계로 바꾼다.”
학습 목표
- 웹사이트와 웹앱, 프레임워크, 컴포넌트가 무엇인지 안다
- 2회차 목업과 기획서를 바탕으로 Next.js 웹앱을 만든다
- CLAUDE.md로 프로젝트 규칙을 정하고, 말로 화면을 고친다
오늘 만드는 것: 내 PC에서 돌아가는 "우리 모임" 웹앱 (가짜 데이터)
실습 진도
—
실습 단계를 체크하면 표시돼요
- 2회차에 만든 기획서와 목업 화면을 찾아 두기
오늘의 흐름
| 시간 | 내용 | 하는 일 |
|---|---|---|
| 0–10분 | 지난 시간 돌아보기 | 과제(내 소개 페이지) 보여 주기 |
| 10–35분 | 웹사이트에서 웹앱으로 | 웹앱, 프레임워크, 컴포넌트, Next.js |
| 35–50분 | 내 컴퓨터를 작은 서버로 | Node.js, 개발 서버, localhost |
| 50–60분 | CLAUDE.md | 프로젝트 규칙 메모 |
| 60–70분 | 쉬는 시간 | Node.js 설치가 안 된 분은 이때 |
| 70–110분 | 실습 | 목업 → 계획 → 웹앱 → 말로 고치기 → 휴대폰 점검 |
| 110–120분 | 정리와 과제 | 퀴즈, 다음 시간 예고 |
웹사이트에서 웹앱으로
한 장짜리 페이지의 한계
3회에 만든 index.html은 훌륭한 첫걸음이지만, 서비스가 되려면 부족한 점이 있습니다.
| 한 장 웹페이지 (3회) | 웹앱 (오늘부터) |
|---|---|
| 화면 하나 | 목록, 상세, 신청 완료 등 여러 화면 |
| 모임이 늘면 글을 직접 고쳐야 함 | 모임 정보가 데이터로 따로 있어 화면이 알아서 그려짐 |
| 새로 고침하면 숫자가 사라짐 | 7회부터 데이터베이스에 저장 |
| 내 컴퓨터에서만 | 6회부터 인터넷 주소로 공개 |
웹앱이란
은 브라우저에서 돌아가지만 앱처럼 동작하는 웹사이트입니다. 로그인하고, 무언가를 신청하고, 내 정보가 저장됩니다. 예약 사이트, 은행 웹사이트, 온라인 쇼핑몰이 모두 웹앱입니다.
전단지와 자판기
한 장 웹페이지는 전단지입니다. 보여 주기만 합니다. 웹앱은 자판기입니다. 버튼을 누르면 무언가 일어나고, 남은 수량이 줄어들고, 다 팔리면 "품절"이 뜹니다.
프레임워크: 조립식 가구의 기본 틀
웹앱을 처음부터 다 만들려면 할 일이 너무 많습니다. 그래서 개발자들은 미리 만들어 둔 뼈대인 를 씁니다.
집을 지을 때
벽돌부터 굽는 사람은 없습니다. 검증된 자재와 공법을 씁니다. 프레임워크는 검증된 자재와 공법의 묶음입니다. 화면 이동, 데이터 불러오기, 빠르게 보여 주기 같은 기본 기능이 이미 들어 있습니다.
이 과정에서는 를 씁니다.
| 왜 Next.js인가 | 설명 |
|---|---|
| 널리 쓰인다 | 많은 회사와 개인이 쓰는 대표적인 웹앱 프레임워크라서 자료가 많다 |
| AI가 잘 안다 | 많이 쓰이는 만큼 Claude도 잘 다룬다 |
| 공개가 쉽다 | 6회에 쓸 Vercel이 만든 프레임워크라 궁합이 좋다 |
| 앱으로 이어진다 | 기반이라, 12회의 Expo 앱과 만드는 방식이 닮았다 |
컴포넌트: 레고 블록
Next.js(React)는 화면을 작은 부품으로 나눠 만듭니다. 이 부품을 라고 합니다.
모임 목록 화면
├─ 머리말 (모임 이름, 로고)
├─ 모임 카드 ← 같은 부품을 여러 번 씀
├─ 모임 카드
├─ 모임 카드
└─ 꼬리말- "모임 카드"를 한 번 만들어 두면, 모임이 10개든 100개든 같은 부품으로 그립니다.
- 카드 모양을 바꾸고 싶으면 부품 하나만 고치면 모든 카드가 바뀝니다.
- 그래서 고쳐 달라고 할 때 "모임 카드에서…"처럼 부품 이름으로 말하면 정확합니다.
도장 찍기
카드 100장에 같은 무늬를 그리려면 도장을 하나 파서 찍는 것이 빠릅니다. 컴포넌트는 화면용 도장입니다. 도장을 고치면 앞으로 찍는 모든 카드가 바뀝니다.
내 컴퓨터를 작은 서버로
Node.js: 웹앱을 돌리는 엔진
3회의 index.html은 더블클릭하면 바로 열렸습니다. 웹앱은 조금 다릅니다. 화면을 만들어 내는 엔진이 필요한데, 그것이 입니다.
설치: nodejs.org에서 LTS라고 적힌 Windows용 설치 파일을 내려받아, 기본 설정 그대로 Next를 눌러 설치합니다.
설치 후 Claude 앱을 껐다 켜야 Node.js를 찾을 수 있습니다.
설치가 됐는지 모르겠으면 Claude Code에게 물어보세요.
Node.js가 설치돼 있는지 확인하고, 없으면 LTS 버전 설치 방법을 안내해줘.
LTS가 뭔가요?
"오래 지원하는 안정 버전"이라는 뜻입니다. 최신 기능보다 안정성이 중요한 우리에게는 LTS가 맞습니다.
개발 서버와 localhost
웹앱을 만드는 동안 Claude Code는 내 컴퓨터에서 개발 서버를 켭니다. 그러면 브라우저에서 http://localhost:3000 같은 주소로 웹앱을 볼 수 있습니다.
| 말 | 뜻 |
|---|---|
| 개발 서버 | 만드는 동안 내 컴퓨터에서 웹앱을 돌려 주는 프로그램 |
| "바로 이 컴퓨터"라는 뜻의 주소. 나만 열 수 있다 | |
| 3000 | 같은 컴퓨터 안의 여러 프로그램을 구분하는 번호(포트) |
집에서 시험 삼아 차려 보는 식당
가게를 열기 전에 집 부엌에서 메뉴를 만들어 가족에게 먼저 먹여 보는 것과 같습니다. localhost는 우리 집 부엌입니다. 손님(다른 사람)은 아직 못 옵니다. 가게 문을 여는 것(공개)은 6회입니다.
- 개발 서버가 켜져 있는 동안 코드를 고치면 브라우저가 알아서 바뀝니다.
- 컴퓨터를 끄거나 Claude 앱을 닫으면 개발 서버도 꺼집니다. 다음에는 "다시 켜줘"라고 하면 됩니다.
이 웹앱을 내 컴퓨터에서 실행해줘. 실행되면 브라우저로 열 주소를 알려주고, 끄는 방법도 알려줘.
CLAUDE.md: 프로젝트 규칙 메모
매번 같은 말을 반복하지 않으려면
"한국어로 답해줘", "쉽게 설명해줘", "큰 변경 전에는 계획부터"… 이런 말을 매번 하기는 번거롭습니다. 프로젝트 폴더에 파일을 두면, Claude Code가 대화를 시작할 때마다 먼저 읽습니다.
새 직원에게 주는 업무 안내서
새 직원이 오면 "우리 가게 규칙" 한 장을 줍니다. 손님에게 인사는 이렇게, 마감은 이렇게. CLAUDE.md는 Claude Code를 위한 우리 프로젝트 안내서입니다.
# 우리 모임 웹앱 규칙
- 답변과 화면 글자는 한국어로
- 나는 코딩을 처음 배우는 사람이니 쉽게 설명하기
- 큰 변경 전에는 계획부터 보여주기
- 기능 하나를 마치면 무엇을 바꿨는지 3줄로 알려주기- 짧을수록 좋습니다. 규칙이 너무 많으면 중요한 것이 묻힙니다.
- 쓰다가 "이건 매번 말하네" 싶은 것이 생기면 하나씩 더합니다.
요즘 업계에서는
AI 시대에 더 많이 쓰이는 언어
GitHub가 해마다 내는 보고서 Octoverse 2025에 따르면, 2025년 8월 TypeScript가 처음으로 GitHub에서 가장 많이 쓰이는 언어가 됐습니다. GitHub는 그 이유 중 하나로 AI를 꼽았습니다 (Octoverse 2025). TypeScript는 JavaScript에 "이 칸에는 날짜만 들어간다" 같은 규칙을 더한 언어로, AI가 만든 코드의 실수를 미리 잡아 줍니다. 오늘 만드는 Next.js 웹앱도 대부분 TypeScript로 만들어집니다.
프로젝트 규칙 파일이 표준이 되다
CLAUDE.md처럼 AI가 먼저 읽는 프로젝트 안내서는 이제 여러 AI 코딩 도구가 함께 쓰는 방식이 됐습니다. 도구마다 파일 이름은 조금씩 다르지만 생각은 같습니다. 사람에게 일을 맡길 때처럼, AI에게도 우리 프로젝트의 규칙을 글로 알려 주는 것입니다.
목업에서 웹앱까지가 짧아졌다
예전에는 목업을 받은 개발자가 화면을 처음부터 다시 만들었습니다. 지금은 목업 캡처와 기획서를 AI에게 함께 주면 그 자리에서 동작하는 첫 버전이 나옵니다. 그래서 요즘 팀들은 "완벽한 기획서"보다 "빨리 만들어 보고 고치기"를 더 자주 택합니다.
시연
강사가 2회에 만든 목업 캡처와 기획서.md를 빈 폴더에 넣고, Claude Code에게 계획을 받습니다. 계획을 승인하면 Next.js 프로젝트가 만들어지고, 가짜 모임 6개가 든 목록 화면이 localhost:3000에 뜹니다. "모임 카드에 남은 자리를 크게" 같은 수정을 말로 하고, 브라우저가 바로 바뀌는 것을 보여 줍니다. 마지막으로 브라우저의 휴대폰 화면 미리 보기로 점검합니다.
실습
주제: "우리 모임" 웹앱 — 2회 목업의 화면(모임 목록, 모임 상세, 신청 완료)을 진짜 웹앱으로 만듭니다. 데이터는 아직 코드 안에 가짜로 넣습니다. 7회에 데이터베이스로 옮깁니다.
실습 4-1 · 준비와 프로젝트 규칙
약 10분claude-practice안에our-moim폴더를 만듭니다. (영어 소문자 이름이 오류가 적습니다)Claude 데스크톱 앱 Code 탭에서our-moim폴더를 엽니다.- PROMPTNode.js 설치 확인
Node.js가 설치돼 있는지 확인하고, 없으면 LTS 버전 설치 방법을 안내해줘.
- PROMPT프로젝트 규칙(CLAUDE.md) 만들기
이 프로젝트에 CLAUDE.md를 만들어줘. 내용은 짧게: 답변과 화면 글자는 한국어로, 초보자에게 설명하듯 말하기, 큰 변경 전에는 계획부터 보여주기, 기능 하나를 마치면 알려주기.
실습 4-2 · 목업을 웹앱으로
약 20분계획 → 승인 → 실행 → 브라우저로 확인.
목업 캡처를 입력창으로 끌어다 놓고, 아래 프롬프트를 보냅니다.
@기획서.md처럼@를 붙이면 그 파일을 읽으라는 뜻입니다.PROMPT목업을 Next.js 웹앱으로 플랜 모드 권장@기획서.md 와 목업 화면을 바탕으로 Next.js 웹앱을 만들어줘. 데이터는 일단 코드 안에 가짜로 넣고, 내 컴퓨터에서 실행해서 브라우저로 볼 수 있게 해줘. 먼저 만들 화면과 파일 구성을 계획으로 보여줘.
이렇게 되면 성공● 계획 (아직 만들지 않았습니다)화면/ 모임 목록 (카드: 날짜, 제목, 읽을 책, 남은 자리)/moim/[id] 모임 상세 (장소, 소개, 참석 버튼)/done 신청 완료파일app/page.tsx, app/moim/[id]/page.tsx, app/done/page.tsxcomponents/MoimCard.tsx ← 모임 카드 부품data/moims.ts ← 가짜 모임 6개> 진행할까요?"좋아, 진행해"라고 승인합니다. 처음에는 필요한 부품을 내려받느라 몇 분 걸릴 수 있습니다. 명령을 실행해도 되는지 물으면 읽고 허용하세요.
이렇게 되면 성공✓ Next.js 프로젝트 생성✓ 가짜 모임 6개 추가 (data/moims.ts)✓ 화면 3개, 모임 카드 컴포넌트● 개발 서버 실행 중 → http://localhost:3000막혔을 때브라우저 주소창에
http://localhost:3000을 입력합니다. 모임 카드를 눌러 상세 화면으로, 참석 버튼을 눌러 완료 화면으로 가는지 확인하세요. 목업과 비교해 다른 점을 적어 둡니다.
실습 4-3 · 말로 화면 고치기
약 15분보이는 것을 그대로 말하면 됩니다. 한 번에 하나씩.
고치면 브라우저가 알아서 바뀝니다. 안 바뀌면 새로 고침해 보세요.
말로 설명하기 어려우면 화면을 캡처해 표시하고 끌어다 놓으세요.
- Windows 기준
크롬이나 엣지에서
F12→ 왼쪽 위의 휴대폰 모양 아이콘(또는Ctrl + Shift + M)을 누르면 휴대폰 크기로 볼 수 있습니다.
실습 4-4 · 구조 이해하기
약 10분- PROMPT컴포넌트 구조 설명 듣기
이 웹앱의 화면이 어떤 컴포넌트(부품)로 나뉘어 있는지 레고 블록에 빗대어 설명해줘. 파일 이름과 화면의 어느 부분인지 표로 짝지어서.
- PROMPT방금 만든 것 설명 듣기
방금 만든 것이 어떻게 동작하는지 처음 배우는 사람이 알아듣게 5줄로 설명해줘.
같은 문제를 두 번 넘게 고쳐도 안 되면, 대화를 비우고 배운 점을 넣어 다시 구체적으로 요청하는 편이 빠릅니다. 마음에 안 드는 변경은 되돌리기부터 하세요.
PROMPT방금 바꾼 것 되돌리기방금 바꾼 것이 마음에 안 들어. 바꾸기 전 상태로 되돌려줘. 되돌린 뒤 무엇이 원래대로 돌아왔는지 알려줘.
PROMPT꼬였을 때 새로 시작/clear
심화 · 첫 버전 범위 다시 보기
약 5분- PROMPT첫 버전 범위 줄이기
기획서의 기능 중에서 첫 버전에 꼭 필요한 것 3개만 골라줘. 나머지는 "다음에 할 일"로 따로 적어줘. 왜 그렇게 골랐는지도 한 줄씩.
지금 웹앱과 기획서를 비교해, 첫 버전에 빠진 것과 다음에 할 일을 기획서에 덧붙여 달라고 해 보세요.
정리
핵심 정리
- 1웹앱은 자판기. 여러 화면이 있고, 데이터에 따라 화면이 알아서 그려진다.
- 2Next.js는 검증된 웹앱 뼈대(프레임워크), 컴포넌트는 화면용 도장이다.
- 3localhost는 우리 집 부엌. 나만 볼 수 있는 시험 주소다.
- 4CLAUDE.md는 프로젝트 안내서. 매번 하는 말은 여기에 적는다.
- 5고칠 때는 보이는 것을 그대로, 한 번에 하나씩. 어려우면 캡처로.
다음 시간에는 지금까지 만든 것을 안전하게 저장합니다. 실수해도 언제든 되돌아갈 수 있는 세이브 포인트, Git을 배웁니다.
복습
Q1.한 장 웹페이지와 웹앱의 차이를 가장 잘 설명한 비유는?
Q2.http://localhost:3000 주소는 친구도 자기 휴대폰에서 열 수 있다.
Q3.모임 카드 모양을 바꾸고 싶을 때, 컴포넌트 덕분에 좋은 점은?
Q4.CLAUDE.md 파일의 역할은?
Q5.Next.js 웹앱을 내 컴퓨터에서 돌리려면 Node.js가 필요하다.
과제
과제 · 웹앱 고치기 3번
"우리 모임" 웹앱을 말로 세 번 더 고쳐 보세요. 무엇을 어떻게 말했는지 적고, 휴대폰 크기 화면에서 점검한 결과도 적어 오세요. 다음 시간에는 개발 서버를 다시 켜는 것부터 시작합니다.