Outlook Web App 로그인 및 로그아웃 페이지 사용자 지정

  • 아티클

마지막으로 수정된 항목: 2009-09-25

이 항목에서는 Outlook Web App에 대한 사용자 지정 로그인 및 로그아웃 페이지를 만드는 방법에 대해 설명합니다.

Outlook Web App와 관련된 다른 고급 관리 작업에 대한 자세한 내용은 Outlook Web App 고급 기능 관리를 참조하십시오.

로그인 및 로그아웃 페이지 사용자 지정

Outlook Web App 로그인, 언어 선택 및 로그아웃 페이지는 기본 테마 폴더의 그래픽 파일과 logon.css 파일을 기반으로 만들어집니다. 따라서 사용자 지정 로그인 및 로그아웃 페이지를 사용하려면 기본 테마 폴더의 해당 파일을 수정해야 합니다. 기본 테마 폴더는 Exchange 설치 디렉터리의 V14\Client Access\OWA\<버전 번호>\themes\base에 있습니다.

로그인, 언어 선택 및 로그아웃 페이지는 logon.css 파일을 사용하여 텍스트 스타일과 색을 정의합니다. 페이지는 테두리 위쪽, 아래쪽 및 양 측면 이미지를 결합하여 만들어지며 페이지 확장을 위한 반복 이미지와 모서리도 포함됩니다. 로그인 페이지를 만드는 파일은 다음과 같습니다.

  • logon.css
  • lgnbotl.gif
  • lgnbotm.gif
  • lgnbotr.gif
  • lgnexlogo.gif
  • lgnleft.gif
  • lgnright.gif
  • lgntopl.gif
  • lgntopm.gif
  • lgntopr.gif

새 화면을 만드는 가장 편리한 방법은 단색을 사용하는 것입니다. 왜냐하면 같은 이미지 모음이 로그인 페이지, 로그아웃 페이지 및 사서함에 처음 로그인할 때 표시되는 언어 선택 페이지에 모두 사용되기 때문입니다. 페이지는 해당 페이지의 콘텐츠를 기준으로 가로 및 세로 방향으로 크기를 조절할 수 있습니다.

여러 개의 클라이언트 액세스 서버가 있을 때 이들 모두에 동일한 로그인 및 로그아웃 페이지를 사용하도록 설정하려면 수정한 로그인 및 로그아웃 파일을 각 클라이언트 액세스 서버에 복사합니다.

경고

사용자 지정 로그인 및 로그아웃 페이지를 만들기 위해 파일을 변경하기 전에 사용자 지정 로그인 및 로그아웃 페이지를 만들기에 앞서 변경할 모든 파일의 복사본을 백업합니다.

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

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

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

다음 그림에는 기본 Outlook Web App 로그아웃 페이지가 나와 있습니다. 첫 번째 그림에는 이 페이지를 만드는 여러 그래픽 파일이 어떻게 구성되어 있는지 나와 있고 두 번째 그림에는 logon.css 파일에 의해 결정되는 로그아웃 페이지의 배경색과 텍스트가 나와 있습니다.

사용자 지정 그래픽 파일이 표시되는 Outlook Web Access 로그아웃 페이지
Outlook Web App 기본 로그아웃 페이지

텍스트 옵션이 표시되는 기본 Outlook Web Access 로그아웃 페이지
텍스트 옵션이 있는 Outlook Web App 로그아웃 페이지

로그인 및 로그아웃 페이지의 변경 내용 테스트

Microsoft Internet Explorer에서 Outlook Web App 로그인 또는 로그아웃 페이지를 연 후 IIS를 다시 설정하거나 Internet Explorer를 종료하지 않고도 변경 내용을 테스트할 수 있습니다.

  1. Internet Explorer에서 Outlook Web App 로그인 또는 로그아웃 페이지를 엽니다.
  2. 도구 모음에서 도구를 클릭한 다음 인터넷 옵션을 클릭합니다.
  3. 일반 탭에서 검색 기록 아래의 삭제를 클릭합니다.
  4. 임시 인터넷 파일 아래의 파일 삭제를 클릭한 다음 모든 임시 Internet Explorer 파일을 삭제할지 여부를 묻는 메시지에서 예를 클릭합니다.
  5. 확인을 클릭하여 인터넷 옵션을 닫습니다.
  6. 새로 고침을 클릭하여 변경 내용을 확인합니다.

로그인 또는 로그아웃 페이지 파일을 변경할 때마다 이러한 단계를 반복하여 변경 내용을 확인합니다. 몇 가지 사항만 변경하는 경우 로그인 또는 로그아웃 페이지를 열어 놓은 상태로 단계를 반복하여 변경 내용을 확인할 수 있습니다.

Outlook Web App에서 로고 변경

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

Outlook Web App를 사용자 지정하기 위해 로그인 및 로그아웃 페이지의 Outlook Web App 로고를 사용자 조직의 로고로 변경할 수 있습니다.

  1. 변경할 파일의 복사본을 만든 다음 필요에 따라 원래 페이지를 복원할 수 있도록 안전한 위치에 저장합니다.
  2. 이미지 편집 도구를 사용하여 lgntopl.gif 파일을 연 다음 이를 수정하여 원하는 로고를 만듭니다.
  3. 변경 내용을 저장한 다음 새로 고침 단추를 클릭하여 변경 내용을 확인합니다.

참고

