모든 개발자가 앱을 현지화해야 하는 이유-JS 튜토리얼-php.cn

모든 개발자가 앱을 현지화해야 하는 이유

DDD

풀어 주다： 2024-09-13 06:20:32

원래의

699명이 탐색했습니다.

몇 년 전 저는 Facebook의 초기 개발자 중 한 사람의 강연에 참석했습니다.

Facebook이 초기에 출시한 모든 성장 기능 중 단 1개만이 모든 예측을 능가했습니다...

그 기능은 현지화였습니다.

그 강연 이후 저는 항상 내 앱을 가능한 한 빨리 현지화하는 것을 최우선으로 생각했고 그 결과 막대한 이익을 얻었습니다.

그러나 많은 개발자가 여전히 너무 오랫동안 현지화를 무시하는 것으로 나타났습니다.

(대부분 비용이 많이 들거나 복잡하다고 생각하기 때문일 가능성이 높음)

이 게시물에서는 현지화가 중요한 이유와 이를 가장 효율적인 방법으로 구현하는 방법을 설명합니다.

현지화에 관심을 가져야 하는 이유

대부분의 개발자는 현지화가 왜 좋은 생각인지 직관적으로 이해한다고 생각합니다. 하지만 몇 가지 주요 이유를 강조해 보겠습니다.

1) 글로벌 도달 범위 = 더 큰 사용자 기반

Why Every Developer Should Localize Their App

인터넷 사용자 중 25%만이 영어를 사용하므로 다국어 지원을 통해 나머지 75%를 활용하여 경쟁이 덜한 지역에서 성장 기회를 얻을 수 있습니다.

2) 사용자 경험 개선

앱이 자신의 언어와 유사하다고 느껴지면 사용자는 계속 머물 가능성이 더 높습니다. 현지화는 개인화된 경험을 제공하여 접근성과 참여도를 높입니다.

3) 높은 전환율

72%의 소비자가 모국어로 구매하는 것을 선호합니다. 현지화된 앱은 더 나은 전환을 제공하여 더 많은 인앱 구매, 구독 및 사용자 참여로 이어집니다.

4) 해외 시장을 위한 더 나은 SEO

현지화된 콘텐츠는 전 세계 검색 결과에서 앱의 가시성을 높여 사용자가 다른 언어로 검색할 때 앱 순위를 높이는 데 도움이 됩니다.

현지화 모범 사례

이제 현지화의 이점을 확신했다고 가정하고 두통을 덜 수 있는 방법에 대해 이야기해 보겠습니다.

1) 유연한 텍스트 저장으로 미리 계획

사용자가 접하는 모든 텍스트는 처음부터 .json과 같은 외부 파일에 저장되므로 나중에 핵심 코드를 건드리지 않고도 쉽게 추출하고 번역할 수 있습니다.

2) 로케일 구분 서식 자동화

날짜, 시간, 통화 등 지역별 형식에 맞게 앱이 자동으로 조정되어 다양한 국가에서 올바르게 표시되도록 하세요.

3) 텍스트 확장 처리

UI가 레이아웃을 깨지 않고 더 긴 번역을 수용할 수 있는지 확인하세요. 이는 짧은 텍스트를 더 많은 공간을 차지하는 언어로 번역할 때 오버플로 문제를 방지하는 데 도움이 됩니다.

4) AI 기반 자동화 사용

LLM으로 번역 프로세스를 자동화하면 특히 자주 업데이트되는 앱의 경우 상당한 시간이 절약됩니다.

저는 인간 번역 공급업체와 협력했지만 비용이 많이 들고 느렸습니다. 말할 것도 없이 LLM은 정말 이 분야에 능숙합니다. (결국 LLM의 원래 사용 사례였습니다.)

현지화를 구현하는 가장 간단한 방법

알겠습니다 뻔뻔한 플러그입니다만... 예전에 현지화하면서 겪었던 모든 문제를 해결한 현지화 제품을 방금 출시했습니다.

제품 이름은 블렌딘입니다.

개발자가 단 4단계로 전체 앱을 현지화할 수 있도록 지원하는 방법은 다음과 같습니다.

(이 흐름은 React용이지만 사이트에 다른 흐름이 나열되어 있습니다.)

1) Blendin CLI 및 React SDK 설치

npm install -g @blendin/cli
npm install @blendin/sdk-react

로그인 후 복사

2) BlendinProvider에서 애플리케이션 래핑

import { BlendinProvider } from '@blendin/sdk-react';
import blendinConfig from './blendin.json';

export const App = () => {
  return (
    <BlendinProvider config={blendinConfig}>
              <HomeScreen />
          </BlendinProvider>
  )
}

로그인 후 복사

3) t 후크를 사용하여 번역하려는 텍스트에 태그를 지정하세요

import { useTranslation } from '@blendin/sdk-react';

export const HomeScreen = () => {
  const { t } = useTranslation();

  return (
    <div>
              <p>{t('This text will be automatically translated by Blendin')}</p>
           </div>
  )
}

로그인 후 복사

4) blendintranslate을 실행하여 번역 파일을 생성합니다