project,  makedevblog,  retro

나의 블로그 개발기

데브코스를 참여하면서 생긴 목표였던 나만의 개발 블로그 만들기! 첫 팀프로젝트를 진행하기 전이 적기라는 생각에 밑도 끝도 없이 도전해서 만들어본 나의 블로그 개발 절반 성공기🌟

  개발 공부를 시작과 더불어 거의 근접한 시간에 블로그 작성을 시작했다. 블로그를 시작하게 된 계기는 그리 거창한 이유는 없었다. 개발 공부를 하면서 공부한 내용들을 나에게 익숙한 문장으로 정리하고 추후 나의 앞으로 개발에 있어서 참고자료로 사용하기 위함이었다. 그리고 지금까지 꾸준히 기록하고 또 나의 일기장 처럼 활용하면서 블로그를 작성 중이다. 그리고 내가 처음 블로그를 작성한 공간 tistory에서 이제는 개인 블로그로 장소를 옮겨 블로그 글을 작성하고 있다.


블로그 시작을 tistory에서 한 이유

  블로그를 처음 시작하고 tistory를 선택한 이유는 간단하다. ⭐️나의 tistory 블로그

  1. 많은 개발과 관련된 블로그들이 tistory에 있다.
  2. 많은 개발자들이 사용하는 velog도 고려 대상이었다. 하지만 처음 개발을 시작하는 나의 입장에서 마크다운이 익숙해지기까지 많은 시간이 소요될 것이라고 예상했고, 블로그 작성에 많은 시간이 소요되는 것을 경계했다. 그래서 velog 대신 tistory를 선택했다.
  3. 글 작성이 매우 쉬웠다. tistory에서 제공하는 글쓰기 도구들이 간단했고 직관적이었다. 실제로 제공되는 도구들을 사용하기까지 많은 시간이 걸리지 않았다.
tistory 도구


개인 블로그 개발을 결심한 이유

  tistory에서 글을 계속 작성해 나가면 나갈수록 뭔가 아쉬운 느낌이 들었다. 그 이유는 다음과 같다.

  1. 내 마음대로 커스텀할 수 있는 공간이 필요했다. tistory에는 많은 스킨들이 있고 이를 무료로 제공하는 경우도 많이 있다. 하지만 모든 스킨들이 나의 입맛에 100% 알맞게 구성되어 있지는 않았고 결국 돌고 돌아 선택해보면 다른 많은 개발 블로거들과 거의 비슷한 디자인의 블로그라는 것을 알 수 있었다. 물론 tistory를 통해서 커스텀할 수 있는 기능을 제공하지만 아직 프로젝트 경험도 없는 나의 입장에서 코드의 흐름을 온전히 이해하고 원하는대로 커스텀하는 것이 블로그를 처음부터 새로 만들어보는 작업보다 시간이 많이 걸릴것이라고 판단했다.
  2. F/E 개발자라면 당연히 CSS 공부도 많이 필요하다. 그리고 지금까지 공부를 해오면서 CSS를 학습하는 가장 빠른 방법은 직접 적용해 보면서 공부하는 것이라고 생각했다. 그리고 블로그를 작성하고 있는 나는 개인 블로그를 만들어 나에게 익숙한 코드를 바탕으로 CSS를 적용해 나가면서 학습하면 좋겠다는 생각을 했다.
  3. 마크다운에 익숙해 지기 어렵다. tistory에서 기본적으로 제공해주는 글쓰기 기능들을 통해 글을 작성하기 때문에 개발자라면 필히 익숙해져야 할 마크다운 문법들이 익숙해지기 어렵다. 개발 관련 글을 작성하는데 마크다운과 익숙해지기 어렵다는 점이 아이러니 하다는 생각이 들었다.
  4. 개발자라면?

    아마 이 이유가 가장 솔직한 이유 중 하나가 아닐까 싶다. 이상한 고집(?)이라고 생각할 수도 있겠지만 내가 아무리 많은 글을 작성하더라도 tisotry에 속한 글이라는 점이 싫었다. 남들과는 다른 나만의 디자인, 나만의 글, 나만의 공간, 나만의 URL주소를 가지고 싶었다. 물론 tistory에서 URL주소를 구매해서 연결할 수 있는 것으로 알고 있지만, 자고 일어 났더니 tistory가 없어진다면? 뭐 그럴일은 없겠지만 이런 느낌을 받는 것 조차 싫었다.
  5. 지금까지 리액트 코드를 작성하는 방법에 대해서 배웠지만 정작 라이브러리나 프레이워크를 활용하면서 프로젝트에 참여한 적이 아직 없다. 그리고 이제 곧 중간 프로젝트로 팀 프로젝트를 진행하기에 앞서 블로그를 만들어보면서 리액트를 기반으로 한 프로젝트의 폴더 구조, 컴포넌트 계층 구조등을 이해할 수 있는 좋은 기회라고 생각했다.

