기술 스택이란? 바이브코딩을 시작할 때 먼저 정하는 기술 조합

바이브코딩으로 애플리케이션을 만들기 시작하면 AI가 이런 말을 합니다.

Next.js와 TypeScript를 사용하고,
Supabase를 연결한 뒤
Vercel에 배포하겠습니다.

코드를 만들기도 전에 익숙하지 않은 이름이 한꺼번에 등장해요. 이처럼 애플리케이션을 만들고 실행하는 데 사용하는 기술의 조합을 기술 스택(tech stack)이라고 합니다.

기술 스택이 무엇이길래 애플리케이션을 만들 때 먼저 정하는 걸까요? 이름을 모두 외워야 바이브코딩을 시작할 수 있는 걸까요?

기술 스택은 역할이 다른 기술의 조합이에요

웹 애플리케이션은 하나의 기술만으로 만들지 않습니다. 화면을 만들고, 사용자의 요청을 처리하고, 데이터를 저장하고, 완성한 결과를 인터넷에 올리는 여러 역할이 필요해요.

각 역할을 맡는 기술을 모아놓은 조합이 기술 스택입니다.

화면을 만드는 기술
+ 서버에서 일하는 기술
+ 데이터를 저장하는 기술
+ 인터넷에 올리는 기술
= 기술 스택

요리할 때 칼 하나만 필요한 것이 아니라 냄비, 프라이팬, 오븐처럼 역할이 다른 도구가 필요한 것과 비슷해요. 어떤 음식을 만들지에 따라 사용하는 도구의 조합도 달라집니다.

기술 스택도 마찬가지예요. 모든 프로젝트가 같은 기술을 사용할 필요는 없습니다.

하나의 웹 애플리케이션을 예로 볼게요

회원이 로그인하고 신청서를 작성할 수 있는 웹 애플리케이션을 만든다고 해볼게요. AI가 다음 기술 스택을 제안할 수 있습니다.

언어
→ TypeScript

화면과 서버 기능을 함께 만드는 웹 애플리케이션 프레임워크
→ Next.js

화면의 모양을 만드는 도구
→ Tailwind CSS

데이터베이스
→ PostgreSQL

데이터베이스를 제공하는 서비스
→ Supabase

웹 애플리케이션을 올리는 곳
→ Vercel

코드의 변경 기록을 보관하는 곳
→ GitHub

한 줄로 적으면 다음과 같습니다.

TypeScript + Next.js + Tailwind CSS
+ PostgreSQL + Supabase
+ Vercel + GitHub

이 목록만 보면 복잡해 보이지만 역할을 붙이면 이해하기 쉬워요. 각 기술이 같은 일을 하는 것이 아니라 애플리케이션의 서로 다른 부분을 맡고 있습니다.

화면·서버·데이터베이스가 어떻게 연결되는지 먼저 알고 싶다면 웹 애플리케이션의 기본 구조를 참고하세요.

언어, 웹 애플리케이션 프레임워크, 서비스는 서로 달라요

기술 스택을 설명할 때는 종류가 다른 이름을 한 줄에 섞어서 말합니다. 그래서 모두 비슷한 프로그램처럼 느껴질 수 있어요.

언어

코드를 작성할 때 사용하는 문법입니다. JavaScript와 TypeScript가 여기에 해당해요.

웹 애플리케이션 프레임워크

웹 애플리케이션을 만드는 데 필요한 구조와 규칙을 제공합니다. Next.js는 React를 기반으로 화면과 서버 기능을 한 프로젝트에서 만들 수 있는 웹 애플리케이션 프레임워크예요.

데이터베이스

회원, 게시물, 주문처럼 애플리케이션이 기억해야 할 정보를 저장합니다. PostgreSQL이 여기에 해당해요.

서비스와 플랫폼

데이터베이스나 배포 환경처럼 직접 운영하기 어려운 기능을 대신 제공합니다. Supabase와 Vercel이 여기에 해당해요.

TypeScript → 언어
Next.js    → React 기반 웹 애플리케이션 프레임워크
PostgreSQL → 데이터베이스
Supabase   → 데이터베이스 서비스
Vercel     → 배포 플랫폼

