앱인토스 미니앱 배포하기: 디발자가 되는 길은 멀고도 험하다...

멋쟁이 사자처럼 UXUI 디자인 부트캠프가 지난 수요일로 끝이 났다. 생애 최초로 겨울이 짧게 느껴졌던 이유는, 반은 지구온난화고 반은 프로젝트에 열중해서였을 것이다. 찍먹하길 좋아하는 내가 무언가에 몰입한다는 게 드문 일인데 그걸 가능하게 해준 동료들과 강사님들, 그리고 매니저님들께 감사하다. 그리고 과감히 이 길을 선택해준 과거의 나에게도 감사하다.

 

부트캠프가 끝났다는 건 그동안 열심히 갈고닦은 포트폴리오와 초보 디자이너로서의 역량을 구직시장에 펼쳐야할 시간이 왔음을 알렸다. 그와 동시에 매일 아침 9시마다 작업을 함께해줄 동료가 없어졌다는 의미기도 했다. 두 번의 프로젝트에 열심히 참여했지만 어딘가 부족해보이는 내 포트폴리오를 보충할 겸, 그동안 배웠던 것들을 까먹지 않기 위해서 사이드프로젝트를 시작했다. 두 번의 프로젝트를 진행하는 동안 가장 믿음직스러웠던 동기와 함께 말이다.

 

우리는 앱인토스에 미니앱을 배포하기로 했다.

 

앱인토스라고 하면 아직 뭔지 모르는 분들이 계시던데, 토스 앱 안에 미니앱들을 배포한 '앱인앱' 구조의 플랫폼을 의미한다. 2025년 7월에 정식 출시되었고, 7개월만인 지난 2월에 누적 미니앱 수가 1천개를 돌파했다고 한다. 

 

앱인토스, 토스가 10년 성장 노하우를 모두 공개하는 이유

 

내가 앱인토스를 처음 접하게 된 건 '두쫀쿠'가 확 유행하던 지난 겨울이었다. 스레드를 하는데 '두쫀쿠 지도'가 그렇게나 인기라는 걸 앱인토스 스레드 담당자님이 어필하시던 글을 읽었을 때였다. 당시에 나는 내 웹사이트를 구축하느라 안티그래비티랑 한창 씨름하고 있었고, 따로 설치하지 않고도 내 앱을 배포할 수 있다는 사실을 알고는 바로 '앱인토스' 스레드를 팔로우했더랬다. 

 

언젠간 나도 앱인토스로 미니앱을 배포하겠다... 고 생각만 하던 차에 동기와 포트폴리오의 부족한 부분에 대해 이야기를 나누다가 우리 둘다 사이드프로젝트에 관심이 있다는 걸 알게됐다. 처음엔 MVP만 만들고 그럴싸하게 패키징할 예정이었으나, 강사님과의 커피챗 때 요즘은 디자이너도 '배포' 경험이 중요하다는 걸 알려주시는 거다. 그 길로 동기에게 앱인토스 배포에 관해 의견을 물었고, 긍정적인 반응을 보여주어서 배포를 염두에 둔 서비스 기획을 시작했다. 

---

 

처음부터 우리가 디자인부터 개발까지 다 할 생각은 아니었다. 부트캠프 내에서 개발자 코스를 수료한 분들과 컨택을 해서 제 3의 멤버를 영입하려 했으나... 앱인토스 개발자 가이드라인을 보는데 왠지 마음속에서 알 수 없는 근자감이 생기기 시작했다. '이거 내가 할 수 있을 것 같은데?' 

 

한창 앱 화면 디자인을 하고 있을 때, 동기가 개발자인 지인으로부터 듣고 온 이야기를 해주었다. 우리가 원하는 걸 직접 개발하려고 하면 1년이 걸릴지도 모른다는 내용이었다. 헉... 우리가 스케줄상으로 잡아둔 개발 일정은 1주일이 채 안되는 기간이었고. 갑자기 마음이 불안해지기 시작했다. 직접 앱 배포를 해서 디자인부터 개발까지, 프로덕트 기획부터 운영까지 전 과정을 경험해보려는 의도도 있었지만, 뭐든 빨리 눈에 보이는 성과가 나지 않으면 포트폴리오에도 덧붙일 말이 없기 때문에 곤란해지는 거였다. 상반기 채용 시즌 안에 배포하려면 0부터 개발하는 건 절대 무리라고 생각했다. 

 

그래서 클로드를 이용해서 바이브코딩으로 앱을 개발하기로 했다.

 

컴공인 동생에게 바이브코딩 이야기를 하면 극도로 민감한 반응을 보이곤 했다. 무슨 코드가 쓰여지는지도 모르면서 AI에게 모든걸 맡긴다는 건 무모한 거라고 말이다. 나도 그 말을 백번 이해하지만, 공부하고 난 다음에 코드를 짜기엔 시간이 턱없이 부족했다. 컴퓨터 활용능력 필기를 따는 데에만 2달이 걸린 나다.. 컴퓨터 용어와 친해지기 위해서는 좀 더 많은 시간이 필요할 것 같다고 예상하고, 일단 AI에게 코딩을 맡기기로 했다. 실제로 앱인토스에서도 비전공자 분께서 바이브코딩으로 앱을 출시한 사례도 있고 말이다.

 

