brunch

라이킷 179 댓글 3

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by BUNDI Jun 12. 2020

UI 해부학 - 텍스트를 입력하세요

근데 어떻게요?

안녕하세요. 오랜만입니다. 개인적으로 재충전의 시간을 가지고 돌아왔습니다.

내용을 입력하거나 수정하는데 반드시 필요한 UI가 있죠. 텍스트 필드입니다. 사용자가 서비스와 직접적으로 소통하기 위해 필요한 텍스트 필드는 어떻게 만드는 게 좋을까요. 좋은 방법을 생각하기 위해 텍스트 필드를 구성하는 요소 하나하나를 분석한 아티클을 가져왔습니다.

https://uxdesign.cc/text-fields-forms-design-ui-components-series-2b32b2beebd0

Text fields & Forms design — UI components series

Simple rules that will help you design forms users will like to complete

uxdesign.cc

*지금부터는 위 아티클에 대한 번역입니다.

*구체적인 용어들은 혼돈을 막기 위해 영문을 사용했습니다.

*부족함이 많아 의역도 많고, 욕심이 많아 부가설명도 많습니다.

텍스트 필드 & 폼 디자인 - UI 구성요소 시리즈.

사용자들이 기꺼이 정보를 입력하게 만드는 텍스트 필드 & 폼 디자인의 비결.

폼(양식)은 오래전부터 존재해왔습니다. 폼은 여러 불편 사항과 법과 관련된 애로사항을 단순화하여 빠르게 처리하기 위해서 자주 쓰여왔습니다. 정보가 발전하고 정보 처리 능력이 발전하면서, 데이터를 모으는 방법 역시 진화했습니다.

텍스트 필드 구성요소.

텍스트 필드는 사용자가 텍스트를 입력하는 UI입니다. 텍스트 필드는 주로 정보를 입력해야 하는 폼 또는 채팅과 같은 대화 부분에 주로 사용됩니다. 텍스트 필드 요소는 원활한 인터렉션을 위해 명확하게 행동을 유도할 수 있어야 합니다. 레이아웃에서 쉽게 찾을 수 있어야 하고, 쉽게 작성할 수 있어야 하고, 쉽게 접근할 수 있어야 합니다.

기본적인 텍스트 필드의 구성요소 :

1. Container — 사용자가 정보를 입력할 수 있는 인터렉션 영역

2. Input text — 입력된 정보

3. Label Text — 이 텍스트 필드가 어떤 정보를 입력하는지를 나타내는 지표.

4. Placeholder text — input text가 입력되기 전에 사용자들이 정보를 입력할 수 있게끔 임시로 채워져 있는 텍스트 (예를 들면 비밀번호 입력 란에 '비밀번호를 입력하세요'와 같은 palceholder text 가 사용될 수 있습니다). 실제로 사용자가 input text를 채워 넣으면 placeholder text는 사라집니다.

5. Helper or Validation text(선택사항) — 정보 입력에 대한 추가 정보를 제공하거나, 입력한 정보가 기준에 부합하는지와 같은 기준을 제공하기도 합니다. 필수가 아니며 선택적으로 사용됩니다.

6. Leading icon(선택사항) — 입력하는 정보를 뒷받침하는 아이콘입니다. 필수가 아니며 선택적으로 사용됩니다.

7. Trailing icon(선택사항) — 입력된 정보에 대한 부가적인 기능을 담당합니다 (예를 들면 입력된 텍스트를 한 번에 지우기 위한 X아이콘, 비밀번호를 ***에서 텍스트로 보기 위한 눈알 아이콘이 사용될 수 있습니다).

텍스트 필드 종류.

모든 텍스트 필드는 위에서 살펴본 기본 형태에서 출발합니다. 정보를 조금 더 세부적으로 다루기 위해 기본 형태에서 변주가 시작됩니다. 예를 들어 신용카드 번호 입력하는 폼은 신용카드 번호 양식에 맞게 변형되어 사용될 수 있습니다. 지금부터는 널리 통용되어 사용되고 있는 텍스트 필드 UI들을 살펴보겠습니다.

모으고 싶은 데이터에

가장 최적화된 텍스트 필드 선택하기.

사용자에게 서비스가 요구하는 데이터를 확보하기 위해서는 올바른 텍스트 필드가 필요합니다. 올바른 텍스트 필드가 있어야 사용자들은 정보를 제공하는 과정에서 올바른 정보를 제공하고, 실수하지 않고, 쉽고 효과적으로 정보를 제공할 수 있기 때문입니다.

