[perf] 번들 이미지 WebP 변환 및 미사용 카카오 SDK 제거 by seongwon030 · Pull Request #1789 · Moadong/moadong

seongwon030 · 2026-06-27T17:09:39Z

배경

라이브(moadong.com) Lighthouse 모바일 측정에서 홈 LCP 4.7s, 동아리 상세 LCP 19.8s로 확인됨. 범인은 styled-components 런타임이 아니라(TBT ~0ms) 이미지 무게와 render-blocking 자원이었음.

변경 사항

1. 이미지 PNG → WebP (10장, q80)

홈 모바일 팝업 app-download 1002KB → 63KB (측정된 홈 LCP 요소)
/introduce mockup 9장 (feature 8 + phone) 변환
*.webp 타입 모듈 선언 추가, import 확장자만 교체(파일 base명 유지)

2. 미사용 카카오 JS SDK 제거

index.html의 render-blocking kakao.min.js 스크립트 제거 (~1.2s 블로킹 + 26KB 다운로드 제거)
호출처 0이던 죽은 initializeKakaoSDK() 함수 + orphan Window.Kakao 타입 제거
카톡 채널 URL·딥링크는 SDK가 아니므로 그대로 유지

3. 폰트 출처 preconnect

cdn.jsdelivr.net(Pretendard), fonts.googleapis.com/fonts.gstatic.com(Google Fonts) preconnect 추가

범위에서 제외 (의도적)

메인 배너: API(useGetBanners)로 관리되고 번들 이미지는 fallback 전용 → 변환 무의미하여 제외
죽은 orphan 이미지 ~8MB(banner_desktop3, Introduce.png, club-fest-2026 등 import 0곳): 삭제는 별도 논의
CDN 배너(banner.moadong.com): 백엔드/개발자포털 영역

Summary by CodeRabbit

New Features
- 이미지 자산이 더 효율적인 형식으로 전환되어 페이지 로딩 성능과 전송량이 개선되었습니다.
- 외부 리소스 연결 최적화로 초기 표시 속도가 향상되었습니다.
Bug Fixes
- 일부 이미지와 팝업 리소스가 최신 형식으로 정리되어 호환성과 표시 안정성이 개선되었습니다.
- 더 이상 사용되지 않는 외부 연동 항목이 정리되었습니다.

- 이미지 10장 PNG→WebP (홈 팝업 app-download 1MB→63KB, introduce mockup 9장) - 미사용 카카오 JS SDK 제거: render-blocking script + 죽은 initializeKakaoSDK 함수 + Window.Kakao 타입 - 폰트 출처 preconnect 추가 (cdn.jsdelivr.net, fonts.googleapis/gstatic.com)

vercel · 2026-06-27T17:09:45Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
moadong	Ready	Preview, Comment	Jun 27, 2026 5:19pm

coderabbitai · 2026-06-27T17:09:52Z

요약

index.html에서 Kakao JS SDK 스크립트 로드를 제거하고, initSDK.ts의 initializeKakaoSDK() 함수 및 window.d.ts의 Kakao 타입 선언을 삭제한다. 이미지 파일 포맷을 PNG에서 WebP로 전환하고, global.d.ts에 WebP 모듈 타입을 추가하며, preconnect 링크 3개를 추가한다.

변경 사항

Kakao SDK 제거 및 WebP 마이그레이션

Layer / File(s)	요약
Kakao SDK 제거 `frontend/index.html`, `frontend/src/types/window.d.ts`, `frontend/src/utils/initSDK.ts`	`index.html`에서 Kakao JS SDK `<script>` 태그 제거, `Window` 인터페이스에서 `Kakao: any` 선언 삭제, `initializeKakaoSDK()` 함수(환경변수 검증 및 `window.Kakao.init()` try/catch 포함) 제거.
WebP 타입 선언 및 이미지 교체 `frontend/src/types/global.d.ts`, `frontend/src/assets/images/introduce/features/index.ts`, `frontend/src/pages/IntroducePage/...`, `frontend/src/pages/MainPage/components/Popup/popupConfigs.ts`	`declare module '*.webp'` 추가 후, features 이미지 8개·phone mockup·앱 다운로드 팝업 이미지 import를 `.png`에서 `.webp`로 교체.
preconnect 및 폰트 링크 정리 `frontend/index.html`	jsdelivr, Google Fonts, fonts.gstatic.com에 대한 `preconnect` 링크 3개 추가 및 Krona One 폰트 CSS 링크 재배치.

예상 코드 리뷰 노력

🎯 1 (Trivial) | ⏱️ ~5 minutes

연관 가능성이 있는 PR

