안녕하세요! 오늘은 Gemini CLI를 활용해서 NextJS 웹 애플리케이션을 개발하고 배포하는 방법을 배워보겠습니다. 최종 목표는 PC와 대전할 수 있는 오목 게임을 만들어서 인터넷에 공개하는 것입니다.

🎯 강의 목표

Gemini CLI로 AI의 도움을 받아 코드 작성하기
NextJS 개발 환경 구축하기
로컬에서 웹 애플리케이션 실행하기
배포의 개념 이해하기

소요 시간: 약 2시간
난이도: 초급 (프로그래밍 경험 없어도 OK)

📋 사전 준비사항

image.png클릭하여 확대

이 강의를 듣기 위해 필요한 것은 딱 한 가지입니다:

기본적인 컴퓨터 사용 능력 (파일 다운로드, 설치 프로그램 실행 등)

그 외 모든 것은 함께 설치하면서 배워나갈 예정입니다!

🚀 1회차: 개발 환경 구축 (60분)

1. 기초 개념 이해하기 (15분)

본격적인 설치에 앞서, 몇 가지 기본 개념을 짚고 넘어가겠습니다.

https://lovable.dev/ 과 비교

장점

#	장점	설명
1	빠른 프로토타이핑	아이디어를 설명하면 분 단위로 MVP나 랜딩 페이지를 생성해 개발 시간을 20배 단축합니다. 스타트업에서 아이디어 검증에 이상적입니다.
2	코딩 지식 불필요	드래그 앤 드롭과 AI 챗 인터페이스로 비개발자도 쉽게 사용 가능하며, 스크린샷이나 와이어프레임을 코드로 변환합니다.
3	코드 소유권과 통합	생성된 코드를 GitHub로 내보내 완전 소유 가능하며, Supabase(데이터베이스), Stripe(결제) 등 API 연동이 간편합니다.

단점

#	단점	설명
1	복잡한 프로젝트 제한	간단한 앱에는 좋으나, 고급 기능이나 대규모 프로젝트에서 세밀한 커스터마이징이 어렵고 수동 코딩이 필요합니다.
2	크레딧 시스템 혼란	무료/유료 크레딧이 불명확해 에러 해결 시 크레딧이 낭비되며, 무료 크레딧 시 AI 성능이 떨어질 수 있습니다.
3	코드 디버깅 어려움	AI 생성 코드가 인간 개발자에게 이해하기 힘들어, 프로덕션 이전 시 수정이 번거롭습니다.

Node.js가 뭔가요?

JavaScript는 원래 웹 브라우저에서만 동작하는 언어였습니다. 하지만 Node.js 덕분에 내 컴퓨터에서도 JavaScript를 실행할 수 있게 되었죠.

왜 필요한가요?

NextJS 같은 현대적인 웹 개발 도구들이 Node.js 위에서 동작합니다
개발 서버를 내 컴퓨터에서 실행할 수 있습니다

npm은 무엇인가요?

npm(Node Package Manager)은 JavaScript 라이브러리를 설치하고 관리하는 도구입니다. 스마트폰의 앱스토어와 비슷하다고 생각하면 됩니다.

package.json의 역할

프로젝트에 필요한 라이브러리 목록을 저장합니다
다른 개발자와 협업할 때 필수적입니다

터미널/커맨드라인 기초

검은 화면에 명령어를 입력하는 것을 두려워하지 마세요! 몇 가지 기본 명령어만 알면 충분합니다.

# 폴더 이동
cd 폴더이름

# 현재 폴더의 파일 목록 보기
dir          # Windows
ls           # Mac/Linux

# 상위 폴더로 이동
cd ..

실습해보기: 명령 프롬프트(cmd)를 열어서 위 명령어들을 직접 입력해보세요!

2. 필수 프로그램 설치하기 (25분)

이제 본격적으로 개발 환경을 구축해봅시다.

Step 1: Node.js 설치

