[앱인토스 무작정 따라하기 1편] 내 웹사이트를 토스 앱에 넣고 광고 수익까지? (코딩 몰라도 됨)

안녕하세요!

N잡러와 자동화 수익에 관심이 많은 분들이라면 오늘 포스팅을 꼭 끝까지 읽어주세요.

오늘은 코딩의 '코'자도 모르는 쌩초보자분들도

내 웹사이트(또는 미니 앱)를 대한민국 국민 앱 '토스(Toss)' 안에 쏙 집어넣고,

쏠쏠한 광고 수익까지 챙기는 방법을 알아보려고 합니다.

최근 토스에서 'apps-in-toss-ax'라는 오픈소스 프로젝트를 공개했습니다.

영어에다가 '오픈소스'라는 말까지 나오니 벌써 뒤로 가기를 누르고 싶으시다고요?

잠깐만 멈춰보세요!

아주 쉽게 말해서 '누구나 토스 앱 안에서 돌아가는 나만의 미니 앱을 쉽게 만들 수 있게

토스 측에서 미리 짜둔 뼈대(템플릿)'를 무료로 풀었다는 뜻입니다.

우리는 이 뼈대를 가져와서 살짝 꾸미고, 내 광고판만 쏙 끼워 넣으면 됩니다.

자, 그럼 이게 대체 왜 대박인지, 그리고 코딩을 몰라도 어떻게 할 수 있는지 하나씩 차근차근 설명해 드릴게요.

 

1. 앱인토스(Apps in Toss)가 도대체 뭔가요?

우리가 스마트폰에 새로운 앱을 깔려면 보통 구글 플레이스토어나

애플 앱스토어에 들어가서 검색을 하고, 비밀번호를 누르고, 다운로드하는 번거로운 과정을 거쳐야 하죠.

하지만 앱인토스는 다릅니다. 사용자가 별도로 앱을 설치할 필요가 전혀 없습니다.

토스 앱 안에서 버튼이나 링크 터치 한 번으로 바로 실행되는 '미니 앱'을 뜻하기 때문이죠.

중국 위챗의 미니프로그램이나, 카카오톡 안에서 열리는 다양한 쇼핑하기,

선물하기 같은 부가 서비스들을 생각하시면 이해하기 쉽습니다.

내가 만든 웹페이지가 토스라는 거대한 금융 백화점 안의 한

'팝업스토어'처럼 자연스럽게 입점하는 것이라고 생각하시면 됩니다.

허허벌판 사막에 내 가게를 차리는 것과, 이미 하루에도 수천만 명이 북적이는 백화점 1층 로비에 내 가게를 차리는 것의 차이입니다.

 

2. 왜 굳이 '토스(Toss)' 안에 내 앱을 넣어야 할까요?

블로그나 일반 웹사이트로 만들어도 되는데, 왜 굳이 토스 앱 안으로 들어가야 할까요?

여기에는 초보자에게 엄청난 3가지 장점이 있습니다.

 

첫째, 상상을 초월하는 토스의 엄청난 트래픽(방문자 수)입니다.

현재 토스의 월간 활성 사용자 수(MAU)는 1,500만 명이 넘습니다.

대한민국 국민 절반 이상이 쓰는 앱이죠.

앱스토어에 내 앱을 덩그러니 올리고 사람들이 그걸 검색해서 설치하게 만드는 것은 전문 마케터들에게도 피 말리는 일입니다.

하지만 이미 내 스마트폰에 깔려있는 토스 앱 안에서 작동한다면?

클릭 한 번이면 되기 때문에 접근성이 비교할 수 없을 만큼 좋아집니다.

 

둘째, 토스의 깔끔하고 신뢰감 있는 디자인(UI/UX)을 내 것처럼 쓸 수 있습니다.

초보자들의 가장 큰 고민 중 하나가 "내가 만들면 왠지 허접해 보인다"는 것입니다.

하지만 걱정하지 마세요. 토스에서는 '토스 브릿지(Toss Bridge)'라는 신기한 마법 지팡이를 제공합니다.

이 기능을 사용하면 내 웹페이지의 상단바 색상, 뒤로가기 버튼, 알림창 등이

