[Umbraco 강좌] 28. HTML 레벨의 스킨 파일 적용 1

이 내용은 ASP.NET MVP로 활동하고 계신 박용준님이 작성하신, 오픈소스 기반 웹사이트 제작 엔진인 Umbraco로 처음 웹사이트를 구축 및 개발하기 위한 시리즈 강좌입니다. 많은 도움 되시길 바랍니다.
==================================================================================================

소개

이번 강좌는 4회차에 걸쳐서 웹 디자이너로부터 받은 순수 HTML+CSS+관련이미지로만 구성된 디자인 템플릿 파일들을 가지고 이를 Umbraco CMS에 등록하여 Umbraco에서 디자인 시안이 동일하게 출력된 후 이를 바탕으로 기능을 추가하는 식의 내용을 구현해 보도록 하겠습니다.

많은 수의 현업 개발자들은 디자이너 또는 퍼블리셔를 통해서 순수 HTML 문서를 받아서 이를 바탕으로 서버 측 언어를 사용하여 기능을 추가하는 방식을 사용합니다. 그러한 방법을 Umbraco에서는 어떻게 하는지 살펴보도록 하겠습니다.

현재 강좌에서 사용하는 디자인 템플릿 파일은 아래 경로에서 다운로드 받으시면 됩니다.

skin3.zip : 현재 강좌에서 사용된 소스

skin4.zip : 추가적으로 연습할 때 사용할 소스

따라하기

Step 1: 단순한 기본적인 페이지 생성

1. 아래 그림은 순수 HTML 문서로 만들어진 디자인 템플릿입니다. 전체적인 내용은 HTML+CSS+Image로만 이루어진 하나의 디자인 시안 페이지입니다. 이러한 스타일로 Umbraco 페이지를 만들어 보고자 합니다. 상단에 메뉴와 왼쪽에 서브 메뉴 그리고 가운데 영역에 실제 콘텐트(Body Text)가 오도록 설정하는 작업을 진행해 보도록 하겠습니다.

2. [문서 타입]을 하나 생성합니다. 아래 그림과 같이 [Skin3] 문서 타입을 하나 생성하고, [Content] 탭을 하나 만들고, [Body Text] 속성을 하나 추가하는 기본적인 작업을 진행합니다.

3. [템플릿]을 하나 생성합니다. 아래 그림과 같이 [Skin3]란 이름으로 템플릿을 작성합니다.

4. [Homepage] 문서 타입 하위로 [Skin3] 템플릿을 사용할 수 있도록 설정합니다.

5. 이번에는 [Simple website] 하위로 새로운 콘텐트 페이지를 생성합니다. [Skin3] 페이지 생성 후 [Body Text]에 간단히 입력합니다.

6. 위에서 생성한 페이지를 웹 브라우저로 실행해 본 결과 값입니다. 아직은 단순하게 텍스트만을 출력했지만 이곳에 디자인 템플릿을 입혀볼 것입니다.

Step 2: 디자인템플릿 적용하기

1. 제가 디자인 템플릿을 연습한 Skin3.zip 파일을 다운로드 받습니다. 압축을 푼 후 아래 그림과 같이 스타일시트와 이미지가 저장된 [Styles] 폴더를 복사한 후 Umbraco CMS의 루트에 붙여넣기 합니다.

2. 아래 그림은 복사해서 붙여넣기된 Styles 폴더가 적용된 내용을 볼 수 있습니다. 물론, Umbraco는 CSS파일을 css 폴더에 보관하지만 기존 디자이너가 넘겨준 Styles 폴더를 그대로 사용하였습니다.

3. 다운로드 받은 Skin3의 Views 폴더의 Layout.htm 문서의 HTML 소스를 그대로 복사해서 [Skin3] 템플릿에 적용한 후 아래 그림과 같이 스타일시트의 경로만을 조절합니다.

