사람들은 습관적으로 버튼을 누릅니다. 버튼의 위치에 따라 의도치 않게 취소 버튼을 눌러 작업을 반복하는 일이 생길 수 있습니다. UX에서는 버튼 위치를 어떻게 선택하는지 두 가지 관점을 소개해 보겠습니다.
이 글을 읽을 때 "특정 행동을 유도하는 버튼"에 기준을 두면 이해하는 데 도움이 될 것입니다. 특정 행동은 다음에 수행할 행동일 수 있고 상대적으로 중요한 작업일 수 있습니다. 이 글에서는 이 행동 유도 버튼을 작업 버튼이라고 명칭하겠습니다.
작업 버튼의 위치를 결정하는 데는 두 가지 관점이 있습니다.
인지 관점
인지심리학 관점
이 두 가지 관점에 대해 자세히 알아보겠습니다.
1. 인지 관점
'인지'는 버튼을 보고 이해한 다음 행동을 결정하는 것을 말합니다. 저는 인지심리학보다 좀 더 '직감'적인 사고 과정으로 이해했습니다.
시선의 흐름=글의 흐름 한국은 글을 왼쪽에서 오른쪽으로 읽습니다. 자연스럽게 왼쪽에서 오른쪽으로 시선이 이동하기 때문에 중요한 작업버튼을 시선이 먼저 닿는 왼쪽에 두는 것입니다. 그렇게 하면 취소 버튼을 읽지 않아도 확인 버튼을 누를 수 있게 됩니다. *이 내용은 뒤에서 다룰 인지심리학 관점에서는 다르게 활용됩니다.
말의 순서 말을 하거나 생각을 할 때 선 긍정 후 부정의 순서(예: 할까, 말까?)이기 때문에 긍정 버튼을 먼저 배치한다고 합니다.
2. 인지심리학 관점
'인지심리학'은 인지 과정에서 뇌가 어떻게 정보를 처리해서 행동을 결정하는 것을 연구하는 학문입니다. 저는 직감 뒤에 오는 '뇌'의 정보처리 과정으로 이해했습니다.
시선의 흐름=글의 흐름 시선의 흐름이 왼쪽에서 오른쪽으로 흐르기 때문에 자연스럽게 마지막에 작업버튼을 오른쪽에 둡니다. 인지 관점과 이유는 동일합니다. 하지만, 어떤 글에서는 확인, 취소 버튼을 두어도 확인→취소→확인으로 시선이 다시 이동하기 때문에 시선의 이동이 불필요하다고 본 것입니다.
Right의 중의적 의미 오른쪽을 영단어로 Right라고 씁니다. Right는 긍정의 의미(옳은)와 오른쪽을 의미합니다. 따라서 오른쪽에 긍정적인 버튼을 두기도 합니다.
스위치의 위치 스위치의 위치를 보면 OFF가 왼쪽이고 ON이 오른쪽입니다. 그 배치와 동일하게 오른쪽에 버튼을 배치합니다.
다른 컴포넌트의 순서(예: Pagination) 다른 컴포넌트를 예로 들어보겠습니다. 이전 버튼(<)은 왼쪽에, 다음 버튼은 오른쪽(>)에 위치합니다. 따라서 이전 작업버튼은 왼쪽, 다음 작업버튼을 오른쪽에 두는 것입니다. MUI의 Pagination
엄지 영역(Thumb Zone) 개인적으로 모바일 OS에서 인지심리학을 차용하는 이유에 대해 생각해 보았습니다. 모바일 기기에는 엄지손가락이 이동하는 영역을 엄지 영역(Thumb zone)이라고 합니다. 엄지 영역에 주요 작업버튼들을 위치시키면 좋습니다. 네비게이션 바가 밑에 있는 경우가 많은 이유도 그중 하나입니다. 그래서 다음 작업이 엄지에 쉽게 닿을 수 있기 때문에 취소 버튼을 멀리 두었을 가능성도 생각해 보았습니다.
버튼 위치가 헷갈리는 이유는 어찌 보면 당연합니다. OS 별로 다른 관점을 적용하고 있기 때문입니다.
윈도우는 작업버튼을 왼쪽에 배치합니다. 예를 들어, 확인-취소 순으로 배치합니다.
애플, 구글은 작업버튼을 오른쪽에 배치합니다. 예를 들어, 취소-확인 순으로 배치합니다.
나는 현재 프로젝트가 웹 기반이기 때문에 인지 관점을 사용하여 왼쪽에 작업버튼을 배치했습니다. 앱 기반이라면 인지심리학 관점에서 오른쪽에 작업버튼을 두었을 것입니다.
선택의 조언
하나로 통일하면 좋겠지만 두 가지 관점을 모두 사용하고 있는 상황에서 맞고 틀린 것은 없다고 생각합니다. 서비스의 특성에 따라 직감을 따르는 인지 관점으로 할지 뇌의 정보 처리 과정을 따르는 인지심리학 관점으로 할지 선택하면 좋겠습니다. 그럼에도 웹, 모바일 유저를 모두 고려할 경우 고민이 될 수 있습니다. 그럴 때는 어떤 관점을 선택하든 중요도에 따라 버튼 컬러를 다르게 해서 시각적으로 중요도를 분리하면 더 좋을 것 같습니다. 하나의 요소로만 문제를 해결하지 않고 다른 요소도 복합적으로 사용한다면 더 좋은 UX를 만들 수 있을 것이라고 믿습니다.
피그마 웹에서 기본으로 제공되는 폰트는 Google fonts인데요. 기본 글꼴 외에 다른 글꼴을 사용하고 싶은 경우에는 별도의 설정이 필요합니다.
로컬 폰트를 사용하는 두 가지 방법
피그마에서 로컬 폰트를 사용하기 위해서는 두 가지 방법 중에 선택하시면 됩니다.
1. <피그마 데스크톱 앱> 설치하기 2. <글꼴 설치 프로그램> 설치하기
피그마 데스크톱 앱을 설치하면 Figma font helper가 포함되어 있기 때문에 2번을 건너뜁니다.
저는 데스크톱 앱을 사용하지 않기 때문에 <웹에서 로컬 폰트를 사용하는 방법>을 소개하겠습니다.
그 이전에 안내사항을 읽어주시고 설정에 참고하시길 바랍니다.
⚠️ 로컬 폰트 관련 안내사항 - 공유된 팀 사용자의 경우, 모든 팀원이 동일한 로컬 폰트를 컴퓨터에 설치해주셔야 합니다. - 참고로, 피그마는 .TTF .OTF 폰트 파일만 지원합니다. - 피그마는 ChromeOS, Linux 운영체제의 기기에서는 로컬 폰트를 지원하지 않습니다. 기본 폰트를 사용해주세요.
[Windows] 로컬 폰트를 컴퓨터에 설치하는 방법 1. 폰트를 다운로드합니다. 2. C:\\Windows\\Fonts 위치에 폰트 파일을 붙여넣기하면 설치가 완료됩니다.
