사실 블로그가 사용 가능할 정도로 완성된 건 시간이 좀 지났지만 최근에 다른 토이 프로젝트들을 수정해야 하는 일들이 많아 이제야 글을 작성한다.
Gatsby 블로그로 이전하면서
일단 개발 환경이 리액트와 거의 같았고 GraphQL로 데이터를 전달하는 부분도 이미 경험해봤기 때문에 편하게 시작했다.
그리고 여러가지 Gatsby 라이브러리들 덕분에 Next.js에서는 하나하나 구현해야 했던 기능들을 편하게 좋은 퀄리티로 받아 쓸 수 있는 점이 좋았다.
그중 몇가지 기억에 남는 것들은 다음과 같다.
utterances를 이용한 댓글 기능
사실 Gatsby에서만 사용할 수 있는 기능은 아닌데 백엔드 없이 간편하게 개발하기엔 편했다.
자세한 내용은 utterances 페이지에서 확인할 수 있다.
댓글 기능 같은 경우에 이전에는 따로 서버를 유지하면서 댓글을 저장했지만 utterances를 이용하면 독특하고 간편하게 구현 가능했다.
페이지에 utterances 댓글 위젯을 달게 되면 해당 위젯에서 작성한 내용들은 실제 Github 레포지토리 이슈 섹션에 저장되고 이를 다시 불러와 화면에 표시하는 방법으로 구현되어있다.
markdown을 이용한 편리한 포스팅
gatsby-transformer-remark를 이용하면 markdown으로 작성한 내용을 HTML로 변환해준다.
markdown 구성 요소를 직접 설정하고 변환되었을 때 보일 UI 구성을 스타일시트를 통해 잘 작성해 두면 잘 정형화된 포스트를 쉽게 작성할 수 있어서 좋았다.
간편한 Static Site Generation
Gatsby자체가 SSG(Static Site Generator)로 소개되어있다.
내가 Next.js에서 Gatsby로 옮긴 가장 큰 이유이다.
Github Pages를 이용해 블로그를 운영하려면 정적 페이지로 배포해야 하는데 이전에 Next.js를 사용했을 때는 과정도 복잡하고 자잘한 버그가 자주 발생했다.
Gatsby는 이런 상황에서 Next.js의 훌륭한 대안이었다.
몇 가지 설정만 해주면 정적 페이지 변환부터 Github Pages 배포까지 모두 간편하게 사용할 수 있었다.
블로그 디자인
사실 사용하고 있는 블로그 디자인보다 예쁘고 잘 만들어진 Gatsby 템플릿들이 무척 많다.
하지만 유니크한 개인 블로그 겸 포트폴리오 페이지를 가지고 싶어서 템플릿 없이 만들게 되었다.
블로그 디자인에 고려했던 부분
개인 블로그를 만들면서 오히려 코드 작성보다는 디자인이 어려웠던 것 같다.
특히 화면 크기에 따라 최적화된 반응형 UI를 보여줄 수 있도록 해야 했기 때문에 많은 고민을 했다.
앱같은 느낌을 강조
앱같은 느낌을 강조한다는 게 어떤 말인가 의아해할 수도 있다.
내가 생각한 강조하고 싶었던 느낌은 페이지 이동시 느껴지는 이질감을 최소화하고 웹보다는 안드로이드 & iOS 네이티브 앱 같은 경험을 주고 싶었다.
실제로 이 부분을 표현하기 위해 페이지 전환 애니메이션 같은 것들을 추가하고 렌더링을 최소화하는 등 많은 고민을 했다.
유니크하고 심플한 디자인
사실 Gatsby를 통해 만든 블로그뿐만 아니라 웹에서 볼 수 있는 여러 가지 블로그들의 디자인이 거의 비슷해서 독특한 디자인을 가진 나만의 블로그를 가지고 싶었다.
Portfolio로 사용 가능한 페이지
블로그 에 추가적으로 포트폴리오를 작성할 수 있는 공간을 만들고 싶은데 다른 페이지들과 이질감 없이 어울렸으면 좋겠다고 생각했고 포트폴리오 디자인을 염두에 두고 사이트 전체 디자인을 잡았다.
인터랙티브 한 인터페이스
일반적인 블로그들처럼 간결한 느낌도 좋지만 방문자가 어떤 버튼이나 이벤트를 발생시켰을 때 피드백 애니메이션이 있으면 좋을 것 같다고 생각했다.
근데 이게 과하지 않으면서 블로그 전체 디자인과 어울리도록 적용하는 게 생각보다 힘들었다.
이전 블로그 포스트 이동
이전 블로그의 포스트들을 이곳에 옮기지 않았다.
사실 그렇게 열심히 쓴 글도 아니었고 다시 보니까 도저히 못 봐줄 정도라 아쉽지만 모두 정리하고 깨끗한 상태로 재시작하기로 했다.
처음 블로그를 2011년에 네이버 블로그로 시작했는데 그곳 글들도 여전히 그곳에 있다.
그때 당시에는 안드로이드라는 신문물을 사용해보면서 OS적으로 불편했던 부분들과 당시 안드로이드 리눅스 커널에서 잠겨있던 부분들을 하나씩 풀어가면서 기능 추가하고 최적화(?) 비슷한 걸 하면서 커스텀롬을 배포했고 다양한 사람들에게 응원과 피드백을 받고 이런 걸 즐겼다.
학생 때 쓴 글들이 창피해서 다 날려버리고 싶었지만 아까워서 남겨뒀다.
검색엔진 등록
검색엔진에 등록하기 전에 robots.txt나 사이트 맵등을 만들어야 했고 처음에는 그냥 다 직접 작성했다.
하지만 이런 것도 자동 생성해주는 라이브러리들이 있었고 다시 한번 편의성에 감탄했다.
하지만 Google Search Console 때문에 허튼짓을 많이 했다.
사이트맵을 등록하는 과정에서 사이트맵 자체는 정상적으로 접근이 되는데 구글 서치 콘솔은 계속 읽을 수 없다는 경고창을 띄었고 그것 때문에 내 웹 자체 문제인 줄 알고 삽질을 엄청했는데 나중에 알고 보니 구글 서치 콘솔 자체 문제였다.
영어 표기로는 즉시 등록 안되고 얼마 정도 걸린다 이런 식으로 표시되는 경고였는데 한글에서는 그냥 읽을 수 없다고만 하니 환장할 노릇이었음
실제로 사이트맵 주소를 입력한 지 몇 주 후에 사이트맵이 정상적으로 등록되었다.
역시 SEO는 그냥 검색엔진 자사 플랫폼을 이용해 사이트를 만드는 게 가장 편하다는 걸 한 번 더 느꼈다.
사실 블로그를 완성했다고 했지만 지금 이 글을 쓰고 있는 시점에도 글 형식이나 디자인 등이 맘에 들지 않아 수정을 여러 번 했다.
앞으로 리펙토링도 해야 하고 갈길이 멀지만 나름 뿌듯하다.
이 블로그의 소스코드는 Github Repository에 올려두었으니 필요에 따라 사용해도 된다.
리펙토링이 아직 안 끝난 지금 시점에 document도 없는걸 누가 사용할까 싶지만..