LogoSEO Jing
  • All Posts
  • SEO Jing
  • okayJing
  • KD Team
  • CLAB Coreteam
  • Study

Contact Me

© 2026 SEOJing. All rights reserved.

기술 블로그를 직접 제작하게 된 이유 | SEOJing
introSEO JingDevLog

기술 블로그를 직접 제작하게 된 이유

2026년 3월 13일·4분 읽기

개인 블로그를 개발하게 된 이유

SEO Jing, 이제 어느 정도 취업을 준비하고 싶단 생각이 들었고, 그렇기 위해선 자기 pr을 위해 나를 정리하는 시간이 필요하다고 느꼈다.

무엇보다, 최근 씨랩의 동아리 렌딩 페이지, 활동 웹앱(Members), KD 팀의 졸업 논문 페이지 까지 마무리에 들어가고 있고.

개인적으로 준비하던 WARdle, whale-dashboard 모두 개발 중단을 한 상태라, 앞으로 준비할 껀 다음주 부터 진행하기로한, 프론트 스터디 뿐이다.

왜 자꾸 프로젝트가 중단되는지

그래서 자기 PR 및 노션에 정리한 글들을 보여주고, 스터디 원들에게 조금 감흥이 되고자, 03.23 이 첫 스터디 대면 날짜인데, 14, 15, 16 삼일 동안 해커톤의 마음으로 개발을 해보고자 한다.

(또 의지박약이 되면 안되기에, 가장 집중이 좋은 초기에 몰아치기)

최대한 ai를 활용하되, 바이브 코딩의 단계까진 가지말고, 반복 작업을 수행하는 정도에서 사용하며, 개발 로그는 손수 적어보자. 맨날 mcp로 적으니깐 프로젝트에 정이 안가는 느낌.

공부한 스택과 인사이트

개발 과정에서 공부하고 정리한 내용들이다.

  • 전체적인 플로우

  • MDX가 뭘까?

  • Storybook으로 디자인 시스템 테스팅하기

  • 디자인 시스템을 구축할 때 주의할 점

  • MDX DOM 트리 파싱하기

  • 결국 Node.js 까지 와버렸다

일일 개발 로그

  • Day 1 - 디자인 컨셉과 디자인 시스템 (03.13)

  • Day 2 - 블로그 스켈레톤과 MDX 파싱 (03.14)

  • Day 3 - MDX 이슈, 반응형, 다크모드 (03.15)

  • Day 4 - 배포와 CI/CD (03.16)

  • Day 5 - shiki 제거, MDX 모듈화, 대량 포스팅 (03.17)

  • Day 6 - 스터디 자료 작성 (03.18)

  • Day 7 - Front Matter CMS와 관련 게시물 탐색기 (03.20)

  • Day 8 - 아티클 퀴즈와 스터디 자료 (03.21)

  • Day 9 - 프레젠테이션 모드, 테스팅 (03.22)

Post Q&A

오케이징에게 물어보기

기술 블로그를 직접 제작하게 된 이유 전체를 기준으로 질문과 피드백을 받아요.답을 본 뒤에는 이 내용을 댓글로 달아서 서징에게도 물어볼 수 있어요. 작성자가 직접 볼 수 있어요!

0/500

포스트 목록

/SEOJing/devLog
파일 14개, 폴더 1개
Day 1 - 디자인 컨셉과 디자인 시스템Day 2 - 블로그 스켈레톤과 MDX 파싱Day 3 - MDX 이슈, 반응형, 다크모드Day 4 - 배포와 CI/CDDay 5 - shiki 제거, MDX 모듈화, 그리고 대량 포스팅Day 6 - 스터디 자료 작성과 데스크탑 비율 수정Day 7 - Front Matter CMS와 관련 게시물 탐색기Day 8 - 아티클 퀴즈와 스터디 자료Day 9 - 프레젠테이션 모드, 코드블럭 개선, 테스팅Day 10 - 프레젠테이션 모드 안정화Day 11 - 프레젠테이션 확대 기능, FullscreenView 개선Day 12 - 테스트 커버리지 개선, 모바일 프레젠테이션 버그 2건 수정기술 블로그를 직접 제작하게 된 이유왜 자꾸 프로젝트가 중단되는지

같은 섹션의 대표 이미지

24 posts · latest first
SEO Jing26. 04. 01.

Day 12 - 테스트 커버리지 개선, 모바일 프레젠테이션 버그 2건.

SEO Jing 개발 열두째 날. code-block 테스트 14개 추가로 커버리지 대폭 개선, 모바일 프레젠테이션에서 FullscreenView 방향 전환 문제와 스크롤 멈춤 버그 수정.

26. 04. 01.SEOJing
SEO Jing26. 03. 25.

Day 11 - 프레젠테이션 확대 기능,.

SEO Jing 개발 열한째 날. PC 프레젠테이션 확대/축소 컨트롤 추가, 모바일 orientation 판단 로직 개선, FullscreenView를 독립 컴포넌트로 분리 및 PC 대응.

26. 03. 25.SEOJing
SEO Jing26. 03. 23.

Day 10 - 프레젠테이션 모드 안정화.

SEO Jing 개발 열째 날. 프레젠테이션 모드의 모바일 UX 문제들을 전면 수정. 퀴즈·코드블록·이미지·포스트목록 처리 개선, 롱프레스 UX 및 하단 바 레이아웃 안정화. 모바일 뷰포트·리스트 분할 문제 수정, 채움 비율 보수적으로 조정, 포스트 탐색기 자연 정렬 적용.

