[철학과 개발] #17 - 도움은 세계 공통적이다!

P & D

Research and Development가 아니라 Philosophy and Development의 P & D 입니다. 개발글에 있어서 새로운 시도를 하고 있습니다. 그저 개발기를 적어 내려가는 것이 아니라, 어떤 철학을 가지고 개발을 해나가고 있는지, 어떤 시도를 했는지, 개발은 어떻게 하는지를 적어 내려갑니다. 이번 시리즈는 도움을 주고 받는 방법 - 이타인클럽의 철학과 개발 과정을 다룰 것입니다.

이전글 - [철학과 개발] #16 익명성 - 인증방법

철학: 도움 주고 받기는 세계 공통이다

앱을 만들 때, 앱 사용자에 대해 생각해 보게 됩니다. 어떤 앱은 국내 한정 서비스만 가능하고, 또 다른 앱은 세계 동일한 서비스가 가능할 수 있습니다.

국내 한정 대표적인 서비스가 당근마켓입니다. 당근마켓은 국내 지역 특색에 맞게 앱이 구성되어야 합니다. 다른 국가에서 서비스르 하려면 그 국가에 맞는 서비스 구성을 새로 해야 합니다.

반면에 도움을 주고 받기는 만국 공통입니다. 하나의 서비스로 전 세계 사람들이 사용할 수 있습니다. 하지만 이것이 좋은 방법만은 아닙니다. 국가별로 각각 서비스를 만드는 것이 더욱 좋을 수도 있습니다.

하지만, 전 세계 사람들이 사용할 수 있는 서비스를 만드는 것은 도전해 보고 싶은 일입니다. 사실 도움 주고 받기는 국내에서는 활성화되어 있지도 않고, 활성화 되기 어려운 부분이 있습니다. 그 이유는 초고속 인터넷의 발달과 아파트 생활로 인해 이웃과 접촉이 없어졌기 때문이라고 생각합니다.

서로 도움을 주고 받기 보다는 인터넷으로 서비스를 주문하거나 요청합니다. 그리고 역설적으로 아파트 생활로 수 많은 사람들이 밀집해서 살지만, 오히려 상호 작용은 훨씬 줄어 들었습니다.

도움 주고 받기는 국내보다 해외에서 더 빨리 활성화 될 수 있겠다는 생각과, 국내 현지인과 외국인간의 도움 주고 받기를 고려하여 앱을 만들 때 다국어를 지원하기로 했습니다. 다국어 지원이라고 하면 표시 언어를 기기의 설정으로로 변경할 수 있는 것을 의미합니다. 즉, 각 언어에 대한 표시 파일만 있다면 모든 언어를 지원할 수 있습니다.

또, 가입 방법에서 개인 인증 서비스를 사용하면 국내 한정이 되므로, 전화 번호 입력에 국가 코드를 입력하도록 했습니다.

개발 - 다국어 설정

React Native (RN)앱에서 다국어를 설정하는데 필요한 패키지가 i18next입니다.
https://www.i18next.com/

i18n은 internationalization를 의미합니다.처음 문자 i와 마지막 문자 n 사이에 18개의 문자가 있어서 i18n으로 표시합니다. 참고로 k8s는 kubernetes를 의미합니다.

i18next는 다양한 framework를 지원하는데, 리액트도 지원합니다.
https://github.com/i18next/react-i18next

다국어 설정하는 방법에 대한 자료는 많은데 다양한 framework를 지원하다 보니 헷갈리는 부분이 좀 많습니다.

여기서는 간단히 설정하는 방법만 설명합니다. 세세한 구현 방법은 소스코드를 참고하세요.
https://github.com/EtainClub/helpus

저는 다국어 설정을 위해 다음과 같은 폴더와 파일들을 만들었습니다.

app/src/i18n
 - index.js
 - ko.json
 - en.json

이렇게 한 다음 최상위 앱 파일인 App.js에 다음과 같이 i18n/index.js 파일을 import 합니다.

// App.js
import i18n from './src/i18n';

i18n/index.js 파일

// languages
import i18next from 'i18next';
import { initReactI18next } from 'react-i18next';
import * as RNLocalize from 'react-native-localize';
import AsyncStorage from '@react-native-community/async-storage';

// import custom libraries
import ko from './ko.json';
import en from './en.json';

