Vercel에 가비아 / 후이즈 도메인 연결하는 방법

Vercel로 프로젝트를 배포하면 기본적으로 vercel.app 주소가 생성된다. 개인 테스트나 포트폴리오 확인용이라면 이 주소만 사용해도 큰 문제는 없다. 하지만 실제 운영을 고려하는 프로젝트라면 직접 구매한 도메인을 연결해서 사용하는 것이 좋다.

예를 들어 Vercel 기본 주소가 project-dashboard.vercel.app 이라고 해보자. 이 주소도 접속은 가능하지만 실제 서비스나 회사 프로젝트처럼 보이기에는 조금 부족할 수 있다. 그래서 가비아나 후이즈 같은 도메인 업체에서 구매한 도메인을 Vercel에 연결해서 example.com 또는http://www.example.com같은 주소로 접속하게 만드는 것이다.

가비아에서 구매했든, 후이즈에서 구매했든 기본 원리는 같다. Vercel 프로젝트에 도메인을 먼저 추가하고, 도메인을 구매한 곳의 DNS 관리 화면에서 Vercel이 안내하는 값을 입력하면 된다. 처음에는 DNS, A record, CNAME 같은 단어 때문에 복잡해 보일 수 있지만 실제로 해보면 구조는 단순하다.


1. 전체 흐름부터 보면

가비아나 후이즈에서 구매한 도메인을 Vercel에 연결하는 흐름은 크게 어렵지 않다. 먼저 Vercel 프로젝트에 도메인을 추가한다. 그다음 가비아나 후이즈의 DNS 관리 화면으로 이동해서 Vercel이 안내하는 DNS 값을 입력한다. 마지막으로 Vercel에서 도메인 연결 상태가 정상인지 확인하면 된다.

전체 순서는 이렇게 보면 된다.

1) Vercel 프로젝트로 이동한다.

2) Settings 메뉴에서 Domains로 이동한다.

3) 연결할 도메인을 추가한다.

4) Vercel이 안내하는 DNS 값을 확인한다.

5) 가비아 또는 후이즈 DNS 관리 화면으로 이동한다.

6) 루트 도메인은 A record로 설정한다.

7) www 같은 서브도메인은 CNAME record로 설정한다.

8) Vercel에서 도메인 연결 상태를 확인한다.

9) 정상 연결 후 실제 도메인으로 접속해본다.

즉, 핵심은 Vercel에 도메인을 등록하고, 도메인 구매처 DNS 설정에서 Vercel을 바라보게 만드는 것이다.


2. 루트 도메인과 www 도메인의 차이

도메인을 연결할 때 처음 헷갈리는 부분이 루트 도메인과 www 도메인의 차이다.

예를 들어 example.com이라는 도메인을 구매했다고 하자. 여기서 example.com 자체는 루트 도메인이다. 보통 apex domain이라고도 부른다. 반대로http://www.example.com은 www라는 서브도메인이 붙은 형태다.

쉽게 보면 이렇다.

example.com은 루트 도메인이다.

http://www.example.com은 서브도메인이다.

둘 다 같은 사이트로 연결할 수 있지만 DNS 설정 방식은 조금 다를 수 있다. 보통 루트 도메인은 A record를 사용하고, www 같은 서브도메인은 CNAME record를 사용한다.

처음에는 이 정도만 기억하면 된다.

example.com은 A record로 연결한다.

http://www.example.com은 CNAME record로 연결한다.

나중에 staging.example.com, admin.example.com, dashboard.example.com 같은 주소를 만들고 싶다면 이것도 서브도메인이다. 이런 주소들도 보통 CNAME record로 연결한다고 보면 된다.


3. Vercel 프로젝트에 도메인 추가하기

먼저 Vercel에 로그인한 뒤 도메인을 연결할 프로젝트로 들어간다. 프로젝트 화면에서 Settings 메뉴로 이동하고, 그 안에서 Domains 메뉴를 찾는다.

이동 경로는 보통 아래처럼 보면 된다.

Project → Settings → Domains

Domains 화면에서 내가 구매한 도메인을 입력한다. 예를 들어 example.com을 구매했다면 example.com을 입력하면 된다.

보통은 루트 도메인과 www 도메인을 같이 연결하는 경우가 많다.

example.com

http://www.example.com 

둘 다 연결해두면 사용자가 www를 붙여도 접속할 수 있고, www 없이 입력해도 접속할 수 있다. 다만 실제 운영에서는 둘 중 하나를 대표 주소로 정하고, 나머지는 리다이렉트하는 것이 좋다.

