화면 무드등

오늘 분위기에 맞는 색을 켜세요

주변을 밝히는 손전등이 아니라, 곁에 두고 색을 즐기는 작은 컬러 패널입니다. 분위기를 고른 뒤 전체화면으로 켜세요.

화면 전체가 컬러 패널이 됩니다
색과 움직임 직접 조절하기

지금 색은 #80572E (R 128 · G 87 · B 46). 빨강과 초록을 함께 올리면 노랑이 됩니다. 물감과 달리 빛은 섞을수록 밝아지고, 셋을 다 올리면 하양이 됩니다.

용도 주변을 비추는 조명 대신 화면 자체를 컬러 패널로 쓰는 도구입니다.

밝기 이 슬라이더는 색을 어둡게 하며, 기기 화면 밝기는 시스템에서 조절합니다.

배터리 밝은 화면을 오래 켜 두면 전지가 빨리 닳습니다.

빛에 민감한 분은 주의해 주세요.

빠르게 번쩍이는 빛은 광과민성 뇌전증이 있는 분에게 발작을 일으킬 수 있습니다. WCAG 2.3.1은 1초에 세 번 넘는 번쩍임을 피하도록 합니다. 이 도구는 색 전환을 초당 2번 이하로 제한하지만, 그래도 어지럽거나 눈이 불편하면 바로 멈추고 어린이가 쓸 때는 보호자가 함께 확인해 주세요. 화면을 눈 가까이 대고 밝기를 최대로 두는 것도 피하는 편이 좋습니다.

참고: W3C WCAG 2.2 — Three Flashes or Below Threshold (2.3.1)이 랩의 소개글 읽기 →

이 데모에 대하여

화면 전체를 조명으로 쓰되 안전 한계를 겁니다

이 화면은 무슨 색을 낼지가 아니라 무엇에 쓸지로 먼저 고르게 되어 있습니다. 용도를 누르면 색과 밝기와 변화 방식이 한꺼번에 정해집니다. 그리고 깜박임이 들어가는 설정에는 주기의 하한을 코드로 걸어 두었습니다. 광과민성 발작을 유발할 수 있는 빠르기에 아예 닿지 않게 하려는 것이고, 이 제한은 사용자가 조절해도 넘길 수 없습니다.

  1. 용도 프리셋 중 하나를 눌러 색과 밝기가 함께 바뀌는 것을 봅니다.
  2. 은은한 색과 원색 계열이 화면에서 어떻게 다른지 비교합니다.
  3. 밝기를 낮췄을 때 색이 어떻게 보이는지 확인합니다.
  4. 천천히 바뀌는 설정에서 주기를 조절해 봅니다.
  5. 깜박이는 설정을 고르면 확인을 한 번 받는지 봅니다.
  6. 그 설정에서 주기를 가장 짧게 줄여도 일정 값 아래로 내려가지 않는지 확인합니다.
  7. 빛의 삼원색을 하나씩 눌러 섞이는 색과 비교합니다.
  8. 전체 화면으로 전환해 실제 조명처럼 써 봅니다.
  9. 밝기를 최대와 최소로 두고 같은 색이 얼마나 달라 보이는지 비교합니다.
  10. 천천히 바뀌는 설정과 고정된 설정을 번갈아 보며 느낌의 차이를 확인합니다.
  11. 확인 단계를 거치는 설정이 어느 것인지 찾아봅니다.
  12. 빛의 삼원색을 둘씩 조합했을 때 나오는 색을 미리 맞춰 보고 확인합니다.
  13. 어두운 방에서 밝기를 낮춘 상태로 실제 조명처럼 한동안 써 봅니다.

화면이 지키는 규칙

01

깜박임 속도에 하한이 있습니다.

발작을 유발할 수 있는 깜박임은 대략 초당 3회에서 60회 사이이고 그중에서도 15회에서 25회 부근이 가장 위험한 것으로 알려져 있습니다. 이 화면은 주기의 하한을 두어 초당 2회를 넘지 못하게 막았습니다. 슬라이더를 끝까지 밀어도 그 아래로 내려가지 않으며, 사용자가 실수로도 위험한 구간에 들어갈 수 없도록 값 자체를 잘라 냅니다.

02

깜박임은 확인을 한 번 받습니다.

깜박이는 설정은 누르는 즉시 시작되지 않고 확인 단계를 거칩니다. 화면 전체가 갑자기 번쩍이면 놀랄 수 있고, 옆에 있는 사람이 의도치 않게 보게 될 수도 있기 때문입니다. 안전 한계를 걸어 두었더라도 예고 없이 시작하지 않는 것이 별도로 필요하다고 봤습니다.

03

