[앱인토스 무작정 따라하기 2편] 단 10분 만에 내 전용 웹사이트 주소 만들기 (깃허브와 버셀 완전 정복)

안녕하세요!

초보자를 위한 앱인토스 무작정 따라하기 2편으로 돌아왔습니다.

지난 1편에서는 왜 우리가 토스 앱 안에 나만의 미니 앱을 만들어야 하는지,

그 엄청난 장점과 광고 수익화의 가능성에 대해 이야기해 보았죠.

다들 내 앱이 천만 국민 앱 토스에서 실행되는 모습을 상상하며 가슴이 두근거리셨을 거라 생각합니다.
오늘은 드디어 이론을 넘어 실전으로 들어가는 첫 시간입니다.

코딩이라는 단어만 들어도 머리가 아프시다고요? 전혀 걱정하지 마세요.

복잡한 개발용 프로그램을 컴퓨터에 설치할 필요도 없고, 검은 화면에 알 수 없는 영어를 타이핑할 일도 없습니다.

오늘 우리가 할 일은 오직 인터넷 브라우저를 열고 회원가입을 한 뒤, 마우스로 몇 번의 클릭을 하는 것뿐입니다.
단 10분만 투자하시면,

인터넷 세상에 나만의 고유한 웹사이트 주소가 생기는 마법 같은 경험을 하시게 될 겁니다.

자, 그럼 천천히 따라와 주세요!

 

1. 오늘 우리가 사용할 마법의 도구 2가지: 깃허브와 버셀

본격적으로 시작하기 전에 오늘 사용할 두 가지 서비스의 개념을 아주 쉽게 설명해 드리겠습니다. 이 두 가지만 이해하시면 앞으로 앱을 만들 때 기초 공사는 끝난 셈입니다.
첫 번째는 깃허브(Github)입니다. 깃허브는 전 세계의 개발자들이 자신이 짠 코드를 올려두고 공유하는 거대한 인터넷 창고입니다. 우리는 오늘 토스 개발팀이 정성스럽게 만들어둔 앱인토스 뼈대 코드를 이 창고에서 발견하고, 그것을 내 개인 창고로 안전하게 복사해 올 것입니다.
두 번째는 버셀(Vercel)입니다. 내 창고에 코드를 잘 모셔두기만 하면 아무도 볼 수가 없겠죠? 버셀은 내 창고에 있는 코드를 가져다가 24시간 내내 전 세계 사람들이 접속할 수 있도록 인터넷에 띄워주는 무료 전광판(호스팅 서비스) 역할을 합니다. 특히 깃허브와 찰떡궁합이라서 클릭 몇 번만으로 모든 연결이 끝납니다.

 

2. 1단계: 깃허브 가입하고 토스 뼈대 코드 내 창고로 훔쳐 오기

가장 먼저 해야 할 일은 내 전용 창고를 만드는 것입니다. 구글 검색창에 깃허브를 검색해서 공식 홈페이지에 접속해 주세요. 우측 상단에 있는 Sign up 버튼을 눌러 회원가입을 진행합니다. 이메일 주소, 사용할 아이디, 비밀번호만 입력하면 아주 간단하게 무료 가입이 완료됩니다.
가입과 로그인을 모두 마치셨다면, 이제 가장 중요한 작업을 할 차례입니다. 토스에서 제공하는 훌륭한 뼈대 코드를 내 창고로 복사해 올 건데요, 인터넷 주소창에 github.com/toss/apps-in-toss-ax 를 그대로 복사해서 붙여넣고 엔터를 쳐보세요. 복잡한 파일들이 잔뜩 있는 화면이 나올 텐데, 여기가 바로 토스 개발팀이 우리를 위해 준비해 둔 템플릿 코드 저장소입니다.
화면 우측 상단을 자세히 보시면 Fork라는 작은 버튼이 보일 겁니다. 이 버튼이 오늘 가장 중요한 핵심입니다! 레스토랑에서 포크로 음식을 콕 찍어 내 접시로 가져오듯, 남의 공개된 창고에 있는 코드를 내 창고로 그대로 복사해 오는 기능입니다.
Fork 버튼을 누르시고, 다음 화면에서 초록색 Create fork 버튼을 한 번 더 클릭해 주세요. 화면이 잠시 새로고침 되면서, 단 몇 초 만에 내 깃허브 계정에 토스의 뼈대 코드가 완벽하게 복사됩니다. 이제 이 코드는 온전히 여러분의 마음대로 요리할 수 있는 재료가 되었습니다.

3. 2단계: 버셀을 이용해 내 코드를 인터넷 세상에 공개하기