예를 들어 example.com을 대표 주소로 쓸 수도 있고, http://www.example.com을 대표 주소로 쓸 수도 있다. 개인적으로는 서비스 성격에 따라 다르게 보면 된다. 회사 소개나 랜딩페이지라면 example.com이 깔끔하고, 서비스형 웹사이트라면 http://www.example.com도 무난하다. 관리자나 대시보드 성격이라면 dashboard.example.com 같은 서브도메인을 따로 쓰는 것도 괜찮다.


4. 가비아 또는 후이즈 DNS 관리 화면으로 이동하기

Vercel에 도메인을 추가했다면 이제 도메인을 구매한 곳으로 이동해야 한다. 도메인을 가비아에서 구매했다면 가비아에 로그인하고, 후이즈에서 구매했다면 후이즈에 로그인하면 된다.

도메인 관리 화면으로 들어가면 DNS 설정 또는 DNS 관리 메뉴가 있다. 업체마다 메뉴 이름은 조금 다를 수 있다.

예를 들면 이런 이름으로 되어 있을 수 있다.

DNS 관리

DNS 설정

네임서버 / DNS 관리

레코드 관리

도메인 연결 관리

중요한 것은 도메인 구매처가 어디냐가 아니라 DNS 레코드를 수정할 수 있는 화면으로 들어가는 것이다. 여기에서 A record나 CNAME record를 추가하거나 수정하게 된다.


5. 루트 도메인 연결하기

루트 도메인은 example.com처럼 앞에 www나 다른 단어가 붙지 않은 도메인이다. 이 도메인을 Vercel에 연결하려면 보통 A record를 설정한다.

DNS 관리 화면에서 A record를 추가하거나 기존 A record를 수정한다.

입력값은 보통 아래처럼 보면 된다.

호스트 또는 이름은 @

타입은 A

값은 76.76.21.21

여기서 @는 루트 도메인을 의미한다. 즉, example.com 자체를 Vercel로 연결하겠다는 뜻이다.

만약 DNS 관리 화면에 이미 @ 또는 빈 값으로 된 A record가 있고, 다른 IP 주소를 바라보고 있다면 기존 값을 Vercel에서 안내하는 값으로 바꿔야 한다. 같은 이름의 A record가 여러 개 있으면 충돌이 날 수 있기 때문에 주의해야 한다.

처음 설정할 때는 Vercel Domains 화면에서 안내하는 값을 그대로 따라가는 것이 가장 안전하다. 보통 루트 도메인은 A record로 76.76.21.21을 입력하면 된다.


6. www 도메인 연결하기

이번에는 www 도메인이다. http://www.example.com 같은 주소를 연결하려면 보통 CNAME record를 사용한다.

DNS 관리 화면에서 CNAME record를 추가한다.

입력값은 보통 아래처럼 보면 된다.

호스트 또는 이름은 www

타입은 CNAME

값은 cname.vercel-dns.com

여기서 www는 http://www.example.com의 앞부분을 의미한다. 즉, www로 들어오는 요청을 Vercel로 보내겠다는 뜻이다.

다만 Vercel 화면에서 안내하는 CNAME 값이 다르게 표시될 수 있다. 예를 들어 cname.vercel-dns.com 또는 Vercel이 별도로 안내하는 값이 나올 수 있다. 이 경우에는 Vercel 프로젝트의 Domains 화면에 표시되는 값을 우선으로 보면 된다.

정리하면 example.com은 A record, http://www.example.com은 CNAME record로 연결한다고 이해하면 된다.


7. 기존 DNS 레코드와 충돌하지 않는지 확인하기

가비아나 후이즈 DNS 관리 화면에 이미 같은 이름의 레코드가 있을 수 있다. 예를 들어 www에 이미 다른 CNAME이 등록되어 있다면 새 CNAME을 추가할 때 충돌이 날 수 있다.

이 경우 기존 www 레코드를 수정하거나 삭제한 뒤 Vercel 값으로 바꿔야 한다. 루트 도메인도 마찬가지다. @ 또는 빈 값으로 된 A record가 이미 다른 IP를 바라보고 있다면 Vercel의 A record 값으로 바꿔야 한다.

다만 메일을 사용 중이라면 주의해야 한다. MX record, TXT record, SPF, DKIM 같은 값은 이메일과 관련된 설정일 수 있다. 이런 값을 함부로 지우면 회사 메일이나 도메인 메일이 동작하지 않을 수 있다.

