brunch

You can make anything
by writing

- C.S.Lewis -

by UX 컨설턴트 전민수 Sep 08. 2016

말줄임표(...) UX 설계 5원칙

UX 디자인 배우기 #32

전민수 UX 컨설턴트 소개 

안녕하세요. 전민수 UX 컨설턴트입니다. 지난 23년간 수행했던, UX 컨설팅 경험과 강의 이력을 소개합니다. 


전민수 UX 샘의 [인프런] 인터넷 강의 안내입니다 


[클럽하우스] 전민수 UX 샘의 재능 기부 UX 공개 수업 
[UI/UX/리서치/방법론] 우리 모두 함께 공부해요~ 


클럽하우스에서 [전민수 샘의 UX 공개 수업]을 진행하고 있습니다.

매주 수요일/금요일 밤 9시-11시까지 UX/리서치/방법론 등 하루에 하나의 주제를 선정하여 깊이 있는
공개 강의를 하고 있습니다. 바로 이어서, 뒷풀이방(11시-12시)은 [UX A-Z 모든 것] 고민 상담을 하고 있으니, 혹시, 궁금하거나 고민이 있으면, 저한테 무엇이든지 물어보세요~ 가능한 제가 아는 범위에서 최대한 알려 드리겠습니다.

 
여러분 모두 화이팅!!!!!  


그리고, 아래 링크를 클릭하고, 저를 팔로우 해주시면 [공개 강의] 혹은 [비정기 강의] 열릴때마다,
여러분께 알림이 갈거에요~


UI/UX 카페 소개 (카페명: 클럽하우스 UX Book Q&A Club)
국내/해외 UI&UX 10,000개 이상 아티클 공유 및 세부 카테고리 분류

카페는 UX 자료 공유 목적으로 운영되고 있으며, 카페 가입 시 바로 승인됩니다. 




Today UX 아티클


Medium에 게재된 John Saito의 글 TheMighty Ellipsis: How 3 little dots can say so much를 소개하고자 합니다. 


지난 수십 년간 인터페이스 디자이너들은 모든 종류의 중요한 세부사항을 유저에게 전하는 데 생략을 나타내는 문장 부호 ‘…’을 사용했다고 합니다. 이 글에서는 이 점 3개가 인터페이스 디자인에서 활용된 방식 5가지를 소개하고 있습니다. 


말줄임표= “추가 결정 사항이 있습니다”


글쓴이가 인터페이스에서 처음 말줄임표를 본 것은 그가 쓴 첫 번째 컴퓨터, 윈도 3.1이라고 합니다. 일부 버튼이나 메뉴에서 사용되어 클릭하면 추가로 결정해야 할 것이 있음을 나타냈다고 합니다. 



여기서 말줄임표는 해당 액션이 즉시 일어나진 않을 것이라는 확신을 갖게 해 주고, 원할 때 해당 액션을 취하고 마음이 바뀌면 취소할 수 있음을 나타내는 데 유용하게 사용되었다고 합니다. 


여전히 윈도우나 맥에서 사용되지만 이전보단 훨씬 적게 사용되고 있다고 합니다. 다음 두 이미지는 지난 20년간 우리가 얼마나 발전해왔는지 보여준다고 합니다. 


Windows NT (1993): 말줄임표가 어디나 있습니다.
Windows 8 (2013): 말줄임표가 다 어디로 갔을까요?


구글 머티리얼 디자인 가이드라인에서는 메뉴 항목과 버튼에서 말줄임표를 없애기를 권장하고 있다고 합니다. 많은 옵션에 결국 추가로 결정해야 할 부분이 있기 때문에 모든 곳에 말줄임표를 쓰는 거은 인터페이스를 어지럽힐 수 있기 때문이라고 합니다. 


이런 말줄임표 사용 패턴은 이제 유행이 지났지만, 글쓴이는 지금까지 사람들이 결정을 내리는 데 도움을 주는 귀한 역할을 이 작은 점 3개가 잘 담당한 것으로 평가하고 있습니다. 


