프로젝트 생성

기획이 끝났으니 이제 실제 프로젝트를 만들어 봅시다. 처음 하시는 분도 따라 하실 수 있도록 한 단계씩 안내합니다.

터미널 열기

Cursor를 실행하고 터미널을 엽니다. 기억나시죠?

화면 아래쪽에 검은 창이 나타나면 준비 완료입니다.

터미널에 아래 명령어를 입력하고 Enter를 누릅니다:


npx create-next-app@latest my-cafe

my-cafe는 프로젝트 이름입니다. 본인의 가게에 맞게 바꿔도 됩니다. 예를 들어 my-salon, my-bakery 등. 단, 영어 소문자와 하이픈(-)만 사용하세요.

명령어를 실행하면 몇 가지 질문이 나옵니다. 아래와 같이 답해 주세요:

질문	답변	설명
Would you like to use TypeScript?	Yes	타입이 있는 JavaScript. AI가 더 정확하게 코드를 씁니다
Would you like to use ESLint?	Yes	코드 실수를 자동으로 잡아주는 도구
Would you like to use Tailwind CSS?	Yes	앞에서 배운 스타일 도구
Would you like your code inside a `src/` directory?	Yes	코드를 깔끔하게 정리합니다
Would you like to use App Router?	Yes	파일이 곧 페이지가 되는 최신 방식
Would you like to use Turbopack?	Yes	개발할 때 속도가 빨라집니다
Would you like to customize the import alias?	No	기본값으로 충분합니다

방향키로 Yes/No를 선택하고 Enter를 누르면 됩니다. 설치에 1~2분 정도 걸립니다.

설치가 끝나면 Cursor에서 프로젝트를 열어봅시다:

왼쪽에 파일 목록이 나타납니다.

왼쪽 파일 목록에 여러 파일과 폴더가 보입니다. 전부 이해할 필요는 없습니다. 중요한 것만 알아두세요:

나머지 파일들은 신경 쓰지 않아도 됩니다. AI가 필요할 때 알아서 수정합니다.

프로젝트가 잘 만들어졌는지 확인해 봅시다. 터미널에 입력합니다:


npm run dev

잠시 후 이런 메시지가 나타납니다:


▲ Next.js 15.x.x
- Local: http://localhost:3000

Chrome에서 http://localhost:3000 에 접속하면 Next.js 기본 화면이 보입니다. 검은 배경에 "Next.js" 로고가 보이면 성공입니다!

localhost:3000은 "내 컴퓨터에서만 보이는 임시 주소"입니다. 다른 사람은 아직 볼 수 없습니다. 나중에 배포하면 전 세계 누구나 볼 수 있게 됩니다.

터미널에서 Ctrl + C를 누르면 서버가 종료됩니다. 다시 시작하려면 npm run dev를 입력하면 됩니다.