시작
처음 시작은 김지현님께서 작은 토이 프로젝트를 하려 하는데 도와주지 않겠냐는 제의였습니다. 염소와 차 그림이 필요한데 적당한 리소스를 구하기 어렵다는 것이었는데, 그래서 SVG로 그림 그리는것이 취미이기도 한 (제 아카믹 대가리처럼 말이죠) 터라 재밌어보여 테스트로 참여하게 되었습니다.
이 모든걸 풀어내기 전에 몬티홀 문제에 대한 간단한 설명.
- 문이 3개가 있고, 2개의 염소, 1개의 최신형 자동차가 각각 문 뒤에.
- 당신은 문 하나를 선택해 뒤에 있는 물건을 가질 수 있습니다.
- 선택한 직후, 염소가 뒤에 있는 문 1개를 공개합니다. 이제 염소와 차는 각각 하나.
- 이때 당신에게 선택을 바꿀 기회가 주어진다면 바꾸는것이 이득인가?
정답은 바꾸는 것이 2/3확률로 처음 선택했을때의 1/3 확률보다 더 자동차가 있을 가능성이 높습니다. 조건부 확률과 베이즈 정리를 이용해서 계산할 수 있지만 이를 더 직관적으로 설명할 수 있도록 문 개수를 25개 쯤으로 늘리고, 중간에 염소가 있는 문 23개를 공개하는 식으로 만들고, 매 단계마다 문을 조금씩 줄여나가 3개의 문까지로 문제를 축소시켜 사용자가 확률론에 머리를 쥐어싸지 않도록 만들고자 하는것이 이 토이 프로젝트의 목적이었습니다.
직접 해보시면, 선택을 바꿨을때가 차가 있을 확률이 더 높고, 왜 그런지도 직관적으로 알 수 있습니다.
제작과정
저는 그림을 그려드리기도 했지만 테스터겸 UI/UX 피드백을 같이해드렸는데요, 우선 끄적끄적 거려서 한 2~3개정도의 시안을 보여드리고 심플한 단색 계열의 (그리고 직선적이라 그리기 쉬운) 사이버트럭과 염소머리 두가지로 결정되었습니다.
이후 이 리소스들을 넣고 함께 테스트를 해보았는데, 이 버전에선 문을 클릭하면 그 어떤 딜레이도 없이 바로 염소와 차가 나타나는 식이었는데 여기서 문제가 있었습니다. 의사 결정후 결과가 너무 즉시 나타나는데, 염소가 부정적인 것이고 차가 긍정적인 것이라는 것을 사용자가 잘 이해하지 못했습니다. 제가 생각하기엔 우선 같은 명도이기도 하고, 연상하기에도 염소와 부정적인 부분을 바로 연결시키기 어려운 것이었죠.
그래서 제가 냈던 안들은
- 선택후 염소를 축소하고 차를 확대하는 애니메이션을 추가한다
- 염소와 차에 대문짝만하게 OX를 그려넣어 사용자의 선택이 어느쪽인지 더 직관적으로 나타낸다
- 염소를 더 사악하게 그려넣어 좋지 않은 선택이었음을 나타낸다(?!)
실제로 만들었던 "사악한 염소" 안
였고, 첫번째 안과 두번째 안을 적당히 섞어 채택해 선택후 축소/확대되는 애니메이션과 OX가 추가 되었습니다. 또 이 과정에서 발안해낸것으로 이미 제외된 n-2개의 염소들의 명도를 낮춰 이들이 중요하지 않다는걸 더욱 명시적으로 나타내자는 데 동의 해 현재 버전에 이르게 되었습니다.
그래서 원래대로라면 현재의 10X10개의 문을 완료하면, 8X8, 4X4, 2X2, 3개의 문으로 줄여나가는 것도 목표에 있었습니다만, 이미 이정도로도 꽤 충분히 문제를 직관적으로 이해할 수 있게 되어 (그리고 토이프로젝트치고 그 부분은 공수가 좀 많이 들어가게되는 관계로) 이정도에 멈추게 되었습니다.
이런 프로젝트에 참여하게 해주셔서 김지현님께 대단히 감사드립니다!