500바이트 ASCII 세계 지도는 “작은 코드로 어디까지 할 수 있나”를 보여주는 실험이다. 하지만 더 중요한 포인트는 지도 자체가 아니라 문제를 어떤 형태로 바꾸면 작아지는가다.
Iwo Kadziela는 압축된 지도 데이터 445바이트만으로 알아볼 수 있는 ASCII 세계 지도를 만들었다.1 약 10년 전 JS1k 대회에서 1KB 미만의 작은 jsfiddle 클론을 만들었던 경험처럼, 이 작업도 바이트 단위의 제약 안에서 표현 방식을 다시 설계한 사례에 가깝다.1
세계 지도를 “그리지” 않고 “배치”하기
가장 먼저 떠올릴 수 있는 방법은 SVG나 canvas로 대륙 윤곽을 그리는 것이다. 하지만 세계 지도는 해안선이 복잡하다. SVG나 canvas 경로로 표현하면 좌표 하나하나가 바이트를 차지하고, 너무 단순화하면 더 이상 세계 지도처럼 보이지 않는다.1
그래서 선택한 방향은 <pre> 태그 안에 문자를 배치하는 ASCII 지도였다. 초기 구현은 작은 문자들로 육지와 물을 구분해 렌더링하는 방식이었다.1 여기서 핵심은 정교한 벡터 좌표 대신, 고정폭 문자 격자 위에 “어디가 육지인가”만 표현하는 것이다.
이 접근은 지도를 덜 정확하게 만드는 대신, 데이터를 훨씬 단순한 문자열 문제로 바꾼다.
압축이 잘되는 형태로 바꾸기
용량을 줄인다고 해서 무조건 문자를 덜 쓰면 되는 것은 아니다. 예를 들어 대륙 내부를 비우고 윤곽선만 남기면 겉보기에는 더 적은 문자를 쓰는 것처럼 보인다. 하지만 압축 관점에서는 작은 공백과 문자가 자주 바뀌면서 오히려 불리해질 수 있다.
반대로 채워진 육지는 같은 문자가 길게 반복된다. deflate 같은 압축 방식은 이런 반복을 잘 줄인다. 최종 구현에서는 육지를 *로 표현하고 불필요한 여백을 잘라내면서, 보이는 지도 텍스트는 8,523바이트였지만 deflate-raw 압축 후 지도 데이터는 445바이트까지 줄어들었다.1
즉 이 사례의 핵심은 “가장 적은 글자로 보이는 지도”가 아니라, “압축했을 때 가장 작아지는 지도”를 찾는 데 있다.
브라우저 기능까지 설계에 포함하기
이 구현이 흥미로운 또 다른 이유는 브라우저의 기본 기능을 적극적으로 활용한다는 점이다. 예시 JavaScript 코드는 fetch()로 data: URI를 읽고, DecompressionStream('deflate-raw')를 호출해 압축 데이터를 바로 푼다.2
별도의 압축 해제 라이브러리를 넣지 않아도 되기 때문에, 지도 데이터 자체를 500바이트 아래로 유지할 수 있다. 물론 전체 HTML은 태그와 로딩 코드 때문에 더 크지만, 핵심 데이터는 445바이트에 머문다.3
이는 “작게 만들기”가 데이터만의 문제가 아니라는 점을 보여준다. 실행 환경이 이미 제공하는 기능을 어디까지 활용할 수 있는지도 설계의 일부다.
배울 점: 줄이려면 표현부터 바꿔라
500바이트 ASCII 세계 지도에서 얻을 수 있는 실용적인 교훈은 단순하다. 최적화는 마지막에 압축을 적용하는 일이 아니다. 먼저 데이터를 압축이 좋아하는 구조로 바꾸는 일이다.
웹 성능에서도 같은 판단이 필요하다. 이미지, JSON, UI 상태, 로그 데이터를 줄이고 싶다면 먼저 물어야 한다.
꼭 이 형태로 저장해야 하는가?
좌표나 속성을 모두 보존해야 하는가?
반복되는 구조로 바꿀 수 있는가?
실행 환경이 이미 제공하는 기능을 활용할 수 있는가?
좋은 최적화는 더 강한 압축 알고리즘에서만 나오지 않는다. 때로는 문제를 다시 표현하는 것만으로도 훨씬 큰 차이를 만든다.
1Building a World Map with only 500 bytes
이 노트는 보도·비평·교육·연구 목적으로 작성되었습니다. 저작권 문의가 있으시면 에서 알려주세요.