26. 03. 23.SEOJing
SEO Jing26. 03. 22.

Day 9 - 프레젠테이션 모드, 코드블럭 개선, 테스팅.

SEO Jing 개발 아홉째 날. 프레젠테이션 기능 추가, 퀴즈 구조 변경, 모바일 반응형, 코드블럭 사용성, 테스팅 도입.

26. 03. 22.SEOJing
SEO Jing26. 03. 21.

Day 8 - 아티클 퀴즈와 스터디 자료.

SEO Jing 개발 여덟째 날. 아티클 퀴즈 디자인시스템 구현과 스터디 대면 자료 작성.

26. 03. 21.SEOJing
SEO Jing26. 03. 20.

Day 7 - Front Matter CMS와 관련 게시물.

SEO Jing 개발 일곱째 날. Front Matter CMS 설치와 관련 게시물 이동 탐색기 구현.

26. 03. 20.SEOJing
SEO Jing26. 03. 18.

Day 6 - 스터디 자료 작성과 데스크탑 비율 수정.

SEO Jing 개발 여섯째 날. 데스크탑 비율 수정과 씨랩 스터디 사전 진단 자료 작성.

26. 03. 18.SEOJing
SEO Jing26. 03. 17.

Day 5 - shiki 제거, MDX 모듈화, 그리고.

SEO Jing 개발 다섯째 날. shiki를 rehype-prism-plus로 교체하고, gray-matter 직접 구현, MDX 모듈화, 페이지 내 검색, 테이블 디자인시스템까지.

26. 03. 17.SEOJing
SEO Jing26. 03. 16.

Day 4 - 배포와 CI/CD.

SEO Jing 개발 넷째 날. lint, codecov, Cloudflare 배포, fs 런타임 이슈.

26. 03. 16.SEOJing
SEO Jing26. 03. 15.

엄청난 피드백.

CLI 코드 리뷰에서 받은 피드백과 전체 코드 수정 계획을 정리했다.

26. 03. 15.SEOJing
SEO Jing26. 03. 15.

생각보다 어려웠던 댓글, 완독 로컬스토리지.

localStorage만으로 글 읽기 추적, 스크롤 진행률, 댓글 감지를 구현한 과정을 정리했다.

26. 03. 15.SEOJing
SEO Jing26. 03. 15.

MDX 관련 이슈 노트.

블로그 디테일 페이지에서 MDX를 렌더링하기 위해 검토한 라이브러리들과 최종 선택 과정.

26. 03. 15.SEOJing
SEO Jing26. 03. 15.

Day 3 - MDX 이슈, 반응형, 다크모드.

SEO Jing 개발 셋째 날. MDX 라이브러리 이슈, 반응형, 코드블럭, 댓글, 다크모드, 코드 리뷰.

26. 03. 15.SEOJing
SEO Jing26. 03. 14.

디자인 시스템을 구축할 때 주의할 점.

디자인 시스템 구현 시 파일 구조, 디자인 토큰, 유의 사항을 정리했다.

26. 03. 14.SEOJing
SEO Jing26. 03. 14.

폰트는 왜 메인 페이지에서만 적용이 안되고 있었을까?.

Tailwind v4 환경에서 폰트가 메인 페이지에서만 적용되지 않던 원인과 Hydration Mismatch 이슈를 정리했다.

26. 03. 14.SEOJing
SEO Jing26. 03. 14.

MDX DOM 트리 파싱하기.

MDX 파일의 경로 탐색 로직과 콘텐츠 트리 생성 과정을 정리했다.

26. 03. 14.SEOJing
SEO Jing26. 03. 14.

결국 Node.js 까지 와버렸다.

MDX 파일 구조를 JSON으로 변환하기 위해 Node.js의 fs 모듈을 배워봤다.

26. 03. 14.SEOJing
SEO Jing26. 03. 14.

Day 2 - 블로그 스켈레톤과 MDX 파싱.

SEO Jing 개발 둘째 날. 디자인 시스템 확장, 블로그 스켈레톤, 폰트 이슈 해결.

26. 03. 14.SEOJing
SEO Jing26. 03. 13.

전체적인 플로우.

SEO Jing 프로젝트의 기술 스택 선정과 전체적인 개발 플로우 정리.

26. 03. 13.SEOJing
SEO Jing26. 03. 13.

Storybook으로 디자인 시스템 테스팅하기.

Storybook의 사용법과 디자인 시스템 개발에서의 장점을 정리했다.

26. 03. 13.SEOJing
SEO Jing26. 03. 13.

MDX가 뭘까?.

MDX의 개념과 블로그에서 활용하는 이유를 정리했다.

26. 03. 13.SEOJing
SEO Jing26. 03. 13.

Day 1 - 디자인 컨셉과 디자인 시스템.

SEO Jing 개발 첫째 날. 디자인 컨셉 설정과 디자인 시스템 구축을 시작했다.

26. 03. 13.SEOJing
SEO Jing26. 03. 13.

기술 블로그를 직접 제작하게 된 이유.

SEO Jing을 개발하게 된 이유입니다.

26. 03. 13.SEOJing
SEO Jing26. 03. 13.

왜 자꾸 프로젝트가 중단되는지.

프로젝트가 중단되는 이유에 대한 자기 회고입니다.

26. 03. 13.SEOJing