백엔드 개발자의 눙물나는 블로그 UI 개선 기록
이 글을 cursor 와 claude 에게 바칩니다

들어가는 글

작년 이직 시즌을 기점으로 next.js + mdx 기반의 블로그를 개설했다. (서서히 탈스토리 하기 위한 몸부림) 당시에 핀터레스트에서 꽂힌 독득한 월페이퍼 디자인에, 해당 이미지를 기반으로 블로그를 꾸미려 했으나 처참히 망했다. 왜인지는 아래 이미지를 보자 😂

원본 디자인

깔끔하고 외국 일간지 느낌이 난다. original.png

블로그에 적용된 디자인

하지만 내가 적용한 디자인은 어떨까? 사실 내가 한것도 아니다, claude 가 다해줬다. AI 사용에 모종의 책임을 느꼈다. 원본 이미지처럼 깔끔한 사진을 넣고 싶었으나 나는 사진도, 이미지 고르는 센스도 없어 일단은 디카프리오 형님의 리즈시절로 땜빵했다. 고마워 차은우 같은 느낌이랄까. image1.png 블로그 메인이 이렇다 보니 누구에게도 소개하지 못할 블로그로 남겨두고 있었다. 간간히 글만 써서 배포하는 식으로 사용했는데 더 이상 방치해두면 영원히 쳐다보지 않을 느낌이라 메인 UI 개선부터 시작하게 됐다.



📌이번 블로그 업데이트의 사항은 다음과 같다.

  • TOC(table of contents) 생성
  • 반응형 디자인 - 모바일에서도 편하게 읽을 수 있도록
  • highlight 및 code-inline UI 개선
  • 메인 화면 디자인 개편 - 어중간한 썸네일 없애기
  • 가독성 좋은 폰트 적용
  • About 페이지


1. TOC 생성 (+scrollToHeading)

깔끔한 블로그는 결국 글의 전체 구조를 읽을 수 있는 블로그라 생각한다. 그러기 위해선 글을 읽기 전에 목차가 있어야 한다. 기존에는 목차는 커녕 가독성도 보장되지 않은 블로그였기에,, TOC 추가의 우선순위를 높였다. TOCProps 로 글 전체(content) 를 넘긴 후, TOC component 에서 정규식으로 파싱했다.

typescript
import React, {useEffect, useState} from 'react';

interface TOCProps {
  content: string;
}

type matchTitle= {
  index: number
  title: string
}

