블로그 개발기를 작성해 본다.

1. 기록을 다시 시작하다

어릴 때는 많은 것을 기록하며 간직했지만, 20살 이후로는 기록하는 습관이 점점 사라졌다. 다양한 방법으로 다시 기록을 시도해봤지만 쉽지 않았고, 결국 Post-it처럼 조각난 기억들을 모아 하나의 큰 텍스트를 만드는 방식을 고민하게 되었다.

그러던 중 Obsidian이라는 프로그램을 접하게 되었고, 아직 잘 활용하지는 못하지만 이를 통해 소중한 일상과 지식을 공유해 보고 싶다는 생각이 들었다. Obsidian은 노트 간의 연결 관계를 시각적으로 보여주는 기능이 있어, 지식을 체계적으로 정리하는 데 큰 도움이 될 것 같았다.

2. Markdown 기반의 블로그 아이디어

Obsidian을 사용하면서 자연스럽게 Markdown 기반의 블로그를 만들면 어떨까? 하는 생각이 들었다.

고려사항

어드민 사이트가 필요하다 → 블로그 관리를 쉽게 하기 위해
Dark Mode / Light Mode 지원 → 야간에도 눈을 편안하게
모바일 대응 → 다양한 기기에서 접근 가능하도록

색상을 4가지 이하로 제한 → 디자인 감각이 부족하므로 깔끔한 UI 유지

예시와 같이 4가지 색을 TailwindCSS 에 설정했다!

plaintext

@tailwind base;
@tailwind components;
@tailwind utilities;
@import "./prism.css";
 
@layer base {
  /* 라이트 모드 색상 */
  :root {
    --background: #ffffff;
    --background-inverted: #1f1f1f;
    --surface: #f1f1f1;
    --text: #333333;
    --text-muted: #888888;
    --primary: #4a90e2;
    --border: rgb(218, 220, 224);
  }
 
  /* 다크 모드 색상 */
  .dark {
    --background: #1f1f1f;
    --background-inverted: #ffffff;
    --surface: #2f2f2f;
    --text: #e0e0e0;
    --text-muted: #b3b3b3;
    --primary: #8ab4f8;
    --border: rgb(49, 51, 53);
  }
}
 
@layer utilities {
  .bg-base {
    background-color: var(--background);
  }
 
  .bg-base-inverted {
    background-color: var(--background-inverted);
  }
 
  .bg-surface {
    background-color: var(--surface);
  }
 
  .text-base-color {
    color: var(--text);
  }
 
  .text-muted {
    color: var(--text-muted);
  }
 
  .text-primary {
    color: var(--primary);
  }
 
  .border-base {
    border-color: var(--border);
  }
}

3. 기술 선택에 대한 고려사항

처음에는 무료로 관리가 가능한 정적 블로그를 고려했으나, 게시물을 수정하거나 데이터를 푸시할 때의 불편함과 향후 커스터마이징의 어려움 때문에 동적 블로그를 선택했다.

블로그 포스팅을 위해 관리 페이지를 구현하는 것이 추가적인 작업이 될 것이라 예상되었고, 이에 따라 검색을 통해 Headless CMS를 찾게 되었다. Headless CMS는 SEO 최적화 등 여러 가지 요구 사항을 내가 직접 개발하지 않아도 처리해 줄 수 있을 것 같았다.

프로그래밍 격언 중에 "Don't reinvent the wheel"이 있다. 굳이 Admin 사이트까지 만들고 백엔드를 구성하는 것보다, 이미 존재하는 좋은 솔루션을 활용하는 것이 효율적이라고 생각했다.

결국, 이런 이유들로 Headless CMS를 사용하기로 결정했다.

그 중에서도 Headless CMS 중에서 Strapi를 선택한 이유는 다음과 같다.

Strapi는 여러 플러그인을 지원하며, Node.js는 내가 이미 익숙한 언어였다. 또한, 현업에서 사용하는 MySQL을 선택할 수 있어 백업, 서버 이전 및 데이터 조작에 유리할 것 같았다. 이러한 이유로 Strapi를 선택하여 블로그를 개발하게 되었다.

