굉장히 오랜만에 작성하는 포스팅이다. 지난 회사의 마지막 1년이 매우 바빴고, 그 이후 졸업을 위해 학교를 다니던 1년도 마찬가지로 매우 바빴다. 그러다 보니 무려 2년에 가까운 포스팅 공백기가 생겼다.
이제는 산업기능요원 복무 때문에 미루고 미뤄지던 대학교 졸업도 드디어 마쳤고, 내 인생의 두 번째 회사를 선택하고 들어가기 위해 부단히 노력한 결과 얼마 전에 최종 합격까지 받았다.
여담이지만, 확실히 실력이 가장 가파르게 성장하는 기간은 바로 취업을 준비할 때인 것 같다. 오랫동안 포스팅을 못했는데, 예전에 작성된 포스팅들을 보니 과거에는 정말 모르는 게 많았다는 걸 다시 한번 느꼈다. 하지만 이것은 곧 내가 성장했다는 것을 의미하기에, 앞으로도 ‘모르는 게 많은’ 개발자의 마음가짐으로 꾸준히 공부해야겠다는 생각을 했다.
만약 현재 회사에서 오랫동안 재직 중인 분이 계시다면, 꼭 연봉 상승 목적이 아니더라도 성장을 위해 한 번 이직을 준비하고 시도해보는 것도 좋을 듯하다. 좋은 성장의 동력이 될 것이다.
정말 하루하루가 폭풍 같던 시절이 지나고 새로운 회사가 결정되자, 조금은 마음의 안정기가 찾아온 것 같다. 그래서 새로운 회사에 입사하기 전까지 그동안 하고자 했으나 하지 못했던 것들을 찾아서 챙겨보기로 하였다.
그 과정에서 떠올린 것이 바로 블로그의 이관이다. 다른 플랫폼에 비해 디자인 커스터마이징이 나름 자유롭다는 장점 때문에 지금까지는 티스토리를 이용하여 블로그를 운영해 왔는데, 몇 가지 불편한 점들을 해소하고 오랫동안 관리하지 못한 블로그를 새롭게 한 번 리프레시할 겸 블로그를 직접 개발하여 이관해보기로 하였다.
1. 티스토리의 문제점
내가 티스토리를 포기하기로 결정한 것은 다음과 같은 문제점들 때문이다.
- 디자인을 커스터마이징하는 것이 상당히 불편했다. 티스토리가 디자인 커스터마이징이 가능하긴 하지만, HTML과 CSS를 적당히 눈치껏 수정하는 정도일 뿐 완전히 자유롭게 고치기는 불편하다.
- 서식 기능이 불편하고 버그가 잦았다. 작성할 때 보이는 모습과 작성된 후에 보이는 모습이 다른 경우가 많았다. 코드 블록을 작성할 때나 글자의 크기를 조정할 때 등이 그랬다.
또한, 블로그를 언젠가 어차피 이관할 거라면 최대한 빠르게 이관할수록 좋다는 판단을 내렸다. 포스팅 개수가 많으면 많을수록 이관은 더욱 끔찍한 노가다 작업이 되기 때문이다.
2. 개발 방향
그렇다면 어떤 방향으로 개발을 진행했는지 간단하게나마 소개하도록 하겠다.
2-1. 기술 스택 선정
- 프레임워크: Next.js 14 (with TypeScript)
- 클라이언트 전역 상태 관리: Zustand
- 서버 전역 상태 관리, API 요청: React-Query
- 스타일링: Tailwind CSS
2-2. Notion API/DB와의 연동
처음에는 포스팅을 작성하는 기능도 직접 구현할 생각으로 WYSIWYG 라이브러리들을 하나씩 찾아보았는데, 전부 다 최소 한 개씩은 치명적인 문제점을 갖고 있었다. (최신 React 버전과 호환이 되지 않는다든지, 더 이상 관리가 되지 않는다든지)
따라서 나는 Notion API를 이용하여 Notion DB를 연동하는 방법을 선택하였다. 즉, 자체 블로그는 Notion으로 작성된 포스팅을 예쁘게 렌더링하고 필요한 포스팅들을 편리하게 찾을 수 있도록 구현하고, 포스팅을 작성할 때는 Notion을 이용하는 것이다. Notion의 서식 기능이 현존하는 서식 기능 중 가장 안정적이라고 느꼈기 때문이다.
Notion과의 연동을 위해 사용한 핵심적인 라이브러리들은 다음과 같다.
@notionhq/client(공식 Notion API 사용을 위한 클라이언트)
notion-client(비공식 Notion API 사용을 위한 클라이언트)
react-notion-x(Notion 페이지 렌더링) → 물론, 취향껏 CSS도 적절히 커스터마이징하였다.
2-3. 중요하게 고려한 부분
결과적으로 개발된 자체 블로그가 바로 이 블로그이다. 개발 내용을 상세히 설명하지는 않겠지만, 개발 과정에서 중요하게 고려한 몇 가지 부분들을 소개만 해보면 다음과 같다.
- 필요한 기능만을 최소한으로 담고 있는 깔끔한 UI/UX를 구축하였다.
- 최신 UX 트렌드에 맞게 페이지네이션 없는 무한 스크롤을 구현하였다.
- 방문/조회 수 추적 및 댓글/좋아요 기능도 Notion API/DB를 이용하여 구현하였다.
- 검색 엔진 최적화(SEO)를 위해 각종 태그와 속성을 꼼꼼하게 신경 쓰며 개발하였다.
- 이미 각종 검색 엔진에 등록되어 있는 기존 블로그의 포스팅들을 신규 블로그의 포스팅들로 맵핑하였다.