lgntopl.gif의 배경색을 변경한 경우에는 로그인 및 로그아웃 페이지를 만드는 데 사용되는 나머지 파일에 대해서도 같은 색으로 수정하는 것이 좋습니다.

글꼴 스타일 및 색 변경

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

logon.css 파일을 편집하여 페이지를 구성하는 글꼴 스타일과 일부 색을 변경할 수 있습니다. 로그인 페이지와 언어 선택 페이지의 중심에 있는 컨트롤의 배경색도 변경할 수 있습니다. 이러한 페이지의 색을 변경한 경우에는 배경색도 맞춰 변경하는 것이 좋습니다.

로그인, 로그아웃 및 언어 선택 페이지의 배경 및 글꼴 색을 변경하려면 로그인 스타일시트(logon.css)에서 해당 값을 찾은 다음 원하는 색의 HTML RGB 값으로 결정합니다. HTML RGB 색 값은 숫자 기호(#) 다음에 6개의 문자가 뒤따르는 형식의 7개 문자로 정의됩니다. 여러 가지 색의 HTML RGB 값을 찾으려면 MSDN Library의 색상표를 참조하십시오. 특정 색을 사용해야 하는데 온라인에 해당 색이 없는 경우에는 이미지 편집 도구를 사용하여 색을 샘플링하고 해당 HTML RGB 값을 결정합니다.

변경 내용을 테스트하려면 Internet Explorer를 열어 Outlook Web App의 URL을 입력합니다. Outlook Web App 가상 디렉터리를 호스팅하는 클라이언트 액세스 서버의 기본 웹 사이트에 대한 변경 내용을 테스트하려면 Internet Explorer를 열어 https://localhost/owa를 입력합니다.

참고

언어 선택 페이지는 사용자가 Outlook Web App에 처음 로그인할 때만 표시됩니다.

다음 표는 로그인 및 로그아웃 페이지의 요소 목록과 각 요소에 대한 설명입니다.

로그인 및 로그아웃 페이지 요소 및 설명

변경할 요소 검색할 문자열 설명

웹 브라우저 창의 배경색

body{background-color:#ffffff

웹 브라우저 창의 배경색. 로그인 및 로그아웃 페이지가 포함된 창의 색을 제어합니다.

로그인 및 로그아웃 페이지의 배경색

Background: #ffffff

로그인 및 로그아웃 페이지 배경 색. 그래픽 파일의 배경색을 변경하는 경우 배경색도 이에 맞춰 변경해야 합니다.

경고 텍스트

wrng{color:#ff6c00;

개인 컴퓨터입니다.를 선택할 때 표시되는 경고 텍스트의 색. 기존 Outlook Web App 로그인 페이지에서 이 경고 텍스트는 주황색이며 흰색 배경에 잘 대비됩니다. 로그인 페이지의 배경색을 변경하는 경우 경고 텍스트를 잘 읽을 수 있도록 경고 텍스트 색을 변경할 수도 있습니다.

기본 텍스트 색

select, table{color:#444444;}

기본 텍스트 색은 검정색입니다. Outlook Web App 로그인 페이지의 입력 필드 및 선택 가능한 옵션을 나타냅니다. 사용자 이름 및 암호 필드의 레이블과 보안 옵션 옆의 텍스트 등도 해당됩니다. 로그인 페이지에 연한 색을 선택한 경우에는 이 텍스트에 검정색이 잘 어울립니다.

설명 숨기기/표시

a{color:#ff6c00;

로그인 페이지에서 개인 및 공용 로그인 설명을 표시하거나 숨기기 위해 클릭하는 링크

설명 텍스트

expl{color:#999999;

사용자가 설명 표시를 클릭할 때 표시되는 텍스트의 색

Outlook Web App Light 버전 설명

disBsc{color:#999999;

사용자가 Outlook Web App Light 버전 사용을 선택하면 Outlook Web App Light 버전에 대한 간단한 설명이 표시됩니다.

색을 변경할 요소를 결정하고 해당 요소에 대해 원하는 HTML RGB 색의 값을 확인한 후 다음 절차를 사용하여 .css 파일로 정의된 요소의 색을 변경합니다.

요소의 색 변경

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

  1. logon.css를 엽니다.
  2. 이 항목의 앞부분에 있는 로그인 및 로그아웃 페이지 요소의 표를 사용하여 변경하려는 요소에 해당하는 문자열을 찾습니다.
  3. 변경할 요소의 HTML RGB 색 값을 해당 요소에 사용하려는 새 HTML RGB 색 값으로 바꿉니다.
  4. 변경 내용을 저장하고 logon.css를 닫습니다.
  5. Internet Explorer를 열고 Outlook Web App 로그인 페이지의 URL을 입력하여 변경 내용을 테스트합니다.

참고

이미 Outlook Web App 로그인 URL이 열려 있으면 임시 인터넷 파일을 삭제하고 Internet Explorer를 새로 고쳐 변경 내용을 테스트할 수 있습니다. 이 작업을 수행하려면 도구를 클릭한 다음 인터넷 옵션을 클릭합니다. 일반 탭에서 검색 기록 아래의 삭제를 클릭합니다. 임시 인터넷 파일 아래의 파일 삭제를 클릭한 다음 모든 임시 Internet Explorer 파일을 삭제할지 여부를 묻는 메시지가 표시되면 예를 클릭합니다. 확인을 클릭하여 인터넷 옵션을 닫은 다음 F5를 눌러 로그인 페이지를 새로 고칩니다.