ai.ktoolu
AI 활용 팁·2026년 6월 3일·8분 읽기

React? Next.js? Astro? 바이브 코딩 시작했는데 뭐가 뭔지 모르겠다면

AI가 짜준 코드에 React, Next.js, Astro가 나와서 당황한 바이브 코더를 위한 프레임워크 입문 가이드. 비유와 예시로 쉽게 설명.

AI한테 "웹사이트 만들어줘" 했더니 코드를 잔뜩 뱉어줬는데, 첫 줄에 import React from 'react'가 적혀있어서 당황하신 적 있죠?

저도 처음엔 그랬어요. React가 뭔지도 모르는데 코드는 돌아가고, 화면도 뜨는데, 누군가 "그거 어떤 프레임워크 써요?"라고 물어보면 뭐라고 대답해야 할지 몰랐습니다.

이 글은 프레임워크가 뭔지, 그리고 각각 어떤 상황에 맞는지를 최대한 쉽게 정리했습니다. 개발을 본격적으로 공부하지 않아도 읽을 수 있게요.

프레임워크가 뭐예요?

비유로 시작할게요.

집을 짓는다고 생각해봐요. 아무것도 없는 빈 땅에서 시작하면 벽돌을 굽고, 시멘트를 바르고, 전기 배선까지 직접 해야 합니다. 엄청난 시간이 걸리죠.

그런데 기초공사, 전기 배선, 상하수도가 이미 다 된 집터가 있다면요? 우리는 그냥 벽 색깔 고르고 가구만 갖다 놓으면 됩니다.

프레임워크가 바로 그 "이미 기초공사 된 집터"예요.

웹사이트를 만들 때 로그인 기능, 페이지 이동, 화면 업데이트 같은 건 어떤 서비스에나 필요한 공통 기능인데, 이걸 매번 처음부터 만들면 너무 오래 걸려요. 프레임워크는 그런 공통 기능들을 미리 만들어놓고, 우리는 우리만의 것(내용, 디자인, 추가 기능)만 얹으면 되게 해줍니다.

자, 이제 각각을 살펴볼게요.

React — 레고 블록으로 화면 만들기

React는 엄밀히 말하면 "라이브러리"이지 프레임워크는 아니에요. 하지만 워낙 많이 쓰이니 같이 다룰게요.

React의 핵심 개념은 컴포넌트입니다.

쇼핑몰 상품 카드를 생각해보세요. 이미지, 상품명, 가격, 장바구니 버튼이 있는 그 카드요. 상품이 1,000개라면 카드 디자인을 1,000번 반복해서 만들어야 할까요?

React에서는 그 카드를 부품(컴포넌트) 하나로 만들고, 내용만 다르게 해서 1,000번 찍어낼 수 있습니다. 레고 블록을 한 번 만들어놓고 필요한 곳에 끼워넣는 거예요.

바이브 코딩할 때 AI가 만들어주는 코드의 상당수가 React 기반입니다. "어 이 코드에 왜 함수가 이렇게 많지?"라고 느꼈다면, 그게 다 컴포넌트예요.

이런 분께 맞아요

  • AI가 짜준 코드에 React가 포함되어 있을 때
  • 버튼 누르면 반응하는 인터랙티브한 화면이 필요할 때

Next.js — React에 슈퍼파워를 더한 것

React만 쓰면 한 가지 문제가 있어요. 구글 검색에 잘 안 잡힙니다.

이유가 좀 기술적인데, 쉽게 설명하면 이래요. React는 기본적으로 브라우저가 화면을 직접 그려요. 그런데 구글 봇이 처음 페이지를 가져갈 때는 "내용이 없는 빈 껍데기"처럼 보일 수 있거든요.

Next.js는 이걸 해결해줍니다. 서버에서 페이지를 미리 만들어서 구글한테 완성된 내용을 전달해요. 검색 최적화(SEO)가 훨씬 잘 됩니다.

거기다 편의 기능도 있어요. /pages/about.js 파일을 만들면 자동으로 /about 주소가 생겨요. 주소 설정을 따로 할 필요가 없죠.

React가 자동차 엔진이라면, Next.js는 핸들, 계기판, 안전벨트까지 다 갖춘 완성차예요.

이런 분께 맞아요

  • 블로그, 포트폴리오, 쇼핑몰처럼 구글 검색이 중요한 사이트
  • 바이브 코딩으로 풀스택 웹앱을 빠르게 만들고 싶을 때
  • AI한테 "Next.js로 만들어줘"라고 하면 가장 결과가 잘 나오는 프레임워크 중 하나예요

Astro — 진짜 빠른 사이트를 원한다면

Astro는 독특한 철학을 갖고 있어요.

