[react-native] 국가별 앱 이름을 다르게 해보자!

kysung95·2021년 4월 27일
1

react-native 정리

목록 보기
2/4
post-thumbnail

안녕하세요. 김용성입니다.
요즘 저는 2개의 앱을 만들고 있는데요. 하나는 swift, 하나는 react-native를 이용하여 진행하고 있습니다.

Front-end 개발자로서 앱 서비스를 만들다보면 다양한 앱을 설치해보고 세심한 부분에도 계속 신경을 쓰게 되는데요. 오늘은 이런 디테일하고도 간단한 작업 하나를 포스팅해보도록 하겠습니다.

저는 평상시에 핸드폰 언어 설정을 영어로 설정해놓고 사용합니다.
그러다보면 핸드폰의 배경화면 어플리케이션들의 이름들이 어떤 건 한국이름 그대로 쓰여있고, 또 어떤 어플리케이션들은 영어이름으로 지어져있는데요. 저는 이러한 것도 작지만 큰 세심함이라고 생각했습니다.
대개 우리가 이름을 들으면 알만한 어플리케이션들은 디바이스 설정이 영어로 바뀔 때 영어이름이 보이도록 설정이 되어있어요. (배달의 민족, 쿠팡 빼고)

참고로 서가는 제가 만든 어플입니다. 저것도 영어이름이 적용되어있지 않습니다 ㅠㅠ

(저는 어플이 굉장히 많이깔려있어요. 아무래도 앱개발을 많이하다보니 여러 UI/UX에 대해 생각하게 되고 그러다면 타 어플들이 많이 궁금해지더라구요. 그러다보니 어느덧 핸드폰 어플의 개수가 엄청 많아졌습니다.)

오늘 제가 포스팅하는 것도 언뜻 보기에는 음 별거 아니네 할 수 있지만, 생각보다 적용하지 않은 앱서비스들이 많더라구요.
저는 제가 만드는 앱에는 이것을 꼭 적용하고 싶어서 오늘 적용을 해보았답니다. ㅎㅎ
생각보다 간단하니까 잘 봐주세요.

Xcode 동작

InfoPlist.strings 생성

여러분들이 진행하고 있는 프로젝트의 xcodeproj 를 열어주세요!
위 올린 사진은 요즘 만들고 있는 프로젝트의 디렉토리인데요. 아파트 주차난 해소 어플이라서 이름을 '아몰랑파킹'으로 지었어요. ㅎㅎ
제가 올린 사진 맨 밑을 보면 AmorangParking 디렉토리가 있죠? 해당 파일을 우클릭 한 후 New File을 누르면 파일 목록들이 뜹니다. 오늘 저희는 여기서 resource 파트의 Strings File이 필요해요. 생성해준 뒤 이름은 반드시!! 반드시!! InfoPlist.strings라고 해주어야 합니다. 대문자 소문자도 잘 구별해주세요!

Project>Info 에서 localizations 추가

그렇게 생성한 뒤에 이제 xcodeproj의 메인으로 와서 Info 탭을 열어주세요. (Target에 있는 것이 아닌 Project에 있는 것을 열어주세요) 하단에 Localizations라는 파트가 있죠? 이 부분에서 '+' 버튼을 누른 뒤에 Korean 을 추가해주세요!

위 사진처럼 추가하시면 됩니다.

InfoPlist.strings Inspector 설정

다시 아까 만들어준 InfoPlist.strings 파일을 우클릭한 뒤 Show File Inspector를 클릭해줍니다. 그렇게 하시면 xcode 우측에 inspector창이 뜨는 것을 확인할 수 있어요. 그곳에서 회색 Localization 버튼을 눌러줍니다.

다음과 같이 선택창이 나오는 것을 확인하셨나요? 그냥 그대로 Localize버튼을 눌러주세요.
그 후에는 시스템 우측 localization 버튼이 있던 공간이 다음과 같이 변하는 것을 확인하실 수 있어요.

원래는 English만 체크되어있을텐데 Korean도 체크해줍니다.
그러고 다시 InfoPlist.strings 파일을 보면 해당 파일이 두개의 파일로 이루어져있는 디렉토리처럼 바뀌어 있는 것을 확인하실 수 있어요.

이름 삽입

간단합니다. 다음과 같이 여러분들이 넣고싶은 이름을 넣어주시면 돼요.

//InfoPlist.strings(English)

"CFBundleDisplayName"="Aparking";
"CFBundleName"="Aparking";
//InfoPlist.strings(Korean)

"CFBundleDisplayName"="아몰랑파킹";
"CFBundleName"="아몰랑파킹";

AmorlaingParking은 이름이 너무 길어 저는 Aparking으로 네이밍을 했습니다.
여러분들도 각자 네이밍을 해주시면 돼요. 이제 끝입니다.

마무리

아마 이것을 적용시키려면 metro server를 한번 껐다 켜야할거예요. 저 같은 경우에는 real device로 빌드해서 확인해보았습니다.

영어로 설정

한국어로 설정

어떤가요?? 한결 보기 좋아지지 않았나요?
저는 이러한 것들을 놓치지 않는 서비스들에 더 애착이 가고 더 많이 사용하게 되더라구요.
여러분들도 앱서비스를 만들 때 이러한 부분도 잘 챙기시면 좋을 것 같아요.

읽어주셔서 감사합니다!

profile
김용성입니다.

0개의 댓글