AI 웹앱 제작기 ③ 개발 환경부터 만들기, 왜 Node.js와 VS Code가 필요할까?

AI 웹앱을 만들기 전에 개발 환경부터 준비해야 하는 이유

AI의 도움을 받아 웹앱을 만든다고 해서 바로 화면을 만들거나 기능을 추가할 수 있는 것은 아닙니다. 먼저 웹앱을 실행할 수 있는 환경을 준비해야 합니다.

처음 개발을 접하는 사람이라면 "왜 프로그램을 여러 개 설치해야 하지?"라는 의문이 생길 수 있습니다. 실제로 저 역시 AI에게 웹앱 제작을 요청하기 전까지는 Node.js와 VS Code가 어떤 역할을 하는지 정확히 알지 못했습니다.

이번 글에서는 AI 웹앱을 만들기 위해 가장 먼저 준비했던 개발 환경과 Node.js, VS Code가 왜 필요한지 쉽게 설명하겠습니다. 이 내용을 이해하면 이후 프로젝트 생성, localhost 실행, 첫 화면 만들기까지 자연스럽게 이어갈 수 있습니다.

Node.js와 VS Code 환경 구축

---

개발 환경이란 무엇일까?

웹사이트를 사용하는 것과 웹앱을 만드는 것은 다릅니다.

웹사이트는 브라우저만 있으면 접속할 수 있지만, 웹앱을 개발하려면 코드를 작성하고 실행할 수 있는 환경이 필요합니다.

이처럼 개발에 필요한 프로그램과 도구를 준비하는 과정을 개발 환경 구축이라고 합니다.

AI가 코드를 작성해 주더라도 그 코드를 실행하고 수정하는 작업은 사용자의 컴퓨터에서 이루어집니다. 따라서 AI 웹앱 제작에서도 개발 환경은 가장 먼저 준비해야 하는 단계입니다.

---

이번 프로젝트에서 사용한 개발 환경

이번 프로젝트에서는 다음과 같은 도구를 사용했습니다.

• Node.js
• VS Code
• ChatGPT
• Claude
• Supabase
• GitHub
• Vercel

이 가운데 실제 개발 환경을 구성하는 핵심 프로그램은 Node.js와 VS Code입니다.

나머지 서비스는 프로젝트를 관리하거나 배포하는 과정에서 활용했습니다.

---

Node.js란 무엇일까?

처음에는 이름만 보고 프로그램을 만드는 도구라고 생각했습니다.

하지만 실제 역할은 조금 다릅니다.

Node.js는 자바스크립트(JavaScript) 코드를 컴퓨터에서 실행할 수 있도록 도와주는 실행 환경(Runtime) 입니다.

쉽게 말하면 AI가 만들어 준 코드를 내 컴퓨터에서 실행해 주는 역할을 합니다.

만약 Node.js가 없다면 AI가 작성한 코드를 실행할 수 없습니다.

Node.js 다운로드

---

왜 Node.js가 필요할까?

이번 프로젝트는 Next.js를 이용해 웹앱을 제작했습니다.

Next.js는 실행을 위해 Node.js가 반드시 필요합니다.

예를 들어 AI가 다음과 같이 프로젝트를 생성하라고 안내하는 경우가 있습니다.

 

npx create-next-app@latest

 

또는

 

npm run dev

 

이 명령어들은 모두 Node.js가 설치되어 있어야 실행됩니다.

즉,

AI가 코드를 만들어 주더라도 Node.js가 없으면 프로젝트 자체를 실행할 수 없습니다.

---

npm은 무엇일까?

Node.js를 설치하면 함께 설치되는 기능이 있습니다.

바로 npm(Node Package Manager) 입니다.

npm은 프로젝트에서 필요한 라이브러리를 설치하는 도구입니다.

예를 들어

• React
• Next.js
• Tailwind CSS
• Supabase 라이브러리

등을 설치할 때 모두 npm을 사용합니다.

AI가

"npm install"

이라는 명령을 자주 알려주는 이유도 바로 여기에 있습니다.

---

VS Code란 무엇일까?

VS Code는 코드를 작성하는 편집기(Code Editor) 입니다.

쉽게 말하면 개발자가 사용하는 메모장이라고 생각하면 이해하기 쉽습니다.

다만 일반 메모장과는 기능이 크게 다릅니다.

예를 들어

• 코드 자동 완성
• 색상 구분
• 오류 표시
• 프로젝트 폴더 관리
• 터미널 실행
• AI 확장 프로그램 설치