대부분의 웹 프레임워크는 자바스크립트를 많이 씁니다. 그런데 Astro는 이렇게 생각해요: "자바스크립트가 꼭 필요한 부분에만 써라."

웹사이트에서 진짜 움직임이 필요한 부분은 생각보다 많지 않아요. 글 읽는 블로그, 내용 보여주는 포트폴리오는 사실 그냥 정적인 페이지잖아요. Astro는 그런 곳에 불필요한 자바스크립트를 쑤셔넣지 않아서 로딩이 엄청 빠릅니다.

또 한 가지 특이한 점은 Astro 안에서 React 컴포넌트, Svelte 컴포넌트를 섞어서 쓸 수 있어요. 다른 프레임워크에서 만든 부품을 가져다 붙일 수 있다는 거예요.

이런 분께 맞아요

  • 포트폴리오 사이트를 빠르게 만들고 싶을 때
  • 직접 블로그를 운영하고 싶을 때
  • 빠른 로딩 속도가 중요한 콘텐츠 위주 사이트

Svelte — 코드가 훨씬 짧은 React 대안

React랑 같은 역할을 하는데, 코드가 눈에 띄게 짧아요.

버튼 클릭하면 숫자가 올라가는 단순한 기능을 만든다고 해봐요.

React로 만들면 이 정도예요:

import { useState } from 'react'

function Counter() {
  const [count, setCount] = useState(0)
  return <button onClick={() => setCount(count + 1)}>{count}</button>
}

Svelte로는 이렇게 줄어들어요:

<script>
  let count = 0
</script>

<button on:click={() => count++}>{count}</button>

같은 기능인데 코드가 절반 이하예요. Svelte가 컴파일러 방식이라 가능한 일이에요. 실행될 때 깔끔한 자바스크립트로 변환되거든요. 결과물도 가볍고, 처음 배우는 사람한테 덜 혼란스럽다는 장점도 있어요.

이런 분께 맞아요

  • React가 너무 복잡하게 느껴질 때
  • AI가 Svelte 코드를 만들어줬을 때 이해하고 싶을 때

Nuxt — Vue 생태계의 Next.js

Vue.js라는 프레임워크가 있어요. React와 비슷한 역할을 하는데, 특히 아시아권에서 많이 쓰입니다. 코드 스타일이 React보다 좀 더 HTML에 가깝다는 평이 있어요.

Nuxt는 Vue에 Next.js가 React에 해준 것과 똑같은 역할을 해요.

Next.js = React + 서버 기능
Nuxt = Vue + 서버 기능

이렇게 이해하면 돼요. Vue 기반 코드를 받거나, Nuxt 템플릿으로 작업해야 할 때 참고하세요.

이런 분께 맞아요

  • AI가 Vue.js 기반 코드를 짜줬을 때
  • Nuxt 템플릿을 받아서 작업할 때

Python — AI 기능 붙일 때 단골 선택

Python은 프레임워크가 아니라 프로그래밍 언어예요. 그런데 왜 이 목록에 있냐면, 웹 백엔드(서버) 만들 때 Python을 많이 쓰기 때문입니다.

Python으로 서버를 만들 때 자주 쓰는 도구들:

  • FastAPI — 요즘 가장 많이 쓰여요. API 서버 만들기에 최적. AI도 잘 써요.
  • Flask — 아주 가볍고 단순. 간단한 프로젝트에 딱.
  • Django — 거의 모든 게 내장된 완성형. 규모 있는 서비스에 적합.

바이브 코딩으로 AI 기능(챗봇, 이미지 생성, 요약 등)을 붙이고 싶다면 Python이 압도적으로 유리해요. OpenAI, Anthropic, 허깅페이스 같은 AI 서비스들이 Python 라이브러리를 제일 먼저, 제일 잘 지원하거든요.

프론트(화면)는 Next.js나 React로, 백엔드(AI 기능 처리)는 Python으로 나눠서 만드는 조합이 바이브 코딩에서 꽤 흔해요.

이런 분께 맞아요

  • AI 기능이 들어간 서비스를 만들고 싶을 때
  • 데이터 처리, 자동화 같은 백엔드 로직이 필요할 때

그래서 뭘 써야 할까요?

솔직히 바이브 코딩에서 제일 중요한 건 어떤 프레임워크가 더 좋은지가 아니에요.

AI가 짜준 코드가 어디서 실행되는 건지, 내가 뭘 만들고 있는 건지 대략 이해하는 것이에요. 코드 수정보다 방향 설정에서 삐끗하는 경우가 훨씬 많거든요.

틀려도 괜찮아요. 어차피 AI한테 다시 물어보면 되니까요.

모든 글 보기