2019. 6. 17. 07:50ㆍUI 가벼운 이야기
평소에 모바일 앱을 쓰다 보면 입력 필드를 선택했을 때 뜨는 키패드가 다양함을 알 수 있다. 이때 적합한 키패드가 뜨지 않아서 당황했던 경우가 종종 있었다.
예를 들면 지니뮤직 시크릿 이용권 결제 전에 Payletter 결제 모듈을 거치는데, 모든 입력 필드가 숫자 입력 필드임에도 불구하고 어떨 때는 숫자 키패드가 뜨고, 어떨 때는 문자 키패드가 뜸을 알 수 있다. 보안을 위해서 키패드 타입을 변경했다고 하기에는 사용성이 너무 떨어진다.
이에 iOS와 안드로이드 가이드라인의 키패드 유형을 찾아보았다. 디자인 가이드라인에서는 이런 유형 분류를 찾기 어려웠고, 디벨로퍼 가이드라인에서 관련 내용을 찾아볼 수 있었다. 개발자를 위한 형식으로 되어있기 때문에 어떤 유형에서 어떤 키보드를 제공하는지 잘 이해가 되지 않아 유형별로 키패드 이미지를 매핑해 보았다. 다행히도 iOS 디벨로퍼 가이드라인에서 비교적 자세하게 내용이 기술되어있었다.
사실 UI 기획자가 기획을 하는 데 있어 이 모든 유형을 상황에 맞게 정의하기에는 다소 무리가 있을 수 있다. 그래서 정의하기에 적합한 몇 개의 핵심 키패드 유형을 뽑아보았다.
- 기본 키패드 : 일반적인 유형에서 범용적으로 활용
- 메일 주소 입력 키패드 : 이메일 주소를 입력해야 하는 경우 활용 - at ("@"), 마침표 ("."), Space 키 강조
- URL 입력 키패드 : 웹사이트 등 웹 주소를 ;입력해야 하는 경우 활용 - 마침표("."), 슬래시("/"), ".com" 키 강조
- PIN 입력 키패드 : 숫자형태로 된 비밀번호 입력시 활용 - 0~9 숫자 강조
- 웹 검색 + URL 입력 키패드 : 웹사이트의 검색 입력필드에서 활용 - Space, 마침표 (".") 키 강조
- 전화번호 입력 키패드 : 숫자형태로 된 전화번호 입력시 활용 - 0~9 숫자, "*", "#" 키 강조
*요즘에는 인스타그램 같은 SNS에서 글을 포스팅할 때 case twitter 형태를 쓰는 경우도 있다. 이 키패드는 at ("@"), "#" 키를 강조한 것이 특징이다.
이 외에도 iOS와 안드로이드 OS별로 어떤 차이가 있는지 궁금해서 iOS / Google(note8) / LG (G4 Custom 키패드) 별로 조사해 보았다. 제조사에서 어떻게 Custom 하느냐에 따라 디테일한 차이가 있을 수 있지만 검색이나 다음 입력 필드로 이동하는 액션 버튼의 형태나 보조 버튼의 유무 (ex. "@", "/", ".com" 등), 보조 버튼의 위치를 조금씩 다르게 제공함을 파악할 수 있었다.
특히 우측 하단에 있는 '액션 버튼'의 경우는 입력 필드의 형태와 맥락에 따라 다르게 제공한다. iOS의 경우 상황별로 동일한 액션 버튼 스타일을 제공하나, 검색을 위한 입력 필드의 경우에만 다른 형태로 제공한다. 안드로이드 OS의 경우 싱글 라인, 멀티 라인, 마지막 입력 필드 Case에 따라 다른 형태의 액션 버튼 스타일을 제공함을 알 수 있었다.
정리하며
UI 기획을 할 때도 단순히 '키패드 호출'이라고 정의를 하는 것보다는 최적의 키패드를 찾아서 정의한다면 개발자와의 커뮤니케이션도 원활히 할 수 있을 것이라고 생각한다. 개발자 또한 해당 맥락에서 어떤 키패드를 제공하는 것이 UI적인 관점에서 사용자에게 도움이 될지에 대해서 좀 더 고민했으면 좋겠다. 이런 디테일을 챙기는 것은 사소해 보일 수 있지만 결국 사용자가 이 앱을 사용하는 데 있어서 만족도를 높이는데 도움이 될 것이라고 기대한다.
*이 글은 브런치에서도 볼 수 있습니다 - @uxdragon
-
참고자료
[링크 1] 모바일 UI 디자인 기본 요소 - 모바일 UI의 입력필드에 대해서 상세히 정의되어있다. 적어도 입력필드에 한해서는 이 이상의 자료를 보지 못했다.
[링크 2] 터치를 위한 디자인하기 - 이 책에서도 관련 내용이 있다. [4번항목] 최적화된 컴포넌트 내용을 보면 된다.
[링크 3] 애플 디벨로퍼 가이드라인 Managing the keyboard
[링크 4] 애플 디벨로퍼 가이드라인 UI Keyboard type
[링크 5] Visual guide : UI keyboard type (iOS 12)
[링크 6] 안드로이드 디벨로퍼 가이드라인 keyboard input style