브라우저 탭의 작은 아이콘에 웹사이트를 통째로 담았다고?

브라우저 탭 구석의 작은 아이콘, 사실은 데이터 창고였어요

웹사이트를 열면 탭 왼쪽에 조그만 아이콘 하나가 뜨잖아요. 그걸 파비콘(favicon)이라고 불러요. favorite(즐겨찾기)랑 icon(아이콘)을 합친 말인데요, 즐겨찾기 목록이나 브라우저 탭에서 '이 사이트가 어디다' 하고 한눈에 알려주는 16×16 픽셀짜리 작은 그림이거든요. 보통은 회사 로고나 서비스 심볼을 넣죠. 그런데 어떤 개발자가 이 작은 아이콘 파일 안에 웹페이지를 통째로 집어넣는 실험을 했어요. HTML, CSS, 자바스크립트까지 전부 이 그림 한 장에 담아버린 거예요. 파비콘이 단순한 아이콘이 아니라, 사이트 그 자체가 된 거죠.

어떻게 그림 한 장이 웹사이트가 될까

원리를 풀어볼게요. 파비콘도 결국은 그냥 이미지 파일이에요. PNG든 ICO든 내부적으로는 수많은 픽셀의 색깔 값(빨강·초록·파랑, 그리고 투명도)이 줄줄이 늘어선 숫자 덩어리거든요. 핵심 아이디어는 이 '픽셀의 색깔 값' 자리에 그림 대신 데이터를 숨겨 넣는 거예요. 이걸 스테가노그래피(steganography), 우리말로 '데이터 은닉'이라고 부르는데요, 겉보기엔 평범한 그림이지만 픽셀 하나하나의 숫자가 사실은 HTML 코드의 한 글자 한 글자를 인코딩하고 있는 거죠.

그럼 브라우저는 이걸 어떻게 다시 사이트로 펼칠까요? 순서가 재미있어요. 먼저 아주 작은 부트스트랩 자바스크립트가 페이지에 들어있어요. 이 스크립트가 자기 자신의 파비콘 이미지를 다시 불러와서, 보이지 않는 <canvas>라는 도화지에 그 그림을 그려요. 그다음 getImageData라는 함수로 캔버스에서 픽셀 값을 한 땀 한 땀 다시 읽어내요. 이렇게 꺼낸 숫자들을 원래의 글자(바이트)로 복원하면, 짜잔, HTML 문서가 다시 살아나는 거예요. 마지막으로 그 HTML을 화면에 그려주면 완성이고요.

물론 한계도 분명해요. 파비콘은 원래 작게 쓰라고 만든 거라 담을 수 있는 용량이 정말 적거든요. 그래서 이런 실험은 보통 사이트를 극단적으로 압축하고, 군더더기를 다 걷어낸 초경량 페이지에서만 가능해요. 적은 픽셀에 최대한 많은 정보를 우겨넣어야 하니까, 자연스럽게 데이터 압축 기술이 같이 등장하게 돼요.

사실 웹에는 이런 '경계를 넘나드는' 장난이 많아요

이런 발상이 완전히 새로운 건 아니에요. 비슷한 계열로 데이터 URI라는 게 있는데요, 이미지를 별도 파일로 두지 않고 data:image/png;base64,... 형태로 코드 안에 글자로 박아 넣는 방식이에요. QR코드도 결국 그림 안에 데이터를 담는 거고요. 한 파일이 이미지로도, 실행 코드로도 동시에 해석되는 '폴리글랏(polyglot) 파일'이라는 단골 기법도 있어요. URL 주소창 안에 앱 상태를 통째로 압축해 넣어서 서버 없이 공유하는 서비스들도 같은 철학이고요. 특히 이런 '극한의 용량 줄이기'는 몇 KB 안에 화려한 영상을 욱여넣는 데모씬(demoscene) 문화와 뿌리가 닿아 있어요. 실용성보다는 '플랫폼의 한계를 어디까지 비틀 수 있나'를 즐기는 거죠.

한국 개발자에게 — 장난 같지만 배울 게 많아요

실무에서 파비콘에 사이트를 담을 일은 거의 없을 거예요. 솔직히 그럴 이유도 없고요. 하지만 이 과정에 등장하는 조각들은 전부 실전 기술이에요. 캔버스로 픽셀을 직접 읽고 쓰는 법, base64 인코딩, 브라우저가 리소스를 불러오는 순서, 그리고 '코드와 데이터의 경계가 사실은 흐릿하다'는 감각 말이에요. 프론트엔드에서 이미지 처리를 다뤄본 사람이라면 바로 와닿을 거예요. 무엇보다 평소 당연하게 쓰던 파비콘 하나가 사실은 색깔 숫자의 나열이고, 그걸 거꾸로 읽으면 데이터가 된다는 걸 깨닫는 순간 웹 플랫폼을 보는 눈이 한 단계 깊어지거든요.

한줄 정리

파비콘은 그냥 아이콘이 아니라 픽셀에 담긴 데이터 덩어리고, 그걸 역이용하면 그림 한 장이 웹사이트가 될 수도 있어요. 여러분이라면 이 '데이터와 코드의 경계 허물기'를 어디에 써먹어 볼 것 같나요?