48장. 도메인 연결과 공개 확인하기

vercel.app 주소에서 내 이름이 붙은 주소로 넘어가는 순간

배포를 끝내고 무언가.vercel.app 주소로 접속이 되는 순간도 충분히 감동적입니다. 하지만 진짜로 서비스 느낌이 나는 순간은 따로 있습니다. 바로 내가 고른 도메인이 붙는 순간입니다.

예를 들어 my-first-service.vercel.app보다 www.myfirstservice.com이 훨씬 서비스답게 느껴지죠. 주소가 짧고, 기억하기 쉽고, 누군가에게 보내기도 편합니다. 무엇보다 그 주소는 "이건 실습용 화면이 아니라, 공개된 제품입니다"라고 말해 줍니다.

그래서 도메인 연결은 단순히 예쁜 주소를 다는 작업이 아닙니다. 내 앱이 개인 실습에서 공개된 서비스로 넘어가는 관문입니다. 주소창에 들어가는 글자 몇 개가 바뀌는 일처럼 보여도, 독자가 받는 신뢰감은 꽤 크게 달라집니다.

도메인과 DNS를 아주 쉬운 말로 이해해 보자

도메인은 인터넷상의 간판입니다. 사람이 기억하기 쉬운 이름이죠. 그런데 컴퓨터는 이름보다 숫자를 더 좋아합니다. 그래서 중간에서 "이 이름은 어디로 가야 해요?"를 알려 주는 장치가 필요합니다. 그 역할을 하는 것이 DNS입니다. 쉽게 말해 인터넷 주소록이라고 생각하면 됩니다.

여기서 초보자가 가장 헷갈리는 것은 example.com과 www.example.com의 차이입니다. example.com은 보통 루트 도메인이나 apex domain이라고 부르고, www.example.com은 서브도메인입니다. 이름이 어려워 보여도 뜻은 단순합니다. www가 붙었느냐, 안 붙었느냐의 차이입니다.¹²

Vercel에서는 보통 www를 기본 주소로 쓰고, example.com에서는 www.example.com으로 보내는 방식을 권장합니다.² 이유도 어렵지 않습니다. www 쪽은 CNAME 레코드를 써서 유연하게 연결하기 좋고, 루트 도메인은 DNS 규칙상 CNAME을 쓸 수 없어서 보통 A 레코드를 사용해야 하기 때문입니다.² "뭐가 더 고급 방식이지?"라고 고민하기보다, 초보자 입장에서는 Vercel이 추천하는 기본 흐름을 그대로 따라간다고 생각하면 가장 편합니다.

가장 쉬운 연결 순서

도메인 연결은 보통 두 화면을 왔다 갔다 하면서 진행합니다. 하나는 Vercel 프로젝트 설정 화면, 다른 하나는 도메인을 산 곳의 DNS 관리 화면입니다.¹

순서는 이렇습니다.

• Vercel 프로젝트의 Settings > Domains로 들어간다.¹

• 연결할 도메인을 추가한다. 예를 들어 example.com이나 www.example.com을 넣는다.¹

• Vercel이 보여 주는 DNS 설정값을 확인한다.¹

• 도메인 구매처의 DNS 관리 페이지에서 그 값을 그대로 입력한다.

• 다시 Vercel로 돌아와 상태가 Verified 또는 준비 완료로 바뀌는지 확인한다.¹³

여기서 중요한 포인트는 단 하나입니다. 검색해서 아무 값이나 넣지 말고, Vercel이 지금 내 프로젝트에 대해 안내하는 값을 그대로 복사해서 넣는 것입니다. 도메인 설정은 인터넷 글을 열 개 읽는 것보다, 현재 화면에 나온 한 줄을 정확히 옮기는 것이 더 중요합니다.

무엇을 입력해야 하는지 감각부터 잡자

DNS 화면에 들어가면 갑자기 A, CNAME, NS 같은 낯선 단어가 쏟아집니다. 이때 머리가 하얘지기 쉽습니다. 하지만 우리에게 필요한 것은 시험공부가 아니라 실무 감각입니다.

루트 도메인인 example.com을 연결할 때는 보통 A 레코드를 사용합니다.¹² 반면 www.example.com 같은 서브도메인을 연결할 때는 CNAME 레코드를 사용합니다.¹² Vercel은 이 둘을 각각 어떤 값으로 넣어야 하는지 화면에서 안내해 줍니다.¹

