Outlook Web App용 테마 만들기

적용 대상: Exchange Server 2013

테마는 Microsoft Outlook Web App 사용되는 배경색, 글꼴, 강조 색, 아이콘 및 머리글을 정의합니다. 각 테마는 \Client Access\OWA\prem\version\resources\themees의 설치 디렉터리에 있는 Microsoft Exchange 서버에 저장된 미디어 파일 및 계단식 스타일시트(.css) 파일의 컬렉션입니다. 각 테마는 \themes의 자체 하위 디렉터리에 저장됩니다.

기본 테마는 \Client Access\OWA\prem\version\resources\themees\base에 있습니다. 각 테마 폴더에는 테마를 정의하는 데 필요한 모든 파일이 포함되어 있습니다. 이 파일에는 테마 이름을 정의하는 .xml 파일, CSS 파일 및 그래픽이 포함되어 있습니다. 특정 테마의 모든 파일을 새 폴더로 복사하고 필요에 맞게 해당 파일을 수정하여 추가 테마를 만들 수 있습니다.

기본적으로 Exchange Server 2013을 설치할 때 다음과 같이 여러 테마가 설치됩니다.

• CSS(.css) 파일은 색, 그라데이션 및 글꼴을 정의합니다.

• 이미지(.png) 파일은 아이콘 및 기타 그래픽 요소를 제공합니다. 아이콘을 편집할 경우 크기는 변경하지 마십시오. 그래픽 요소의 크기를 변경한 경우 변경 내용을 테스트하여 요소 크기가 잘 맞는지 확인하십시오.

이러한 파일은 의 설치 디렉터리에 %ExchangeInstallPath%Client Access\OWA\prem\<version>\resources\themes있는 클라이언트 액세스 서버에 저장됩니다. 각 테마는 themes의 하위 디렉터리에 저장됩니다. 기존 테마를 복사한 다음 복사본을 수정하여 추가 테마를 만들 수 있습니다.

테마를 만든 후 Outlook Web App 로그인, 언어 선택 및 오류 페이지를 사용자 지정할 수도 있습니다.

시작하기 전에 알아야 할 내용

• 이 작업의 예상 완료 시간: 60분

• 이러한 절차를 수행하려면 먼저 사용 권한을 할당받아야 합니다. 필요한 권한을 보려면 클라이언트 및 모바일 디바이스 권한 항목의 "Outlook Web App 가상 디렉터리" 항목을 참조하세요.

• 이 절차를 수행하려면 로컬 서버 관리자 액세스 권한이 있어야 합니다.

• 기본 색을 변경하려면 텍스트 편집기가 필요하고 이미지를 변경하려면 그래픽 편집기가 필요합니다. 특정 색을 사용해야 하는데 색상표에 해당 색이 없는 경우에는 이미지 편집 도구를 사용하여 색을 샘플링한 다음 해당 HTML RGB 값을 확인합니다.

• Outlook Web App 테마를 변경하거나 만들 때 모범 사례로서 다음 지침을 따르는 것이 가장 좋습니다.

  • 기존 테마를 편집하기로 결정한 경우 편집하기 전에 원본 파일의 백업 복사본을 만듭니다.

  • \Client Access\OWA\prem\version\resources\themes\base 폴더 또는 그 안에 있는 파일을 삭제하지 마세요.

• 이 항목의 절차에 적용할 수 있는 바로 가기 키에 대한 자세한 내용은 Exchange 관리 센터의 바로 가기 키을 참조하세요.

1단계: 새로운 Outlook Web App 테마 만들기

시작하려면 새 테마의 폴더를 만들고 기존 테마에서 새 폴더로 파일을 복사합니다.

1. 로컬 관리자 그룹의 구성원을 위임받은 계정을 사용하여 Outlook Web App 가상 디렉터리를 호스트하는 Exchange 서버에 로그온합니다.

2. Windows 탐색기를 열고 Exchange 서버 설치 디렉터리를 찾습니다.

3. \Client Access\OWA\prem\version\resources\themes에서 새 폴더를 만들고 이름을 지정합니다(예: Fourth Coffee).

4. 또 다른 테마에서 새 폴더로 모든 파일을 복사합니다.

2단계: 새 테마 이름 지정

