비즈니스 인사이트

GPT로 1시간만에 유튜브 요약 앱을 만들고 런칭 해보았습니다.

인디메이커의 여정을 새롭게 시작합니다.

2024.06.12 | 조회 5.36K |
5
|

조쉬의 프로덕트 레터

퀄리티 있는 비즈니스, 프로덕트, 디자인, 1인 창업가 이야기를 주 1회 들려드릴게요.

 

오늘 레터는 좀 특별합니다. 기존 1인 비즈니스 케이스 스터디가 아니라, 지난 주 제가 경험한, 1시간만에 앱을 만든 경험을 공유하고자 해요.

 

작년 9월 경, 저는 ChatGPT를 활용한 유튜브 요약 앱 '써머리'를 만들었어요. 파트타임 디자이너였지만, 앱 전체의 디자인을 혼자 담당했죠. 긴 영상을 다 보기에는 시간이 아까우니, 그 시간을 줄여주어 핵심을 파악해주자는 취지의 앱이었어요.

(현재 써머리는 '딥클립'이라는 서비스로 피봇이 되었고, 해당 회사와는 다음을 기약한 상태에요.)
(현재 써머리는 '딥클립'이라는 서비스로 피봇이 되었고, 해당 회사와는 다음을 기약한 상태에요.)

 

써머리(유튜브 요약 앱)를 만든 경험, 활용해보기로 하다

최근 구글에서 나온 AI 서비스 Gemini를 경험해보다가, 이것이 유튜브 요약에 꽤 유용한 API라는 것을 알게 되었어요. Youtube는 구글에서 만들다보니, 연동이 쉬운거죠.

예전 경험을 되살려서, 과연 ChatGPT로 Gemini API를 활용한 요약 앱을 만들 수 있을까? 문득 궁금해졌요. 

 

 

ChatGPT야, 정말 앱을 만들 수 있니?


GPT가 꽤 코딩을 잘해준다는 소문을 들었어요. 과연 얼마나 잘해줄 지 궁금했죠. 

 

"너 혹시, 앱을 만들 수 있어?"

"직접적이진 않지만, 코딩 등을 통해 도움을 드릴 수 있어요."

 

코딩을 얼마나 잘 할 수 있는 지 전혀 몰랐어요. 그래서 그냥 상상하는대로 한번 프롬프트를 써보았어요. 구글 Gemini를 활용한 유튜브 요약 사이트를 만들고 싶다고 이야기 했죠.

GPT는 곧바로 제게 프론트엔드, 백엔드, API 연동 등의 예시를 코드로 알려줬어요. 그런데 파이썬 코드를 볼 줄 모르는 저는, 해당 내용의 그림이 전혀 그려지지 않았어요. 실행방법 등을 알려줬는데 뭘 어쩌라는거지? 싶었죠.

환경 세팅을 알아서 잘 하라는 듯한 예시
환경 세팅을 알아서 잘 하라는 듯한 예시

파이썬을 설치하라고 하는데, 저는 파이썬 설치 경험이 전무했어요. 그리고 Flask라는 로컬 기반의 가상 서버를 설치하라고 하더군요. 여기서부터 진입 장벽이 있다고 여겼고, 꽤 불친절하다고 여겼어요. 

 

 

전혀 무슨 말인지 못알아 듣겠어서, 초등학생한테 말하듯이 하라고 시켰어요.


제 상황을 더 자세히 설명해줬어요. 설명한 내용을 전혀 모르니, 하나씩 하나씩 일단 알아갈 필요가 있다고 여겼어요.


"초등학생에게 설명하듯이 기초부터 설명해봐."

 

이렇게 말했더니 용어들을 풀이해주더군요. 정말 아무것도 모르니까 기초 질문을 하나씩 하나씩 물어봐가며 풀어봤어요. 파이썬 파일 자체를 만들어본 경험도 없으니까요.

결국, 앱을 실행하기 위해서 flask라고 하는 걸 '터미널'을 열어서 하라는거에요. 터미널이 뭐야? 저건 어떻게 실행하는거야? 라고 한 20분을 소요한 것 같아요.

크롬에서 전혀 앱을 테스트할 수 없으니까, 그냥 푸념하듯이 이제 포기선언을 해버렸어요.

 

 

나 포기할거야! 라고 선언하자.. 더 쉬운 방법을 추천해주기 시작했어요.


포기하겠다고 푸념을 늘어놓으니 새로운 접근 방식을 알려주더군요. Replit이라는 웹 기반 개발 환경 서비스를 알려주었어요. 하나하나 실행할 수 있도록 튜토리얼을 알려주더군요. 그래서 방문해보기로 했습니다.

 

