본문으로 건너뛰기
피드

스크린이 절대 못 보여주는 색은 어디에 있을까

frontend 약 10분
vote
0
댓글
북마크

이 글은 우리가 화면에서 보는 색이 인간이 볼 수 있는 색 전체가 아니라, sRGB와 Display-P3 같은 색역 안에 갇힌 일부라는 점을 파고든다. 특히 숲, 바닷속, 새와 나비의 구조색, 생물발광, 교통신호 LED 같은 실제 세계에는 모니터와 카메라가 제대로 담지 못하는 청록색과 녹색 계열이 꽤 많다는 얘기다. 디스플레이, 카메라, 조명, 렌더링을 다루는 개발자라면 “색상값 하나”가 생각보다 물리와 표준의 타협이라는 걸 체감하게 된다.

  • 1

    sRGB는 인터넷과 일반 모니터의 기본 색역이지만 인간이 볼 수 있는 색 전체에 비하면 꽤 좁다.

  • 2

    Display-P3는 sRGB보다 넓지만 숲속 투과광, 바닷속 청록색, 새와 나비의 구조색 같은 실제 색을 여전히 다 담지 못한다.

  • 3

    LED 조명도 청록색 대역을 약하게 내는 경우가 많아 화면뿐 아니라 실내 조명까지 색 경험을 좁힌다.

  • 4

    자연에서 색역 바깥의 강한 색은 잎, 물, 깃털, 나비 날개처럼 빛을 반복적으로 걸러내거나 구조적으로 간섭시키는 과정에서 나온다.

  • 5

    현대 교통신호의 초록불과 레이저는 사람이 가장 쉽게 만날 수 있는 순도 높은 인공 색의 예시다.

  • 이 글의 핵심은 꽤 단순한데, 충격은 큼. 우리가 매일 보는 화면은 인간이 볼 수 있는 색 전체를 보여주는 장치가 아니라, 아주 제한된 색역만 재현하는 장치임

    • 특히 빠지는 쪽이 청록색, 시안(cyan), 일부 강한 녹색 계열임
    • 사진으로도 안 잡히고, 게임에서도 못 봤고, 일반 모니터로도 못 보는 색이 실제 세계에는 있다는 얘기
  • 이유는 인간 눈과 디스플레이의 타협 구조 때문임

    • 인간 눈에는 대략 세 종류의 원추세포가 있고, 뇌는 이 세 신호의 세기 차이를 조합해서 색을 인식함
    • 그래서 화면은 실제 물체의 스펙트럼을 재현하는 대신 빨강, 초록, 파랑 기본색으로 원추세포를 적당히 속이는 방식으로 동작함
    • 문제는 이 세 기본색을 섞어서 만들 수 있는 색이 CIE 색도도 전체가 아니라 삼각형 안쪽뿐이라는 점임

중요

> sRGB는 “인터넷의 기본 색”이지만 “인간이 볼 수 있는 색의 기본값”은 아님. 웹, 일반 모니터, 대중 사진이 다 이 작은 창문 안에서 색을 주고받는 셈임.

  • 1931년 국제조명위원회(CIE)가 인간 색각을 지도로 만들었고, 여기서 디스플레이 색역의 한계가 눈에 보이기 시작함

    • 색도도 바깥 테두리는 사람이 볼 수 있는 단일 파장의 색이고, 내부는 여러 파장을 섞어 만들 수 있는 색임
    • RGB 기본색 3개를 찍으면 그 안쪽 삼각형만 화면이 만들 수 있는 색이 됨
    • 가장 진한 시안을 만들려면 수학적으로는 “음수의 빨강”이 필요한데, 현실에 그런 빛은 없음. 여기서부터 이미 막힘
  • 옛날 컬러 TV와 CRT가 쓴 형광체(phosphor)는 순수한 단일 파장을 내지 못했기 때문에 색역이 더 좁아졌고, 그 결과물이 sRGB로 굳어짐

    • 표준 PC 모니터, 웹, 일반 사진, 많은 그래픽 도구가 사실상 sRGB 안에서 움직임
    • Display-P3는 sRGB보다 조금 넓어서 최신 스마트폰과 맥에서 흔해졌지만, 그래도 자연의 강한 색을 다 담기엔 부족함
    • 색을 넓게 담으려면 촬영, 파일, 편집, 브라우저, 운영체제, 패널까지 전체 체인이 색 공간을 보존해야 함
  • 화면만 문제가 아니라 조명도 청록색을 굶김

    • 흔한 백색 LED는 파란 LED에 노란 형광체를 얹어서 흰색처럼 보이게 만드는 경우가 많음
    • 이 구조에서는 파랑과 노랑 사이, 딱 청록색 영역이 비기 쉬움
    • 고연색성 조명은 여러 형광체를 추가해서 나아지지만, 그래도 청록색은 약한 편이라고 함

