AI로 미니앱을 만들어 본 분들께 자주 듣는 말이 있어요. "동작은 하는데, 디자인이 좀 아쉬워요." 10월 16일 바이브코딩 핸즈온 세션에서도 디자인 고민이 많이 나왔어요.

이 고민을 덜어줄 도구를 소개할게요. 토스가 직접 관리하는 앱인토스 하네스는 코드 작성과 콘솔 작업뿐 아니라 화면 디자인과 출시 준비까지 도와줘요.

하네스는 AI 코딩 도구에 설치하는 기능 모음이에요. 앱인토스 미니앱을 처음 만들 때부터 출시를 준비할 때까지 필요한 기능을 묶어 뒀어요. 토스가 직접 관리하고, GitHub에 공개돼 있어요. 개발자센터에서는 'apps-in-toss 플러그인'이라는 이름으로 설치 방법을 안내해요.

화면이 아쉬울 때: 토스 디자인 기준이 처음부터 들어가요

AI는 따로 알려주지 않으면 어디서 본 듯한 일반적인 화면을 만들어요. 미니앱은 토스 앱 안에서 열려요. 그런데 글자 크기나 버튼 위치가 토스 화면과 다르면 어색해 보여요. 앱인토스 하네스는 AI가 처음부터 토스 디자인 기준을 알고 화면을 만들게 해줘요.

1. 새로 만들면 토스 디자인 기준이 처음부터 적용돼요

하네스로 미니앱을 만들면 토스 디자인 기준이 프로젝트에 적용돼요. 프로젝트에 추가되는 건 디자인 토큰(색상·글자 크기 같은 기본값), 아이콘, 토스페이스 이모지 서체예요. 디자인 규칙 요약도 프로젝트에 저장돼요. 그래서 이후에 다른 화면을 만들 때도 AI가 이 기준을 참고해요.

2. 이미 만든 화면은 진단해서 고쳐줘요

"화면이 좀 어색해 보여. 깔끔하게 고쳐줘."처럼 말하면 돼요. AI가 화면을 진단하고, 기준에 어긋난 부분은 알려주는 데서 그치지 않고 코드를 직접 고쳐요.

Figma로 만든 디자인이 있다면 그대로 반영해 달라고 요청할 수도 있어요. Figma가 없어도 괜찮아요.

3. 화면 문구와 등록용 이미지도 챙겨요

화면 문구를 점검해서 원래 문구와 고친 문구를 나란히 보여줘요. 고친 문구는 내가 확인한 다음에 화면에 반영돼요. 미니앱 등록에 필요한 로고, 썸네일, 스크린샷도 만들어줘요.

출시 준비: 휴대폰 테스트부터 검수 전 점검까지

토스 앱 없이 개발하고, 실제 토스 앱에서도 바로 열어봐요

개발하는 동안에는 내 컴퓨터 브라우저에서 바로 화면을 확인할 수 있어요. 토스 앱 기능이 가상으로 동작해서 휴대폰 없이도 만들 수 있어요.

내 휴대폰의 토스 앱에서 미니앱을 열어보고 싶을 땐 "휴대폰에서 확인해보고 싶어"라고 말하면 돼요. 미니앱 파일(번들)을 만들어 콘솔에 올리고, 토스 앱에서 열 수 있는 링크까지 준비해줘요.

검수를 요청하기 전에 한 번 더 봐줘요

"검수 넣기 전에 한번 봐줘"라고 요청해 보세요. 공식 출시 체크리스트를 기준으로 코드를 점검해요. 점검 결과는 검수를 요청하지 않아도 바로 알려줘요. 코드에서 고칠 것과 콘솔 설정에서 직접 확인할 것을 나눠서 보여줘요. 놓치기 쉬운 부분을 미리 줄여주는 단계라고 생각하면 돼요.

앱인토스 팀의 공식 검수 결과는 검수를 요청한 뒤 콘솔과 이메일로 안내받아요. 반려됐다면 사유를 붙여서 다시 요청해 보세요. AI가 반려 사유를 문서의 검수 기준과 비교해서 원인을 찾아줘요. 코드에서 원인을 찾지 못하면 억지로 고치지 않고, 앱인토스 팀에 보낼 문의 초안을 만들어줘요.

검수 요청은 상황에 따라 달라요. 이미 출시한 미니앱의 새 버전은 AI가 검수 요청까지 보낼 수 있어요. 보낼 내용을 먼저 보여주고, 내가 승인해야 보내요. 처음 출시하는 미니앱은 첫 검수를 콘솔에서 직접 요청해요.

시작하기 전에 확인해 주세요

・ 처음 설치할 땐 준비가 조금 필요해요. 터미널에 명령어 몇 줄을 입력하고, Git과 Node.js를 설치해야 해요. 막히면 AI에게 "설치 도와줘"라고 요청해도 돼요. ・ 하네스는 Claude Code, Codex, Cursor의 플러그인 기능으로 설치해요. ・ 처음 연결할 때 앱인토스 콘솔에 한 번 로그인해야 해요. ・ Claude Code, Codex 같은 AI 도구를 쓰려면 각 서비스 계정이 필요해요.

설치 방법은 개발자센터 미니앱 만들기 문서의 'apps-in-toss 플러그인 설치하기' 단계에 정리돼 있어요. 지금 만든 화면이 아쉽다면, 하네스를 설치하고 "깔끔하게 고쳐줘"부터 말해보세요.

앱인토스 MCP를 이미 쓰고 있다면

문서 MCP나 콘솔 MCP를 따로 등록해서 쓰고 있다면 하네스를 새로 설치해 주세요. 하네스 안에도 두 MCP가 들어 있고, 디자인과 출시 점검 기능이 더해졌어요.

MCP(Model Context Protocol)는 AI 도구가 외부 서비스와 정보를 주고받는 연결 통로예요. AI는 문서 MCP로 앱인토스 최신 문서를 찾아보고 코드를 써요. 그래서 없는 기능을 호출하는 코드나 예전 방식으로 짠 코드가 줄어들어요. 콘솔 MCP로는 "최근 7일 DAU 알려줘"처럼 말해서 지표를 조회하고, 푸시와 프로모션도 관리할 수 있어요. 콘솔 MCP는 7월 2주 업데이트에서 소개했어요.