simpler24 로고
블로그 목록
HDR 게인맵 JPEG 이미지처리 웹개발

뭔가 이상하게 밝다 싶은 흰색 soverybright

2026년 08월 25일 11

흰색보다 밝은 흰색은 없죠. #FFFFFF가 끝이니까요.

그런데 soverybright.com이라는 도구가 그 위를 쓰는 방법을 공개했습니다. 이미지의 특정 부분만 일반 흰색보다 최대 7.5배 밝게 보이게 만드는 방식이에요. 링크드인에서 유독 혼자 빛나는 로고를 보신 적 있다면 그게 이겁니다.

먼저 밝혀둘 게 있어요. HDR 모니터가 없어서 빛나는 걸 눈으로 확인하지 못했습니다. 대신 할 수 있는 걸 했어요. 예제 파일을 받아 안을 들여다보고, 서버에 올렸다 내려받고, 흔한 이미지 처리에 통과시켜봤습니다.

soverybright.com 첫 화면. 로고를 올려 HDR JPEG를 내려받는 도구 소개와 흰 사각형 두 개 비교 카드가 보인다

2026년 8월 25일 캡처. 로고를 올리면 어느 색을 빛나게 할지 고르고 HDR JPEG를 내려받는 구조입니다.

한 파일에 사진이 두 장 들어 있습니다

예제 파일을 열어보고 좀 놀랐어요. JPEG는 FF D8로 시작하는데, 이 마커가 파일 안에 두 번 나옵니다.

[0, 67010] 106570   # 시작 위치 두 곳, 전체 106,570바이트

앞 67,010바이트는 평범한 사진이고, 뒤 39,560바이트가 게인맵입니다. 각 화소를 얼마나 밝게 올려도 되는지 적어둔 흑백 지도예요. HDR을 모르는 프로그램은 앞쪽만 읽고 멈추기 때문에 그냥 평범한 JPEG로 보입니다. 깨지지 않아요.

구조가 단순해서 마음에 들었습니다. 새 포맷을 만든 게 아니라 기존 JPEG 뒤에 한 장을 더 붙인 것이니까요.

파일 안을 좀 더 들여다보니 urn:iso:std:iso:ts:21496:-1이라는 표준 식별자가 612바이트 지점에 박혀 있었습니다. 누가 임의로 만든 방식이 아니라 ISO 규격이라는 뜻이에요. 그 옆에는 여러 장을 한 파일에 담는 규격인 MPF 표시도 있었습니다.

게인맵 해상도도 봤는데 작은 축소본이 아니라 원본과 같은 1600×1600이었어요. 흑백이라 압축이 잘 될 뿐이지 해상도를 줄인 게 아니었습니다.

같은 페이지의 비교 카드. 흰 사각형 두 개 중 왼쪽은 SDR white, 오른쪽은 HDR white 플러스 2.9스톱으로 표시돼 있다

둘 다 #FFFFFF인데 오른쪽에만 게인맵이 붙어 있습니다. 아래 안내에 "이 화면이 HDR을 지원하지 않아 왼쪽을 일부러 어둡게 낮춰 차이를 흉내 냈다"고 적혀 있어요. 저희가 효과를 눈으로 못 본 것과 같은 이유죠.

그런데 썸네일을 한 번 만들면

여기가 이 글을 쓰게 된 지점입니다.

서버에 올렸다 그대로 내려받았을 때는 파일이 바이트 하나 안 틀리고 돌아왔어요. 해시가 같았습니다. 그런데 이미지 처리를 한 번 거치자 게인맵이 통째로 사라졌습니다.

거친 과정크기게인맵
원본106,570 B있음
올렸다 그대로 내려받음106,570 B있음
같은 크기로 다시 저장66,459 B없음
800px 썸네일24,235 B없음

무서운 건 실패하는 방식이에요. 파일은 멀쩡히 열립니다. 그림도 정상이고, 에러도 안 나고, 로그에도 아무것도 안 남아요. 크기만 줄어 있을 뿐입니다. HDR 화면으로 직접 열어보기 전엔 사라진 걸 알 방법이 없어요.

