Vercel Protected Source Maps 공부 정리 | 소스맵이 뭐길래 숨겨야 할까

Vercel 공식 블로그를 훑다가 “Protected Source Maps”라는 기능 발표가 눈에 들어왔다. 처음엔 이름만 봤을 때 뭘 말하는 건지 바로 연결이 안 됐다. 소스맵이 뭔지는 대충 알고 있었는데, 왜 ‘보호’라는 단어가 붙는 건지가 궁금해서 좀 더 읽어봤다.

결론부터 말하면 생각보다 단순한 이야기였는데, 오히려 그 단순함 덕분에 소스맵이 뭔지 처음으로 제대로 정리가 됐다.

1️⃣ 이게 뭐냐?

소스맵(.map 파일)은 배포된 압축 코드와 원본 코드를 연결해주는 파일이다. 프로덕션 앱을 배포하면 코드가 번들링되고 압축되면서 읽기 어려운 형태가 되는데, 에러가 났을 때 스택 트레이스에 bundle.js:1:4239 같은 게 찍힌다. 소스맵이 있으면 이게 실제 파일명과 줄번호로 바뀌어 보인다. 개발할 때 디버깅에 없으면 곤란한 편이다.

문제는 이 .map 파일이 별다른 설정 없이 퍼블릭 URL로 배포된다는 것이다. 주소만 알면 누구든 접근할 수 있고, 거기엔 원본 파일 경로, 함수명, 변수명, 주석 같은 정보가 담겨있다. 팀 내부 디버깅을 위해 만든 파일인데, 외부에서도 다 볼 수 있는 상태로 열려있던 셈이다.

Protected Source Maps는 이 .map 파일에 Vercel 인증을 걸어두는 기능이다. 팀원은 기존처럼 볼 수 있고, 외부에서 접근하면 404가 돌아온다. 신규 프로젝트는 기본으로 켜져 있고, 기존 프로젝트는 Settings → Deployment Protection에서 옵트인하면 된다. 재배포가 필요 없다고 명시한 것도 눈에 남았다.

2️⃣ 내가 든 생각

가장 흥미로웠던 건 이게 지금까지 기본값이 아니었다는 점이었다. 배포 결과물(.js, .css)은 당연히 퍼블릭이고, 소스맵은 그걸 해석해주는 도구인데, 해석 도구까지 외부에 열려있다는 걸 지금까지 의식하지 못하고 있었다. 소스맵이 퍼블릭인 건 딱히 이상한 일이 아니라고 느껴왔던 것 같다.

브라우저 개발자 도구를 열면 소스맵이 자동으로 연결되는 경험을 당연하게 받아들이고 있었는데, 그게 실제로 배포 파일 옆에 .map이 같이 있어서 가능한 것이라는 연결고리를 이번에 처음 제대로 이해한 것 같다. 디자이너 입장에서 개발자 도구를 자주 쓰면서도, 그 밑에서 어떤 파일이 요청되는지는 한 번도 생각해본 적이 없었다.

디자이너에서 프론트엔드로 전환하면서 배우는 것들이 있는데, 그 중에 이런 게 있다. “코드를 어떻게 쓰는가”보다 “배포 결과물이 어떻게 구성되고 어디까지 공개되는가”를 생각하는 것이다. 소스맵의 공개 여부가 보안 결정이라는 걸 처음 받아들인 것 같다.

👉🏻 결국 이건 “팀 내부용 파일을 외부에서 차단한다”는 이야기인데, 이게 지금까지 기본이 아니었다는 게 솔직히 좀 의아했다.

💡 여기서 드는 질문? 이 기능을 켰을 때, Sentry처럼 에러 모니터링에 소스맵을 업로드해서 쓰는 서비스는 어떻게 처리될까? 브라우저가 아니라 외부 서비스가 소스맵을 가져가야 할 때도 인증이 걸리는 걸까.

⭐️ 마지막으로, 프론트엔드를 공부하며 느낀 점

정리해보니 소스맵을 보호하는 기능을 배운 것보다, 소스맵이 보호 대상이라는 걸 처음 의식하는 쪽에 가까운 공부였다. 개념 하나가 잡히면 그 뒤로 보이는 게 달라지는 것 같다.

---

참고 원문: Protected Source Maps: Ship browser source maps securely