stitch + aistudio + vscode + node + npm 으로 1분 만에 홈페이지 만들어 호스팅에 올리는 방법

xemaker 2026. 8. 5. 16:37

Google AI Studio(또는 Antigravity/Project IDX)에서 다운로드받은 압축 파일(.zip)을 해제하고, VS Code에서 프로젝트를 실행/개발하기 위해 설치해야 하는 기본 프로그램과 VS Code 확장 프로그램 목록입니다.

1. 내 컴퓨터(PC)에 설치해야 하는 프로그램 (필수 2가지)

React, Vite, Next.js 등 최신 프론트엔드 프로젝트를 실행하고 npm 명령어를 사용하기 위한 핵심 엔진입니다.

설치 방법: Node.js 공식 홈페이지(nodejs.org)에 접속해 LTS (Long Term Support) 버전을 다운로드받아 설치합니다.
설치 확인: 설치 완료 후 VS Code 터미널에서 아래 명령어를 입력해 버전 숫자가 뜨면 정상 설치된 것입니다.
Bash
```
node -v
npm -v
```

버전 관리 및 코드 이력을 관리하기 위한 도구입니다. Node.js 패키지 설치 중 일부 라이브러리가 Git을 필요로 할 때가 있습니다.

VS Code 왼쪽 아이콘 메뉴 중 [블록 모양 아이콘 (Ctrl + Shift + X)]을 누르고 아래 키워드를 검색해서 설치하면 개발이 훨씬 편해집니다.

ES7+ React/Redux/React-Native snippets
- React 컴포넌트(tsx, jsx) 코드를 작성할 때 자동완성 기능을 제공합니다.
Tailwind CSS IntelliSense
- AI Studio 프로젝트에서 많이 쓰는 Tailwind CSS 스타일링 클래스 이름을 자동완성 해줍니다.
Prettier - Code formatter
- 코드를 줄바꿈하고 깔끔하게 정렬해 줍니다.
Env auto-complete / dotenv
- .env.local 파일에 API 키(GEMINI_API_KEY)를 적을 때 가독성을 높여줍니다.

프로그램 설치가 끝났다면 아래 단계대로 진행하시면 됩니다.

압축 해제: .zip 파일의 압축을 풉니다.
폴더 열기: VS Code 실행 $\rightarrow$ [File] $\rightarrow$ [Open Folder...] 클릭 $\rightarrow$ package.json 파일이 들어있는 압축 해제된 폴더 선택.
터미널 열기: 단축키 Ctrl + ~ (Mac: Cmd + ~) 로 VS Code 내부 터미널을 엽니다.
패키지 설치 명령어 입력:(프로젝트에 정의된 라이브러리들이 node_modules 폴더로 다운로드됩니다.)
Bash
```
npm install
```

API Key 설정:

코드 스니펫

GEMINI_API_KEY=AIzaSy...본인_API_KEY...

폴더 내 .env.local (또는 .env) 파일이 있다면 열어서 구글 API Key를 작성합니다.
개발 서버 실행:터미널에 뜬 주소(http://localhost:5173 등)를 Ctrl 키를 누른 채 클릭하면 브라우저에서 화면이 켜집니다!
Bash
```
npm run dev
```