새 테마의 표시 이름을 설정하려면 다음을 수행합니다.

1. 방금 만든 사용자 지정 테마 폴더에 있는 themeinfo.xml 복사본을 엽니다.

2. 테마 displayname 값을 찾고 값을 사용하려는 이름으로 변경합니다. 예를 들어 displayname = "Fourth Coffee Theme"입니다.

3. themeinfo.xml을 저장하고 닫습니다.

3단계: 새 테마의 정렬 순서 변경(옵션)

원하는 경우 themeinfo.xml 파일을 편집하여 새 테마의 정렬 순서를 변경할 수 있습니다. 정렬 순서에 따라 [설정] 메뉴의 테마 변경 패널에 표시되는 테마 위치가 결정됩니다.

themeinfo.xml 파일을 사용하여 새 테마의 정렬 순서를 변경하려면 다음을 수행합니다.

1. 사용자 지정 테마 폴더에 있는 themeinfo.xml 복사본을 엽니다.

2. 테마 값을 찾고 새 테마 sortorder 가 목록에 표시할 위치를 반영하도록 값을 변경합니다. 테마는 숫자 값으로 정렬됩니다(오름차순). 기본적으로 기본 테마는 첫 번째 테마이고 해당 sortorder 값은 "0"입니다. 예를 들어 sortorder="<number>"입니다.

3. themeinfo.xml을 저장하고 닫습니다.

4단계: 새 테마 수정

이제 파일을 복사하고 테마의 이름을 지정했으면 파일을 사용자 지정할 수 있습니다. Outlook Web App 테마에서 다음과 같은 요소를 사용자 지정할 수 있습니다.

• 이미지 파일(헤더 영역 및 아이콘 정의)

• CSS 파일(글꼴 및 색 정의)

이미지 파일

테마 이미지는 \themes_\theme name>_\<images\의 두 폴더에 저장됩니다. The \images\0 folder contains images that will be used in left-to-right languages (like English), and languages that are read from right to left will use the images in the \images\rtl folder.

테마를 사용자 지정하려면 이미지 편집 도구를 사용하여 다음 이미지를 열고 수정하면 됩니다.

• Headerbgmain.png

  기본 헤더 이미지입니다. 이미지는 30픽셀의 헤더 높이를 초과하지 않는 것이 좋습니다. 기본 테마에서는 배경 이미지가 사용되지 않으므로 이 이미지는 투명합니다. 사용자 지정 배경 이미지가 있는 테마 예를 보려면 Blueprint 테마 폴더의 이미지를 참조하십시오.

• Headerbgright.png

  헤더 뒤의 바둑판식 배열 이미지로 사용됩니다. 기본 테마에서는 바둑판식 배열 배경 이미지가 사용되지 않으므로 이 이미지는 투명합니다. 사용자 지정 바둑판식 배열 배경 이미지가 있는 테마 예를 보려면 Blueprint 테마 폴더의 이미지를 참조하십시오.

• sprite1.mouse.png

  테마에 사용된 대부분의 이미지가 포함됩니다. 테마와 일치하도록 이미지 색을 변경할 수 있으며 기본 Outlook Web App 텍스트 로고도 변경할 수 있습니다.

  문제를 방지하려면 스프라이트에서 개별 아이콘의 크기를 변경하지 마십시오. 그리고 투명한 .png 파일로 저장되었는지 확인하십시오.

• themepreview.png

  이 이미지는 Outlook Web App의 [설정] 메뉴에 있는 테마 변경 패널의 테마를 나타내는 데 사용됩니다.

색 및 글꼴

계단식 스타일시트(.css) 파일은 테마에 사용되는 색과 글꼴을 정의하고 \themes\<theme 이름> 아래의 여러 폴더에 저장됩니다. \<theme name>\0 폴더에는 왼쪽에서 오른쪽 언어(예: 영어)로 사용되는 .css 파일이 포함되어 있으며, 오른쪽에서 왼쪽으로 읽는 언어는 \<theme name>\rtl 폴더의 .css 파일을 사용합니다. 해당 언어에서 사용할 .css 파일이 포함된 언어별 폴더(예: \ja, \ko, \zhs 및 \zht)도 있습니다.

\theme name>\images\0 폴더를 수정하여< 시작합니다. There are four colors used throughout each theme that can be customized.

