Vite vs create-next-app: 프론트엔드 프로젝트 시작하는 두 가지 방법

프론트엔드 프로젝트를 처음 시작할 때 "뭘로 프로젝트를 만들지?"가 제일 먼저 고민되는 부분이죠. 2026년 현재 실무에서 가장 많이 쓰이는 방법은 두 가지입니다.

Vite — HTML + TypeScript + Tailwind CSS 조합이거나, React만 단독으로 쓸 때
create-next-app — Next.js + React + TypeScript + Tailwind CSS 풀스택 조합

둘 다 터미널에서 명령어 한 줄이면 프로젝트가 만들어져요. 초보자도 복사-붙여넣기로 바로 따라 할 수 있게 적었으니, 한 단계씩 같이 해 봅시다.

시작하기 전에

아래 두 가지만 깔려 있으면 됩니다.

Node.js (버전 18 이상 권장): nodejs.org에서 LTS 버전을 받으세요
VS Code: code.visualstudio.com에서 설치

터미널에서 아래 명령으로 Node.js가 제대로 깔렸는지 확인해 보세요.

node -v
# v20.11.0 같은 버전 번호가 나오면 OK

Node.js를 설치하면 npm(패키지 매니저)이 같이 딸려옵니다.

npm -v
# 10.2.4 같은 버전 번호가 나오면 OK

Part 1. Vite로 프로젝트 만들기

Vite가 뭔가요?

Vite(비트, 프랑스어로 "빠른"이라는 뜻)는 프론트엔드 빌드 도구예요. 개발 서버를 켜면 브라우저에서 바로 결과를 볼 수 있고, 코드를 수정하면 새로고침 없이 화면에 반영됩니다. 이걸 HMR(Hot Module Replacement)이라고 부르는데, 한 번 경험하면 계속 쓰게 됩니다.

좋은 점은 설정이 거의 없다는 거예요. 프로젝트를 만들면 바로 코딩을 시작할 수 있고, 빌드 속도도 Webpack 기반 도구보다 훨씬 빠르고요.

케이스 A: HTML + TypeScript + Tailwind CSS (React 없이)

간단한 웹사이트나 랜딩 페이지를 만들거나, JavaScript/TypeScript를 배우는 중이라면 이 조합이 딱이에요. React 같은 프레임워크 없이 HTML을 직접 쓰면서 TypeScript와 Tailwind를 입힐 수 있습니다.

1단계: 프로젝트 생성

npm create vite@latest my-site -- --template vanilla-ts

my-site는 프로젝트 이름입니다. 원하는 이름으로 바꾸세요.
--template vanilla-ts는 "프레임워크 없이 TypeScript만 쓰겠다"는 뜻입니다.

명령을 실행하면 my-site 폴더가 생깁니다.

cd my-site
npm install

확인하기: my-site 폴더 안에 package.json, index.html, src/main.ts 파일이 있으면 성공입니다.

2단계: Tailwind CSS 설치

npm install -D tailwindcss @tailwindcss/vite

Vite 설정 파일에 Tailwind 플러그인을 추가합니다. vite.config.ts 파일을 열어서 아래 내용으로 바꿔 주세요.

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
})

3단계: CSS에 Tailwind 연결

src/style.css 파일을 열고, 기존 내용을 전부 지우고 아래 한 줄만 남깁니다.

@import "tailwindcss";

이 한 줄이 Tailwind의 모든 유틸리티 클래스를 불러옵니다.

4단계: HTML에서 Tailwind 사용해 보기

index.html 파일을 열고 <body> 안쪽을 이렇게 바꿔 보세요.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Site</title>
  </head>
  <body class="bg-gray-100 min-h-screen flex items-center justify-center">
    <div class="bg-white rounded-xl shadow-lg p-8 max-w-md text-center">
      <h1 class="text-3xl font-bold text-gray-800 mb-4">안녕하세요!</h1>
      <p class="text-gray-600">Vite + TypeScript + Tailwind CSS 프로젝트입니다.</p>
    </div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

5단계: 개발 서버 실행

npm run dev

터미널에 http://localhost:5173 같은 주소가 뜹니다. 브라우저에서 열어 보세요.

확인하기: 회색 배경 위에 흰색 카드가 가운데 정렬되어 "안녕하세요!" 텍스트가 보이면 완성입니다.

케이스 B: React + TypeScript + Tailwind CSS (Vite 기반)

React를 쓰되 Next.js 없이 순수 SPA(Single Page Application)로 만들고 싶을 때 이 조합을 씁니다.