용도를 먼저 고르게 했습니다.

색과 밝기와 변화 방식을 각각 조절하게 만들면 원하는 조명을 얻기까지 여러 번 만져야 합니다. 그래서 자주 쓸 만한 조합을 미리 묶어 버튼 하나로 만들었습니다. 세부 조절은 그다음에 하면 되고, 처음 열었을 때 바로 쓸 수 있는 상태가 되는 편이 도구로서 낫다고 판단했습니다.

04

빛은 섞을수록 밝아집니다.

프리셋 뒤쪽에 빨강 · 초록 · 파랑과 그 둘씩 섞은 색을 나란히 둔 것은 물감과 반대라는 점을 눈으로 확인하게 하려는 것입니다. 빨강과 초록을 섞으면 노랑이 되고 셋을 다 켜면 하양이 됩니다. 화면이 색을 내는 방식이 이것이라 프리셋을 눌러 가며 비교하면 원리가 바로 보입니다.

05

밝기는 색과 따로 다룹니다.

같은 색이라도 밝기를 낮추면 분위기가 완전히 달라집니다. 그래서 색을 고르는 것과 밝기를 정하는 것을 분리해 두었습니다. 밤에 쓸 때는 색보다 밝기를 먼저 낮추는 편이 눈이 편하고, 프리셋들도 그 점을 고려해 값을 정했습니다.

06

계산은 화면과 분리했습니다.

색 변환과 값 제한은 화면 코드가 아니라 별도 모듈에 있고 자동 테스트가 확인합니다. 특히 주기를 잘라 내는 부분은 안전과 직결되므로, 화면을 고치다가 실수로 제한이 풀리는 일이 없도록 테스트로 고정해 두었습니다.

07

화면은 손전등이 아닙니다.

화면이 낼 수 있는 빛의 양은 조명 기구에 비하면 아주 적습니다. 넓은 공간을 밝히거나 멀리 비추는 용도로는 쓸 수 없고, 가까운 거리에서 분위기를 만들거나 잠깐 주변을 확인하는 정도가 현실적인 쓰임입니다. 기기마다 최대 밝기도 크게 달라서 같은 설정이라도 결과가 다릅니다.

08

천천히 바뀌는 쪽이 기본입니다.

프리셋 대부분은 몇 초에 걸쳐 부드럽게 변하거나 아예 고정된 색입니다. 깜박이는 설정은 하나뿐이고 그것도 확인을 거쳐야 켜집니다. 도구가 기본으로 제공하는 상태가 안전한 쪽이어야 한다고 봤기 때문인데, 위험한 설정을 기본값에 두고 경고만 띄우는 것보다 이쪽이 낫습니다.

09

화면 밖으로 나가지 않습니다.

색과 밝기 설정은 브라우저 안에서만 처리되고 어디로도 전송되지 않습니다. 서버에 무언가를 묻지 않으므로 인터넷이 끊긴 상태에서도 동작하고, 사용 기록이 남지도 않습니다. 조명으로 쓰는 도구에 통신이 끼어들 이유가 없어서 처음부터 그렇게 만들었습니다.

10

색은 화면이 섞어 냅니다.

고른 색은 결국 화면의 아주 작은 점 세 종류의 밝기 조합으로 표현됩니다. 그래서 같은 값을 넣어도 화면의 종류와 설정에 따라 눈에 보이는 색이 조금씩 다릅니다. 정확한 색이 필요한 작업에 이 도구를 쓸 수 없는 이유이고, 분위기를 만드는 용도라면 그 차이가 문제 되지 않습니다.

안전을 보증하지는 않습니다.

깜박임 속도에 한계를 두었지만 이것이 의학적 안전을 보증하지는 않습니다. 광과민성 뇌전증을 비롯해 빛에 민감한 병력이 있다면 깜박이는 설정을 사용하지 마시고, 사용 중 어지럼증이나 불편한 느낌이 있으면 즉시 중단해 주세요. 어린이가 사용할 때는 보호자가 함께 확인하는 편이 좋습니다. 또한 이 도구는 조명 기구를 대신하지 못하며 정확한 색이나 밝기를 내는 장치도 아닙니다. 화면을 오래 최대 밝기로 켜 두면 기기가 뜨거워지고 배터리가 빠르게 소모되며, 일부 기기에서는 같은 화면을 오래 띄우는 것이 화면에 영향을 줄 수 있습니다. 사진 촬영이나 색 확인처럼 정확도가 필요한 작업에는 전용 장비를 쓰는 편이 맞습니다.

참고 자료W3C WCAG 2.2 — 세 번의 섬광 기준W3C WCAG 2.2 — 상호작용에 의한 애니메이션

실험을 마쳤다면