자연이 화면 밖 색을 만드는 법

  • 숲속에서 잎을 통과한 빛은 그냥 “초록”이 아니라 색역 바깥으로 밀려날 수 있음

    • 잎 표면에서 반사된 초록은 대체로 sRGB 안에 들어오지만, 잎을 통과한 빛은 훨씬 더 선택적으로 걸러짐
    • 한 번 잎을 지나며 파랑이 많이 줄고 빨강도 절반쯤 줄어든 뒤, 다른 잎을 또 지나거나 반사되면서 특정 녹색 파장 근처로 계속 정제됨
    • 여름 정오의 낙엽수림 아래에서 느끼는 말도 안 되게 진한 초록이 바로 이쪽임
  • 물도 비슷하게 화면 밖 색을 잘 만듦. 특히 얕은 바다의 모래색이 물 깊이에 따라 청록색과 파랑 쪽으로 이동함

    • 물은 빨강을 강하게 흡수하고, 초록은 천천히 흡수하고, 파랑은 거의 남김
    • 햇빛이 물을 지나 모래에 반사되고 다시 물을 통과하면, 흰색이나 노란 모래도 sRGB 밖의 시안으로 튈 수 있음
    • 더 깊어지면 강한 파랑 쪽으로 가다가, 아주 깊고 어두워지면 다시 sRGB 파랑 기본색 근처로 수렴함
  • 바닷속으로 직접 들어가면 영상으로 보는 것보다 훨씬 더 극단적인 청록과 파랑을 만날 수 있음

    • 수면 위에서는 산란광 때문에 색의 포화도가 제한되지만, 물속 깊은 곳에서는 물과 플랑크톤이 빛을 반복적으로 걸러냄
    • 다큐멘터리나 수중 사진은 센서와 색역 한계 때문에 이 강도를 제대로 못 보여줌
    • 수중 사진가들이 장면 전체가 파랑으로 클리핑되는 걸 막으려고 필터를 쓰는 이유도 여기에 있음

새, 나비, 구조색

  • 새 입장에서 보면 인간용 화면은 거의 처참한 장치임

    • 새는 자외선까지 보는 원추세포를 포함해 훨씬 넓고 입체적인 색 공간을 가짐
    • 인간용 RGB 화면은 인간 포유류 눈에 맞춘 장치라, 새가 보는 세계를 제대로 근사할 수도 없음
    • 그래서 새의 깃털 색은 인간 화면으로 보면 원래의 정보가 대량 손실됨
  • 새와 나비의 강한 파랑, 초록, 청록은 색소만으로 만든 색이 아니라 구조색인 경우가 많음

    • 빛의 파장은 대략 0.5~0.75마이크로미터라, 깃털이나 날개 비늘의 미세 구조와 실제로 상호작용할 수 있음
    • 공작, 벌새, 나비 날개의 얇은 층과 간격이 특정 파장만 반사하고 나머지는 흡수하면서 말도 안 되는 채도의 색을 만듦
    • 공작 깃털을 갈아버리면 색은 사라지고 어두운 갈색 가루가 된다는 예시가 이 구조색의 정체를 잘 보여줌
  • 글쓴이가 쓴 조류 색 데이터셋 기준으로는 sRGB 밖 색을 가진 새가 약 500종, Display-P3 밖 색을 가진 새도 약 100종 있었음

    • 데이터셋이 완전하지 않아서 실제로는 더 많을 가능성이 큼
    • 서부 아마존의 벌새인 수컷 golden-tailed sapphire는 한 마리 안에 거의 전체 스펙트럼을 품은 사례로 언급됨
    • 나비 쪽에서도 birdwing butterfly 일부는 Display-P3로도 표현이 안 되는 주황색을 가짐