Replit에, 방문, 가입 후 코드를 올려보았더니.. 


Replit 메인 웹사이트
Replit 메인 웹사이트

Replit이라는 곳을 방문했어요. 들어본 적 없는 곳이었는데, 일단 가서 하라는데로 실행을 해보았어요. 코드를 복붙해보았더니.. 뭔가 나오기 시작했어요.

"화면이 나오는구나!"

 

GPT가 처음으로 준 웹사이트 화면은 다음과 같은 이미지였어요. 조악한 디자인이지만, 어쨌든 나왔다는 게 신기했어요.

GPT가 준 최초의 화면
GPT가 준 최초의 화면

URL을 입력할 수 있는 인풋 필드와, 요약하기 버튼은 기본적으로 마련이 된 상태였어요.

 

API(요약을 하기 위해 연결해야 하는 것)를 연동해보자

이제 중요한 건, Gemini API를 제 앱에 연동하는 것이었어요. 그래서 Google API 웹사이트에 들어가 무료로 api key를 받았습니다. (api key란, 서버 연동을 위한 고유한 비밀번호 같은 거에요.)

물론 api key를 넣는다고 곧바로 작동되진 않았어요. 

제가 직접 api를 연동해본 적이 없으니까, '네가 알아서 잘 해결해'라는 프롬프트를 계속 넣었어요. 정확한 진단을 위해, replit이 주는 에러 메시지를 계속 레퍼런스로 주었죠. 

에러 코드가 나온 것을 그대로 복사 붙여넣기 해서 직접 해결하도록 지시
에러 코드가 나온 것을 그대로 복사 붙여넣기 해서 직접 해결하도록 지시
뭔가 바뀌기 시작했어요. 요약이 안된다고 뜨는 것부터가, 연동이 되기 시작했다는 뜻이었어요.
뭔가 바뀌기 시작했어요. 요약이 안된다고 뜨는 것부터가, 연동이 되기 시작했다는 뜻이었어요.

 

GPT는 참 똑똑한게, 자기 스스로 문제를 해결을 잘 해주는 일잘러였습니다. 계속 현황을 알려주니 Coding Companion 역할을 톡톡히 하더라고요. 

 

이후.. 올해 처음으로 제 입과 눈을 크게 딱 벌리게 된 순간이 찾아왔어요.

 

드디어, 요약 결과가 나오다..!
드디어, 요약 결과가 나오다..!

 

요약이 작동되기 시작했어요. 끊임없이 에러를 직접 해결하도록 지시한 시도 끝에요.


감동의 순간이었습니다. 저는 가끔 큰 감동을 느낄 때 머리를 조아리곤 하는데요. 작년 11월 저스틴 웰시의 비즈니스를 접할 때가 그랬고, 올해는 GPT와 코딩을 하면서 그 경험을 같이 한 것입니다. 마치 슬램덩크의 안선생님처럼요.

안선생님이 강백호를 보며 놀라워했던 그 느낌과 같습니다.<br>
안선생님이 강백호를 보며 놀라워했던 그 느낌과 같습니다.

 

본질적인 기능 워킹이 되기 시작했으니, 이제 디자인과 디테일을 다듬어나가며 제품답게 만들 시간을 조금 가졌어요. 

 

1. 디자인을 약간 수정 (아주 조금)

2. 영어 영상, 한국어 영상 모두 한글로 요약되게 수정

3. 유튜브 썸네일을 가져오도록 수정

 

디자인은 사진을 보여주며 이대로 수정해보도록 지시했어요. 나름 잘 변경해주었습니다.


이미지를 보고, 다시 디자인을 수정하도록 지시
이미지를 보고, 다시 디자인을 수정하도록 지시

GPT가 만들어준 형태는 다음과 같았어요. 꽤 비슷하죠? 물론 상세한 부분은 좀 더 수정이 필요했지만요. 아주 빠른 MVP를 만들 때는, 원하는 디자인을 그냥 보여주기만 하면 되는 것이었어요.

 

중급자라면, Figma to HTML 등의 플러그인을 활용하여 붙여넣어주기만 하면, 원하는 디자인을 그대로 쓸 수 있겠더라고요. 

GPT가 사진을 보고 만들어준 디자인
GPT가 사진을 보고 만들어준 디자인

 

영어 영상은 영어로만 요약하고, 한글 영상은 한글만 되더라고요. 그래서 둘 다 할 수 있도록 다시 수정을 지시하였습니다. 그랬더니 알아서 youtube의 스크립트 api를 가져와서 직접 수정했어요. 정말 놀랍도록 일을 잘했습니다.

 

