웹사이트 공개 2편: AI와 로컬 사이트 만들기
웹사이트 공개 실습 2/14 · 가상 프로젝트 작은 작업실 기준입니다.
example.com은 설명용 예약 도메인입니다. 외부 설정에는 반드시 본인 소유 도메인을 사용하세요.
이번 편의 목표와 파일
내 브라우저에서 소개·기록 목록·기록 상세 화면을 엽니다. 검증용 전체 파일 ZIP을 받아 압축을 풀면 mini-workshop 폴더가 나옵니다. 여러 단계의 설정 파일이 미리 들어 있지만 이번에는 Docker나 로그인 설정을 건드리지 않습니다.
| 파일 | 이번에 볼 내용 |
| --- | --- |
| package.json, package-lock.json | 실행 명령과 검증한 의존성 버전 |
| app/page.jsx | 첫 화면의 문장 |
| app/notes/page.jsx | 글 목록 |
| lib/notes.js | 첫 실행 시 예제 기록 생성 |
실행 순서
- 코드 편집기의 폴더 열기로 압축을 푼 폴더를 엽니다. 왼쪽 목록에
package.json이 보여야 합니다. 한 단계 위의 다운로드 폴더를 열면 안 됩니다. - 그 편집기에서 새 터미널을 엽니다. Mac은
pwd, Windows PowerShell은Get-Location으로 현재 경로를 확인합니다. - 아래 명령을 실행합니다.
npm ci는 고정 목록에 맞춰 설치하므로 처음에는 인터넷이 필요합니다.
npm ci
npm run dev
- 이 터미널은 실행 상태로 둡니다. 브라우저에서
http://localhost:4100을 열고 ‘작은 작업실’을 확인합니다. - ‘첫 번째 기록 읽기’를 눌러 목록과 상세로 이동합니다. 처음 글 목록에 접근하면
data/notes.json이 만들어집니다. 아직 인터넷 공개나 회원 DB 생성은 아닙니다. - AI 대화 입력칸에 아래 요청을 보냅니다. 터미널 명령줄에 입력하지 않습니다.
이 폴더의 app/page.jsx를 확인해줘.
첫 화면의 '아이디어를 하나씩 완성해요.'만
'오늘의 작은 작업을 시작해요.'로 바꿔줘.
다른 파일, 의존성, 로그인 설정은 바꾸지 마.
수정한 내용과 브라우저에서 확인할 주소를 알려줘.
- 파일의 실제 변경을 확인하고 브라우저를 새로고침합니다. 문장이 바뀌었는지 직접 읽습니다.
- 별도 터미널에서 같은 폴더를 열고
npm run check를 실행합니다. 처음 실행한 서버는 켜져 있어야 합니다.
자주 막히는 지점
package.json을 못 찾는다고 해요. 현재 폴더가 잘못된 것입니다. mini-workshop/mini-workshop처럼 압축 폴더가 중첩되었는지도 확인합니다.
포트가 이미 사용 중이에요. 같은 실습을 두 번 켰는지 확인하고 기존 실습 터미널에서 Ctrl+C로 종료합니다. 다른 프로젝트를 무작정 종료하지 않습니다.
AI가 완료했다고 했는데 문장이 같아요. 파일 저장 여부, 열린 폴더, 브라우저 주소를 비교합니다. 다른 복사본을 고친 것은 아닌지 확인합니다.
완료 기준과 검증
첫 화면·글 목록·글 상세가 열리고, 문장 수정이 보이면 완료입니다. npm run check의 경로별 OK도 확인합니다. 예제의 빌드·페이지 응답·보호 경로는 별도 환경에서 확인했습니다. AI가 항상 동일하게 수정한다는 뜻은 아닙니다.
공식 자료 확인: 2026-11-15. Next.js CLI 공식 문서(영문). 다음 편 전에 실행 터미널에서 Ctrl+C로 로컬 서버를 종료합니다.