쉽게 말하면 이렇습니다.

example.com은 "이 주소는 이 서버 쪽으로 보내라"에 가깝고, www.example.com은 "이 주소는 저 주소를 따라가라"에 가깝습니다. 그래서 초보자에게 추천하는 실전 감각은 다음 한 줄로 정리할 수 있습니다.

루트는 A, www는 CNAME, 그리고 최종 대표 주소는 하나로 통일한다.

대표 주소를 하나로 통일하는 이유도 중요합니다. 어떤 사용자는 example.com으로 들어오고, 어떤 사용자는 www.example.com으로 들어옵니다. 둘 다 접속은 되더라도 주소가 제각각이면 공유 링크, 로그인 콜백, 검색엔진 수집, 분석 도구 설정이 조금씩 지저분해집니다. 그래서 둘 중 하나를 대표 주소로 정하고, 다른 하나는 그쪽으로 보내는 것이 좋습니다.²

www와 non-www 중 무엇을 대표 주소로 쓸까

초보자는 여기서 꼭 한 번 고민합니다.

"그냥 example.com이 더 짧고 예쁜데, 왜 굳이 www를 써야 하지?"

충분히 자연스러운 질문입니다. 짧고 예쁜 주소를 좋아하는 마음은 아주 정상입니다. 다만 운영 측면에서는 www를 대표 주소로 두고 루트 도메인에서 그쪽으로 리다이렉트하는 방식이 안정적일 때가 많습니다. Vercel도 이 방식을 권장합니다.²

물론 꼭 그렇게만 해야 하는 것은 아닙니다. example.com을 대표 주소로 써도 서비스는 동작합니다.² 중요한 것은 둘 중 하나를 정하고 나머지를 그쪽으로 보내는 것입니다. 두 문으로 들어오게 해 놓고 실내 안내판이 없는 건 초보 서비스가 자주 만드는 혼란입니다.

따라서 입문자에게는 이렇게 권합니다.

• 운영 편의성을 우선하면 www를 대표 주소로 둔다.²

• 브랜드상 더 짧은 주소를 꼭 쓰고 싶다면 루트 도메인을 대표 주소로 둔다.

• 어느 쪽을 고르든 나머지 하나는 반드시 리다이렉트한다.²

이렇게만 해도 주소 체계가 훨씬 깔끔해집니다.

Vercel에서 리다이렉트를 같이 잡아 두자

도메인을 둘 다 추가했다면, 이제는 어느 주소를 대표로 쓸지 정해야 합니다. 예를 들어 www.myservice.com을 메인으로 쓰기로 했다면, myservice.com으로 들어온 요청은 자동으로 www.myservice.com으로 보내야 합니다.²

Vercel은 프로젝트의 도메인 설정 화면에서 이런 리다이렉트를 관리할 수 있게 해 줍니다.² 또한 www가 있든 없든 사용자가 접속했을 때 자동으로 맞는 쪽으로 유도하려고 시도하지만, 더 확실하게 하려면 직접 리다이렉트를 명시하는 편이 좋습니다.²

이 작업이 왜 중요할까요. 사용자는 별생각 없이 주소를 입력합니다. 어떤 사람은 www를 붙이고, 어떤 사람은 빼고, 어떤 사람은 예전 북마크를 눌러 들어옵니다. 그때마다 서비스가 같은 장소로 모이도록 만들어 두는 것이 운영자의 배려입니다.

연결 후 바로 안 열려도 너무 놀라지 말자

DNS 설정은 저장 버튼을 누르자마자 전 세계에 동시에 퍼지지 않습니다. 반영까지 몇 분이 걸릴 수도 있고, 경우에 따라 몇 시간 이상 걸릴 수도 있습니다.³ 그래서 방금 설정하고 바로 접속했는데 안 열린다고 해서 곧바로 실패라고 단정할 필요는 없습니다.

이 시기의 초보자는 대체로 두 가지 실수를 합니다. 하나는 2분 만에 불안해하는 것이고, 다른 하나는 오타를 낸 채 2시간을 기다리는 것입니다. 둘 다 흔합니다.

그래서 기다리는 동안에는 감정적으로 새로고침만 하지 말고, 아래를 차분히 확인하면 됩니다.