ℹ️참고

> 여기서 “사진이 별로다”라는 말은 카메라 성능 탓만이 아님. 현실의 스펙트럼, 카메라 센서, 파일 색 공간, 디스플레이 색역이 줄줄이 정보를 깎아먹는 구조임.

빛나는 생물과 인공 색

  • 깊은 바다의 생물발광은 물의 흡수 특성 때문에 파랑이나 초록 계열로 몰림

    • 긴 거리를 가야 하는 빛은 빨강보다 파랑과 초록이 유리함
    • 야광충(dinoflagellate)이 대량 번식하면 파도에 깊은 바다 같은 청록빛이 생기고, 푸에르토리코 비에케스 같은 염분 높은 석호에서는 노를 젓는 자국이 빛으로 남음
    • 뉴질랜드 동굴의 glow worm도 독립적인 화학 반응으로 비슷한 청록빛을 냄
  • 의외로 가장 쉽게 만날 수 있는 색역 바깥의 인공색은 교통신호의 “초록불”임

    • 글쓴이는 이걸 초록이라 부르지만 실제로는 강한 터키석색에 가깝다고 말함
    • 현대 교통신호는 LED를 쓰고, 형광체를 추가하지 않은 LED는 꽤 순수한 스펙트럼 색을 낼 수 있음
    • 빨강-초록 색각 이상이 있는 사람도 구분할 수 있어야 한다는 요구가 이 아름다운 색을 만든 셈이라는 해석도 재밌음
  • 가장 인공적인 색의 상징은 결국 초록 레이저임

    • 레이저는 특정 파장의 빛이 복제되듯 증폭되면서 거의 단일한 파장을 만들어냄
    • 자연에서는 520나노미터 근처의 아주 순수한 청록-녹색을 만들기 어렵다고 글쓴이는 설명함
    • 색도도 꼭대기 근처는 기하적으로 조금만 파장 폭이 넓어져도 중심 쪽으로 끌려 내려가기 때문에, 자연물의 넓은 스펙트럼으로는 그 지점에 딱 붙기 힘듦
  • 결론은 약간 철학적임. 우리는 화면 때문에 색을 덜 보는 게 아니라, 뭘 봐야 하는지 몰라서도 덜 봄

    • 숲 아래, 바닷속, 새 깃털, 나비 날개, 교통신호를 다시 보면 “항상 거기 있었는데 왜 몰랐지?” 같은 감각이 생길 수 있음
    • 하지만 사진을 찍어도 남에게 보여줄 수는 없음. 그 색은 대부분의 카메라와 화면을 통과하면서 사라짐

