0. 개인 기술 블로그를 직접 만들게 된 이유
원래부터 기록하는 걸 꽤 좋아하는 편이다.
일상은 네이버 블로그에, 개발 관련 글은 velog에, 공부 기록은 노션에 남기면서 지내왔다.
시간이 지나 다시 읽어보면, 그때 어떤 고민을 했는지가 고스란히 남아 있어서 그런 순간들이 나름대로 좋았다.
“그러다 보니 기록이 여기저기 흩어져 있다는 생각이 들었다.”
각각의 플랫폼이 나쁘진 않았지만, 기록들이 하나의 흐름으로 이어진다는 느낌은 들지 않았다.
마침 Next.js를 제대로 써보고 싶다는 생각도 있었고,
이 기회에 내 기록들을 한 공간에 모을 수 있는 블로그를 직접 만들어보자는 결론에 이르렀다.
단순히 기술 글만 쌓아두는 블로그보다는,
앞으로 꾸준히 기록하면서 이것저것 실험도 해보고,
기록 자체가 하나의 프로젝트가 되는 공간을 만들고 싶었다.
취준생이다 보니 당장 해야 할 일도 많았다.
그래서 처음부터 모든 걸 다 만들기보다는,
일단 블로그의 기본 기능부터 빠르게 만들고
나머지는 차차 확장해 나가자는 방향으로 시작했다.
1. 기술 스택을 고르면서 했던 고민들
가장 고민이 깊었던 부분은 콘텐츠를 어떻게 관리할 것인가였다.
블로그 특성상 글은 계속 늘어날 수밖에 없고, 카테고리, 시리즈, 태그 같은 구조도 함께 복잡해질 거라고 생각했다.
그래서 단순 MDX 파싱부터 Contentlayer, Headless CMS까지 여러 선택지를 놓고 비교해봤다.
다만 B-log는 글을 계속 쌓아가며 구조를 확장할 예정이었고,
그에 비해 CMS는 과했고, 직접 파싱은 유지보수 부담이 클 것 같았다.
그 과정에서 Velite를 알게 되었고, 이 프로젝트의 성격과 가장 잘 맞는 선택지라고 느꼈다.
후보군들의 장단점
| 방식 | 장점 | 아쉬운 점 |
|---|---|---|
| MDX 직접 파싱 | 자유도 높고 단순함 | 글이 많아질수록 관리 부담 |
| Contentlayer | 안정적이고 검증된 구조 | 설정과 개념이 다소 무거움 |
| Headless CMS | 관리 편의성, 에디터 UX | 개인 블로그엔 과한 구성 |
| Velite | 가볍고 구조화 가능, 확장성 | 비교적 신생 도구 |
2. B-log를 만들며 가장 먼저 정한 기준
"이 블로그에서 사람들이 가장 먼저 느꼈으면 하는 건 뭘까?"
기획을 시작하면서 스스로에게 던진 질문이었다.
이 질문을 중심으로 몇 가지 기준을 정리하게 됐다.
이 기준은 이후 기획, 와이어프레임, 디자인 전반의 판단 기준이 되었다.
3. 블로그의 전체 구조를 어떻게 설계했는지
구조를 잡을 때 가장 먼저 정해야 했던 건 글의 분류였다.
카테고리 -> 시리즈 -> 글
이렇게 단계적으로 나누고, 태그를 통해서도 유연하게 접근할 수 있도록 설계했다.
또한, 이 블로그는 제3자에게 정보를 공유하는 공간이기도 하지만,
동시에 나 스스로를 위한 기록 공간이기도 하다보니
"내가 얼마나 기록하고 있는지"를 체감할 수 있으면 좋겠다는 생각이 들었다.
그래서 위젯 형태로 이번 달 목표나 활동 지수 같은 걸 보여주는 아이디어도 함께 떠올렸다.
4. 와이어프레임에서 가장 고민했던 것
메인 페이지를 구성하면서 가장 신경 쓴 건 첫 인상이었다.
여러 기술 블로그와 기업 기술 블로그를 찾아보며
화면 흐름을 크게 두 가지로 나눠 정리해봤다.
- (1) 포트폴리오/브랜딩 강조형 : 히어로 섹션이 크고 눈에 띄는 구조
- (2) 내용/탐색 중심형 : 히어로 없이 바로 글 목록으로 진입
특히 히어로 섹션을 배치할지 말지를 꽤 오래 고민했다.
많은 기술 블로그들이 히어로 섹션을 사용하는 이유는
결국 이 공간이 개인 브랜딩의 성격을 가지기 때문이라고 생각했다.
그래서 히어로 섹션은 사용하되,
글 접근성을 해치지 않도록 비율을 조정해서 사용하기로 했다.
이 과정에서 Dribble 사이트를 참고하며 레이아웃을 구성했다.
현재는 임시 일러스트를 사용하고 있지만,
추후 여유가 생기면 3D 요소를 직접 제작해 넣을 계획이다.
시간을 단축하고 싶어서 구조 정도만 와이어프레임으로 제작하고
바로 퍼블리싱을 시작했고 구현하면서 세세한 것들을 수정했었다.
물론 컬러 토큰이나 공통적으로 사용하는 포스트 카드들은 사전에 만들어뒀었다.
특히 시간을 꽤 잡아먹었던 건 카테고리에 들어가는 폴더 아이콘이었다.
피그마로 그리는 건 20분도 안걸렸지만,
웹에 올리려니 직접 svg를 수정해야해서 꽤 시간이 걸렸다.
5. 가독성과 집중력 유지를 위한 노력
글 목록과 상세 페이지에서 무엇보다 중요하다고 생각한 건 가독성이었다.
그렇기에 디자인을 할 때도 계속해서 "눈이 편안한가"를 기준으로 삼았다.
글을 읽는 동안에는 최대한 흐름이 끊기지 않도록 하는 데 집중했다.
블로그의 성격상 텍스트 비중이 높기 때문에,
작은 요소 하나하나가 집중을 방해할 수 있다고 느꼈다.
텍스트 자체가 많은 구조이기 때문에 화면이 답답해 보이지 않도록 하는 것도 중요했다.
Dock Menu 역시 같은 맥락에서 설계했다.
기능적으로는 편리하지만,
읽는 도중에는 오히려 방해 요소가 될 수 있다고 생각했다.
6. 디테일을 챙기기 위해
7. 디자인 컨셉 : 코끼리를 삼킨 보아뱀
사이트 곳곳에는 「어린 왕자」에 등장하는 보아뱀 요소가 숨어 있다.
왜 보아뱀이지? (TMI 주의!)
어린 왕자를 읽어본 사람이라면 한 번쯤은 들어봤을 그림이 있다.
어른들은 ‘모자’라고 말하지만, 사실은 코끼리를 삼킨 보아뱀을 그린 그림이다.
어릴 때, 이 이야기를 읽으면 “어른이 되면 상상력이 사라진다는 이야기인가 보다” 정도로만 받아들였다.
그런데 시간이 지나 다시 읽고, 곱씹어 볼수록 시선이 완전히 다른 곳으로 향했다.
이야기가 던지는 사회 비판보다는, 코끼리를 통째로 삼킨 보아뱀 자체가 너무 대단하게 느껴졌다.
누군가는 불가능하다고 생각하고, 처음부터 한계라고 선을 그어버리는 일을
보아뱀은 그냥… 삼켜버린다. 심지어 반쯤도 아니고, 통째로.
그때부터 이 그림은 나에게 용기를 주는 하나의 문장이 되었다.
“불가능해 보여도, 일단 삼켜보자.”
이 문장은 이후로 나에게 하나의 기준이 되었다.
불가능해 보이거나 한계처럼 느껴지는 일도, 피하지 않고 일단 마주해 보고 감당해 보기로 하는 태도 말이다.
그래서 이 블로그에 ‘코끼리를 삼킨 보아뱀’이라는 컨셉을 담게 되었다.
결과를 미리 가정하기보다는, 먼저 시도하고 부딪혀 보겠다는 자세에 가깝다.
스스로 정한 한계를 가장 먼저 의심해 보는 태도이기도 하다.
마침 이름도 ‘보아’이고, 띠도 뱀띠다.
지금 와서 생각해보면 이만큼 나에게 잘 어울리는 상징도 없지 않나 싶다.
로고와 파비콘 제작
- 로고는 "Blog"를 캐릭터화 해서 제작하였다. (Blog + 뱀 형상)
- 파비콘은 사실 🔵, 🟦 형태가 가장 이쁜거 같은데 그래도 "B"모양이 가장 적합하다고 생각해서 제작했다.
임시 죄송카드 & 임시 히어로 꾸밈요소
아무리 생각해도 다른 기능들을 빠르게 다 구현하기에는 여유가 없을 것 같았다.
그래서 그동안 대체할 수 있는 임시의 무언가가 필요했고 이를 위해서 하나 제작했다.
- 이빨 자국은 뱀의 이빨 자국을 표현했다. 그래서 자세히 보면 중앙 2개만 좀 더 깊이 박힌 모양이다.
- 코끼리가 입고 있는 건 공사장에서 입는 안전조끼이다.