프론트엔드도 직접 구현하고자 했는데, 회사에서 react 로 개발 경험이 있었던 나는 항상 포트폴리오 사이트를 만들어 보고 싶었고, 회사에서 사용해 보지 않은 Next.js와 TailwindCSS를 사용해 보고 싶은 마음이 컸다.

최종 기술스택🛠️은 다음과 같다

Frontend: React + TailwindCSS
- Tailwind의 Color Set을 활용해 Dark Mode 및 Hover 효과를 쉽게 적용할 수 있었다.
- text-base와 Tailwind의 기본 클래스를 겹치지 않게 하기 위해 text-base-color 같은 다소 어색한 네이밍을 사용했지만, 오픈소스를 참고해서 좋은 네이밍을 지켜서 작성해 보려 한다.
Frontend 배포: Vercel / domain 은 AWS Route 53 서비스를 통해 구매하였다.
Backend: Strapi (Headless CMS)
- Kubernetes 환경에서 MySQL + Strapi를 구축하여 운영 중이다!

4. 개발하면서 생긴 이슈

Strapi와 Headless CMS 설정
처음에는 Strapi로 블로그를 쉽게 만들 수 있을 것이라 예상했지만, API 명세와 다양한 스키마 설정을 추가로 해야 해서 생각보다 시간이 걸렸다. GitHub에서 제공한 Strapi와 프론트엔드 코드 예제를 보고 쉽게 적용할 수 있을 거라 생각했지만, 내가 원하지 않는 기능들과, 다크모드 적용에도 스타일이 각각 다르게 적용되어 있었고, 페이지 경로에 언어가 들어가 있어 구조 상 가볍게 수정 하는게 더 큰 공수가 들 것 같아, 필요한 페이지의 경우에는 새로 만들었다.
디자인
디자인에서는 여러 색을 사용하면 디자인이 점점 이상해 지는 것 같았고, Vercel, Google, Tailwind 공식 페이지 스타일을 참고하여 디자인을 구성하면서 4가지 색상만 사용하려 노력했다.
Docker와 CI/CD 파이프라인 구축
Strapi에는 공식 Docker 이미지가 없었다. 그 이유는 Strapi가 매우 커스터 마이징 가능한 구조여서 그런 것인 것 같았다. Docker 이미지가 있었다면, CI/CD 없이 쉽게 구축할 수 있었을 것 같은데, dockerfile 부터 docker image 를 push 하는 registry 까지 테스트가 필요했다.
- 아래는 빌드 CI/CD 과정이다.
  - Strapi 소스 코드 수정 → GitLab CI/CD 를 통한 빌드 후 Harbor 에 Docker image push → Helm Chart 업데이트
  - Helm Chart 저장소 업데이트 → ArgoCD 감지 후 자동 배포
댓글 기능
실제로 사용하다 보니 댓글 기능이 없어서 DisQus 서비스를 사용했다. 하지만 DisQus는 댓글을 승인 후에만 게시할 수 있고 익명 댓글을 남기기 불편한 점이 있어 나중에 자체 댓글 기능을 구현하려고 한다.
배포와 운영
CI/CD 파이프라인을 통해 Kubernetes 환경에서 자동 배포가 이루어졌고, 블로그가 정상적으로 운영되고 있습니다. 현재 블로그의 백엔드는 CI/CD 파이프라인을 통해 자동화된 배포가 이루어지고 있다.

5. 마무리

이번 블로그 개발을 통해 다시 기록하는 습관을 되찾고, 소중한 생각과 경험을 공유하는 공간을 만들어가고 있다. Obsidian과 블로그를 통해 점점 더 체계적으로 정리하고 발전시켜 나갈 예정이다!

지금 남은 것은 댓글 기능이다. 댓글을 작성하고 피드백을 통해 조금 더 나은 게시글을 작성하고 싶다.

잘 지켜봐 주시면 좋겠다!

추가로, 현재 서버 형태를 공유한다!