흰색보다 밝은 흰색은 없죠. #FFFFFF가 끝이니까요.
그런데 soverybright.com이라는 도구가 그 위를 쓰는 방법을 공개했습니다. 이미지의 특정 부분만 일반 흰색보다 최대 7.5배 밝게 보이게 만드는 방식이에요. 링크드인에서 유독 혼자 빛나는 로고를 보신 적 있다면 그게 이겁니다.
먼저 밝혀둘 게 있어요. HDR 모니터가 없어서 빛나는 걸 눈으로 확인하지 못했습니다. 대신 할 수 있는 걸 했어요. 예제 파일을 받아 안을 들여다보고, 서버에 올렸다 내려받고, 흔한 이미지 처리에 통과시켜봤습니다.

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이었어요. 흑백이라 압축이 잘 될 뿐이지 해상도를 줄인 게 아니었습니다.

둘 다 #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%가 게인맵입니다.
붙이기 전에 딱 하나만
내 파이프라인이 이 파일을 다시 저장하는지만 보면 됩니다.
확인은 간단해요. 올린 뒤 다시 받아서 바이트 수를 비교하면 됩니다. 달라졌으면 이미 재인코딩된 거예요.
남는 것
이 기술 자체는 재밌는 시도 정도라고 봅니다. 보이는 사람이 얼마나 될지 모르니 기대는 낮게 잡는 게 맞고요.
제게 더 크게 남은 건 다른 쪽이었어요. 이미지 파일에는 눈에 안 보이는 정보가 붙어 있고, 재인코딩은 그걸 말없이 버립니다. 게인맵만의 얘기가 아니에요. 색 프로파일도 회전 정보도 같은 자리에 있습니다. 업로드하고 나면 사진 색이 달라 보인다는 그 흔한 현상, 뿌리가 같아요.
이미지가 시스템을 지나갈 때마다 뭔가 조금씩 사라지고 있다는 것. 그걸 눈으로 확인한 게 이번 소득입니다.
참고 자료
- Chris Bennett, Make your logo brighter than white — 게인맵 JPEG 생성 도구. 밝기 수치와 지원 범위의 출처
- MDN, @media (dynamic-range) — HDR 화면 판별 미디어 쿼리