바이브코딩에서 자꾸 나오는 Next.js는 도대체 뭔가요?

AI에게 “예약 서비스를 만들어줘”라고 부탁했더니 이런 대답이 돌아옵니다.

Next.js로 프로젝트를 만들었어요.

나는 예약 화면을 만들어달라고 했을 뿐인데 Next.js는 왜 등장한 걸까요? 웹사이트 이름인지, 프로그래밍 언어인지, 배포할 때 필요한 서비스인지도 헷갈립니다.

바이브코딩을 하다 보면 Next.js를 자주 만나게 돼요. 상세한 사용법부터 배울 필요는 없습니다. 우선 Next.js가 웹서비스의 어느 부분을 맡는 도구인지 이해하면 충분해요.

한 문장으로 말하면

Next.js는 화면과 서버를 한 프로젝트에서 함께 만들 수 있게 도와주는 풀스택 웹 프레임워크입니다.

프레임워크라는 말이 낯설다면 웹서비스를 만들 때 반복해서 필요한 도구와 규칙을 미리 모아둔 틀이라고 생각하면 됩니다.

웹서비스에 필요한 일들을
매번 처음부터 조립하지 않도록 마련된 기본 구조

Next.js를 쓰면 화면을 만드는 일부터 사용자의 요청을 처리하는 서버 작업까지 하나의 프로젝트 안에서 구성할 수 있어요. 그래서 단순한 소개 페이지뿐 아니라 예약, 로그인, 결제, 관리자 기능이 있는 서비스에도 활용됩니다.

Next.js는 React라는 화면 제작 도구를 기반으로 합니다. 지금은 React를 따로 공부하기보다 React가 화면을 맡고, Next.js가 화면과 서버를 아우르는 전체 틀을 제공한다는 정도만 알아두면 충분해요.

웹서비스에는 앞쪽과 뒤쪽이 있어요

온라인 쇼핑몰을 떠올려볼게요.

방문자는 상품 사진을 보고, 옵션을 고르고, 장바구니 버튼을 누릅니다. 이처럼 사용자가 보고 조작하는 부분을 프론트엔드라고 해요.

프론트엔드 화면을 이루는 기본 재료가 아직 낯설다면 HTML, CSS, JavaScript가 각각 무슨 일을 하는지 먼저 살펴봐도 좋아요.

하지만 화면 뒤에서도 많은 일이 일어납니다. 재고가 남았는지 확인하고, 주문 정보를 저장하고, 결제가 정상인지 검증해야 합니다. 이런 일을 처리하는 부분이 서버예요.

프론트엔드
사용자가 보는 화면과 상호작용

서버
화면 뒤에서 요청을 처리하고 중요한 정보를 보호하는 곳

가게에 비유하면 프론트엔드는 손님이 보는 매장이고, 서버는 재고와 주문을 관리하는 사무실에 가깝습니다.

화면만 있는 웹페이지라면 프론트엔드만으로도 충분할 수 있어요. 하지만 신청 내역을 저장하고, 회원을 구분하고, 결제를 처리하는 순간 화면 뒤의 서버가 필요해집니다.

Next.js는 이 둘을 한 프로젝트에서 다뤄요

Next.js의 핵심은 프론트엔드와 서버를 서로 완전히 떨어진 프로젝트로 시작하지 않아도 된다는 점입니다.

예를 들어 워크숍 신청 서비스를 만든다고 해볼게요.

1. 방문자가 신청 화면을 본다.
2. 이름과 연락처를 입력한다.
3. 서버가 입력값을 확인한다.
4. 신청 정보를 데이터베이스에 저장한다.
5. 화면에 신청 완료 결과를 보여준다.

여기서 1, 2, 5는 주로 프론트엔드에서 보이는 일이고, 3과 4는 서버가 맡아야 하는 일입니다. Next.js는 이 흐름을 한 프로젝트 안에서 연결할 수 있게 도와줘요.

그래서 Next.js를 풀스택 프레임워크라고 부릅니다. 풀스택은 프론트엔드와 서버 양쪽을 함께 다룬다는 뜻이에요.

프론트엔드의 요청이 서버와 데이터베이스를 거쳐 다시 화면으로 돌아오는 과정은 웹 애플리케이션의 기본 구조에서 더 자세히 볼 수 있습니다.

Next.js가 맡아주는 일

웹서비스를 만들 때는 화면을 그리는 것 외에도 신경 쓸 일이 많습니다.

• 여러 화면과 주소를 관리하기
• 모든 화면에서 같은 메뉴와 디자인 사용하기
• 사용자의 신청이나 주문 요청 처리하기
• 비밀 키가 방문자에게 노출되지 않게 보호하기
• 데이터베이스, 로그인, 결제 서비스와 연결하기
• 완성된 프로젝트를 실제 서비스로 내보낼 수 있게 준비하기

Next.js는 이런 일을 정리할 수 있는 기본 구조를 제공합니다. 각각의 기능을 Next.js가 자동으로 완성해준다는 뜻은 아니에요. 대신 필요한 외부 서비스를 연결하고, 화면과 서버의 역할을 나눠 운영하기 좋은 틀을 만들어줍니다.

AI에게 기능을 부탁하면 AI는 이 틀 안에서 화면을 만들고, 서버 작업을 연결하고, 프로젝트가 실행되도록 구성합니다.

그래서 AI가 Next.js를 자주 선택해요

처음에는 소개 화면 하나로 시작해도 요구사항은 금방 늘어납니다.

신청 내용을 저장하고 싶어요.
관리자만 신청자 목록을 보게 해주세요.
로그인한 사람에게만 자료를 보여주세요.
결제를 붙이고 싶어요.
새로운 페이지를 더 만들어주세요.

