Customizing the Look of Outlook Web Access

마지막으로 수정된 항목: 2007-09-06

작성자: Darcy Jayne

사용자와 관리자에게 좋은 인상을 주는 한 가지 방법은 조직의 로고와 색을 사용하여 Microsoft Office Outlook Web Access를 사용자 지정하는 것입니다. Outlook Web Access를 사용자 지정하면 많은 사용자가 신뢰할 수 있는 도구로 조직의 정체성을 확립할 수 있습니다.

이 문서에서는 로그온, 언어 선택 및 로그오프 페이지를 사용자 지정하는 방법 및 사용자 지정 헤더를 사용하여 테마를 만드는 방법에 대해 설명합니다. 더욱 복잡한 조직의 변경 내용을 포함하는 Outlook Web Access 테마를 만들려면 CSS 스타일시트(.css 파일)의 사용 방법을 먼저 배우십시오. .css 파일을 충분히 이해한 후에 일단 일부 요소를 변경하고 변경 내용을 테스트하여 결과가 예상대로 나타나는지 확인하십시오.

테마에 포함된 내용

Outlook Web Access 옵션에서 색 구성표로 알려진 테마는 Outlook Web Access에 사용되는 배경색, 글꼴, 강조색, 아이콘 및 헤더를 정의합니다. 기본적으로 Microsoft Exchange Server 2007이 실행 중인 컴퓨터에 클라이언트 액세스 서버 역할을 설치할 때 두 개의 테마가 설치됩니다. 기본 테마는 시애틀 스카이와 카본 블랙입니다.

각 테마는 미디어 파일과 CSS 스타일시트(.css 파일)의 모음으로, 클라이언트 액세스 서버에 있는 설치 디렉터리의 \Client Access\OWA\버전\themes에 저장됩니다. 각 테마는 \themes의 하위 디렉터리에 저장됩니다.

기본 테마(시애틀 스카이)는 \themes\base에 있습니다. base 폴더에는 테마를 정의하는 데 필요한 모든 파일이 포함되어 있습니다. 이 파일에는 테마 이름을 정의하는 .xml 파일, .css 파일 및 그래픽이 포함되어 있습니다. 선택한 파일을 새 디렉터리로 복사하고 필요에 맞게 해당 파일을 수정하여 추가 테마를 만들 수 있습니다. 사용자 지정 테마를 사용하는 경우 사용자 지정 테마 디렉터리의 요소가 먼저 사용되고 사용자 지정하지 않은 필수 요소는 기본 테마에서 가져옵니다. 예를 들어, 머리글 그래픽만 새 테마로 복사한 후 수정하여 새 테마를 만들 경우 사용자가 해당 테마를 선택하면 머리글 그래픽은 새 테마에서, 나머지 테마 속성은 기본 테마에서 가져옵니다.

Exchange 2007 SP1의 새로운 기능

Outlook Web Access는 Exchange Server 2007 SP1(서비스 팩 1)에 추가 테마 두 개를 추가했습니다. 이 새 테마 두 개는 Xbox와 Zune입니다.

시작하기 전에

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

• 원본 파일의 편집을 시작하기 전에, 특히 \themes\base 디렉터리에서 파일을 편집할 때 항상 원본 파일의 백업 복사본을 만드십시오.

• 폴더 \Client Access\OWA\버전\themes\base 또는 포함된 파일을 삭제하지 마십시오.

• 해로울 수 있는 콘텐츠, 피싱 공격, 바이러스 및 차단되었거나 누락된 콘텐츠에 대해 경고하기 위해 메시지 위쪽에 나타나는 알림 표시줄을 변경하지 마십시오.

테마 만들기

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

1. 로컬 관리자 그룹의 구성원을 위임받은 계정을 사용하여 Outlook Web Access를 호스팅하는 클라이언트 액세스 서버에 로그온합니다.

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

3. \Client Access\OWA\<버전>\themes에 새 폴더를 만들고 Fourth Coffee와 같은 이름을 지정합니다.

