Skip to main content
Version: Next

사용자 경험 개선

텍스트 입력 설정하기​

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

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

더 많은 설정 옵션을 확인하려면 TextInput 문서를 참고한다.

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

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

탭 가능 영역 크게 만들기​

모바일 기기에서는 버튼을 정확하게 누르기 어렵다. 모든 상호작용 가능한 엘리먼트의 크기를 44x44 이상으로 유지해야 한다. 이를 위해 충분한 공간을 확보하는 방법이 있다. 패딩, 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는 모바일 플랫폼을 위한 디자인을 더 깊이 이해하는 데 유용한 리소스다.