Vercel에 커스텀 도메인 연결하기
이전 문서: Vercel에 커스텀 도메인 연결하기 게시일: 2022-2-17 마지막 수정: 2025-12-26 원래 분류: 🚀 설치 및 배포 태그: NotionNext, 배포 방식 요약: Vercel은 Cloudflare를 활용해 자신의 도메인을 빠르게 연결하고 DNS를 설정할 수 있습니다.
❓ 왜 커스텀 도메인을 연결해야 하나요?
Vercel이 기본 제공하는 *.vercel.app 도메인은 남용 사례가 많아 일부 지역에서 접근 문제가 발생할 수 있습니다. 안정적으로 사이트에 접속하려면 새 도메인을 연결하세요.
도메인 준비
먼저 자신의 도메인을 구매합니다. 아래 채널을 선택할 수 있습니다.
또한 아래 플랫폼에서 무료 도메인을 얻을 수도 있습니다.
Namesilo 우선 추천
저는 예전에 다른 클라우드 서비스에서 도메인을 구매했지만, 가격 정책이 마음에 들지 않아 결국 Namesilo로 이전했습니다.
💡 여기서 말하는 가격 정책은 첫해는 매우 저렴하지만 다음 해 갱신 비용이 비싼 방식입니다. 예를 들어 GoDaddy는 첫해 0.99달러이지만 다음 해 갱신 비용이 크게 오를 수 있고, 개인정보 보호도 추가 비용이 들 수 있습니다.
NameSilo 장점:
- 저렴하고 안정적인 가격
Namesilo 도메인 자체 가격은 비교적 저렴합니다. COM 도메인은 연 8.99달러이며, 1달러 할인 코드를 제외하면 큰 폭의 프로모션이 거의 없습니다. 도메인 갱신 가격과 첫해 구매 가격이 일관적입니다.
Namesilo 가격표: Domain Pricing
💡 제 할인 코드
tangly1024a를 입력하면1$할인을 받을 수 있습니다.

- 영구 무료 개인정보 보호
Namesilo는 영구 무료 도메인 개인정보 보호를 제공합니다. 다른 사람이 WHOIS 조회로 도메인 소유자의 개인 등록 정보를 얻는 것을 막아 줍니다. 비교하면 GoDaddy의 개인정보 보호는 유료이고, Namecheap은 첫해 무료로 제공합니다.
- 높은 보안성
계정 로그인 2단계 인증과 Domain Defender를 지원해 계정과 도메인을 보호합니다. 로그인, 도메인 잠금 해제 등에도 메일 또는 문자 알림을 설정할 수 있습니다.
- 편리한 결제
Alipay, PayPal, 신용카드 등 여러 결제 방식을 지원합니다.
Vercel 콘솔에서 도메인 추가
- Vercel 제어판에서
Setting->Domains->Add를 찾습니다. 여기에서 현재 프로젝트에 연결할 도메인을 지정할 수 있으며, 한 프로젝트에 여러 도메인을 연결할 수 있습니다.

- 도메인을 입력하고
Add한 뒤 아래와 같은Invalid Configuration안내가 표시되면, 도메인은 추가되었지만 안내에 따라 CNAME 또는 Nameserver 방식으로 활성화해야 한다는 뜻입니다. 이미지 예시는 도메인 관리 화면에서 CNAME 레코드를 추가해야 하는 경우입니다. 매개변수 이름은hexo, 값은cname.vercel-dns.com입니다.

