주영호

Framer로 하루 만에 심리테스트 서비스 만들기

최근 주변 디자이너분들이 간단한 사이트를 만들 때 Framer를 사용하고 있다는 얘기를 꽤 듣게 되었습니다. 피그마랑 UI가 비슷하고, 원래 개발자다 보니 관련 개념을 익히는 데는 얼마 걸리지 않았는데요.

처음에는 제가 만들고 있는 앱 내 “자주 묻는 질문” 사이트를 프레이머를 활용해서 만들어야겠다고 생각을 하고, 후다닥 만들어보니 생각보다 자유도가 높다는 걸 알게 되었습니다. 현지화나 CMS도 지원을 하더라고요.

더 만들 수 있는 게 없을까, 하다가 최근 지인이 간단한 심리 테스트 링크를 보내준 게 생각났습니다. MBTI를 바탕으로 간단한 질문과 답변을 GPT로 생성할 수 있을 것 같아서, 부랴부랴 오늘 오전부터 만들어봤는데요. 생각보다 빠르고 괜찮은 퀄리티의 심리 테스트 사이트를 만들어볼 수 있었습니다.
https://vestin.app/test

방문자 수 제한이 있는 건 아쉽지만, 간단한 랜딩 페이지가 필요할 때는 요긴하게 쓸 것 같습니다.

안드로이드 첫걸음

모의투자 앱 Vestin의 안드로이드 버전이 출시되었습니다.

안드로이드의 Compose가 SwiftUI와 크게 다르지 않아 1-2주간 개발하여 MVP 버전을 출시할 수 있었습니다.

iOS 개발자인 제가 안드로이드 앱을 출시할 수 있던 것은 GPT(Cursor)의 덕이 컸지만, 물의 깊이를 모른 채 튜브 하나를 들고 겨우 수영을 한 느낌입니다.

채팅, AI, 미니게임, 랭킹 등 추가해야 할 기능들이 많지만(iOS 버전에 있는 기능들), 플랫폼 확장의 시작으로는 괜찮은 첫걸음인 것 같습니다 :)

매일 나를 괴롭히는 고민: 오늘 뭐먹지? (+베타 테스터 모집)

안녕하세요, 개발자 주영호입니다.

직장인이 된지 어연 5년.. 아직까지 저를 괴롭히는 고민이 하나 있습니다.

"오늘 점심은 뭘 먹을까요?"

출근하면 하염없이 점심시간만 기다리지만, 막상 점심을 무엇을 먹을지는 참 고민이 됩니다.

7일 중 5일을 먹기에 너무 비싸지 않아야 하고, 그래도 맛은 있었으면 하고.. 어제 먹은 거랑 안 겹쳤으면 좋겠고!

결론을 내지 못한 저는 결국 옆 동료에게 오늘도 토스를 하고 말았습니다.

jQuery에서 벗어나 Nest.js + React를 배우고자 했던 저는 이참에 이 (심각한) 문제를 해결해 줄 서비스를 만들기로 결심합니다.

1. 맛집 데이터 찾기
   네이버 지도에서 맛집 데이터를 주면 좋겠지만, 아쉽게도 지역 검색은 5개의 결과만 주고 있었습니다. 다소 부정확한 정보도 많았지만, 공공데이터 포털의 "전국 일반음식점 표준 데이터" 엑셀 파일을 받아, 이를 기초 데이터로 활용했습니다. 100만 개가 넘어가는 데이터 속에서 현재 영업 중인 식당, 카페 등을 1차적으로 정리하니 약 62만 개의 데이터를 사용할 수 있었습니다. 사실상 "맛집" 데이터는 아니고, 현재 사업자로 등록된 "음식점" 정보였습니다.
   

2. MVP 웹 만들기
   기초 데이터를 바탕으로, 이 고민을 어떻게 하면 해결할 수 있을지 아이디어를 구체화했습니다.

   결국 식사는 회사 근처에서 해야 하고, 같은 회사 구성원들이 비슷한 고민을 할 것이라는 생각으로 회사 단위의 맛집 지도를 만들면 어떨까? 하는 생각을 했습니다.
   
   회사를 구분하는 가장 쉬운 방법은 우선 이메일이므로, Google 로그인을 지원하여 메일 주소로 회사 구분을 하고, 맛집을 추가할 수 있도록 MVP 웹을 개발했습니다.
   또, 주변 회사의 사람들이 어떤 맛집을 자주 가는지 볼 수 있도록 회사 사람에게만 공유할지, 전체 공개를 할지 선택하게 하였습니다.
   

   