신용카드 번호를 입력하려면, 신용카드 번호에 최적화된 텍스트 필드가 필요하겠죠?

텍스트 필드의 모습은

텍스트 필드의 상태에 따라,

그리고 사용자 인터렉션에 따라 바뀌어야 합니다.

이를 가능하게 하기 위해서는, 텍스트 필드의 상태를 사용자에게 알려줄 수 있는 시각적인 힌트가 반드시 필요합니다. 텍스트 필드가 취할 수 있는 상태는 다음과 같습니다 : inactive(디폴트 상태), hover(입력하려고 마우스를 올렸을 때, 혹은 터치를 했을 때. 마우스나 손가락이 위에 떠있다는 의미로 Hover라고 부릅니다), disabled, focused, validation, error. 텍스트 필드의 모든 상태들은 서로 다른 상태와 명확하게 구분되어야 하고, 서비스 전체적으로 이런 구분 방법이 동일하게 적용되어 통일성을 유지해야 합니다. 가장 좋은 방법은 통용되고 있는 텍스트 필드의 모델들에 반하지 않고 충실히 따르는 것입니다.

최선의 텍스트 필드 선택하기.

아마도 Label을 사용하는데 3가지 옵션 중이 있을 것입니다 : top, left, and right-aligned. 가장 좋은 선택은 텍스트 필드가 가지고 있는 목표, 그리고 폼의 크기, 컴포넌트 라이브러리 (또는 디자인 가이드라인), 그리고 당신이 지금 디자인하고 있는 플랫폼 (모바일, 웹, 또는 기타 등등)에 따라 갈릴 것입니다. 서로 다른 텍스트 필드 선택지들은 저마다의 장단점을 가지고 있습니다.

Underline 형식은 메터리얼 디자인 가이드라인으로 유명해졌으나, 최선의 선택이라고는 볼 수 없습니다. 그리고 이미 큰 화면에서는 Underline 형식이 적응해야 하는지에 대한 연구가 진행되고 있습니다. 또 다른 흥미로운 연구로, 사람들은 모서리가 둥글게 라운드 처리가 된 텍스트 필드를 선호한다는 연구도 있습니다.

Left - aligned Label.

서비스가 사용자에게 요구하는 데이터가 사용자에게 친숙하지 않을 때 사용하면 좋습니다.

장점 : Label의 크기를 조절하기 쉽습니다. 수직(위, 아래) 공간을 활용하기 좋습니다.

단점 : Label과 텍스트 필드 사이가 떨어져 있기 때문에, 사용자가 정보를 입력하는데 시간이 더 걸립니다.

눈이 왔다 갔다를 반복해야 하니, 입력하는데 시간이 더 걸립니다.

Right - aligned Label

Left- -aligned label과 비교했을 때 거의 두 배 빠르게 정보를 입력할 수 있습니다.

장점 : 텍스트 필드와 Label이 매우 가깝게 붙어있어, 눈이 덜 움직이다 보니 시간을 크게 단축할 수 있습니다.

단점 : 빠르게 전체적인 폼을 훑어 보여, 여기서 어떤 정보를 요구하고 있는지 한눈에 파악하기 어렵습니다.

정렬이 바뀌면서 입력은 빠르게 가능하지만, 전체적으로 어떤 정보를 입력해야 하는지를 살피기가 어려워집니다.

Top - aligned Label.

대부분의 경우에서 가장 빠른 정보 입력 시간을 자랑합니다. 특히 모바일에서 그 힘을 발휘하는데, 모바일은 가로(좌, 우) 영역을 그리 신경 쓰지 않기 때문에 유용합니다.

장점 : Label과 Input text가 바로 붙어있어서 한 번만 봐도 어떤 내용을 입력해야 하는지 알 수 있습니다. 가장 빠른 정보 입력 시간을 자랑합니다.

단점 : 수직(위, 아래) 영역을 많이 차지합니다.

위, 아래 영역을 조금 포기하는 대신 가장 빠르게 입력이 가능합니다. 모바일에서 특히 자주 볼 수 있는 모습입니다.

텍스트 필드의 길이는

사용자가 입력한 정보의 양에 비례해야 합니다.

모든 텍스트 필드의 길이를 통 일하는 건 보기엔 좋을지는 모르겠지만, 정보를 입력하는 데는 힘들 수 있습니다.

정보의 양에 따라 각기 다른 길이를 사용해보세요. 어떤 정보를 얼마나 입력해야 하는지 알 수 있어서 더욱 쉽게 텍스트 필드를 채워나갈 수 있습니다.

Placeholder은

