내 RGB를 맞혀봐: Guess My RGB

 (susam.net)
2P by GN⁺ | ★ favorite | 댓글 1개
  • Guess My RGB는 화면 배경색의 RGB 값을 직접 맞히는 간단한 색상 추측 게임임
  • 사용자는 위쪽 슬라이더를 움직여 R, G, B 값을 조정하며 배경색에 가까운 조합을 찾음
  • 화면에는 0부터 9, A부터 F까지의 16진수 문자와 R, G, B 라벨이 함께 표시됨
  • New Game 버튼으로 새 게임을 시작할 수 있음
  • 점수, 정답 공개 방식, 난이도, 구현 방식은 제공된 요약 정보만으로는 확인할 수 없음

화면과 목표

  • 제목은 Guess My RGB임
  • 목표는 슬라이더를 조정해 배경 RGB 색상을 맞히는 것임
  • 화면에는 0부터 9, A부터 F까지의 문자가 표시됨
  • R, G, B 라벨이 함께 표시되어 각 색상 채널을 구분할 수 있음

조작 방식

  • 안내 문구는 “Move the sliders above to guess the background RGB colour.”임
  • 사용자는 위쪽 슬라이더로 R, G, B 값을 조정함
  • New Game 버튼으로 새 게임을 시작함

함께 보면 좋은 글 β

