![\"성능](\"/assets/javascript.png\" "\\"성능")
Lighthouse 점수가 60점에서 95점으로 올라갔다. Core Web Vitals도 모두 “Good” 등급을 받았다. 하지만 사용자 불만은 오히려 증가했다. “앱이 이상해졌어요”, “기능이 작동하지 않아요”라는 피드백이 쏟아졌다. 이 글은 성능 점수에만 집중하다가 사용자 경험을 망친 실패의 기록이다.
\n2025년 8월, 우리 웹사이트의 Lighthouse 점수가 60점이었다. 특히 성능 점수가 낮았다. “성능을 개선하면 사용자 경험이 좋아질 거야”라고 생각하며 성능 최적화 프로젝트를 시작했다.
\n목표는 명확했다:
\n처음 한 달은 순조로웠다. 간단한 최적화만으로도 점수가 올라갔다.
\n1주차: 이미지 최적화
\n2주차: 코드 스플리팅
\n3주차: 번들 최적화
\n성공하는 것 같았다.
\n점수가 올라가자 더 욕심이 생겼다. “모든 것을 스플리팅하면 더 빨라질 거야”라고 생각했다.
\n// 모든 컴포넌트를 동적 임포트\nconst Button = lazy(() => import('./Button'));\nconst Input = lazy(() => import('./Input'));\nconst Modal = lazy(() => import('./Modal'));\n// ... 수십 개의 컴포넌트작은 컴포넌트까지 모두 스플리팅했다. 번들 크기는 줄었지만, 문제가 생겼다.
\n문제 1: 깜빡임 현상
\n문제 2: 로딩 상태의 부재
\n문제 3: 네트워크 요청 증가
\n“앱이 깜빡거려요.”\n“버튼을 눌렀는데 반응이 없어요.”\n“이전 버전이 더 나았어요.”
\n성능 점수는 올랐지만, 사용자 경험이 나빠졌다.
\n이미지 최적화도 과도하게 진행했다. 모든 이미지를 WebP로 변환하고, 품질을 최대한 낮췄다.
\n이전:
\n최적화 후:
\n파일 크기는 줄었지만, 이미지 품질이 떨어졌다.
\n“이미지가 흐릿해요.”\n“사진이 이상해 보여요.”\n“이전 버전이 더 선명했어요.”
\n성능 점수는 올랐지만, 시각적 품질이 떨어졌다.
\nFOIT (Flash of Invisible Text)를 방지하기 위해 font-display: swap을 적용했다. 하지만 예상치 못한 문제가 생겼다.
문제:
\n“텍스트가 깜빡거려요.”\n“폰트가 바뀌는 게 거슬려요.”
\n성능을 위해 “불필요한” 기능들을 제거했다.
\n제거한 기능:
\n“성능이 더 중요해”라고 생각했다.
\n“앱이 밋밋해요.”\n“반응이 없어요.”\n“이전 버전이 더 살아있었어요.”
\n성능은 좋아졌지만, 사용자 경험이 나빠졌다.
\n성능을 위해 모든 것을 캐싱했다.
\n// 모든 API 응답 캐싱\nconst cache = new Map();\nconst CACHE_TIME = 24 * 60 * 60 * 1000; // 24시간\n\nasync function fetchData() {\n const cached = cache.get('data');\n if (cached && Date.now() - cached.timestamp < CACHE_TIME) {\n return cached.data;\n }\n // ...\n}“데이터가 업데이트가 안 돼요.”\n“새로운 정보가 안 보여요.”\n“캐시를 지워야 하나요?”
\n성능은 좋아졌지만, 데이터의 신선도가 떨어졌다.
\n3개월이 지나면서 사용자 불만이 집계되었다.
\n이전:
\n최적화 후:
\n성능 점수는 올랐지만, 사용자 만족도는 떨어졌다.
\n“내가 뭘 잘못했을까?”라는 생각이 들었다. 성능을 개선했는데 왜 사용자들이 불만을 표시할까?
\n문제의 원인을 분석했다:
\n1. 사용자 중심 접근
\n2. 균형잡힌 최적화
\n3. 측정 지표 다양화
\n과도하게 최적화한 것들을 되돌렸다:
\n코드 스플리팅:
\n이미지 최적화:
\n폰트 로딩:
\nfont-display: optional 사용기능 복원:
\nLighthouse 점수:
\n사용자 만족도:
\n점수는 약간 낮아졌지만, 사용자 만족도는 오히려 올라갔다.
\nLighthouse 점수는 참고용일 뿐이다. 실제 사용자 경험이 더 중요하다. 점수가 높아도 사용자가 불만을 느끼면 의미가 없다.
\n모든 것을 최적화하려고 하지 말라. 필요한 부분만 최적화하고, 사용자 경험을 해치지 않는 선에서 진행하라.
\n성능과 사용자 경험의 균형이 중요하다. 성능만 추구하면 사용자 경험이 나빠질 수 있다.
\n개발자 환경에서만 테스트하지 말고, 실제 사용자에게 테스트하라. 실제 사용자의 피드백이 가장 중요하다.
\n한 번에 모든 것을 최적화하지 말고, 점진적으로 개선하라. 각 변경사항의 영향을 측정하고, 사용자 피드백을 수집하라.
\n성능 최적화를 진행하는 개발자들에게 조언한다:
\n과도한 최적화로 실패할 수 있다. 하지만 그 실패를 통해 균형을 배울 수 있다. 실패를 두려워하지 말고, 사용자 피드백을 받아들이라.
\n성능 최적화는 중요하다. 하지만 그것이 전부는 아니다. 사용자 경험, 기능성, 시각적 품질 등 모든 것을 고려해야 한다.
\nLighthouse 점수가 95점이어도 사용자가 불만을 느끼면 실패다. 점수가 85점이어도 사용자가 만족하면 성공이다.
\n균형이 중요하다. 성능과 사용자 경험의 균형, 최적화와 기능의 균형, 점수와 실제 경험의 균형.
\n이 경험이 다른 개발자들에게 도움이 되기를 바란다. 점수에만 집중하지 말고, 실제 사용자 경험에 집중하라.
","tableOfContents":"