소개

이번 강좌에서는 Umbraco에서 사용되는 미디어 파일(이미지, 파일, 동영상)을 CMS에 미리 올려두고, 필요한 페이지에서 손쉽게 가져다 쓸 수 있도록 하는 방법을 소개해 드리고자 합니다.

매번 콘텐트 페이지를 작성시 필요한 이미지 및 파일을 그때 그때 업로드 한 후 사용할 수도 있으며, 필요에 따라서는 미리 특정 페이지 작성시 필요한 미디어 파일들을 올려둔 후 사용할 수도 있습니다.

자아~ 그러면, 미디어 파일을 올려두고 페이지에 출력하는 기능을 단계별로 살펴보도록 하죠.

 

절차

Step 1: 미디어 파일 업로드하기

1. Umbraco의 [백오피스]로 접속 후 아래 그림의 왼쪽 아래의 [세부항목] 메뉴 중 [Media] 섹션을 선택합니다. 그런 후 왼쪽 카테고리의 [미디어]에 마우스 오른쪽 버튼을 클릭하여 [생성] 메뉴 항목을 클릭하여 미디어 파일을 업로드할 수 있습니다.

062111_2049_91.png

 

2. 미디어 생성 메뉴를 클릭하면 미디어 파일에 대한 CMS 내에서 사용할 이름을 정할 수 있는 화면이 나타납니다. [이름]과 [선택 미디어 타입]을 선택 후 [생성] 버튼을 클릭합니다. [선택 미디어 타입]은 파일, 폴더, 이미지로 구분이 됩니다. 아래 그림과 같이 [Photos]란 이름으로 폴더를 하나 생성합니다.

062111_2049_92.png

 

3. 다음으로 [Photos] 폴더에 이미지를 업로드 하기 위하여 마우스 오른쪽 버튼을 클릭하여 [생성] 메뉴를 클릭합니다.

062111_2049_93.png

 

4. 간단히 이름에 "a"를 입력 후 [선택 미디어 타입]을 [Image]로 선택 후 [생성] 버튼을 클릭합니다.

062111_2049_94.png

 

5. "a"란 이미지 속성에서 [Upload Image]에서 원하는 이미지 파일을 선택 후 [Save] 아이콘을 클릭하면 이미지가 업로드 됩니다.

062111_2049_95.png

 

6. 아래 그림은 업로드 된 이미지의 [속성] 탭에서 이미지 이름을 "a"에서 "RedPlus"로 변경하는 모습을 보여줍니다.

062111_2049_96.png

 

7. 이번에는 동일한 방법으로 [Languages] 폴더를 생성 후 "LanguagePack" 이름으로 [File]을 업로드 하는 모습입니다.

062111_2049_97.png

 

8. 앞서 적용해 보았던, 한글 언어팩 파일인 "ko.xml" 파일을 업로드 하였습니다.

062111_2049_98.png

 

Step 2: 미디어 파일 적용하기

1. 업로드 된 미디어 파일을 적용하기 위한 페이지를 하나 생성합니다. [언어팩]이라는 이름의 기본 페이지를 하나 생성합니다.

062111_2049_99.png

 

2. [언어팩] 페이지의 [Content] 탭에서 원하는 내용을 입력 후 앞서 업로드 한 이미지 파일을 적용하려면, 아래 그림의 이미지 선택 아이콘을 클릭 후 나타나는 [그림 삽입] 화면의 [선택] 탭에서 [RedPlus]와 같이 이름 지은 파일을 선택 후 [삽입] 버튼을 클릭하면 해당 페이지에 이미지가 적용됩니다.

062111_2049_910.png

 

3. 동일한 방법으로 에디터의 "언어팩 다운로드"란 텍스트에 링크를 걸고 언어팩을 다운로드하는 기능을 적용하려면, 아래 그림처럼, "언어팩 다운로드"를 블록으로 씌운 후 [하이퍼링크] 아이콘을 클릭 후 앞서 업로드 한 LanguagePack 미디어 파일을 선택 후 [삽입] 버튼을 클릭하면 적용됩니다. 전체적인 순서는 아래 그림을 참고하시기 바랍니다.

062111_2049_911.png

 

4. 위와 같이 설정 후 웹 사이트 메인 페이지로 접속 후 [언어팩] 메뉴를 클릭하면, 아래와 같이 이미지 파일과 하이퍼링크가 적용됨을 알 수 있습니다.

062111_2049_912.png

 

마무리

이처럼, Umbraco는 이미지 파일과 일반 파일에 대한 관리를 편리하도록 업로드 및 페이지 삽입 기능을 쉽게 운영할 수 있는 기능을 제공합니다. 미디어 파일이 많아지면, 폴더 단위로 관리하고, 이미지 및 파일을 언제든지 어느 페이지에서든 쉽게 가져다 쓸 수 있습니다.

만약, 최고 관리자가 아닌 일반 사용자의 권한이 [Content Editor] 등의 권한을 갖는다면, 웹 페이지의 모든 페이지에 대한 편집 기능을 갖는데, 이 때 추가적으로 미디어 파일에 대한 권한까지도 부여를 해준다면, 동적으로 미디어 파일을 업로드 하고, 페이지를 꾸미는 일까지도 할 수 있습니다.

다음 강좌에서는 이처럼, "admin"과 같은 최고관리자가 아닌 일반 사용자 계정으로 페이지를 만들고 꾸미는 내용에 대해서 살펴보도록 하겠습니다.

 

 

끝.





관련글



관련 동영상 참고 자료

  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) 사이트 운영