brunch

매거진 UX 가벼운 이야기

라이킷 141 댓글 2

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 위승용 uxdragon May 28. 2019

[UI 디테일] 모바일 UI 키패드의 유형에 대해서

평소에 모바일 앱을 쓰다보면 입력필드를 선택했을 때 뜨는 키패드가 다양함을 알 수 있다. 이때 적합한 키패드가 뜨지 않아서 당황했던 경우가 종종 있었다.

예를 들면 지니뮤직 시크릿이용권 결제 전에 Payletter 결제 모듈을 거치는데, 모든 입력 필드가 숫자 입력 필드임에도 불구하고 어떨 때는 숫자 키패드가 뜨고, 어떨때는 문자 키패드가 뜸을 알 수 있다. 보안을 위해서 키패드 타입을 변경했다고 하기에는 사용성이 너무 떨어진다.

Payletter 결제 모듈 내 키패드 제공방식 (iOS)

이에 iOS와 안드로이드 가이드라인의 키패드 유형을 찾아보았다. 디자인 가이드라인에서는 이런 유형 분류를 찾기 어려웠고, 디벨로퍼 가이드라인에서 관련 내용을 찾아볼 수 있었다. 개발자를 위한 형식으로 되었었기 때문에 어떤 유형에서 어떤 키보드를 제공하는지 잘 이해가 되지 않아 유형별로 키패드 이미지를 매핑해 보았다. 다행히도 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" 등), 보조 버튼의 위치를 조금씩 다르게 제공함을 파악할 수 있었다.

주요 키패드 유형으로 본 OS별 키패드 비교

특히 우측 하단에 있는 '액션 버튼'의 경우는 입력 필드의 형태와 맥락에 따라 다르게 제공한다. iOS의 경우 상황별로 동일한 액션 버튼 스타일을 제공하나, 검색을 위한 입력 필드의 경우에만 다른 형태로 제공한다. 안드로이드 OS의 경우 싱글 라인, 멀티 라인, 마지막 입력필드 Case에 따라 다른 형태의 액션 버튼 스타일을 제공함을 알 수 있었다.

싱글라인 / 멀티라인 / 마지막 입력필드 Case에 따른 키패드 액션버튼의 종류

정리하며

UI 기획을 할 때도 단순히 '키패드 호출'이라고 정의를 하는 것 보다는 최적의 키패드를 찾아서 정의한다면 개발자와의 커뮤니케이션도 원활히 할 수 있을 것이라고 생각한다. 개발자 또한 해당 맥락에서 어떤 키패드를 제공하는것이 UI적인 관점에서 사용자에게 도움이 될지에 대해서 좀 더 고민했으면 좋겠다. 이런 디테일을 챙기는 것은 사소해 보일 수 있지만 결국 사용자가 이 앱을 사용하는데 있어서 만족도를 높이는데 도움이 될 것이라고 기대한다.