Skip to main content

사용자 경험 개선

텍스트 입력 설정​

스마트폰에서 텍스트를 입력하는 것은 작은 화면과 소프트웨어 키보드로 인해 쉽지 않다. 하지만 필요한 데이터 종류에 따라 텍스트 입력을 적절히 설정하면 더 편리하게 사용할 수 있다.

  • 첫 번째 입력 필드에 자동으로 포커스 설정
  • 예상 데이터 형식을 보여주는 플레이스홀더 텍스트 사용
  • 자동 대문자 변환과 자동 수정 기능 활성화 또는 비활성화
  • 키보드 타입 선택 (예: 이메일, 숫자)
  • 리턴 버튼을 눌렀을 때 다음 필드로 이동하거나 폼을 제출하도록 설정

더 많은 설정 옵션은 TextInput 문서를 참고한다.

키보드가 보일 때 레이아웃 관리하기​

소프트웨어 키보드는 화면의 거의 절반을 차지한다. 키보드에 가려질 수 있는 인터랙티브 엘리먼트가 있다면, KeyboardAvoidingView 컴포넌트를 사용해 여전히 접근 가능하도록 해야 한다.

탭 가능한 영역 크게 만들기​

모바일 환경에서는 버튼을 정확히 누르기 어려울 수 있다. 모든 인터랙티브 요소의 크기를 최소 44x44 이상으로 만들어야 한다. 이를 위해 충분한 공간을 확보하거나, padding, minWidth, minHeight 스타일 값을 활용할 수 있다. 또는 레이아웃에 영향을 주지 않고 인터랙티브 영역을 확장할 수 있는 hitSlop prop을 사용할 수도 있다. 아래 예제를 참고하라:

Android Ripple 사용하기​

Android API 21 이상에서는 사용자가 화면의 상호작용 가능한 영역을 터치할 때 피드백을 제공하기 위해 머티리얼 디자인의 리플 효과를 사용한다. React Native는 이를 TouchableNativeFeedback 컴포넌트를 통해 제공한다. 불투명도나 하이라이트 대신 이 터치 효과를 사용하면 앱이 플랫폼에 더 잘 어울리는 느낌을 줄 수 있다. 하지만 iOS나 Android API 21 미만에서는 작동하지 않으므로, iOS에서는 다른 Touchable 컴포넌트를 사용해야 한다. react-native-platform-touchable과 같은 라이브러리를 사용하면 플랫폼 간 차이를 자동으로 처리할 수 있다.

화면 방향 고정​

기본적으로 여러 화면 방향은 잘 작동한다. 단, Dimensions API를 사용하면서 화면 방향 변경을 처리하지 않으면 문제가 발생할 수 있다. 여러 화면 방향을 지원하지 않으려면, 화면 방향을 세로 모드(portrait)나 가로 모드(landscape)로 고정할 수 있다.

iOS에서는 Xcode의 General 탭과 Deployment Info 섹션에서 지원하려는 Device Orientation을 활성화한다. (변경 사항을 적용할 때 Devices 메뉴에서 iPhone을 선택했는지 확인한다.) Android의 경우 AndroidManifest.xml 파일을 열고 activity 엘리먼트 내부에 'android:screenOrientation="portrait"'을 추가해 세로 모드로 고정하거나 'android:screenOrientation="landscape"'를 추가해 가로 모드로 고정한다.

더 알아보기

Material Design과 Human Interface Guidelines는 모바일 플랫폼을 위한 디자인을 배우기에 훌륭한 리소스이다.