기술 블로그 운영 로그

시작하며

기술 블로그를 운영하면서 겪은 사소하지만 의미 있는 경험들을 기록합니다.

새로운 기능을 추가하거나 운영 중 마주한 이슈를 해결하는 과정을 남기며, 시간이 지날수록 블로그가 어떻게 발전해가는지 기록하고자 합니다.

같은 고민을 하시는 분들께 도움이 되길 바랍니다.

2025-08-10 방문자 수 집계 기능 개선

문제

• 방문자 수 집계 기능(운영 환경 내 24시간 첫 방문 시 1회 증가)을 추가했으나, 배포 직후 방문자 수가 10회 이상 비정상적으로 증가하는 현상 발생

원인

• Vercel 배포 직후 vercel bot이 페이지 분석을 위해 여러 번 접속
• middleware에서 봇 트래픽까지 방문자로 기록됨

개선

• User-Agent 기반 bot 필터링 추가
• 방문자 수, 조회수 로직 모두 fire and forget 방식 적용 → 메인 로직 속도에 영향 없음
• 방문자 수, 조회수를 불러오는 함수 1분간 캐시하여 요청 최소화(유저가 보는 카운트는 일부 차이 발생)

bot을 제외하는 로직 추가하였고 배포 직후 방문자 수나 조회수 늘어나지 않는 것 확인

2025-08-11 페이지 이동 로딩 개선

문제

• Tutorial 페이지는 이미지가 많아 첫 진입 시 로딩 상태 표시가 없어 멈춘 것처럼 보임

개선

• 페이지 이동 시 로딩 상태 UI 추가
• 이미지에 lazy loading 적용

결과

• 사용자 경험 개선 → 클릭 후 바로 피드백 제공
• 페이지 로딩 중에도 “동작 중”임을 명확히 전달

2025-08-16 구글 검색 결과 노출 문구 개선

문제

• 블로그 검색 시 메인 페이지의 글 리스트나 UI 구성 요소가 검색 결과의 스니펫으로 노출되어, 잘못된 내용이 표시됨
• 아래 이미지는 메인 페이지가 아닌 포스트 중 일부 내용

개선

• data-nosnippet HTML 속성을 적절한 <section> 태그에 추가하여, 해당 영역이 검색 결과 스니펫에 사용되지 않도록 설정

export default async function Home() {
	...
  return (
    <main className="px-4 py-16">
      <div className="mx-auto max-w-6xl">
        <header className="mb-20 text-center">
            <h1 className="mb-6 text-4xl font-bold tracking-tight whitespace-nowrap text-orange-400 sm:text-5xl md:text-6xl">
              MECH2CS 기술블로그
            </h1>
            <h2 className="mx-auto mb-4 max-w-3xl text-lg leading-relaxed text-neutral-400">
              개발 과정에서 마주한 문제들과 해결책을 공유합니다. 실무에서 겪은
              다양한 기술적 도전과 그 해결 방법, 최적화 기법, 그리고 효율적인
              개발 패턴을 정리한 기술 블로그입니다.
            </h2>
        </header>
 
        {/* POSTS SECTION */}
        <section data-nosnippet>
					...
        </section>
 
        {/* TUTORIALS SECTION */}
        <section data-nosnippet>
					...
        </section>
      </div>
    </main>
  )
}
 

결과

블로그 메인 페이지 검색 시, 글 리스트가 스니펫에 노출되는 문제 방지

사용자에게 더 정확한 요약 정보가 전달될 수 있게 되어, 클릭률(CTR) 향상에도 긍정적인 영향 기대

2025-08-17 정적 페이지 적용

문제

• /posts/[slug], /tutorials/[slug] 같은 페이지가 동적 라우팅 기반
• 실제 글 데이터는 /app/data/posts, /app/data/tutorials 내 관리되고 있어 빌드 시점에 이미 확정 가능
• 불필요하게 서버에서 동적 페이지 생성 → 첫 로드 속도 저하

개선