Label의 대체제가 아닙니다.

입력을 시작하면 사라지는 Placeholder은 사용자의 단기 기억 능력에 의존합니다. 라벨이 없이는 사용자들은 어떤 텍스트 필드에 어떤 내용을 입력해야 하는지, 그 많은 내용을 전부 기억하지 못합니다. 만약 정말 미니멀한 디자인을 텍스트 필드에 적용하고 싶다면, 메터리얼 디자인의 Floating label을 참고해보세요.

Placeholder가 input text에 위치하게 되면 사용자들을 헷갈리게 만들 수도 있습니다. 텍스트 필드에 대한 힌트는 될 수 있으면 밖에 두는 것이 좋습니다.

입력하면 사라지는 Placeholder. 순간 기억력이 좋으면 상관없겠지만, 10개가 넘어가는 걸 기억할 자신이 있으신가요?

사용자들이 정보를 입력할 수 있도록 도와주세요.

여러 텍스트 필드로 쪼개져있는 정보들을 잘 마무리할 수 있도록, Auto-Complete 기능으로 사용자들을 도와주세요. 자동 완성 기능은 사용자들이 input box에 텍스트를 입력하고, 하단에 생성되는 옵션들을 선택하여 바로 입력할 수 있을 때 빛을 발합니다.

입력한 텍스트로 추론할 수 있는 연관 키워드와 용어들을 찾아서 사용자들에게 제안해주세요. 그리고 찾은 키워드 및 용어들을 드롭다운 형식으로 제안해주세요.

기본적으로 입력되어 있는 디폴트 영역을 똑똑하게 채워주세요. 아마 당신은 사용자가 어디에 사는지, 어떤 도시에 사는지를 IP 또는 위치정보를 통해 알 수 있을 것입니다. 이를 토대로 가장 사용자들이 선택할 만한 지역이나 도시를 미리 예측하고 텍스트 필드에 디폴트 값으로 채워 넣을 수 있습니다. 물론 어떤 정보를 미리 채워 넣어 둘진 상황에 따라 다릅니다. E-Commerce에서는 구매와 관련된 모든 옵션 (예를 들면 사이즈 또는 컬러) 은 무조건 비워두고, 사용자에게 전적으로 맡기는 것이 좋습니다 (아마 선택을 강요한다는 느낌을 줄 수 있어서 그런 것 같네요).

상황에 따라 필요한 정보들도 제공해주세요. 만약 당신이 어떤 텍스트 필드에 입력한 내용이 사용자들이 자주 실수하고, 그 원인을 알고 있고, 실수를 줄일 수 있는 정보를 알고 있다면 주저하지 말고 표시해주세요. 예를 들어 이체를 할 때 통장에 남은 금액을 미리 알려준다면, 사용자는 잔고를 초과하는 금액을 적지 않을 것입니다.

정보를 입력하는데 도움을 주기 위한 흔적들이 보입니다.

Inline Validation 사용하기.

"Inline Validation을 사용하기"는 사용자들이 입력한 정보가 과연 타당한지를 실시간으로 폼에서 확인시켜주는 과정입니다.

타당성에 대한 메시지를 Input과 가까이 두세요.

정보가 타당하지 않다면, 잘못된 점을 소리치지 마세요. 어떻게 고치면 되는지를 알려주세요.

사용자들이 정보를 다 입력하지도 않았는데 "부적합"하다는 메시지를 보여주지 마세요. 사용자가 정보를 다 입력하면 그 정보가 괜찮은지 알려주세요.

타당한 정보에는 "긍정적인"메시지를 남겨주세요. 정보를 입력하는데 즐거움을 주고 모든 정보를 입력하는데 동기를 부여할 수 있습니다.

잘못된 건 잘못된 부분에 알려주세요. 한 번에 확인하기 어렵습니다.

필드의 개수를 줄여보세요.

시각적, 인지적 부담을 줄일 수 있습니다. 훨씬 더 간단해 보이기도 하고요.

날짜나 이름 같은 정보를 여러 필드로 쪼개지 마세요.

같은 내용을 중복으로 입력할 필요는 없습니다 (예를 들면 비밀번호 확인).

Label이나 여러 힌트를 줄여서 간단하게 써보세요.

간추릴 수 있는 건 간추리는 게 좋습니다.

당장 관련 없는 건,

안 보여도 좋습니다.

순차적으로 입력할 내용을 공개한다는 건, 사용자들이 꼭 입력해야 하는 내용을 순차적으로 보여준다는 의미입니다. 이렇게 하면 복잡한 입력 과정을 쉽게 풀어갈 수 있습니다.

