웹 사이트 제작 AI를 잘 활용하여 웹사이트를 개발하는 방법

지금 회사에서 풀스택 하는데

백엔드 : C#, Azure, .NET

프론트엔드 : HTML, CSS, JS(조금)

DB : MSSQL

이렇게 하고 있고 서버관리랑 배포 이런거는 AWS쓰는데 CTO님이 알아서 다 하심 난 그런거 신경쓸 겨를도 없음 하고 싶은데 근데 뭔가 사이드 프로젝트 하는데 목업디자인은 요즘 웹 빌더 생성형 AI가 다하더라고,

근데 AI가 다 Typescript + Vite + React 이 조합임 DB는 Firebase아니면 Supabase (몽고디비 Atlas 써봤는데 Supabase가 더 나았음) 결론 Typescript좀 공부해서 목업디자인은 AI + 나머지 백엔드는 JS로 하려고 하는데 나 뭐부터 공부해야할까

 

에 대한 GPT의 대답

 

✅ 너가 익숙한 것

• 프로그래밍 기초 ✅
• 백엔드 설계와 DB 연동 ✅
• 프론트엔드 구조 감 ✅
• 배포는 아직 직접 해본 적 없음 ❌

---

🚀 목표: AI가 목업해준 사이트를 기반으로

👉 TypeScript + React + Vite + Supabase 조합으로 백엔드 및 프론트 구현하기

---

🔥 공부 우선순위 (현실적 가이드)

1. TypeScript 기본 문법

이미 JS를 조금 다뤄봤으니 1~2일이면 기초 문법은 끝냄

• type, interface, enum, union, generics 등
• TypeScript 공식 핸드북 (초심자용)
• 추천: TypeScript in 100 Seconds (영상)

---

2. React + Vite로 프로젝트 시작하기

AI가 만들어주는 건 대부분 Vite 기반이니까 직접 만져봐야 감이 와

• Vite + React + TypeScript 템플릿으로 시작하기

bash

CopyEdit

npm create vite@latest my-app -- --template react-ts cd my-app npm install npm run dev

• 핵심 개념:
  • 상태 관리: useState, useEffect
  • props와 타입 정의
  • 컴포넌트 구조 분리
  • 이벤트 처리

---

3. Supabase 기본 사용법

Firebase보다 SQL 기반이라 너한텐 훨씬 익숙할 거야 (PostgreSQL 기반)

• Auth: 이메일 로그인/가입 구현
• DB 연결: Supabase dashboard에서 테이블 만들기 + 쿼리 연동
• CRUD API: supabase-js SDK로 데이터 조작

🔗 공식 튜토리얼

---

4. 실전 미니 프로젝트 해보기

예시:

• 투표 앱 (로그인, 투표 생성, 실시간 결과 보기)
• 커피 N분의1 앱 (사람 추가/삭제, 누가 샀는지 기록)

이 과정에서:

• 폴더 구조 잡는 법
• Auth 관리
• DB 쿼리
• 상태 관리
• 배포 (Vercel, Netlify)

까지 자연스럽게 배우게 돼

---

5. (선택) 배포 & 서버리스 감 잡기

지금은 CTO님이 하시지만, 사이드 프로젝트는 네가 다 해야 하니까

• Vercel로 배포 (Next.js 기반이면 특히 강력)
• Supabase도 자동 배포 기능 지원
• 서버리스 함수(Lambda 같은 개념)도 나중에 살짝 보는 걸 추천

---

✨ 최종 흐름 요약

css

CopyEdit

[TypeScript 문법] ↓ [Vite + React 환경 만들기] ↓ [Supabase 연동 & 로그인 구현] ↓ [작은 프로젝트로 경험] ↓ [Vercel로 배포]

---

🤝 마지막 팁

• AI 웹 빌더에서 생성된 코드를 그냥 쓰지 말고, 한 줄 한 줄 분석해보는 게 가장 큰 공부야.
• TS와 JS를 병행해서 보는 것도 도움돼. 처음엔 에러가 많지만 그게 TS 배우는 핵심이라서.

 

함께보면 좋은 글 👇
https://stupidly-honest.tistory.com/172

Vite + React + TypeScript 조합이 자주 쓰이는 이유