마치 토스 개발팀이 직접 만든 원래 토스 앱의 일부인 것처럼 아주 자연스럽고 예쁘게 보입니다.

금융 앱 특유의 '신뢰감'을 내 앱에 공짜로 입히는 셈이죠.

 

셋째, 가장 중요한 '수익화(광고)'가 매우 쉽고 자연스럽습니다.

이 연재 시리즈의 핵심 목표이기도 하죠. 내 앱인토스 페이지 하단이나

중간에 구글 애드몹(AdMob) 같은 배너 광고를 붙여서 매달 달러로 수익을 창출할 수 있습니다.

사용자들이 내 미니 앱에서 심리테스트를 하거나, 유용한 정보를 얻어갈 때마다

여러분의 통장에 쏠쏠한 치킨값이 쌓이게 되는 파이프라인을 구축하는 것입니다.

 

 

3. 코딩을 1도 모르는 쌩초보도 진짜 할 수 있나요?

네, 무조건 가능합니다! 제가 이 시리즈를 기획한 이유이기도 합니다.

우리는 복잡한 컴퓨터 언어를 백지부터 직접 타이핑하지 않을 겁니다.

앞서 말씀드린 토스에서 이미 잘 만들어둔 'apps-in-toss-ax' 뼈대 코드를 그대로 복사해서 붙여넣기만 할 거거든요.

게다가 요즘은 인공지능(AI) 시대 아닙니까?

챗GPT나 클로드(Claude) 같은 AI에게 "이 코드에서 버튼 색깔 파란색으로 바꿔줘",

"여기에 구글 광고 넣는 코드 좀 작성해 줘"라고 말로 명령만 하면, AI가 완벽한 코드를 알아서 짜줍니다.

(요즘 이런 걸 말로 코딩한다고 해서 '바이브 코딩'이라고 부르기도 하죠!)

여러분은 그저 복사해서 지정된 위치에 붙여넣기만 하면 앱이 뚝딱 완성됩니다.

제가 그 '붙여넣는 위치'를 앞으로 시리즈에서 스크린샷과 함께 아주 꼼꼼하게 짚어드릴 겁니다.

 

4. 앞으로의 여정을 위해 준비해야 할 2가지

당장 거창한 개발용 프로그램(IDE)을 설치하거나 유료 결제를 할 필요는 전혀 없습니다.

시작하기 전, 딱 두 가지만 먼저 마음속에 저장해 주세요.

1. 깃허브(Github)와 버셀(Vercel) 무료 가입: 이름이 어려워 보이지만 별거 아닙니다. 깃허브는 내 뼈대 코드를 보관해 두는 '무료 인터넷 창고'이고, 버셀은 그 창고에 있는 코드를 사람들에게 보여주는 '무료 쇼윈도(호스팅)' 역할을 합니다. 다음 2편에서 회원가입부터 버튼 누르는 것까지 아주 상세히 다룰 테니 지금은 이름만 들어두셔도 충분합니다.
2. '끝까지 한 번 따라 해보겠다'는 실행력: 처음 보는 영어 화면이 나오면 누구나 당황하기 마련입니다. 하지만 포기하지 않고 마우스 클릭만 잘 따라오시면, 며칠 뒤 내 스마트폰 토스 앱 안에서 내가 만든 페이지가 열리는 짜릿한 경험을 하시게 될 겁니다.

자, 가슴이 조금 두근거리시나요?

'나도 토스에 내 앱을 올릴 수 있다'는 자신감을 가지셨다면 1단계는 대성공입니다.

다음 [2편: 10분 만에 끝내는 개발 환경 구축]에서는 본격적인 첫걸음을 떼보겠습니다. 개발자들이 매일 쓴다는 깃허브(Github)를 이용해 내 전용 웹사이트 주소를 만들고 인터넷에 띄워보는 과정을 스크린샷과 함께 아주 쉽게 하나씩 따라 해 보겠습니다.

진행하시다가 궁금한 점이 생기면 언제든 편하게 댓글로 남겨주세요. 그럼 2편에서 뵙겠습니다!

💡 이 글이 도움이 되셨다면 공감(❤️)과 구독 부탁드립니다!