AI도 몰랐던 49점짜리 코드의 비밀

Writer: YZ | 프론트개발 - 상담콜 AI

블룸에이아이의 AI 전화상담 서비스 ‘상담콜’의 성능 개선을 진행하며 겪은 아주 중요한 ‘반전’에 대해 이야기해 드리고자 합니다.

프론트 개발자로서 dev와 build 환경의 성능 차이를 직접 측정해 봤는데, 생각보다 훨씬 드라마틱 하더라구요. 머리로는 알았지만, 숫자로 보고 '헉!' 했던 경험입니다.

AI 덕분에 기본의 중요성을 다시 한번 제대로 깨달았습니다. 우리가 무심코 넘길 수 있는 '기본'이 실제 성능에 어떤 영향을 미치는지 궁금하신 분들은 꼭 읽어보세요!

AI와 함께 헛수고할 뻔한 이야기

문제의 시작 - 49점짜리 로그인 페이지

모든 것은 상담콜 서비스의 첫인상인 ‘로그인 페이지’ 성능을 점검하면서 시작됐습니다. 구글 웹 성능 측정 도구 Lighthouse의 결과는 충격적이었죠.

단 49점.

사용자가 서비스를 만나기도 전에 답답함을 느낄 수 있는 그야말로 ‘낙제점’이었습니다.이대로는 안 되겠다고 생각해, 요즘 최고의 전문가인 AI에게 도움을 청했습니다.

AI에게 진단을 맡기다

사람이 정확한 진단을 내리려면 CT나 MRI가 필요하듯, AI에게도 진단 차트가 필요합니다. 저는 Lighthouse 리포트의 모든 데이터를 담은 JSON 파일을 준비해 AI에게 진단을 요청했습니다.

과정은 다음과 같습니다.

✅ STEP 1: Lighthouse JSON 파일 다운로드

이 과정은 아주 간단합니다. Chrome 개발자 도구(F12)의 Lighthouse 탭에서 분석을 실행합니다. 리포트 우측 상단의 점 세 개(...) 메뉴를 클릭하고 'Save as JSON'을 선택하면 끝!

✅ STEP 2: AI에게 '족집게 과외' 요청하기

이제 준비된 진단 차트(JSON 파일)를 AI에게 전달하며, 아래와 같이 '역할'과 '목표'를 명확하게 부여하는 프롬프트를 작성했습니다.

잠시 고민하던 AI는 이내 막힘없이 해결책을 쏟아내기 시작했습니다. 이미지 최적화부터 빌드 압축, 코드 분할까지, 그야말로 완벽한 분석이었습니다.

[실제 사용한 프롬프트]

[역할 부여]

너는 15년 차 시니어 프론트엔드 개발자이자 웹 성능 최적화 전문가야.

[목표 제시]

내가 만든 로그인페이지(/auth/login)의 Lighthouse 성능 점수를 높이는 것이 목표야.

현재 성능 점수는 49점인데, 90점 이상으로 올리고 싶어.

실제 적용할 수 있는 코드 예시(Before/After)를 함께 제시해 줘

[Lighthouse 리포트 핵심 내용]

아래는 내 로그인 페이지의 Lighthouse 리포트에서 복사한 'Opportunities'와 'Diagnostics'

항목이야.

Diagnostics

Largest Contentful Paint element 26,750 ms

Preload Largest Contentful Paint image Est savings of 21,930 ms

Minimize main-thread work 3.2 s

Use HTTP/2 2,057 requests not served via HTTP/2

Enable text compression Est savings of 14,965 KiB

Minify JavaScript Est savings of 13,365 KiB

Reduce unused JavaScript Est savings of 4,265 KiB

Remove duplicate modules in JavaScript bundles Est savings of 515 KiB

Serve images in next-gen formats Est savings of 334 KiB

Properly size images Est savings of 74 KiB

Page prevented back/forward cache restoration 1 failure reason

Image elements do not have explicit width and height

Minify CSS Est savings of 17 KiB

Avoid serving legacy JavaScript to modern browsers Est savings of 7 KiB

Reduce unused CSS Est savings of 15 KiB

Avoid enormous network payloads Total size was 22,511 KiB

[수정 파일 경로 안내]

src/pages/app/auth/login-page.tsx 경로에 로그인 페이지 관련 코드가 들어가 있어.

이 페이지에서 쓰이는 컴포넌트들도 참고해.

[Lighthouse 리포트 분석 요약]

Lighthouse 리포트를 보니 가장 큰 문제는 아래와 같아.

1. **LCP(Largest Contentful Paint) 이미지 로딩 지연:** 예상 절약 시간 21,930ms
2. **텍스트 리소스 압축 미적용:** 예상 절약 시간 14,965 KiB
3. **JS/CSS 최소화(Minify) 및 미사용 코드 미제거**

