[블로그 프로젝트] 0. 블로그 기획과 디자인

  이전부터 나만의 블로그를 만들고 싶다는 생각을 갖고 있었다. 특히 웹 개발을 접하고 이 분야를 더 깊게 파고들고 싶다는 생각을 하고 나서부터 그런 생각이 더 깊어졌다.

  새해도 되었고, 그동안 조금씩 계획하고 있었던 블로그 개발의 시동을 걸어야겠다는 생각이 들어, 이제껏 개인적으로 정리해두었던 기획과 디자인 아이디어를 올려보고자 한다.

 

기획 단계, 어떤 블로그를 만들지 정하기

기존 블로그의 단점?

  우선, 현재 사용중인 티스토리 블로그에서 느낀 불편함을 나열하자면 아래와 같다.

• 나만의 디자인 적용의 불편함. 스킨 기능이 있으나, 100% 나만의 개성이 드러나는 디자인을 적용하기엔 불편함이 있는 느낌이다.
• 에디터의 문제. 특히 코드 등을 정리할 때마다 느낀 것이지만, 다른 블로그 플랫폼인 velog 등에 비해 만족스럽지 못하다는 생각이 들었다.

  평소 노션에 정리한 글을 다듬고 내용을 추가해 블로그에 포스팅하곤 하는데, 그런 점에서 특히 두 번째 문제가 내게 큰 단점으로 다가왔다.

 

 

구현하고 싶은 기능

  다양한 블로그들을 보며 구현하고 싶은 내용들도 정리했다. 다른 분들이 만드신 블로그에도 많이 구현되어 있는 기능들이다. 내용은 아래와 같다.

• 카테고리 분류
• 댓글 기능
• 페이지네이션
• 반응형 디자인(모바일 + 데스크탑)
• 나이트 모드
• Table of Content (목차)
• 등등...

 

  블로그 개발을 위해 이것저것 자료조사를 해보았는데, 게시물을 작성하는데에는 1. 마크다운 이용, 2. 노션 API 활용 등의 방안 등이 보였다. 개인적으로 노션에 공부한 내용을 정리해두는 편이라 노션을 활용하는 방법도 고민하였지만, 노션을 개인적으로 참고할 글을 작성하는 공간, 블로그를 타인에게 공유할 수 있는 공적인 글을 작성하는 공간으로 분리하고 싶다는 생각이 들어 마크다운을 활용하기로 하였다. 개인적으로 블로그 글을 작성할 때는 단순히 공부했던 자료에 적힌 정보 이상의 것을 추가로 알아내서 넣는다던가... 나만의 문장으로 배운 것을 표현하려는 노력을 들이고 있어서, 이 두 가지가 합쳐지게 되면 전보다 스스로의 발전에는 덜 도움이 될 것 같은 기분.

 

 

디자인 단계, 컨셉의 구체화

  내 블로그를 만든다! 라고 했을 때, 가장 기대가 되는 점은 '스스로 디자인을 할 수 있다!' 라는 점이었다. 비록 전문적인 디자인 지식은 하나도 없고 그저 디자인에 관심이 많을 뿐이지만, 그럼에도 스스로 블로그 디자인을 해보는 것의 의미는 다음과 같다.

 

1. UI를 구상하며 '이 UI는 어떻게 개발할 것인가', '어떤 기능을 넣어서 더 발전시킬 수 있을까' 등에 대해 추가적으로 고민할 수 있다.
2. 동기부여. 좋아하는 요소들을 넣은 디자인을 실제로 구현하는 것에서 큰 성취감을 느낀다.

  블로그의 디자인 테마 후보는 바다와 문구(형광펜, 포스트잇 등등)였는데, 최종적으로는 전자로 정했다. 이 블로그만 보아도 알 수 있겠지만(...) 요즘 그렇게 바다가 좋기도 하고, 낮의 바다와 밤바다라는 테마로 일반/다크 모드 디자인을 하자는 아이디어가 떠올라서였다.

 

피그마로 디자인 짜내기

  글을 작성하기 앞서 이미 언급한 바 있지만, 나는 딱히 디자인을 배우거나 피그마를 공부한 적이 없다. 이래저래 곁눈질로(?) 배운 지식들을 조금 활용할 줄만 알 뿐이라 이런저런 레퍼런스들을 참고해가며 디자인을 구상했다.

 

피그마로 블로그 디자인을 구상한 모습

 

  개인적으로 피그마를 사용하며 유용하다고 생각하는 기능이 몇 있는데, 이는 나중에 따로 글을 작성하고자 한다. 하얗디 하얀 티스토리만 보다가(...) 색깔이 잔뜩 들어간 디자인을 보니 적응이 안 되기도 하고, 하얀 바탕으로 깔끔하게 가볼까도 했는데, 나름 생각한 테마에 맞는 디자인이 나온 것 같아 이대로 가기로 결정. 하얗고 더 깔끔한 디자인은 나중에 현재 디자인이 질리면 바꾸기로...

 

 

레퍼런스

  기획 시 Next.js를 사용하기로 마음먹었었기 때문에, 이를 사용한 레퍼런스를 많이 찾아봤었다. 특히 눈길이 가던 것은 vercel에서 제공하는 템플릿 사이트. 블로그 이외에도 다양한 테마의 템플릿과 예제 코드를 제공하기 때문에, 스스로에 상황에 맞는 템플릿을 찾아 활용할 수 있다. 내 경우는 Blog Starter Kit와 Tailwind CSS Blog 템플릿을 참고해볼 예정이다.

 

---

 

  현재 열심히 짬날때마다 블로그를 개발하고 있다...! 아직 갈 길이 멀지만, 종종 개발 일지를 정리하여 올리고자 한다.