여기서는 CNAME 연결을 권장합니다. 문서의 다음 단계에 따라 대응하는 CNAME DNS 레코드를 설정하세요.
도메인 서비스 제공자에서 CNAME 설정
아래는 여러 플랫폼 예시입니다. 설정 방식은 대체로 비슷하고 진입 위치만 조금 다릅니다. 여기서는 주로 Cloudflare 설정 방법을 설명합니다.
💡 다른 서비스 제공자의 CNAME 설정은 아래를 참고할 수 있습니다.
Tencent Cloud 관리 도메인
> > [https://console.dnspod.cn/dns/list](https://console.dnspod.cn/dns/list)에서 도메인을 클릭해 설정하고 CNAME 레코드를 추가합니다. >  >  > >Alibaba Cloud 관리 도메인
> > 콘솔 [https://dc.console.aliyun.com/#/domain-list/all](https://dc.console.aliyun.com/#/domain-list/all)을 열고 도메인 목록에서 도메인을 클릭한 뒤 CNAME 레코드를 추가합니다. >  > >Freenom에서 구매한 도메인
> > 도메인의 Nameservers를 Cloudflare에 위임한 뒤 Cloudflare에서 설정하는 것을 권장합니다. >  > >도메인을 Cloudflare에 위임
도메인 서비스 제공자에서 구매한 도메인은 기본적으로 DNS 서비스를 제공합니다. 하지만 이 서비스는 선택 사항입니다. Nameserver를 수정해 Cloudflare나 다른 DNS 서비스 제공자에게 DNS 해석과 관리를 맡길 수 있습니다.
Cloudflare는 Worker.js, 글로벌 무료 CDN, SSL 인증서, 사이트 DDoS 방화벽 같은 기능을 제공합니다. 저는 개인적으로 도메인 DNS를 Cloudflare에 맡겨 관리합니다.
Namesilo에서 구매한 도메인을 Cloudflare에서 해석하고 관리하는 방법은 NameSilo Cloudflare DNS 설정 튜토리얼을 참고하세요.
Alibaba Cloud에서 구매한 도메인을 Cloudflare에서 관리하는 방법은 Alibaba Cloud 도메인을 Cloudflare로 해석하기를 참고하세요.
Dynadot 도메인을 Cloudflare로 이전하는 방법은 Dynadot 등록 도메인을 Cloudflare로 이전하기를 참고하세요.
도메인 서비스 제공자 관리 화면에서 NameServer를 Cloudflare가 할당한 주소로 바꾸면 됩니다. 다른 도메인 서비스 제공자의 작업도 대체로 같습니다.
💡
DNS에는 캐시가 있으므로 다른 서비스 제공자에서 Cloudflare로 DNS 관리를 이전하면 적용 시간이 필요합니다. 몇 분일 수도 있고 몇 시간일 수도 있습니다.
Cloudflare 관리 화면에서
Check nameservers now를 클릭해 적용 여부를 확인하거나 메일 알림을 기다리면 됩니다.
Cloudflare에서 CNAME 설정
Cloudflare 콘솔 https://dash.cloudflare.com을 열고 도메인을 찾습니다.
도메인이 아직 어떤 서버도 가리키지 않는다면, 즉 A 레코드가 하나도 없다면 도메인 A 레코드를 추가해 Vercel 서버 주소
76.76.21.21을 가리키게 합니다.
Vercel 안내에 따라 CNAME 레코드를 추가하고 값에는 Vercel의 CNAME 서버
cname-china.vercel-dns.com을 입력합니다. Vercel 기본 추천값은cname.vercel-dns.com이지만, 일부 지역에서는 이 CNAME이 느릴 수 있습니다. 아래는 제 설정 예시입니다. 여기서는 2단계 도메인 hexo.tangly1024.com을 예로 듭니다.

💡
추가 후 이 호스트 이름을 포함하는 인증서가 없습니다와 비슷한 오류가 나타나면 먼저 CDN 프록시를 끕니다.
- 오른쪽에서 편집을 클릭합니다.
- 프록시 상태를 수정해 회색 DNS 전용 상태로 바꿉니다.
- 저장합니다.
- 추가에 성공한 뒤에는
ssl/tls설정에서 HTTPS 완전 암호화를 활성화해야 합니다. 그렇지 않으면 인증서 불일치로 반복 리디렉션이 발생해 웹페이지가 열리지 않을 수 있습니다.
SSL 완전 암호화를 켜지 않으면 사이트 열기에 실패할 수 있습니다. 
도메인 서비스 설정이 정상이라면 Vercel 카드가 아래와 같은 상태로 바뀝니다.

이제 설정한 도메인, 예를 들어 https://hexo.tangly1024.com으로 사이트에 접속할 수 있습니다.
루트 도메인 설정에 대해
위 예시는 2단계 도메인을 사용했습니다. 저처럼 /user-guide/intro 같은 루트 도메인을 사용하려면 아래 설정을 참고하세요.
Vercel 관리 화면
루트 도메인을 직접 추가하면 Vercel은 @ 레코드를 추가해 Vercel 서버 76.76.21.21을 가리키라고 안내합니다.

도메인 관리 화면
루트 도메인을 Vercel 서버 주소 76.76.21.21로 직접 해석하면 됩니다.

루트 도메인을 추가할 때 Vercel은 아래 세 가지 방식을 선택하라고 안내합니다. 개인 블로그라면 도메인을 간결하게 유지하기 위해 첫 번째 방식을 권장합니다. 즉 www로 시작하는 2단계 도메인도 루트 도메인 tangly1024.com으로 리디렉션합니다.

완료 후 효과:

도메인과 NotionNext 설정
새 도메인을 연결한 뒤에는 NotionNext 프로젝트에도 설정하세요. 환경 변수 사용을 권장합니다.
Vercel 관리 화면에서 다음 변수를 추가합니다.