등 다양한 기능을 제공합니다.

이번 프로젝트에서도 모든 작업은 VS Code에서 진행했습니다.

https://code.visualstudio.com/

---

왜 VS Code를 많이 사용할까?

웹 개발에서 가장 많이 사용하는 코드 편집기 중 하나입니다.

특히 AI와 함께 개발할 때 장점이 많습니다.

예를 들어

• AI가 생성한 코드를 바로 붙여 넣을 수 있습니다.
• 프로젝트 구조를 한눈에 확인할 수 있습니다.
• 오류가 발생하면 위치를 쉽게 찾을 수 있습니다.
• 터미널을 열어 프로젝트를 실행할 수 있습니다.

처음 개발을 시작하는 사람도 비교적 쉽게 사용할 수 있다는 점이 큰 장점입니다.

---

터미널은 무엇일까?

처음 개발을 시작하면 가장 낯설게 느껴지는 것이 터미널입니다.

검은 화면이 나타나기 때문에 어려워 보일 수 있지만, 실제로는 컴퓨터에게 명령을 전달하는 창입니다.

예를 들어

 

npm run dev

 

를 입력하면

컴퓨터는 프로젝트를 실행합니다.

또

 

npm install

 

을 입력하면

필요한 라이브러리를 자동으로 설치합니다.

AI가 알려주는 명령어 대부분은 이 터미널에서 실행하게 됩니다.

Node. js와 VS Code를 사용하여 웹앱을 제작하는 여성

---

이번 프로젝트에서는 어떻게 준비했을까?

프로젝트를 시작하면서 가장 먼저 진행한 작업은 다음과 같습니다.

1. Node.js 설치
2. VS Code 설치
3. 새로운 프로젝트 생성
4. 터미널 실행
5. AI가 알려준 명령어 입력
6. 프로젝트 실행

여기까지 완료되어야 비로소 웹앱을 만들기 위한 준비가 끝납니다.

겉으로 보기에는 단순한 설치 과정처럼 보이지만, 이후 모든 개발 과정의 기반이 되는 중요한 단계였습니다.

---

개발 환경을 먼저 이해하면 이후 과정이 쉬워진다

많은 초보자가 AI에게 코드를 생성해 달라고 요청한 뒤 바로 실행하려고 합니다.

하지만 개발 환경이 준비되지 않았다면 아무리 좋은 코드도 실행할 수 없습니다.

반대로 Node.js와 VS Code의 역할만 이해해도 AI가 알려주는 대부분의 명령어를 훨씬 쉽게 이해할 수 있습니다.

특히 오류가 발생했을 때도 어디에서 문제가 생겼는지 파악하기가 훨씬 수월합니다.

---

이번 프로젝트에서 얻은 점

이번 단계에서 가장 크게 느낀 점은 AI가 개발을 대신해 주는 것이 아니라 개발 과정을 도와주는 도구라는 사실이었습니다.

AI는 필요한 코드를 생성하고 문제 해결 방향을 제시할 수 있지만, 그 코드를 실행하고 확인하는 환경은 직접 준비해야 합니다.

Node.js와 VS Code는 단순히 설치해야 하는 프로그램이 아니라, 앞으로 진행할 모든 웹앱 개발의 기반이 되는 필수 도구였습니다.

이 과정을 이해하고 나니 이후 AI가 제안하는 명령어나 프로젝트 구조도 훨씬 쉽게 받아들일 수 있었습니다.

---

이번 글 핵심 요약

• 개발 환경은 AI 웹앱 제작의 첫 번째 준비 단계이다.
• Node.js는 웹앱을 실행하기 위한 실행 환경(Runtime)이다.
• npm은 필요한 라이브러리를 설치하고 관리하는 도구이다.
• VS Code는 코드를 작성하고 프로젝트를 관리하는 편집기이다.
• 개발 환경을 이해하면 이후 AI와 함께하는 웹앱 제작 과정이 훨씬 쉬워진다.

 

2026.07.09 - [AI 활용] - AI 웹앱 제작기 ①엑셀 업무 자동화를 위해 AI 웹앱을 만들었습니다

AI 웹앱 제작기 ①엑셀 업무 자동화를 위해 AI 웹앱을 만들었습니다

2026.07.20 - [AI 웹앱 제작기] - 바이브 코딩(Vibe Coding)이란? AI가 개발의 방식을 바꾸고 있는 이유

바이브 코딩(Vibe Coding)이란? AI가 개발의 방식을 바꾸고 있는 이유