3. 다듬기
   잘못된 정보가 많기도 하고, 신규 영업 / 폐업이 많기에 정보 수정 요청 버튼을 넣고, 본래의 고민인 "맛집"을 빠르게 골라줄 수 있도록 주사위 버튼을 홈에 추가했습니다. (누르면 회사 사람들이 등록한 맛집 중 평점이 높은 식당을 랜덤으로 보여줍니다)
   
   근처 회사 사람과 식사나 커피를 마시는 "밥트워킹"이나, 리뷰 수에 따라 배지(우리 회사 쩝쩝박사) 등 구현하고 싶은 기능은 많았지만, 이 서비스가 잘 될지 모르는 상황에서 시작하기엔 리소스가 너무 많이 들어갈 것 같아 최소한의 기능만 개발했습니다.
   

   

해당 서비스는 제가 처음으로 React로 만든 웹이기도 합니다. (아마 버그가 많을 것으로 예상)

현재 베타 테스트로 공개된 상태이니 궁금하신 분들은 놀러 와주시면 감사하겠습니다 :)

그럼, 오늘도 좋은 하루 되세요!

3시간 만에 AI 서비스 추가하기

안녕하세요, 얼마 전 모의투자 앱 Vestin를 개발한 주영호입니다.

오늘은 3시간 동안 GPT API를 이용해서 AI 서비스를 추가한 경험을 공유하고자 해요.

주의) 실제 AI 서비스를 개발하고 계시는 분들께서 보시면 이게 무슨 AI 서비스냐, 하고 화내실 수도 있습니다 ㅎㅎ

그럼, 시작해 보겠습니다!

고민의 시작: 프로덕트에 AI 서비스 추가하고 싶은데..

ChatGPT가 나온 이후, AI 관련 프로덕트가 쏟아지고 있습니다.

저는 개발자로 일한 적이 있지만, AI 서비스를 개발하는 것은 또 다른 차원이라고 생각합니다.

LLM, 머신러닝, 딥러닝, 자연어 처리.. 저는 그 무엇 하나 배우지도 않았기 때문이죠.

하지만 프로덕트를 제작하는 입장에서 이미 AI는 너무나 큰 존재가 되어있었습니다.

그게 사용자를 위함이든, 투자 유치를 위함이든, 돈을 위함이든 간에요.

이럴 땐 만능인 GPT를 써보자

저는 최근에 궁금증이 생기면 GPT한테 달려갑니다.

제가 AI 서비스를 직접 개발하는 건 사실 말이 안 되고, GPT API로 데이터와 요구 사항을 보낸 다음 사용자에게 보여주는 방식을 택했어요. ChatGPT 말고도, OpenAI에서는 다양한 AI 모델의 API를 지원하거든요.

Open AI에 있는 API 소개 사진

하지만 나는 프롬프트 엔지니어가 아니다

ChatGPT를 무척 잘 사용하고 있다고 생각하지만, 저는 프롬프트 엔지니어가 아닙니다. 그래서 GPT 만들기 기능을 활용하고자 했어요.

GPT 유료 사용자는 GPT 봇을 채팅으로 생성할 수 있습니다

저는 사용자가 생성한 데이터(모의투자 앱인 Vestin 기준으로, 투자 기록에 해당)를 그대로 던지고, 사용자의 성향을 요약하는 봇을 만들고 싶다고 했어요.

그러면 멋진(?) 프로필 사진과 함께 봇을 만들어주는데요, 사용자에게 GPT 봇을 공유하는 방법도 있겠지만, 저희는 서비스에 녹여내야 하니까, 완성된 GPT 봇의 설정에 있는 "지침"을 복사해두었어요.

제 막무가내 설명으로 탄생한 봇의 설정에 있는 '지침'을 프롬프트로 사용합니다.

이제 OpenAI가 친절하게 작성한 API 호출 방법을 참고하고, 프롬프트에 위 '지침'을 붙여넣기 합니다.

이후, 저희의 프로덕트에서 사용자의 데이터와 함께 호출합니다. 데이터 가공을 하면 좋겠지만, 그냥 json string을 통째로 던져주어도 잘 이해하더라고요.

서버 쪽은 이렇게 완성입니다! (여기까지 15분이면 충분합니다)

