개발자가 128KB로 만든 웹사이트가 주목받는 이유...아프리카 시장 맞춤형 웹 애플리케이션, 극한의 최적화로 모든 기기에서 완벽 동작

[한국정보기술신문] 한 개발자가 전체 웹 애플리케이션을 단 128KB 안에 구현한 프로젝트가 웹 개발 업계에서 화제가 되고 있다. 마이크 홀(Mike Hall)이 Medium 블로그에 공개한 이 프로젝트는 아프리카의 열악한 통신 환경에서도 완벽하게 작동하는 웹사이트를 구축한 사례다. 이 프로젝트는 제약이 오히려 더 나은 솔루션을 만들어낸다는 것을 증명했다.

아프리카 시장의 현실적 도전과제

홀 씨의 고객은 아프리카에 기반을 둔 회사였으며, 그들이 분석한 사용자 환경은 충격적이었다. 사용자들 대부분이 모바일을 사용했지만 아이폰 사용자는 거의 없었고, 안드로이드 기기들도 대부분 아이스크림 샌드위치나 진저브레드 같은 구형 버전을 사용하고 있었다. 3G와 4G 커버리지는 있었지만 매우 불안정했고, 가장 신뢰할 수 있는 연결은 EDGE였다. 무엇보다 놀라운 것은 고객의 40%가 스마트폰을 전혀 사용하지 않고 노키아 2700 같은 피처폰을 사용하고 있다는 점이었다.

개발팀은 세 가지 핵심 제약 조건을 설정했다. 첫째, 전체 애플리케이션이 HTML, CSS, 자바스크립트, 이미지, 폰트를 모두 포함해 128KB 이내에 들어가야 했다. 이는 EDGE 연결에서 합리적인 시간 내에 로딩할 수 있는 현실적인 한계였다. 둘째, 240픽셀 너비의 피처폰부터 4K 데스크톱 디스플레이까지 모든 화면 크기에서 완벽하게 작동해야 했다.셋째, 오페라 미니에서도 동작해야 했는데, 이 브라우저는 자바스크립트 실행 시간이 로딩 시 단 2초로 제한되어 있었다. 이는 클라이언트 사이드 자바스크립트를 최소화하고 서버 사이드 렌더링을 필 수로 만들었다.

시스템 폰트 활용과 웹폰트 포기

개발팀이 내린 첫 번째 중요한 결정은 웹폰트를 완전히 포기하는 것이었다. 대신 시스템 폰트를 활용하는 CSS를 작성했다. 안드로이드 사용자는 로보토 폰트를, 아이폰 사용자는 샌프란시스코 폰트를, 윈도우폰 사용자는 세고에 UI 폰트를 보게 되었다. 이 접근법은 FOUT(Flash of Unstyled Text) 문제를 완전히 해결했고, 페이지 예산에서 0바이트를 사용하는 효과를 가져왔다.

시스템 폰트 사용은 각 기기에 최적화된 큰 글리프 셋과 다양한 폰트 굵기를 제공했으며, 기기별로 약간 다른 레이아웃을 보이더라도 사용자는 일관된 경험을 할 수 있었다.

React나 Angular 같은 프레임워크들은 애플리케이션 코드를 한 줄도 쓰기 전에 128KB 예산을 초과해버렸다. 개발팀은 Whizz라는 최소한의 라이브러리를 직접 개발했다. Whizz는 DOM 쿼리, 이벤트 핸들링, AJAX 요청이라는 핵심 API만 제공했다. 가상 DOM이나 복잡한 상태 관리, 무거운 추상화는 없었다.

Whizz의 설계는 간단한 관찰에서 시작되었다. 모든 페이지의 헤더와 푸터는 동일하므로 새 페이지를 로딩할 때 이들을 다시 가져오는 것은 바이트 낭비라는 것이었다. 클릭 이벤트를 가로채서 AJAX로 부분 콘텐츠만 가져와 주입하는 방식을 사용했다.

이미지 최적화의 극한 기술

이미지는 가장 큰 도전 과제였다. 작은 래스터 이미지라도 텍스트에 비해 엄청난 바이트를 차지했다. 개발팀은 OptiPNG와 TinyPNG를 활용해 PNG 압축을 극한까지 밀어붙였다. JPEG의 경우 더욱 창의적인 접근을 사용했다. 원하는 크기의 두 배로 내보낸 후 JPEG 품질을 0까지 낮춰서 압축했다. 심한 아티팩트가 생기지만 실제 크기로 렌더링하면 눈에 잘 띄지 않았다.

진짜 승리는 SVG를 활용하는 것이었다. SVG는 XML 기반이라 압축이 잘 되고 모든 해상도에서 확장 가능했다. 하지만 Adobe Illustrator나 Inkscape 같은 벡터 도구들이 생성하는 SVG는 매우 비대했다. 개발팀은 SVG 최적화 전문가가 되어야 했다.

