뒤로
Mansikson
Mansikson ·

안녕하세요? 디스콰이엇을 가끔 구경하던 디자이너 입니다. ChatGPT와 같이 작업해 열흘만에 간단한 웹앱을 만들어 배포까지 해보았습니다. 배포하고 소개까지는 했는데 본업이 바빠서 글쓰기를 미루게 되었네요. 우선 왜 만들었는지에 대한 이야기를 써 보았습니다.

유튜브는 왜 답답한가?

구글에서 궁금한 걸 검색했는데 제일 그럴듯한 결과가 영상이었을 때 답답한 적은 없었나요? 재밌는 영상을 보는 건 즐겁지만 정보마저도 영상에서 찾고 싶었던 건 아닙니다. 영상이 있어야 도움이 되는 정보도 있지만 대부분은 이미지와 텍스트 만으로 충분할 뿐만 아니라 훨씬 효율적입니다.

영상이 왜 나쁜가요? 내가 찾는 부분을 빠르게 탐색하는데 불편하기 때문입니다. 블로그도 쓸모없는 정보 끝에 정작 필요한 내용은 없었다는 것을 알게 된다는 것으로 악명 높았지만, 적어도 블로그에서는 내가 마지막까지 흐름을 통제합니다. 좀 쓸데없는 소리다 싶으면 빠르게 넘기면 그래도 시간을 낭비하지 않을 수 있으니까요.

유튜브에서 정보를 찾을 때는 어떤가요? 프로그레스바를 클릭하거나 조심스럽게 움직여 가면서 정보가 나올 때까지 빠르게 넘기지만 마지막에 이르러서는 찝찝함을 느낍니다. 중요한 부분이 나오는 것을 모르고 건너뛴 것은 아닐까? 그렇게 되짚어 돌아가면서 찾다 보면 결국 영상을 끝까지 볼 시간을 투자하고도 얻는 것 없이 다음 영상에서 비슷한 일을 반복해야 합니다.

마우스에 스크롤 휠이 없었던 때를 아시나요? 휠이 있는 마우스를 처음 써보고 놀랐던 기억이 납니다. 하드웨어와 소프트웨어가 이토록 멋지게 어우러진 감각을 주었던 감동은 그 이후로는 아이폰 터치스크린 정도 뿐일 것입니다.

유튜브는 스크롤을 새로운 영상을 탐색하는데 사용합니다. 또 다른 영상을 보도록 하는 것이 영상을 효율적으로 탐색하는 것보다 중요하다고 생각하는 것이겠지요. 그래서 스크롤 없이 답답하게 사용할 수밖에 없는 것입니다.

LLM과 팀으로 작업하는 방법

위 아이디어는 3년 전쯤에 트윗했던 적이 있었습니다. UI에 대한 의견이었는데 막연하게 유튜브 영상은 세로 스크롤로 탐색할 수 있어야 하며 이를 통해 블로그처럼 볼 수 있게 하는 서비스가 있었다면 좋겠다는 내용이었을 것입니다.

그런데 어느 날 Claude Artifacts 기능을 가지고 놀다가 구현이 가능한지 물어보았는데 아주 시원하게 당연히 된다고 답하더니 바로 코드까지 만들어줬습니다. 클로드에서 바로 동작을 확인할 수는 없었지만, ChatGPT4o에게 코드를 보여주고 로컬에서 수정할 수 있도록 환경구성을 도와달라고 했어요. 시작이 가벼워서인지 다듬고 출시까지 해보기로 마음을 먹어보게 됩니다.

물론 과정이 매끄럽지만은 않았습니다. 스크롤과 플레이타임 동기화 기능을 개선하는 과정은 계속 빙빙 도는 느낌이었어요. 개선 목표를 더 명확하게 설명하고 더 정확한 피드백을 주는데도 문제가 해결되지 않았습니다. 결국 메인 컨셉이 동작한다면 단점이 있더라도 출시를 하는 것이 더 낫다고 결론지었습니다.

이 문제는 업데이트에서 해결했는데 이 경험도 나중에 기록으로 남겨보겠습니다. 요약하면 정확하게 설명하는데 집중하기보다는 어떻게 해결할지 방향을 제시해 주는 것이 더 나은 방법이었어요.

스크립트 API 사용은 실패

원래 아이디어는 유튜브의 자막 정보를 API로 가져와서 블로그 글처럼 만드는 것이었습니다. 글과 이미지로 이루어진 포스팅을 빠르게 탐색하듯이 사용하는 시나리오를 대략 구상했지요.

그런데 API 활용하는 것은 생각 이상으로 문제가 많이 생겼고, 치명적인 단점 두 가지를 알게되어 포기했습니다. 스크립트를 사용량에 제한이 있고 그걸 활용하려면 로그인이 필요하다는 것이었습니다. 스크립트 보여주는 기능은 포기하고 영상 길이만큼 타임라인을 숫자로 생성하도록 방향을 바꿨습니다.

결과는 어떠했는지?

일단 개인적으로 첫 번째 출시였다는데 의미를 둡니다. 클로드가 만든 코드를 시작으로 하루 1~2시간씩 조금씩 고치고 기능을 완성한 후 마지막날인 주말에 디자인과 동작을 다듬고 공개했습니다.

유저가 많지는 않지만 나 스스로가 만족하는 사용자 입니다. 부모님이 긴 유튜브영상을 보내줘도 금방 훑어보고 대화하는데 필요한 정보를 충분히 파악할 수 있지요.

그리고 언제든지 웹에 접속해서 사용할 수 있는 내 제품이 있다는건 섬을 소유하고 있는 것 같아서 즐겁네요.

앞으로의 계획?

출시 이후로 한번 기능 업데이트를 했습니다. 이로서 중요한 문제는 해결했으니 당분간 손을 댈 것 같지는 않습니다. 만약 더 작업한다면 모바일에서도 쓸만하게 만들 수 있다면 좋겠습니다.

지금은 완성도를 높이기보다는 새로운걸 더 많이 만들어보려고 합니다. 이제 동작하는 코드를 만들어 내는 것은 정말 아무것도 아닌 일이 된 것 같습니다. 트윗 올리듯이 아이디어를 말하면 코드로 만들어주니까요. 그리고 앞으로 더 쉬워지겠지요. 디자이너로서 AI에 디자인을 시키면 답답하지만 코드는 항상 만족스럽게 결과를 내어 줍니다. 한번 완성을 해 보았으니 만들다 만 프로젝트를 하나씩 살려내 출시까지 해보려고 합니다. 다음은 supabase로 로그인기능과 백엔드를 붙여서 만들어보는게 목표입니다.

ZoetroView

마우스 스크롤로 빠르게 유튜브 동영상을 훑어볼 수 있는 뷰어

2

댓글

로그인 후 댓글을 남길 수 있습니다.

아직 댓글이 없습니다.