SharePoint 테마로 스타일 꾸미기

Article
11/27/2012

최초 문서 게시일: 2012년 10월 30일 화요일

Lionel Robinson은 SharePoint 엔지니어링 팀에서 사용자 환경을 담당하는 프로그램 관리자입니다.

SharePoint 2013의 테마 기능은 사이트의 모양을 극적으로 바꾸고 고유한 사이트 디자인을 쉽게 만들 수 있게 해줍니다. SharePoint 사이트의 새로운 모양이 뛰어난데, 왜 바꿔야 할까요? 아래의 개인적인 예를 보십시오.

쌍둥이를 출산하고 두 아이를 위한 카시트를 자동차에 설치하자, 자동차의 운전석에 제대로 앉을 수 없게 되었습니다. 동승자 좌석에서도 옆으로 돌려 앉더라도 무릎이 대시보드에 부딪혔습니다. 조금 더 큰 차가 필요한 시간이 되었습니다. 제 아내와 저는 여러 가지 미니밴을 둘러봤습니다. 그리고 우리가 원하던 정확한 메이커, 모델 및 색상을 찾게 되어 정말 기뻤습니다. 온 가족이 타도 적당하고, 트렁크 공간도 충분해서 정말 만족스러웠습니다.

단순히 심리적인 것일지 모르지만 그날 이후부터는 도로에 나온 모든 사람들이 메탈릭 라이트 블루 색상의 혼다 오디세이만 타고 다니는 것처럼 보였습니다. 그리고 이따금 주차장에서 엉뚱한 차에 대고 문열림 단추를 누르고 있는 자신을 발견하곤 했습니다. 제 자동차는 다른 쪽 두 블럭 너머에 있는데 말입니다.

자동차를 진짜 자신의 자동차처럼 만들려면 어떻게 해야 할까요? 저렴하게 하려면 범퍼에 스티커를 붙이거나 뒤쪽에 데칼을 붙이는 방법이 있습니다. 여러 가지 옵션들을 둘러본 후 누군가에게 비용을 지불하고 자동차를 자신의 입맛에 맞게 개조하거나 용감하게 직접 개조를 할 수도 있을 것입니다.

저희 고객들 중에서도 현재의 SharePoint 사이트에 대해 이와 비슷한 문제를 안고 있는 경우가 있습니다. 모든 사람들이 몇 가지 동일한 템플릿을 사용하기 때문에 놀랍도록 비슷하게 보이는 사이트들 사이에서 길을 잃을 수 있습니다. 어쩌면 이러한 유사성을 그냥 체념하고 몇 가지 사소한 차이(범퍼 스티커)를 근거로 자신의 사이트는 조금 다르다고 말할 수도 있습니다. 아니면 많은 시간과 노력을 들이더라도 CSS와 HTML을 사용해서 사이트를 자신에 맞게 사용자 지정해야 합니다.

저희는 새로운 SharePoint 테마 환경을 통해 이러한 문제를 해결하고자 노력하고 있습니다. 이러한 환경에서는 기본적으로 색상, 사이트 레이아웃, 글꼴 및 배경 이미지의 네 가지 기본 장치를 통해 몇 분 안에도 사이트를 쉽게 사용자 지정할 수 있지만, 이러한 것만 바꾸더라도 사이트를 완전히 고유한 모양으로 만들 수 있습니다.

빠른 연습

"사이트 시작하기" 아래에서 "스타일 선택" 타일을 클릭합니다. 타일이 숨겨진 경우 설정 메뉴에서 "모양 변경"을 클릭하거나 사이트 설정에서 "모양과 느낌" 제목 아래에서 "모양 변경"을 찾을 수도 있습니다.
첫 번째 페이지에는 기본적으로 제공되는 몇 가지 시작 지점이 표시되어 있습니다. 이러한 옵션들은 단순히 사이트의 모양과 느낌에 대한 여러 옵션들의 범위를 보여주기 위한 것입니다. 원하는 옵션을 선택해서 시작합니다.
재미는 이제부터 시작됩니다. 앞에서 언급한 4가지 장치(배경, 레이아웃, 색 및 글꼴)를 변경하고, 변경 사항을 즉시 미리 볼 수 있습니다. 자신의 배경 이미지를 왼쪽 상단 모서리에 있는 사각형 안으로 끌어가고, 일치하는 색상 팔레트를 선택하고, 원하는 사이트 레이아웃을 선택하고, 자신에게 가장 적합한 글꼴 구성표를 선택합니다.
완벽한 옵션 조합을 선택한 후에는 "시험해보기"(오른쪽 상단 모서리)를 클릭해서 사이트에서 페이지를 미리 봅니다.
여기에서 바로 마법이 벌어집니다. 사이트의 CSS(모양과 형식을 정의하는 파일)에 대한 복사본이 만들어지지만 새로운 색상과 이미지에 맞게 CSS가 변경됩니다. 페이지를 본 후에는 이를 유지하거나 다시 다른 방식을 시도해볼 수 있습니다.

