BlurHash 만들기·풀기

사진 한 장을 30글자 안팎의 코드로

BlurHash는 사진의 대략적인 색 분포를 짧은 글자열로 줄여 두었다가, 사진이 내려받아지기 전에 그 글자열만으로 흐린 그림을 그려 보여 주는 방법이에요. 데이터베이스나 API 응답에 사진 주소와 함께 넣어 두면 목록 화면이 회색 상자 대신 사진과 비슷한 색으로 먼저 채워져요. 이 도구는 사진을 넣으면 코드를 만들고, 코드를 넣으면 그림으로 풀어요.

어떻게 만들어지나요

사진을 긴 변 64px 이하로 줄인 뒤 sRGB 값을 선형 밝기로 바꾸고, 가로 성분 수 × 세로 성분 수만큼의 코사인 무늬(이산 코사인 변환과 비슷해요)와 얼마나 닮았는지 계산해요. 첫 성분은 평균 색이고 나머지는 밝고 어두운 무늬의 세기예요. 이 값들을 정해진 방식으로 양자화해 83가지 글자(Base83)로 적어요. 글자 수는 4 + 2 × 가로 × 세로라서 4×3이면 28글자예요. ‘자동’을 켜면 가로로 긴 사진은 가로 성분을, 세로로 긴 사진은 세로 성분을 더 많이 써요.

코드 풀기

‘코드 → 그림’ 탭에 코드를 붙여 넣으면 원하는 크기로 풀어서 보여 줘요. 대비(punch)를 올리면 무늬가 더 진해져요. 화면에는 보통 32×32 정도로 풀어서 CSS로 늘려 쓰는 게 빠르고, 평균 색 CSS만 써도 가벼운 대체 배경이 돼요. 투명한 PNG는 흰 바탕 위에 놓고 계산해요.

참고

같은 사진이라도 줄이는 방식이 조금씩 달라 다른 라이브러리와 마지막 몇 글자가 다를 수 있지만, 풀었을 때 모습은 거의 같아요. 사진의 세부 모양은 담기지 않으니 미리보기 용도로만 쓰세요.

참고한 자료

• woltapp/blurhash — 알고리즘 설명 (MIT)
• sRGB — Wikipedia (감마 변환식)