1단계: 프로젝트 생성

npm create vite@latest my-react-app -- --template react-ts

react-ts 템플릿을 선택하면 React + TypeScript가 세팅된 프로젝트가 만들어집니다.

cd my-react-app
npm install

확인하기: src/App.tsx, src/main.tsx 파일이 있으면 성공입니다.

2단계: Tailwind CSS 설치

npm install -D tailwindcss @tailwindcss/vite

vite.config.ts를 열어서 Tailwind 플러그인을 추가합니다.

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    react(),
    tailwindcss(),
  ],
})

3단계: CSS에 Tailwind 연결

src/index.css 파일을 열고 기존 내용을 전부 지운 뒤 아래 한 줄만 남깁니다.

@import "tailwindcss";

4단계: 컴포넌트에서 Tailwind 사용해 보기

src/App.tsx를 열고 아래 내용으로 바꿔 보세요.

function App() {
  return (
    <div className="bg-gray-100 min-h-screen flex items-center justify-center">
      <div className="bg-white rounded-xl shadow-lg p-8 max-w-md text-center">
        <h1 className="text-3xl font-bold text-gray-800 mb-4">안녕하세요!</h1>
        <p className="text-gray-600">
          Vite + React + TypeScript + Tailwind CSS 프로젝트입니다.
        </p>
        <button className="mt-6 bg-blue-500 text-white px-6 py-2 rounded-lg hover:bg-blue-600 transition">
          시작하기
        </button>
      </div>
    </div>
  )
}

export default App

5단계: 개발 서버 실행

npm run dev

확인하기: 브라우저에서 http://localhost:5173을 열고, "안녕하세요!" 카드와 파란색 "시작하기" 버튼이 보이면 완성입니다.

Part 2. create-next-app으로 프로젝트 만들기

Next.js가 뭔가요?

Next.js는 React 위에 얹는 풀스택 프레임워크예요. React 혼자서는 못 하는 일들을 처리해 줍니다.

서버 사이드 렌더링(SSR)이 대표적인데, 페이지를 서버에서 먼저 그려서 보내 주기 때문에 구글이나 네이버 같은 검색 엔진이 내용을 읽을 수 있습니다. 파일을 만들면 자동으로 URL이 잡히는 파일 기반 라우팅도 편하고요. app/about/page.tsx를 만들면 /about 주소가 그냥 생깁니다. 같은 프로젝트 안에서 백엔드 API까지 만들 수 있고, <Image> 컴포넌트로 이미지 크기를 자동 최적화하는 기능도 있어요.

Vercel(버셀)이라는 회사가 만들고 관리하고 있고, React 공식 문서에서도 프로덕션용 프레임워크로 추천합니다.

프로젝트 생성 (대화형)

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

이 명령을 실행하면 여러 가지를 물어봅니다. 아래처럼 답하세요.