HTML, CSS, JavaScript의 역할이 아직 낯설다면 HTML, CSS, JavaScript는 각각 무슨 일을 하나요?를 먼저 읽어도 좋습니다. Next.js를 별도로 설명한 바이브코딩에서 자꾸 나오는 Next.js는 도대체 뭔가요?도 이어서 볼 수 있어요.

기술 스택을 먼저 정하면 코드의 방향이 정해져요

같은 기능도 어떤 기술을 선택하느냐에 따라 코드와 프로젝트 구조가 달라집니다.

기술 스택 선택
↓
프로젝트의 폴더 구조
↓
화면과 서버를 만드는 방식
↓
데이터를 저장하고 불러오는 방식
↓
테스트하고 배포하는 방식

예를 들어 Next.js를 선택하면 AI는 Next.js의 폴더 구조와 규칙에 맞춰 코드를 만듭니다. Supabase와 PostgreSQL을 선택하면 회원과 신청 정보를 해당 데이터베이스에 저장하는 방향으로 설계해요. Vercel을 선택하면 Next.js 프로젝트를 Vercel에 올리는 방법에 맞춰 배포를 준비합니다.

기술 스택을 정하지 않고 코드를 만들기 시작하면 AI가 작업할 때마다 서로 다른 기술을 제안할 수 있습니다. 이미 한 프레임워크로 만든 기능을 다른 프레임워크 방식으로 다시 만들거나, 같은 역할의 데이터베이스 서비스를 여러 개 연결할 수도 있어요.

처음에 사용할 기술과 역할을 정해두면 AI도 일관된 방향으로 코드를 만들기 쉬워집니다.

모든 기술을 직접 골라야 하나요?

그럴 필요는 없습니다. 처음 만드는 사람은 어떤 선택지가 있는지조차 알기 어려워요. 만들고 싶은 기능과 운영 조건을 알려주고 AI에게 기술 스택을 추천받을 수 있습니다.

다만 AI가 추천한 이름을 그대로 받아들이기 전에 세 가지는 확인하는 편이 좋아요.

이 기술이 어떤 역할을 맡나요?
왜 내 프로젝트에 필요한가요?
처음 운영하기에 너무 복잡하지 않나요?

AI가 자주 사용한다는 이유만으로 내 프로젝트에도 필요한 것은 아닙니다. 회원가입이 없는 소개 페이지에 복잡한 데이터베이스와 인증 시스템을 붙일 필요는 없어요. 반대로 주문과 결제가 필요한 서비스인데 데이터를 저장할 곳을 빼면 운영할 수 없습니다.

좋은 기술 스택은 프로젝트에 맞는 조합이에요

모든 프로젝트에 가장 좋은 기술 스택은 없습니다.

누군가에게 익숙하고 편한 조합이 처음 만드는 사람에게는 너무 복잡할 수 있어요. 큰 서비스에 필요한 구조가 작은 프로젝트에는 과할 수도 있습니다.

기술 스택을 고를 때는 다음 조건을 살펴보세요.

• 필요한 기능을 만들 수 있나요?
• AI가 참고할 공식 문서와 사용 사례가 충분한가요?
• 내가 배포하고 운영할 수 있나요?
• 비슷한 역할의 기술을 중복으로 넣지 않았나요?
• 지금 필요하지 않은 기술까지 미리 넣지 않았나요?
• 문제가 생겼을 때 무엇을 확인해야 하는지 알 수 있나요?

기술이 많다
≠ 좋은 기술 스택

필요한 역할을 빠짐없이 맡는다
= 내 프로젝트에 맞는 기술 스택

처음에는 필요한 기능을 만들 수 있는 단순한 조합으로 시작하는 편이 좋습니다. 실제 필요가 생겼을 때 기술을 추가해도 늦지 않아요.

기술 스택은 한 번 정하면 바꿀 수 없나요?

바꿀 수 있습니다. 하지만 이미 만든 기능이 많을수록 변경할 코드도 많아져요.

글꼴이나 버튼 라이브러리처럼 비교적 쉽게 바꿀 수 있는 기술도 있고, 프레임워크나 데이터베이스처럼 애플리케이션 전체에 영향을 주는 기술도 있습니다.