Moadong/moadong#844: index.html의 Kakao SDK 로드 및 initSDK.ts의 Kakao 초기화 로직에 직접 영향을 주는 동일 코드 영역 변경.
Moadong/moadong#1010: popupConfigs.ts의 APP_DOWNLOAD_POPUP 이미지 소스를 직접 수정하는 동일 컴포넌트 변경.
Moadong/moadong#375: index.html에서 Google Fonts(Krona One) 로딩 방식을 조정한 연관 변경.

제안 레이블

🔨 Refactor

제안 리뷰어

suhyun113
oesnuj
lepitaaar

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	번들 이미지 WebP 변환과 미사용 카카오 SDK 제거라는 주요 변경점을 정확하고 간결하게 요약합니다.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

✨ Finishing Touches

📝 Generate docstrings

Create stacked PR
Commit on current branch

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch perf/image-webp-kakao-cleanup

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands.}

reviewer-harry · 2026-06-27T17:09:56Z

Claude finished @seongwon030's task in 1m 19s —— View job

harry 리뷰 결과 ✅

성능 개선 목적이 명확하고, 변경 범위도 깔끔하게 잘 좁혀진 PR이에요. 👍

확인한 내용이에요:

이미지 WebP 전환 — base 파일명을 유지하고 import 확장자만 교체해서, index.ts·IntroSection.tsx·popupConfigs.ts 어디서도 깨지는 곳 없이 잘 연결됐어요. *.webp 모듈 선언도 global.d.ts에 인접 패턴 그대로 추가됐고요.
카카오 SDK 제거 — initializeKakaoSDK() 호출처가 정말 0곳인 것 확인했어요. window.Kakao 타입(window.d.ts)과 initSDK.ts의 죽은 함수, render-blocking 스크립트까지 일관되게 같이 지워서 orphan이 남지 않았어요.
메모이제이션/useEffect/데이터 패칭 관련 룰 위반 없음, 하드코딩된 비밀키·민감값 없음. surgical 범위도 잘 지켜졌어요.

지적은 한 가지뿐이에요 (인라인 코멘트로 남겼어요):

frontend/index.html — 카카오 스크립트 삭제 자리에서 /> </head>가 한 줄로 붙고 들여쓰기가 어긋났어요. 포맷팅만 정리해 주세요.

참고 (PR 범위 밖이라 막지는 않아요): 카카오 JS SDK를 완전히 걷어낸 만큼 frontend/CLAUDE.md·docs/claude/architecture.md·docs/claude/api.md에 남아 있는 VITE_KAKAO_JAVASCRIPT_KEY와 "initSDK.ts에서 Kakao 초기화" 설명이 이제 실제와 안 맞아요. 나중에 문서 정리할 때 같이 손보면 좋겠어요.

수고하셨어요! 포맷팅 한 줄만 정리하면 머지해도 좋을 것 같아요. 🚀
· perf/image-webp-kakao-cleanup

gemini-code-assist

Code Review

This pull request optimizes asset loading by migrating several image imports from PNG to WebP format, adding a WebP module declaration, and introducing preconnect links in index.html. Additionally, it removes the Kakao SDK script, its initialization logic, and its global type definitions. The review feedback suggests a minor formatting correction in index.html to move the </head> tag to its own line for better readability.

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.

github-actions · 2026-06-27T17:10:44Z

✅ UI 변경사항 없음

구분	링크
📖 Storybook	https://67904e61c16daa99a63b44a7-xytrwflnxw.chromatic.com/

전체 60개 스토리 · 23개 컴포넌트

리뷰 반영: 카카오 스크립트 제거로 붙어버린 /> </head> 분리

reviewer-harry · 2026-06-27T17:13:38Z

Claude finished @seongwon030's task in 1m 20s —— View job

harry 리뷰 결과 ✅

새 커밋(8d9c1380)에서 지난번에 지적했던 index.html의 /> </head> 줄바꿈·들여쓰기 문제가 깔끔하게 정리됐어요. 이제 닫는 태그가 제 줄에 잘 떨어져 있어요. 👍

이번 동기화분까지 다시 확인한 내용이에요:

포맷팅 수정 — </head>가 별도 줄로 분리되고 들여쓰기도 맞춰졌어요. 더 손볼 곳 없어요.
카카오 SDK 제거 일관성 — window.Kakao·initializeKakaoSDK()를 지운 뒤에도 남은 참조가 없는지 다시 확인했어요. 남아 있는 Kakao 흔적은 전부 카톡 브라우저 감지/딥링크(isKakaoTalkBrowser, useOpenAppFromKakao, 채널 아이콘) 쪽이라 JS SDK와 무관해요. orphan 없이 잘 정리됐어요.
WebP 전환 — base 파일명 유지하고 import 확장자만 교체해서 index.ts·IntroSection.tsx·popupConfigs.ts 모두 깨지는 곳 없어요. *.png 잔존 import도 없고, *.webp 모듈 선언도 global.d.ts에 인접 패턴 그대로 추가됐어요.
메모이제이션/useEffect/데이터 패칭 룰, 하드코딩 민감값, 변경 범위(surgical) 모두 위반 없어요.

