들어가기
홈페이지를 만드는 많은 방법이 있습니다.
인터랙티브한 홈페이지나 쇼핑몰을 만드는 툴도 다양하게 있죠. WIX, 아임웹, 카페24, 고도몰 등 다양한 템플릿과 함께 추가 개발을 할 수 있도록 지원하는 사이트들이 있습니다.
최근에는 AI가 발전하면서 직접 홈페이지를 코딩하는 방법도 괜찮은 것 같습니다. 바이브 코딩으로 원하는대로 홈페이지를 만드는 것도 쉽습니다.
잘 만들어진 템플릿으로 제작하면서도 자신이 원하는 대로 수정하거나 추가하고, 온라인에 배포도 쉽게 할 수 있는 방법으로 Vercel 서비스를 활용하는 방법이 있습니다. 이 방법을 사용하면 기본 템플릿을 배포하고 도메인을 연결하는데 5분이면 됩니다. 
물론 입맛에 맞춰 커스터마이징하는데는 훨씬 더 많은 시간이 들기는 하지만, 적당한 랜딩페이지를 만드는 정도는 다른 어떤 서비스보다 빠르게 가능합니다.
물론 입맛에 맞춰 커스터마이징하는데는 훨씬 더 많은 시간이 들기는 하지만, 적당한 랜딩페이지를 만드는 정도는 다른 어떤 서비스보다 빠르게 가능합니다. 사전 준비
홈페이지를 Vercel로 만들고 배포하기 위해서는 2가지 준비가 필요합니다.
1.
Github 계정: 배포할 홈페이지의 소스코드를 관리합니다. Vercel에서 무료로 배포하려면 기업 계정이 아닌 개인 계정이어야 합니다. 기업 계정의 경우 추가 비용이 발생합니다.
2.
Vercel 계정: Vercel 서비스를 이용할 것이니 반드시 필요합니다. Github 계정으로 로그인 가능합니다. 회원 가입 시 Hobby 를 선택해서 무료로 가입할 수 있습니다. Pro 계정은 비용이 발생합니다.
템플릿 고르기
Vercel에 로그인한 상태에서 https://vercel.com/templates 에 접속해서 적합한 템플릿을 선택합니다. 왼쪽의 필터를 통해서 용도별로 템플릿을 골라볼 수 있습니다.
SaaS를 선택하고, 템플릿 중에 Finwise: SaaS Landing Page를 선택해보겠습니다.
View Demo를 눌러서 데모 페이지를 먼저 볼 수 있습니다. 1페이지 랜딩페이지로 간단하게 구성되어 있습니다. 적당한 인터랙션도 있고, CTA도 추가되어 있습니다. 간단한 홈페이지로 적합합니다.
배포하기
Deploy 를 선택해서 해당 템플릿을 내 Github에 복제하고 Vercel을 통해 배포합니다. 이 과정이 사람이 개입할 것이 거의없이 매우 간단합니다.
Deploy(배포)를 누르면 다음과 같이 새 프로젝트를 생성하는 페이지가 표시됩니다.
Git Scope는 로그인한 Github의 계정 이름이고, Private Repository Name 에는 새로 생성할 Repo명을 입력하면 됩니다. 기본으로는 finwise-saas-landing-page라고 되어 있습니다.
Create를 누르면 내 Github에 새로운 Repo를 생성하고 파일을 복사합니다. 그리고 자동으로 이어서 배포까지 이루어집니다.
도메인 설정하기
배포가 완료된 다음, 대시보드로 이동합니다. 우측 상단의 Visit을 클릭하면 새로 생성된 홈페이지로 이동할 수 있습니다. URL은 https://finwise-saas-landing-page-three-nu.vercel.app/ 이렇게 자동 생성됩니다.
홈페이지이기 때문에 이렇게 복잡한 URL을 사용할 수는 없겠지요. 구매해둔 도메인과 연결을 진행합니다.
대시보드 상단에 Domains 라는 버튼을 클릭합니다. 그러면 도메인을 관리하는 페이지로 이동합니다.
Add Domain을 클릭합니다. (도메인이 없다면 먼저 구입을 하셔야 합니다.)
팝업 창에서 도메인명을 입력하고, Redirect 옵션도 체크하고, Connect to an environment를 선택합니다.
Save를 누르면 도메인 설정 목록에 Invalid Configuration 이 표시됩니다. 도메인쪽에도 작업을 할 것이 있기 때문에 표시되는 오류이기에 현 시점에서는 당연합니다.
Invalid Configuration 오른쪽에 Learn more를 클릭합니다.
그러면 DNS 설정 정보를 볼 수 있습니다. A Type에 설정할 IP 주소와 CNAME에 설정할 값이 표시됩니다.
이제 자신의 도메인 제공회사의 콘솔에서 두 레코드를 추가합니다.
레코드가 정상적으로 추가되면 대시보드에서 알아서 다음 작업을 진행합니다. Refresh를 누르지 않더라도 자동으로 진행되는 면이 매우 편했습니다.
정상적으로 체크가 완료되면 Valid Configuration 이라고 표시됩니다.
이제 내가 설정한 도메인으로 접속하면 Vercel을 통해 배포한 홈페이지로 바로 접속이 됩니다.
여기까지의 과정은 빠르면 5분이면 진행할 수 있습니다. 5분 만에 홈페이지를 만들 수 있는 것이죠.
내용 수정하기
이제부터 할 일은 내용을 내 서비스에 맞게 수정하는 작업입니다.
소스코드가 전부 Github에 올라가 있기 때문에 VS Code 같은 IDE로 코드를 불러와서 수정하면 됩니다.
저는 이 과정이 워드프레스보다 편리하게 느껴졌습니다. 그리고 AI를 붙여서 수정을 할 수도 있으니 진입장벽도 거의 없어진 것 같습니다.
예를 들어, 첫 부분의 텍스트를 수정해보겠습니다. Github에서 바로 수정할 수도 있겠지요.
커밋을 하면, Vercel 대시보드의 Deployments에서 CI/CD로 바로 배포가 됩니다. 아무런 작업이 없이 바로 편리하게 배포가 됩니다.
배포가 완료되어서 Ready라고 표시가 되면 도메인에 재접속을 해서 확인해봅니다.
수정사항이 잘 반영되었습니다.
VS Code로 개발하면 Push 하기 전에 로컬에서 먼저 확인하고, build 도 해봐서 문제가 없는지 체크할 수 있습니다. 문제가 없는 경우 Push하면 Vercel에서 자동으로 배포가 완료됩니다. 이 과정으로 홈페이지를 간단하면서도 안정적으로 커스터마이징 할 수 있습니다.
다음 웹사이트는 동일한 템플릿으로 개발한 루커 스튜디오 서비스 홈페이지 입니다. 어떻게 커스터마이징 되었는지 확인해보세요!