4. 기본 테마에서 새 폴더로 다음 파일을 복사합니다.

   • premium.css

   • owafonts.css

   • logopt.gif

   • logopb.gif

   • nbbkg.gif

새 테마 이름 지정

사용자 지정 테마의 이름은 두 가지 방법으로 지정할 수 있습니다. 첫 번째 방법은 새 테마를 만든 폴더에 원하는 테마 이름을 지정하는 것입니다. 예를 들어, 새 폴더에 Fourth Coffee라는 이름을 지정했기 때문에 새 테마에는 자동으로 Fourth Coffee라는 이름이 지정됩니다.

또한 기본 테마의 themeinfo.xml 파일을 새 폴더로 복사한 다음 편집하는 방법으로 사용자 지정 테마의 이름을 지정할 수도 있습니다. 메모장과 같은 텍스트 편집기로 themeinfo.xml 파일을 편집하여 테마 표시 이름을 원하는 테마 이름으로 변경할 수 있습니다. themeinfo.xml 파일은 폴더 이름을 사용자의 테마 이름으로 다시 정의합니다.

themeinfo.xml 파일을 사용하여 새 테마 이름을 지정하려면 다음을 수행합니다.

1. 기본 테마 폴더의 themeinfo.xml 파일을 Fourth Coffee 폴더에 복사합니다.

2. 사용자 지정 테마 폴더 내 themeinfo.xml 복사본을 엽니다.

3. theme displayname 값을 찾아서 Fourth Coffee Theme으로 변경합니다.

   이 파일에서 theme displayname = "Fourth Coffee Theme"을 읽어와야 합니다.

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

사용자 지정 헤더 만들기

이제 파일을 복사하고 테마 이름을 지정했으므로 헤더를 사용자 지정합니다. Outlook Web Access에서 헤더를 변경하려면 이미 새 테마의 폴더로 복사해 놓은 다음 파일이 필요합니다.

• premium.css

• owafonts.css

• logopt.gif

• logopb.gif

• nbbkg.gif

Premium.css 및 owafonts.css는 Outlook Web Access에서 사용되는 글꼴과 색을 정의합니다. Logopt.gif, logopb.gif 및 nbbkg.gif는 Outlook Web Access의 페이지 상단에 헤더를 만드는 데 사용되는 이미지 파일입니다.

1. 이미지 편집 도구에서 logopt.gif를 열어서 수정합니다.

2. 예를 들어, logopt.gif의 배경색을 HTML RGB 값 #DCBEC8을 사용하여 연한 자주로 변경합니다. logopb.gif와 nbbkg.gif를 편집하여 같은 배경색을 지정합니다.

