착시로 인해 버튼의 크기가 달라보이는 이슈

발생일: 2017.02.24

키워드: 착시, 버튼, 테두리

문제:

같은 크기의 버튼 두 개를 연달아 배치했다. 그런데 어두운 배경의 버튼이 더 작게 보인다. 왜 그런 걸까?

해결책:

대표적인 착시의 문제였다.

두 버튼의 테두리 색깔은 동일했지만, 착시로 인해 어두운 배경의 버튼의 테두리가 원래 색깔보다 더 밝게 보였기 때문이다.

아래 이미지를 보면 쉽게 이해할 수 있다.

비율과 가격 버튼의 테두리는 모두 밝은 회색이지만, 비율 버튼의 배경이 더 어두워서 실제 테두리의 색깔보다 더 밝게 보인다. 밝은 회색이었던 테두리 색깔이 흰색 배경과 가까워져 배경처럼 인식되었기 때문에, 상대적으로 버튼이 더 작게 보이는 것이다.

여기서는 두 버튼이 같은 크기로 보이도록 하기 위해서, 인위적으로 어두운 배경의 버튼의 테두리 색깔을 더 짙게 변경했다.