Insights
AI가 자동으로 큐레이션·번역·정리하는 기술 동향 피드입니다.
파비콘의 RGB 픽셀 데이터를 저장소로 활용하여 작은 HTML 페이로드를 인코딩하고 복원하는 실험적 기술을 소개합니다. Canvas API를 통해 픽셀 값을 바이트로 재구성하여 웹사이트 콘텐츠를 추출하는 과정을 다룹니다.
AI 자동 생성 콘텐츠
본 콘텐츠는 RSS: GeekNews (한국어)의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기<h1>Website in a Favicon</h1>
<p>
Everything you're reading right now was decoded from favicon pixels.
</p>
TextEncoder로 HTML을 UTF-8 바이트로 변환함
페이로드 길이를 담은
4바이트 헤더를 앞에 붙임
남는 픽셀이 있을 수 있어 길이 헤더로 실제 페이로드의 끝을 구분함
첫 번째 바이트는 첫 픽셀의 red 채널, 두 번째 바이트는 green, 세 번째 바이트는 blue에 저장됨
이후 픽셀도 같은 순서로 채워 HTML 문서 전체가 색상값으로 들어감
결과 이미지는 시각적으로 노이즈처럼 보임
데모의 최종 크기는 매우 작음
페이로드:
208 bytes
헤더 포함 총량:
212 bytes
필요한 픽셀:
71 pixels
이미지 크기:
9×9 pixels
용량:
239 bytes
사용률:
87% {p:87}
복원은 브라우저 기능만으로 처리됨
favicon을 이미지로 로드함
이미지를 canvas에 그림
Canvas API로 모든 픽셀을 읽음
RGB 값을 바이트 배열로 재구성함
처음 4바이트에서 페이로드 길이를 읽음
페이로드를 추출하고 UTF-8 텍스트로 디코딩함
데모 사이트는
"Render Website"
버튼을 누르면 favicon을 읽고 HTML을 복원한 뒤 페이지 내용을 교체함
가장 큰 제약은 favicon이 웹사이트 전체를 혼자 실행하지 않는다는 점임
favicon에는 웹사이트의
콘텐츠가 들어 있음
디코딩을 위한 작은 JavaScript 로더가 별도로 필요함
JavaScript가 없으면 favicon은 웹사이트 콘텐츠를 담은 PNG일 뿐임
실용성은 낮음
저장 가능한 데이터가 매우 작음
페이지가 JavaScript로 부트스트랩되어야 함
작은 HTML 문서를 배포하는 더 나은 방법이 많음
대안으로는 SVG favicon에 markup을 직접 넣기, PNG의
tEXt
, zTXt
, iTXt
comment chunk 사용, 여러 해상도 아이콘을 담을 수 있는 ico
파일 형식 사용이 있음