원하는 특정 색상 또는 글꼴이 있습니까?

저희는 사용자가 좋아할 만한 색상 팔레트와 글꼴 집합을 포함해두었습니다. 하지만 사용자가 직접 원하는 것을 추가할 수도 있습니다. 이를 위해서는 아무 텍스트 편집기만 있으면 됩니다. 이 작업을 위해서는 약간의 기술이 필요하지만 SharePoint 2010 테마에 익숙한 경우 조금 더 쉽게 작업을 수행할 수 있습니다. 기본적으로 달라진 점은 더 이상 THMX 파일 형식이 사용되지 않는다는 점입니다. 저희는 테마 옵션을 기술하기 위해 새롭고 간단한 XML 형식 집합을 만들었습니다. SPColor 파일은 컬러 팔레트를 나타내고 SPFont 파일은 글꼴 구성표를 나타냅니다. 자신의 고유한 팔레트 및 글꼴 구성표를 만드는 가장 쉬운 방법은 팀 사이트의 기본값을 가지고 시작하는 것입니다. 사이트 컬렉션의 루트 사이트로 이동해서 설정 메뉴에서 "사이트 설정"을 클릭한 후 "테마 갤러리"를 클릭합니다. 그러면 "15" 폴더에서 컬러 팔레트 및 글꼴 구성표를 찾을 수 있습니다.

컬러 팔레트

각 SPColor 파일에는 사용 가능한 각 색상 슬롯에 대해 색상 값(16진수)을 정의하는 간단한 XML이 포함됩니다. 변경하려는 색상 슬롯을 알고 있으면 단순히 새 값을 기록하고 파일을 테마 갤러리의 동일 폴더에 파일 사본을 저장하면 됩니다. 버전 지정 또는 게시가 설정된 경우 파일을 체크 인하고 게시해야 합니다. 새 팔레트는 테마 환경의 색상 선택기에서 사용할 수 있습니다(앞에서 언급한 3단계 참조).

SPColor 파일의 코드 조각은 다음과 같습니다. 또한 이번 릴리스에서는 색상과 함께 투명도 값을 지정할 수 있는 기능이 새롭게 추가되었습니다. 이렇게 하려면 8자리의 16진수 값을 사용합니다. 여기서 처음 2자리 숫자는 투명도를 나타내며, 나머지 6자리 숫자는 빨간색, 녹색 및 파란색 값을 나타냅니다.

<?xml version="1.0" encoding="utf-8"?>

<s:colorPalette isInverted="false" previewSlot1="BackgroundOverlay" previewSlot2="BodyText" previewSlot3="AccentText" xmlns:s="https://schemas.microsoft.com/sharepoint/">

<s:color name="BodyText" value="444444" />

<s:color name="SubtleBodyText" value="777777" />

<s:color name="StrongBodyText" value="262626" />

<s:color name="DisabledText" value="B1B1B1" />

<s:color name="SiteTitle" value="262626" />

<s:color name="WebPartHeading" value="444444" />

<s:color name="ErrorText" value="BF0000" />

<s:color name="AccentText" value="0072C6" />

<s:color name="SearchURL" value="338200" />

<s:color name="Hyperlink" value="0072C6" />

<s:color name="BackgroundOverlay" value="D8FFFFFF" />

...

</s:colorPalette>

Font schemes

글꼴은 사이트에 다양한 개별 특성을 추가할 수 있습니다. SharePoint 테마에서 가장 흥미로운 기능 중 하나는 웹 글꼴에 대한 지원입니다. 이 기능 이전에는 이전의 동일한 8-10 웹에 적합한 글꼴 중에서만 선택할 수 있었습니다. 웹에 적합한 글꼴이란 Arial, Times New Roman 및 Georgia와 같이 거의 모든 장치에 설치된 것으로 알려진 글꼴을 의미합니다. 웹 글꼴 기능을 사용하면 인터넷에서 사용 가능한 다양한 글꼴 중에서 원하는 글꼴을 선택할 수 있으며, 필요한 파일은 페이지 나머지 부분과 함께 웹 브라우저에서 다운로드됩니다.