목표설정 및 개발기간

  • 목표
    • 메인 페이지 UI 구성 : 개인 블로그의 경우 대부분 정적 웹 페이지 방식으로 운영되기 때문에 추가, 삭제, 수정 등의 작업보다는 View를 잘 만드는것이 핵심이라고 생각한다. 누군가 나의 블로그에 방문한다면 메인 페이지에서는 쉽게 글들을 구별할 수 있고 원하는 글을 찾을 수 있어야 한다고 생각한다. 그리고 이 점을 초점에 맞춰 알맞은 UI를 구성하는 것을 목표로 했다.
    • 포스트 UI 구성 : 마크다운 문서로 작성된 글들이 가독성이 좋은 크기와 글씨체로 보여지는 것을 목표로 했다.
    • 카테고리 분류 : 작성된 글의 목적 및 주제에 따라 분류하여 볼 수 있는 카테고리를 구현하는 것을 목표로 했다.
    • 태그 생성 : 특정 태그로 관련된 글들을 볼 수 있게 구현하는 것을 목표로 했다.
    • 나만의 로고 & favicon 만들기 : 나의 개인 블로그임을 가장 잘 표현할 수 있는 로고와 favicon 설정을 목표로 했다.
  • 기간
    • 2022/12/27 ~ 2023/01/02
    • 나에게 주어진 시간이 그렇게 많지 않았다. 데브코스에 참여하면서 강의와 과제를 소화하고 데브코스와 별개로 리액트 공부를 하는데도 하루가 빠듯하게 흘러갔기 때문에 많은 시간을 할애하는 것이 불가능했다. 그러던 중에 데브코스의 강의와 과제가 별도로 없는 복습기간이 1주일 주어진다는 사실을 알았다. 이 시간에 어떻게 해서든 기본적인 블로그의 뼈대를 완성하고 지속적인 커스텀을 해나가야 겠다고 생각했다.

Gatsby를 선택한 이유

  1. 정적 사이트 생성기이다.
    위에서도 짧게 언급했지만 블로그의 경우 대부분 정적 사이트로 만든다. 블로그는 글을 작성하고 단순히 노출해 주면 되기 때문에 방문자에 따라서 페이지를 달리 보여줄 필요도 없고 데이터가 실시간으로 업데이트 될 필요가 없다. 따라서 고정된 웹 페이지를 보여주면 된다. 그러므로 보다 빠른 정적 사이트로 만드는 것이 더 좋다. 또 Gatsby의 큰 장점 중 하나는 javascript가 실행되면 빈 HTML페이지에 마크업을 추가하는 SPA와 다르게, 개발 후 Build 과정에서 마크업을 생성한다고 한다. 이렇게 되면 페이지 내 모든 컨텐츠가 이미 생성되어 있기 때문에 SEO 측면에서도 유리하다.
  2. React 기반의 프레임 워크다.
    지금까지 자바스크립트를 시작으로 리액트까지 열심히 공부하고 있었다. 자바스크립트의 경우 notion cloning과 같은 개인 프로젝트를 통해 연습을 했지만 아직까지 React를 기반으로 프로젝트를 진행한 적이 없었고 곧 시작 될 팀 프로젝트에서 리액트를 활용 할 예정이다. 그리고 팀 프로젝트가 시작되기 전에 조금 더 팀에 도움이 되기 위해서는 많은 연습이 필요하다고 생각했다. 지금이 그 적기라고 판단을 했고 정적 사이트 생성기에 대해서 알아보기 시작했다. Jekyll의 경우에는 Ruby를, Hexo는 자바스크립트를 기반으로, 빠른 속도를 자랑하는 Hugo는 Go언어로, 아주 짧은 기간 공부해본 Vue.js기반의 VuePress등 많은 정적 사이트 생성기(Static Site Generator)가 존재한다는 것을 알게되었다. 그 중에서도 React를 기반으로 한 정적 사이트 생성기는 Gatsby였기 때문에 선택했다. 현재 리액트와 가장 친숙해지고 있고 또 앞으로 더 친숙해져야 하기 때문이다.
  3. 공식 문서가 잘 되어있다.
    지금까지 개발 공부를 해오면서 가치 있는 자료를 잘 찾아내는 것이 능력이라는 사실을 알게 되었다. 그리고 Gatsby 프레임워크를 처음 접하게 된 나에게는 좋은 가이드 라인을 제시해 줄 자료가 필요했다. 예를들어 CSS의 적용을 어떻게 할 것인가에 대해서 고민을 한다면 CSS-in-JS 부터 CSS modules, Tailwind, Emotion 등 활용할 수 있는 CSS, 라이브러리 사용 방법까지 상세하게 안내해주고 있다.

    ⭐️Gatsby공식문서