const TOC = ({ content }: TOCProps) => {
  const [toc, setToc] = useState<matchTitle[]>([]);
  useEffect(() => {
    const headings: matchTitle[] = [];
    const regex = /^(#{1,3})\s(.+)$/;
    content.split('\n').forEach((line) => {
      const match = regex.exec(line);
      if (match) {
        headings.push({
          index: match[1].length,
          title: match[2]
        });
      }
    });

    setToc(headings);
  }, [content]);

  const scrollToHeading = (id: string) => {
    const element = document.getElementById(id);
    if (element) {
      element.scrollIntoView({
        behavior: 'smooth',
        block: 'start',
      });
    }
  };

  return (
    <div className="toc">
      <h3>Table of Contents</h3>
      <ul className="list-disc list-inside">
        {toc.map((heading, index) => {
          const id = heading.title.replace(/\s+/g, '-').toLowerCase(); // id 형식 맞추기
          const paddingClass = heading.index === 3 ? "pl-4" : ""; // index가 3일 때만 padding 적용

          return (
              <li key={heading.title} className={paddingClass}>
                <a
                    href={`#${id}`}
                    onClick={(e) => {
                      e.preventDefault();
                      scrollToHeading(id);
                    }}
                >
                  {heading.title}
                </a>
              </li>
          );
        })}
      </ul>
    </div>
  );
};

export default TOC;

내가 파싱하고 싶은 목차는 제목과 소제목 격으로 각각 h1, h2, h3 태그에 해당되는 요소를 파싱했다. 단순 파싱만 하면 모두 일자로(linear) 리스트가 정렬되는데, h1 -> h3 태그 순서로 padding-left 를 먹여 글의 구조를 명시적으로 나타내려 했다. 사실 h1 태그는 거의 쓸 일이 없어서 h2, h3 간의 padding-left 만 신경썼다. image4.png



2. 모바일 반응형 디자인

기존의 모바일 화면은 아래와 같다. 아찔하지 않은가? 프론트엔드에 대한 무지함이 모바일 환경은 고려하지 않은 채 css 코드를 짜다보니 이런 참담한 결과가 벌어졌다. 전반적인 구조와 컴포넌트 부터 싹 다 뜯어 고치기로 했다 😂. 우선 저 정체를 알 수 없는 주황색 동그래미 부터.. image5.png


이번에는 cursor/claude 에게 책임을 전적으로 위임했고 그 역할을 훌륭히 해내주었다. 웹과는 다르게 모바일 환경에는 추가적인 border 를 추가했는데 모바일이라는 작은 화면에서 글 목록간의 경계를 잘 잡아주는 효과를 주었다. 다만 모바일에서는 글의 카테고리를 나타내는 부분의 위치가 애매하게 느껴져 추후에는 제거할 예정이다. image7.png

헤더 컴포넌트가 블로그의 중심을 잡아준다고 느껴 구조를 아예 변경하기로 했다. 블로그 이름(huge.hoo)와 Blog/About section 을 나누었고, 개인 sns icon 을 추가하여 모바일에서도 잘 축소(?) 되도록 추가적으로 개선했다.



3. highlight 및 code-inline UI 개선

글을 쓰다보면 자연스레 더 강조하고 싶은 구문이나 단어가 등장하기 마련이다. 이 때 주로 사용하는게 strong 태그와 backtick 인데 나는 엄격한 기준을 나누고 사용하진 않는다. 그저 독자가 좀 더 중요하게 읽으면 좋겠다는 구문에 자주 사용하는 편이다. strong 태그엔 형광펜을 그은 느낌을 주고 싶었다. 노란색 하이라이터가 글의 중간 정도만 걸치게 하도록 스타일을 변경했다.
물론 누가? cursor 가!

image8.png



좋은 블꾸였다.

커밋 로그를 보니 한달 전 부터 UI 개선을 시작했더라. 한달 내내 이것만 잡진 않았지만 시간 날 때 마다 틈틈히 개선하고 뜯어 고쳤다. 조금씩 그럴듯한 블로그로 개선하는 모습을 보니 정말 내 자식같은 블로그가 태어나는 기분이었다. 블로그 자식썰 ㄷㄷ 그렇게 태어난게 지금의 블로그다. 100프로 만족하는 모습은 아니지만 그래도 개인블로그를 만들었어요! 라며 보여줄 수 있는 정도는 된 것 같다.
백엔드 개발자에게 UI 는 미지의 영역이라 느껴 어디부터 손봐야할지 모르겠다는 변명에 덮어두려고만 했다. 근데 생성형 AI 가 범람하는 시대에 언제까지 '난 프론트 못해~' 라며 피해 다닐 수 있을까. 돈 받고 파는 프로덕트를 만드는 것도 아닌데, 전문성이 조금 떨어지더라도 힘 닿는대로 프론트는 백엔드든 가리지 않고 건들여 봐야겠다. 아직 개선해야 할 점이 많지만 당장은 큰 UI 업데이트는 없을 것 같다. 성윤님이 글을 더 잘/편하게 쓸 수 있는 블로그를 만들어야 한다고, CMS 라는 키워드를 던져주었는데 이 CMS 라는 것을 다음 과제로 정하고 도입할 예정이다. 블로그의 본질은 글을 쓰는 것이니, 글을 더 편리하게 쓸 수 있는 시스템을 구축해봐야겠다.