[앱인토스 무작정 따라하기 3편] 내 웹사이트에 토스의 영혼 불어넣기 (토스 브릿지 연결)

안녕하세요! 쌩초보를 위한 앱인토스 무작정 따라하기 3편으로 돌아왔습니다.

지난 2편에서는 깃허브와 버셀을 이용해 마우스 클릭 몇 번만으로 나만의 웹사이트 주소를 만드는 놀라운 경험을 해보셨죠?

이제 인터넷 브라우저 창에 그 주소를 입력하면 전 세계 어디서든 접속할 수 있는 나만의 공간이 생겼습니다.
하지만 아직은 그냥 평범하고 밋밋한 웹페이지일 뿐, 우리가 매일 쓰는 토스 앱 특유의 깔끔한 느낌이 전혀 나지 않을 겁니다.

그래서 오늘은 이 하얀 도화지에 토스만의 세련된 디자인과 기능을 입혀보는 핵심 작업을 진행하겠습니다.

코딩을 몰라도, 디자인 감각이 전혀 없어도 괜찮습니다. 토스 개발팀이 이미 다 준비해 두었으니까요!

 

1. 웹과 앱을 이어주는 마법의 우체부, 토스 브릿지(Toss Bridge)

본격적인 수정에 들어가기 전에 아주 중요한 개념 하나만 짚고 넘어가겠습니다. 바로 토스 브릿지라는 녀석입니다. 이름부터가 다리(Bridge)라는 뜻이죠? 여러분이 만든 웹사이트와 토스라는 거대한 스마트폰 앱 사이를 끈끈하게 연결해 주는 튼튼한 다리이자, 양쪽의 메시지를 전달해 주는 성실한 우체부라고 생각하시면 이해하기 쉽습니다.
우리가 만든 웹사이트는 기본적으로 스마트폰의 카메라를 켜거나, 진동을 울리게 하거나, 상단바(안테나와 배터리가 표시되는 맨 윗부분)의 색상을 마음대로 바꿀 권한이 없습니다. 하지만 이 우체부(브릿지)를 통해서 토스 앱에게 정중하게 부탁을 하면 이야기가 완전히 달라집니다.
"우체부 아저씨! 토스 앱한테 가서 화면 맨 위에 뒤로가기 버튼 좀 만들어 달라고 전해주세요!"라고 코드를 통해 짧은 편지를 보내면, 브릿지가 그걸 잽싸게 토스 앱 본체에 전달해서 진짜로 네이티브 앱과 똑같은 뒤로가기 버튼을 뿅 하고 만들어주는 원리입니다. 이 기능 덕분에 내 허접한 웹사이트가 진짜 토스 앱의 일부처럼 완벽하게 위장할 수 있는 것입니다.

 

2. 코드 수정하기: 프로그램 설치? 마침표 하나면 끝납니다

이제 지난 시간에 만들었던 내 깃허브 창고로 다시 들어가 보겠습니다. 여러 파일들 중에서 화면을 구성하는 가장 기본이 되는 파일을 찾아서 글자를 조금 고쳐볼 텐데요.
여기서 초보자분들을 위한 엄청난 꿀팁이 하나 있습니다. 보통 전문 개발자들은 복잡한 코딩용 프로그램을 컴퓨터에 설치하지만, 우리는 당장 그런 귀찮은 과정 없이 깃허브 웹사이트 안에서 바로 코드를 수정할 겁니다. 나중에 실력이 늘면 요즘 유행하는 커서(Cursor) 같은 인공지능 전용 에디터를 써보시는 것도 추천하지만, 지금은 웹 브라우저만 있으면 충분합니다.
여러분의 깃허브 창고 화면에서 키보드의 마침표(.) 버튼을 딱 한 번만 눌러보세요. 그러면 화면이 마법처럼 스르륵 변하면서 웹 브라우저 안에서 바로 코드를 수정할 수 있는 멋진 편집기 화면(웹 에디터)이 열립니다. 정말 신기하죠?
여기서 화면 왼쪽의 폴더 목록 중 src 폴더를 열고 App 혹은 index 라는 이름이 들어간 파일을 클릭해 보세요. (토스 뼈대 코드의 업데이트 버전에 따라 파일 위치가 조금씩 다를 수 있지만, 주로 영어가 잔뜩 써져 있고 화면에 보이는 인사말 글자들이 적혀 있는 파일을 찾으시면 됩니다.)

 

3. 토스 상단바(헤더) 색상 바꾸고 내 타이틀 달기

