DevLog 시작하기: 정적 사이트 직접 구축기와 정보보안 공부의 기록

안녕하세요! 현재 대학교에서 정보보호학을 전공하고 있는 한동수입니다.

컴퓨터 사이언스의 기초를 단단히 다지고, 시스템 보안과 개발을 함께 공부하면서 마주한 수많은 지식과 고민의 흔적들을 차곡차곡 축적하기 위해 개인 기술 블로그 DevLog를 열었습니다.

첫 포스트에서는 거창한 선언 대신, 왜 정보보호학을 공부하며 기록이 절실했는지, 그리고 이 블로그를 Hugo와 Cloudflare Workers 기반의 정적 사이트로 직접 구축하며 겪었던 실제 엔지니어링 과정과 트러블슈팅을 솔직하게 기록해 보려 합니다.

🎓 1. 왜 기록(Technical Writing)인가?

쏟아지는 지식과 휘발성의 문제

정보보호학은 컴퓨터 시스템의 가장 밑바닥(Low-level)인 어셈블리어와 운영체제 커널부터, 네트워크 패킷 구조, 웹 아키텍처, 암호학에 이르기까지 광범위한 스펙트럼의 지식을 요구하는 복합 학문입니다.

수업을 듣고 과제를 하며 새로운 도구나 분석 기법을 배울 때는 분명 이해한 것 같지만, 조금만 시간이 지나면 머릿속에서 흐릿해지기 일쑤였습니다.

• “이 환경에서는 왜 버퍼 오버플로우 페이로드가 정확한 주소에 안착하지 못했는가?”
• “보안 완화 기법(ASLR, DEP, PIE 등)이 걸려 있을 때 이를 우회하거나 방어하는 원리는 무엇인가?”
• “이 프로토콜은 어떤 위협 모델을 방어하기 위해 설계되었는가?”

이러한 질문들은 단순히 머릿속에 담아두는 것만으로는 온전히 내 지식이 되지 못했습니다.

파인만 기법과 메타인지

글을 쓴다는 것은 내가 무엇을 알고 무엇을 모르는지 냉정하게 확인하는 메타인지 훈련입니다. 머릿속의 어설픈 직관을 타인이 읽고 검증할 수 있는 논리적 문장과 코드로 재구성하는 과정에서 비어 있던 개념의 구멍이 비로소 메워집니다.

🛡️ 2. 보안 전공자의 관점에서 본 블로그 아키텍처

Velog, Tistory, Medium, Notion 등 편리한 플랫폼이 넘쳐나는 시대에, 굳이 정적 사이트 생성기(Hugo)와 글로벌 엣지(Cloudflare)를 조합해 블로그를 직접 만든 데에는 보안 전공자로서의 명확한 이유가 있습니다.

graph LR
    subgraph Traditional["전통적인 동적 CMS (예: WordPress)"]
        User1["방문자"] --> WebServer["웹 서버 (Nginx/Apache)"]
        WebServer --> AppServer["애플리케이션 (PHP/Node)"]
        AppServer --> DB[("데이터베이스 (MySQL)")]
        style Traditional fill:#ffebee,stroke:#c62828
    end

    subgraph StaticArchitecture["DevLog 아키텍처 (Hugo + Cloudflare)"]
        Author["작성자 (Markdown)"] -->|Git Push| Build["빌드 자동화 (Cloudflare)"]
        Build -->|컴파일| Edge["글로벌 엣지 CDN (정적 자산)"]
        User2["방문자"] --> Edge
        style StaticArchitecture fill:#e8f5e9,stroke:#2e7d32
    end

graph LR
    subgraph Traditional["전통적인 동적 CMS (예: WordPress)"]
        User1["방문자"] --> WebServer["웹 서버 (Nginx/Apache)"]
        WebServer --> AppServer["애플리케이션 (PHP/Node)"]
        AppServer --> DB[("데이터베이스 (MySQL)")]
        style Traditional fill:#ffebee,stroke:#c62828
    end

    subgraph StaticArchitecture["DevLog 아키텍처 (Hugo + Cloudflare)"]
        Author["작성자 (Markdown)"] -->|Git Push| Build["빌드 자동화 (Cloudflare)"]
        Build -->|컴파일| Edge["글로벌 엣지 CDN (정적 자산)"]
        User2["방문자"] --> Edge
        style StaticArchitecture fill:#e8f5e9,stroke:#2e7d32
    end

graph LR
    subgraph Traditional["전통적인 동적 CMS (예: WordPress)"]
        User1["방문자"] --> WebServer["웹 서버 (Nginx/Apache)"]
        WebServer --> AppServer["애플리케이션 (PHP/Node)"]
        AppServer --> DB[("데이터베이스 (MySQL)")]
        style Traditional fill:#ffebee,stroke:#c62828
    end

    subgraph StaticArchitecture["DevLog 아키텍처 (Hugo + Cloudflare)"]
        Author["작성자 (Markdown)"] -->|Git Push| Build["빌드 자동화 (Cloudflare)"]
        Build -->|컴파일| Edge["글로벌 엣지 CDN (정적 자산)"]
        User2["방문자"] --> Edge
        style StaticArchitecture fill:#e8f5e9,stroke:#2e7d32
    end

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