이런 기능에는 화면과 서버가 모두 필요합니다. Next.js는 작은 화면으로 시작한 뒤 서버 기능과 여러 페이지를 같은 프로젝트 안에 추가하기 편해요. 자주 필요한 구조가 이미 마련되어 있고 관련 사례도 많기 때문에 AI가 웹서비스를 만들 때 자주 선택합니다.

즉, AI가 Next.js를 선택했다는 것은 대개 “이 프로젝트를 화면 하나가 아니라 확장 가능한 웹서비스의 형태로 만들겠다”는 뜻에 가깝습니다.

Next.js가 모든 것을 해주는 것은 아니에요

Next.js가 풀스택 프레임워크라고 해서 웹서비스에 필요한 모든 기능이 들어 있는 것은 아닙니다.

• 데이터베이스가 아니에요. 정보를 저장하려면 앱이 기억할 데이터를 보관하는 데이터베이스를 따로 연결해야 합니다.
• 결제 서비스가 아니에요. 결제 업체의 서비스를 연결하고 결과를 검증해야 합니다.
• 로그인 서비스가 아니에요. 필요한 인증 방식을 선택해 연결해야 합니다.
• 디자인 도구가 아니에요. 어떤 화면을 만들지는 여전히 우리가 정해야 합니다.
• 배포 서비스가 아니에요. 완성된 프로젝트를 인터넷에서 실행할 배포 환경이 따로 필요합니다.
• 프로그래밍 언어가 아니에요. 웹서비스를 만들기 위한 도구와 규칙의 묶음입니다.

Next.js의 역할은 이런 기능들을 대신 제공하는 것이 아니라, 화면과 서버 기능을 한 프로젝트 안에서 연결하고 관리하기 쉽게 만드는 것입니다.

모든 웹사이트에 필요한 것은 아니에요

Next.js는 편리하지만 항상 필요한 것은 아닙니다.

행사 날짜와 장소를 보여주는 한 페이지짜리 안내 사이트라면 HTML, CSS, JavaScript만으로도 충분할 수 있어요. 저장할 정보가 없고 방문자마다 다른 결과를 보여줄 필요도 없다면 별도의 서버가 필요하지 않을 수 있습니다.

반대로 다음과 같은 기능이 필요하다면 Next.js 같은 풀스택 구조가 도움이 됩니다.

• 사용자가 입력한 내용을 저장한다.
• 로그인한 사람을 구분한다.
• 방문자마다 다른 정보를 보여준다.
• 결제나 예약 상태를 확인한다.
• 관리자 화면에서 데이터를 관리한다.
• 앞으로 화면과 기능이 계속 늘어난다.

도구가 복잡할수록 좋은 프로젝트가 되는 것은 아니에요. 만들려는 서비스에 맞는 정도의 구조를 선택하는 것이 중요합니다.

바이브코딩에서는 기술 이름보다 역할을 물어보세요

AI가 Next.js를 선택했다면 파일 이름부터 외우기보다 프로젝트의 구조를 쉬운 말로 설명하게 해보세요.

이 프로젝트에서 사용자가 보는 화면과
서버가 처리하는 일을 각각 설명해줘.
처음 접하는 사람도 이해할 수 있는 말로 알려줘.

이 기능에 서버가 꼭 필요한 이유가 뭐야?
화면에서만 처리하면 어떤 문제가 생기는지도 알려줘.

사용자의 입력은 어디에 저장되고,
비밀 키와 개인정보는 어디에서 다뤄지는지 점검해줘.

이 프로젝트에 Next.js가 필요한 이유를 설명해줘.
더 단순한 방식으로 만들 때와 장단점을 비교하고,
아직 코드는 변경하지 마.

이런 질문을 하면 Next.js의 세부 문법을 몰라도 AI가 만든 구조가 내 서비스에 적절한지 판단할 수 있어요.

직접 AI와 첫 웹 프로젝트를 시작하려면 바이브코딩 가이드 7장의 프로젝트 초기화와 첫 페이지 만들기를 따라가 보세요. 데이터를 저장하고 로그인 같은 기능까지 붙일 때는 8장의 핵심 기능 구현을 참고하세요.

정리

• Next.js는 프론트엔드와 서버를 함께 만들 수 있는 풀스택 웹 프레임워크입니다.
• 프론트엔드는 사용자가 보는 화면을, 서버는 요청 처리와 중요한 정보 보호를 맡습니다.
• Next.js는 두 역할을 한 프로젝트 안에서 연결하고 관리하기 쉽게 해줍니다.
• React는 Next.js가 화면을 만들 때 사용하는 기반이며, 처음부터 자세히 배울 필요는 없습니다.
• 데이터베이스, 로그인, 결제, 배포는 필요한 서비스를 별도로 선택해 연결해야 합니다.
• 단순한 한 페이지 사이트라면 Next.js 없이도 충분할 수 있습니다.
• 바이브코딩에서는 기술 문법보다 화면에서 할 일과 서버에서 할 일을 구분하는 것이 먼저입니다.

Next.js라는 이름을 어렵게 생각할 필요는 없어요. 방문자가 보고 누르는 앞쪽과, 요청을 처리하고 정보를 지키는 뒤쪽을 한 프로젝트에서 함께 만들게 해주는 틀입니다.

AI가 Next.js로 프로젝트를 만들었다면 “무슨 파일을 공부해야 하지?”보다 먼저 물어보세요.

이 서비스에서 화면이 맡는 일은 무엇이고,
서버가 맡는 일은 무엇인가?

이 구분이 되면 Next.js가 왜 필요한지 이해하고, AI에게도 훨씬 정확하게 서비스를 맡길 수 있습니다.