부트캠프를 수료하고 취업 준비를 시작했지만, 이력서와 협업 프로젝트만으로는 나를 충분히 보여주기 어렵다는 한계를 느꼈습니다.
처음에는 단순히 포트폴리오용으로 블로그를 만들 생각이었지만, 프로젝트를 반복하면서 블로그가 단순 기록 이상의 의미를 가진다는 점을 깨달았습니다. 결국 학습 과정과 프로젝트 경험을 체계적으로 공유하고, 개발자로서의 브랜딩을 강화하며, 채용 담당자나 관심 있는 독자에게 나의 역량을 효과적으로 전달하는 도구로 블로그를 설계하게 되었습니다.
블로그 설계의 중심은 두 가지 목표였습니다.
첫 번째 목표는 소스코드와 컨텐츠를 분리하여 관리하는 것이었습니다. 하나의 저장소에서 소스와 컨텐츠를 함께 관리하면 커밋 내역이 뒤섞여 이슈 추적이 어려워지고 유지보수가 번거로워질 수 있다는 가능성을 고려했습니다. 소스와 컨텐츠를 분리함으로써 코드 변경 내역을 명확히 기록하고, 관리 효율성과 유지보수성을 높이는 것을 목표로 삼았습니다.
두 번째 목표는 SEO 친화적이면서 서버 관리 부담이 적은 정적 사이트 배포였습니다. 블로그는 기능이 단순하지만 검색엔진 노출이 중요했기 때문에, 검색 친화적인 구조를 만들고 안정적으로 운영될 수 있는 기반을 마련하고자 했습니다.
React와 TypeScript 경험을 쌓기 위해 Next.js와 Gatsby를 검토했고, 최종적으로 Gatsby를 선택했습니다. Gatsby는 정적 사이트 빌드에 최적화되어 있어 빠른 로딩과 안정적인 운영이 가능하며, MDX 기반 콘텐츠 작성과 SEO 친화적 구조를 지원합니다. 또한 React와 TypeScript를 그대로 활용할 수 있어 유지보수성과 확장성을 확보할 수 있습니다.
초기에는 TailwindCSS를 검토했지만, Gatsby 환경에서는 코드 수정 시 빌드가 재실행되어 개발 효율이 떨어지는 문제가 있었습니다. 따라서 Emotion(CSS-in-JS)을 선택하여, 컴포넌트 단위로 스타일을 관리하고 빠른 반영 속도를 확보하며 유지보수성을 높였습니다.
블로그 소스와 컨텐츠를 분리 관리하면서, 변경 사항이 발생할 때마다 자동으로 블로그가 빌드·배포되도록 GitHub Actions 기반 CI/CD 환경을 구축했습니다. 반복적인 배포 부담을 줄이는 것은 물론, 소스나 컨텐츠가 업데이트되면 즉시 최신 상태로 반영되도록 하여 운영 효율성을 높였습니다.
블로그는 단순 기록을 넘어, 개발자로서의 브랜딩과 포트폴리오 노출을 목표로 단계별로 구축했습니다.
Layout, Header, Footer 컴포넌트를 구현하며 블로그의 기본 구조를 설계했습니다. 다크/라이트 테마와 글로벌 스타일을 적용하고, FOUC(Flash of Unstyled Content)를 방지하여 사용자가 처음 접속했을 때도 깔끔한 화면을 제공했습니다.
게시글 목록과 카드 컴포넌트를 만들고, 카테고리와 태그 기반 필터링 기능을 추가했습니다. 동적 페이지 생성을 통해 새로운 게시글이 추가될 때 자동으로 페이지가 생성되도록 했습니다.
상세 페이지는 MDX 렌더링을 활용해 목차, 코드 하이라이팅, 추천 게시글 기능까지 포함시키며, 읽기 편하고 탐색이 쉬운 구조로 완성했습니다.
페이지네이션과 반응형 디자인을 적용해 모바일 환경에서도 사용성을 높였습니다. 코드 복사 버튼과 툴팁 등 인터랙션 요소를 추가해 방문자가 블로그를 직관적이고 편리하게 이용할 수 있도록 개선했습니다.
페이지별 메타데이터와 Open Graph 설정을 적용하고, 웹 접근성을 준수하며 보안 헤더를 설정했습니다. 폰트 최적화, 정적 자산 캐싱 전략, 번들 최적화, SSR/CSR 일관성 개선 등 다양한 성능 최적화 작업을 통해 검색엔진 친화적이면서 빠른 블로그를 구현했습니다.
GitHub Actions 기반 CI/CD 파이프라인을 구축해 태그 기반 자동 배포와 커스텀 도메인 연결까지 완료했습니다. 블로그 소스나 컨텐츠가 업데이트될 때마다 자동으로 빌드·배포되도록 하여 운영 효율성을 크게 높였습니다.
이번 블로그 구축 프로젝트의 핵심 목표는 학습 과정과 경험을 체계적으로 기록하고 공유하며, 개인 브랜드를 강화할 수 있는 공간을 만드는 것이었습니다.
소스코드와 컨텐츠를 분리 관리하고 SEO 친화적 정적 사이트를 구축하는 구조를 기반으로 Gatsby와 GitHub Pages를 활용했습니다. Emotion으로 스타일링하고 GitHub Actions 기반 CI/CD를 구축함으로써, 단순히 블로그를 구현하는 것을 넘어 효율적인 관리 구조 설계, 배포 자동화, 기술 선택 기준 수립 등 실질적인 개발 경험을 얻을 수 있었습니다.
결과적으로 블로그는 단순 기록 공간을 넘어 개인 기술 아카이브이자 개발자로서의 브랜딩 도구로 자리 잡았으며, 앞으로도 학습과 성장 과정을 지속적으로 기록하고 공유할 수 있는 자신감을 제공하는 플랫폼이 되었습니다.
전체 코드는 아래 링크에서 확인할 수 있습니다.