• 도메인 철자가 정확한가

• DNS 레코드의 이름과 값이 Vercel 안내와 정확히 같은가

• 기존에 있던 충돌 레코드가 남아 있지는 않은가

• Vercel 화면에서 상태가 검증 대기인지, 설정 오류인지 구분되는가

즉, 기다릴 문제인지, 잘못 입력한 문제인지를 먼저 나누어 보는 것이 중요합니다.

HTTPS는 자동이어도, 확인은 직접 해야 한다

도메인이 연결되면 많은 초보자가 한숨 돌립니다. 그런데 아직 확인할 것이 하나 남아 있습니다. 바로 HTTPS입니다.

다행히 Vercel은 커스텀 도메인에 대해 HTTPS를 자동으로 적용해 주는 편입니다.³ 별도로 인증서를 손으로 설치하지 않아도 되는 경우가 많아서, 초보자에게 정말 고마운 부분입니다. 하지만 자동이라고 해서 검사를 생략하면 안 됩니다.

브라우저에서 직접 https://로 접속해 보세요. 자물쇠 표시가 보이는지, 보안 경고가 뜨지 않는지 확인합니다. 또 http://로 접속했을 때도 자연스럽게 https://로 이동하는지 보면 좋습니다. 서비스는 기술적으로 열리는 것만으로 충분하지 않습니다. 안전하게 열린다는 확인까지 해야 합니다.

도메인을 붙인 뒤에는 로그인 주소도 같이 고쳐야 한다

여기서부터는 초보자가 가장 자주 놓치는 구간입니다. 도메인만 연결하면 끝이라고 생각하기 쉽지만, 실제로는 서비스 안에도 새 주소를 알려 줘야 할 때가 많습니다.

특히 로그인 기능이 있다면 더 그렇습니다. Supabase나 OAuth 제공자, 이메일 인증 링크, 비밀번호 재설정 링크 같은 기능은 "어느 주소로 다시 돌아갈지"를 미리 알고 있어야 합니다. 그런데 아직도 설정값 안에 localhost나 예전 vercel.app 주소가 들어 있다면, 사용자는 로그인은 했는데 엉뚱한 곳으로 이동하거나 아예 실패하게 됩니다.

이 장의 핵심 문장을 하나만 기억해도 좋습니다.

도메인을 바꾸면, 사용자에게 돌아오는 길도 같이 바꿔야 한다.

그래서 도메인 연결 직후에는 환경변수, 인증 서비스의 허용 URL, 메일 링크 주소, 공유 링크 생성 로직을 한 번씩 같이 확인해야 합니다.

공개 전 마지막으로 해볼 실제 사용자 테스트

이제 정말 중요한 단계입니다. 내가 만든 서비스가 나에게만 열리는지, 아니면 남에게도 제대로 열리는지를 확인해야 합니다.

테스트는 개발자처럼 하지 말고 사용자처럼 해야 합니다. 개발자는 이미 로그인되어 있고, 브라우저 캐시도 남아 있고, 무엇을 눌러야 하는지도 알고 있습니다. 그런 상태에서는 문제가 숨어 버립니다.

그래서 공개 전에는 이런 흐름으로 확인해 보세요.

• 시크릿 모드에서 새 도메인으로 접속한다.

• 첫 화면이 정상적으로 열리는지 본다.

• 회원가입 또는 로그인을 처음부터 해 본다.

• 글 작성, 수정, 삭제를 해 본다.

• 목록, 상세, 검색이 모두 동작하는지 확인한다.

• 로그아웃 후 다시 로그인해 본다.

• 휴대폰 모바일 네트워크에서도 열어 본다.

• 가능하면 다른 사람 한 명에게 링크를 보내 접속해 달라고 부탁한다.

마지막 한 줄이 특히 중요합니다. 내 컴퓨터에서는 되는데, 남의 환경에서는 안 되는 일이 생각보다 많기 때문입니다. 친구 한 명, 동료 한 명의 접속 테스트가 작은 베타 테스트가 됩니다.

공개 직전에 자주 터지는 문제들

도메인을 연결한 뒤 외부 사용자 입장에서 점검하면, 자주 튀어나오는 문제들이 있습니다.

• 주소는 열리는데 www와 non-www 중 한쪽만 된다.