많은 것을 느끼게 된 블로그 개발 첫 시도

  블로그 개발을 본격적으로 시작하기에 앞서 개발 환경을 구축할 수 있는 자료들을 찾아보았다. 그러던 중 inflearn에서 Gatsby를 통해 기술 블로그를 만드는 가이드 문서를 찾을 수 있었다. 모든 것을 처음부터 하나 하나 알아가며 개발 환경을 구축하고 기능들을 개발해 나가면 더 좋은 공부가 되었겠지만 그렇게 하기에는 시간상의 이유와 나의 개발 능력이 부족으로 인하여 목표한 기간 내에는 완성할 수 없다는 판단이 들었다. 그래서 해당 문서를 기반으로 초기 개발 환경 구축과 블로그 기초적인 기능들을 만들어 나갔다. 해당 inflearn Gatsby 개발 블로그 가이드 문서를 참조한 이유는 다음과 같다.

  • 동영상 강의를 통해서 따라가는 것이 아니라 Text로 된 문서이다. 따라서 내용들을 직접 읽으며 이해하면서 적용해야 하기 때문에 여러 참고 자료를 찾아 하나 하나 적용하는 것보다 시간상 이점이 많다고 판단했다. 한 마디로 Gatsby 블로그 만들기 공식문서 요약본이라고 생각하면 될 것 같다.
  • 많은 개발자들이 처음 개인 블로그를 만들 때 많이 활용한다.
  • ⭐️Inflearn 기술 블로그 개발 가이드 문서

  1주일 중 약 4일의 시간을 아침부터 늦은 밤까지 읽으면서 적용해 나갔다. 모든 동작 원리들을 다 이해하면서 적용해 나가지는 못했지만 Gatsby 프레임워크의 폴더 구조를 파악할 수 있었고, 검색 엔진 최적화(SEO), 웹 접근성 향상 방법과 같은 새로운 개념들에 대해서도 공부할 수 있었다. 그리고 리액트, Typescript 코드 작성 연습과 emotion을 활용하여 CSS를 원하는대로 적용해 보면서 상대적으로 많이 부족한 CSS 연습을 할 수 있었다.

proto-blog-img

  카테고리 위치를 변경하고 contact란을 만들고 포스트 위치도 변경하는 등 flex를 활용해서 내가 상상한(?) 블로그의 모습을 만들기 위해 계속해서 시도해 보았다. 글씨체, 태그 등 디테일한 요소들은 전체적인 블로그의 UI를 잡은 후 수정하려고 했는데 첫 단계부터 원하는 모습으로 이뤄지지 못했다…😢 나에게 남은 시간은 3일이었고 3일 동안 계속 수정한다고 해서 ‘내가 원하는 tistory보다 나은 블로그를 만드는 것은 불가능하겠다’라는 생각이 들었다. 내가 원하는 결과물을 만들어 내지 못한 이유가 명확했다.

  1. 기획이 없었다.
      블로그를 개발하면서 가장 뼈져리게 느낀점은 바로 기획의 필요성이다. 용기는 가상했으나 메인 페이지의 구성은 어떻게 가져갈 것인지, 포스트 페이지의 구성은 어떻게 가져갈 것인지, 디자인은 어떻게 할 것인지에 대한 전반적인 기획이 없었다. 구조가 단순하다는 이유였다. 블로그 개발 문서를 통해 만든 블로그를 기반으로 조금씩 수정하다보면 원하는 결과물을 만들어 낼 것이라는 오만한 생각을 했다.
  2. CSS지식의 부족
      그 동안 데브코스 과정을 통해 과제, 개인 프로젝트, CSS 강의들을 듣고 공부하면서 어느 정도 CSS에 익숙해졌다고 생각했다. 하지만 그 동안 연습했던 것들은 극히 소규모 프로젝트의 CSS 적용이었고 사전 기획 없이 조금씩 적용해 나가도 큰 무리가 없었다. 하지만 블로그를 개발하면서 필요에 따라 조금씩 CSS를 수정하면서 작업하는 것으로 원하는 결과물을 만들어 내는 것은 적어도 현재의 나에게는 불가능한 일이었다.

      블로그를 개발하면서 느낀점은 우선 전역 스타일을 설정하여 전체적인 통일성을 갖춘 후 페이지 또는 각 컴포넌트 마다 특색있는 스타일을 적용하면서 바꿔나갔어야 했다는 생각이 들었다.그리고 그렇게 적용하기 위해서는 전역 CSS를 설정하는 방법에 대해서 알고 있어야 했고, CSS 우선순위를 정확하게 알고 있어야 했다. 또 디테일하게는 예를들어 font-size의 경우 px, em, rem 단위들을 알고 활용할 수 있어야 했다. 부끄럽지만 JavaScript, React에 초점을 맞춰서 열심히 공부만 했지 CSS를 조금은 등한시한 것이 사실이다.(조금 변명해보자면 CSS를 공부하지 않아도 된다고 생각했다기 보다는 공부의 우선순위가 뒤로 밀려있었다.😅) 그 결과 내 머릿속 상상의 블로그와 거리가 있는 블로그가 만들어졌다.