4. [Skin3] 템플릿이 적용된 [Skin3] 페이지를 실행시켜 봅니다. 순수 HTML로 작업된 디자인 템플릿이 Umbraco 템플릿을 통해서 그대로 보여집니다.

Step 3: Umbraco 템플릿 편집

1. [Skin3] 템플릿으로 이동하여 id가 content인 영역의 HTML 태그로 모두 지우고, 아래 그림과 같이 [bodyText] Umbraco 태그를 입력합니다.

2. [Skin3] 페이지로 이동하여 [Content] 탭에서 [Body Text]에 들어갈 내용을 간단히 입력합니다.

3. [Skin3] 페이지를 웹 브라우저로 실행합니다. 아래 그림과 같이 메인 영역이 [Body Text]로 채워져서 출력됨을 알 수 있습니다. 이처럼, 기본 디자인 템플릿을 바탕으로 원하는 부분의 내용을 동적으로 변경하려고 한다면 해당 부분을 Umbraco 태그(필드)로 설정하면 됩니다.

마무리

Umbraco에서 기본으로 제공하는 것보다는 현업에서 필요한대로 디자인된 디자인 템플릿을 사용하는 것이 훨씬 유용할지도 모릅니다.

국내에도 디자인 템플릿을 제공하는 웹 사이트가 많이 있고 이를 사용하여 사이트를 쉽게 꾸밀 수 있습니다. 이러한 디자인 템플릿을 사용하는 기초적인 내용을 살펴보았는데요. 다음 시간에 이어서 메뉴 및 서브 메뉴 등도 구현을 해보도록 하겠습니다.

다음 강좌에서 뵙도록 하겠습니다.

끝.

관련글

• Umbraco-1. Umbraco 소개
• Umbraco-2. Umbraco 개발 환경 구축
• Umbraco-3. Umbraco 설치
• Umbraco-4. 사용자 모드와 관리자 모드(백오피스)
• Umbraco-5. 새로운 페이지(Page) 만들기
• Umbraco-6. 한글 언어팩(Languages) 적용하기
• Umbraco-7. 콘텐트 페이지 편집, 삭제, 메뉴 정렬 등 소개
• Umbraco-8. 캔버스 내용 편집
• Umbraco-9. 미디어 파일 관리
• Umbraco-10. 사용자(User) 관리
• Umbraco-11. 스타일 추가 및 변경
• Umbraco-12. 템플릿(Templates)과 마스터페이지(MasterPages)
• Umbraco-13. Umbraco 페이지 필드(태그(Tags))
• Umbraco-14. 문서 타입(Document Types)
• Umbraco-15. 문서 타입(Document Types)에 속성 추가
• Umbraco-16. 부모 문서 타입(Document Types) 사용하기
• Umbraco-17. 문서 타입(Document Types) 내보내기 및 가져오기
• Umbraco-18. 문서 타입(Document Types) 자식 노드 허용
• Umbraco-19. 기본 매크로(Macros) 사용하기
• Umbraco-20. 새로운 매크로(Macro) 만들기
• Umbraco-21. 매크로(Macro)에 파라미터 전달
• Umbraco-22. 사진 갤러리(Gallery) 만들기 1
• Umbraco-23. 사진 갤러리(Gallery) 만들기 2 : XSLT 사용하기
• Umbraco-24. 사진 갤러리(Gallery) 만들기 3 : jQuery 슬라이드 쇼 플러그인 적용
• Umbraco-25. 회원(Members) 관리
• Umbraco-26. 사전(Dictionaries)
• Umbraco-27. 패키지(Packages)
• Umbraco-28. HTML 레벨의 스킨 파일 적용 1
• Umbraco-29. HTML 레벨의 스킨 파일 적용 2 : 상단 메뉴
• Umbraco-30. HTML 레벨의 스킨 파일 적용 3 : 서브 메뉴와 사이트 맵
• Umbraco-31. HTML 레벨의 스킨 파일 적용 4 : 서브 타이틀
• Umbraco-32. 배포 : Umbraco CMS를 원격 서버에서 실행