처음부터 모든 걸 보여줄 필요는 없습니다.

선택한 조건에 따라 구성하세요.

조건문을 사용한다면 (예를 들어 좋아하는 스포츠를 선택하면, 이어서 선택한 스포츠에 해당하는 선수를 선택할 수 있는 방식입니다) 사용자가 선택한 답변에 따라 필드를 숨기거나 생략할 수 있습니다. 이런 방법으로 필드의 개수를 줄일 수 있을 뿐만 아니라, 필드를 채워나가는 과정 자체를 개별적이고 대화 형식으로 풀어낼 수 있습니다.

일종의 알고리즘이라고도 볼 수 있습니다. 모든 선택지를 보여줄 필요는 없습니다.

연관된 필드들은

서로 묶어주세요.

복잡한 필드를 쉽고 단순하게 정리하는 방법 중 하나는, 비슷한 필드끼리 묶어주는 것입니다. 게슈탈트 이론에는 정보를 서로 비슷한 것끼리 묶는 여러 방법들이 있습니다 : Proximity (근접한 개체들은 동일한 개체로 인식된다), Similarity (유사하게 생긴 요소들은 같은 요소로 보인다), Continuity (연속되는 요소는 하나의 흐름으로 인식된다), Closure (끊어지거나 불완전한 원형을 발견한 경우 관념 속의 원형을 보려 한다), and Connectedness. 흩어져 있는 필드들을 적절하게 묶어주는 것은 사용성에 큰 도움을 줍니다.

논리적으로 비슷한 것 끼리 묶어주니, 훨씬 더 입력하기 쉬워졌습니다.

여러 Column(열, 세로)로 구성된

레이아웃을 지양하세요.

하나의 열로 이루어진 레이아웃은 사용자들이 어디로 가야 하는지를 명확하게 알려줍니다. 여러 열을 사용한 레이아웃에서 사용자들은 채워야 할 필드를 놓치기도 하고, 잘못된 필드에 정보를 입력하기도 하고, 아니면 입력할게 너무 많아 보여서 아예 떠나버릴 수도 있습니다.

복잡하게 구성된 폼을

여러 단계로 쪼개 보세요.

불필요하다고 생각한 내용들을 덜어냈음에도, 어떤 폼들은 여전히 양이 방대합니다. 이렇게 방대한 내용을 여러 단계로 쪼개서 제시하면 사용자들은 훨씬 더 임무를 잘 수행할 것입니다.

나눠진 단계를 시각적으로 표현해주세요. 지금 사용자들이 어떤 단 게에 있고 얼마나 더 하면 되는지를 알 수 있으면, 정보를 끝까지 입력할 가능성이 늘어납니다.

단계를 너무 토막 내서는 안됩니다. 할게 오히려 많아 보이기 때문에 짜증만 늘어납니다.

각 단계에서 입력한 핵심 정보를 간추려서 보여주세요. 마지막 단계에서 올바르게 정보를 입력했는지 사용자들이 확인할 수 있어야 합니다.

취향에 따라 다르겠지만, 저는 삼겹살 자르는 것과 비슷하다고 생각합니다. 너무 크게 잘라도 문제고 너무 작게 잘라도 문제죠. 먹기 좋게 자르는 게 핵심 아닐까요?

집중을 방해하지 마세요.

만약 입력할 내용들이 방대하고 여러 단계로 쪼갰다면, 각 단계를 잘 채울 수 있도록 집중할 수 있는 공간을 마련해야 합니다. 내비게이션을 노출한다던지, 광고 링크가 그대로 노출된다면 폼을 입력하다가 다른 곳으로 이탈할 가능성이 늘어납니다. 작은 팝업 페이지를 띄워 각 단계를 수행하도록 하는 것도 좋은 방법입니다 (팝업은 닫으면 끝나버리니 이탈하기가 어렵습니다).

깨끗한 책상에서 공부가 잘되는 것처럼, 유혹하는 요소가 없어야 합니다.

입력하는 내용에 적합한 키보드를 띄워주세요.

안드로이드나 iOS 모두 다양한 키보드를 지원합니다. 그리고 이런 키보드는 각기 다른 필드를 작성하기 위해 만들어졌습니다. 어떤 정보를 입력하느냐에 따라 그에 어울리는 키보드를 지원해주세요. 그리고 텍스트 필드를 고려한 상태에서 키보드가 어디서 나올지도 생각해야 합니다. 엉뚱한 위치에서 키보드가 나온다면 불필요하게 스크롤을 해야 합니다.