// multi-languages
const languageDetector = {
  type: 'languageDetector',
  async: true,
  detect: async (cb) => {
    const preferredLang = await AsyncStorage.getItem('language');
    if (preferredLang) {
      cb(preferredLang);
    } else {
      console.log('lang', RNLocalize.getLocales()[0].languageCode);
      cb(RNLocalize.getLocales()[0].languageCode);
    }
  },
  init: () => {},
  cacheUserLanguage: () => {},
};

i18next
  .use(languageDetector)
  .use(initReactI18next)
  .init({
    fallbackLng: 'en',
    debug: true,
    resources: { ko, en },
    react: {
      useSuspense: false
    }
  });

주요 부분 설명입니다.

필요한 패키지 import. async-storage 패키지를 사용한 이유는 사용자가 주 사용 언어를 저장하고 불러들이기 위해서입니다.
ko.json, en.json 파일과 같이 각 언어별로 파일을 만들어 사용
i18next을 초기화. 사용할 language detector를 설정. 기본 표시 언어, 사용자가 설정한 언어가 없을 때 표시할 언어 등 설정
languageDectector: 여기서는 사용자가 지정해 둔 언어를 불러들여서 그 언어로 설정
설정 언어가 없다면, RNLocalize 패키지를 사용하여 기기의 설정 언어로 설정 (RNLocalize.getLocales()[0].languageCode)

ko.json, en.json 파일

맛보기 ko.json 파일을 잠시 보겠습니다.

{
  "translation": {
    "SigninScreen": {
      "header": "회원가입/로그인",
      "guideMsgAndroid": "helpus는 상호 신뢰를 위해 휴대폰 번호로 가입합니다. 
      "guideMsgIOS": "helpus는 휴대폰 번호로 가입합니다. 
    },
}

위 내용처럼 json 형태로, key-value를 입력합니다. 코드에서 key를 입력하면 해당 내용(value)이 표시되게 됩니다.

en.json 파일도 잠시 살펴봅니다. ko.json와 같은 구조에 value 값만 영어로 표시합니다.

{
  "translation": {
    "SigninScreen": {
      "header": "Sign Up/Sign In",
      "guideMsgAndroid": "helpus needs phone number to sign in. 
      "guideMsgIOS": "helpus needs phone number to sign in.  
    },
}

사용법

사용하고자 하는 파일에서 다음과 같이 import

import { useTranslation } from 'react-i18next';

함수에서 다음과 같이 언어 설정

const SigninScreen = ({ navigation }) => {
  SplashScreen.hide();

  // setup language
  const { t } = useTranslation();

사용

return (
      <Text h3>{t('SigninScreen.header')}</Text>

참고로, 사용자의 설정 언어값을 i18next를 이용해서 가져올 수 있습니다.

import i18next from 'i18next';
 if (i18next.language == 'ko') {
    console.log('[signinscreen] language is korean');
  }

다양한 사용 예. i18next를 직접 사용하는 경우 포함

dispatch({
          type: 'add_error',
          payload: t('AuthContext.SigninConfirmError')
        });

dispatch({
      type: 'add_error',
      payload: i18next.t('AuthContext.SigninTokenError')
    });

Alert.alert(
      t('HelpScreen.canceledTitle'),
      t('HelpScreen.canceledByClient'),
        [
              { text: t('confirm') }
        ],
            { cancelable: true },
);

위와 같이 구성하면 다국어 표시가 가능합니다. 다만 언어별로 json 파일을 만들어야 하는 점이 번거롭습니다. 그래서 인기 있는 앱들은 번역을 위해 자원봉사를 모집하기도 합니다. 훌륭한 앱을 자국민이 써보길 원하는 사람들이 스스로 번역을 하는 경우가 많거든요.

helpus 앱을 다른 언어로 번역하실 분 모집합니다!
현재 helpus 앱은 한글, 영어만 지원합니다.

도움 주고 받는 앱 helpus

앱 사용자 중 다음과 같은 도움이 가능하 사용자들이 있습니다.

최면 상담, 치료
영어, 일본어 관련 문제
건강 상담, 심리 상담

물론, 저도 명상, 루시드 드림 관련 상담이 가능합니다.

구글 플레이: https://play.google.com/store/apps/details?id=club.etain.helpus
애플 앱 스토어: https://apps.apple.com/us/app/helpus-instant-help-in-town/id1496615309
APK 파일 다운로드설치: https://etain.club/download
소개 영상

사용법

보다 자세한 내용은 홈페이지를 참고해 주세요.
https://etain.club