Outlook Web App을 위한 테마 만들기

아티클
03/03/2017

적용 대상: Exchange Server 2010 SP2, Exchange Server 2010 SP3

마지막으로 수정된 항목: 2016-11-28

이 항목에서는 Microsoft Office Outlook Web App의 사용자 지정 테마를 만드는 방법에 대해 설명합니다. 테마는 Outlook Web App의 모양을 제어하는 미디어 파일과 CSS 스타일시트(.css 파일)의 모음입니다.

기본적으로 Microsoft Exchange Server 2010이 실행 중인 컴퓨터에 클라이언트 액세스 서버 역할을 설치할 때 여러 개의 테마가 설치됩니다.

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

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

참고

Outlook Web App 라이트 버전은 테마를 지원하지 않습니다.

권장 사항

Outlook Web App 테마의 많은 요소가 변경될 수 있습니다. Outlook Web App에 불안정 요소가 생기지 않게 하려면 사용자 지정 테마와 직접적으로 관련된 파일만 변경하는 것이 좋습니다.

다음 지침을 따르는 것이 가장 바람직합니다.

원본 파일을 편집하기 전에 항상 백업 복사본을 만듭니다.
사용자 지정 테마가 있는 클라이언트 액세스 서버에 업그레이드나 핫픽스를 적용하기 전에 테마의 백업 복사본을 만듭니다.
한 번에 한두 부분만 변경하고 테스트를 마친 후에 다른 부분을 변경합니다.
\Client Access\OWA\<버전>\themes\resources에 있는 파일은 변경하지 않습니다. 이러한 파일에 정의된 글꼴 및 기타 설정은 Outlook Web App의 모든 테마에 사용됩니다. 파일을 변경하면 모든 테마에 영향을 줍니다.
테마는 각 클라이언트 액세스 서버에 저장됩니다. 클라이언트 액세스 서버가 둘 이상일 때 모든 서버에서 사용자 지정 테마를 사용하려면 테마를 각 클라이언트 액세스 서버의 테마 디렉터리에 복사해야 합니다.

Outlook Web App 모양의 사용자 지정과 관련된 다른 관리 작업에 대한 자세한 내용은 Outlook Web App 로그인 및 로그아웃 페이지 사용자 지정을 참조하십시오.

수행할 작업

새로운 Outlook Web App 테마 만들기
사용자 지정 테마 명명
테마에 대한 사용자 지정 아이콘 만들기
사용자 지정 헤더 만들기
Internet Explorer 개발자 도구를 사용하여 색 결정
테마에서 색 변경
테마에서 아이콘 및 로고 변경
기본 Outlook Web App 테마 설정

새로운 Outlook Web App 테마 만들기

이 절차를 수행하려면 먼저 사용 권한을 할당 받아야 합니다. 필요한 사용 권한을 확인하려면 다음을 참조하십시오. 클라이언트 액세스 권한의 "그래픽 편집기" 항목

Outlook Web App을 호스트하는 클라이언트 액세스 서버에서 Windows 탐색기를 열고 Exchange 서버 설치 디렉터리를 찾습니다.
\Client Access\OWA\<버전>\themes에서 원하는 것과 비슷한 색 구성표를 사용하는 테마를 찾은 다음 복사본을 만듭니다.
테마에 지정하려는 이름과 비슷한 짧은 이름을 방금 만든 복사본에 사용합니다.
새 테마 폴더에 있는 다음 파일의 복사본 및 테마를 만들기 위해 변경해야 하는 기타 파일의 복사본을 만듭니다. 이러한 복사본은 변경을 취소해야 할 경우에 대비해서 원래 설정을 보존하기 위한 것입니다.
- premium.css
- csssprites.png
- csssprites2.png
- headerbgmain.png
- headerbgright.png
새 테마 폴더에 있는 파일을 수정하여 테마를 만들려면 다음 섹션에 있는 단계를 따릅니다.
iisreset/noforce 명령을 사용하여 IIS(인터넷 정보 서비스)를 다시 시작합니다.
Outlook Web App에 로그온한 후 새 테마를 선택하여 새 테마를 테스트합니다.

사용자 지정 테마 명명

사용자 지정 테마 폴더에 있는 themeinfo.xml 복사본을 엽니다.
테마의 displayname 값을 찾아 원하는 테마 이름으로 변경합니다.

예: 테마를 Fourth Coffee라고 명명하려면 파일에 theme displayname = "Fourth Coffee"가 표시되어야 합니다.
sortorder 값을 변경하여 Outlook Web App의 테마 선택에서 원하는 위치에 테마를 배치합니다.

