SharePoint 2013과 익숙한 웹 기술을 함께 사용하여 고유한 온라인 브랜드를 디자인하는 방법
최초 문서 게시일: 2013년 2월 25일 월요일
이 게시물에서는 익숙한 웹 디자인 도구와 함께 디자인 관리자를 손쉽게 사용하여 강력한 콘텐츠 관리 기능 시스템인 SharePoint 2013에서 회사의 온라인 브랜드를 디자인하는 방법을 소개합니다.
SharePoint 2013에서는 이미 잘 아는 웹 기술, 선호하는 도구및 원하는 장치를사용하여 SharePoint 게시 사이트를 브랜딩할 수 있어 SharePoint 디자이너 또는 개발자로 경력을 시작하기가 한층 쉬워졌습니다. 또한 현재 SharePoint 전문가의 경우에도 걱정할 필요가 없습니다. 지금까지 익힌 SharePoint 기술을 여전히 사용할 수 있을 뿐만 아니라 SharePoint 게시 페이지 모델에 대한 지식이 여전히 매우 유용합니다.
이 게시물에서는 SharePoint 2013 디자인 관리자와 장치 채널을 익숙한 웹 디자인 도구와 함께 간편히 사용하여 회사의 온라인 브랜드를 디자인하는 방법을 개괄적으로 소개합니다. Microsoft에서는 동일한 페이지 렌더링 인프라를 유지하면서도 SharePoint 게시 사이트를 브랜딩하는 방식을 크게 세 가지 면에서 향상시켰습니다.
익숙한 웹 기술 사용
SharePoint에서는 여전히 ASP.NET에 마스터 페이지와 페이지 레이아웃이 유지되지만, 이제 SharePoint 컨트롤의 HTML 코드 조각을 사용하는 것을 비롯하여HTML에서도 마스터 페이지와 페이지 레이아웃을 디자인할 수 있습니다. 백그라운드에서는 SharePoint가 원하는 해당 ASP.NET 파일을 만들지만 사용자가 이를 무시할 수 있습니다.
이전에는 CSS와 JavaScript를 사용하여 사이트의 스타일을 지정할 수 있었는데 이제 CSS와 JavaScript가 SharePoint 웹 개발 환경에 완벽하게 통합되었습니다. HTML 미리 보기가 대폭 향상되어 서버를 사용하여 볼 필요 없이 바로 HTML에 스타일을 지정할 수 있습니다. 또한 서버에서 미리 보는 경우 원하는 SharePoint 페이지 컨텍스트에서 미리 볼 수 있습니다.
익숙한 웹 기술을 사용한 작업은 페이지 레이아웃 수준에서 끝나지 않습니다. XSLT에서 디자인 작업을 수행해야 하는 콘텐츠 쿼리 웹 파트도 여전히 사용할 수 있지만 새로운 콘텐츠 검색 웹 파트가 SharePoint 2013에서 검색 기반 환경을 만드는 데 중요한 구성 요소입니다. 이와 함께 우수한 디자이너 환경을 갖추는 것이 매우 중요하기에 JavaScript, HTML 및 CSS를 사용하여 사용자 지정이 가능하도록 했습니다.
이제 사용자에게 SharePoint에 대한 지식이 없는 것으로 가정하고 디자인 관리자를 통해 게시 사이트의 브랜딩 단계를 안내합니다. 이 디자인 관리자는 마법사와 같은 환경에서 SharePoint 개발 지침과 나란히 디자인 파일을 보고 작업할 수 있도록 합니다. 또한 각 단계에 대한 별도의 문서도 MSDN에서 이용할 수 있습니다.
원하는 도구를 사용하여 SharePoint 사용자 지정
사이트 디자인을 사용자 지정하려면 HTML을 ASP.NET으로 변환하는 것 이상의 작업이 필요합니다. 사이트를 성공적으로 만들 수 있도록 콘텐츠에 자주 사용되는 자리 표시자가 미리 준비되어 있습니다. 페이지 레이아웃에 있어서는, 선택한 콘텐츠 유형에 고유한 모든 페이지 필드가 삽입되어 있기 때문에 SharePoint 디자인 파일을 만드는 것이 만들기보다는 편집과 조정에 가깝습니다.
코드 조각 갤러리를 사용하면 SharePoint 기능을 사이트에 손쉽게 추가할 수 있습니다. 이전 버전의 SharePoint에 익숙한 사용자는 코드 조각 갤러리를 SharePoint Designer에서 액세스하는 일련의 컨트롤로 생각할 수 있습니다. 또한 그보다 더 많은 기능을 제공합니다. 코드 조각 갤러리는 웹 파트 갤러리의 모든 웹 파트를 포함하여 일반적인 구성 요소에 대한 HTML 버전(대부분의 경우 Dreamweaver 분할 보기와 같은 곳에서 파일을 편집하는 동안 작업하는 내용을 표시하는 정적 미리 보기 포함)을 제공합니다. 각 코드 조각에 대해 속성을 조정하고 HTML 마스터 페이지 또는 페이지 레이아웃에 복사하기만 하면 되며, 백그라운드에서 SharePoint가 이를 필요한 ASP.NET 컨트롤로 변환합니다.
그림 1. 코드 조각 갤러리 페이지 맨 위에는 모든 코드 조각의 리본이 있고, 페이지 본문에는 코드 조각의 설명, 속성 및 HTML 코드와 실시간 미리 보기가 있습니다. 모든 마스터 페이지에는 동일한 코드 조각 갤러리가 있는데, 페이지 레이아웃의 코드 조각 갤러리는 이와 약간 다릅니다. 페이지 필드가 변경되므로 페이지 레이아웃의 코드 조각 갤러리는 콘텐츠 유형에 따라 달라집니다.
모든 장치에 적합한 SharePoint 사이트 환경 만들기
이제 사용자는 데스크톱이나 랩톱에서 마우스를 사용해서만 웹 사이트에 액세스하지 않고, 태블릿, 스마트폰, 서피스 등 다양한 장치를 사용하여 웹 사이트에 액세스하고 있습니다. 사용자의 화면 크기가 최적으로 활용되도록 사용자를 위한 환경을 만들려면 어떻게 해야 할까요? 터치 기반 장치를 위해 최적화해야 할까요? SharePoint 2013에서는 장치 채널을 통해 방문자가 사용하는 장치에 가장 적합한 방식으로 사이트를 표시할 수 있습니다. 디자이너로서 여러분은 다양한 모든 폼 팩터에서 사이트 환경이 어떠해야 하는지 고려해야 하며, 이러한 폼 팩터는 최대 10가지 채널에 할당된 사용자 에이전트 하위 문자열로 구분됩니다.
각 채널이 여러 장치를 대상으로 할 수 있습니다. 예를 들어 화면 크기가 비슷한 Windows Phone과 iPhone에 한 채널을 사용하고, iPad에 다른 채널을 사용할 수 있습니다. 채널별로 다른 마스터 페이지와 CSS를 사용하는 한편, 콘텐츠를 특정 채널들에 대상으로 지정하면서 모두 동일한 URL을 사용할 수도 있습니다. 이는 유용성과 검색 엔진 최적화를 위해 좋습니다.
장치 채널 인프라를 사용하면 콘텐츠 대상 지정에 유용한 장치 채널 패널을 사용할 수 있습니다. 이러한 패널 중 하나에 배치되는 콘텐츠는 서버 쪽 논리를 기반으로 지정한 채널에서만 렌더링되므로 페이지 로드 시간과 네트워크를 통해 전송되는 바이트 수가 감소됩니다. 이러한 패널과 더불어 응답성이 뛰어난 CSS 디자인을 통해 한층 더 빠르고 효율적인 사용자 환경이 만들어집니다. 이전 예와 같이 화면 크기에 따라 서로 다른 채널을 사용하는 대신, "iOS" 하위 문자열 기반의 채널로 iPad, iPhone, iPad Mini를 캡처하고 단일 마스터 페이지를 전송하여 장치의 화면 해상도에 따라 서로 다른 CSS를 로드할 수도 있습니다. 예를 들어 Windows Phone 팀인 경우 iOS 장치를 대상으로 지정하고 Windows Phone을 광고하는 패널을 만들 수 있습니다.
그림 2 및 그림 3. 교차 사이트 모음 게시 기능을 기반으로 응답성이 뛰어난 CSS, 장치 채널 패널 및 장치 채널에 따라 콘텐츠 검색 웹 파트 결과의 모양을 변경하는 표시 서식 파일을 사용하여 뉴스 사이트의 브라우저와 모바일 환경에 대한 병렬 디자인 모형을 표시한 모습
이 게시물에서는 익숙한 도구와 SharePoint 2013의 강력한 콘텐츠 관리 시스템을 사용하여 회사의 온라인 브랜드를 손쉽게 디자인하는 방법을 소개했습니다. 자세한 내용은 MSDN에 게시된 관련 문서를 모두 확인하시기 바랍니다. SharePoint 2013용 사이트 만들기, SharePoint 2013의 디자인 관리자 개요 및 SharePoint 2013에서 사이트 디자인 개발 문서부터 검토해 보면 좋습니다. 그럼 즐겁게 디자인하시기 바랍니다!
--Alyssa Levitz, SharePoint 프로그램 관리자
이 문서는 번역된 블로그 게시물입니다. 원본 문서는 Create your online brand with a combination of SharePoint 2013 and the web technologies you already know를 참조하십시오.