graph LR
    subgraph Traditional["전통적인 동적 CMS (예: WordPress)"]
        User1["방문자"] --> WebServer["웹 서버 (Nginx/Apache)"]
        WebServer --> AppServer["애플리케이션 (PHP/Node)"]
        AppServer --> DB[("데이터베이스 (MySQL)")]
        style Traditional fill:#ffebee,stroke:#c62828
    end

    subgraph StaticArchitecture["DevLog 아키텍처 (Hugo + Cloudflare)"]
        Author["작성자 (Markdown)"] -->|Git Push| Build["빌드 자동화 (Cloudflare)"]
        Build -->|컴파일| Edge["글로벌 엣지 CDN (정적 자산)"]
        User2["방문자"] --> Edge
        style StaticArchitecture fill:#e8f5e9,stroke:#2e7d32
    end

① 공격 표면(Attack Surface)의 최소화

• 동적 CMS의 취약성: PHP 기반의 WordPress 같은 전통적인 동적 사이트는 웹 서버, 백엔드 런타임, 데이터베이스, 수많은 외부 플러그인을 동반합니다. 관리되지 않은 플러그인 하나로 인해 SQL Injection, 파일 업로드 취약점, 원격 코드 실행(RCE) 등의 공격 표면이 끊임없이 노출됩니다.
• 정적 사이트의 본질적 안전성: 반면 Hugo로 사전 컴파일된 정적 웹사이트는 순수한 HTML, CSS, JavaScript 파일만으로 구성됩니다. 실행할 백엔드 스크립트나 데이터베이스 자체가 존재하지 않으므로 서버 사이드 침해 사고의 가능성을 구조적으로 원천 차단할 수 있습니다.

② 데이터 주권과 영속성

모든 글을 로컬의 순수 Markdown(.md) 파일로 작성하고 Git으로 버전 관리합니다. 상용 플랫폼의 서비스 종료나 정책 변경에 영향을 받지 않고, 언제든 다른 인프라로 100% 온전하게 이식할 수 있는 지식 자산의 영속성을 확보했습니다.

💡 3. 실제 구축 과정에서 마주친 트러블슈팅

이 블로그를 구축하고 Cloudflare에 배포하는 과정은 단순한 복사-붙여넣기가 아니라, 그 자체로 의미 있는 엔지니어링 실습이었습니다. 실제로 마주쳤던 대표적인 기술적 문제와 해결 과정을 기록해 둡니다.

① Hugo와 Dart Sass의 --embedded 프로토콜 통신 문제

FixIt 테마는 UnoCSS와 함께 SCSS를 컴파일하기 위해 Dart Sass를 필수로 요구합니다. 초기 Cloudflare 배포 시 빌드 명령어로 npm install -g sass && hugo를 실행했으나, 빌드가 Start building sites … 상태에서 영원히 멈추는(Hang) 현상이 발생했습니다.

1
2
3
4

# 원인 분석
npm으로 설치되는 `sass` 패키지는 순수 JavaScript 래퍼입니다.
Hugo는 SCSS 컴파일 시 Dart Sass 프로세스와 양방향 파이프 통신(--embedded 프로토콜)을 수행하는데,
순수 JS 버전은 이 프로세스 핸드셰이크를 처리하지 못해 Hugo가 무한 대기에 빠졌던 것입니다.

• 해결 방법: build.sh 스크립트를 작성하여, 빌드 컨테이너 환경에서 Hugo의 --embedded 프로토콜을 온전히 지원하는 **공식 Dart Sass 독립 실행형 바이너리(Standalone Linux x64)**를 자동으로 감지 및 다운로드하도록 파이프라인을 구축했습니다.

② 무상태(Stateless) CI/CD 환경에서의 Git Submodule 관리

테마 소스를 메인 레포지토리에 직접 병합하지 않고 독립적인 git submodule로 관리했습니다. 하지만 클라우드 빌드 환경에서는 서브모듈 디렉터리가 기본적으로 비어 있는 상태로 클론되기 때문에, 빌드 직전에 테마 의존성을 안전하게 당겨오는 과정이 필수적이었습니다.

이를 위해 빌드 스크립트 최상단에 서브모듈 동기화(git submodule update --init --recursive)를 선언하고, Hugo Extended 판별 로직과 결합하여 어떤 무상태(Stateless) 컨테이너에서도 의존성 없이 단일 스크립트로 빌드가 완결되도록 자동화했습니다.

🚀 마무리하며

“배움에는 끝이 없고, 기록은 배움을 온전한 나의 것으로 만든다.”

대학 생활 동안 마주할 수많은 과제와 프로젝트, 보안 기술의 퍼즐들을 하나씩 풀어가며 이곳에 흔적을 남기겠습니다.

컴퓨터 시스템의 동작 원리와 정보보안에 관심 있는 분들과 함께 고민하고 성장하는 공간이 되길 바랍니다. 글을 읽으시면서 궁금한 점이나 피드백, 교정할 내용이 있다면 언제든 이메일(dongsu8142@naver.com)이나 GitHub으로 편하게 말씀해 주세요.

방문해 주셔서 진심으로 감사드립니다!