영향이 비교적 작은 변경
→ 아이콘·글꼴·일부 화면 도구

영향이 큰 변경
→ 언어·프레임워크·데이터베이스·배포 구조

그래서 개발을 시작할 때 큰 방향을 먼저 정합니다. 완벽한 선택을 해야 한다는 뜻은 아니에요. 지금 만들 기능과 운영할 사람에게 무리가 없는 조합인지 확인하면 됩니다.

내 프로젝트의 기술 스택을 확인해보세요

이미 AI와 애플리케이션을 만들고 있다면 새로 고를 필요 없이 현재 무엇을 사용하고 있는지부터 확인하세요. 터미널 명령어를 직접 입력하거나 설정 파일을 하나씩 읽을 필요는 없습니다.

AI에게 다음처럼 요청해보세요.

현재 프로젝트의 기술 스택을 확인해줘.

사용 중인 기술을 다음 역할로 나눠서 정리해줘.
- 언어
- 웹 애플리케이션 프레임워크
- 화면 스타일
- 서버
- 데이터베이스
- 인증
- 외부 서비스
- 배포
- 코드 기록

각 기술이 무슨 일을 하는지 입문자도 이해할 수 있게 설명해줘.
비슷한 역할의 기술이 중복으로 들어갔거나 지금 필요하지 않은 기술이 있다면 알려줘.
확인만 하고 아직 코드는 수정하지 마.

새 프로젝트를 시작한다면 만들 기능을 먼저 설명한 뒤 추천을 요청하세요.

내가 만들 애플리케이션에 필요한 기술 스택을 추천해줘.

먼저 필요한 기능과 운영 조건을 질문해줘.
각 기술이 어떤 역할을 맡는지와 선택한 이유를 쉽게 설명해줘.
처음 만드는 사람이 개발하고 운영하기에 너무 복잡하지 않은지도 확인해줘.

AI가 보여준 기술 목록을 보면서 각 기술의 역할을 한 문장으로 말할 수 있는지 확인하면 됩니다.

기술 스택을 알면 문제를 찾기도 쉬워요

기술 스택은 프로젝트를 시작할 때만 사용하는 말이 아닙니다. 문제가 생겼을 때 어디를 확인할지 정하는 지도 역할도 해요.

화면 모양이 이상함
→ HTML·CSS·화면 도구 확인

버튼을 눌러도 처리되지 않음
→ 웹 애플리케이션 프레임워크의 서버 기능 확인

입력한 정보가 사라짐
→ 데이터베이스 연결 확인

내 컴퓨터에서만 작동함
→ 배포 플랫폼과 환경변수 확인

데이터가 어디에 저장되는지 궁금하다면 내 웹앱의 데이터는 어디에 저장될까요?를, 배포 플랫폼의 역할이 궁금하다면 Vercel·Netlify·Railway 비교를 참고하세요.

기술 이름을 모두 외우지 않아도 역할을 알면 AI에게 문제의 위치를 더 정확하게 물을 수 있습니다.

정리

• 기술 스택은 애플리케이션을 만들고 실행하는 데 사용하는 기술의 조합입니다.
• 언어, 웹 애플리케이션 프레임워크, 데이터베이스, 서비스와 배포 플랫폼이 서로 다른 역할을 맡습니다.
• 기술 스택을 정하면 프로젝트 구조, 코드 작성, 데이터 저장과 배포 방식의 방향이 정해집니다.
• 모든 기술을 직접 고를 필요는 없지만 AI가 무엇을 왜 선택했는지는 확인해야 합니다.
• 좋은 기술 스택은 유명한 기술을 많이 넣은 조합이 아니라 내 프로젝트에 필요한 역할을 단순하게 채운 조합입니다.
• 이미 프로젝트를 만들고 있다면 AI에게 현재 기술 스택과 각 기술의 역할을 정리해달라고 요청하세요.

가장 중요한 한 줄만 기억하면 됩니다.

기술 스택
= 내 애플리케이션을 만드는 도구의 조합

기술 스택을 안다는 것은 모든 기술을 사용할 줄 안다는 뜻이 아닙니다. 내 애플리케이션에서 어떤 도구가 어떤 역할을 맡는지 안다는 뜻이에요.