GN⁺   [-]
Hacker News 의견들

  • 색을 못 보고 제출 후 점수만 볼 수 있다면 최적 전략이 뭘지 궁금함
    단순한 언덕 오르기(hill climbing)도 꽤 효율적임: 각 슬라이더를 0에서 시작해 점수가 떨어질 때까지 오른쪽으로 옮긴 뒤 한 칸 왼쪽으로 돌아가면 됨
    평균적으로 슬라이더당 9번, 색 하나당 27번 정도 시도가 필요할 듯함
    0에서 1로 옮겼을 때의 점수 차이를 보면 오른쪽으로 얼마나 가야 할지 대략 추정할 수 있지만, 반올림 때문에 정확한 길이는 나오지 않음
    최적 전략이라면 평균적으로 슬라이더당 4번, 즉 색 하나당 12번 시도 정도면 될 것 같음

    • 가난한 자의 자동화 시도라면, RGB 입력을 0으로 초기화하고 각 색상 채널을 한 칸씩 올리며 제출한 뒤 점수가 더 이상 오르지 않으면 한 칸 되돌리는 방식으로 짤 수 있음
      결과 퍼센트 반올림 때문에 인접한 색이 같은 점수를 가질 수 있어 최소 두 번은 반복해야 함
    • 점수가 100 - 유클리드 거리라고 가정하면, 무작위 추측 세 번 뒤에는 삼각측량으로 정답을 좁힐 수 있음
      삼각측량 결과 정답 후보가 두 개 나오므로 둘 중 하나를 랜덤으로 고르면 평균 4.5번 시도로 맞출 수 있을 듯함
    • 점수 숫자 자체의 정보는 무시하고 어느 쪽 점수가 더 높은지만 비교한다면, 이분 탐색이 아니라 삼분 탐색이나 황금분할 탐색으로 최적화할 수 있음
      https://en.wikipedia.org/wiki/Golden-section_search
      0-F 범위에서 6과 9를 측정하고, 더 높은 쪽에 따라 0-9 또는 6-F로 좁힘
      이후 이미 측정한 값을 재사용하면서 범위를 줄이면 최악의 경우 슬라이더당 6번, 평균 약 5번 정도가 됨
      더 최적화할 수 있을 것 같지만 여기까지만 봄
    • 전체 평균 약 3.27번 시도로 맞추는 풀이가 가능함
      가능한 색을 100개의 점수 버킷에 최대한 고르게 퍼뜨리는 추측을 고르는 방식, 즉 분산을 최소화하는 방식임
      전체 색의 절반 이상은 단 2번의 추측으로 식별할 수 있음
      가장 큰 버킷 크기를 최소화하도록 코드를 바꾸면 평균은 약간 나빠지지만 어떤 경우에도 4번을 넘기지 않음
      사이트의 브라우저 콘솔에 붙여 넣어 실행할 수 있는 풀이임
    • 실제 계산은 3차원 공간에서의 거리이고, 가능한 최장 거리로 스케일링됨
      스케일링과 반올림을 잠시 무시하면, 목표색에서 서로 일직선이 아닌 임의의 세 점까지의 거리는 각 축 정밀도와 무관하게 후보를 최대 두 개로 좁힘
      그래서 세 번째 추측에서 맞을 확률 50%, 네 번째에서 맞을 확률 50%가 됨
      스케일링이 들어가면 여전히 구의 교차 문제처럼 볼 수 있지만 거리 함수가 대칭이 아니라 구가 이상한 모양이 됨
      예를 들어 첫 추측이 큐브의 꼭짓점이면, 가장 먼 점을 고른 셈이라 공간의 1/8이 같은 0% 점수를 가짐
      반올림으로 인한 정밀도 손실까지 고려하면 이산 문제로 보고 모든 색을 구분할 수 있는 점들의 튜플을 찾는 편이 낫고, 몇 번 시도 끝에 [11,7,4], [4,4,8], [11,8,11], [4,11,7] 네 점이 작동했음
      더 작은 집합이 있을 수도 있지만, 세 점으로 전부 구분 가능한지 완전탐색하려면 대략 2^48 작업량이 필요할 듯하고, 첫 결과에 따라 두 번째 점을 고르면 더 나아질 수도 있음

  • 이건 내 파티 묘기임
    색을 묘사하면 16진수 색상 코드를 말해줄 수 있음
    짐작하겠지만 파티에서 인기가 엄청남

    • 이 주제의 보드게임도 있음
      첫 단서는 단어 하나, 두 번째 단서는 단어 두 개이고, 모두가 자기 색상 추측 위치에 말을 놓음
      거리에 따라 점수를 주는 방식이라 플레이하기 쉬움
      https://boardgamegeek.com/boardgame/302520/hues-and-cues
    • 이제는 단어를 Netscape 알고리즘으로 해석한 색으로 답해보면 됨
      예전에 Netscape가 공식 색상 이름 목록에 없는 단어를 색으로 해석하는 방식을 다룬 글을 읽었는데, 16진수가 아닌 문자를 버리고 남은 문자를 패딩·청킹해서 RGB 숫자로 만드는 식이었음
      그래서 “dumptruck”이 DC0이 되어 노란색처럼 나올 수 있음
      그걸 보고 바로 /usr/share/dict/words의 모든 단어를 해석해 sqlite DB에 Lab 색 표현과 함께 넣는 작은 앱을 만들었음
      원하는 RGB에 가장 가까운 가짜 색상 단어 100개를 실제 색으로 표시하고 가까운 순서로 정렬해 보여줬고, 즉흥적으로 만든 저녁 프로젝트로 꽤 재밌었음
    • 1980년대 후반 소련 카메라로 찍은 사진, 향수와 테디베어, 벽에 걸린 카펫, 젊음의 가벼움과 대비되는 어두운 나무 느낌
    • 1910년 어린이책 속 황혼을 떠올리게 하는, 컬러화된 우울한 보라색
    • 좋아, 해보자
      중앙아메리카와 미국 남부에서 나는 새콤달콤한 과일을 떠올리게 하는 탁한 노란색
      페인트 설명에서 가져온 문구임

  • 제출하고 나면 일치율 결과를 표시하는 박스의 배경색이 내가 추측한 색으로 바뀜
    맞히는 색에 따라 당연해 보일 수도 있지만, 내 경우 색이 꽤 회색이라 몇 번 추측한 뒤에야 이 중요한 시각적 힌트를 알아챘음

  • 의도치 않게 지각 기반 색 공간의 훌륭한 광고가 됨
    어느 정도 맞춰갈 때는 색을 무시하고 퍼센트 변화만 보는 편이 더 쉬웠음
    Guess My OKLCH 같은 게임이면 달라질지 궁금함

    • 색이 정말 가까워지면 퍼센트가 지각과 완전히 맞지는 않는 것 같음
      95%에서 상한이 걸리는 느낌임

  • 페이지에는 링크되어 있지 않지만, 관심 있는 사람을 위한 GitHub 저장소는 여기 있음
    https://github.com/susam/myrgb

  • 마침 여러 색상 형식을 가르치는 수업 자료를 막 다 썼는데 재밌음
    그 안에서 RGB 값으로 색을 고르는 게 얼마나 어려운지 설명했는데, 인간이 색을 그렇게 생각하지 않기 때문임
    이 게임이 그 좋은 예시임
    HSL은 훨씬 직관적이고, 색상환 감각만 있으면 채도와 명도 수준으로 색을 정의하기가 매우 쉬움

    • HSL이 생각하기 좋은 색 공간이라는 데 완전히 동의함
      학생들에게 자신이 입은 옷 색의 차이를 HSL로 정의해보게 하는 연습을 시킴
      RGB를 개념화하기 어렵다고 느낀다면 Lab도 한번 해보면 됨

  • 첫 번째 색을 한 번에 맞췄고, 이제 여기서부터는 내려갈 일만 남은 것 같아 두려움

  • 뭐가 문제임? 개발자 도구에서 배경색을 확인하고 16단계로 정규화하면 되잖아, 하하
    진짜로는 잘 만들었고, 재밌고 도전적인 게임

  • Guess my HSL 스핀오프도 해보고 싶음

  • 아이디어가 정말 멋짐
    처음 두 번은 빠르게 94%까지 갔는데, 그 뒤로 완전히 막혔음
    94%가 국소 최적점처럼 보였고, 어떤 슬라이더를 한 칸 올리거나 내려도 해결되지 않는 느낌이었음
    이유를 설명할 수 있을까? 또 포기하고 정답을 볼 수 있는 방법이 있으면 좋겠음

    • 나도 이 문제가 있었음
      휴대폰에서 손가락이 두꺼워서 슬라이더를 정확히 한 칸만 움직이지 못하고 두 칸씩 움직이고 있었다는 걸 몰랐음
    • 점수는 이런 식으로 정의됨
      목표 색에서 가능한 최대 오차를 먼저 계산하고, 실제 추측과의 유클리드 거리를 그 최대 거리로 나눠 Math.floor(100 * (1 - dist / maxDist))를 반환함
      매 라운드의 퍼센트가 비슷하게 느껴지도록 하기 위한 방식이라 타당함
      그렇지 않으면 중간 회색은 어떤 추측에서도 상대적으로 높은 점수를 받게 됨
      질문에 답하자면, 말한 국소 최적 상황은 가능하지 않을 것 같음
      수학자는 아니지만 이 함수만 보면 정답이 아닌 이상 항상 한 슬라이더를 움직여 더 높은 점수를 얻는 방향이 있을 것 같음
      아마 그 한 칸 이동을 놓쳤을 가능성이 크고, 정답에 가까워질수록 그런 일이 더 잘 생김
    • 94%라면 위아래로 한 칸만 움직이면 된다는 뜻이라 가능성은 6개임
      하나를 움직였는데 해결되지 않았다면, 다른 것을 움직이기 전에 첫 슬라이더를 원래 위치로 되돌려야 함
    • 그건 가능하지 않을 것 같음
      내가 해봤을 때는 숫자 하나만 바꿔도 일치율이 올라가거나 내려갔음
답변달기