adjustResize, nextFocusDown, animateLayoutChanges로 반응형 UX 만들기 - 안드로이드 이슈 11

많은 경우, 사용자가 좋아하는 앱은 사용하기 편합니다. UX가 좋다고도 하죠. 넷플릭스, 토스, 삼성페이 등을 그런 좋은 UX의 예시로 들 수 있을 것 같은데요. 좋은 UX를 구축하기 위해서는 사소한 부분에서 디테일을 쌓아올리는 게 중요한 과제라고 생각합니다.

이왕 삼성페이 얘기를 꺼낸 김에 삼성페이가 어떤 디테일을 추구했는지 살펴볼까요? 사실 로또위시를 만들 때, 삼성페이를 레퍼런스로 잡고 작업했습니다.

간결합니다.

삼성페이는 지갑에서 카드를 꺼내듯 핸드폰을 꺼내고 바로 실행할 수 있어야 합니다. 때문에 하단에 배치하여 슬라이드 하여 실행할 수 있게 하였고, 앱 로딩 초기 화면(Splash screen)을 과감하게 삭제하였습니다. 결제에 필수적인 부분이 먼저 로딩되며, 광고, 추가 메뉴 등은 로딩이 완료되면 애니메이션과 함께 표시되는 모습입니다.

로또위시의 경우, 첫 화면을 띄우는데 필요한 시간이 짧기 때문에 Splash Screen을 사용하지 않았으며, UI Component의 부드러운 등장을 위해 android:animateLayoutChanges 속성을 사용했습니다.

직관적입니다.

삼성페이에 구매 목록을 추가하는 화면입니다. 상점 이름을 입력하려는데, 키보드 오른쪽 아래에 위치한 '다음' 버튼이 눈에 띕니다. 다음 버튼을 누르면 어디로 이어질까요? 당연히 다음 항목인 금액 부분으로 이어져야 합니다. 이는 어떤 코드를 통해 작동하는 걸까요? 바로 EditText에 android:nextFocusDown="@id/cost"와 같은 코드를 통해서입니다.

android:nextFocusDown의 값을 다음에 입력할 EditText의 id 값으로 설정하면 위와 같은 코드를 쉽게 작성할 수 있습니다. nextFocus 시리즈는 이외에도 android:nextFocusUp android:nextFocusLeft android:nextFocusRight android:nextFocusForward가 있습니다.

nextFocusDown, Up, Left, Right는 각각 블루투스 (혹은 USB) 키보드의 방향키에 대응되어 키보드의 방향키가 눌렸을 때 Focus의 상태를 변경합니다. 대부분의 경우 프로그래머가 이를 지정하지 않아도 컴파일러가 자동으로 설정해주지만, 가끔 부정확하여 필수 요소에 접근하지 못하는 경우가 생길 수 있습니다.

마지막으로 android:nextFocusForward는 탭 키를 눌러 이동할 요소를 지정해주는 속성입니다. android:nextFocusDown과 마찬가지로 이동할 요소의 id를 지정해주면 되고, Shift + Tab 시에도 (기대한대로) 거꾸로 잘 작동합니다.

반응형 UI

눈에 띄는 부분은 이뿐만이 아니죠. 입력 폼의 취소, 저장 버튼이 키보드가 올라옴에 따라 위치가 변하는 것도 보실 수 있는데요. 이는 AndroidManifest.xml에서 해당 Activity에 속성을 추가하여 구현할 수 있습니다.

위 코드에는 android:configChanges="keyboardHidden"이라는 코드도 추가되어 있는데, 이는 softInput을 코드로 열었을 때 생길 수 있는 오류를 해결합니다. 즉, 위 코드를 지우고 실행하면, 키보드가 실행된 상태에서 recent apps 화면으로 전환하는 등 Activity가 focus를 잃을 때, 키보드가 제대로 닫히지 않는 경우가 생깁니다.

• 금액을 표시할 때 1,234,567처럼 콤마를 붙여 출력하는 건 다음 시간에 더 자세하게 다뤄보도록 하겠습니다.

 

로또위시 - Google Play 앱