무작정 시도해보려는 도전정신은 좋았으나, 우리는 금세 또 막연함에 직면하고 말았다. 클로드 코드는 뭔지, 코워크와 코드의 차이는 뭔지... 똑같은 '프로 플랜'인데 어디는 19달러, 어디는 17달러. 영어로 쓰여진 웹사이트에서 약 2시간 정도 헤매다가 부과세 포함 22달러를 지불하고 나서야 클로드 코드에 입문하게 되었다. 

 

앱인토스 개발자센터

 

클로드만 결제하면 끝일줄 알았으나... 앱인토스 개발 정책에 알맞게 앱을 개발하기 위해서는 AI가 가이드문서를 참고해서 코딩할 수 있도록 공식 문서를 등록하는 과정이 필요했다. 위에 업로드해둔 링크에서 1페이지가 조금 넘는 가이드라인을 따라하는 데만 한 시간 정도를 소비하고 나니 어느새 밤이 되어버렸던 기억이 난다. 나와 동기는 기본 세팅을 하는 데에만 진이 빠져서 그 다음 날에는 개발을 쳐다보지도 않고 디자인에 몰두했더랬다.

---

 

그럼에도 개발까지 자체적으로 진행하겠다고 마음먹고 나서 얻은 것들도 있다.

 

 

1. 디자인 시안 핸드오프를 위해 UI의 각 요소를 더 세심하게 뜯어보기

우리의 세번째 멤버 클로드가 알잘딱깔센하게 개발할 수 있도록 '기능명세서'를 작성하기로 했다. 무턱대고 프롬트를 한줄씩 입력해가거나, 이미지만 달랑 주고 이대로 개발해주라고 말했을 경우에 시간과 토큰이 더 들것 같아서였다. 덕분에 부트캠프에서도 배운 적 없는 기능명세서를 작성하기 시작했다. 

 

크게 Display / Interaction / Rule / Data 라는 5가지 요소로 나누어서 기능명세를 작성했다.
Display - 실제로 구현되길 원하는 화면에 대한 시각적인 요소를 설명한다.

Interacton - 사용자가 UI요소를 탭하는 등의 액션을 취했을 때 앱에서 어떤 상호작용을 하게 되는지에 관해 설명한다.

Rule -  썸네일을 몇 개까지 보여줄지, 바텀시트가 노출되는 조건은 무엇인지 등 어떤 조건에서 어떤 상호작용이 되는지 상세하게 설명한다.
Data - 말 그대로 UI 에 표시할 데이터들은 어떤 것들인지, 어디에서 끌어올지에 관해 설명한다.

 

물론 실제로 기능명세에 들어가야할 내용은 이것보다 훨씬 많지만 우선 이정도로 각 화면의 명세서를 상세히 정리했다. 1차적으로 디자인한 이미지를 클로드에 입력하고 기능명세 초안을 받아냈다. 그걸 손수 입력하면서 디자인상에서 누락된 부분을 추가하거나, 명세 상에서 의도와 다르게 출력된 값을 정리했다. 

 

부트캠프에서 프로젝트를 할 때는 화면만 만들면 되었기 때문에 기획하는 데 더 집중했다면, 이번에는 개발을 어떻게 할지에 대해 더 고민하게 되었다. 물론 기획도 중요하지만, 개발 단계를 고려하지 않는다면 터무니없는 기능을 넣어서 효과에 비해 공수가 크게 드는 비효율적인 판단을 내리게 될 수도 있겠다는 생각이 들었다. 이와 관련해서 얻은 두 번째 깨달음이 있다.

 

2. '어떻게 디자인하는 게 개발하기 더 쉬울까?'를 고민하기

디자인 시안을 여러 버전으로 기획하고는 동기에게 물어봤다. '이거랑 이거 둘 중에서 더 나은거 골라주세요'. 그럴 때마다 동기는 어느쪽이 개발하기 더 쉬울지를 고민해서 답을 내려주었다. 이후로는 피드백을 받기 전에 한번 더 생각해보게 되었다. 어떤 방식이 개발 공수가 덜 들 것인가... 물론 나는 개발의 ㄱ 자도 모르기 때문에 어느쪽이 실제로 공수가 덜 들지는 잘 모른다. 일단 클로드에 물어보고 답변을 받은 다음 판단하는 수 밖에. 

 