• BrandColor: #0072C6
• NavBarHoverColor: #4C9CD7
• UnreadColor: #2A8DD4
• FocusColor: #DFEDFA

메모장과 같은 텍스트 편집기를 사용하여 이러한 값의 인스턴스를 모두 찾아 두 파일 즉 owa2styles.mouseCSS 및 owa2styles2.mouseCSS의 테마 색으로 대체할 수 있습니다. 이 작업은 해당 .css 파일이 있는 새 테마의 모든 폴더에서 수행되어야 합니다.

5단계: 기본 Outlook Web App 테마 설정

새 기본 테마를 설정하면 Outlook Web App의 [설정] 메뉴를 통해 테마를 변경하지 않은 사용자에게만 영향을 줍니다.

모든 사용자가 기본 테마를 사용하도록 하려면 기본 테마 설정 이외에도 테마 선택을 사용할 수 없도록 설정해야 합니다.

셸을 사용하여 Outlook Web App에 대한 기본 테마 설정

다음은 서버 이름이 인 Outlook Web App 기본 테마를 설정하는 예제입니다fourthcoffeeowa. 여기서 가상 디렉터리 이름은 이고 웹 사이트 이름은 이며 default web site테마는 폴더에 있습니다Custom.

set-owavirtualdirectory -identity "fourthcoffee\owa (default web site)" -defaulttheme Custom

구문과 매개 변수에 대한 자세한 내용은 Set-OwaVirtualDirectory를 참조하십시오.

셸을 사용하여 Outlook Web App 테마 선택을 사용하지 않도록 설정

다음은 서버 이름이 이고 가상 디렉터리 이름이 이고 웹 사이트 이름이 fourthcoffeeowa인 Outlook Web App 테마 선택을 사용하지 않도록 설정하는 예제입니다default web site.

set-owavirtualdirectory -identity "fourthcoffee\owa (default web site)" -themeselectionenabled $false

다음 예와 같이 두 명령을 동시에 완료할 수도 있습니다.

set-owavirtualdirectory -identity "fourthcoffee\owa (default web site)" -defaulttheme Custom -themeselectionenabled $false

구문과 매개 변수에 대한 자세한 내용은 Set-OwaVirtualDirectory를 참조하십시오.

6단계: iisreset/noforce를 실행하여 변경 사항 저장

테마를 추가하거나 변경한 경우, 테마 이름을 변경한 경우 또는 테마 정렬 순서를 변경한 경우 변경 내용을 적용하려면 IIS(인터넷 정보 서비스)를 중지한 다음 다시 시작해야 합니다. 이렇게 하려면 새 테마를 만든 서버에서 명령 프롬프트 창을 열고 iisresest /nforce 명령을 실행합니다.

이 작업의 작동 여부는 어떻게 확인하나요?

1. 새 테마를 만든 서버의 가상 디렉터리를 사용하여 Outlook Web App에 로그인합니다. Outlook Web App 가상 디렉터리를 호스트하는 Exchange 서버의 기본 웹 사이트에 대한 변경 내용을 테스트하려면 Internet Explorer을 열어 URL https://localhost/owa를 입력합니다.

2. 설정 메뉴 > 테마 변경을 선택하고 사용자 지정 테마를 선택하여 사용자 지정 테마로 전환합니다.

최신 변경 내용이 표시되지 않을 경우 iisreset/noforce 실행

1. 인터넷 Explorer 도구 모음에서 설정 메뉴 >인터넷 옵션을 선택합니다.

2. 일반 탭에서 검색 기록 아래의 삭제를 선택한 후 임시 인터넷 파일 및 웹 사이트 파일이 선택되어 있는지 확인합니다. 그런 다음 삭제를 선택하여 해당 파일을 제거합니다.

3. 확인을 클릭하여 인터넷 옵션을 닫습니다.

4. 새로 고침을 선택하여 변경 내용을 확인합니다.

테마 파일을 변경할 때마다 이 단계를 반복하여 변경 내용을 확인해야 할 수 있습니다. 몇 가지 변경을 하는 경우 Outlook Web App 열어 두고 서버에서 iisreset/noforce를 실행하고 필요에 따라 인터넷 Explorer 임시 파일을 지우는 작업을 반복할 수 있습니다.