SVGO 도구만으로는 충분하지 않았다. 개발팀은 수많은 시간을 들여 SVG 코드를 직접 편집했다. 불필요한 그룹핑 요소들을 제거하고, 중복된 xmlns 속성들을 정리했으며, 비슷한 패스들을 하나의 요소로 합쳤다. 패스 정의는 보통 소수점 1-2자리로 반올림했다. SVG가 단순할수록 다양한 기기에서 일관되게 렌더링될 가능성이 높아지고 파일 크기도 작아졌다.

특히 브랜드 가이드에서 요구한 글자 외곽선 처리를 위해 SVG의 <defs> 요소를 활용한 영리한 해결책을 고안했다. 재사용 가능한 패스를 정의하고 두 번 참조하는 방식으로 외곽선 효과를 구현하면서도 데이터 중복을 피했다.

HTML까지 압축한 전방위 최적화

CSS와 자바스크립트 압축은 이미 표준이었지만, 128KB 예산에서는 3-4KB 절약도 의미가 있었다. 더욱이 당시 모바일 브라우저들의 gzip 지원이 불완전했기 때문에 압축 전 최적화가 중요했다. 개발팀은 HTML까지 압축했다. 윈도우 스타일 줄바꿈을 유닉스 스타일로 바꾸고, HTML 주석을 제거하며, 블록 요소 주변의 공백을 제거했다.

하지만 모든 내용이 한 줄로 연결되면 일부 브라우저가 제대로 처리하지 못해서, 각 요소의 첫 번째 속성 앞에 줄바꿈을 추가해 적절히 분리했다.

첫 데모 후 고객은 매우 만족했지만, 한 가지 문제가 있었다. 브랜드팀이 Saatchi & Saatchi와 함께 개발한 새로운 브랜드 아이덴티티에는 굵은 외곽선이 있는 특정 서체가 포함되어 있었다. 웹폰트로는 외곽선 처리가 불가능했고, 결국 제목들을 이미지로 렌더링해야 했다. 이는 기존 이미지 최적화 기술과 SVG의 <defs> 활용법을 조합한 창의적 해결책으로 극복했다.

브랜드 요구사항이 기술적 제약과 충돌할 때도 타협점을 찾아낼 수 있다는 것을 보여준 사례였다.

예상치 못한 범용성 달성

최종 제품은 가장 약한 데이터 연결과 구형 기기에서도 번개같이 빨랐다. 전시회에서 경쟁 제품들이 여전히 로딩 화면을 보여주고 있을 때 이미 로드되어 동작하고 있었다. 가장 놀라운 점은 거의 모든 기기에서 작동한다는 것이었다. 텍스트 기반 브라우저인 Lynx에서도 거의 완벽하게 동작했다. PSP와 플레이스테이션 3 브라우저, 심지어 사무실 TV의 webOS 브라우저에서도 실행되었다.

다양한 네트워크 환경에서도 훌륭하게 작동했다. 불안정한 공항 와이파이, 고속으로 달리는 기차 안, 대형 컨퍼런스 센터의 혼잡한 백홀, 심지어 다이얼업 연결에서도 사용 가능했다.

이 프로젝트의 제약 조건들은 창의성을 제한하지 않았다. 오히려 빠른 연결과 최신 기기를 가진 소수가 아닌 모든 사용자에게 작동하는 보편적 솔루션으로 창의성을 집중시켰다. 최신 아이폰을 가진 사람도 기차역 신호 가장자리나 비 오는 버스 정류장에서는 연결이 불안정하다. 제약 조건은 제품을 타협시키지 않았다. 현대적 기기 사용자는 부드러운 경험과 즉각적 피드백을 얻었고, 구형 기기 사용자는 빠르고 신뢰할 수 있는 기능을 얻었다.

피처폰 사용자들도 부가기능 없이 동일한 핵심 경험을 할 수 있었다. 제약은 다른 방식으로는 고려하지 않았을 문제 해결법을 강요했다.

홀 씨는 1993년 둠(DOOM)의 원래 릴리스가 3MB 미만이었던 반면, 오늘날 로그인 폼을 렌더링하기 위해 수십 메가바이트의 자바스크립트를 전송하는 것이 일상이 되었다고 지적했다. 그는 팀들에게 제약의 힘을 재발견하기를 제안한다. 의무가 아니라 더 나은 결과를 위해서 말이다. 이 프로젝트는 극한의 최적화가 단순히 기술적 도전이 아니라, 더 많은 사용자에게 더 나은 경험을 제공하는 포용적 설계의 실천임을 보여준다.

현재 웹 개발 업계는 이 사례를 통해 진정한 사용자 중심 설계가 무엇인지 다시 생각해보게 되었다.

한국정보기술신문 정보기술분과 강민규 기자 news@kitpa.org