[React Native] UI 피드백 구현

모바일 애플리케이션에서 사용자 경험(UX)을 높이기 위해 UI 피드백은 필수적인 요소입니다.
React Native는 사용자 상호작용에 따른 시각적/촉각적 반응을 제공하는 방법과 컴포넌트를 지원합니다.
이번 포스팅에서는 React Native에서 효과적인 UI 피드백을 구현하는 방법을 살펴보겠습니다.

출처: obytes

---

1. UI 피드백의 중요성

UI 피드백은 사용자가 앱과 상호작용하고 있다는 느낌을 주어 사용성과 만족도를 높여줍니다.
대표적인 예로는 버튼 클릭 애니메이션, 로딩 스피너, 터치 시의 진동 피드백 등이 있습니다.

2. React Native의 주요 UI 피드백 매커니즘

(1) 버튼 클릭 피드백

React Native는 클릭 시 피드백을 제공하는 기본 컴포넌트를 제공합니다.
1. Touchable 컴포넌트

• TouchableOpacity: 클릭 시 투명도를 줄여 시각적 반응을 제공합니다.
• TouchableHighlight: 클릭 시 배경색이 변하는 효과를 제공합니다.

import { TouchableOpacity, Text, StyleSheet } from 'react-native';

const App = () => {
  return (
    <TouchableOpacity style={styles.button} onPress={() => alert('Button Pressed')}>
      <Text style={styles.text}>Click Me</Text>
    </TouchableOpacity>
  );
};

const style = StyleSheet.create({
  button: {
    backgroundColor: '#6200EE',
    padding: 10,
    borderRadius: 5,
  },
  text: {
    color: 'white',
    textAlign: 'center',
  },
});

export default App;

• TouchableOpacity: 클릭 시 버튼의 불투명도가 줄어드는 효과를 제공합니다.
• TouchableHighlight: 배경색 변경으로 더 강렬한 클릭 효과를 제공합니다.

2. Pressable 컴포넌트

• 보다 정교한 상호작용을 구현할 수 있습니다.
• 다양한 상태(onPress, onHover, onLongPress)에 맞춰 스타일을 다르게 설정할 수 있습니다.

import { Pressable, Text, StyleSheet } from 'react-native';

const App = () => {
  return (
    <Pressable
      style={({ pressed }) => [
      	styles.button,
        { backgroundColor: pressed ? '#3700B3' : '#6200EE' },
       ]}
       onPress={() => alert('Pressed!')}
    >
      <Text style={styles.text}>Press Me</Text>
    </Pressable>
  );
};

const styles = StyleSheet.create({
  button: {
    padding: 10,
    borderRadius: 5,
  },
  text: {
    color: 'white',
    textAlign: 'center',
  },
});

export default App;

(2) 로딩 피드백

사용자가 동작이 완료되길 기다리는 동안 시각적 피드백을 제공합니다.
1. ActivityIndicator 컴포넌트: 기본 제공되는 로딩 스피너로, 네이티브한 스피너를 표시합니다.

import { ActivityIndicator, View, StyleSheet } from 'react-native';

const App = () => {
  return (
    <View style={styles.container}>
      <ActivityIndicatro size="large" color="#6200EE" />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;

2. Custom 로딩 컴포넌트: 사용자 정의 애니메이션이나 이미지 로딩 컴포넌트를 사용할 수도 있습니다.

(3) 진동 피드백

React Native의 HapticFeedback 또는 Vibration 모듈을 활용해 터치 시 진동 효과를 제공합니다.

import { Vibration, Button } from 'react-native';

const App = () => {
  const handlePress = () => {
    Vibration.vibrate(100); // 100ms 동안 진동
  };
  
  return <Button title="Vibrate" onPress={handlePress} />;
};

export default App;

(4) 애니메이션 피드백

React Native의 Animated API를 활용해 동적인 UI 피드백을 구현할 수 있습니다.
1. Scale 애니메이션: 터치 시 크기를 변경해 직관적인 반응을 제공합니다.

import React, { useRef } from 'react';
import { Animated, TouchableWithoutFeedback, StyleSheet } from 'react-native';

const App = () => {
  const scale = useRef(new Animated.Value(1)).current;
  
  const handlePressIn = () => {
    Animated.spring(scale, {
      toValue: 0.95,
      useNativeDriver: true,
    }).start();
  };
  
  const handlePressOut = () => {
    Animated.spring(scale, {
      toValue: 1,
      useNativeDriver: true,
    }).start();
  };
  
  return (
    <TouchableWithoutFeedback onPressIn={handlePressIn} onPressOut={hanldePressOut}>
      <Animated.View style={[styles.button, { transform: [{ scale }] }]}>
      </Animated.View>
    </TouchableWithoutFeedback>
  );
};

const styles = StyleSheet.create({
  button: {
    width: 100,
    height: 100,
    backgroundColor: '#6200EE',
    borderRadius: 50,
  },
});

export defeault App;

---

React Native는 버튼 클릭, 로딩 스피너, 진동, 애니메이션 등 다양한 UI 피드백 기능을 제공합니다.
이러한 피드백을 적절히 활용하면 애플리케이션의 상호작용성을 향상시켜 사용자 경험을 더욱 풍부하게 만들 수 있습니다.