본문 바로가기
사회

[더페어 프리즘] 토스에 빠지다: 앱인토스 입성기①

대(大) AI시대와 함께 등장한 '바이브코딩(Vibe Coding)' 덕분이다. 이젠 나도 개발자?... 첫걸음과 난관 당찬... AI로 빠르게 시작하기, Web으로 시작하기, React Native로 시작하기다. 처음 도전할 때는 3가지였으나 14일 토스는...

[더페어 프리즘] 토스에 빠지다: 앱인토스 입성기①

등록된 앱 5개중 4개는 출시, 1개는 대기중이다.  사진=앱인토스 관리콘솔

[더페어] 백상일 기자 = 앱인토스 열기가 심상치 않다. 최근 앱과 게임 개발사들이 발 빠르게 움직이는 모습이 곳곳에서 포착된다. 앱인토스(Apps in Toss)는 파트너사가 개발한 서비스를 토스 앱 내부에서 '앱인앱(App-in-App)' 형태로 노출할 수 있게 해주는 플랫폼이다. 실제로 입점한 앱들을 살펴보면, 기존 다른 플랫폼에서 눈에 띄던 서비스들이 넘어온 사례를 심심치 않게 찾아볼 수 있다.

이 뜨거운 신흥 시장을 지켜보며 나에게도 '한번 해볼까?' 하는 도전 의식이 꿈틀거리기 시작했다. 예전부터 이과를 동경했지만 뼛속 깊은 문과생인지라 지금까지는 그저 바라만 볼 뿐이었다. 동기들끼리 모이면 "우리는 문과라 기술이 없어서 할 수 있는 일이 별로 없다"라며 자조 섞인 농담도 하곤 했다. 하지만 이제 그 아쉬움을 만회할 시기가 도래했다. 대(大) AI시대와 함께 등장한 '바이브코딩(Vibe Coding)' 덕분이다.

토스 비즈니스 회원으로 가입하면 앱인토스 콘솔에서 미니앱 등록과 관리를 할 수 있다. 사진=앱인토스 홈페이지

이젠 나도 개발자?... 첫걸음과 난관

당찬 포부와 함께 토스 생태계에 첫발을 내디뎠다. 앱인토스는 토스 앱 내에서 구동되는 서비스로 비즈니스 회원가입이 필수다. 내친김에 앱인토스 개발자 커뮤니티(필수는 아니다)도 가입했다. 그러자 '나도 이제 개발자가 된 걸까?' 하는 묘한 설렘이 밀려왔다.

가입 후엔 앱을 어떤 방식으로 개발할지 선택해야 했다. 선택이라고 해서 어디 문서에 기록되거나 내 정보에 저장되는 것은 아니다. 그저 어떻게 개발을 할지 생각하는 과정이다. 토스는 3가지 방법을 안내했다. AI로 빠르게 시작하기, Web으로 시작하기, React Native로 시작하기다. 처음 도전할 때는 3가지였으나 14일 토스는 바이브 코딩으로 미니앱 만들기 가이드를 추가했다.

토스 미니앱  구현 방식에 따라 가이드를 제공하고 있다.  사진=앱인토스 홈페이지

웹 기반으로 도전을 시작했다. '웹(Web)'이라고 하면 우리들이 흔히 아는 그 홈페이지가 떠올라 왠지 만만해 보였다. 하지만 호기로운 시작과 달리 이내 코딩의 높은 벽에 부딪히고 말았다. 친절하다고 생각했던 가이드 문서는 마치 외계어처럼 느껴졌다.

결국 내가 선택한 돌파구는 'AI 개발'로의 전면 전환이었다.  가이드에는 '커서(Cursor)'를 이용해 앱을 개발하는 방법이 안내돼 있었다. 커서는 다양한 AI 모델을 지원하는 통합 개발 환경(IDE) 툴로 MCP를 쉽게 연동할 수 있다. 클로드(Claude)나 코덱스(Codex) 같은 LLM 환경에서는 'Apps In Toss Skills'를 이용하면 된다.

그런데 여기서 또 호기심이 발동해, 최근 얘기를 들어 본 구글의 '안티그래비티'를 활용해 보기로 했다.

역시나 과정은 순탄치않았다. 공식 가이드가 커서 위주로 작성돼 있어 안티그래비티 설정에 꽤 애를 먹었다. 완벽한 가이드가 없는 상태에서 인터넷 검색과 AI의 도움을 받아 힘겹게 MCP(Model Context Protocol)를 설정했다.

앱 주제는 평소 깊게 관심 있던 분야로 정했다. 필요한 자료를 리서치해 AI에게 프롬프트로 제공한 뒤 본격적인 개발에 착수했다. 아니, 사실 개발이라기보다는 '지시'에 가까웠다. 나는 그저 AI에게 "이 내용을 잘 봐. 이거 해줘. 저거 고쳐줘"라고 말했을 뿐이다.

토스 디자인의 정수가 담겨 있는 TDS. 사진=앱인토스 개발자센터

숙제 중의 하나, TDS 적용하기

토스 미니앱 바이브코딩 과정에서 어려웠던 것 중 하나는 바로 토스 디자인 시스템(TDS)을 적용하는 일이었다. 앱인토스는 토스 앱 내에서 실행되기 때문에 무엇보다 UI/UX의 통일성이 생명이다. 그 통일성의 핵심이 TDS다.

TDS를 제대로 녹여내기 위해서는 MCP를 적극 활용해야만 했다. MCP가 설정돼 있어 AI가 어느 정도 적절하게 참조하긴 했지만, 가끔 중요한 디테일을 빠뜨릴 때가 있었다. 그럴 때면 AI에게 "토스 MCP를 정확하게 참조해서 개발해라"라고 콕 집어 명시해 줘야 했다.

우여곡절 끝에 마침내 첫 번째 앱이 탄생했다. 동시에 준비하던 두 번째 앱도 비슷한 시기에 완성했다. 퇴근 후 수정과 테스트를 반복하며 두 개의 앱을 만들고 나니, 어느 정도 시스템에 익숙해진 느낌이 들었다. 이렇게 빌드한 앱을 앱인토스에 등록할 때만 해도 개발자로서 성공적인 데뷔를 앞둔 줄 알았다. 하지만 진짜 문제는 지금부터였다.

To Be Continued...

이 기사 공유하기
페이스북X

이 기사를 추천합니다

i

댓글

0

후 댓글을 작성할 수 있습니다.

아직 댓글이 없습니다 이 기사에 첫 의견을 남겨보세요.

댓글 수정