# 128KB 제약 속 웹 애플리케이션 개발 사례 > Clean Markdown view of GeekNews topic #22788. Use the original source for factual precision when an external source URL is present. ## Metadata - GeekNews HTML: [https://news.hada.io/topic?id=22788](https://news.hada.io/topic?id=22788) - GeekNews Markdown: [https://news.hada.io/topic/22788.md](https://news.hada.io/topic/22788.md) - Type: news - Author: [baeba](https://news.hada.io/@baeba) - Published: 2025-08-29T10:14:59+09:00 - Updated: 2025-08-29T10:14:59+09:00 - Original source: [medium.com/@mikehall314](https://medium.com/@mikehall314/im-more-proud-of-these-128-kilobytes-than-anything-i-ve-built-since-53706cfbdc18) - Points: 20 - Comments: 2 ## Summary **128KB 용량 제약**과 **Opera Mini, 피처폰 등 극한 환경**에서의 웹 애플리케이션 개발 사례를 통해, 성능과 **보편적 접근성**이라는 두 가지 목표를 동시에 달성하는 혁신적 방법론을 제시합니다. **웹폰트·프레임워크 제거**, 자체 개발 **경량 라이브러리 활용**, 그리고 **이미지·코드 최적화** 등 과감한 경량화 전략을 적용해, 저사양 기기와 초저속 네트워크에서도 즉시 로딩 및 다양한 디바이스 호환성을 확보합니다. 이러한 접근법은 단순히 제약 극복을 넘어, 본질적 기능에 집중한 **범용적 설계 철학**의 가치를 강조하며, 현대 개발 환경에서도 **최적화와 혁신**의 인사이트를 제공합니다. ## Topic Body ##### 요약 개요 **128KB 제약 속 웹 애플리케이션 개발 사례** * 디자인과 접근성은 양립 불가하다는 통념 반박 * 극한 제약(128KB, Opera Mini, 피처폰 환경)에서 혁신적 해결책 도출 * 웹폰트 제거, 프레임워크 배제, 자체 경량 라이브러리 개발 * 이미지 최적화(TinyPNG, MozJPEG, SVG 정제) 및 전방위 미니파이 적용 * 제약이 오히려 보편적 호환성과 성능 최적화로 이어짐 --- ##### 서론: 문제 인식과 제약의 의미 * 일부 디자이너는 WCAG 접근성과 심미성을 양립 불가로 인식 * 저자는 제약을 창의적 설계의 토대라고 주장 * 아프리카 열악한 통신·기기 환경을 기반으로 극단적 제약 설정 --- ##### 본론 ###### 1. 프로젝트 제약 조건 * **128KB 페이지 예산**: HTML·CSS·JS·이미지 포함 전체 제한 * **극한 반응형 설계**: 240px 피처폰부터 4K 데스크톱까지 지원 * **보편적 호환성**: Opera Mini 기반, JS 최소화 및 서버 렌더링 필수 ###### 2. 기술적 선택 * **웹폰트 제거**: 시스템 폰트 활용 → 용량 절약·FOUT 제거·일관성 확보 * **프레임워크 배제**: React 등 불가 → 자체 경량 라이브러리 *Whizz* 개발 * 기능: DOM 쿼리, 이벤트 처리, AJAX * 불필요한 재로드 방지, 부분 HTML 갱신 방식 적용 ###### 3. 이미지 최적화 전략 * **PNG**: TinyPNG로 최대 압축 * **JPEG**: MozJPEG 사용, 해상도 이중 출력 + 품질 0 처리 후 축소 렌더링 * **SVG**: 압축률·확장성 활용, PNG 폴백 제공 * **SVG 최적화**: 불필요 메타데이터, 중복 그룹, 정밀도 과도한 좌표 제거 ###### 4. 추가 최적화 기법 * **전방위 미니파이**: CSS·JS·HTML 모두 적용, gzip 미지원 브라우저 고려 * **브랜드 요구 대응**: 특정 서체 효과를 이미지·SVG 조합으로 재현 * **<defs>·<use> 활용**: SVG 경량화, 외곽선 효과 구현 ###### 5. 성과와 검증 * **극저속 네트워크에서도 즉시 로딩** * **다양한 기기 호환성 확보**: Lynx, PSP, 구형 피처폰, TV 브라우저까지 작동 * **사용자 경험 차별화**: 최신 기기에서는 부드럽고, 구형 기기에서도 안정적 ##### 결론: 제약이 만든 혁신 * 제약은 창의성을 억제하지 않고 **보편적이고 견고한 설계**로 이끎 * 최신 기기 사용자도, 구형 피처폰 사용자도 동일 핵심 기능 경험 가능 * **본질적 기능 중심의 설계 철학** 확립 → “제약은 족쇄가 아니라 혁신의 기반” * 현대 개발에 주는 교훈: 무제한 자원보다 **제한 속 최적화**가 더 나은 결과를 낳음 ## Comments ### Comment 43092 - Author: baeba - Created: 2025-08-29T10:15:33+09:00 - Points: 1 한글 번역 사이트 입니다. https://emewjin.github.io/proud-128-kb ### Comment 43098 - Author: honglu - Created: 2025-08-29T12:23:40+09:00 - Points: 1 - Parent comment: 43092 - Depth: 1 번역 고맙읍니당..