[UI BOOK] Text Field (텍스트 필드) – 가장 쉽게 지나치는 요소

[UI BOOK] Text Field (텍스트 필드) – 가장 쉽게 지나치는 요소

Text Field의 정의
문자나 숫자 등과 같은 텍스를 입력하는 영역을 말합니다.
– 가장 흔하게 접하는 UI 중에 하나가 바로 텍스트 필드입니다.
– PC에서는 마우스 커서를 이동하여 눌러 해당 영역에 글을 입력합니다.
– 모바일에서는 터치를 이용하여 글자를 입력하는 가장 기본적이고 일반적인 UI 이벤트 방식 입니다.
– 텍스트 필드는 다양한 속성을 가질 수 있습니다.
– 사용자들이 익숙하기 때문에 기획 시에 쉽게 생각하는 경우 발생합니다.
– 사용자를 보다 편리하게 하기 위해서는 기획 시 자세한 표현이 요구 됩니다.
– 특히나 모바일에서는 입력이 용이하지 않기 때문에 좀 더 세심한 배려가 필요 합니다.
텍스트 필드의 사례
1. 글자를 입력 할 수 있는 필드
– 가장 단순한 구조입니다.
– 일반적인 문자(숫자, 문자, 특수 문자)를 적용합니다.
– 싱글 라인: 한 줄에 문자를 넣으며 단문 일 경우에 적용합니다.
– 멀티 라인: 한 줄 이상의 문자를 넣음. 장문 일 경우에 사용하며 메세지 앱과 같은 곳에 주로 사용합니다.
– 텍스트 필드 내 가이드 텍스트를 넣는 경우도 있음. 선택 시 또는 텍스트 입력 시 문구 대체됩니다.

2. 이메일 주소를 입력할 수 있는 필드
– 이메일 필드는 크게 두가지로 구분 할 수 있습니다.
– 이메일 주소를 전체 입력 할 수 있는 필드, 이메일 ID와 @ 그리고 도메인 주소를 분리해 놓은 분리형이 있습니다.
– 분리형의 장점으로는 주로 쓰는 도메인을 입력하지 않고 선택만 하면 된다는 점입니다.
– 단, 특수한 도메인인 경우 집적입력해야 함으로 효용성이 제외 됩니다.
– 이메일 필드에서는 이 메일 형식을 체크 하도록 하는 것이 일반적입니다.

2. 숫자를 입력 할 수 있는 필드
– 숫자 이외에 다른 문자를 받지 않습니다.
– 키보드 제공시에 숫자 키패드 적용이 필요합니다.
– 주민등록 번호 또는 전화번호, 그리고 번호로 된 비밀번호와 같은 곳에 주로 활용을 합니다.

3. 비밀번호 입력 필드
– 비밀번호는 보안적인 특성상 다른 사람에게 노출 되면 안됩니다.
– 노출를 최소화 필요성이 있습니다.
– 입력시 “.”으로 표시하거나 “*”으로 반복된 특수 문자 등을 표시하여 다른 사람이 인지하지 못하도록 방법이 필요합니다.
– 단, 여러개의 문자를 입력하다보면 잊게 되는 경우가 많이 발생합니다.
– 하여 마지막의 문자는 노출 시기는 방법이 있습니다.
– 지속적으로 노출되면 안되며 일정 시간이 되면 역시 문자를 숨기도록 합니다.
– 위 사항을 좀더 보완 하자면 사용자가 몇 글자를 입력했는지 알려주면 보완이 됩니다.

텍스트 필드를 제어하는 요소
– 가장 일반적인 것이 글자 수입니다.
– 정해진 글자 규격을 벗어나면 입력 할 수 없도록 해야 합니다.
– 이러한 텍스트 필드를 제어할 때 잘못 입력시 알려주는 방법 또한 다양합니다.
1. 입력 버튼 비활성화
– 가장 심플하면서 다른 화면을 보지 않아도 되는 좋은 방법입니다.
– 조건에 맞지 않는 내용을 입력했다면 다음 단계로 이동을 할 수 없는 방법입니다.
– 아래의 그림은 검색창에 아무것도 입력하지 않았음으로 검색 실행 버튼을 누를 수 없도록 비활성화 되었습니다.

2. 팝업 활성화
– 고전적인 방식으로 새로운 창을 띄워 확실하게 고지하는 방법이 있습니다.
– 사소한 잘못으로 입력 된 반면에 강하게 어필을 하기 때문에 부정적인 느낌을 주는 단점이 있습니다.

