소개

안녕하세요…

이번 시간은 Umbraco CMS 솔루션을 사용하여 하나의 페이지(HTML 페이지, ASP 페이지, PHP 페이지와 같은 개념)를 만드는 개념에 대해서 설명을 드리고자 합니다.

다만, 여기서 말하는 페이지가 단순히 물리적인 하나의 파일을 나타내진 않고, 논리적인 하나의 페이지를 말합니다.

Umbraco에서는 모든 페이지가 데이터베이스에 저장된 콘텐트로 이루어집니다.

또한 하나의 페이지를 표현하는데 2가지 방법을 사용합니다.

 

따라하기 : 페이지 추가하기

1. WebMatrix 또는 Visual Studio 2010(Visual Web Developer 2010 Express)을 사용하여 로컬에 다운로드 받은 Umbraco CMS 소스를 열고, 웹 브라우저로 실행시킵니다. 실행시킨 후 추가적인 페이지를 만들기 위해서 백오피스로 접속합니다.

062011_1656_5Page1.png

 

2. [백오피스]의 좌측 메뉴를 보시면, 아래 그림과 같이 [Content]라는 항목 밑에 현재 작업 중인 사이트명이 나타납니다. 사이트명을 마우스 오른쪽 버튼을 클릭하면 나타나는 컨텍스트 메뉴에서 [Create] 메뉴 항목을 클릭합니다.

062011_1656_5Page2.png

 

3. [Create] 화면이 나타나면 이곳에 페이지의 이름과 페이지에서 사용될 문서 타입(Document Type)을 선택 한 후 [Create] 버튼을 눌러 하나의 컨텐트를 즉, 페이지(Page)를 생성합니다.

062011_1656_5Page3.png

 

페이지 생성시 포함되는 내용들

  • Name : 페이지 제목.
  • Document Type : 페이지에 보여질 레이아웃의 기본 구조를 가지고 있는 테마(스킨)와 같은 역할.

 

4. 아래 그림과 같이 콘텐트(페이지) 입력 화면에서 에디터에 간단히 텍스트를 입력 후 [Save] 버튼을 클릭합니다. 저장 버튼을 클릭하면 데이터베이스에는 저장이 되지만, 실제 웹 페이지에는 적용이 되지 않습니다. 웹 페이지 작성 후 수정 및 삭제는 언제든지 백오피스로 돌아와서 작성을 진행할 수 있습니다.

062011_1656_5Page4.png

 

5. 아래 그림은 아직까지 메인 페이지에 적용되지 않은 상태를 보여줍니다.

062011_1656_5Page5.png

 

6. 아래 그림과 같이 [Save and publish] 버튼을 클릭하면 바로, 웹 페이지에 표시됩니다.

062011_1656_5Page6.png

 

7. 최종적으로 웹 페이지로 출판된 [About Us] 메뉴를 보여줍니다.

062011_1656_5Page7.png

 

8. 웹 페이지 출력 시 ~/about-us.aspx 또는 ~/about-us 식으로 파일 단위와 폴더 단위로 페이지를 표시할 수 있습니다.

062011_1656_5Page8.png

 

 

마무리

Umbraco 웹에서 제일 중요한 작업이 무엇인지 아세요? 바로, 이번 시간에 다뤄본 페이지 생성(수정/삭제)입니다. 이는 효과적으로 웹을 통해서 무엇인가를 전달할 수 있고 콘텐트를 손쉽게 웹에서 생성, 수정, 삭제 등을 진행할 수 있습니다. 특정 페이지를 수작업으로 HTML 소스를 건드려서 웹에 콘텐트를 출력하는 게 아닌 웹에서 자동화된 편집도구를 사용하여 바로 수정 후 바로 확인의 절차를 거칠 수가 있는 것입니다. 어찌 보면, 10년 전에는 상상하기 힘든 기술로 보여질 수도 있습니다. 예전에는 이런 게 어디 있었나요… 하나의 페이지를 작성하려면, 웹 디자이너 또는 웹 개발자가 하나의 페이지를 만들고 FTP와 같은 전송 프로그램을 사용해서 서버에 HTML 페이지를 올려서 테스트를 하던 방식이 전부였습니다. 물론, 지금도 이 방법이 제일 많이 사용되지요… 이러한 방식에서 더욱 발달해서 현재의 CMS 솔루션들은 모두다 하나의 페이지/콘텐트를 표현할 때 웹에서 바로 입력 후 출력하는 시스템을 제공합니다.

자~ 그럼, 가장 중요한 페이지를 살펴보았으니, 더 많은 기능들을 학습해 보기 위해서 전진해 보도록 하겠습니다.

 

 

끝.





관련글



관련 동영상 참고 자료

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




profile

박용준(redplus at redplus.net)
.NET 개발/강의 프리랜서, MVP, MCT
데브렉(http://www.devlec.com) 전임 강사
닷넷코리아(http://www.dotnetkorea.com) 사이트 운영