피드로 돌아가기
Hacker NewsFrontend
원문 읽기
9x9 픽셀 Favicon에 208바이트 HTML 페이로드 저장 및 복원 구현
I Stored a Website in a Favicon
AI 요약
Context
이미지 파일의 픽셀 데이터를 단순 시각 정보가 아닌 데이터 저장소로 활용하는 가능성 탐색. 일반적인 Favicon의 용도를 벗어나 픽셀의 RGB 채널을 바이트 단위 저장 공간으로 재정의한 실험적 접근임.
Technical Solution
- TextEncoder를 활용한 HTML 텍스트의 UTF-8 바이트 시퀀스 변환
- 가변 길이 데이터 처리를 위해 페이로드 시작 지점에 4바이트 Length Header를 삽입한 설계
- RGB 각 채널(Red, Green, Blue)을 1바이트 저장소로 매핑하여 픽셀당 3바이트의 저장 밀도 확보
- 9x9 픽셀의 최소 정사각형 이미지 구조를 채택하여 총 243바이트의 가용 용량 확보
- HTML5 Canvas API의 ImageData 추출 기능을 통한 픽셀 값의 역직렬화 및 원문 복구
- 초기 렌더링을 위한 최소한의 JavaScript Bootstrap Loader를 통한 데이터 디코딩 및 DOM 교체 방식 적용
실천 포인트
- 제한된 리소스 환경에서 데이터 밀도를 높이기 위한 바이트 단위 매핑 전략 검토 - 데이터 직렬화 시 가변 길이 처리를 위한 Header 설계의 필수성 확인 - Canvas API 등 브라우저 내장 API를 활용한 바이너리 데이터 추출 가능성 분석