3. 토스트 메세지 팝업 활성화
– 사소하고 반드시 확인을 거치지 않아도 되는 경우에는 토스트 팝업을 띄워 조금 더 가볍게 고지합니다.
– 안드로이드 운영체제에서 주로 활용하는 기법입니다.

4. 텍스트 필드 주변에 정보 표시하기
– 위 두 방법이 부담 스럽다면 텍스트 필드 주변에 정보를 표시해 주는 방법이 있습니다.
– 실시간으로 바로 표시하는 방법과 전송 후에 결과를 보여주는 방법이 있습니다.
– 긍정과 부정으로 색상을 구분하여 표시하면 보다 더 빠른 인지를 할 수 있습니다.

5. 힌트 주기
– 위 방법들을 사전에 방지 하기 위하여 텍스트 필드에 규칙을 알려주거나 예를 들어 주면 사용자의 오류를 줄일 수 있습니다.
– 또한 친절한 느낌을 줄 수도 있습니다.

텍스트와 키보드와 연관성
– 텍스트 필드에 무언가를 입력하기 위해서는 키보드가 일반적으로 사용 됩니다.
– 그 밖에 음성 입력, 필기 인식 입력, 이미지 인식 등 다양한 입력 방법들이 있습니다.
– 모바일에서 좀 더 편리하게 사용하기 위해서는 키보드의 종류 확인이 필요합니다.
– 모바일 OS에서는 이를 편리하게 위하여 기술적으로 제공합니다.
1. 이메일을 입력하기 위한 키보드 배열
– 이메일은 숫자와 문자 그리고 특수기호 등이 사용 됩니다.
– 도메인 명을 마지막에 입력하는게 특징이니다.
– 주로 .com, net, co.kr 등과 같은 것들이 많이 입력하게 됩니다.
– 시간을 단축하기 위해서 단축할 수 있는 이메일 전용 키보드를 제공이 필요합니다.
– 아래의 그림을 보면 기본적인 키보드와 달리 스페이스바 옆에 @ 버튼이 보입니다
– 즉, 이메일 입력하기 위한 구성으로된 키보드를 호출한 케이스 입니다.

2. 전화번호를 입력하기 위한 키보드 배열
– 회원 가입에서 전화번호 입력 등과 같은 숫자를 요구하는 필드들이 있습니다.
– 숫자만 입력하기면 되기 때문에 Numeric 키보드를 전용으로 제공하면 입력의 편의성이 증가됩니다.

3. 인증번호를 입력하기 위한 키보드 배열 (커스텀 키보드)
– 플랫폼에서 기본적으로 제공 되는 경우도 있지만 특수한 목적에서 키보드를 생성하여 제공 할 수 있습니다.
– 대표적인 예로 금융 서비스의 인증번호 입력 키보드를 들 수 있습니다.
– 일반적인 키보드의 배열을 흐트려 놔 주변 사람이 보더라도 위치를 통한 암호 노출을 최소화 시킵니다.
– 단, 사용자들은 일반적인 키보드 배열에 익숙해서 문자를 찾는 시간이 소요되는 단점이 있습니다.

기획시 고려해 볼만한 사항들은 다음과 같습니다.
1. 문자의 종류는? 어떠한 형식의 필드를 줄 것인가?
2. 최소, 최대 입력 할 수 있는 글자의 수는?
3. 입력에 제한을 둘 것인가?
4. 입력하는 정보는 보여 줄것인가?
5. 힌트를 줄 것인가?
이렇게 작성을 하고 나니 꽤나 많은 요소가 작용하고 있습니다.
실질적인 기획서에는 다 쓸수는 없을거라 생각 됩니다.
이러한 기본적인 콤포넌트들은 개념으로 이해하고 있으면서 문서 필요시 콤포넌트 공통 문서에 기재해두면 좋습니다.

About The Author

admin

No Comments

Leave a Reply

OUR EXPERIENCE SITE


CONTACT US


ICT와 디지털 환경에서 각자 다른 경험을 공유하고 싶으신 분은 언제라도 환영합니다. 우리의 경험과 함께 하고 싶은 개인, 회사도 연락주세요. 같이 나아갈 수 있도록 하겠습니다.




Address:

22, Boramae-ro 17-gil, Dongjak-gu, Seoul
07060

Phone:

82+(10)-3169-8047

E-mail :

choiyoungmin8044@gmail.com

© 2010~2017 MTALKING. All Rights Reserved