Akamig

Development2022-03-21T16:31:51.202ZRev.2

김지현님과의 몬티홀 문제 토이프로젝트 UI/UX 설계 경험

시작

처음 시작은 김지현님께서 작은 토이 프로젝트를 하려 하는데 도와주지 않겠냐는 제의였습니다. 염소와 차 그림이 필요한데 적당한 리소스를 구하기 어렵다는 것이었는데, 그래서 SVG로 그림 그리는것이 취미이기도 한 (제 아카믹 대가리처럼 말이죠) 터라 재밌어보여 테스트로 참여하게 되었습니다.

이 모든걸 풀어내기 전에 몬티홀 문제에 대한 간단한 설명.

  1. 문이 3개가 있고, 2개의 염소, 1개의 최신형 자동차가 각각 문 뒤에.
  2. 당신은 문 하나를 선택해 뒤에 있는 물건을 가질 수 있습니다.
  3. 선택한 직후, 염소가 뒤에 있는 문 1개를 공개합니다. 이제 염소와 차는 각각 하나.
  4. 이때 당신에게 선택을 바꿀 기회가 주어진다면 바꾸는것이 이득인가?

먼저 한번 해보시는걸 추천합니다.

정답은 바꾸는 것이 2/3확률로 처음 선택했을때의 1/3 확률보다 더 자동차가 있을 가능성이 높습니다. 조건부 확률과 베이즈 정리를 이용해서 계산할 수 있지만 이를 더 직관적으로 설명할 수 있도록 문 개수를 25개 쯤으로 늘리고, 중간에 염소가 있는 문 23개를 공개하는 식으로 만들고, 매 단계마다 문을 조금씩 줄여나가 3개의 문까지로 문제를 축소시켜 사용자가 확률론에 머리를 쥐어싸지 않도록 만들고자 하는것이 이 토이 프로젝트의 목적이었습니다.

직접 해보시면, 선택을 바꿨을때가 차가 있을 확률이 더 높고, 왜 그런지도 직관적으로 알 수 있습니다.

제작과정

저는 그림을 그려드리기도 했지만 테스터겸 UI/UX 피드백을 같이해드렸는데요, 우선 끄적끄적 거려서 한 2~3개정도의 시안을 보여드리고 심플한 단색 계열의 (그리고 직선적이라 그리기 쉬운) 사이버트럭과 염소머리 두가지로 결정되었습니다.

이후 이 리소스들을 넣고 함께 테스트를 해보았는데, 이 버전에선 문을 클릭하면 그 어떤 딜레이도 없이 바로 염소와 차가 나타나는 식이었는데 여기서 문제가 있었습니다. 의사 결정후 결과가 너무 즉시 나타나는데, 염소가 부정적인 것이고 차가 긍정적인 것이라는 것을 사용자가 잘 이해하지 못했습니다. 제가 생각하기엔 우선 같은 명도이기도 하고, 연상하기에도 염소와 부정적인 부분을 바로 연결시키기 어려운 것이었죠.

그래서 제가 냈던 안들은

  1. 선택후 염소를 축소하고 차를 확대하는 애니메이션을 추가한다
  2. 염소와 차에 대문짝만하게 OX를 그려넣어 사용자의 선택이 어느쪽인지 더 직관적으로 나타낸다
  3. 염소를 더 사악하게 그려넣어 좋지 않은 선택이었음을 나타낸다(?!)

사악한 염소

실제로 만들었던 "사악한 염소" 안

였고, 첫번째 안과 두번째 안을 적당히 섞어 채택해 선택후 축소/확대되는 애니메이션과 OX가 추가 되었습니다. 또 이 과정에서 발안해낸것으로 이미 제외된 n-2개의 염소들의 명도를 낮춰 이들이 중요하지 않다는걸 더욱 명시적으로 나타내자는 데 동의 해 현재 버전에 이르게 되었습니다.

그래서 원래대로라면 현재의 10X10개의 문을 완료하면, 8X8, 4X4, 2X2, 3개의 문으로 줄여나가는 것도 목표에 있었습니다만, 이미 이정도로도 꽤 충분히 문제를 직관적으로 이해할 수 있게 되어 (그리고 토이프로젝트치고 그 부분은 공수가 좀 많이 들어가게되는 관계로) 이정도에 멈추게 되었습니다.

이런 프로젝트에 참여하게 해주셔서 김지현님께 대단히 감사드립니다!