[Umbraco 강좌] 26. 사전(Dictionaries)

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

소개

흔히 말하는 사전은 "가나다" 순서로 어떤 단어에 대한 설명을 늘어놓은 책"을 의미합니다. 이러한 의미는 Umbraco에서도 비슷한 의미로 사용됩니다. 이번 강좌에서는 사전 기능을 어떻게Umbraco에서 사용하는지에 대한 절차를 설명하고자 합니다.

Umbraco에서의 사전 기능은 특정 레이블과 텍스트에 대한 미리 정의된 여러 개의 언어로 보여주는 기능을 담당합니다. 사용자가 정의한 언어에 해당하는 레이블 및 텍스트가 표시되도록 설정하는 방법을 살펴보도록 하겠습니다.

따라하기

1. Umbraco [백오피스]-[Settings] 섹션-[사전]을 선택합니다. 사전에는 기본값으로 특정 Key에 해당하는 언어별 값으로 구성됩니다.

2. [백오피스]-[Settings] 섹션-[Languages] 노드에 마우스 오른쪽 버튼 클릭-[Create] 메뉴 옵션 클릭-[Choose Language]에서 언어 선택-[Create] 버튼을 클릭합니다. 아래 그림과 같이 새로운 언어를 추가하기 위하여 [한국어(대한민국)]을 선택한 후 [생성] 버튼을 클릭합니다.

3. 아래 그림은 [언어]에 2개의 언어가 추가된 모습입니다.

4. [사전]에 마우스 오른쪽 버튼을 클릭하여 [SiteName]으로 사전을 하나 추가합니다.

5. [SiteName] 사전이 추가되면 아래 그림과 같이 영어와 한국어에 대한 값(Value)을 입력할 수 있는 화면이 생성됩니다. 이곳에 간단하게 영어와 한국어를 구분해서 데이터를 입력합니다.

6. 앞서 생성한 [SiteName] 사전을 출력해 보기 위해서 메인 페이지의 레이아웃으로 사용하고 있는 [Homepage] 템플릿에 아래 그림과 같이 [Umbraco 페이지필드 삽입] 아이콘을 클릭하여 "#SiteName" 값을 입력합니다. 필드에서 따로 선택하지 않고 바로 텍스트박스에 입력하려면 아래와 같이 "#" 기호를 사용하여 직접 지정이 가능합니다.

7. 6번 단계가 끝나고 난 후의 모습입니다.

8. 사전을 테스트해보기 위해서 [Simple website]에서 사용되는 기본 언어를 변경하고자 합니다. 기본 언어를 변경하려면, 아래 그림과 같이 [Simple website]에 마우스 오른쪽 버튼을 클릭하여 나타나는 메뉴 항목 중[호스트네임 관리]를 클릭합니다.

9. [Manage hostnames] 화면이 나타나면 로컬 컴퓨터 또는 원격 서버에서 사용할 도메인 이름과 언어를 선택합니다.

10. 아래 그림은 도메인에 현재 필자의 로컬 테스트 도메인과 언어는 [영어(미국)]으로 선택한 모습니다.

11. 등록된 도메인과 언어는 편집 링크를 클릭하여 수정할 수 있습니다. 아래 그림은 로컬 컴퓨터에서 사용하지만, 원격 서버 사용시에는 실제 도메인을 입력하면 됩니다.

12. 위에서 영어로 선택하였을 때 [SiteName] 페이지 필드 부분이 영어로 표시됩니다.

13. 이번에는 영어에서 한국어로 언어를 변경하는 모습니다.

14. 한국어로 변경 후 [SiteName] 페이지 필드가 출력된 부분이 한국어로 보여지는 것을 알 수 있습니다.

마무리

Umbraco CMS는 특정 웹 사이트를 특정 언어에 맞게 다국어 처리해서 사용할 수 있습니다. 그 중에서 특정 키(Key)에 대한 값(Value)을 언어별로 지정해서 서로 달리 표현할 수 있습니다.

이 기능이 바로 [사전] 기능입니다.현재 예제에서는 영어와 한국어를 표현하였지만, 영어, 한국어, 프랑스어, 독일어 등 여러 개의 언어를 사용할 수도 있습니다.

어쨌든, 이번 강좌는 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를 원격 서버에서 실행