AIBASE.IT는 다양한 AI Agent를 카테고리별로 정리하고 워크플로우를 공유할 수 있는 커뮤니티 플랫폼입니다. 이 프로젝트는 AI를 활용해 기획, 디자인, 개발, 배포까지 모두 1인이 수행한 사례로, 실제 서비스 제작의 흐름을 담은 워크플로우입니다. (100% 정확하진 않음)
초기 아이디어를 바탕으로, 어떤 기능이 필요한지, 어떤 구조로 구성할지에 대한 기획을 ChatGPT를 통해 도출했습니다. 특히 워크플로우 공유 구조, 에이전트 리스트 UI, AI 추천 시스템 등 핵심 기능 아이디어를 구체화하는 데 활용되었습니다.
AI Agent를 한곳에 모아 정리하는 웹 서비스를 만들거야.\n주요 기능은 카테고리별 정리, 기능, UI 스크린샷, 결과물 예시 제공, 유저 리뷰, 인기 순위 등\n또 커뮤니티 기능, 워크플로우 공유, 유저 추천 시스템, 다중 에이전트 비교 기능도 포함할거야.\n이 내용을 바탕으로 PRD를 작성해주고 아이디어를 덫붙여줘\n
위에서 만든 프롬프트를 바탕으로 v0를 통해 웹사이트 디자인 초안을 생성했습니다. 결과물은 컴포넌트 단위로 구성된 Figma 스타일 UI로, 추후 코드 변환을 고려해 설계되었습니다.
(ChatGPT가 만든 문장 그대로 입력)\n“A modern, clean hero section for an AI tool directory website…”
v0에서 웹사이트 디자인을 자동 생성할 수 있도록, ChatGPT를 통해 프롬프트를 구조화하고 설계했습니다. 각 섹션(히어로, 리스트, 소개 등)의 구조와 톤앤매너를 정의하는 데 중점을 뒀습니다.
AIBASE는 다양한 AI Agent를 카테고리별로 정리하고 보여주는 플랫폼이야.\nHero 섹션에는 깔끔하고 기술적인 느낌의 문구와 검색창,\n그 아래엔 에이전트 리스트와 ‘워크플로우’ 영역이 있어.\n이런 사이트에 어울리는 v0용 프롬프트를 만들어줘.
개발이 완료된 MVP 버전을 Netlify를 통해 배포하고, X(트위터)와 지인 커뮤니티를 통해 피드백을 수집했습니다. 완성도를 높이기보다 빠르게 오픈하여 사용자의 반응을 보고 이후 개선 작업을 계획했습니다.
전체 기능 중 MVP로 먼저 만들 기능을 도출하고, 그 우선순위를 설정했습니다. 사용자 유입과 콘텐츠 전달에 효과적인 요소부터 빠르게 개발할 수 있게 도와줬습니다.
이 사이트에서 MVP로 먼저 개발할 기능을 추천해줘.\n핵심은 콘텐츠 기반이고, 워크플로우 공유 커뮤니티이자 에이전트 디렉토리야.\n나중에 유저 시스템도 붙일 예정이야.
v0에서 받은 디자인을 기반으로 React 컴포넌트로 전환하고, 필요한 페이지와 기능을 Cursor를 통해 개발했습니다. Tailwind 기반 스타일링 및 기능별 컴포넌트화를 자동화하고, API 연동 작업까지 일부 지원받았습니다.
이 Hero 섹션을 React + Tailwind로 바꿔줘.\n제목은 크고 bold하게, 서브텍스트는 중간 크기.\n검색창은 둥글고 부드러운 느낌, 아래 그리드에는 카테고리별 AI 리스트가 들어갈 공간을 마련해줘.