프로덕트에 녹이기

그럼 이제 이 서비스를 사용자에게 어떻게 전달을 해야 할까요? 저는 제일 잘 보이는 홈 화면 좌측 상단에 AI 버튼을 추가했어요. AI 서비스에 자주 쓰이는 반짝이(?) 아이콘으로요.

요 버튼을 누르면 이제 아래와 같은 화면이 뜨게 됩니다.

여기서 "광고 보고 확인하기" 버튼을 넣었는데, 아무래도 GPT API가 유료이다 보니 광고를 넣게 되었습니다 (저도...광고 싫어하지만..🥲)

사용자가 버튼을 탭 하면 바로 API를 호출하고 광고를 띄웁니다. 사용자는 전면 광고를 보는 사이 GPT가 요약을 해주고, 아래와 같이 요약 화면을 그대로 보여줍니다.

솔직히 결과가 크게 만족스럽진 않은데요, 그 이유로는..

• 데이터 가공 없이 그대로 던짐

• 비용 절감을 위해 GPT4가 아닌 GPT-3.5 Turbo 모델을 사용

• GPT API 호출 시 파라미터 등을 테스트나 튜닝하지 않고 바로 사용

• 호출 결과를 그대로 보여주기만 함

등이 있겠습니다.

상당히 아쉽지만.. 좋은 시도였다!

아쉬운 부분이 많지만 어쨌든 AI 서비스 완성입니다 (사실 AI 서비스라고 하기에도 민망한)

오늘 저녁에 만들고, 바로 애플 심사 통과되어서 유저분들께 하루 만에 선보일 수 있게 되었어요.

AI 관련 서비스를 만드시는 분들께 무한한 존경을 보내며.. 글을 마치겠습니다.

읽어주셔서 감사합니다. 오늘도 화이팅!

혼자서 어디까지 만들 수 있을까요?

부제: 2주 만에 모의투자 iOS 앱 출시하기

2021년 3월, 저는 comoto란 모의투자 앱을 출시했습니다.
(관련 링크: https://jooyoungho.github.io/comoto) 당시 코인 투자의 실패를 겪고 나서 제가 쓰기 위해 만든 앱이었지만, 생각보다 많은 분들께서 즐겨주셨는데요. 그땐 코딩 실력이 형편없기도 했고, 관련 지식도 부족해서 앱을 더 발전시키기 어려웠습니다.

그러던 중 마침 이번에 새롭게 모의투자 앱을 만들 수 있는 상황이 되어서, 글로벌 타깃으로 새롭게 만들게 되었습니다. 이름마저 GPT가 지어준 'Vestin'이 그 주인공입니다.

기획, 디자인, 개발까지 혼자 진행하다 보니 굉장히 많은 시간을 레퍼런스를 찾는데 사용했습니다. Robinhood, 토스증권, Coinbase 등 다양한 앱을 써보면서, 좋은 부분을 많이 참고했습니다. (특히 토스의 경우 너무 잘 되어있어서 감탄했습니다)

디자인을 어느 정도 확정한 다음에는 빠른 개발을 위해 Firebase에서 서버는 Python으로 구성했습니다. 기존 Node.js로 되어있던 comoto의 서버 코드를 GPT한테 옮겨달라고 한 뒤, Swift 다음으로 눈에 익숙해진 Python 코드를 수정해 나갔습니다. 클라이언트 코드도 SwiftUI, Swift Charts 등 최신 기술을 최대한 사용했습니다. (이로 인해 최소 지원 버전을 iOS 17로 했던 점이 아쉽지만, 그래도 빠른 개발을 위해..) 종목의 이미지 정리와 같은 단순 작업은 GPT한테 시켰고, 어드민 웹 페이지도 리액트의 Ant Design 라이브러리를 사용해서 필요한 부분만 먼저 구현하였습니다.

이렇게 정신없이 2주간 개발을 하고, 출시를 했습니다. 아직 사용자가 많이 있는 건 아니어서 성공한 프로젝트라고 하기엔 섣부르지만, 제가 혼자 만들었던 앱 중에서 완성도가 가장 높은 앱이라고 생각합니다. 언젠가 개인 프로젝트의 완성도가 기업에서 진행된 프로젝트와 비슷해지는 시기가 오지 않을까, 하는 생각을 해보며 글을 마칩니다.

앱 구경하기