그렇게 완성된 최종본, 여러분도 경험해보세요. 무제한 무료입니다. (API가 저렴해요.)


1시간 이내로 만든 유튜브 요약 프로토타입
1시간 이내로 만든 유튜브 요약 프로토타입
요약 결과
요약 결과

 

테스트 링크: https://python-tuemarz.replit.app/

 

 

GPT로 1시간만에 앱 만들기, 배운 점을 요약할게요.


1. 생각보다 에러가 많다. 그러나 에러를 알려주면 곧바로 잘 고친다.

GPT도 완벽한 코딩을 하지 않아요. 예외케이스를 잘 모르기 때문에요. 하지만 디버깅을 할 수 있도록 계속 에러를 알려주니 스스로 잘 고쳤어요. 끊임없이 테스트해보고, 빌드해보는 습관이 중요했어요.

 

2. 하나하나 디테일한 부분들을 잘 고쳐서 '쌓아가듯이' 만들어야 한다.

GPT는 '굉장히 세심하게 잘 지시'하는게 중요했어요. 개발자들이 GPT를 잘 할 수 밖에 없다고 느낀 것은, 미시하게 쪼갤 수 있는데까지 전부 다 들어가야 하기 때문이에요. 내가 디테일하게 잘 지시할수만 있다면, 그 능력이 무한해져요.

 

3. 사진을 인식하기 때문에, 예시 UI 화면을 전달해주면 디자인을 잘 고쳐준다.

최근 사진 업로드, 파일 업로드 기능이 생기면서 GPT가 사진을 인식하기 시작했죠. 디자인 예시를 보여주고 알아서 코드를 수정하라고 하니, 사진 안에 있는 텍스트와 UI를 잘 파악하고 고쳐주었어요. 디자이너인 입장에서는 hand-off 과정이 굳이 이제 필요해졌을까.. 싶은 순간이었어요. 

 

4. 코드가 길어지면, 로딩에 시간이 걸리기 시작한다.

코드를 매번 새로 작성해요. 한번 나오는 데 1분 정도 걸리고요. 그래서 좀 비효율적으로 여겨서, 이 부분은 개선할 필요가 있겠더라고요. 이것은 방법을 찾아볼 계획이에요.

 

5. 복잡한 앱 구축은 아직 어렵다. 현재는 MVP에 적합한 것으로 보인다.

코드 양이 많아지고, 여러모로 복잡한 로직이 생기면 사람의 도움이 필요해보여요. 단순히 검증하고 싶은 기능 하나를 구축할 때, GPT가 가장 빠른 수단으로 보여요. 하지만 상상력을 제한할 필요는 없어요. 충분히, 복잡한 앱도 만들 수 있을 것 같아요.

 

6. 어느 정도 앱 구축에 대한 이해도는 있어야 한다. (하지만 어렵지 않아요.)

저는 앱을 만든 경험이 다수 있어요. 그래서 제품 개발 프로세스를 이해하고 있고, 어떤 예외케이스가 있는지, 무엇을 다듬어야 하는지 지식이 있죠. 그래서 더 빠르게 만들 수 있었어요. 저는 꼭 앱 제작을 위한 팀 프로젝트를 경험해보시길 추천드려요. PM, 개발자와 소통해본 경험이죠. 그래야 더 잘 만들 수 있을 것 같아요.

 

 

마무리하며

앱 만들기는 이제 의도만 있으면 되는 시대가 온 것 같아요.실제  유료화된 제품 출시가 가능할지, 테스트하고 싶어요. 다음 번에는 AI를 활용할 수 있는 다른 앱도 더 만들 계획이에요. Peter Levels가 되고 싶달까요. :) 

로그인과 결제 API를 연동해서 SaaS화도 시켜보고 싶어요. 요즘은 이러한 모듈형 API도 여러 면에서 연동이 편리해졌거든요. 더 많이 연구하고, 새로운 앱을 만들어 여러분을 찾아뵙고 싶습니다.

 

 

솔로프리너 랩에서, 인디메이커 채널을 개설했어요. 인디 해커톤, AI 앱 스터디를 하고 있습니다. 랩에 가입을 하셔서 여러 인디메이커와 함께해보세요.


솔로프리너 정기 프로그램 대상으로 한 '솔로프리너 랩'을 외부에 오픈합니다. 매달 새로운 특강, 스터디, 콘텐츠가 수시로 제공되는 '성장 커뮤니티'에요. 개발자, 디자이너, PM, 마케터 등으로 구성된 50명의 랩 구성원들과 함께, 1인 창업의 여정을 함께 해보세요.

 

 