룰 위반 없이 통과예요. 포맷팅까지 정리해 주셔서 머지해도 좋아 보여요. 수고하셨어요! 🚀

참고 (PR 범위 밖, 막지 않아요): 카카오 JS SDK를 완전히 걷어낸 만큼 frontend/CLAUDE.md·docs/claude/architecture.md·docs/claude/api.md에 남은 VITE_KAKAO_JAVASCRIPT_KEY와 "initSDK.ts에서 Kakao 초기화" 설명은 나중에 문서 정리할 때 같이 손보면 좋겠어요.
· perf/image-webp-kakao-cleanup

reviewer-harry · 2026-06-27T17:17:37Z

Claude finished @seongwon030's task in 1m 7s —— View job

harry 리뷰 결과 ✅

이번 동기화분(e6b3adea)에서 지난번 참고로 남겼던 문서 정리까지 깔끔하게 반영됐어요. 👍

확인한 내용이에요:

문서 일관성 — frontend/CLAUDE.md·docs/claude/api.md·docs/claude/architecture.md·docs/claude/features.md에서 VITE_KAKAO_JAVASCRIPT_KEY와 "initSDK.ts Kakao 초기화" 설명이 전부 제거됐어요. 코드(JS SDK 제거)와 문서가 이제 실제와 일치해요.
orphan 잔존 0 — 레포 전체에서 VITE_KAKAO_JAVASCRIPT_KEY·window.Kakao·initializeKakaoSDK·kakao_js_sdk 참조가 전부 사라진 것 확인했어요. 남은 Kakao 흔적은 카톡 브라우저 감지/딥링크 쪽뿐이라 JS SDK와 무관해요.
index.html 포맷팅 — 지난번 지적했던 </head> 줄바꿈·들여쓰기 이미 정리돼 있고, preconnect 3개도 stylesheet 앞에 잘 배치됐어요.
WebP 전환 — base 파일명 유지 + import 확장자만 교체라 index.ts·IntroSection.tsx·popupConfigs.ts 모두 안 깨지고, *.webp 모듈 선언도 global.d.ts에 인접 패턴 그대로 추가됐어요.
메모이제이션/useEffect/데이터 패칭 룰, 하드코딩 민감값, 변경 범위(surgical) 모두 위반 없어요.

룰 위반 없이 통과예요. 성능 개선 의도가 명확하고 코드·문서까지 일관되게 정리돼서 머지해도 좋아 보여요. 수고하셨어요! 🚀
· perf/image-webp-kakao-cleanup

- 외부 서비스/SDK 초기화 목록에서 Kakao 제거 (CLAUDE.md, api.md, features.md) - 미사용 VITE_KAKAO_JAVASCRIPT_KEY 환경변수 항목 제거 (CLAUDE.md, architecture.md) - OG 미들웨어의 kakaotalk-scrap 크롤러 설명은 유효하므로 유지

import 0곳 확인: banner_desktop3, banner_mobile3, Introduce, club-fest-2026

reviewer-harry · 2026-06-27T17:18:30Z

Claude finished @seongwon030's task in 1m 14s —— View job

harry 리뷰 결과 ✅

이번 동기화분(9affbade 문서 정리 + 851e032d orphan 이미지 삭제)까지 다시 확인했어요. 지난 리뷰에서 "나중에 같이 손보면 좋겠다"고 참고로 남겼던 문서 불일치까지 이번에 정리해 주셨네요. 👍

확인한 내용이에요:

문서 정리(9affbade) — CLAUDE.md·docs/claude/api.md·architecture.md·features.md에서 VITE_KAKAO_JAVASCRIPT_KEY와 "initSDK.ts의 Kakao 초기화" 설명을 모두 제거해서, 실제 코드(카카오 JS SDK 완전 제거)와 문서가 다시 일치해요. 지난 참고 사항이 깔끔하게 해소됐어요.
orphan 이미지 삭제(851e032d) — banner_desktop3·banner_mobile3·Introduce.png·club-fest-2026.png 네 장 모두 frontend/src 전체에서 import 참조 0곳인 것 확인했어요. club-fest-2026로 검색되는 부분은 전부 'promotions/club-fest-2026' 라우트 문자열(딥링크/배너 이동)이라 삭제한 이미지 파일과는 무관해요. orphan만 정확히 골라 지웠어요.
카카오 SDK 잔존 참조 0 — Kakao.init/initializeKakaoSDK/window.Kakao/VITE_KAKAO_JAVASCRIPT_KEY/kakao.min.js 모두 레포 전체에서 매치 없음 확인했어요. orphan 없이 일관되게 제거됐어요.
WebP 전환 — base 파일명 유지하고 import 확장자만 교체해서 index.ts·IntroSection.tsx·popupConfigs.ts 어디도 안 깨지고, *.webp 모듈 선언도 global.d.ts 인접 패턴 그대로 추가됐어요. 잔존 *.png import도 없어요.
메모이제이션/useEffect/데이터 패칭 룰, 하드코딩 민감값, 변경 범위(surgical) 모두 위반 없어요. orphan 삭제·문서 정리가 추가되긴 했지만 성능 클린업이라는 PR 주제 안에서 응집도 있게 묶여 있어요.

