블로그를 개발하고 운영하다 보면 기능 구현만큼이나 중요한 것이 **성능 최적화**와 **사용자 경험(UX)** 입니다. 이번 글에서는 제 블로그(INIRU.blog)를 개발하면서 겪었던 몇 가지 성능 문제와 이를 해결한 과정을 공유하려고 합니다. 특히 Google Lighthouse 점수에 큰 영향을 미치는 **LCP(Largest Contentful Paint)** 개선과, **다크 모드** 적용 시 발생했던 깜빡임(FOUC) 문제 해결에 집중했습니다. ## 1. LCP(Largest Contentful Paint) 개선하기 LCP는 페이지의 주요 콘텐츠가 화면에 렌더링되는 데 걸리는 시간을 측정하는 지표입니다. 보통 2.5초 이내를 '좋음'으로 평가합니다. ### 문제 상황: LCP 경고 Chrome DevTools의 Performance 탭과 Console에서 다음과 같은 경고가 떴습니다. > Image with src "..." was detected as the Largest Contentful Paint (LCP). Please add the "priority" property if this image is above the fold. 메인 페이지 상단에 위치한 "최근 글"의 썸네일 이미지가 LCP 요소로 감지되었는데, Next.js의 `Image` 컴포넌트가 이를 일반적인 방식(Lazy Loading)으로 로드하고 있어 지연이 발생한 것입니다. ### 해결: `priority` 속성 적용 Next.js의 `Image` 컴포넌트는 기본적으로 뷰포트에 들어올 때 로드되지만, 화면 상단(Above the fold)에 있는 이미지는 즉시 로드되어야 합니다. ```tsx:src/components/home/HomeContent.tsx {recentPosts.map((post, index) => ( // 상위 2개 게시물에만 priority 부여 ))} ``` ```tsx:src/components/post/PostCard.tsx export function PostCard({ post, priority = false }: PostCardProps) { return (

); } ``` 이렇게 하면 브라우저가 해당 이미지를 우선순위가 높은 리소스로 인식하여 미리 로드(Preload)하게 됩니다. ### 추가 최적화: `sizes` 속성 이미지가 화면 크기에 비해 너무 큰 해상도로 로드되는 것을 방지하기 위해 `sizes` 속성도 꼼꼼히 챙겼습니다. ```tsx:src/components/post/PostHeader.tsx ``` 컨테이너의 최대 너비(`1200px`)를 고려하여 적절한 사이즈를 지정함으로써 불필요한 대역폭 낭비를 줄였습니다. ## 2. 다크 모드 깜빡임(FOUC) 해결 `next-themes`를 사용하여 다크 모드를 구현했는데, 새로고침 시 시스템 테마와 다르게 아주 잠깐 기본 테마가 보였다가 바뀌는 현상이 있었습니다. ### 원인 `theme` 값만 의존할 경우, 클라이언트가 마운트되기 전에는 시스템 설정을 알 수 없어 기본값으로 렌더링되기 때문입니다. ### 해결: `resolvedTheme` 사용 `next-themes`가 제공하는 `resolvedTheme`을 사용하고, 컴포넌트가 마운트된 후에만 UI를 렌더링하도록 수정했습니다. ```tsx:src/components/ui/ThemeToggle.tsx export function ThemeToggle() { const { resolvedTheme, setTheme } = useTheme(); const [mounted, setMounted] = useState(false); useEffect(() => { setMounted(true); }, []); if (!mounted) { return

; // 로딩 중에는 빈 공간 유지 } const isDark = resolvedTheme === 'dark'; // ... } ``` ## 3. Deep Linking (문단 앵커) 기능 복구 글을 작성하다 보니 문단 제목(H1, H2...) 옆의 앵커 링크(#)를 클릭해도 URL이 복사되지 않는 문제를 발견했습니다. ### 원인 분석 `rehype-autolink-headings` 플러그인이 주입하는 `styles.anchor` 클래스가 렌더링 과정에서 유실되고 있었습니다. `ReactMarkdown` 컴포넌트에서 `a` 태그를 커스텀 컴포넌트(`CustomLink`)로 교체하여 사용 중이었는데, 이 `CustomLink`가 `className` prop을 제대로 전달받지 못하고 있었습니다. ### 해결 `CustomLink`가 외부에서 주입된 `className`을 무시하고 자체 스타일(`styles.link`)만 덮어쓰고 있던 로직을 수정했습니다. ```tsx:src/components/markdown/renderers/CustomLink.tsx // Before export function CustomLink({ children, href }: CustomLinkProps) { return ( {children} ); } // After export function CustomLink({ children, href, className }: CustomLinkProps) { return ( {children} ); } ``` 이제 앵커 링크가 정상적으로 `styles.anchor` 클래스를 가지게 되어, 딥링크 기능이 복구되었습니다. ## 마무리 성능 최적화는 끝이 없는 작업이지만, LCP와 같은 핵심 지표를 잡는 것만으로도 사용자 경험이 크게 개선됩니다. 앞으로도 꾸준히 모니터링하며 더 나은 블로그를 만들어갈 예정입니다.

Posts

Next.js 블로그 성능 최적화: LCP 개선과 모바일 대응