위 코드와 Lighthouse 분석 결과를 바탕으로, 아래 질문에 대해

구체적인 코드 수정안을 제시해줘.

1. LCP 이미지 로딩 속도를 개선하기 위해 어떻게 해야 하는지 알려줘.
2. 로그인 페이지 컴포넌트에서 이미지를 **WebP와 같은 차세대 형식**으로 효율적으로
    
    사용하려면 기존 `<img>` 태그를 어떻게 수정해야 하는지,
    
    `<picture>` 태그를 사용한 예시를 보여줘.
    
3. `vite.config.js` 파일에 **텍스트 압축(gzip/brotli)과 JS/CSS 최소화(Minify) 설정을 추가**하려면 어떤 플러그인을 설치하고 코드를 어떻게 수정해야 하는지 알려줘.
    
    각각의 해결책에 대해, **수정 전(Before)과 수정 후(After) 코드를 명확히 비교**해서 보여주고, 왜 그렇게 해야 하는지 기술적인 이유도 함께 설명해줘.
    

[참고 파일 경로 안내]

lighthouse 분석 결과에 관련된 파일은

c:\\workspace\\callcenter-frontend-migration\\docs\\reports\\login_lighthouse.json

c:\\workspace\\callcenter-frontend-migration\\docs\\reports\\lightHouse.png

를 참고해.

[AI (Claude CLI) 가 분석한 결과]

"가장 큰 문제는 이미지 로딩입니다. <img> 태그를 수정하고 WebP 포맷을 사용하세요." "JavaScript와 CSS 파일들을 압축해서 파일 크기를 줄여야 합니다." "불필요한 코드를 제거하고, 코드를 여러 개로 잘게 쪼개서 로딩 속도를 높이세요.”

• “이미지를 WebP 포맷으로 전환하세요.”

• “CSS/JS 파일을 압축해 파일 크기를 줄이세요.”

• “불필요한 코드를 제거하고 코드 스플리팅을 적용하세요.”

대반전 - 잠깐, 이 코드…이미 [00점]이라고?

AI가 알려준 복잡한 설정들을 하나씩 적용하며 지루한 최적화 작업을 시작하려던 순간, 문득 이런 생각이 스쳤습니다.

‘지금 내가 보고 있는 이 49점짜리 화면, 사용자들이 보는 진짜 화면이 맞나?’

개발자들은 보통 코드를 쉽게 수정하고 결과를 바로 확인하기 위해 ‘개발(Development) 서버라는 특별한 환경에서 작업합니다. 편집과 수정이 쉽지만 최적화는 안 되어 있는데요.

저는 이 개발 서버에서 점수를 측정했던 겁니다!

반면 실제 사용자들이 접속하는 환경과 똑같은 프로덕션(Production) 빌드는 코드 압축과 최적화가 자동으로 적용됩니다.

혹시나 하는 마음에, 코드는 단 한 줄도 건드리지 않고 프로덕션 버전으로 다시 점검해봤습니다.

그리고 그 결과는…

94점!

AI가 고쳐야 한다던 그 코드는 사실 이미 90점이 넘는 우등생이었던 겁니다.

문제 정의는 개발자가 해야

어떻게 49점짜리 코드가 94점이 된 걸까요?

바로 최신 개발 도구(Vite)가 매우 똑똑하기 때문이었습니다.

• 개발 서버 (49점) : 자동차 정비소처럼, 언제든 부품을 쉽게 갈아 끼울 수 있도록 모든 게 열려있는 상태입니다. 코드 압축 X 최적화 X

• 프로덕션 서버 (94점) : 잘 튜닝된 경주용 자동차처럼, 최고의 성능을 내기 위해 개발자가 작성한 코드를 자동으로 압축하고 최적화해서 내보내줍니다.

결론적으로, AI가 제안했던 전문가 수준의 최적화 기법들은, 이미 제가 사용하는 개발 도구가 ‘npm run build’라는 명령어 한 줄로 대부분 자동으로 처리해주고 있었던 것들이었습니다.

만약 제가 이 사실을 모른 채 AI의 분석만 믿고 작업을 시작했다면, 이미 최적화된 코드를 또 손보느라 시간만 낭비했을 겁니다. 몇 시간, 어쩌면 며칠을 말이죠.

“AI는 뛰어난 해결사이지만, 정확한 문제를 정의하는 것은 결국 사람의 몫이다.”

이번 경험에서 배운 가장 큰 교훈입니다.

AI 덕분에 웹 성능 최적화의 모든 것을 깊이 있게 학습할 수 있었고, 동시에 제가 사용하는 도구를 더 깊이 이해하며 '똑똑하게, 헛수고하지 않는 법'을 배울 수 있었습니다.

AI와 함께 일하기 위해 올바른 질문을 던지는 일이 얼마나 중요한지 깨닫게 된 소중한 경험이었습니다.