예: 테마가 첫 번째로 나타나게 설정하려면 파일에 sortorder = 1이 표시되어야 합니다.
변경 내용을 저장한 다음 themeinfo.xml을 닫습니다.
명령 프롬프트 창을 열고 iisreset/noforce 명령을 사용하여 클라이언트 액세스 서버에서 IIS를 중지했다가 시작합니다.
변경 사항을 테스트하려면 Outlook Web App에 로그인하고 옵션을 클릭한 다음 테마 선택에서 새 테마를 찾습니다. 테마가 나열되지 않으면 Microsoft Internet Explorer에서 인터넷 옵션을 사용하여 임시 파일을 삭제합니다. 그리고 브라우저를 새로 고친 다음 다시 테마 선택을 표시합니다.

테마에 대한 사용자 지정 아이콘 만들기

테마에 대해 사용자 지정 아이콘을 만들려면 themepreview.png 파일을 편집해야 합니다. 이 파일은 Outlook Web App의 테마 선택에 있는 테마용 아이콘입니다.

이미지 편집 도구에서 themepreview.png를 열고 원하는 대로 변경합니다. 크기는 수정하지 마십시오. 이미지는 32 x 32픽셀입니다.
변경 사항을 테스트하려면 Outlook Web App에 로그인하고 옵션을 클릭한 다음 테마 선택에서 새 테마를 찾습니다. 새 아이콘이 표시되지 않으면 Internet Explorer에서 인터넷 옵션을 사용하여 임시 파일을 삭제합니다. 그리고 브라우저를 새로 고친 다음 다시 테마 선택을 표시합니다.

사용자 지정 헤더 만들기

Outlook Web App에서 헤더를 변경하려면 Outlook Web App 맨 위에 있는 헤더를 만드는 데 사용되는 다음 파일을 편집해야 합니다.

headerbgmain.png
headerbgright.png
headerbgmainrtl.png(오른쪽에서 왼쪽으로 읽는 언어를 지원하는 경우에만 이 파일 편집).

이미지 편집 도구에서 .png 파일을 열고 원하는 대로 변경합니다. 크기는 수정하지 마십시오.
로고를 변경하려면 Paint.NET 또는 Photoshop과 같이 투명 배경을 지원하는 이미지 편집 도구를 사용하여 csssprites.png를 열고 수정합니다. 이 파일은 배경이 투명합니다. Outlook Web App은 csssprites.png의 특정 위치에서 각 아이콘 또는 로고를 가져오므로 파일에서 이미지를 이동하거나 크기를 변경하면 안 됩니다. 파일을 편집하는 경우 새 이미지를 원래 이미지의 바로 위에 정확히 일치하도록 두어야 합니다.
파일을 편집한 후 변경 내용을 저장합니다.
사용자 지정 테마의 변경 사항을 테스트하려면 Outlook Web App에 로그인하고 옵션을 클릭한 다음 테마 선택에서 원하는 테마를 선택합니다. 새 테마가 표시되지 않으면 Internet Explorer에서 인터넷 옵션을 사용하여 임시 파일을 삭제합니다. 그리고 브라우저를 새로 고친 다음 다시 사용자 지정 테마를 선택해 봅니다.

Internet Explorer 개발자 도구를 사용하여 색 결정

Internet Explorer 8 및 Internet Explorer 9에는 특정 요소의 색과 글꼴을 결정하고 수정된 값을 테스트하는 데 사용되는 개발자 도구가 포함되어 있습니다. 개발자 도구의 정보를 사용하면 .css 파일에서 해당되는 값을 찾고 수정하여 테마를 사용자 지정할 수 있습니다.

Outlook Web App에 로그인하고 원하는 테마를 선택합니다.
사용자 지정할 요소가 표시된 모듈로 이동합니다. 예를 들어, 메일의 강조색을 사용자 지정하려면 메일로 이동합니다.
Internet Explorer에서 프로그램 도구 모음으로 이동하여 도구 > 개발자 도구를 선택하거나 F12 키를 누릅니다.
Outlook Web App과 개발자 도구 창이 겹치지 않도록 창을 정렬합니다.
개발자 도구에서 도구 모음 왼쪽에 있는 선택 화살표를 클릭하거나 CTRL+B를 누릅니다.
사용자 지정할 Outlook Web App 섹션 위로 포인터를 이동합니다. 요소 위로 포인터를 가져가면 각 요소 주위에 윤곽선이 표시됩니다. 변경할 요소에 윤곽선이 표시되면 클릭합니다.
개발자 도구 창을 확인합니다. 페이지 작성에 사용된 코드가 보이며, 선택한 요소가 왼쪽 창에서 강조 표시됩니다.
오른쪽 창에서 요소의 색을 찾습니다. 색은 # 문자로 시작하고 뒤에 6자리 영숫자 문자가 이어져 총 7자리 문자열로 표현되는 RGB 값입니다. 예를 들면 흰색은 #ffffff로 표현됩니다.
RGB 값이 표시되지 않으면 이전 단계를 반복하여 다시 시도합니다.
RGB 값을 찾으면 원하는 값으로 변경한 다음 Enter 키를 누릅니다. Outlook Web App에 변경 사항이 거의 즉시 표시됩니다. 아직 테마가 변경된 것은 아니며, 현재 세션에 대한 로컬 설정만 표시됩니다.
개발자 도구의 오른쪽 창에는 값이 있는 파일과 파일에서 값을 찾을 위치가 표시됩니다.
변경할 값을 찾았으면, 클라이언트 액세스 서버에서 사용자 지정 테마가 있는 폴더로 이동하여 premium.css에서 값을 수정해야 합니다.

