WEB/Outlook Add-in

[Outlook add-in] Office 함수 활용 및 Web과 Desktop App의 차이점

kokoball-dev 2023. 10. 16. 22:52
728x90

 

오랜만에 outlook 시리즈로 돌아왔다.

 

이번 글은 MS의 Office 전용 함수를 사용하여 사용자가 사용 중인 언어를 파악하여 프로젝트에서 다국어 지원 기능을 구현하는 방법과,

사용자가 서비스를 이용하고 있는 환경이 Outlook web 인지 Outlook desktop(365) app에서 사용하고 있는지 확인하여 활용하는 방법을 알아볼 예정이다.

 

추가적으로 Web과 Desktop App의 차이점이 무엇인지 알아보고 어떻게 구분해서 개발할 것인지를 작성할 것이다.

 

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

* 사용자 언어 파악하기 *

 

MS의 서비스들은 전 서계적으로 사용되기 때문에 기본적으로 다양한 언어를 지원한다.

Outlook 역시도 다양한 언어들을 지원하며, 시작 언어는 사용자 MS 계정 설정을 따라가지만, 

사용자가 Outlook에서 사용할 언어를 선택하여 변경할 수 있다.

 

이 경우 웹 브라우저의 언어와 사용자가 설정한 언어가 다를 수 있기 때문에 JS를 이용한 일반적인 방법이 아닌

Office 내장 함수를 이용해야 한다.

 

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

사용 예시  
const myLanguage = Office.context.displayLanguage;

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

 

참고로 아래 예시는 react-i18next를 사용한 예시이다. (react-i18에 대한 활용은 추후에 작성할 예정이다)

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;
};

Outlook Web과 Desktop App 환경 비교하기

Web과 Desktop App 환경에서의 Outlook Add-in은 같은 React 코드로 동작이 가능하다.

하지만 Desktop App의 경우 Electron으로 개발되었기 때문에 사용할 수 있는 자원 (resource)과 사용 방법에서 차이첨이 있다.

 

* 첫 번째 차이점은 외부 Web browser와 데이터를 주고받을 때 발생한다. *

 

Web 환경의 경우 일반 웹 사이트와 동일하게 거의 모든 기능을 사용할 수 있으면, 새로운 Web browser 창을 열고 데이터를 주고 받는 것이 가능하지만,

 

Desktop App의 경우 Outlook 내 Add-in 프로그램과 사용자 개인의 외부 browser와 데이터 통신이 불가능하며 Electron App 내에서 제공하는 방법을 이용해서 데이터를 주고받아야 한다.

 

* 두 번째 차이점은 Web 저장소 (Cookie, Local Storage 등)에 있다. *

 

우선 Web과 Desktop App 모두 set cookie 등 다양한 함수를 통한 cookie와 local storage은 가능하다.

 

하지만 Web에서 새로 브라우저를 열고 add-in을 사용하는 경우 outlook 자체 도메인 (ex. outlook.office ~)으로 시작하지 않는 쿠키들은 삭제가 되는 문제를 가지고 있다. (보안 상 서드 파티 쿠키 저장을 막고 있다)

 

그렇기 때문에 서버에서 내려주는 데이터(ex. 세션 유지를 위한 데이터 등)들을 유지시켜야 한다면, 쿠키가 아닌 local storage에 저장해야한다.

 

번외 : Google, Facebook 등 소셜 로그인을 시도할 때 라이브러리를 이용하지 못하는 이유

사실, Google, Facebook 같은 소셜 로그인을 추가하는 작업은 그리 어려운 작업은 아니다.

 

인터넷에 예제도 많고, gapi나 react-google-login을 이용해 손쉽게 구현이 가능하기 때문이다.

 

하지만 금쪽이 같은 Outlook에선 조금 까다롭다. 🥲

 

Outlook Web 환경에선 외부 브라우저를 이용한 데이터 이동이 가능하기 때문에 앞서 언급한 라이브러리 등을 이용하면 간단히 구현 가능하다.

 

하지만 Desktop App의 경우 outlook add-in 안에서 자체 서비스의 URL 이동을 시도할 때 현재 유저의 도메인과 이동하려는 URL의 도메인이 같지 않으면 이동을 허용하지 않는 문제가 있기 때문이다.

 

그렇기에 Outlook에선 Office 제공 함수와 Redirect URI를 이용하는 방식으로 구현해야 한다.

 

이에 대한 자세한 방법은 다음 글에서 작성하겠다.

 

 

계속..

 

 

728x90