• 로그인 후 다시 돌아오는 주소가 localhost나 예전 배포 주소로 잡혀 있다.

• 공유 링크를 복사했더니 아직도 vercel.app 주소가 들어간다.

• 어떤 페이지는 열리는데 이미지나 메타 정보가 옛 주소를 가리킨다.

• 내 브라우저에서는 되지만, 로그아웃 상태나 다른 기기에서는 동작이 다르다.

이 문제들의 공통점은 하나입니다. 기능 자체는 거의 다 만들어졌는데, 공개 주소 기준으로 다시 점검하지 않아서 생긴다는 점입니다.

이 시점의 여러분은 코드를 새로 짜는 사람이 아니라, 서비스를 세상에 내놓기 전에 문 손잡이와 간판과 현관문 번호를 다시 확인하는 사람에 가깝습니다. 아주 작은 어긋남이 사용자에게는 "이 서비스 아직 불안한가?"라는 인상으로 남습니다.

도메인을 연결하면 배포 흐름도 더 실감 나게 바뀐다

도메인을 프로젝트에 연결해 두면, 이후 main 같은 프로덕션 브랜치에 푸시했을 때 최신 배포가 그 도메인에 반영되는 흐름을 자연스럽게 만들 수 있습니다.⁴ 즉, 이제부터는 "배포 URL 하나 더 생김"이 아니라 "실제 서비스 주소가 갱신됨"으로 느껴집니다.

이 차이는 꽤 큽니다. 같은 배포라도 긴장감이 달라집니다. 버튼 문구 하나를 바꿔도 실제 공개 주소에 영향이 갈 수 있으니까요. 그래서 도메인을 붙인 뒤부터는 커밋과 배포를 조금 더 조심스럽게 다루게 됩니다. 이건 부담이 아니라 좋은 변화입니다. 내가 만든 것이 정말 사용자 앞에 서기 시작했다는 뜻이니까요.

주소를 갖는 순간, 앱은 제품이 된다

도메인을 연결하는 일은 기술 설정처럼 보이지만, 사실은 마음가짐을 바꾸는 작업이기도 합니다.

이전까지의 앱은 "내가 만든 결과물"에 가까웠습니다. 하지만 이제는 "누군가가 방문할 수 있는 장소"가 됩니다. 누군가는 그 주소를 눌러 들어오고, 화면이 늦게 열리면 기다릴 것이고, 로그인에 실패하면 떠날 것이고, 반대로 편하고 신뢰가 가면 다시 돌아올 것입니다.

그래서 도메인을 연결한 뒤에는 완벽함보다 신뢰할 수 있는 기본기가 중요합니다. 주소가 헷갈리지 않는지, 보안 경고는 없는지, 로그인은 되는지, 주요 기능은 무리 없이 돌아가는지. 공개된 제품의 첫인상은 놀랍게도 화려한 기능보다 이런 기본에서 정해집니다.

서비스를 세상에 내보내는 첫 단계는 거창하지 않습니다. 멋진 슬로건보다 먼저 필요한 것은, 누가 눌러도 잘 열리는 한 개의 주소입니다.

이번 장 정리

이번 장에서는 Vercel 프로젝트에 커스텀 도메인을 연결하고, www와 non-www 중 대표 주소를 정하고, DNS와 리다이렉트를 설정한 뒤, HTTPS와 외부 사용자 기준의 최종 점검까지 살펴봤습니다.

핵심은 세 가지입니다. 첫째, 도메인 연결은 예쁜 주소를 다는 작업이 아니라 서비스의 정체성을 만드는 일입니다. 둘째, 대표 주소를 하나로 통일하고 나머지는 리다이렉트해야 공개 운영이 깔끔해집니다. 셋째, 도메인을 붙인 뒤에는 로그인과 공유 링크까지 포함해 실제 사용자처럼 끝까지 확인해야 합니다.

이제 여러분의 앱은 단순히 배포된 앱이 아닙니다. 찾아갈 수 있는 주소를 가진 서비스입니다. 그리고 주소를 가진 순간부터, 여러분은 연습 중인 사람이 아니라 작은 제품을 운영하는 사람이 됩니다.

참고

¹Adding & Configuring a Custom Domain

²Deploying & Redirecting Domains

³개발자라면 알아야 할 Vercel 도메인 설정 가이드

⁴Deploying GitHub Projects with Vercel