[TIL_11] KB 부트캠프 프로젝트 고도화(i18n, 다국어 처리)

 

 

비전공자 부트캠프 풀스택 부트캠프 추천 비전공자 개발자 TIL

 

 

안녕하세요,

KB IT's Your Life 기자단 마지막 포스팅입니다.

 

발표 이후에는 프로젝트 고도화를 하는데 시간이 다소 부족하여,

저희는 추가적으로 더 만나서 고도화를 진행하기로 했습니다!

 

저희 팀은 어떤 기능을 추가하는지 나열하고,

그 중 기간 내 성공한 다국어 처리에 대해 상세히 포스팅해보겠습니다!

(글로벌 앱을 만들기 위해선 필수 아닐까 싶은.. 😎)

 

KB IT's Your Life 6기를 희망하시는 분 또는

부트캠프 최종 프로젝트를 하시는 모든 분들께

도움이 되길 바랍니다!

 

#KB부트캠프6기모집 #KB부트캠프모집 #KBIT'SYOURLLIFE후기

#비전공자개발자취업 #비전공자포트폴리

 

---

 

KB IT's Your Life 마지막 프로젝트!

팀원들과 4가지 요소를 고도화하고자 했습니다.

 

1. 데이터분석

2. 금융지도

3. 결제 상품

4. 다국어 처리

 

저희 웹/앱을 글로벌 어플로 만들고자

국가 확장을 목표로 하였는데요!

 

4가지 고도화 목표를 자세히 나열하고,

그 다음 다국어 처리 방법을 조금 더 자세히 다뤄보겠습니다.

 

KB 부트캠프 고도화 종합실무 프로젝트 개발 프로젝트 후기

 

1. 데이터분석

 

데이터 통계 페이지를 만들어서,

송금 이력으로 여행 데이터 수집 및 활용하고자 하였습니다.

 

사용자들의 여행 데이터를 수집해서

관리자에게 데이터를 전달하고, 광고로 연결하려는 목표였습니다.

 

참고 관리자 페이지 출처: 구글 애널리틱스

 

2. 금융 지도

이전 포스팅에 작성한 것 처럼,

저는 구글API를 사용해서 금융 지도를 구현했습니다.

 

별로도 저희는 숙소 예약 시트를 만들었는데요,

캘린더에 저장된 내역을 지도에서 확인할 수 있도록

예약 위치를 보여주는 식으로 고도화를 진행 예정입니다.

 

구글 API 구현방법 출처: 송이페이 금융지도

 

3. 결제 상품

최종 구현 완료한 것은 숙소 예약입니다.

 

선택지를 넓혀주고자

항공권, k-pop 공연까지 상품권을 추천하고자 합니다.

 

이는 실제 여행객이 더 많은 상품을 활용해서,

한국 여행을 더 재밌게 즐기게 만들고자 한 목표입니다.

 

4. 국가 확장

저희는 i18n 을 사용해서 다국어 처리를 했습니다.

 

다국어 처리는 시간이 많이 들지만,

그만큼 저희의 목표를 보여주기에 부합한 기능이기 꼭 필수로 구현했습니다.

 

🤓 4가지 중 다국어 처리 기능에 대해 좀 더 자세히 다뤄보겠습니다!
만약 외국인 타겟 프로젝트를 진행하고 있다면, 해당 기능을 꼭 추가해보시길 바랍니다.

 

---

 

다국어 처리란?

다국어 처리는 웹 애플리케이션이

여러 국가와 언어를 지원하는 기능을 말합니다.

 

국제화(i18n)와 지역화(L10n)를 포함하며,

다양한 언어와 지역 설정에 맞게 소프트웨어를 조정하는 것입니다.

 

다국어 처리는 웹 페이지를 별도로 만들 필요 없이,

국제 표준을 따라 한 번에 여러 언어를 지원하는 방식으로 이루어집니다.

 

국제화(I8N) 지역화(L10n) 이미지 출처: 아이티데일리

 

1-1. 국제화(i18n)

국제화는 다수의 국가에서 사용 가능하도록 시스템을 설계하는 것을 의미합니다.

 

