Dev Services Directory
개발 서비스 가이드
바이브 코딩과 웹 개발에 필수적인 도구와 서비스를 카테고리별로 정리했습니다. 프레임워크, 호스팅, 데이터베이스 등 개발자를 위한 완벽 가이드.
배포 & 호스팅
5
Vercel
Next.js 최적 호스팅. 자동 프리뷰 배포와 엣지 네트워크로 최고의 성능
Next.js 프로젝트라면 Vercel이 가장 간편하고 빠른 배포 옵션
Netlify
정적 사이트와 서버리스 함수. 폼, 인증, 분석 기능 내장
Astro, Svelte, Vue 프로젝트 배포에 강력한 선택
Cloudflare Pages
글로벌 CDN 기반 초고속 배포. Workers와 D1 데이터베이스 통합
무료 플랜이 넉넉하고 글로벌 성능이 뛰어남
Railway
풀스택 클라우드 플랫폼. 데이터베이스부터 배포까지 원클릭
백엔드 서비스, 데이터베이스를 GUI로 간편하게 관리
Render
자동 배포 PaaS. 웹 서비스, 정적 사이트, 크론 작업 지원
Heroku 대안으로 무료 플랜과 자동 배포 제공
프론트엔드 프레임워크
6
Next.js
React 풀스택 프레임워크. SSR, SSG, API Routes로 현대 웹 개발의 표준
App Router와 Server Components로 성능과 SEO 모두 잡기
React
Meta의 UI 라이브러리. 컴포넌트 기반으로 복잡한 인터페이스 구축
프론트엔드의 사실상 표준. 거대한 생태계와 커뮤니티
Vue.js
직관적인 프론트엔드 프레임워크. 학습 곡선이 완만하고 문서가 훌륭
빠른 프로토타이핑과 중소규모 프로젝트에 최적
Svelte
컴파일러 기반 프레임워크. 가상 DOM 없이 최고의 런타임 성능
작은 번들 사이즈와 직관적인 문법으로 빠른 개발
Astro
콘텐츠 중심 웹 프레임워크. 기본 0 JS로 최고의 로딩 속도
블로그, 마케팅 사이트, 문서 사이트에 최적의 선택
Nuxt
Vue.js 풀스택 프레임워크. SSR과 정적 생성으로 SEO 최적화
Vue.js 생태계에서 가장 완성도 높은 프레임워크
백엔드 & 런타임
5
Node.js
JavaScript 서버 런타임. 프론트엔드와 동일 언어로 풀스택 개발
npm 생태계의 방대한 패키지로 빠른 개발 가능
Python
범용 프로그래밍 언어. AI/ML, 웹, 데이터 분석 모든 분야의 강자
FastAPI, Django로 백엔드 구축. AI 프로젝트의 사실상 표준
Deno
차세대 JS/TS 런타임. TypeScript 네이티브 지원과 보안 우선 설계
Deno Deploy로 서버리스 배포가 매우 간편
Bun
초고속 JavaScript 런타임. 번들러, 테스트 러너, 패키지 매니저 올인원
Node.js 대비 최대 10배 빠른 시작 속도와 설치 속도
TypeScript
JavaScript에 타입 시스템 추가. 대규모 프로젝트의 안정성과 생산성 향상
현대 웹 개발의 사실상 필수. 자동완성과 에러 방지
데이터베이스 & BaaS
5
Supabase
오픈소스 Firebase 대안. PostgreSQL 기반 인증, 스토리지, 실시간 기능
무료 플랜으로 시작하고 필요할 때 확장. SQL 직접 제어 가능
Firebase
Google의 BaaS. 실시간 DB, 인증, 호스팅, 분석까지 올인원
프로토타입부터 프로덕션까지 빠르게 구축 가능
MongoDB Atlas
NoSQL 클라우드 데이터베이스. 유연한 스키마와 강력한 쿼리 엔진
스키마가 자주 변하는 프로젝트에 최적. 512MB 무료
PlanetScale
서버리스 MySQL. 브랜치 기반 스키마 관리와 무한 확장성
MySQL 호환으로 기존 프로젝트 마이그레이션이 간편
Neon
서버리스 PostgreSQL. 자동 스케일링과 브랜치 기능으로 개발 효율 극대화
Vercel과 완벽 통합. 프리 티어 512MB 제공
UI & 디자인
5
Tailwind CSS
유틸리티 퍼스트 CSS. 빠른 스타일링과 일관된 디자인 시스템 구축
바이브 코딩과 궁합이 최고. AI가 Tailwind 클래스를 잘 이해함
Shadcn/ui
재사용 가능한 React 컴포넌트. 복사해서 커스터마이즈하는 새로운 방식
v0와 함께 사용하면 UI 개발 속도가 크게 향상
Figma
협업 디자인 도구. 프로토타이핑부터 개발 핸드오프까지
Dev Mode로 디자인에서 CSS 코드를 바로 추출 가능
Framer
인터랙티브 웹사이트 빌더. 코드 없이 프로덕션 수준의 사이트 제작
디자이너가 직접 퍼블리싱할 수 있는 노코드 도구
Storybook
UI 컴포넌트 개발 환경. 독립적으로 컴포넌트를 빌드하고 테스트
디자인 시스템 구축과 컴포넌트 문서화에 필수 도구
개발 도구
6
GitHub
세계 최대 코드 저장소. 버전 관리, CI/CD, 프로젝트 관리 올인원
GitHub Actions로 자동 배포 파이프라인 구축. Copilot으로 AI 코딩
VS Code
Microsoft의 코드 에디터. 확장 생태계와 AI 통합으로 최고의 개발 환경
Cursor, Windsurf의 기반. 확장 마켓에서 무한 커스터마이즈
Docker
컨테이너 플랫폼. 개발 환경 통일과 일관된 배포를 보장
"내 컴퓨터에서는 되는데..." 문제를 완전히 해결
GitLab
DevOps 통합 플랫폼. 소스 관리부터 CI/CD, 보안 스캔까지
셀프 호스팅 가능. 기업 환경에서 GitHub 대안으로 인기
Postman
API 개발 및 테스트 도구. API 설계, 문서화, 모니터링 지원
백엔드 API 개발 시 필수. 팀 공유와 자동 테스트 가능
npm
Node.js 패키지 관리자. 200만 개 이상의 오픈소스 패키지 생태계
pnpm이나 yarn 등 대안도 있지만 npm이 가장 보편적
직접 만들기 어려우신가요?
PlanCraft가 도와드립니다
PlanCraft는 이 모든 개발 도구를 실무에서 활용하여 웹사이트, 웹앱, 서비스를 제작합니다.