기획자 혼자 3시간 만에 만든 AI 서비스
흑백투자자: 안성재 셰프 AI의 포트폴리오 심사
"본인이 생각하는 가장 완벽한 투자는 뭔가요?"
"제가 중요하게 여기는 건 투자의 균형인데, 이 포트폴리오는 이븐하게 구성되지 않았어요."
"투자의 세계는 넓어요, 좀 더 다양한 자산에 관심을 가져보세요."
문득 투자 포트폴리오와 요리를 평가하는 것이 비슷하다는 생각이 문득 들더라고요. 어떤 의도를 가지고, 좋은 재료를 골라, 본인만의 레시피를 선보이는 점이 닮았다고 느껴졌어요. 그래서 흑백요리사 컨셉으로 포트폴리오를 평가하면 재밌지 않을까 생각하고 "흑백투자자"를 만들어봤습니다.
주요 기능 정의
1. GPT api 플로우
사용자가 작성한 종목, 자산의 비중을 프롬프트와 함께 전달하고, Assistant의 json schema 응답을 파싱하여 포트폴리오 시각화와 함께 결과페이지에서 제공하는 기능을 구현했어요. AI가 패러디 심사평을 작성할 수 있게 Assistant의 system instructions에 어록과 패러디 예시를 입력한 게 특징입니다. (파인튜닝은 너무 과하다고 생각했고, vector storage를 사용하면 json schema 응답이 안되더라고요)
2. 결과페이지 랜더링
결과를 storage에 저장하는 것이 아니라 모든 사용자 인풋과 gpt의 응답을 인코딩하여 url에 저장했습니다. 그리고 result페이지가 url의 데이터를 디코딩하여 포트폴리오를 시각화하고, AI 심사평을 출력하도록 만들었어요. 심사결과에 따라 백개미인지 흑개미인지 UI의 분기처리도 이뤄지고 있습니다.
3. 카카오톡 공유
카카오톡 공유 API를 활용해서 참가자의 이름과 심사 결과, 결과페이지의 url을 공유할 수 있는 기능을 제공했어요. 사용자가 자신의 결과를 친구들과 공유하고 바이럴 될 수 있는 제품을 만들고 싶었어요.
제작 과정
1. 기술 스택 정의
우선 어떤 개발도구와 어떤 툴을 사용하면 원하는 서비스를 구현할 수 있는지 파악했어요. cursor를 활용해서 프런트엔드와 백엔드 코드를 개발하고, vercel을 통해 웹페이지와 functions을 호스팅 해야겠다고 생각했어요. GPT-4o-mini-2024-07-18 api에 프롬프트와 지시만으로 구현할 수 있다고 판단하여 별도의 rag는 고려하지 않았어요.
2. MVP 구현
Cursor를 이용해서 리액트 폴더를 만들고, next.js 기반으로 웹페이지를 제작했습니다. 프런트엔드 화면과 백엔드 api를 만들고, 플로우로 연결하고, gpt api 응답과 파싱까지 동작하는 MVP 구현까지는 3시간도 걸리지 않았어요. 바로 도메인 구매하여 커스텀 도메인 호스팅까지 진행했어요.
AI 채팅을 통해 코드 인터프리터와 상호작용하여 개발할 수 있는 커서3. 테스트와 고도화
프롬프트 고도화, 반응형 버그 수정, API 속도 이슈 해결, 구글 애널리틱스 태깅까지 완성하여 지인들에게 배포했어요. 처음 아이디어를 떠올리고부터 3일 정도 걸렸어요. 첫날 300명 이상이 웹사이트에 방문했고, 카카오톡 공유도 활발하게 되고 있는 것으로 보이는 상황입니다.
마치며
AI를 이용해 점점 개인이 할 수 있는 영역의 범위가 확장되고 있는 것을 느끼고 있는데요, 앞으로도 계속 아이디어를 구현하고 더 좋은 서비스를 많이 만들어 볼 수 있을 것 같습니다.
투자에 관심이 있으시면 흑백투자자도 한 번 재미 삼아서 참여해 보시고, 백개미에 도전해 보세요!
