배포했더니 "주의 요함"이 뜬다
Vercel에 사이트를 올렸다. 잘 뜬다. 커스텀 도메인을 연결하고 브라우저에 주소를 입력했는데, 주소창 왼쪽에 "주의 요함"이라는 문구가 떠 있다. 자물쇠 아이콘 대신 삼각형 경고 표시가 보인다. 뭘 잘못한 걸까?
결론부터 말하면, HTTPS 설정이 안 된 것이다. 그리고 이걸 이해하려면 HTTP 뒤에 붙는 S가 뭔지부터 알아야 한다.
엽서와 봉인 편지
HTTP는 엽서다. 브라우저가 서버에 "이 페이지 보여줘"라고 요청하면, 서버가 페이지 내용을 담아서 보내준다. 문제는 이 과정이 완전히 개방돼 있다는 점이다. 엽서를 우체통에 넣으면 배달원이 내용을 읽을 수 있듯, HTTP로 주고받는 데이터는 중간에 누군가 들여다볼 수 있다. 와이파이 공유기를 거치는 순간, 인터넷 서비스 제공업체(ISP)를 지나는 순간, 누구든 내용을 가로챌 수 있다.
HTTPS는 봉인 편지다. 같은 내용을 보내는데, 봉투에 넣고 밀봉한 다음 보낸다. 중간에 누가 봉투를 뜯으면 흔적이 남고, 내용을 읽을 수도 없다. HTTPS의 S는 Secure, 즉 "안전한"이라는 뜻이다.
기술적으로는 TLS라는 암호화 기술이 이 봉인을 담당한다. 예전에는 SSL이라고 불렀고, 지금은 TLS로 이름이 바뀌었지만 관습적으로 SSL이라는 말을 더 많이 쓴다. SSL 인증서, SSL 설정이라고 하면 다 이걸 가리킨다. 이름이 헷갈려도 "암호화해서 안전하게 보낸다"는 뜻이라고 이해하면 충분하다.
자물쇠 아이콘이 확인하는 두 가지
브라우저 주소창의 자물쇠 아이콘은 두 가지를 뜻한다.
첫째, 통신이 암호화돼 있다. 브라우저와 서버 사이를 오가는 데이터가 봉인된 상태다. 로그인할 때 입력하는 비밀번호, 결제 정보, 개인정보가 중간에 노출되지 않는다.
둘째, 이 서버가 진짜 그 서버가 맞다. 내가 접속한 dainus.ai가 정말 dainus.ai 서버인지, 누군가 흉내 낸 가짜 서버는 아닌지를 확인해준다. 이걸 가능하게 하는 게 SSL 인증서다.
SSL 인증서: 서버의 신분증
SSL 인증서는 신분증이다. "이 서버는 진짜 dainus.ai 맞습니다"라고 증명하는 전자 문서다.
신분증을 아무나 발급하면 의미가 없으니, 신뢰할 수 있는 기관이 발급한다. 이 기관을 인증 기관(CA, Certificate Authority)이라고 부른다. 주민센터에서 주민등록증을 발급하듯, 인증 기관이 "이 도메인은 이 사람 소유가 맞다"고 확인한 뒤 인증서를 내준다.
브라우저는 이 인증서를 자동으로 검증한다. 접속할 때마다 "이 인증서를 발급한 기관이 내가 신뢰하는 곳인가?" "유효기간이 지나지 않았나?" "이 도메인과 인증서에 적힌 도메인이 일치하는가?"를 확인한다. 셋 중 하나라도 문제가 있으면 경고가 뜬다. "주의 요함"이 바로 그 경고다.
이 검증 과정은 사용자 눈에 보이지 않는다. 브라우저가 알아서 해준다. 자물쇠 아이콘이 떠 있으면 검증을 통과한 것이고, 경고가 뜨면 통과하지 못한 것이다.
예전에는 인증서가 비쌌다
SSL 인증서는 한때 유료였다. 연간 수만 원에서 수십만 원짜리 인증서를 사서 서버에 직접 설치해야 했다. 갱신을 깜빡하면 사이트에 접속할 때 "이 사이트는 안전하지 않습니다"라는 빨간 화면이 떴다. 서버 관리자들이 싫어하는 업무 중 하나가 인증서 갱신이었다.
2015년에 Let's Encrypt가 등장하면서 상황이 바뀌었다. 무료 신분증 발급소가 생긴 셈이다.
Let's Encrypt: 무료 신분증 발급소
Let's Encrypt는 비영리 인증 기관이다. SSL 인증서를 무료로 발급해준다. Linux Foundation이 운영하고, 크롬과 파이어폭스를 포함한 주요 브라우저가 모두 신뢰하는 기관이다.
발급 방식이 자동화돼 있다. 사람이 서류를 들고 가서 심사를 받는 게 아니라, ACME라는 프로토콜을 통해 기계끼리 대화한다. 흐름은 이렇다.
- 서버가 Let's Encrypt에 "dainus.ai 인증서를 발급해 주세요"라고 요청한다.
- Let's Encrypt가 "그러면 이 파일을 dainus.ai 서버에 올려놓으세요"라고 과제를 낸다.
- 서버가 파일을 올리면, Let's Encrypt가 접속해서 확인한다. 파일이 있으면 "이 서버가 dainus.ai를 관리하는 게 맞군요"라고 판단한다.
- 인증서를 발급한다.
이 과정이 몇 초 안에 끝난다. 유효기간은 90일이고, 만료 전에 자동으로 갱신된다. Certbot이라는 도구가 이 갱신을 대신 처리해준다.
그런데 바이브 코더 입장에서는 이 과정을 직접 수행할 일이 거의 없다. Vercel이나 Cloudflare 같은 배포 플랫폼이 전부 알아서 해주기 때문이다.
Vercel, Cloudflare가 알아서 해주는 것
커스텀 도메인을 연결하면 이 플랫폼들이 백그라운드에서 벌어지는 일이 있다.
Vercel의 경우: 도메인을 추가하고 DNS를 설정하면, Vercel이 자동으로 Let's Encrypt 인증서를 발급받는다. 갱신도 자동이다. 설정 화면 어디에도 "인증서 발급" 버튼이 없다. 그냥 된다.
Cloudflare의 경우: DNS를 Cloudflare로 옮기면 프록시를 통해 자동으로 SSL이 적용된다. Cloudflare 자체 인증서를 발급하고 관리한다. 대시보드에서 SSL/TLS 탭을 열면 "Full" 또는 "Full (strict)" 모드를 선택할 수 있는데, Cloudflare Pages를 쓰고 있다면 기본 설정 그대로 두면 된다.
두 플랫폼 모두 내부적으로는 "TLS Termination Proxy"라는 구조를 쓴다. 사용자의 브라우저와 플랫폼 사이는 암호화(HTTPS)로 통신하고, 플랫폼이 암호를 풀어서 내 앱에 전달한다. 내 앱은 HTTP로 받아도 사용자 입장에서는 HTTPS로 접속한 것이다. 이 구조를 이해할 필요는 없지만, "플랫폼이 암호화를 대신 처리해준다"는 것만 기억하면 된다.
요약하면 이렇다. Vercel이나 Cloudflare에 배포하고 커스텀 도메인의 DNS를 제대로 연결했다면, SSL 인증서는 신경 쓸 게 없다.
"주의 요함"이 뜨는 이유들
그런데도 경고가 뜨는 경우가 있다. 흔한 원인은 세 가지다.
DNS 설정이 아직 반영되지 않았다. 커스텀 도메인을 연결한 직후에는 DNS 전파가 끝나지 않아서 인증서 발급이 안 될 수 있다. 보통 몇 분에서 몇 시간이면 해결된다. 기다리면 된다.
도메인이 플랫폼에 제대로 연결되지 않았다. Vercel 대시보드에서 도메인 상태를 확인해보면 "Invalid Configuration"이라고 뜨는 경우가 있다. A 레코드나 CNAME 설정이 잘못된 것이니 DNS 설정을 다시 확인하면 된다.
인증서 유효기간이 만료됐다. Vercel이나 Cloudflare를 쓰고 있다면 자동 갱신이 되니 이런 일이 거의 없다. 직접 서버를 운영하면서 Certbot 갱신 스크립트를 안 돌렸을 때 생기는 문제다.
Mixed Content: 봉인 편지 안에 엽서를 끼워넣은 꼴
HTTPS를 적용한 사이트인데 브라우저 콘솔에 "Mixed Content" 경고가 뜨는 경우가 있다. 이건 뭘까?
페이지 자체는 HTTPS로 불러왔는데, 페이지 안에 있는 이미지나 스크립트 중 일부가 HTTP로 불러와지는 상황이다. 봉인 편지를 보냈는데, 편지 안에 엽서가 한 장 끼어 있는 것이다. 봉투를 아무리 잘 밀봉해도 안에 든 엽서는 보호가 안 된다.
브라우저는 이 상황을 위험하다고 판단한다. 자물쇠 아이콘이 사라지거나, 해당 리소스를 아예 차단해버린다. 이미지가 안 뜨거나 스크립트가 실행되지 않는 현상이 생긴다.
흔한 원인은 코드 어딘가에 http://로 시작하는 URL이 남아 있는 경우다. 예를 들어 이미지 태그에 http://example.com/image.png이라고 적혀 있으면 Mixed Content가 된다.
해결법은 간단하다.
http://를https://로 바꾼다.- 아니면 프로토콜을 빼고
//example.com/image.png으로 쓴다. 이러면 페이지의 프로토콜을 자동으로 따라간다. - 내 사이트 안의 리소스는 상대 경로(
/images/photo.png)를 쓴다. 상대 경로는 이 문제가 생기지 않는다.
개발자 도구(F12)의 Console 탭을 열면 어떤 리소스가 Mixed Content인지 정확히 알려준다. 하나씩 찾아서 고치면 된다.
바이브 코더가 HTTPS를 신경 써야 하는 순간
localhost:3000에서 개발하는 동안은 HTTPS를 생각할 필요가 없다. 내 컴퓨터 안에서 도는 거니까 암호화가 필요 없다.
HTTPS가 필요해지는 순간은 딱 하나다. 배포 후 커스텀 도메인을 연결할 때.
Vercel이나 Cloudflare의 기본 도메인(프로젝트명.vercel.app, 프로젝트명.pages.dev)을 쓰면 HTTPS가 자동으로 적용돼 있다. 아무것도 안 해도 자물쇠가 뜬다.
커스텀 도메인을 연결할 때가 유일한 체크 포인트다. DNS 설정을 제대로 했는지, 플랫폼 대시보드에서 도메인 상태가 정상인지, 인증서가 발급됐는지를 확인하면 된다. Vercel 기준으로 Settings > Domains에 들어가면 도메인별로 인증서 상태가 표시된다. "Valid Configuration"이라고 나오면 끝이다.
그리고 코드를 작성할 때 외부 리소스 URL에 http://를 쓰지 않도록 습관을 들여두자. 처음부터 https://로 쓰거나 상대 경로를 쓰면 Mixed Content 문제를 미리 막을 수 있다.
정리
HTTP는 엽서, HTTPS는 봉인 편지다. SSL 인증서는 서버의 신분증이고, Let's Encrypt는 이 신분증을 무료로 자동 발급해주는 기관이다. Vercel이나 Cloudflare를 쓰면 이 모든 게 자동으로 처리된다.
바이브 코더가 실제로 해야 할 일은 많지 않다. 커스텀 도메인을 연결한 뒤 자물쇠 아이콘이 뜨는지 확인하고, 코드에 http:// URL이 남아 있지 않은지 점검하는 것. 이 두 가지면 충분하다.