블로그 스타터를 통해 다시 만들기 시도한 블로그

  남은 시간은 3일, 72시간이었다. 처음부터 내가 계획한대로 블로그 개발이 이뤄졌다면 더 좋았겠지만 그러지 못했다. 하지만 포기할 수는 없었다. 개발자에게 있어서 중요한 습관 중 하나는 정해진 기간 목표한 결과물을 만들어 내는 것 또한 중요한 점이라는 것을 반복적으로 많이 듣게 되었다. 그래서 나는 차선책으로 블로그를 우선 만드는것을 목표로 정했고, 그 방법으로는 Gatsby 공식 홈페이지에서 제공하는 starter들 중 내가 원하는 모습과 가장 유사한 starter를 바탕으로 디테일하게 내가 원하는 디자인으로 커스텀해 나가는 방식을 선택했다.

⭐️블로그 starter 데모

  앞선 4일 동안 문서들을 읽어가며 Gatsby 폴더 구조를 파악하고 눈에 익힌 것들이 도움이 되었는지 원하는 요소들을 하나 하나 변경해 나가는 것들이 그렇게 어렵게 느껴지지 않았다. 남은 기간 동안 최대한 커스텀을 하고 앞으로 블로그를 작성해 나가면서 계속해서 update할 예정이다.


커스텀 내역(2022.12.31 ~ 계속 업데이트 중)

메인 페이지 Header 및 Navigation

  • favicon 변경
  • Logo 변경
  • 블로그 카테고리 추가
    • 태그에 의한 분류
  • Github Link 연결 및 아이콘 변경
  • tistory Link 연결 및 아이콘 변경

메인 페이지 Post List

  • 태그 추가 및 노출
  • 태그 Image 추가
  • 추가된 첫 태그의 내용에 따라 이미지 자동 설정
    • 설정된 첫 태그가 Lang인 경우, 책 이미지 자동 노출
    • 설정된 첫 태그가 Project인 경우, 해 이미지 자동 노출
  • 포스트 개시일 추가
  • 포스트 Image 제거
  • 포스트 avatar 제거
  • 포스트 subTitle 제거
  • 로고 이미지 리사이징 (적정 크기로 이미지 변경)
  • 태그 이미지 최적화 (avif, webp로의 최적화를 통해 받아오는 메인페이지 기준 리소스 크기를 1.3MB -> 412kB)
  • lightHouse 성능 점수 개선 (96점 -> 100점)


Post 페이지

  • 태그 노출
  • 각 HTML 태그 font-size 변경
  • 포스트 개시일 노출
  • CODE BLOCK 스타일 변경
  • Post Image 그림자 설정
  • Github utterances 댓글창 연결

블로그 개발기를 마무리 하며

  일주일 동안 아침부터 저녁까지 온 신경을 블로그 만드는 곳에 쏟아 부었던 시간이었다. 그리고 결국 나만의 개인 블로그를 완성시켰다. 물론 아쉬움도 많이 남는다. 내가 조금만 더 실력이 있었더라면? 처음부터 woodaelog를 내 스스로 만들 수 있었다면? 여유를 가지고 기획부터 차근차근 해 나갔더라면? 과 같은 질문들이 계속 머릿속에 떠돌고 있다. 하지만 블로그 개발을 시도하면서 많은 것을 배우기도 했고 온전히 개발에만 집중할 수 있었던 소중한 시간이다. 이번 경험을 자양분 삼아 곧 시작하게 될 팀 프로젝트에서 제 몫을 해내고 싶다. 앞으로도 계속해서 커스텀해 나가면서 더 멋진 개발 블로그를 완성해 나갈 예정이다!🥰