CDN, 이미지 프록시, CMS 업로더 — 자동 리사이즈나 용량 최적화가 걸린 곳이면 어디든 해당됩니다.

글자에도 쓸 수 있습니다

이미지만 되는 줄 알았는데 글자도 됩니다. 다만 우회로를 써요.

CSS에는 아직 #FFFFFF보다 밝은 색을 적는 방법이 없습니다. 관련 표준이 초안 단계거든요. 그래서 도구 쪽이 제안한 건 글자를 이미지가 비치는 창으로 만드는 것입니다. background-clip: text로 글자 모양만 남기고 그 안에 게인맵 이미지를 까는 방식이에요.

여기서 눈여겨볼 게 @media (dynamic-range: high)입니다.[2] HDR 화면에서만 이미지 경로를 타고, 나머지는 평범한 색을 그대로 씁니다. 이미지를 받지도 않아요. 안 보이는 사람에게 용량을 물리지 않는 구조라 이 부분은 잘 만들었다 싶었습니다.

바탕에 쓰는 흰색 견본 파일도 열어봤는데 64×64에 1,298바이트더라고요. 그 안에도 똑같이 사진이 두 장 들어 있었습니다. 글자를 칠하겠다고 큰 이미지를 받을 필요는 없다는 뜻이죠.

다만 background-clip은 요소 상자 안쪽만 칠하기 때문에 줄이 넘치면 잘립니다. 제목이나 강조 단어용이지 본문 문단에 쓸 건 아니에요. 1,500니트짜리 문단은 읽기 괴로울 테고요.

어디까지 보이나

효과가 나타나는 조건은 좁습니다. HDR 지원 화면이어야 하고, 브라우저는 Chrome 137 이상이나 Safari 26 계열, 그 외에는 일반 JPEG로 보입니다.[1]

대신 안 보이는 환경에서 깨지지는 않아요. 원래 이미지가 그대로 나옵니다. 그래서 시도 자체는 부담이 없습니다. 다만 용량은 값을 치릅니다. 원본 PNG 34,032바이트가 HDR JPEG 106,570바이트가 됐어요. 3.1배고 그중 37%가 게인맵입니다.

붙이기 전에 딱 하나만

내 파이프라인이 이 파일을 다시 저장하는지만 보면 됩니다.

확인은 간단해요. 올린 뒤 다시 받아서 바이트 수를 비교하면 됩니다. 달라졌으면 이미 재인코딩된 거예요.

남는 것

이 기술 자체는 재밌는 시도 정도라고 봅니다. 보이는 사람이 얼마나 될지 모르니 기대는 낮게 잡는 게 맞고요.

제게 더 크게 남은 건 다른 쪽이었어요. 이미지 파일에는 눈에 안 보이는 정보가 붙어 있고, 재인코딩은 그걸 말없이 버립니다. 게인맵만의 얘기가 아니에요. 색 프로파일도 회전 정보도 같은 자리에 있습니다. 업로드하고 나면 사진 색이 달라 보인다는 그 흔한 현상, 뿌리가 같아요.

이미지가 시스템을 지나갈 때마다 뭔가 조금씩 사라지고 있다는 것. 그걸 눈으로 확인한 게 이번 소득입니다.

참고 자료

  1. Chris Bennett, Make your logo brighter than white — 게인맵 JPEG 생성 도구. 밝기 수치와 지원 범위의 출처
  2. MDN, @media (dynamic-range) — HDR 화면 판별 미디어 쿼리

Simpler24 개발팀
개발 글을 10년 써온 사람이 새 기술을 직접 만져보고 적습니다. 파일 크기와 해시, 재인코딩 결과는 2026년 8월 공개 예제 파일을 내려받아 직접 확인한 값입니다. 다만 HDR 모니터가 없어 빛나는 효과 자체는 확인하지 못했고, 밝기 수치와 지원 브라우저 범위는 참고 자료 1번을 인용했습니다.

이런 개발이 필요하신가요?

Simpler24가 카페24 맞춤 개발을 도와드립니다.