참고

여러 가지 색의 HTML RGB 값을 찾으려면 MSDN Library의 색상표를 참조하십시오. 특정 색을 사용해야 하는데 온라인에 해당 색이 없는 경우에는 이미지 편집 도구를 사용하여 색을 샘플링하고 해당 HTML RGB 값을 확인합니다. 개발자 도구에는 유용한 색 선택 도구가 있습니다. 메뉴에서 도구 > 색상표 표시를 선택합니다. 원하는 색의 RGB 값을 확인하려면 그 색이 사용된 요소 위에 마우스 포인터를 둡니다.

테마에서 색 변경

변경할 색을 찾고 원하는 색의 RGB 값을 확인했으면, 클라이언트 액세스 서버에서 프리미엄 스타일시트(premium.css)에 있는 속성을 찾고 기존 값을 새 값으로 바꿔야 합니다.

메모장 등의 텍스트 편집기를 사용하여 사용자 지정 테마의 premium.css 파일을 엽니다.
파일에서, Internet Explorer 도구를 사용하여 찾은 값을 검색합니다.
RGB 값을 원하는 색의 RGB 값으로 바꿉니다.
사용자 지정 테마의 변경 사항을 테스트하려면 Outlook Web App에 로그인하고 옵션을 클릭한 다음 테마 선택에서 원하는 테마를 선택합니다. 변경 사항이 표시되지 않으면 Internet Explorer에서 인터넷 옵션을 사용하여 임시 파일을 삭제합니다. 그리고 브라우저를 새로 고친 다음 다시 사용자 지정 테마를 선택해 봅니다.

테마에서 아이콘 및 로고 변경

테마에서 아이콘 및 로고를 변경하려면 Paint.NET 또는 Photoshop과 같이 투명 배경을 지원하는 이미지 편집 도구를 사용하여 csssprites.png 및 csssprites2.png를 열고 수정합니다. 이러한 파일은 배경이 투명하며, 개별 요소를 올바르게 표시하려면 투명한 배경을 보존해야 합니다. Outlook Web App은 파일의 특정 위치에서 각 이미지를 가져오므로 파일에 있는 이미지를 이동하거나 크기를 변경하면 안 됩니다. 파일을 편집하는 경우 새 이미지를 원래 이미지의 바로 위에 정확히 일치하도록 두어야 합니다.

이미지를 변경하려면 다음을 수행합니다.

투명 배경을 지원하는 이미지 편집 도구를 사용하여 변경할 그래픽 요소가 포함된 파일을 엽니다.
원래 요소의 위치와 크기를 잘 보존하면서 변경할 요소를 편집합니다.
파일을 저장하고 닫습니다.
사용자 지정 테마의 변경 사항을 테스트하려면 Outlook Web App에 로그인하고 옵션을 클릭한 다음 테마 선택에서 원하는 테마를 선택합니다. 변경 사항이 표시되지 않으면 Internet Explorer에서 인터넷 옵션을 사용하여 임시 파일을 삭제합니다. 그리고 브라우저를 새로 고친 다음 다시 사용자 지정 테마를 선택해 봅니다.

기본 Outlook Web App 테마 설정

기본 테마를 설정하면 이전에 Outlook Web App에 로그온한 적이 없으며 새 테마를 선택한 사용자만 기본 테마를 사용하도록 적용됩니다.

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

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

이 절차를 수행하려면 먼저 사용 권한을 할당 받아야 합니다. 필요한 사용 권한을 확인하려면 다음을 참조하십시오. 클라이언트 액세스 권한의 "Outlook Web App 가상 디렉터리" 항목

이 예에서는 서버 이름이 "FourthCoffee", 가상 디렉터리 이름이 "owa", 웹 사이트 이름이 "Default Web site"이며 테마가 "Custom" 폴더에 들어 있는 Outlook Web App용 기본 테마를 설정합니다.

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

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

셸을 사용하여 Outlook Web App 테마 선택 해제

이 예에서는 서버 이름이 "FourthCoffee", 가상 디렉터리 이름이 "owa", 웹 사이트 이름이 "Default Web site"인 Outlook Web App에서 테마 선택을 해제합니다.

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

다음 예와 같은 명령을 실행하여 두 명령을 동시에 완료할 수도 있습니다.

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