편집기를 여셨다면 알 수 없는 기호들이 잔뜩 보일 텐데요, 절대 당황하지 마시고 우리가 아는 익숙한 알파벳 단어들을 천천히 찾아보세요. 토스 뼈대 코드에는 초보자들이 브릿지를 쉽게 테스트해 볼 수 있도록 샘플 코드들이 아주 친절하게 작성되어 있습니다.
그중에서 setNavigationBarColor 혹은 setTitle 같은 단어를 찾아보세요. 이것이 바로 아까 말씀드린 우체부에게 보내는 특별한 편지입니다.
예를 들어 코드 중에 setTitle('Toss Mini App') 이라고 적힌 부분을 찾으셨다면, 영어 따옴표 안의 글자를 지우고 setTitle('내 첫 앱인토스') 라고 한글로 살짝 바꿔서 저장해 보세요. 그러면 나중에 화면 상단에 밋밋하게 있던 제목이 여러분이 작성한 예쁜 한글 타이틀로 둔갑하게 됩니다.
마찬가지로 상단바 배경색을 바꾸는 코드 부분에 여러분이 원하는 색상의 코드를 넣으면, 내 웹사이트가 토스 앱 안에서 열릴 때 상단 디자인이 토스 특유의 깔끔한 스타일로 완벽하게 녹아드는 것을 확인할 수 있습니다. 금융 앱의 생명인 신뢰감을 내 웹사이트에 공짜로 덧입히는 순간입니다.

 

4. 수정한 내용 인터넷에 반영하기 (자동 배포의 마법)

깃허브에서 내 입맛대로 글자를 수정하고 화면 왼쪽의 Source Control 메뉴를 눌러 변경 사항을 저장(Commit)하셨나요? 그럼 이제 이걸 지난 시간에 가입했던 버셀(Vercel)에 다시 접속해서 올려야 할까요?
정답은 '아니오'입니다! 지난 2편에서 깃허브와 버셀을 서로 연동해 두었던 것 기억하시죠? 이 연결의 진정한 파괴력이 바로 여기서 발휘됩니다. 여러분이 깃허브에서 코드를 수정하고 저장하는 순간, 똑똑한 버셀 서버가 그걸 자동으로 알아채고 무대 뒤에서 공사를 다시 시작합니다.
버셀 웹사이트 대시보드에 들어가 보시면, 여러분이 굳이 명령하지 않았는데도 혼자서 열심히 빙글빙글 돌며 수정한 코드를 인터넷 전광판에 업데이트하고 있는 기특한 모습을 볼 수 있습니다. 약 1분 정도만 여유롭게 기다린 뒤에, 내 웹사이트 주소로 다시 접속해 보시거나 새로고침을 눌러보세요. 방금 내가 깃허브에서 수정한 글자와 색상이 마법처럼 실시간으로 반영되어 있을 겁니다.
이제 여러분은 언제 어디서든 번뜩이는 아이디어가 떠오르면 스마트폰으로 코드를 수정하고, 그것을 전 세계 사람들이 접속할 수 있는 인터넷에 즉시 업데이트할 수 있는 완벽한 시스템 하나를 개인 소유로 갖추게 되셨습니다.

 

5. 마무리하며: 대망의 4편 예고

오늘 우리는 토스 브릿지라는 핵심 개념을 배우고, 깃허브의 숨겨진 웹 에디터 기능을 이용해 내 웹사이트의 글자와 상단바 디자인을 수정하는 방법을 알아보았습니다. 이제 누가 봐도 진짜 토스 앱 안에 있는 정식 부가 서비스처럼 그럴듯한 모양새를 갖추기 시작했죠.
"근데 이 영어 코드가 너무 어려워서 제가 직접 버튼이나 메뉴를 다 만들 수는 없을 것 같아요"라고 생각하시며 지레 겁먹으셨나요? 절대 걱정하지 마세요. 요즘은 인공지능에게 말만 하면 코드를 다 짜주는 바이브 코딩(Vibe Coding)의 시대니까요! 복잡한 디자인 요소나 기능은 인공지능에게 부탁해서 복사하고 붙여넣기만 하면 그만입니다.
다음 4편에서는 드디어 여러분이 이 시리즈를 클릭하신 가장 큰 이유이자 가장 기다리셨을 주제, 바로 수익화에 대한 이야기를 딥하게 파헤쳐 보겠습니다. 정성스럽게 만든 내 앱인토스 페이지 요소요소에 구글 애드몹(AdMob) 등의 배너 광고를 찰떡같이 붙여서, 내가 잠을 자는 동안에도 매달 달러 파이프라인 수익이 창출되는 구체적인 방법을 다룰 예정입니다.
오늘 수정한 웹페이지를 보면서 크리에이터로서의 흐뭇함을 마음껏 만끽하시고, 수익화의 부푼 꿈을 안고 다음 4편에서 다시 뵙겠습니다! 진행하시다가 궁금한 점이나 막히는 에러 창이 뜬다면 언제든 편하게 댓글로 남겨주시면 아주 자세히 알려드리겠습니다.