어쩌면... '본다'라는 행동에 대한 잡담 2
라운드 버튼 vs 각진 버튼
여러분은 어떤 형태의 버튼을 좋아하십니까?
1번같이 날카롭게 각진 버튼? 또는 2번 같은 둥근 모서리? 또는 요즘 대세 3번? 하나를 선택했다면 그 이유는 무엇인가요? 누군가가 여러분의 디자인을 보며 버튼의 형태를 마음에 들지 않는다고 지적한다면 여러분은 어떻게 얘기하실 건가요? 혹시 ‘예쁘다’라는 단어가 머릿속을 떠다니진 않으신가요? 조심스럽게 예측해보자면 대부분 어떤 형태가 현재 트렌드에 맞는지, 어떤 버튼이 더 예쁜지가 기준이고 쟁점이 된다고 생각해요. 지금까지 모서리 라운드 값을 정하는 데 있어서 합리적인 관점으로 토론을 해본 적은 없는 것 같습니다. 어떤 블로그에서 봤던 라운디드 버튼이 효율이 더 높다는 내용이 스치듯 있던 게 전부였었어요. A/B Test 한 결과인지는 모르겠습니다. 저는 이런 테스트는 해본 적은 없어서 모르겠지만 누군가가 이를 근거로 제시한다면 아무말 못할 것 같아요. 데이터는 가장 설득력 있는 근거니까요. 그런데 여전히 궁금증이 남습니다.
만약에 라운디드 버튼의 효율이 높다면 왜 그럴까?
이유는 단순합니다. 날카로운 모서리의 사각형을 보는 것보다 둥근 사각형을 보는 것이 인지 비용이 적기 때문입니다.
Jürg Nänni라는 인지과학자는 우리 눈의 ‘중심와’는 원을 기록하는 것이 훨씬 빠르며, 각진 모서리를 인지하는 데에는 추가적인 이미지 처리 신경이 필요해서 프로세스가 느려진다고 얘기합니다. 구체적인 그림으로 보면 아래와 같습니다.
각진 모서리를 시각화하기 위해 뇌는 A에서 B를 스캔한 뒤 잠시 멈췄다가 C로 이동합니다. 따라서 직사각형의 경우는 4번의 계산이 필요한 셈입니다. 그러나 둥근 모서리는 인지 멈춤 현상이 발생하지 않으며, 눈이 부드럽게 가장자리를 스캔할 수 있어 한 번만 계산하면 되기 때문에 인지가 편하게 됩니다.
우리가 이렇게 계산하게 된 배경에 대해서는 칼이나 각진 모서리에 부딪혀 다칠 수 있기 때문에 멀리하도록 교육을 받았거나 경험적인 이유라고 얘기하기도 합니다. 날카로운 모서리는 ‘조심해’, ‘날 만지면 다칠 수도 있어’라는 시각적 언어를 내포하며, 둥근 형태는 ‘편안함과 안전함’의 시각적 언어를 가지고 있기도 합니다.
신경 과학자들은 각진 모서리에 대한 우리의 혐오감을 ‘회피성 반응’ 또는 ‘윤곽 편향’이라고 부릅니다. 의미(예 : 절단에 사용됨)와 그것이 유발하는 감정(예 : 위협 고통, 공포)을 기반으로 기각적 객체에 대한 부정적인 편향을 형성하는 경향이 있습니다. 인간은 그렇게 진화해왔습니다.
Designmodo의 Keith Bryant가 쓴 글 'Rounded Corners and Why They Are Here to Stay’ 중에서. [1]
이러한 이론을 바탕으로 적극적으로 둥근 모서리 디자인을 가장 잘 사용한 경우는 iOS 10과 핀터레스트라고 생각했습니다. 처음 iOS 10을 봤을 땐 개인적으로 조금 놀랐었어요. 375 기준 라운드 값을 2~4에서 고민하던 제게 4~12라는 충격적인 숫자를 던졌으니까요. 이렇게 극단적인 라운딩을 사용한 이유가 궁금했습니다. 그런데 GUI 역사상 가장 처음 둥근 모서리를 사용한 것이 애플이었다는 사실과- 36년 전입니다. 위에서 얘기한 인지 비용 이론을 듣고 납득했습니다. 둥근 모서리는 우리 주위에 널려있다는 스티브 잡스 말을 애플이 다시 상기시켰나 봅니다.
iOS 10
그런데 여기에서 또 하나의 궁금증이 생깁니다. ‘그렇다면 닥치고 둥근 모서리로 디자인해야 하나?’
우리가 말을 할 때, 또는 글을 쓸 때 이상적인 화법이나 문체는 존재하지 않습니다. 디자인도 시각언어라서 정답이 존재하지 않습니다. 때로는 강하게, 때로는 부드럽게 상황에 맞는 화법을 찾아야겠죠. 독설은 상처가 될 수도 있고 유머가 될 수도 있습니다. 모든 것은 우리의 목적과 상황에 맞게 사용해야 한다는 다소 원론적인 결론을 말할 수밖에 없어서 죄송합니다. 그래도 기본적으로 라운디드 코너가 친근하고 편하게 다가오는 것 같습니다. 긴장감을 주기 위해 날카로운 모서리를 사용할 수도 있겠죠. 적어도 이제 트렌드와 심미적인 관점을 벗어나 디자인 언어를 선택할 수 있을 것 같습니다.
자, 여러분.
이렇게 우리는 방어논리 +1을 획득했습니다.
새해에도 건승하세요.
Happy New Year.
_
[1] 'Rounded Corners and Why They Are Here to Stay’ - Keith Bryant, 2012.
https://designmodo.com/rounded-corners/
제 영어 실력이-구글 번역기가 엉망이라 일부 해석이 잘못됐을 수도 있습니다.
_
관련 글
_
UI/GUI Designer @ coupang
Personal Site : http://www.frozensound.com
