[blog - 10] 블로그 리뉴얼 V2 기획 개인 브랜딩

블로그리뉴얼정보구조검색시리즈

블로그를 한동안 운영하다 보니 구조를 다시 잡아야겠다고 느꼈다.

목표는 두 가지다.

  1. 방문자가 첫 화면에서 “이 블로그 주인이 어떤 개발자인지” 바로 이해하게 만들기
  2. 프로젝트와 글을 체계적으로 탐색할 수 있게 만들기

이번 리뉴얼은 위 목표를 기준으로 정보 구조(IA)와 주요 기능을 정리한 기획이다.

메인페이지 구성

메인페이지는 “빠른 이해 → 탐색 시작” 흐름이 핵심이다.

1) 대표 영역(Hero)

첫 화면에서 내가 누구인지, 어떤 성향으로 개발하는지 전달한다.

  • 대표 문구 예시
    • “프론트엔드 개발자 김지훈 — 문제 해결형 개발 기록”
    • “작은 불편함을 해결하는 서비스를 만드는 개발자”
  • 대표 이미지 또는 서비스 캡처(슬라이드)
  • CTA 버튼
    • About Me
    • Blog 바로가기

2) 서비스 소개 영역(포트폴리오 카드)

지금까지 만든 서비스를 카드 형태로 정리한다.
관심이 생기면 바로 상세 글이나 GitHub로 이동할 수 있게 만든다.

카드 구성 요소

  • 대표 이미지
  • 서비스 이름
  • 한 줄 설명
  • 사용 기술 스택(칩/태그 형태)
  • 링크
    • 관련 블로그 포스팅
    • GitHub 저장소

3) 자기소개 영역

자기소개는 길게 쓰지 않는다. “가치/판단 기준”만 남긴다.

  • 소개 한 줄 예시
    • “사용자가 느끼는 불편함을 빠르게 해결하는 개발자다.”
  • 간단한 이력(핵심만)
  • 운영 중인 서비스(있다면 강조)
  • 외부 링크(GitHub, LinkedIn 등)

4) 교육 및 경력 영역

교육

  • 학교
  • 스프린트 부트캠프 수료

경력

  • 회사 근무 이력
  • 인턴 경험
  • 주요 프로젝트 참여 내용(역할/성과 중심)

스킬 섹션

카테고리별로 정리해서 “한눈에” 보이게 만든다.

  • Frontend: React, Next.js, Vite, Zustand 등
  • Backend: Node.js, Express, Neon DB 등
  • DevOps / Infra: GitHub Actions, Vercel
  • Tools: Git, Figma, Postman, Notion 등

블로그 페이지 구성

1) 전체 게시글 리스트

목록에서 바로 정보가 읽히게 만든다.

  • 제목
  • 작성일
  • 태그
  • 카테고리
  • 대표 이미지(선택)

정렬/필터는 “가볍게” 제공한다.

  • 정렬: 최신순 / 오래된순
  • 필터: 태그 / 카테고리

2) 게시글 검색

검색은 제목만이 아니라 본문까지 포함한다.

  • 검색어 입력 → 제목/본문 매칭
  • 검색어 하이라이트
  • “총 N개 글이 검색됨” 표시

3) 게시글 본문 페이지

라우팅은 다음 형태로 고정한다.

  • /blog/{category}/{slug}

본문 UX에서 필요한 기능은 아래다.

  • 자동 목차(TOC)
  • 코드블록 highlight.js 적용
  • 이전 글/다음 글 이동
  • 시리즈 글이면 시리즈 순서 표시
  • md 파일을 빌드 타임에 HTML로 변환해 정적으로 제공

시리즈별 모아보기

리뉴얼에서 중요한 기능이다.
흐름이 있는 글은 시리즈로 묶어서 “따라 읽기”가 가능해야 한다.

예시

  • 메이플 헬퍼 개발기
  • 스프린트 부트캠프 기록
  • 블로그 빌드 시스템 개발기
  • 타입스크립트/리액트 학습 시리즈

각 시리즈 페이지 구성

  • 시리즈 소개 문구
  • 글 목록
  • 글 순서(읽는 순서가 고정되게)

마무리

이번 리뉴얼은 개인 브랜딩 + 정보 구조 + 탐색 기능(검색/시리즈) + 유지보수까지 한 번에 정리하는 게 목표다.

빌드 구조 개선이나 데이터 생성 방식 같은 기술적인 내용은, 실제 개발 진행에 맞춰 따로 기록한다.