말줄임표 = “여기에 입력하세요”


최근에는 많은 제품에서 텍스트 입력란을 나타내는 데 말줄임표를 사용하고 있다고 합니다. 요즘 유행이라고 합니다. 



누가 시작했는지 모르지만, 글쓴이가 찾은 가장 빠른 사례는 2008년 버전의 페이스북이라고 합니다. 



글쓴이는 말줄임표가 이렇게 사용된 이유를 다음 두 가지로 추측하고 있습니다. 


1) 시각적 효과: 페이지에 있는 모든 것 중에 텍스트 입력란을 알아보기 어려울 때도 있는데, 말줄임표는 텍스트 입력란이 시각적으로 눈에 띄게 만들어 주어 관심을 끈다고 합니다. 


2) 심리적 효과: 본래 말줄임표는 글자가 생략되었음을 나타내는 것으로, 무언가 빠졌다는 의미를 전달한다고 합니다. 때문에 유저가 직접 단어를 채워 넣도록 유도한다고 합니다. 


심지어 일부 스타일 가이드라인에서는 모든 텍스트 입력란에 말줄임표를 쓰도록 권장하고 있다고 합니다. 이런 걸 보면 말줄임표를 “여기에 입력하세요”라는 뜻으로 사용하는 것이 유행임을 알 수 있다고 합니다.


말줄임표 = “더 많은 액션”


점점 더 많은 앱에서 가로 말줄임표(…)를 더 많은 액션이 있는 메뉴를 나타내는 데 사용하고 있다고 합니다. 기본적으로 “여기 할 수 있는 게 더 있습니다.”라는 의미를 전달한다고 합니다. 



많은 안드로이드 앱에서는 같은 의미를 전달하는 데 세로 말줄임표 (⋮)를 많이 사용하고 있다고 합니다.



어떤 사람들은 이런 디자인이 중요한 액션을 숨겨버릴 수 있어 좋아하지 않지만, 햄버거 메뉴처럼 UI 디자인의 뜨거운 트렌드가 된 것은 부정할 수 없다고 합니다. 인터페이스 디자이너들이 단순하게 만들려고 노력하는 만큼, 말줄임표를 이렇게 활용하는 경우는 점점 더 많아질 것이라고 합니다. 


말줄임표 = “잠시만 기다려주세요”


말줄임표는 진행 중인 액션을 표현할 때도 흔하게 사용된다고 합니다. 예를 들면 “로딩 중…”, “연결 중…”, “업로딩 중…”등이 있습니다.



진행 중인 액션을 나타내는 말줄임표에 너무 익숙해진 나머지 아래와 같이 진행 부호를 사용하지 않으면 무언가 잘못되었거나 멈춰버렸다는 생각을 하게 된다고 합니다. 



많은 디자인 가이드라인에서 유저가 기다려야 할 때 애니메이션을 사용하라고 추천하지만, 유저가 몇 초만 기다리면 된다면 말줄임표도 무언가 진행 중임을 나타내는 지표로 도움을 줄 것이라고 합니다. 


말줄임표 = “글자가 더 있습니다”


말줄임표는 지나치게 길어진 단어를 줄일 때도 사용된다고 합니다. 주로 파일 이름이 길어질 때 볼 수 있다고 합니다.



초반에는 파일 이름이 길어지면 끝부분을 잘라버렸는데, 요즘에는 중간을 잘라서 끝에 있는 글자를 읽을 수 있게 만드는 경우도 많다고 합니다. 보통 마지막 몇 글자가 가장 중요하기 때문에 똑똑한 방법이라고 합니다. 만일 이렇게 줄여주는 효과가 없으면 아래처럼 모든 텍스트가 겹쳐져서 보이는 재앙이 있었을 거라고 합니다. 



이처럼 말줄임표는 작지만 강력한 기능을 한다고 합니다. 



매거진의 이전글 UX 디자이너가 알아야 할 이미지 UX설계 원칙

매거진 선택

키워드 선택 0 / 3 0

댓글여부

afliean
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari