오늘은 블로그와 포트폴리오를 대대적으로 업데이트했다.

기존에는 개발 기록을 티스토리에 작성하고 있었지만, 이번 업데이트를 통해 dev.rederx.com 안으로 블로그를 완전히 통합했다.

사실 티스토리를 사용하면서 가장 아쉬웠던 점은 디자인이었다. 내가 추구하는 방향은 Apple처럼 불필요한 요소를 최대한 덜어낸 미니멀한 디자인인데, 티스토리는 아무리 스킨을 수정해도 내가 원하는 분위기를 완전히 표현하기 어려웠다. 언젠가는 직접 만든 블로그로 옮기고 싶다는 생각을 계속 가지고 있었는데, 이번 기회에 그 목표를 실현하게 되었다.

블로그는 글의 메타데이터를 모두 JSON으로 관리하고, 서버 사이드 렌더링(SSR) 방식으로 Markdown을 HTML로 미리 변환하여 사용자에게 전달하도록 구현했다. 클라이언트에서 Markdown을 직접 파싱하는 것이 아니라 서버에서 완성된 HTML을 전달하기 때문에 초기 렌더링 속도가 빠르고 SEO 측면에서도 유리하다.

현재는 게시글 수가 많지 않기 때문에 별도의 캐시를 적용하지 않았지만, 구조 자체는 추후 확장하기 쉽도록 설계했다. 앞으로 게시글이 많아지거나 트래픽이 크게 증가한다면 서버 캐싱을 추가하여 Markdown 파싱과 서버 연산을 최소화할 계획이다. 처음부터 과도하게 복잡한 구조를 만들기보다는, 지금 필요한 수준으로 구현하고 이후 상황에 맞게 확장하는 방향을 선택했다.

포트폴리오 Navigation 구조 개선

이번 업데이트에서 가장 오래 고민했던 부분은 Navigation(UI) 구조였다.

기존에는 상단에 하나의 Navigation만 존재했지만, 이번에는 Navigation을 두 개로 분리했다. 기존 Navigation은 항상 페이지 최상단에 고정시키고, 새롭게 만든 Navigation은 그 아래에 배치한 뒤 사용자가 스크롤을 내리면 position: sticky로 상단을 따라오도록 구현했다.

처음에는 PC 환경에서 기존 Navigation의 메뉴를 Hover하면 모바일 햄버거 메뉴처럼 확장되어 현재 페이지의 섹션 목록만 표시하는 방식을 고려했다. 기능적으로는 충분히 구현 가능했지만, 그렇게 되면 PC와 모바일이 서로 다른 인터랙션을 가지게 되고, 레이아웃과 이벤트 처리도 각각 따로 관리해야 했다. 결과적으로 코드 복잡도와 유지보수 시간만 증가할 것이라고 판단했다.

그래서 조금 더 단순한 해결책을 선택했다. Navigation을 하나 더 만들어 각각의 역할을 명확하게 분리하는 방식이다.

막상 구현을 끝내고 보니 이 방식이 오히려 더 좋은 선택이었다.

특히 /blog에서 게시글을 클릭하여 /blog/* 페이지로 이동했을 때, 새롭게 추가한 Navigation의 로고 영역에 '블로그 > 글 제목' 형태의 Breadcrumb 인터랙션을 자연스럽게 넣을 수 있게 되었다. 모바일에서도 현재 위치를 직관적으로 보여줄 수 있고, 앞으로 다른 페이지가 추가되더라도 같은 구조를 그대로 활용할 수 있다.

처음에는 단순히 유지보수를 위해 선택한 구조였지만, 결과적으로는 사용자 경험까지 함께 개선되는 방향이 되었다.

이번 업데이트를 통해 블로그와 포트폴리오가 하나의 서비스로 통합되었고, 디자인과 구조 모두 내가 처음부터 목표했던 방향에 한 걸음 더 가까워진 것 같다.