VSCode Copilot으로 블로그 리팩토링해보기, jay.log

VSCode Copilot으로 블로그 리팩토링하기

최근 Claude Code나 Cursor, Copilot, Gemini 등 여러 코딩 보조 툴 엄청 유행하고 있습니다.
저 또한 얼마나 대단한지 보고싶어 코파일럿의 에이전트 모드로 블로그를 리팩토링 하고 이를 적용시켜보려고 합니다.

우선 코파일럿을 선택한 이유는 저렴한 요금제가 매력적으로 다가왔고, 한 달 무료 체험 플랜이 있어 찍먹으로는 적합하다고 판단하여 선택하게 되었습니다.

레포지토리 분석 요청하기

모델은 GPT-5와 Claude Sonnet 4랑 고민 했었는데 개발 커뮤니티들에서 아직 Claude 쪽이 좀 더 우세하다고 해서 클로드를 모델로 선택하여 제 블로그 레포지토리를 분석해달라고 요청했습니다.

레포지토리 분석
레포지토리 분석 2

혼자서 슥슥 제 레포지토리를 읽어보더니 이런 분석결과를 보여주었습니다. 저를 칭찬해주는걸보니 엄청 똑똑한 친구군요

개선점 물어보기

이후에 개선점들이 있는지 물어보았습니다.

Copilot은 다음과 같은 개선점들을 제안해주었습니다:

성능 최적화: 이미지 최적화, 동적 임포트 적용
타입 안정성 강화: 더 엄격한 타입 정의
에러 핸들링 개선: Try-Catch 블록 추가
사용자 경험 개선: 로딩 상태, 접근성 개선
개발자 경험 개선: 환경변수 설정, 유틸리티 함수 개선

실제 리팩토링 작업 진행

이후 Copilot Agent 모드를 이용헤 개선점 중 몇개를 리팩토링을 요청했고, 작업한 내용을 아래 마크다운에 정리해서 기록해달라고도 요청하였습니다.

아래 1, 2, 3의 개선사항은 Copilot Agent 모드로 AI가 직접 기록한 작업 내용입니다.

1. 파일 시스템 캐싱 구현

첫 번째로 파일 시스템 캐싱을 구현했습니다.

구현된 기능:

파일 내용 캐싱 (fileCache): 마크다운 파일 읽기 최적화
디렉토리 목록 캐싱 (directoryCache): 카테고리 스캔 최적화
Gray Matter 파싱 캐싱 (matterCache): frontmatter 파싱 최적화
환경별 동작: 개발환경에서는 캐시 비활성화, 운영환경에서만 캐시 활성화
TTL 관리: 30분 자동 만료
캐시 관리 메서드: clearCache(), getCacheStats()

// 캐시 구현 예시
const getCachedData = <T>(cache: Map<string, CacheEntry<T>>, key: string): T | null => {
  // 개발 환경에서는 캐시 사용 안함 (실시간 반영)
  if (!IS_PRODUCTION) {
    return null;
  }
 
  const entry = cache.get(key);
  if (entry && !isExpired(entry)) {
    return entry.data;
  }
  return null;
};

2. 동적 임포트 시도 (실패 및 롤백)

MDX 관련 무거운 플러그인들을 동적으로 로드하도록 개선을 시도했습니다.

시도한 접근법:

React.lazy()와 Suspense를 활용한 지연 로딩
MDX 플러그인들을 별도 파일로 분리
로딩 스켈레톤 컴포넌트 구현

// 시도한 동적 로딩 구현
const LazyMDXRenderer = lazy(() => import('./MDXRenderer'));
 
export function MDXComponent({ content }: { content?: string }) {
  return (
    <Suspense fallback={<MDXSkeleton />}>
      <LazyMDXRenderer content={content} />
    </Suspense>
  );
}

발생한 문제들:

TypeScript 모듈 해상도 문제: ./MDXRenderer 파일을 찾지 못하는 에러
Next.js Server Components 제한: SSR 환경에서 lazy() 동작 불안정
타입 안전성 이슈: 동적 임포트 시 타입 추론 실패
복잡성 증가: 단순한 개선을 위한 과도한 구조 복잡화

실제 에러 메시지:

Cannot find module './MDXRenderer' or its corresponding type declarations.
Element type is invalid: expected a string (for built-in components)...

롤백 결정:
동적 임포트의 장점보다 단점이 더 크다고 판단하여 롤백했습니다:

MDX 플러그인들은 블로그의 핵심 기능이므로 항상 필요
플러그인 크기가 상대적으로 작음 (차트 라이브러리 등과 달리)
서버 사이드 렌더링에서는 어차피 모든 코드가 실행됨
개발 복잡성 대비 성능 이득이 미미함

교훈:

모든 최적화가 항상 좋은 것은 아님
핵심 기능에 대한 과도한 최적화는 오히려 독이 될 수 있음
단순함이 때로는 최고의 최적화

3. 이미지 최적화

Next.js Image 컴포넌트를 활용하여 이미지 성능을 개선했습니다.

개선 내용:

내부 이미지: Next.js Image 컴포넌트 사용 (자동 최적화)
외부 이미지: 기존 img 태그 유지 (호환성)
자동 크기 설정: 800x450 기본 크기로 일관성 유지

img: ({ src, alt }: any) => {
  if (src?.startsWith('/')) {
    return <Image src={src} alt={alt || ''} width={800} height={450} className='rounded-lg bg-warm-gray object-contain' />;
  }
  // 외부 이미지 처리
  return <img src={src} alt={alt || ''} className='rounded-lg bg-warm-gray object-contain' />;
};

개선 효과

성능 측면:

포스트 목록/상세 페이지 로딩 시간 단축 (캐싱 효과)
이미지 자동 최적화로 LCP(Largest Contentful Paint) 개선
~~번들 크기 최적화~~ (동적 임포트 롤백으로 미적용)

개발 경험:

개발 환경에서 실시간 반영 (캐시 비활성화)
운영 환경에서 성능 최적화 (캐시 활성화)
타입 안전성 향상
과도한 최적화 지양: 핵심 기능의 안정성 우선

사용자 경험:

이미지 최적화로 빠른 로딩
접근성 개선 (alt 텍스트 등)
안정적인 페이지 렌더링

후기

VSCode Copilot Agent 모드는 생각보다 똑똑했습니다. 단순히 코드를 생성해주는 것을 넘어서:

체계적인 분석: 프로젝트 구조를 정확히 파악
실용적인 제안: 실제 적용 가능한 개선안 제시
단계별 구현: 복잡한 작업을 단계별로 진행
에러 해결: 발생하는 타입 에러나 설정 문제들을 즉시 해결

특히 파일 시스템 캐싱 같은 경우 혼자서는 생각하기 어려웠을 텐데, AI가 제안해주고 함께 구현해나가니 훨씬 고도화된 블로그가 되었습니다.

하지만 모든 제안이 항상 옳지는 않다는 것도 배웠습니다. 동적 임포트의 경우:

AI가 이론적으로는 좋은 제안을 했지만
실제 구현 시 다양한 제약사항들이 존재했고
복잡성 증가 대비 효과가 미미했습니다

이를 통해 AI 제안을 맹목적으로 따르는 것이 아니라, 실제 환경에서 검증하고 판단하는 것의 중요성을 깨달았습니다.

앞으로도 이런 AI 도구들을 적극 활용하되, 비판적 사고와 실용적 판단을 병행해서 더 나은 개발 경험을 만들어나가야겠습니다.