국제화를 통해 모든 지역에서 공통으로 사용할 수 있는 기본 기능을 제공하며,

날짜, 시간, 화폐, 키보드 설정 등을 다양한 문화에 맞게 조정하는 작업이 포함됩니다.

1-2. 지역화(L10n)

지역화는 특정 국가나 지역에 맞춘 내용을 제공하는 과정을 말합니다.

 

언어, 시간 형식, 통화 단위, 문화적 관습 등 사용자의 지역적 특성에 맞게 시스템을 조정합니다.

특히 한 나라의 법적 요구 사항이나 문화적 차이를 고려하여 각 지역에 맞는 콘텐츠를 제공하는 것이 중요합니다.

 

송이페이는 국제화로 웹/앱을 구현했습니다.

 

 

국제화란 언어나 지역 간에 소프트웨어를 이식 가능한 상태로 만드는 과정인 반면
지역화란 소프트웨어를 특정 언어나 지역에 적응시키는 과정

 

 

 

---

 

 

Vue.js 프로젝트에서의 다국어 처리를 쉽게 하기 위해선?

 

vue-i18n를 사용하면 됩니다.

아래 순서대로 따라하시면 바로 구현할 수 있도록 쉽게 작성해보겠습니다!

 

1. 설치

npm을 사용하여 vue-i18n을 설치할 수 있습니다.

(Vue 2 버전 기준)

npm install vue-i18n@8

 

▶ Vue CLI 3.x 이상의 버전을 사용 중이라면 vue add i18n 명령어 사용 추천합니다.

 

vue add i18n

 

▶ 프로젝트 내에 필요한 파일과 설정이 자동으로 추가해 줍니다.

 

2. i18n 설정

 

'vue add i18n'을 실행하면,

프로젝트의 src 폴더에 locales 폴더와 i18n.js 파일이 생성됩니다.

 

▼  아래 파일에서 다국어 처리를 위한 설정을 합니다.

import Vue from 'vue';
import VueI18n from 'vue-i18n';

Vue.use(VueI18n);

function loadLocaleMessages() {
  const requireLang = require.context('@/locales', true, /\.json$/);
  const messages = {};
  requireLang.keys().forEach(file => {
    const locale = file.replace(/(\.\/|\.json$)/g, '').split('/')[0];
    messages[locale] = requireLang(file);
  });
  return messages;
}

const options = {
  locale: 'en',  // 기본 언어 설정
  fallbackLocale: 'ko',  // 해당 언어가 없을 때 사용할 언어
  messages: loadLocaleMessages(),  // 다국어 메시지 불러오기
  silentTranslationWarn: true,
};

export default new VueI18n(options);

 

이 코드는 locales 폴더에 있는 JSON 파일들을 읽어와서

다국어 처리를 위한 설정을 완료할 수 있습니다.

 

3. 다국어 메시지 파일 구성

locales 폴더 안에 각 언어에 해당하는 폴더를 생성하고,

그 안에 번역 메시지를 JSON 형식으로 작성합니다.

 

예를 들어, 한국어, 영어, 베트남어를 지원한다고 가정하면

locales/ko/common.json, locales/en/common.json, locales/vi/common.json 파일을 생성합니다.

 

ko, en 비교 common.json

 

이렇게 비교하면 이해가 조금 쉬울거에요!

 

4. i18n 적용 방법

Vue 파일에서 다국어 적용을 하면 되는데요,

템플릿에서 다국어 처리를 위해 $t 메소드를 사용합니다.

 

간단한 예시를 아래 보여드리겠습니다!

<template>
  <div>
    <span>{{ $t('common.gender.M') }}</span> <!-- "남자" 또는 "man" 출력 -->
  </div>
</template>

 

 

▼ 스크립트 내부에서 this.$i18n.t 메소드를 사용해도 동일하게 적용됩니다.

let gender = this.$i18n.t('common.gender.M');

 

 

*자바스크립트 파일에서 다국어 적용

자바스크립트 파일에서는 i18n을 직접 import하여 사용합니다.

 

import i18n from '@/i18n';

export default {
  data() {
    return {
      genderStatus: [
        { text: i18n.t('common.gender.M'), value: 'M' },
        { text: i18n.t('common.gender.W'), value: 'W' },
      ],
    };
  }
};

 

 