✔ Would you like to use TypeScript? … Yes
✔ 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? (recommended) … Yes
✔ Would you like to use Turbopack for next dev? … Yes
✔ Would you like to customize the import alias (@/* by default)? … No

각 선택지의 의미는 이렇습니다.

질문	추천 답	이유
TypeScript?	Yes	타입 체크로 버그를 줄여 줍니다
ESLint?	Yes	코드 품질 검사 도구입니다
Tailwind CSS?	Yes	스타일링이 빨라집니다
`src/` directory?	Yes	소스 코드와 설정 파일이 분리되어 깔끔합니다
App Router?	Yes	Next.js 13부터 도입된 최신 라우팅 방식입니다
Turbopack?	Yes	Webpack보다 빠른 차세대 번들러입니다
Import alias?	No	기본값 `@/*`이면 충분합니다

설치가 끝나면 프로젝트 폴더로 이동합니다.

cd my-next-app

확인하기: src/app/page.tsx, src/app/layout.tsx, tailwind.config.ts 파일이 있으면 성공입니다.

폴더 구조 살펴보기

my-next-app/
├── src/
│   └── app/
│       ├── layout.tsx    ← 모든 페이지의 공통 레이아웃
│       ├── page.tsx      ← 메인 페이지 (/)
│       └── globals.css   ← 전역 스타일 (Tailwind 포함)
├── public/               ← 이미지, 파비콘 등 정적 파일
├── package.json
├── tailwind.config.ts
├── tsconfig.json
└── next.config.ts

핵심은 src/app/ 폴더입니다. 여기에 폴더를 만들면 자동으로 URL이 생깁니다.

첫 페이지 수정해 보기

src/app/page.tsx를 열고 기존 내용을 전부 지운 뒤 아래로 바꿔 보세요.

export default function Home() {
  return (
    <div className="bg-gray-100 min-h-screen flex items-center justify-center">
      <div className="bg-white rounded-xl shadow-lg p-8 max-w-md text-center">
        <h1 className="text-3xl font-bold text-gray-800 mb-4">안녕하세요!</h1>
        <p className="text-gray-600">
          Next.js + React + TypeScript + Tailwind CSS 프로젝트입니다.
        </p>
        <button className="mt-6 bg-blue-500 text-white px-6 py-2 rounded-lg hover:bg-blue-600 transition">
          시작하기
        </button>
      </div>
    </div>
  )
}

새 페이지 추가해 보기

파일 기반 라우팅을 직접 체험해 봅시다. src/app/about/page.tsx 파일을 만듭니다.

mkdir -p src/app/about

src/app/about/page.tsx에 아래 내용을 적습니다.

export default function About() {
  return (
    <div className="bg-gray-100 min-h-screen flex items-center justify-center">
      <div className="bg-white rounded-xl shadow-lg p-8 max-w-md">
        <h1 className="text-3xl font-bold text-gray-800 mb-4">소개 페이지</h1>
        <p className="text-gray-600">
          이 파일을 만든 것만으로 /about 주소가 생겼습니다.
          라우터 설정을 따로 할 필요가 없어요.
        </p>
      </div>
    </div>
  )
}

개발 서버 실행

npm run dev

확인하기:

http://localhost:3000 → 메인 페이지가 뜹니다
http://localhost:3000/about → 소개 페이지가 뜹니다. 파일을 만드는 것만으로 라우팅이 완성됩니다.

React만 쓸 때 Vite로 충분한가요?

결론부터 말하면, 뭘 만드느냐에 따라 다릅니다.

Vite + React로 충분한 경우

사내 관리자 페이지(Admin Dashboard)처럼 로그인해야 들어가는 서비스
SEO가 필요 없는 SPA — 검색 엔진에 안 잡혀도 상관없는 앱
개인 프로젝트나 React 학습 용도
Figma, Notion처럼 사용자가 URL로 직접 진입하지 않는 웹 앱

이런 경우에는 Vite + React만으로 충분합니다. 서버 기능이 필요 없으니 오히려 가볍고 단순한 Vite가 맞아요.

Vite + React로는 부족한 경우

블로그, 쇼핑몰, 마케팅 사이트처럼 구글 검색에 잘 잡혀야 하는 서비스
첫 화면이 빨리 떠야 하는 서비스
여러 페이지로 구성된 웹사이트
백엔드 API가 필요하지만 서버를 따로 관리하긴 싫은 경우

Vite + React는 기본적으로 클라이언트 사이드 렌더링(CSR)이거든요. 브라우저가 자바스크립트를 전부 내려받아 실행한 뒤에야 화면이 그려집니다. 그래서 첫 로딩이 느리고, 검색 엔진 봇은 빈 HTML만 보게 돼요.

왜 요즘 Next.js를 쓰는 건가요?

몇 년 전까지는 React 프로젝트 하면 Create React App(CRA)이 표준이었습니다. 그런데 CRA는 2023년 이후로 사실상 업데이트가 멈췄어요. React 공식 문서에서도 더 이상 추천하지 않고요.

React 팀이 대신 내세운 메시지는 "프레임워크를 쓰세요"인데, 거기서 가장 먼저 나오는 이름이 Next.js입니다. 이유를 하나씩 짚어 볼게요.

1. SEO — 검색 엔진이 내용을 읽을 수 있어요

Vite + React(CSR)로 만든 페이지의 HTML 소스를 보면 이렇습니다.

<body>
  <div id="root"></div>
  <script src="/assets/index-abc123.js"></script>
</body>

<div id="root"></div> 안이 텅 비어 있죠. JavaScript가 실행되고 나서야 내용이 채워집니다. 검색 엔진 봇이 이 페이지를 방문하면 빈 페이지로 인식해요.

Next.js(SSR)로 만든 페이지는 서버에서 HTML을 미리 그려서 보내 줍니다.

<body>
  <div id="root">
    <h1>안녕하세요!</h1>
    <p>이 내용을 검색 엔진이 읽을 수 있습니다.</p>
  </div>
</body>

아래 그림은 CSR과 SSR의 렌더링 흐름 차이를 보여 줍니다.

CSR(Vite+React)은 빈 HTML을 받아 JS 실행 후 화면을 그리고, SSR(Next.js)은 서버에서 완성된 HTML을 바로 보내는 흐름 비교 다이어그램

왼쪽 CSR은 브라우저가 빈 HTML을 받아 JS를 내려받고 실행한 뒤에야 화면이 나옵니다. 오른쪽 SSR은 서버에서 HTML을 완성해서 보내므로 바로 화면이 뜨고, 검색 엔진도 내용을 읽을 수 있습니다.

블로그, 쇼핑몰, 회사 사이트를 만든다면 검색 노출은 꼭 필요하잖아요. 이 한 가지만으로도 Next.js를 쓸 이유는 충분합니다.

2. 성능 — 첫 화면이 빨리 뜹니다

CSR은 자바스크립트를 전부 내려받고 → 파싱하고 → 실행해야 화면이 나옵니다. 번들이 커질수록 흰 화면 앞에서 기다리는 시간도 길어지죠.

SSR은 서버에서 완성된 HTML을 바로 보내 주니까 사용자가 더 빨리 내용을 볼 수 있어요. 모바일이나 네트워크가 느린 환경에서 차이가 확연합니다.

3. 파일 기반 라우팅

React만 쓰면 React Router를 따로 설치하고 라우트를 코드로 하나씩 잡아 줘야 해요.

// Vite + React: react-router-dom을 설치하고 직접 설정
<Route path="/about" element={<About />} />
<Route path="/blog/:id" element={<BlogPost />} />

Next.js는 폴더와 파일만 만들면 됩니다.

src/app/about/page.tsx       → /about
src/app/blog/[id]/page.tsx   → /blog/1, /blog/2, ...

설정 파일이 없으니 실수할 여지도 적고요.

4. 풀스택 — 백엔드 API도 같은 프로젝트에

Next.js에서는 src/app/api/ 폴더에 파일을 만들면 API 엔드포인트가 됩니다.

// src/app/api/hello/route.ts
export async function GET() {
  return Response.json({ message: '안녕하세요!' })
}

이 파일 하나로 http://localhost:3000/api/hello에 요청을 보낼 수 있어요. 간단한 API라면 백엔드 서버를 따로 띄울 필요가 없습니다.

한눈에 비교

항목	Vite (React)	Next.js
프로젝트 생성	`npm create vite@latest`	`npx create-next-app@latest`
렌더링 방식	클라이언트(CSR)	서버(SSR) + 클라이언트 혼합
SEO	어려움 (빈 HTML)	좋음 (완성된 HTML)
라우팅	react-router 직접 설정	파일 기반 자동 라우팅
API 서버	별도로 만들어야 함	같은 프로젝트 안에서 가능
배포	Netlify, Vercel 등 정적 호스팅	Vercel, AWS 등 (서버 필요)
러닝 커브	낮음	중간
빌드 속도	매우 빠름	빠름
적합한 프로젝트	SPA, 관리자 페이지, 학습용	블로그, 쇼핑몰, 회사 사이트

언제 뭘 쓰면 되나요?

고민된다면 아래 흐름도를 따라가 보세요.

프로젝트 시작 → React를 쓰나요? → 아니오: Vite(vanilla-ts), 예 → 검색 엔진 노출이 필요한가요? → 아니오: Vite(react-ts), 예: Next.js 의사결정 플로차트

React를 쓰는지, 검색 엔진 노출이 필요한지 두 가지만 따져 보면 어떤 도구가 맞는지 바로 나옵니다.

텍스트로 정리하면 이렇습니다.

"구글에서 검색해서 들어오는 사람이 있나?"

있다 → Next.js
없다 → Vite + React

"React 없이 HTML로 작업하고 싶다" → Vite + vanilla-ts

좀 더 구체적으로 나눠 보면 이렇습니다.

만들고 싶은 것	추천
HTML/CSS/JS 학습, 간단한 웹페이지	Vite (vanilla-ts)
React 학습, 토이 프로젝트	Vite (react-ts)
포트폴리오 사이트	Next.js
블로그	Next.js
쇼핑몰/서비스	Next.js
회사 내부 관리 도구	Vite (react-ts)
Figma 같은 웹 앱	Vite (react-ts)

마무리

프로젝트를 만드는 건 명령어 한 줄이면 끝나는데, 어떤 도구를 고르느냐에 따라 이후 작업 방식이 꽤 달라집니다.

간단히 정리하면 이래요.

HTML/CSS/JS를 익히는 중이거나 간단한 사이트를 만든다 → npm create vite@latest -- --template vanilla-ts
React를 배우거나 SPA를 만든다 → npm create vite@latest -- --template react-ts
검색 엔진 노출이 필요하거나, 여러 페이지로 된 웹사이트를 만든다 → npx create-next-app@latest

처음이라면 Vite로 시작해서 HTML과 React에 익숙해진 다음 Next.js로 넘어가는 순서를 권합니다. Vite에서 배운 React 지식은 Next.js에서 그대로 쓸 수 있어요. 새로 익힐 건 파일 기반 라우팅과 서버 컴포넌트 정도입니다.

두 프로젝트를 한번 직접 만들어 보세요. 같은 화면을 양쪽으로 만들어 비교하면 차이가 바로 느껴집니다.

문제 해결

`npm create vite@latest`가 안 됩니다

Node.js 버전이 18 미만이면 이 에러가 납니다. node -v로 확인하고, 낮으면 nodejs.org에서 LTS 버전을 다시 받으세요.

`npx create-next-app@latest`가 너무 오래 걸립니다

의존성 패키지를 다운로드하는 중입니다. 네트워크 상태에 따라 1~3분 정도 걸릴 수 있어요. 중간에 끊지 말고 기다리세요.

Tailwind 클래스가 적용이 안 됩니다

CSS 파일에 @import "tailwindcss";가 빠져 있을 가능성이 높습니다. Vite 프로젝트는 src/style.css(또는 src/index.css)를, Next.js는 src/app/globals.css를 확인하세요.

`localhost:3000`에 접속이 안 됩니다 (Next.js)

이미 3000번 포트를 쓰고 있는 프로그램이 있을 수 있습니다. 터미널에 뜨는 주소를 잘 확인하세요. 포트가 겹치면 http://localhost:3001 같은 다른 포트로 자동 변경됩니다.

Vite vs create-next-app: 프론트엔드 프로젝트 시작하는 두 가지 방법

시작하기 전에

Part 1. Vite로 프로젝트 만들기

Vite가 뭔가요?

케이스 A: HTML + TypeScript + Tailwind CSS (React 없이)

1단계: 프로젝트 생성

2단계: Tailwind CSS 설치

3단계: CSS에 Tailwind 연결

4단계: HTML에서 Tailwind 사용해 보기

5단계: 개발 서버 실행

케이스 B: React + TypeScript + Tailwind CSS (Vite 기반)

1단계: 프로젝트 생성

2단계: Tailwind CSS 설치

3단계: CSS에 Tailwind 연결

4단계: 컴포넌트에서 Tailwind 사용해 보기

5단계: 개발 서버 실행

Part 2. create-next-app으로 프로젝트 만들기

Next.js가 뭔가요?

프로젝트 생성 (대화형)

폴더 구조 살펴보기

첫 페이지 수정해 보기

새 페이지 추가해 보기

개발 서버 실행

React만 쓸 때 Vite로 충분한가요?

Vite + React로 충분한 경우

Vite + React로는 부족한 경우

왜 요즘 Next.js를 쓰는 건가요?

1. SEO — 검색 엔진이 내용을 읽을 수 있어요

2. 성능 — 첫 화면이 빨리 뜹니다

3. 파일 기반 라우팅

4. 풀스택 — 백엔드 API도 같은 프로젝트에

한눈에 비교

언제 뭘 쓰면 되나요?

마무리

문제 해결

npm create vite@latest가 안 됩니다

npx create-next-app@latest가 너무 오래 걸립니다

Tailwind 클래스가 적용이 안 됩니다

localhost:3000에 접속이 안 됩니다 (Next.js)

프론트엔드개발준비하기

댓글

김성박의 다른 글

Vite + TypeScript + Tailwind CSS로 게시판 만들기

Vite + JavaScript + Tailwind CSS로 게시판 만들기

매일 쓰는 VS Code 생산성 확장 5가지: GitLens, Path Intellisense, Import Cost, Thunder Client, TODO Tree

React 개발을 빠르게 만들어 주는 VS Code 확장 3가지

Vite 프로젝트에 Tailwind CSS 설치하고 VS Code 확장 설정하기

`npm create vite@latest`가 안 됩니다

`npx create-next-app@latest`가 너무 오래 걸립니다

`localhost:3000`에 접속이 안 됩니다 (Next.js)