• generateStaticParams 적용
• 기존 동적 라우팅 페이지를 정적 SSG 페이지로 변환

결과

• 체감 속도 확실히 개선
• Lighthouse 점수는 큰 변화 없음 → 원인은 무료 서버 환경 + S3 이미지 직접 접근 (CDN 미사용)으로 추측됨
• 추후 이미지 CDN 및 캐시 전략 개선 검토 예정

> next build
 
# 변경 전
└ ƒ /posts/[slug]          Dynamic SSR
└ ƒ /tutorials/[slug]      Dynamic SSR
 
# 변경 후
└ ● /posts/[slug]          Static (SSG)
└ ● /tutorials/[slug]      Static (SSG)

2025-08-23 UI 개선 업데이트

변경 사항

• 좌측 메뉴 개선: "전체 게시글 카테고리" 제목 추가로 사용자 인지성 향상
• 우측 목차 개선: 목차 제목 크기를 키워 가독성 개선
• 날짜 표시 개선: 모든 페이지에서 업데이트 날짜 우선 표시 + 새로고침 아이콘 추가
• 태그 디자인 개선: 포스트/튜토리얼 헤더에서 # 기호 제거하여 깔끔한 디자인 적용
• 튜토리얼 구조 개선: "이런 것을 만들 수 있습니다" 섹션 추가로 튜토리얼 결과물을 먼저 보여줌
• 이미지 스타일 개선: 모든 MDX 콘텐츠 내 이미지에 얇은 바깥선 추가로 시각적 구분감 향상

결과

• 업데이트된 콘텐츠의 최신성을 명확하게 전달
• 개선된 UI

2025-08-26 조회수 로직 개선

문제

• 방문자 수 대비 포스트/튜토리얼 조회수가 비정상적으로 낮게 집계됨
• middleware에 로그를 추가해 확인한 결과, 첫 페이지 진입 이후 다른 포스트/튜토리얼로 이동할 때 middleware가 호출되지 않는 현상이 발생함

원인

• 정적 페이지 적용으로 인해 Next.js에서 포스트/튜토리얼 본문 페이지를 사전 생성
• 사전 생성된 페이지는 HTML, JS, CSS 형태로 캐싱되며, 첫 방문 이후에는 브라우저 캐시가 사용됨
• 리스트 페이지에서 prefetch 기능으로 다른 포스트/튜토리얼 데이터가 미리 로드됨
• 따라서 실제 해당 페이지 방문 시 middleware가 호출되지 않아 조회수 집계 로직이 실행되지 않음

1차 개선

• 조회수 집계 로직을 middleware → 클라이언트 사이드 렌더링(CSR) 으로 전환
• 조회수 UI는 Skeleton UI만 적용

1차 개선 후 발생한 추가 문제점

• CSR 적용으로 코드 복잡도가 증가
• 페이지 이동 시 불필요한 API 호출이 다수 발생
• 불필요한 호출을 방지하기 위한 추가 코드로 복잡도가 더욱 상승
• iOS Safari 환경에서 방문자 수가 집계되지 않는 문제 확인
  • 방문자 수 집계에 visit이라는 쿠키 키를 사용
  • Safari의 ITP(Intelligent Tracking Prevention) 정책에 의해 visit, id 등 단순한 이름의 쿠키는 추적 쿠키로 간주되어 차단됨

2차 개선

• TanStack Query를 적용하여 블로그 첫 방문 시 방문자 수 및 조회수를 한 번만 조회
• 이후에는 API 재호출 없이 setQuery를 통해 클라이언트 상태만 갱신 → 조회수/방문자 수 증가 반영 (낙관적 업데이트 - Optimistic Update)
• 쿠키 키 이름을 visit → site_session 으로 변경하여 Safari ITP 회피

결과

• 조회수가 정상적으로 증가하는 것 확인
• 첫 방문 시에만 API 호출이 발생하도록 개선되어, 불필요한 호출 제거 및 코드 단순화 달성