도메인 연결을 할 때는 웹사이트 연결에 필요한 A record와 CNAME record를 수정하는 것이고, 메일 관련 레코드는 별도로 유지해야 한다.


8. Vercel에서 연결 상태 확인하기

DNS 설정을 저장했다면 다시 Vercel로 돌아간다. Vercel 프로젝트의 Domains 화면에서 도메인 상태를 확인할 수 있다.

처음에는 Pending, Checking DNS, Invalid Configuration 같은 상태가 보일 수 있다. DNS 설정이 아직 반영되지 않았거나, 입력값이 잘못되었을 때 이런 상태가 나올 수 있다.

정상적으로 연결되면 Valid Configuration 또는 정상 연결 상태로 표시된다. 이 상태가 되면 도메인 연결이 완료된 것이다.

DNS 반영은 바로 될 수도 있고 시간이 조금 걸릴 수도 있다. 보통 몇 분 안에 반영되는 경우도 있지만, 도메인 업체나 기존 DNS 캐시 상태에 따라 더 오래 걸릴 수도 있다. 그래서 설정 직후 바로 안 된다고 해서 무조건 잘못된 것은 아니다.

다만 시간이 지나도 계속 Invalid Configuration이 나온다면 Vercel에서 안내한 값과 가비아나 후이즈 DNS 설정값이 정확히 일치하는지 다시 확인해야 한다.


9. HTTPS 인증서는 자동으로 적용된다

Vercel에 도메인이 정상 연결되면 HTTPS 인증서도 자동으로 적용된다. 즉, 별도로 SSL 인증서를 구매하거나 수동으로 설치할 필요는 없다.

예전에는 웹서버에 SSL 인증서를 직접 설치해야 하는 경우가 많았지만, Vercel을 사용하면 이런 부분은 대부분 자동으로 처리된다.

도메인 연결이 완료되면 아래처럼 HTTPS 주소로 접속할 수 있다.

https://example.com

https://www.example.com

처음 연결 직후에는 인증서 발급까지 약간 시간이 걸릴 수 있다. 이 경우 잠시 기다린 뒤 다시 접속하면 된다.


10. www를 기본으로 쓸지 루트 도메인을 기본으로 쓸지 정하기

도메인을 연결할 때 example.com과 http://www.example.com을 둘 다 연결할 수 있다. 하지만 실제 운영에서는 둘 중 하나를 대표 주소로 정하는 것이 좋다.

예를 들어 example.com을 대표 주소로 쓰고, http://www.example.com으로 접속하면 example.com으로 이동하게 만들 수 있다. 반대로 http://www.example.com을 대표 주소로 쓰고, example.com으로 접속하면 http://www.example.com으로 이동하게 만들 수도 있다.

검색엔진이나 사용자 경험 측면에서는 하나의 대표 주소를 정하는 것이 좋다. 같은 페이지가 example.com과 http://www.example.com 양쪽에서 모두 열리면 중복 주소처럼 보일 수 있기 때문이다.

개인적으로는 이렇게 나눠서 생각하면 된다.

회사 소개나 랜딩페이지는 example.com이 깔끔하다.

일반 서비스 웹사이트는 http://www.example.com도 무난하다.

관리자 페이지나 내부 대시보드는 dashboard.example.com 같은 서브도메인이 좋다.

테스트 환경은 staging.example.com 또는 dev.example.com 같은 이름을 사용할 수 있다.


11. 테스트서버와 실서버 도메인을 나누고 싶다면

브랜치로 테스트서버와 실서버를 나누는 경우, 도메인도 같이 나눌 수 있다. 예를 들어 운영 URL은 example.com으로 쓰고, 테스트 URL은 staging.example.com으로 쓰는 방식이다.

구조는 이렇게 볼 수 있다.

example.com은 실서버 도메인이다.

staging.example.com은 테스트서버 도메인이다.

이렇게 하려면 Vercel에 staging.example.com 도메인을 하나 더 추가하면 된다. 그리고 가비아나 후이즈 DNS 관리 화면에서 staging이라는 CNAME record를 추가하면 된다.

입력값은 보통 아래처럼 보면 된다.

호스트 또는 이름은 staging

타입은 CNAME

값은 Vercel에서 안내하는 CNAME 값