HTML RGB 색 값은 숫자 기호(#) 다음에 여섯 개의 문자가 뒤따르는 형식의 일곱 문자로 정의됩니다.

사용자 지정 테마를 테스트하려면 Outlook Web Access Light 사용 옵션을 선택하지 말고 Outlook Web Access Premium에 로그온하여 옵션, 일반 설정을 차례로 클릭한 다음 모양 메뉴에서 사용자 지정 테마를 선택합니다. 변경 내용을 저장한 다음 새로 고침을 클릭해야 새 테마를 볼 수 있습니다.

다음은 시애틀 스카이 Outlook Web Access 테마의 헤더를 만드는 데 사용되는 원본 파일과 이 파일을 수정하여 만든 새 헤더의 그림입니다.

Outlook Web Access 헤더 파일

Outlook Web Access 사용자 지정 헤더

기본 Outlook Web Access 테마 변경

이제 새 테마를 만들고 헤더를 사용자 지정했으므로 이 테마를 Outlook Web Access의 기본 테마로 설정합니다. 기본 테마에서 사용자 지정 테마로 기본 Outlook Web Access 테마를 변경하려면 Set-OwaVirtualDirectory cmdlet를 사용합니다. 다음 예와 같이, 서버에 "FourthCoffeeCAS"를 사용하고, 가상 디렉터리에 "owa"를 사용하고, 웹 사이트에 "Default Web Site"를 사용하고, 폴더 이름에 "Fourth Coffee"를 사용합니다.

• Outlook Web Access의 기본 테마를 Fourth Coffee로 설정하려면 다음 명령을 실행합니다. set-owavirtualdirectory -identity "fourthcoffeeCAS\owa (default web site)" -defaulttheme "fourth coffee"

이미 Outlook Web Access에 로그온하여 테마를 선택한 경우에는 새 테마가 강제로 적용되지 않습니다. 모든 사용자가 새 테마를 사용하도록 하려면 테마를 선택하지 못하게 설정해야 합니다. 이렇게 하려면 Set-OwaVirtualDirectory cmdlet를 사용합니다.

• Outlook Web Access에서 테마를 선택하지 못하게 설정하려면 다음 명령을 실행합니다. set-owavirtualdirectory -identity "fourthcoffeeCAS\owa (default web site)" -themeselectionenabled $false

다음 명령을 실행하여 두 명령을 동시에 완료할 수 있습니다. set-owavirtualdirectory -identity "fourthcoffeeCAS\owa (default web site)" -defaulttheme "Fourth Coffee" -themeselectionenabled $false

로그온 및 로그오프 페이지 사용자 지정

사용자 지정 테마는 사용자가 로그온한 후 Outlook Web Access에 사용자 지정 모양을 제공하는 좋은 방법이지만 사용자 지정 로그온 페이지에 바로 나타나지 않습니다. Outlook Web Access에서는 기본 테마 로그온, 언어 선택 및 로그오프 페이지만을 사용합니다. 그러므로 사용자 지정 페이지를 만들려면 기본 테마 폴더에서 파일을 수정해야 합니다.

로그온, 언어 선택 및 로그오프 페이지의 텍스트 스타일, 색 및 배경색은 logon.css 파일에서 정의합니다. 이 페이지는 .gif 파일로 저장된 이미지 집합을 결합하여 만들어집니다. 로그온 페이지를 만드는 파일은 다음과 같습니다.

• logon.css

• lgnbotl.gif

• lgnbotm.gif

• lgnbotr.gif

• lgnexlogo.gif

• lgnleft.gif

• lgnright.gif

• lgntopl.gif

• lgntopm.gif

• lgntopr.gif

이 파일을 수정하여 Fourth Coffee에 대한 사용자 지정 로그온 및 로그오프 페이지를 만들어 새 모양을 만듭니다. 간단히 작업하기 위해 모든 이미지의 배경색에 단색을 사용합니다.

먼저, 기본 테마 폴더에 새 폴더를 만들고 "backup"이라는 이름을 지정합니다. 원래 로그온 및 로그오프 페이지로 되돌릴 경우를 대비하여 로그온 및 로그오프 페이지를 만드는 데 사용된 모든 파일을 새 폴더에 복사하여 백업 복사본을 만듭니다. 기본 테마 폴더는 Exchange 설치 디렉터리의 \Client Access\OWA\버전\themes\base에 있습니다.

다음 그림에서는 사용자가 설명 표시를 클릭하고 개인 컴퓨터입니다. 및 Outlook Web Access Light 사용을 선택했을 때 표시되는 기본 Outlook Web Access 로그온 페이지를 보여줍니다. 첫 번째 그림은 이 페이지를 만드는 여러 그래픽 파일이 어떻게 구성되어 있는지 보여주며 두 번째 그림은 logon.css 파일에 의해 결정되는 로그온 페이지의 배경색과 텍스트를 보여줍니다.

사용자 지정 그래픽 파일이 표시되는 Outlook Web Access 로그온 페이지

텍스트 옵션이 표시되는 기본 Outlook Web Access 로그온 페이지

다음 그림에서는 기본 Outlook Web Access 로그오프 페이지를 보여줍니다. 첫 번째 그림은 이 페이지를 만드는 여러 그래픽 파일이 어떻게 구성되어 있는지 보여주며 두 번째 그림은 logoff.css 파일에 의해 결정되는 로그오프 페이지의 배경색과 텍스트를 보여줍니다.

사용자 지정 그래픽 파일이 표시되는 Outlook Web Access 로그오프 페이지

텍스트 옵션이 표시되는 기본 Outlook Web Access 로그오프 페이지

로그온 및 로그오프 페이지의 변경 내용 테스트

변경할 때마다 Internet Explorer에서 Outlook Web Access 로그온 페이지를 열고 다음 단계를 따르면 저장한 변경 내용을 테스트할 수 있습니다.

1. Internet Explorer에서 Outlook Web Access 로그온 또는 로그오프 페이지를 엽니다. Outlook Web Access 가상 디렉터리를 호스팅하는 클라이언트 액세스 서버의 기본 웹 사이트 변경 내용을 테스트하려면 Internet Explorer를 열어 https://localhost/owa를 입력합니다.

2. 도구 모음에서 도구를 클릭한 다음 인터넷 옵션을 클릭합니다.

3. 일반 탭의 임시 인터넷 파일에서 파일 삭제를 클릭하고 모든 임시 Internet Explorer 파일을 삭제할 것인지 묻는 메시지가 나타나면 예를 클릭합니다.

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

5. 새로 고침을 클릭하여 변경 내용을 확인합니다.

로그온 또는 로그오프 페이지 파일을 변경할 때마다 이러한 단계를 반복하여 변경 내용을 확인합니다. 몇 가지 내용을 변경하는 경우 로그온 또는 로그오프 페이지를 열어 놓은 상태로 2단계에서 6단계까지 반복하여 변경 내용을 확인할 수 있습니다.

이미지 파일 사용자 지정

이제 원본 파일을 별도의 디렉터리에 안전하게 백업했으며 변경 내용을 검토하는 방법을 알고 있으므로 로그온, 언어 선택 및 로그오프 페이지의 그래픽을 구성하는 .gif 파일을 수정할 수 있습니다.

이 작업을 수행하려면 다음 그림과 같이 이미지 편집 도구를 사용하여 lgntopl.gif를 열고 새 디자인으로 수정합니다.

Fourth Coffee 로고

앞에서 HTML RGB 값 #DCBEC8을 사용하여 lgntopl.gif의 배경색을 연한 자주로 변경했으므로 나머지 .gif 파일을 각각 열고 배경색을 같은 색으로 변경합니다.

마무리

이제 .gif 파일을 편집했으므로 배경이 균일하도록 logon.css 파일을 편집해야 합니다. 새 배경색이 원래 텍스트 및 구분선 색과 잘 맞지 않을 수 있습니다. 새 로고에 맞게 배경색을 설정하는 것 외에도 새 페이지에 잘 맞게 기본 텍스트 색과 구분선 색을 변경합니다.

배경색, 기본 텍스트 색 및 구분선 색은 모두 logon.css의 HTML RGB 값으로 정의됩니다. 다른 색으로 변경하려면 logon.css에서 배경색, 기본 텍스트 색 및 구분선 색을 찾아서 HTML RGB 색 값을 원하는 값으로 변경해야 합니다.

색을 변경하려면 메모장과 같은 텍스트 편집기에서 logon.css를 엽니다. 변경할 각 색 요소의 문자열을 검색하고 다음 표의 정보를 기준으로 HTML RGB 값을 새 값으로 바꾼 다음 logon.css를 저장하고 닫습니다.

로그온 및 로그오프 페이지 요소와 설명

작업을 마치면 새 로그온 및 로그오프 페이지가 다음과 같이 표시됩니다.

Fourth Coffee 로그온 페이지

Fourth Coffee 로그오프 페이지

자세한 내용

사용자 지정 Outlook Web Access 테마를 만드는 방법은 Outlook Web Access에 대한 테마를 만드는 방법을 참조하십시오.

Darcy Jayne - Microsoft Exchange Server 테크니컬 라이터