색상 팔레트에 대한 SPColor 파일과 비슷하게, SPFont 파일은 사용 가능한 각 글꼴 슬롯에서 사용되는 글꼴을 정의합니다. 사용자 지정 글꼴 구성표를 만드는 가장 쉬운 방법은 이미 제공된 글꼴로 시작해서 필요에 따라 조정하는 것입니다. SharePoint에서는 여러 가지 언어와 스크립트가 지원되므로 글꼴 테마도 여러 가지가 지원됩니다. 각 글꼴 슬롯에 대해 각 스크립트에서 사용할 글꼴을 정의해야 합니다. 웹에 적합한 글꼴의 경우 각 글꼴 슬롯의 서체 특성에 해당 이름을 입력하기만 하면 됩니다. 웹 글꼴을 지정하려는 경우에는 4개의 글꼴 형식(브라우저 간 지원을 위해)에 웹 글꼴 파일에 대한 URL을 제공하고 글꼴 선택기에서 글꼴 이름을 렌더링하는 데 사용되는 소형 및 대형 축소판 이미지를 제공해야 합니다(앞에서 언급한 3단계 참조).

<?xml version="1.0" encoding="utf-8"?>

<s:fontScheme name="Impact" previewSlot1="title" previewSlot2="body" xmlns:s="https://schemas.microsoft.com/sharepoint/">

<s:fontSlots>

<s:fontSlot name="title">

<s:latin typeface="Impact"

eotsrc="https://blogs.msdn.com/_layouts/15/fonts/Impact.eot"

woffsrc="https://blogs.msdn.com/_layouts/15/fonts/Impact.woff"

ttfsrc="https://blogs.msdn.com/_layouts/15/fonts/Impact.ttf"

svgsrc="https://blogs.msdn.com/_layouts/15/fonts/Impact.svg"

largeimgsrc="https://blogs.msdn.com/_layouts/15/fonts/ImpactLarge.png"

smallimgsrc="https://blogs.msdn.com/_layouts/15/fonts/ImpactSmall.png" />

...

<s:font script="Arab" typeface="Segoe UI Light" />

<s:font script="Deva" typeface="Nirmala UI" />

<s:font script="Grek" typeface="Segoe UI Light" />

...

</s:fontSlot>

<s:fontSlot name="navigation">

<s:latin typeface="Segoe UI" />

...

<s:font script="Arab" typeface="Segoe UI" />

<s:font script="Deva" typeface="Nirmala UI" />

<s:font script="Grek" typeface="Segoe UI" />

...

</s:fontSlot>

...

</s:fontSlots>

</s:fontScheme>

구성된 모양

"구성된 모양"은 테마 환경의 첫 번째 단계에 표시되는 시작 지점입니다. 사용자 지정된 색상 팔레트 및 글꼴 구성표를 사용하는 새로운 구성된 모양을 추가할 수 있습니다. 이 기능을 사용하면 언제라도 테마를 적용할 수 있도록 일련의 디자인을 저장할 수 있습니다. 구성된 모양 목록은 "웹 디자이너 갤러리" 아래의 "사이트 설정"에서 찾을 수 있습니다. 기존 구성된 모양 집합을 관리하고 새 항목을 추가할 수도 있습니다. 항목을 추가하려면 새 목록 항목을 추가하고 이름과 제목을 입력한 후 마스터 페이지, SPColor 파일, 배경 이미지(선택 사항) 및 SPFont 파일(선택 사항)에 대한 URL을 입력합니다. 목록 항목을 추가한 후에는 새로운 구성된 모양의 미리 보기가 "모양 변경" 페이지에 시작 지점으로 추가됩니다.

계속해서 원하는 대로 옵션을 선택하고 시도해보십시오. 사이트를 멋진 모양으로 만들고 팀의 특성을 발휘하고, 고유성을 드러내십시오. 이제는 미니밴에서도 같은 일을 할 수 있을 것입니다.

이 문서는 번역된 블로그 게시물입니다. 원본 문서는 Show Off Your Style with SharePoint Theming을 참조하십시오.

Share via