다만 처음부터 테스트용 고정 도메인까지 만들 필요는 없다. 초반에는 운영 URL만 구매한 도메인으로 연결하고, 테스트 URL은 Vercel Preview URL을 그대로 사용해도 충분하다.

예를 들면 이렇게 운영할 수 있다.

example.com은 실서버 도메인으로 사용한다.

Vercel Preview URL은 테스트서버 URL로 사용한다.

나중에 프로젝트가 커지고 테스트 환경을 고정 주소로 관리하고 싶어지면 그때 staging.example.com 같은 서브도메인을 추가하면 된다.


12. 가장 단순한 추천 방식

처음 운영할 때는 너무 복잡하게 가지 말고 단순하게 시작하는 것이 좋다. 도메인 연결도 처음부터 여러 개를 만들기보다 운영 도메인 하나를 먼저 안정적으로 연결하는 것이 좋다.

추천 방식은 이렇다.

example.com은 실서버 도메인으로 연결한다.

 http://www.example.com은 example.com으로 리다이렉트하거나 같이 연결한다.

테스트서버는 Vercel Preview URL을 사용한다.

이렇게 시작하면 DNS 설정도 단순하고, 운영 실수도 줄일 수 있다. 나중에 프로젝트가 커지고 테스트 환경을 고정 도메인으로 관리하고 싶어지면 staging.example.com 같은 서브도메인을 추가하면 된다.


13. 자주 헷갈리는 부분

1) A record와 CNAME record 차이

A record는 도메인을 IP 주소에 연결하는 방식이다. 루트 도메인인 example.com을 Vercel에 연결할 때 주로 사용한다.

CNAME record는 도메인을 다른 도메인 주소에 연결하는 방식이다. http://www.example.com, staging.example.com, dashboard.example.com 같은 서브도메인을 Vercel에 연결할 때 주로 사용한다.

초보 기준으로는 루트 도메인은 A record, 서브도메인은 CNAME record라고 기억하면 된다.

2) @는 무슨 뜻인가

DNS 설정에서 @는 루트 도메인을 의미한다. 예를 들어 example.com 도메인의 DNS에서 @를 설정한다는 것은 example.com 자체를 설정한다는 뜻이다.

그래서 example.com을 Vercel에 연결하려면 호스트 또는 이름에 @를 넣고, A record 값을 설정하면 된다.

3) www는 반드시 연결해야 하나

반드시 연결해야 하는 것은 아니지만 연결해두는 것이 좋다. 사용자는 습관적으로 www를 붙여서 접속할 수도 있기 때문이다.

다만 example.com과 http://www.example.com을 둘 다 운영 주소처럼 따로 쓰는 것보다는 하나를 대표 주소로 정하고 나머지는 리다이렉트하는 것이 좋다.

4) DNS 설정 후 바로 접속이 안 되면 실패인가

바로 접속이 안 된다고 무조건 실패는 아니다. DNS 설정은 반영되는 데 시간이 걸릴 수 있다. 몇 분 안에 되는 경우도 있지만 상황에 따라 더 걸릴 수 있다.

다만 시간이 지나도 계속 연결이 안 된다면 Vercel Domains 화면에 표시된 값과 가비아나 후이즈 DNS 설정값이 정확히 일치하는지 확인해야 한다.


14. 최종 정리

가비아나 후이즈에서 구매한 도메인을 Vercel에 연결하는 방법은 생각보다 단순하다. Vercel 프로젝트의 Domains 메뉴에 도메인을 추가하고, 도메인 구매처의 DNS 관리 화면에서 Vercel이 안내하는 값을 입력하면 된다.

루트 도메인인 example.com은 보통 A record로 연결한다. 이때 호스트 또는 이름은 @를 사용하고, 값은 Vercel에서 안내하는 IP 주소를 입력한다.

 http://www.example.com 같은 서브도메인은 CNAME record로 연결한다. 이때 호스트 또는 이름은 www를 사용하고, 값은 Vercel에서 안내하는 CNAME 값을 입력한다.

처음에는 운영 도메인만 연결하고, 테스트서버는 Vercel Preview URL을 사용하는 것이 가장 단순하다. 나중에 필요해지면 staging.example.com 같은 테스트용 서브도메인을 추가하면 된다.

한 줄로 정리하면 이렇다.

Vercel에 도메인을 추가하고, 가비아나 후이즈 DNS 관리 화면에서 루트 도메인은 A record, www 같은 서브도메인은 CNAME record로 Vercel이 안내한 값에 연결하면 된다.