이 항목에서는 로그온에 웹 인증 브로커를 사용하는 웹 페이지를 디자인하기 위한 모범 사례를 설명합니다.
- 메타태그 사용
- Windows 8 CSS 스타일 사용
- 색 및 테마 사용
- 맞춤
- 맞춤 디자인
- 빠르고 유연한 로그인 환경을 위한 디자인
- Security Considerations
- 관련 항목
메타태그 사용
"Contoso Social" 공급자는 메타태그를 사용하여 제목, 아이콘 및 머리글의 색을 지정할 수 있습니다. 샘플 HTML 파일(WebAuthLogin.html)에서는 다음 코드를 사용하여 이 작업을 수행합니다.
<meta name="mswebdialog-title" content="Contoso Social" />
<meta name="mswebdialog-header-color" content="#326464" /> <!-- Your brand color -->
<meta name="mswebdialog-logo" content="contoso_social_glyph.png" />
이를 통해 Windows는 다음 스크린샷의 빨간색 상자에서 강조 표시된 대로 UI 헤더에서 공급자의 존재를 눈에 띄게 통합할 수 있습니다. 
Windows 8 CSS 스타일 사용
제공된 ui-light.css 스타일시트는 Windows 스토어 앱에서 사용하는 Windows 8 스타일시트입니다. 단추, 텍스트 상자, 하이퍼링크 및 검사 상자와 같은 입력 체계 및 표준 컨트롤에 대한 Windows 스토어 앱 스타일을 정의하여 터치 친화적인지 확인합니다. Windows 8용 웹 권한 부여 페이지를 디자인하고 조정할 때는 이 스타일시트를 있는 그대로 사용하고 웹 페이지가 여전히 고유한 방식으로 모범 사례를 따르는 한 필요에 따라 업데이트하는 것이 좋습니다.
예를 들어 웹 페이지에서 하이퍼링크의 모양과 느낌을 위한 특별한 스타일시트가 있는 경우 제공하는 스타일이 표준 Windows 8 하이퍼링크와 같은 방식으로 터치 친화적인지 확인하는 것이 좋습니다. 이는 터치 장치에서 Windows 8을 사용하는 소비자 기반에 필수적입니다.
색 및 테마 사용
이 샘플에서는 몇 가지 다른 방법으로 색을 신중하게 사용하는 방법을 보여 줍니다.
- 웹 페이지의 흰색 배경입니다. 이전 스크린샷에서 알 수 있듯이 웹 페이지는 화면 너비에 걸쳐 있는 흰색 표면 내에서 호스트됩니다. 웹 페이지가 표면과 통합되도록 하려면 웹 페이지에 흰색 배경이 있어야 합니다.
- 브랜드 색에 따라 컨트롤 색을 지정합니다. CSS 파일 theme-colors.css는 컨트롤의 테마를 머리글 색과 일치하도록 ui-light 스타일시트에서 컨트롤의 표준 색을 재정의하는 스타일을 제공합니다. 예를 들어 다음 스크린샷에서 단추와 하이퍼링크는 머리글 색에서 파생된 색을 사용합니다.
- 머리글 색입니다. 헤더에 Contoso의 브랜드 색을 사용하면 시스템 UI 내에서 공급자의 브랜드에 대한 통합된 성격이 만들어집니다.
맞춤
웹 페이지 자체는 왼쪽 또는 오른쪽에 안쪽 여백이 없으므로 왼쪽의 머리글에 있는 제목과 오른쪽의 머리글에 있는 아이콘을 입력할 수 있습니다.
또한 단추는 항상 웹 페이지에서 오른쪽 아래에 정렬되고 머리글의 아이콘에 오른쪽 맞춤됩니다. 이는 Windows 8 사용자가 오른쪽 아래에 단추가 있는 유사한 대화 흐름에 익숙하기 때문에 모범 사례입니다.
맞춤 디자인
다음 이미지에서는 스냅 상태의 로그인 및 사용 권한 페이지를 볼 수 있습니다.
. 
샘플 파일 ui-webauth.css에서 웹 페이지에 사용할 수 있는 너비에 따라 페이지 레이아웃을 맞춤 상태로 최적화하는 미디어 쿼리의 사용을 확인할 수 있습니다. 다음 범위로 묶인 코드 조각은 맞춤 상태에 맞게 조정된 CSS를 구현합니다.
@media screen and (max-width: 500px)
{
…
}
Windows 8에서는 스냅 상태의 너비가 320픽셀입니다. 웹 인증 페이지는 위의 UI에서 260픽셀을 차지합니다. 여백이 충분한 최대 너비 값을 사용하므로 공급자의 미디어 쿼리 코드가 스냅 상태의 정확한 너비에 바인딩되지 않습니다.
스냅 보기에 맞게 앱을 조정하는 경우 사용자가 웹 인증 환경의 다른 보기(전체, 채우기 또는 참 보기)에 있는 컨텍스트를 잃지 않는 것이 중요하지만, 컨텍스트를 유지하는 데 필요한 정보가 표시되고 대화형이 되도록 페이지에서 요소의 레이아웃 및 계층 구조를 다시 구성하는 것이 중요합니다. 샘플이 스냅 상태에 맞게 웹 페이지를 조정하는 방법에 대한 몇 가지 예를 설명했습니다.
- 예를 들어 스냅 상태의 로그인 페이지에 대해 입력 텍스트 필드의 너비 속성(ui-light.css에 지정됨)이 재정의되고 더 작은 숫자 값으로 설정되어 텍스트 필드가 가로로 잘리지 않도록 합니다.
- 또 다른 예로 스냅 상태에서 h1 및 h2 헤더의 글꼴 크기는 각각 42pt 및 20pt에서 20pt 및 11pt로 줄어듭니다. 이 작업은 Windows 8 유형 램프에 따라 수행되며 변경된 뷰포트에서 텍스트를 더 간결하게 최적화합니다.
- 또 다른 예로 사용 권한 페이지의 아이콘 크기가 더 작습니다(위의 전체 보기 페이지와 비교). 또한 변경된 뷰포트에 가장 적합한 디자인 자산을 교환하면서 컨텍스트를 유지하기 위해 이 작업을 수행합니다.
빠르고 유연한 로그인 환경을 위한 디자인
이 웹 페이지의 디자인 초기에, 우리는이 페이지가 가장 좋은 한 가지는 빠르고 유동적인 로그인 경험이라는 것을 근거로 말뚝을 만들었습니다. 따라서 흐름에서 가장 눈에 띄는 UI는 빠른 자격 증명 입력 환경을 위한 로그인 페이지의 사용자 이름 및 암호 필드입니다. 암호 검색 및 개인 정보 취급 방침 참조와 같은 다른 일반적인 시나리오가 있음을 확인하지만 웹의 풍부한 환경은 이러한 환경에 더 적합합니다. 보안 웹 인증 환경과 관련이 없는 모든 흐름의 경우 사용자를 브라우저로 탐색하는 것이 좋습니다. 샘플 HTML 파일(WebAuthLogin.html)에 다음과 <meta name="mswebdialog-newwindowurl" content="*" /> 같이 표시됩니다. 그러면 사용자가 이러한 흐름을 완료한 다음 로그인할 앱으로 돌아갈 수 있는 사용자의 기본 브라우저에 있는 로그인 또는 사용 권한 페이지에서 연결된 모든 웹 페이지가 열립니다.
보안 고려사항
다음 문서에서는 보안 C++ 코드를 작성하기 위한 지침을 제공합니다.
관련 항목