블로그를 통해 기록을 한다는건 내가 공부한것들을 글로 정리하며 체계화하거나, 느낀점을 남기는것. 또는 간단한 버그에 대해 해결방법을 기록하는 등, 다양한 목적이 있습니다. 중요한건 나의 생각을 잊지 않고 다시 확인할 수 있다는 것입니다.
기억은 휘발성입니다. 개발자로서 성장하기 위해 노력하며, 기록의 중요성에 대해 다시한번 체감하고 있습니다.
그런 면에서 제 블로그는 다소 카테고리, 태그에 대한 체계가 없고, 내 글을 다시 확인하고싶거나 저번에 기록해둔것을 찾아보고자 할 때 적합한 블로그는 아닙니다.
지금은 글이 50개정도로 많지는 않지만, 버그리포트부터 간단한 howto까지, 다양한 주제에 대해 글을 쓰게 된다면, 시간이 조금만 지나도 글들이 파묻힐 것 같았습니다.
크게 아래 세 부분에 대한 개선을 장기적인 관점에서 중점적으로 해볼 예정입니다.
- 메인페이지에서 카테고리와 태그를 통한 글 필터링 ( 이번 글에서 다룰 부분 )
- Heatmap 또는 다른 도구를 통한 글 작성일자별 필터링
- Text-match 기반으로 블로그 글 검색
블로그를 뜯어 고쳐보자!
현재 블로그는 Majid Hajian님의 Gatsby 커스텀 템플릿(https://github.com/mhadaily/gatsby-starter-typescript-power-blog)으로 구현되어있습니다. 따라서 블로그 소스코드는 Typescript로 작성되었고, 이를 자유자재로 수정해 빌드할 수 있습니다.
tistory나 velog등 좋은 블로그 플랫폼이 있지만, 정적블로그를 선택한 이유죠!
유저 인터페이스
앞서 언급한 태그/카테고리별 글 필터링(+ 내용으로 필터링), 작성일자별 필터링, 검색과 본인 소개 영역까지 총 4개의 서브 영역과 글 목록이 보일 메인 영역까지, 총 5개의 영역이 구성되어야 합니다.
작성일자별 필터링은 급하지 않으니, 제외한 4개 영역으로 구성해보았습니다.
-
카테고리는 크케 아래와 같이 구성해보았습니다.
- Tech: 무언가의 개념이나 기술적인 고민들
- Bugfix: 버그를 해결하는 방법(들)을 정리.
- Howto: 간단한 설정이나 문제를 해결한 방법 공유
- Etc: 회고, 일기, 기타 정보. ( 내용이 많아지는 카테고리는 따로 분류)
-
태그는 아래와 같이 구성해 세부주제별 글의 종류를 확인할 수 있도록 할 예정입니다.
- 특정 기술/라이브러리/프레임워크의 종류 (Spring, React, CSRF, CORS 등..)
- 시리즈의 경우 시리즈 태그 ( jpa-study 등)
이외에 추가적으로 손본 부분
- 태그/필드 선택 시 안내정보
-
메인영역인 글 목록 부분은 크게 건드리지 않되, 글 상단부 내용 일부를 미리보기 할 수 있도록 했습니다.
-
본인 소개 영역은 기존에 1/2를 차지할정도로 큰 영역을 차지했는데, 상단부에 짧은 띠 형태로 배치해 공간 차지를 줄였습니다.
메인페이지 개선 결과
[Before] 메인 페이지
[After] 메인 페이지
고치다보니 더 신경써야할것같은 부분들
블로그를 한번 손대고 나니, 여러모로 더 손봐야 할 부분이 많이 보였습니다.
특히 본문 가독성 측면에서 어딘가 모를 불편함이 왔고, 이것을 목록화 해보았습니다.
[Before] 본문 영역
**고쳐야할 부분들**
- 폰트
- 본문 폭 : 가독성 측면에서 상당한 차이가 있음을 알아냈습니다(..!)
- 모바일 반응형
- ul, li 및 h태그 사이 간격
- …등등
[After] 본문 영역
가까운 시일 내에 추가적으로 해볼 부분
- UI상 카테고리 부분을 선택 후 태그를 선택해 보는게 일반적인데, 카테고리를 선택했을 때, 그 안에있는 태그와 태그상 글 개수가 매핑되지 않습니다. (버그는 아니지만, 직관력이 떨어지는 느낌)
- 마찬가지로 “태그 선택” 부분에서 너무 많은 태그가 분류없이 존재해, 일반 블로그에서 Tree형식으로 카테고리를 제공하듯 수정하고 싶습니다.
- 블로그 레포지토리의 Readme.md에는 장기적으로 블로그에 적용해보고싶은 내용에 대해 정리해놓았습니다.
https://github.com/lee95292/blog_mglee
마치며..
공부하며 글을 쓸때는, 눈으로 글을 읽을때보다 더 천천히 글자 하나하나를 톺아보며 읽게됩니다. 읽기만 할 때는 정신없이 소화하기 바빴던 내용들이지만, 천천히 읽다보면 의미있는 궁금증들이 하나, 둘 생겨나고 그 질문들을 해결해나가며 완성도있는 지식을 머릿속에 담아냅니다.
아직 기술적인 부분에서는 갈길이 멀지만, 꾸준히 배움에 재미를 느끼고 계속 성장하고싶습니다.