[Outlook add-in] Office 함수로 사용자의 언어 및 환경 파악하기 - 2

🥐 개요

이번 글은 간단하게 개발하면서 유용했던 Office 전용 함수 두 가지를 간단하게 적으려고 합니다.

소개할 Office 함수는 사용자가 사용 중인 언어를 파악하여 프로젝트에서 다국어 지원 기능을 구현하는 방법과,

사용자가 서비스를 이용하고 있는 환경이 Outlook web 환경에서 사용하고 있는지, Outlook desktop app에서 사용하고 있는지를 확인하는 방법입니다.

🍕 Outlook 사용자의 언어, 환경 확인하기

- 사용자 언어 파악하기

MS의 서비스들은 전 세계적으로 사용되기 때문에 기본적으로 다양한 언어를 지원하기 때문에, Outlook 역시도 다양한 언어들을 지원한다.

시작 언어 설정은 사용자의 MS 계정 설정을 따라가지만, 사용자가 의도적으로 Outlook에서 사용할 언어를 선택할 수 있다.

이 경우 웹 브라우저의 언어와 사용자가 설정한 언어가 다를 수 있기 때문에 js를 이용한 일반적인 방법이 아닌 Office 내장 함수를 사용해야 한다.

그중 Office.context.displayLanguage를 사용한다면 간단히 사용자의 언어를 확인할 수 있다.

const myLanguage = Office.context.displayLanguage;

이를 프로젝트에서 사용하고 있는 언어 설정 라이브러리와 연동해서 사용한다면, 쉽게 사용자에 맞는 언어 설정을 할 수 있다.

참고로 아래 예시는 react-i18next를 사용한 예시이다. (react-i18next에 대한 자세한 내용은 링크에 따로 작성하였다.)

const setDisplayLanguage = () => {
  // @NOTE: 사용자 언어 파악
    const myLanguage = Office.context.displayLanguage;
    switch (myLanguage) {
      case 'en-US': // 영어
        i18n.changeLanguage('en');
        break;
      case 'ko-KR': // 한글
        i18n.changeLanguage('ko');
        break;
      case 'ja-JP': // 일본어
        i18n.changeLanguage('ja');
        break;
    }
  };

• 참고로 switch문에 default 값을 원하는 값으로 설정해도 되지만, i18n 기본 설정에서 이를 설정하여서 위 함수에는 생략하였다.

필자는 렌더링 전에 호출을 하기 위해 위 함수를 useLayoutEffect 훅과 같이 아래 예시처럼 사용하였다.

useLayoutEffect(() => {
    setDisplayLanguage();
  }, []);

- 사용자 환경 파악하기

UI/UX를 고려하여 화면을 구성하다 보면, 사용자가 web 환경인지 desktop app 환경인지 구분이 필요할 때가 있다.

• web에서는 add-in의 가로 길이를 조절할 수 없지만, desktop app 환경에서는 사용자가 add-in의 가로 길이를 조절할 수 있을 뿐만 아니라 app 자체 창크기를 조절할 수 있다.

• desktop app의 보안 설정 때문에 web과 다른 함수를 사용할 때 등

그럴 경우 Office.context.platform을 사용해서 아래 예시의 함수처럼 사용하면 된다.

export const checkPlatformType = () => {
  // @NOTE: 만약 유저가 web을 사용하고 있을경우 return false
  return Office.context.platform !== Office.PlatformType.OfficeOnline;
};

🥞 마치며

사실 Office 함수 중에서도 dialog을 이용한 소셜 로그인 관련 내용을 적고 싶었지만, 글이 너무 길어져서 다음 글에 적기로 했다.

또, 뭔가 시리즈를 적는데 재미를 조금씩 느끼고 있는 느낌..?

계속..