기술 맥락

  • 웹 개발에서 sRGB를 기본값으로 두는 건 호환성 때문이에요. 거의 모든 브라우저, 이미지, CSS 색상, 일반 모니터가 sRGB를 전제로 오래 굴러왔기 때문에, 이 바깥 색을 쓰려면 단순히 색상값만 바꾸는 게 아니라 전체 표시 파이프라인을 봐야 해요.

  • Display-P3를 쓰면 더 넓은 색을 표현할 수 있지만, 왜 항상 답이 되지는 않냐면 콘텐츠 제작부터 표시까지 전 구간이 색 공간을 유지해야 하거든요. 이미지가 넓은 색역으로 저장돼도 중간에서 sRGB로 변환되거나, 디스플레이가 지원하지 않으면 사용자 눈에는 그냥 잘린 색으로 보여요.

  • 그래픽스나 데이터 시각화에서 중요한 지점은 “차트에 찍힌 색”이 실제 물리적 색과 같지 않다는 점이에요. 글쓴이가 쓴 그래프도 도구가 sRGB만 지원해서 색역 밖의 색을 실제 색으로 보여주지 못한다고 밝히는데, 이건 시각화 결과를 해석할 때 꽤 큰 제약이에요.

  • 카메라와 화면을 다루는 앱이라면 색 관리는 기능이 아니라 데이터 보존 문제에 가까워요. 센서가 잡은 색, 파일 프로파일, 렌더링 엔진, 운영체제 색 관리, 패널 특성이 모두 맞아야 해서, 어느 한 단계만 놓쳐도 현실의 강한 색은 평범한 색으로 눌려요.

프론트엔드나 그래픽스에서 색을 다룰 때 “보이는 색”을 곧 “표현 가능한 색”으로 착각하기 쉽다. 이 글은 색상 관리가 단순한 디자인 취향이 아니라 센서, 디스플레이, 조명, 인간 시각 사이의 꽤 빡센 엔지니어링 문제라는 걸 잘 보여준다.

댓글

댓글

댓글을 불러오는 중...

frontend

크롬, 매니페스트 버전 2 우회로까지 닫는다

구글 크롬이 매니페스트 버전 2 확장 지원을 사실상 최종 종료 단계로 밀어넣고 있다. 기존에는 플래그나 레지스트리 설정으로 유블록 오리진 같은 확장을 살리는 우회가 있었지만, 크로미움 150과 151을 거치며 그 우회 코드까지 제거되는 흐름이다.

frontend

HTML 우선 사이트로 전환했더니 신청 완료자가 하룻밤 사이 2배가 된 이야기

한 공공성 강한 유틸리티 회사가 React 기반 신청 폼 실패 뒤, Astro와 HTML 우선 구조로 다시 만들었더니 폼 완료자가 출시 직후 2배로 늘어남. 핵심은 자바스크립트 없이도 동작하는 페이지별 폼, 서버 저장 세션, 접근성, 점진적 향상이었음.

frontend

Linear가 빠른 이유? 브라우저 안에 DB를 넣고 서버를 ‘동기화 대상’으로 밀어낸 설계

Linear의 속도는 특정 프레임워크나 마법 같은 최적화가 아니라, 브라우저 로컬 DB, 낙관적 업데이트, 세밀한 MobX 반응성, 공격적인 코드 스플리팅, 서비스 워커 캐싱, 키보드 중심 UX가 쌓인 결과다. 전통적인 CRUD 앱이 이슈 업데이트에 약 300ms를 쓰는 동안 Linear는 사용자가 체감하기 전에 로컬 상태를 먼저 바꾸고 서버와는 나중에 맞춘다.

frontend

Vite 만든 VoidZero가 Cloudflare로 합류, 핵심은 ‘Vite는 계속 벤더 중립’이라는 약속

Vite, Vitest, Rolldown, Oxc, Vite+를 만드는 VoidZero 팀이 Cloudflare에 합류한다. Cloudflare는 Vite 생태계가 계속 오픈소스, 벤더 중립, 커뮤니티 주도로 유지된다고 강조하면서 100만 달러 규모의 생태계 펀드도 약속했다.

frontend

차세대 영상 코덱 AV2, 최종 1.0 명세 공개

오픈미디어연합이 AV1의 후속 영상 코덱인 AV2 최종 1.0 명세를 공개했다. 더 낮은 비트레이트로 고화질 영상을 전달하는 압축 효율, AR/VR, 화면 콘텐츠, 다중 프로그램 분할 화면, 실시간 화상회의 같은 현대 영상 워크로드를 겨냥한다.