룰 위반 없이 통과예요. 지난 참고 사항까지 마저 정리해 주셔서 더 깔끔해졌어요. 머지해도 좋아 보여요. 수고하셨어요! 🚀
· perf/image-webp-kakao-cleanup

channeltalk Bot assigned seongwon030 Jun 27, 2026

github-actions Bot added 💻 FE Frontend 🚁AI claude, codex 활용 시 labels Jun 27, 2026

vercel Bot deployed to Preview June 27, 2026 17:10 View deployment

gemini-code-assist Bot reviewed Jun 27, 2026

View reviewed changes

Comment thread frontend/index.html Outdated

reviewer-harry Bot reviewed Jun 27, 2026

View reviewed changes

Comment thread frontend/index.html Outdated

[perf] index.html 닫는 head 태그 줄바꿈 정리

8d9c138

리뷰 반영: 카카오 스크립트 제거로 붙어버린 /> </head> 분리

vercel Bot deployed to Preview June 27, 2026 17:14 View deployment

seongwon030 added 2 commits June 28, 2026 02:18

[chore] 미사용 orphan 이미지 4개 삭제 (~8MB)

851e032

import 0곳 확인: banner_desktop3, banner_mobile3, Introduce, club-fest-2026

seongwon030 force-pushed the perf/image-webp-kakao-cleanup branch from e6b3ade to 851e032 Compare June 27, 2026 17:18

vercel Bot deployed to Preview June 27, 2026 17:19 View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[perf] 번들 이미지 WebP 변환 및 미사용 카카오 SDK 제거#1789

[perf] 번들 이미지 WebP 변환 및 미사용 카카오 SDK 제거#1789
seongwon030 wants to merge 4 commits into
develop-fefrom
perf/image-webp-kakao-cleanup

seongwon030 commented Jun 27, 2026 •

edited

Loading

Uh oh!

vercel Bot commented Jun 27, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented Jun 27, 2026 •

edited

Loading

Uh oh!

reviewer-harry Bot commented Jun 27, 2026 •

edited

Loading

Uh oh!

gemini-code-assist Bot left a comment

Uh oh!

Uh oh!

github-actions Bot commented Jun 27, 2026 •

edited

Loading

Uh oh!

Uh oh!

reviewer-harry Bot commented Jun 27, 2026 •

edited

Loading

Uh oh!

reviewer-harry Bot commented Jun 27, 2026 •

edited

Loading

Uh oh!

reviewer-harry Bot commented Jun 27, 2026 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

seongwon030 commented Jun 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

배경

변경 사항

1. 이미지 PNG → WebP (10장, q80)

2. 미사용 카카오 JS SDK 제거

3. 폰트 출처 preconnect

범위에서 제외 (의도적)

Summary by CodeRabbit

Uh oh!

vercel Bot commented Jun 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai Bot commented Jun 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

요약

변경 사항

예상 코드 리뷰 노력

연관 가능성이 있는 PR

제안 레이블

제안 리뷰어

Uh oh!

reviewer-harry Bot commented Jun 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

harry 리뷰 결과 ✅

Uh oh!

gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

Uh oh!

github-actions Bot commented Jun 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ UI 변경사항 없음

Uh oh!

Uh oh!

reviewer-harry Bot commented Jun 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

harry 리뷰 결과 ✅

Uh oh!

reviewer-harry Bot commented Jun 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

harry 리뷰 결과 ✅

Uh oh!

reviewer-harry Bot commented Jun 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

harry 리뷰 결과 ✅

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

seongwon030 commented Jun 27, 2026 •

edited

Loading

vercel Bot commented Jun 27, 2026 •

edited

Loading

coderabbitai Bot commented Jun 27, 2026 •

edited

Loading

reviewer-harry Bot commented Jun 27, 2026 •

edited

Loading

github-actions Bot commented Jun 27, 2026 •

edited

Loading

reviewer-harry Bot commented Jun 27, 2026 •

edited

Loading

reviewer-harry Bot commented Jun 27, 2026 •

edited

Loading

reviewer-harry Bot commented Jun 27, 2026 •

edited

Loading