📝 55. React Native 사용자 입력 UX 최적화 전략 — TextInput, 키보드 처리, 포커스 이동까지

---

앱에서 가장 많이 사용되는 컴포넌트 중 하나는
바로 TextInput이다.
하지만 기본 사용만으로는 불편한 입력 UX,
예를 들어 키보드에 가려지는 입력창,
포커스가 안 넘어가는 문제 등이 생긴다.

이번 글은 React Native에서 사용자 입력 경험을 최적화하는 전략을 정리한 글이다.

---

✅ TextInput 기본 사용 예시

<TextInput
  value={email}
  onChangeText={setEmail}
  placeholder="이메일을 입력하세요"
  keyboardType="email-address"
  autoCapitalize="none"
  returnKeyType="next"
/>

주요 속성

• keyboardType: 입력 키보드 종류 (default, numeric, email-address, ...)
• autoCapitalize: 자동 대문자 설정 (none, sentences, ...)
• returnKeyType: 다음/완료 버튼 UI 변경
• secureTextEntry: 비밀번호 입력 시 사용

---

🔄 포커스 이동 처리

const emailRef = useRef(null);
const passwordRef = useRef(null);

<TextInput
  ref={emailRef}
  returnKeyType="next"
  onSubmitEditing={() => passwordRef.current?.focus()}
/>

<TextInput
  ref={passwordRef}
  returnKeyType="done"
/>

✅ 로그인/회원가입 화면에서 자주 사용
✅ 키보드에서 '다음' 눌렀을 때 자연스럽게 이동

---

🧷 키보드 가림 방지 처리

1. KeyboardAvoidingView

<KeyboardAvoidingView behavior="padding">
  <ScrollView>
    <TextInput />
  </ScrollView>
</KeyboardAvoidingView>

• iOS에서는 padding, Android는 height 추천
• 반드시 ScrollView 또는 View로 래핑 필요
• 화면이 길어질수록 필수 적용

2. KeyboardAwareScrollView (라이브러리)

npm install react-native-keyboard-aware-scroll-view

• 더 강력한 키보드 감지 + 스크롤 동작 제공

---

✅ 입력 상태 및 유효성 검사

const [email, setEmail] = useState('');
const [error, setError] = useState('');

useEffect(() => {
  const emailRegex = /\S+@\S+\.\S+/;
  setError(emailRegex.test(email) ? '' : '올바른 이메일 형식이 아닙니다.');
}, [email]);

✅ 실시간 피드백
✅ 오류 메시지 출력 → UX 친절도 상승

---

🎨 UX 향상을 위한 팁

항목	전략
placeholder 컬러	placeholderTextColor="#999" 등 명확히 지정
터치 시 키보드 닫기	TouchableWithoutFeedback + Keyboard.dismiss() 조합
에러 메시지 UI	입력창 아래에 작게 표시, 색상은 붉은 계열
입력 완료 시 처리	onSubmitEditing으로 버튼 클릭 없이도 전송 가능

---

🧠 내가 느낀 점

처음에는 TextInput만 넣어도 되는 줄 알았는데
막상 유저 입장에서 써보니
포커스가 안 넘어가고, 키보드가 버튼을 가리고,
입력 에러가 뭔지도 안 알려주는 앱은 답답한 UX 그 자체였다.

지금은 기본적으로

• 입력 포커스 관리
• 키보드 회피 처리
• 상태 기반 유효성 체크
  를 모두 포함해서 입력 흐름 자체를 하나의 UX 단위로 설계하고 있다.

---

✍️ “입력은 기능이 아니라 흐름이다. 그 흐름이 부드러울수록 앱은 좋아진다.”

---