풀스택 웹앱을 하루만에 만들어주는 툴들
Rails에서 영감을 받은 툴들
1. Kirimase
https://github.com/nicoalbanese/kirimase
Kirimase는 CLI(command-line-interface)에서 질의응답하는 형태로 풀스택 Next.js 앱를 만들어준다.
Next.js 앱을 만들때 적절한 패키지들을 조합하고 설치하는 것의 복잡성과 항상 비슷한 보일러 플레이트를 작성해야 되는 번거로움을 해결하기 위해 만들어졌다.
Kirimase의 개발자는 Ruby-on-Rails에서 영감을 얻었다고 한다. Ruby-on-Rails를 써보면 큰 장점이 두가지 있는데 첫번째는 처음 프로젝트를 세팅할때 CLI에서 DB 스키마를 알려주면 알아서 CRUD API와 DB(이를 Scaffold라고 한다.)를 생성해주는 것 그리고 패키지 설치가 간단한 것이 있다. Kirimase도 이와 비슷하다.
Kirimase에 프로젝트를 시작할때 다음을 설정할 수 있다.
ORM: Prisma 혹은 Drizzle
Authentication: Auth.js, Clerk, Lucia, Kindle
컴포넌트 라이브러리: Shadcn-UI
Payments: Stripe
Email: Resend
서버 클라이언트 호출 API: tRPC
- Wasp
https://wasp-lang.dev/
Wasp도 Kirimase와 같이 Rails의 철학을 따른다. React, Node.js, Prisma, Docker 등 웹생태계에서 가장 많이 사용 되는 기술들로 구성된 풀스택 앱을 처음에 세팅해주고 클라이언트와 서버 호출하는 API를 알아서 생성해준다.
가장 큰 다른점은 Next.js를 사용하지 않는다는 점인 것 같다. 오히려 Next.js를 대체하는 풀스택 프레임워크를 지향하는 것 같다(FAQ 섹션 참고). 그리고 Kirimase 대비 Tech Stack 선택이 제한적이고 더 의견이 강하다(이후 더 추가할 것이라고 언급되어 있기는 하다). ORM은 Prisma만 제공하고 Data Fetching 라이브러리도 React Query를 강제한다. 하지만 둘다 가장 많이 사용되는 라이브러리들이니 큰 문제가 된다고 생각되지는 않는다.
최근 Wasp의 프레임워크를 사용해서 SaaS 보일러플레이트를 제공하는 제품을 또 내놓기도 했다. 100% 오픈소스이고 자체 Auth를 세팅할 수 있도록 기본 코드를 제공해 3rd party 툴을 쓸 필요가 없다. 그 외 Stripe Payment, OpenAI api, Astro 블로그를 기본으로 제공한다.
https://opensaas.sh/
그 외의 재미있는 점은 YC의 투자를 받았다는 점
GPT를 활용한 풀스택 앱 세팅
3. GPT Engineer
https://github.com/gpt-engineer-org/gpt-engineer
"GPT-Engineer"는 Prompt로 앱에 대한 설명, 사용하고자 하는 기술, 아키텍처 등을 설명하면 풀스택 앱을 만들어주는 툴이다. "GPT-Engineer"의 주요 기능 중 하나는 "identity"를 지정할 수 있다는 것이다. “Identity”를 지정하기 위해 미리 설정해 놓은 Prompt들이 정리되어 있는 폴더가 있는데 여기서 커스텀한 “identity”를 만들 수 있다.
최근 이에 대한 접근성을 높이기 위해 웹앱 형태를 만들어 내놓기도 했다. ChatGPT와 같은 채팅 인터페이스로 프로젝트를 세팅하고 코딩을 도와주는 형태인 것 같다.
https://gptengineer.app/
- GPT Pilot
https://github.com/Pythagora-io/gpt-pilot
GPT-Pilot은 개발에 필요한 여러 GPT Agent들의 질문에 대답하면서 풀스택 앱 보일러 플레이트를 만들고 이후 코드 생성 또한 같이 할 수 있다. GPT Engineer은 이런 Agent를 내가 생성해야 되는 어려움이 있지만 GPT Pilot은 이미 필요한 Agent들이 생성되어 적절한 질문을 하고 업무를 수행해 훨씬 좋은 것 같다. 다음과 같은 Agent들이 프로젝트 세팅에 도움을 준다.
PO Agent
프로덕트 이름, 프로덕트에 대한 설명 등 어떤 프로젝트를 진행하려하는지 이해하기 위한 질문들을 한다. 이에 대한 답을 하면 PO Agent는 유저 스토리를 작성한다.
Architect Agent
앱에 사용될 기술들을 작성한다.
Dev Ops Agent
모든 기술 스택, 패키지 들이 설치 되어 있는지 확인하고 그렇지 않은 경우 설치를 진행한다.
Tech Lead Agent
개발자가 구현해야 될 기능들 및 태스크들을 만든다. 그리고 작업이 완료 되었는지 검토 및 QA를 맡길 수도 있다. (예: localhost:3000를 열고 특정 작업 수행)
Developer Agent
각 태스크들을 받아서 이를 수행하기 위해 어떤 코드 작업들이 필요한지를 작성한다.
Code Money Agent
위 Developer Agent가 작성한 코드 작업들을 반영한다.
위처럼 여러 Agent들이 협업하게 하는 것이 하나의 Agent가 Prompt에 따라 바로 코드를 생성하는 것보다 훨씬 높은 퀄리티의 코드를 생성한다고 한다.
UI를 생성해주는 툴들
5. v0.dev
https://v0.dev/
Vercel에서 만든 UI 코드 생성 툴인데 정말 강력하다. 마치 Midjourney의 UI 생성 버전 같다. 내가 원하는 UI를 텍스트로 설명하면 몇가지 버전을 생성해주고 여기서 계속 Prompt를 통해 발전시켜 나갈 수 있다. 텍스트 뿐만 아니라 이미지를 첨부해서 코드 생성을 할수도 있다. 코드 퀄리티도 나쁘지 않다.
-
openv0
https://github.com/raidendotai/openv0
v0.dev는 유료인데 이를 무료로 사용하고 싶다면 openv0를 사용하면 된다. 오픈소스이고 LLaMA처럼 로컬 모델을 붙이면 무료로 쓸 수 있다. 다음과 같은 스택을 제공한다.
프론트
React
Next.js
Svelte
UI 라이브러리
NextUI
Flowbite
Shadcn
아이콘
Lucide -
Screenshot-to-code
스크린샷 이미지를 올리거나 URL를 집어넣으면 리액트 혹은 Vue + Tailwind로 생성된 코드를 만들어준다. 직접 써봤는데 될때도 있고 안될때도 있다.
https://github.com/abi/screenshot-to-code
https://screenshottocode.com/ -
Builder.io
피그마를 리액트 코드로 변환해주는데 비슷한 툴들이 많이 나왔지만 Builder.io는 가장 실제 쓸 수 있는 퀄리티의 코드를 생성해준다.
https://builder.io/
디스콰이어 박한솔 님 퍼옴