Node.js 공식 사이트](https://nodejs.org)) 접속
LTS 버전 다운로드 (안정적인 버전)
설치 프로그램 실행 (기본 설정으로 진행)

설치 확인하기

명령 프롬프트(cmd)를 열고 다음 명령어를 입력하세요:

node -v
npm -v

버전 번호가 표시되면 성공입니다!

v20.10.0
10.2.3

Step 2: Git 설치

Git은 코드 버전 관리 도구입니다. 나중에 GitHub에 코드를 업로드할 때 필요합니다.

Git 공식 사이트](https://git-scm.com)) 접속
Windows용 Git 다운로드
설치 (모두 기본 설정으로 진행)

GitHub 계정 만들기

GitHub](https://github.com)) 접속
무료 계정 생성

Git 초기 설정

명령 프롬프트에서 다음 명령어를 실행하세요:

git config --global user.name "내이름"
git config --global user.email "이메일@example.com"

Step 3: Gemini CLI 설치

Gemini CLI는 Google의 AI를 터미널에서 사용할 수 있게 해주는 도구입니다.

npm install -g @google/gemini-cli

인증하기

gemini auth

브라우저가 열리면서 Google 계정으로 로그인하라는 메시지가 나타납니다. Web auth 방식으로 진행되므로 별도의 API 키 발급은 필요 없습니다!

Step 4: NextJS 프로젝트 생성

드디어 우리의 첫 NextJS 프로젝트를 만들어봅시다!

npx create-next-app@latest my-omok-game

다음과 같은 질문들이 나타날 것입니다:

✔ Would you like to use TypeScript? … No / Yes
→ Yes 선택

✔ Would you like to use ESLint? … No / Yes  
→ Yes 선택

✔ Would you like to use Tailwind CSS? … No / Yes
→ Yes 선택

✔ Would you like to use `src/` directory? … No / Yes
→ No 선택

✔ Would you like to use App Router? … No / Yes
→ Yes 선택

✔ Would you like to customize the default import alias? … No / Yes
→ No 선택

설치가 완료되면 프로젝트 폴더로 이동합니다:

cd my-omok-game

3. 프로젝트 구조 이해하기 (10분)

생성된 프로젝트의 구조를 살펴봅시다.

my-omok-game/
├── app/              # 페이지 파일들
│   ├── page.tsx     # 메인 페이지
│   └── layout.tsx   # 공통 레이아웃
├── public/          # 이미지 등 정적 파일
├── node_modules/    # 설치된 라이브러리들
├── package.json     # 프로젝트 설정 파일
└── next.config.js   # NextJS 설정

중요한 파일들

app/page.tsx: 웹사이트의 메인 페이지
package.json: 프로젝트 정보와 필요한 라이브러리 목록
public/: 이미지, 아이콘 등을 저장하는 폴더

4. 개발 서버 실행하기 (10분)

이제 우리가 만든 웹사이트를 브라우저에서 확인해봅시다!

npmrundev.png클릭하여 확대

Windows 환경 설정

두 개의 명령 프롬프트 창이 필요합니다

첫 번째 cmd 창: 개발 서버 실행

cd my-omok-game
npm run dev

다음과 같은 메시지가 나타나면 성공입니다:

  ▲ Next.js 14.0.0
  - Local:        [http://localhost:3000](http://localhost:3000)
  - Network:      [http://192.168.0.1:3000](http://192.168.0.1:3000)

 ✓ Ready in 2.3s

두 번째 cmd 창: Gemini CLI 사용

cd my-omok-game
gemini

이제 AI에게 질문하거나 코드 작성을 요청할 수 있습니다!

브라우저에서 확인하기

웹 브라우저를 열고 주소창에 다음을 입력하세요:

[http://localhost:3000](http://localhost:3000)

NextJS 기본 페이지가 보인다면 성공입니다! 🎉

포트 번호 참고: NextJS의 기본 포트는 3000입니다. 만약 3000번 포트가 사용 중이라면 3001, 3002 등 다른 포트가 자동으로 할당됩니다.

NextJS + Gemini CLI로 웹 개발 시작하기 - 1일차 강의