그리고 개발 난이도를 신경써야하는 또 다른 이유는 한정된 시간에 있다. 앞에서도 언급했듯이 상반기 채용시즌이 끝나기 전에 앱을 배포하고, 운이 좋으면 배포 후 사용자 데이터를 파악해서 UX를 개선해보는 게 나의 목표인데. 개발하기 어려운 기능을 넣었다가는 AI 와 씨름하다 시간이 다 지나버릴 수도 있는 노릇이다. 실제로 지난 밤에 기능명세를 좌르륵 입력하고 클로드에게 개발을 부탁했다가, 토큰 리밋에 걸리는 바람에 심장이 철렁했더랬다. 피그마 메이크에서 한 번 리밋이 걸리면 다음달 1일에나 다시 사용할 수 있다는 메시지를 받기도 했어서, 한 시가 급한 지금 그런 메시지를 받는다면 굉장히 큰 리스크가 될 것이라고 생각했기 때문이다. 다행히도 새벽 3시 이후로 다시 사용 가능하다는 안내 문구를 보고 오늘 아침 일어나서 못다한 작업을 마저 실행했다.

 

아무튼 배포 전까지 토큰을 효율적으로 써야하기 때문에 지금 당장 필요하지 않은 기능들은 모두 덜어냈다. 브랜딩 요소라고 생각했던 기능들도 빠져서 조금 아쉬웠지만, '일단 배포!' 가 목표인 지금으로서는 어쩔 수 없는 선택이었다. 처음부터 모든 걸 다 하려고 하다가는 중간에 포기해버릴 가능성이 높기 때문에 지속 가능한 발전을 위해서라도 지금은 한 발 물러서는 게 맞는 선택이라고 판단했다. 

 

---

 

앞으로 남은 과제들은...

 

1. 토큰 효율적으로 쓰는 방법 연구하기

한 번 프롬프트를 입력할 때마다 n.nk 가량의 토큰이 소비되는 걸 보고 매 순간 두려움에 떨고 있다. 언제 또 다시 리밋이 걸릴지 모르겠어서 그렇다. 이런 내 고민을 어찌 아시고, 아침에 받은 '요즘IT' 뉴스레터 두번째 게시물에 클로드 토큰 사용량을 최적화하는 방법을 다룬 아티클을 발견했다. 대강 읽어보니 최대한 입력값을 단순화해서 나타내는게 좋고, 서술형이 아닌 나열식으로 정보를 전달해주는 게 토큰을 절약하는 방법이라고 했다. AI를 파트너처럼 생각해서, 회사에서 일하는 것처럼 존대말을 써왔던 과거의 노력이 부끄러워졌다... '~해주세요' 했던 것들이 AI 세계에서는 오히려 토큰을 낭비하는 비효율적인 방식이었다니. 프롬프트만 제대로 입력해도 1500토큰을 700토큰으로 줄일 수 있다고 한다. 아티클을 좀 더 읽어보면서 AI 활용 방법을 뜯어고쳐야겠다.

 

개발자를 위한 Claude Code 토큰 사용량 최적화 전략 | 요즘IT

 

2. 우리 서비스의 와우포인트 구상하기

모든 서비스의 와우포인트는 필연적으로 '브랜딩'과 맞닿아있다고 생각한다. 다른 서비스에는 없는 차별화된 무언가. 아직 우리가 어떤 서비스를 낼 건지 밝힐 수는 없지만, 아직까지의 내용으로 봐서는 시중에 다른 서비스들과 차별점이 크지 않은 것 같다. 심지어는 대체 가능한 강력한 서비스가 이미 존재한다. 하지만 그 서비스들과의 '한끗차이'를 만들어낼 수 있는 건 결국 와우포인트, 즉 브랜딩이라고 생각한다. 따라서 서비스 초기 목표인 신규사용자 유입을 높이기 위해 그들을 후킹할 수 있는, 매력적인 브랜딩 방안에 대해 고민해봐야 할 필요가 있다. 

 

3. 수익화 방안 고민하기

어제 우리가 전혀 고려하지 못하던 요소가 있다는 걸 알게됐다. 바로 데이터베이스(DB)다. 수익화 방안과 데이터베이스 간에 무슨 연관성이 있겠냐고 할 수 있겠지만... 데이터베이스가 필요하다는 말인 즉슨, 매달 고정 지출비용이 나간다는 걸 의미한다. 요즘 바이브코딩한다는 분들의 말을 들으면 심심치않게 'Supabase' 라는 서비스 이름을 많이 들을 수 있다. 그래서 플랜 별 비용을 알아봤는데, 클로드 코드 프로를 구독하는 것 만큼의 비용이 매월 지출될 수 밖에 없다는 걸 알게 됐다. 우리는 가난한(?) 취준생... 나가는 비용 만큼만이라도 수익을 얻을 수 있으면 좋겠다고 생각했다. 그래서 앱을 배포하고 나면 곧바로 수익화를 위해 버전을 업그레이드할 생각이다. 그치만 지금까지 떠오르는 수익화 방안은 MAU를 늘려서 광고를 받는 것 밖에 없다. 뭔가 다른 방안은 없을까... 다른 앱들을 살펴보면서 구상해볼 작정이다.

 

---

 

이러다보면 언젠간 배포하겠지~ 가 아니라 목표는 지금부터 일주일 내로 배포하는 것이다. UXUI 디자이너 둘이서 앱인토스에 미니앱 배포하는 이야기는 계속된다...