Q. 솔로프리너 랩이 무엇인가요?

  • 500여개 이상의 비즈니스 케이스, 마케팅, 창업 플레이북을 공부하는 1인 창업가들의 멤버십 프로그램이에요.
  • 랩 구성원과 서로의 비즈니스에 대해 이야기를 나누고, 피드백을 받아요.
  • 매달 3-4회의 라이브 연사 강의가 있어요. (AI, 오디언스 빌딩, 퍼널 스터디 등)
  • 랜딩 페이지 제작, 리드마그넷, 콘텐츠(뉴스레터)를 통한 내 비즈니스를 진짜 '시작'할 수 있도록 도와드려요.

 

Q. 누구를 위한 프로그램인가요?

  • 1인 기업가, 인디메이커가 되어 직접 내 삶을 스스로 일구어 나가고 싶으신 분들을 위한 프로그램이에요.
  • 내 지식, 경험을 소득으로 만들고 싶으신 분들에게 최대한 도움을 드리고 싶어요.
  • 단순한 인풋형 공부보다, 협업형 아웃풋을 통해 찐 성장하실 수 있도록 준비했어요.

 

Q. 프로그램 개요

  • ✏️ 챌린지: 목표 달성, 콘텐츠 인증, 회고 모임 주 2회 이상
  • ✨ 스터디: 인디메이커, B2B 비즈니스, 퍼널 스터디 등 다양한 참가형 스터디 제공
  • 🙋 고품질 자료: 500개 1인 창업 케이스 및 매일 조쉬가 고품질 아티클 제공
  • 상세 프로그램 및 내용은 아래 링크를 통해 더 자세히 보실 수 있습니다!

 

상세 내용 보기 + 신청 링크:  https://solopreneur.oopy.io/lab

 

 

 

 

다가올 뉴스레터가 궁금하신가요?

지금 구독해서 새로운 레터를 받아보세요

✉️

이번 뉴스레터 어떠셨나요?

조쉬의 프로덕트 레터 님에게 ☕️ 커피와 ✉️ 쪽지를 보내보세요!

댓글 5개

의견을 남겨주세요

확인
  • 히팅스팸

    1
    3 months 전

    현직 개발자입니다. 개발자도 작성하신 글 그대로 일합니다 ㅎㅎ. 다만 말씀하신 것처럼 코드를 보는 눈이 있어서 어디가 잘못됐는지 고쳐달라고 할 수 있고, 서비스를 설계하는 법을 알기 때문에 마구잡이로 만들어달라기보단 특정 설계에 기반해서 세부적인 요청을 하거나 조언을 구하죠. 또, 온라인으로 코드를 작성하는 프로그램이아니라 IDE를 이용하곤 하는데 이게 에러가 이상한대서 많이 나요. 그때 그런 점만 상대적으로 더 잘 알고 있을 뿐이죠. 금주 컨텐츠는 직업과 관련이 있어서 그런지 꽤나 재미있게 읽었습니다~

    ㄴ 답글 (1)
  • 비기

    1
    3 months 전

    아이디어만 있다면 앱 만들 수 있겠네요. 나중에 한번 도전해봐야겠어요!

    ㄴ 답글
  • 종종걸음

    1
    2 months 전

    어떻게 gemini로 유튜브 요약을하셨나요? 저도 궁금해서 따라해봤는데, 제가 만든 gemini youtube summary 웹사이트는 유튜브요약기능이 없다고 요약을 안해주더라구요.. 혹시나 해서 실제 google gemini 들어가서 대화창에 대놓고 유튱브영상요약해달라고 url줬더니 유튜브 영상 요약은 아직 지원되지 않지만 유튜브 영상을 기반으로 질문에 답변하거나 요약을 제공하는 기능은 제공된다 라고 하던데 요약은 어떻게 구현하신건가요? 저는 아무리 머리를굴려봐도 답이안나오네요ㅜ

    ㄴ 답글 (1)

© 2024 조쉬의 프로덕트 레터

퀄리티 있는 비즈니스, 프로덕트, 디자인, 1인 창업가 이야기를 주 1회 들려드릴게요.

뉴스레터 문의 : joshproductletter@gmail.com

자주 묻는 질문 오류 및 기능 관련 제보

서비스 이용 문의admin@team.maily.so

메일리 (대표자: 이한결) | 사업자번호: 717-47-00705 | 서울 서초구 강남대로53길 8, 8층 11-7호

이용약관 | 개인정보처리방침 | 정기결제 이용약관