SharePoint 2010에서의 마스터 페이지 (1)

SharePoint 2010에서의 마스터 페이지 (1)

 

마스터 페이지는 개발자가 직접 손 대기에는 무리가 있는 편입니다. 일단 CSS를 손대야 하고 이미지를 만들거나 수정해야 합니다.

디자이너도 손 대기에는 좀 무리가 있습니다. 일단 SharePoint 2010이 낯설고 자체를 이해하기가 어렵습니다. 그리고 디자인을 하기 위해서는 SharePoint Designer 2010을 다룰줄 알아야 하기도 하고 마스터 페이지 태그 중에 <Sharepoint 가 있어 어려워하는 것으로 보입니다.

 

그래서 개발자 또는 퍼블리셔와 디자이너가 같이 작업하는 것이 여러모로 나은 듯 합니다.

 

1.     코딩이나 사용자 컨트롤로 디자인을 할지 스타일 시트로 할지를 결정해야 합니다. SharePoint Online이나 Power User를 위해서는 스타일 시트로 하는 것이 일반적이며 저도 좋아하는 방식입니다.

2.     리본을 보이게 할지 말지를 결정해야 합니다. 사용자나 사이트 성격에 따라 리본을 표시해주지 않아도 상관없는 경우가 있습니다. 게시 페이지 같은 경우 “리본 숨기기” 메뉴가 있어 디자인을 좀 더 잘해야 하는 경우도 있죠.

3.     퍼블리셔, 디자이너에게 SharePoint 2010에서 대해서 대략적인 사이트 구조와 영역(상단의 리본, 위쪽 링크 모음, 왼쪽 빠른 탐색)에 대해서 설명을 해줍니다. 바로 이해하기는 무리가 있습니다.

4.     리본이 있는 경우 디자인 시안은 리본 위에 이미지를 올려서 처리하는 경우와 리본 밑에 이미지를 올려둘 경우가 있을 수 있는데 리본 위에 이미지를 올릴 경우는 제한적이라는 것을 디자이너에게 미리 알려주어야 합니다. 이 내용은 아래에서 다시 정리하겠습니다.

5.     레이아웃이 많이 다르다거나 필요하다면 별도의 마스터 페이지를 만들어서 개발자가 만들어주어야 합니다.

6.     사용자 지정 마스터 페이지와 스타일 시트를 위해 간단히 IE 개발자 도구를 통해서 CSS를 변경하는 것으로 보여줍니다. 그러면 이해도가 상당히 많이 올라옵니다. 아니면 부분별 CSS목록을 하나하나 찾아서 알려주면 됩니다.

7.     그리고 대체 CSS를 통해서 접근하는 것을 진행하고 나면 퍼블리셔나 디자이너가 혼자서 작업도 가능합니다. SharePoint Designer 2010을 반드시 사용하지 않아도 됩니다. 원격에서 이리 저리 디자인을 변경해 볼 수 있습니다.

8.     상단의 리본, 위쪽 링크 모음, 왼쪽 빠른 탐색, CSS에 대한 내용이 정리가 되면 디자인 시안을 만들어 낼 수 있을 것 같습니다.

9.     어느 정도 작업이 완료가 되면 개발자가 정리해서 마스터 페이지에 새로운 CSS 를 참조하거나 새로운 모듈 프로젝트를 만들고 통합, 배포 테스트를 진행할 수 있습니다.

 

위 단계로 마스터 페이지를 디자이너가 한번 숙달해보고 나면 생산성이 약 7배정도 올라가는 것 같습니다.(저만의 생각~)

 

IE 개발자도구와 대체 CSS를 사용하여 스타일에 대해 접근하는 방법과 사용자 지정 마스터 페이지를 생성하여 적용하는 내용에 대한 부분을 이후에서 다루어보도록 하겠습니다.

 

# 리본 위에 이미지를 올리는 것의 예는 “SharePoint Server 게시” 기능을 활성화 하면 “nightandday” 마스터페이지를 참조하시면 됩니다.

이 경우 상단에 로고와 백그라운드 이미지를 통해 디자인을 하실 수 있는 데요. 스타일 시트는 아래와 같습니다.

 

.nightandday .ribbonbackground

{

           /* [ReplaceColor(themeColor:"Accent1")] */

           background-color: #05acc3;

           /* [RecolorImage(themeColor:"Accent2",method:"Filling")] */

           background-image:url("../../../images/nd_headerBG.png");

           background-repeat:repeat-x;

}

위 스타일을 참고해서 작업하면 되는데 height는 별도로 지정하지 않습니다. 잘못 지정하면 문서 업로드 등에서 아래와 같이 나타나게 됩니다. 상단에 이미지가 많이 나타나게 되며 확인, 취소 버튼이 안보이게 되죠.