코드를 내 창고에 안전하게 가져왔으니, 이제 사람들에게 보여줄 번듯한 웹사이트로 만들어야겠죠? 구글에 버셀을 검색해서 홈페이지에 접속해 줍니다.
이번에도 우측 상단의 Sign Up 버튼을 눌러 가입을 진행하는데요, 여기서 아주 편리한 꿀팁이 있습니다. 화면에 보이는 여러 가입 옵션 중에서 Continue with Github(깃허브 계정으로 계속하기)를 선택해 주세요. 방금 전 1단계에서 가입했던 깃허브 계정과 버셀이 자동으로 연동되면서 복잡한 정보 입력 없이 순식간에 가입과 로그인이 끝납니다.
로그인을 완료하면 대시보드라는 기본 화면이 나타납니다. 화면 중앙이나 우측 상단에 있는 검은색 Add New 버튼을 누르고 Project를 선택해 주세요.
그러면 아주 신기한 화면이 나타납니다. 버셀이 여러분의 깃허브 창고 안을 들여다보고, 아까 우리가 복사해 온 apps-in-toss-ax 프로젝트를 목록에 떡하니 띄워줍니다. 그 프로젝트 이름 바로 옆에 있는 Import 버튼을 가볍게 눌러줍니다.
이제 거의 다 왔습니다! 화면이 넘어가면 프로젝트의 이름을 수정할 수 있는 칸이 나오는데, 당장 건드릴 필요 없이 화면 가장 아래에 있는 파란색 Deploy(배포) 버튼을 눌러주세요.
이 버튼을 누르는 순간, 버셀이 여러분의 코드를 가져와서 알아서 서버를 구축하고 웹사이트를 조립하는 공사를 시작합니다. 화면에 막 글씨들이 올라가면서 진행 상황이 표시되는데요, 전혀 겁먹을 필요 없습니다. 커피 한 잔 하시면서 1분에서 2분 정도만 여유롭게 기다려 주시면 모든 작업이 끝납니다.

 

 

4. 축하합니다! 드디어 나만의 웹사이트가 탄생했습니다

기다림이 끝나고 화면에 축하 폭죽이 팡팡 터지면서 Congratulations! 라는 문구가 보인다면 대성공입니다. 화면 중앙에 보이는 미리보기 이미지를 클릭하시거나, 버셀이 무료로 제공해 준 도메인 주소(예를 들면 내프로젝트이름.vercel.app 형식의 주소)를 클릭해 보세요.
짠! 새로운 인터넷 창이 열리면서 무언가 화면이 뜰 겁니다. 아직 우리가 디자인을 입히기 전이라서 화면이 아주 화려하지는 않을 수 있고, 간단한 안내 문구만 떠 있을 수도 있습니다.
하지만 여기서 내용물은 중요하지 않습니다. 진짜 중요한 핵심은, 방금 전까지만 해도 남이 만들어둔 파일 쪼가리에 불과했던 코드가 이제는 스마트폰 브라우저 주소창에 치면 누구나 접속할 수 있는 실제 라이브 웹사이트로 변신했다는 사실입니다.
평생 컴퓨터 프로그래밍이나 서버 관리를 해본 적 없는 분이, 단 10분 만에 마우스 클릭만으로 전 세계 어디서든 접속 가능한 무료 서버를 구축하고 웹사이트를 띄우신 겁니다. 이것은 정말 엄청난 성과입니다! 오늘 해내신 스스로에게 큰 박수를 쳐주셔도 좋습니다.

5. 초보자 단골 Q&A (막혔을 때 읽어보세요)

질문: 버셀에서 Deploy 버튼을 눌렀는데 폭죽이 안 터지고 빨간색 에러 화면이 떠요!
답변: 초보자분들이 가장 많이 겪는 상황입니다. 보통은 일시적인 서버 오류이거나 깃허브 연동 과정에서 잠깐 엇갈린 경우입니다. 당황하지 마시고 버셀 화면에서 Redeploy(다시 배포하기) 버튼을 찾아서 한 번 더 눌러보세요. 열에 아홉은 다시 정상적으로 작동합니다. 그래도 안 된다면 이 글의 댓글로 어떤 빨간 글씨가 떴는지 남겨주시면 바로 도와드리겠습니다.
질문: 나중에 이 웹사이트 주소 말고 제가 산 진짜 도메인(닷컴 같은 주소)으로 바꿀 수 있나요?
답변: 당연히 가능합니다! 버셀 설정에서 여러분이 가비아나 호스팅케이알 같은 곳에서 구매하신 멋진 도메인을 언제든지 연결할 수 있습니다. 하지만 지금 당장은 토스 앱 안에 넣는 것이 목적이므로, 버셀이 무료로 준 주소를 그대로 사용하시는 것이 가장 편하고 좋습니다.

 

6. 마무리하며: 3편 예고

오늘은 토스 개발팀의 뼈대 코드를 내 창고(깃허브)로 복사하고, 무료 호스팅 서비스(버셀)를 이용해 실제 인터넷 세상에 내 웹사이트를 띄우는 것까지 완벽하게 성공했습니다.
지금은 그저 평범한 웹페이지 주소에 불과하지만, 이 주소가 바로 앞으로 우리가 토스 앱 안에 집어넣고 광고 수익을 창출할 소중한 미니 앱의 심장이 될 것입니다.
다음 3편에서는 오늘 만든 이 기본 웹페이지에 드디어 토스의 영혼을 불어넣어 볼 차례입니다. 토스 앱 특유의 깔끔한 상단바(헤더)를 적용하고, 토스 브릿지(Toss Bridge)라는 기능을 연결해서 내 페이지가 진짜 토스 앱의 일부처럼 완벽하게 녹아들도록 만드는 마법 같은 작업을 진행해 보겠습니다.
오늘 큰 산을 하나 넘으셨으니 푹 쉬시고, 더 재밌고 신기한 내용이 가득한 3편에서 다시 뵙겠습니다! 궁금한 점이 있다면 언제든 편하게 댓글 남겨주세요.