vue-i18n에 본래 잘 정리되어있기도 하고,

위 과정만 따라하면 다국어 처리는 매우 매우 쉬울거에요.

 

따라하시다 혹시 질문사항이 있다면,

댓글 부탁드립니다!

 

---

 

 

저희 송이페이는 영어, 베트남어, 인도네시아어, 일본어로 구분했고,

아래는 영어와 베트남어 비교 이미지입니다!

 

가입된 정보에 맞게

자동으로 언어 처리가 되도록 구현했습니다. 😊 

 

영어 설정시 메뉴 vs 베트남어 설정시 메뉴

 

Vue 다국어 처리 영어 베트남어 i18n

 

 

 

※ 위 사진 출처는 이미지 하단에 기입해 두었습니다. (KB 최종 송이페이 프로젝트)

※ 질문사항은 댓글 부탁드립니다.

 

---

 

KB 최종 프로젝트 타임라인 정리

 

이렇게 종합실무 프로젝트의 마지막 포스팅까지 써보았습니다.!

 

7주간 진행된 프로젝트를 마무리했는데요,

벌써 이렇게시간이 지났다니 .. 아쉬운 마음이 크네요.

 

정말 좋은 점은

수료식, KB 해커톤, KB 제주도 여행(팀프로젝트 1등) 등등

아직 팀원들을 볼 일이 많다는 것입니다.

 

최종적으로 해커톤 포스팅도 글을 쓸 수 있도록

예선에 꼭 붙었으면 좋겠네요!

 

여기서 제가 말하는 해커톤이란

kb 주관 "세상을 바꾸는 소프트웨어" 라는 주제로

무박 3일로 진행되는 대회입니다.

 

 

KB IT's Your Life 참여자에게만 주어지는 기회!

▼ ▼ ▼ ▼ ▼ ▼ ▼

KB 채용 혜택 국민은행 서류면제 방법

 

 

KB IT's Your Life 꼭 도전해보세요!

기자단이 아닌 교육생 한 명으로써 진짜 추천드립니다.

👩‍💻타임라인

 

1주차. 비전공자가 개발 프로젝트 시작

2024.09.15 - [KB IT's Your Life/KB 기자단] - [TIL_7] KB 부트캠프: 비전공자가 개발 프로젝트 시작

 

2주차. 카카오개발자 API 지도 불러오기(Vue, JAVA)

2024.09.24 - [KB IT's Your Life/KB 기자단] - [TIL_8] KB 부트캠프: 카카오개발자 API 지도 불러오기(Vue, JAVA)

 

3주차. 챗GPT API 완전 쉽게 연결하기 (챗봇)

2024.10.01 - [KB IT's Your Life/KB 기자단] - [TIL_9] KB 부트캠프: 챗GPT API 완전 쉽게 연결하기 (챗봇)

 

4주차. KB 풀스택 부트캠프 최종 수상? 발표 자료 꿀팁까지!

2024.10.20 - [KB IT's Your Life/KB 기자단] - [TIL_10] KB 풀스택 부트캠프 최종 수상? 발표 자료 꿀팁까지!

 

타임라인을 다시 보니,

코드를 구현하면서 어떤 어려움이 있었는지 생각나네요 ㅎㅎ

---

📒TIL을 마무리하며..

고도화를 진행하면서, 저희 팀원끼리 무엇이 부족했는지 대화도 하고,

코드를 리뷰해보는 시간을 갖기도 하였습니다.

 

짧은 시간에 모든 기능을 완료하진 못해서

지속적으로 만나면서 고도화를 완성하기로 했습니다.

(오히려 좋은 느낌 ㅎㅎ)

 

프로젝트 종료 이후부터는 1일 1TIL로

알고리즘에 대한 학습 내용을 정리해서 올릴 예정입니다!

 

이렇게 KB 기자단 포스팅을 마무리 짓도록 하겠습니다.

오늘도 긴 포스팅 읽어주셔서 감사합니다.

 

 

KB IT's Is Your Life 기자단 부트캠프 풀스택TIL 백엔드부트캠프 프론트엔드부트캠프