Tabswirl 을 만들며

1인 바이브 코더로서 필요한 것이라면 뭐든 만들어봐야겠다는 생각을 하고 있다. 그렇게 만들어낸 것들을 어떻게 작업했는지, 뭘 하는 프로덕트인지에 대한 이야기를 발산해보면 재밌을 듯했다. 그중 첫 번째로 발산하는 프로덕트는 Tabswirl 이다.

빈 구멍 하나

Tabswirl 은 간단히 소개하면 탭 그룹 자동 분류 및 Stash 기능을 결합한 Chrome Extension 이다. 이미 자동 분류 익스텐션은 많이 있지 않나? 그리고 탭 그룹은 원래도 탭을 닫아도 저장이 되는 게 기능 아닌가? 싶을 수도 있겠다. 물론 나도 처음엔 크롬의 탭 그룹 기능을 완벽하게 알지는 못했어서, 탭을 꺼도 그룹은 저장이 되고, 심지어 같은 구글 계정으로 로그인한 다른 기기의 브라우저에서도 공유가 가능하다는 것은 Tabswirl 을 만들고 다듬어가다 보니 알게 되었다.

그럼에도 불구하고 빈 구멍은 있었고, 이것들이 동시에 충족이 되지 않아서 그냥 뚝딱 만들어보자 싶었다.

별도의 과금 없이 경량 온디바이스 LLM 모델 사용하여 탭 그룹 자동 분류
추가로 BYOK 로 외부 LLM 모델 호출 가능
우리가 git stash 하듯이, 띄워놨던 크롬 탭을 분류된 그룹이 유지된 채로 stack 에 push
pop 을 했을 때는 stack 에서 삭제(원래 pop 의도대로)

이걸 페인포인트로 느꼈다고 하기에는, 글쎄, 재밌게도 난 크롬 탭 그룹 기능을 아예 사용하지 않던 사람이었다. 예전에도 탭 그룹이라는 기능을 써볼까 싶긴 했는데, 이거 일일이 분류하고 따로 크롬 종료할 때 어떻게 백업하는지 알아보기가 더 귀찮아 보여서 막연히 미루고 있었던 거다. 근데 요즘 들어 뭔가 웹 서치 통해서 찾아보는 것들이 많아지는 환경이 되었고, 무엇보다 내가 원하는 그런 마이크로한 페인포인트 지점을 채우는 게 이제는 뚝딱 만들어내면 될 법해서 일단 탭 그룹을 한번 써보자 싶었다.

결론은 지금 난 아주 잘 쓰고 있다. 그냥 '이렇게 이렇게 만들어줘' 라고 하면 거의 되는 것이기 때문에 이게 만들어지는 데는 정작 하루이틀이면 충분했는데, 그 이후에 쓰다보니 다듬는데 좀 더 걸리긴 했다.

일단 저 중에서 내가 직접 만든 탭 그룹은 없다. 그리고 이렇게 자동 분류가 되고, 기록을 보존한 채로 크롬을 종료하고 싶을 때, 혹은 지금 있는 탭들을 정리하고 새로운 세션을 시작하고 싶을 때, Stash 를 누르면 Pouch 로 들어가는 식이다. 매우 간단하다.

QA 가 아니라

실은 여기서 공유하고 싶었던 것은 Tabswirl 기능이 어떻고 뭐 어떻게 설계했고 이런거 보다는, 만들면서 느낀 것이다. Tabswirl 을 상세하게 어떻게 기획했고 만들었는지에 대한 것을 알고 싶다면, 직접 깃헙 레포지토리에 리드미와 PRD 를 읽어보면 되겠다.

하루이틀이면 바이브 코딩으로 이런 간단한 것 쯤은 너무 쉽게 만들 수 있다는 거야 당연히 알고 있고, 요즘 AI 좀 만져봤다 하는 사람들이면 누구나 그렇게 하고 있다는 것도 안다. 이전에 개발 업무를 할 때도 코드 한 줄 타이핑하지 않고 개발했었기에 그래서 별다른 큰 감흥은 없는데, 조금 더 중요한 건 이제는 AI에 조금 더 온전히 맡겨버려도 되는 거 아닐까 싶었다는 거다.

Tabswirl 을 만들었던 방식은 이렇다:

지금 위에서 작성한 Tabswirl 에 대한 간략한 소개 및 기능을 그대로 Claude Code 세션에 넣는다.
대화를 통해서 다듬고, 깔끔하게 PRD 를 만들어달라고 한다.
docs 에 PRD 세팅하고, 커밋 단위 만들게 하고 WORK_LOG 통해서 컨텍스트 유지 및 안전장치 등을 세팅한다음 개발을 맡긴다.
테스트한다.

그런데 이걸 하다보니, 그냥 테스트도 알아서 하라고 해버렸다. 그래서,

지금 위에서 작성한 Tabswirl 에 대한 간략한 소개 및 기능을 그대로 Claude Code 세션에 넣는다.
대화를 통해서 다듬고, 깔끔하게 PRD 를 만들어달라고 한다.
docs 에 PRD 세팅하고, 커밋 단위 만들게 하고 WORK_LOG 통해서 컨텍스트 유지 및 안전장치 등을 세팅한다음 개발을 맡긴다.
테스트도 맡긴다.
사용해보고 피드백한다.

이렇게 바뀌었다. 그러니까 4번과 5번이 다른 것은, 이전에는 만들어지고 나면 내가 직접 익스텐션을 로드해서 테스트해보고 뭔가 에러나면 다시 고쳐달라고 했었는데, 이것도 그냥 다양한 테스트 케이스 만들어서 알아서 하라고 해버렸다. 그랬더니 5번, 피드백한다 라는 과정이 추가됐다. 중요한 것은 '테스트한다'가 아니라 '피드백한다' 라는 것이다. 느껴지기에도 내가 이 프로덕트를 사용하는 입장이 된 기분이지, 에러를 잡는 QA 가 된 기분은 아니었다. 한번 랩핑한 것이 도움이 된 셈이었다.

한 겹 더

당연한 걸 말하는 걸 수도 있겠다. 그냥 그렇더라 하는 미적지근하고 무미건조한 내용일 수도 있겠지만, 그럼 그 다음 한번 더 랩핑하는 건 뭘까? 라고 확장 사고해 볼 수 있다. 지금 당장 떠오르는 건, 만약 이 Tabswirl 이 사용자가 늘어나서 피드백이 들어오게 된다면, 그걸 알아서 버전 업데이트 하는 에이전트 AI 정도? 당장은 재밌어보인다.

쓰다보니 며칠 전에 봤던 유튜브 영상이 떠오른다.

들어가서 영상을 확인해보면, 강연을 듣는 청중들 중 대부분은 Claude Code CLI나 IDE extension 을 사용한다고 손을 들고 있다. 다만 게스트인 Boris Cherny 는 거의 iOS 만 쓴다고 답했다. 클로드 코드를 iOS 만 쓴다고? 영상 중반부쯤 보면, 실제로 그는 서브에이전트 띄워놓고, CI 고치고 테스트 돌리고, 피드백 받은 거 실시간 반영하고, 이걸 루프로 돌린다고 말한다. 그리고 그것을 확인하는 채널이 iOS 라는 것.

이미 더 많은 것을 실제로 랩핑하고, 위임해놓은 상태라는 것이다.

크롬 탭 익스텐션은 그렇다치고, 코딩 에이전트를 넘어선 job agent(뭐라고 부르는지 모르겠다)에 대해 곱씹게 됐다.