메인 칼럼 개발일지 작업물 연락처

배포했으면 잠그세요 — 개인 사이트 보안 체크리스트

무료 호스팅이라고 보안까지 무시하면 안 됩니다. 배포 후 반드시 챙겨야 할 것들

사이트가 세상에 공개되는 순간, 당신의 코드는 더 이상 혼자만의 것이 아닙니다.

localhost에서는 아무 문제가 없었던 것들이, 프로덕션에서는 취약점이 됩니다.

“개인 블로그인데 보안까지 신경 써야 해?” — 네, 해야 합니다. 정적 사이트라고 안전한 것이 아닙니다. 이 글에서는 Astro + Vercel 조합에서 배포 후 반드시 확인해야 할 보안 항목들을 정리합니다.

1. 환경 변수 관리 — 코드에 시크릿을 넣지 마세요

가장 흔하고 가장 치명적인 실수입니다.

# ❌ 절대 이렇게 하지 마세요
const API_KEY = "sk-1234567890abcdef";

# ✅ 이렇게 하세요
const API_KEY = import.meta.env.API_KEY;

규칙:

  • API 키, 토큰, 비밀번호는 .env 파일에 넣기
  • .env는 반드시 .gitignore에 포함 (Astro 기본 설정에 이미 포함되어 있습니다)
  • Vercel에서는 Settings → Environment Variables에서 설정
  • 클라이언트에 노출되어야 하는 변수만 PUBLIC_ 접두사 사용
# .env
API_KEY=sk-secret-value          # 서버에서만 접근 가능
PUBLIC_SITE_URL=https://my.site   # 클라이언트에서도 접근 가능

한 번이라도 시크릿이 Git 히스토리에 올라갔다면, 단순히 삭제하는 것으로는 부족합니다. git filter-branch나 BFG Repo-Cleaner로 히스토리를 정리하고, 해당 키를 즉시 재발급하세요.

2. HTTPS — Vercel이 알아서 해줍니다

Vercel에 커스텀 도메인을 연결하면 Let’s Encrypt SSL 인증서가 자동으로 발급됩니다. 별도 설정이 필요 없습니다. 하지만 확인은 해야 합니다:

  • 브라우저 주소창에 🔒 자물쇠 아이콘이 보이는지
  • http://로 접속했을 때 https://로 리다이렉트되는지
  • 혼합 콘텐츠(Mixed Content) 경고가 없는지

3. HTTP 보안 헤더

정적 사이트라도 응답 헤더에 보안 설정을 추가하면 더 안전합니다. Vercel에서는 vercel.json에서 설정할 수 있습니다.

{
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        {
          "key": "X-Content-Type-Options",
          "value": "nosniff"
        },
        {
          "key": "X-Frame-Options",
          "value": "DENY"
        },
        {
          "key": "X-XSS-Protection",
          "value": "1; mode=block"
        },
        {
          "key": "Referrer-Policy",
          "value": "strict-origin-when-cross-origin"
        }
      ]
    }
  ]
}

각 헤더가 하는 일:

  • X-Content-Type-Options: MIME 타입 스니핑 방지
  • X-Frame-Options: 클릭재킹 방지 (iframe 삽입 차단)
  • X-XSS-Protection: 브라우저의 XSS 필터 활성화
  • Referrer-Policy: 외부 링크 클릭 시 전달되는 정보 제한

4. Git 레포지토리 보안

코드가 GitHub에 올라가 있으므로, 레포지토리 자체의 보안도 중요합니다.

필수 설정:

  • 2FA(이중 인증) 활성화 — GitHub 계정의 기본입니다
  • 레포지토리를 Private으로 설정 (Vercel 배포에는 영향 없음)
  • Branch Protection Rules 설정 (혼자 쓰더라도 실수 방지)
  • 사용하지 않는 Deploy Key나 Personal Access Token 정리

5. 서드파티 스크립트 주의

Google Analytics, 광고 스크립트 등을 넣을 때:

  • 공식 CDN에서만 로드
  • integrity 속성으로 무결성 검증
  • 꼭 필요한 스크립트만 최소한으로 추가
<script
  src="https://example.com/script.js"
  integrity="sha384-xxxxx"
  crossorigin="anonymous"
></script>

6. 이미지와 에셋 관리

사이트에 올리는 이미지에도 주의가 필요합니다:

  • 이미지의 EXIF 데이터에 위치 정보가 포함될 수 있습니다 — 업로드 전 제거하세요
  • 사용자가 업로드하는 기능이 있다면 파일 타입 검증 필수
  • public/ 폴더의 파일은 누구나 URL로 직접 접근 가능하다는 걸 기억하세요

배포 후 보안 체크리스트

배포할 때마다 이것만 확인하세요:

  • .env 파일이 .gitignore에 포함되어 있는가?
  • 코드에 하드코딩된 시크릿이 없는가?
  • HTTPS가 정상 동작하는가?
  • 보안 헤더가 설정되어 있는가?
  • GitHub 2FA가 활성화되어 있는가?
  • 불필요한 파일이 public/에 노출되어 있지 않은가?

마치며 — 시리즈를 마무리하며

이 시리즈를 통해 우리는 완전한 빈 화면에서 시작해서 하나의 웹사이트를 세상에 내놓았습니다.

  1. 왜 Astro인가 — 프레임워크 선택의 이유
  2. 디자인 먼저 — 코드 전에 디자인을 잡는 법
  3. 배포하기 — 도메인, GitHub, Vercel
  4. 보안 체크리스트 — 지금 이 글

총 비용은 도메인 값 만 원이 전부였습니다. 프레임워크도, 호스팅도, SSL 인증서도 전부 무료. 하지만 그 결과물은 온전히 당신 것입니다.

플랫폼 위의 글은 플랫폼이 사라지면 함께 사라집니다. 내 도메인 위의 글은 내가 지울 때까지 남습니다.

개발자라면 한 번쯤, 자기 이름으로 된 공간을 가져보시길 바랍니다.

그 공간에서 코드를 기록하든, 생각을 기록하든, 실패를 기록하든 — 그건 전부 당신의 자유입니다. 그리고 그 자유가, 직접 만든 사이트가 주는 가장 큰 선물입니다.

김현빈 Developer & Writer

기술, 포스팅 관련 질문, 프로젝트 협업 등 연락주시면 언제든지 회신 드립니다.