참고:

Adobe Muse는 더 이상 새로운 기능을 추가하지 않으며 2020년 3월 26일 목요일에 지원이 중단됩니다. 자세한 정보 및 지원은 Adobe Muse 서비스 종료 페이지를 참조하십시오.

계층 구조를 이루는 여러 개의 마스터 페이지를 사용한 작업

Muse에서는 다른 마스터 페이지에 적용되는 마스터 페이지를 만들 수 있습니다. 계층 구조를 이루는 여러 마스터 페이지의 작동 방식은 [플랜] 보기에서 일반 페이지에 마스터 페이지가 적용되는 방식과 비슷합니다. 기존 버전의 Muse에서도 마스터 페이지를 여러 개 만들 수는 있었지만, 한 그룹의 페이지 요소들로 이루어진 마스터 페이지를 웹 페이지에 한 번에 하나만 적용할 수 있었습니다.

즉, 사이트 섹션을 두 개로 나누고 각 섹션을 어느 정도 일관성과 유사성을 지니면서도 서로 차별화된 고유한 특색을 갖도록 만들려면 지금까지는 마스터 페이지를 복제하여 조금 변경한 후 이를 특정 페이지에 적용해야만 했습니다. 이 경우 각 마스터 페이지에 몇몇 동일한 요소가 중복 포함되므로 사이트를 업데이트할 때마다 모든 요소가 서로 일관성을 유지하도록 두 마스터 페이지의 컨텐트를 모두 편집해야만 합니다.

Muse 4.0 이상 버전을 사용하면 (이전 단원에서 설명한 것과 같이 배경 및 바닥글을 추가하는 등) 여러 마스터 페이지에 표시할 공유 요소가 포함된 "A-마스터" 페이지를 만든 다음, "A-마스터" 페이지의 모든 요소를 상속하는 한편 이 첫 번째 마스터 페이지와 관련이 없는 고유한 요소를 포함하는 별도의 마스터 페이지를 추가로 만들 수 있습니다. 마스터 페이지가 한 개 더 필요하면 "A-마스터" 페이지의 요소를 상속하는 한편 두 번째 마스터 페이지에 적용되지 않은 고유한 요소를 포함하는 세 번째 마스터 페이지를 만들면 됩니다.   

계층 구조를 이루는 여러 개의 마스터 페이지를 사용하면 각 요소의 사용 횟수를 한 번으로 제한할 수 있어 편리합니다. 사이트의 디자인을 변경할 때 각 요소를 한 번만 편집하면 해당 요소의 모든 인스턴스가 사이트에서 자동으로 업데이트되기 때문입니다.

마스터 페이지를 관리하고 적용하는 데는 [플랜] 보기가 사용됩니다. 마스터 페이지 축소판을 클릭한 채 일반 페이지 축소판 위로 드래그하여 마스터 페이지를 해당 페이지에 적용할 때와 마찬가지로, 여러 개의 마스터 페이지를 만든 다음 마스터 페이지 하나를 클릭한 채 다른 마스터 페이지 위로 드래그할 수 있습니다. 또는 [플랜] 보기에서 임의의 마스터 또는 페이지 축소판을 마우스 오른쪽 단추로 클릭한 후 컨텍스트 메뉴가 나타나면 [마스터] 옵션을 사용하여 마스터 페이지를 설정할 수도 있습니다.

페이지 또는 마스터 페이지 이름 위에 마우스 커서를 놓고 기다리면 해당 페이지 또는 마스터 페이지에 대해 적용되는 마스터의 계층 구조가 툴팁으로 표시됩니다.

이 예제에서 우리가 지금까지 만든 것은 바둑판식으로 배열된 브라우저 채우기 배경 이미지와 바닥글 컨텐트를 포함한 "A-마스터" 페이지입니다. 다음 단원에서는 A-마스터 페이지의 컨텐트를 상속하는 새 마스터 페이지를 만들고 여기에 머리글을 추가한 후 각 사이트 페이지에 적용하겠습니다. 다음 단계를 따르십시오.

  1. [플랜] 보기에 사이트맵을 표시한 상태에서 "A-마스터" 페이지 축소판 위에 마우스 커서를 올려 놓아 축소판 양 옆에 플러스(+) 아이콘을 표시합니다. "A-마스터" 페이지 오른쪽에 있는 플러스(+) 아이콘을 클릭하여 또 하나의 새 마스터 페이지를 만듭니다. 새 마스터 페이지의 이름은 "B-마스터"로 기본 설정됩니다.
  2. 축소판 아래 있는 "B-마스터" 텍스트 필드를 두 번 클릭하여 이를 편집합니다. 방금 만든 새 마스터 페이지의 역할을 좀 더 쉽게 알 수 있는 이름을 입력합니다. 이 예제에서는 "Main"이라는 이름을 사용합니다.
  3. Main" 마스터 페이지 축소판을 마우스 오른쪽 단추로 클릭하고 컨텍스트 메뉴가 나타나면 [마스터] > [A-마스터]를 선택합니다.
본 자습서에서는 Adobe Muse 작업 영역이 어떻게 구성되어 있는지 살펴보고, 완벽하게 작동하는 웹 사이트를 어떠한 코드도 전혀 작성하지 않은 채 구축하는 방법을 설명합니다. 사이트맵을 작성하고 마스터 페이지를 사용하는 방법과 Muse의 브라우저 채우기 옵션에 대해서도 설명합니다.
메뉴에서 [A-마스터]를 선택하여 이를 "Main" 마스터 페이지에 적용합니다.

"A-마스터" 페이지를 "Main" 마스터 페이지에 적용하고 나면 "Main" 마스터 페이지 축소판이 동일한 모양으로 업데이트됩니다. "Main" 마스터 페이지 축소판 아래 있는 파란색 레이블에는 [A-마스터]라고 표시됩니다. 3단계에서 "A-마스터" 페이지를 "Main" 마스터 페이지에 적용했기 때문입니다.

"Main" 마스터 페이지에 "A-마스터" 요소가 실제로 포함되지 않았다는 사실을 이해하는 것이 중요합니다. 이 작업은 단순히 "A-마스터"를 복제하는 것과 다릅니다. 방금 수행한 것은 "A-마스터"에 연결되도록 "Main" 마스터 페이지를 설정한 작업입니다. 즉, "A-마스터"에 새 컨텐트를 추가하면 해당 컨텐트가 "Main" 마스터 페이지에도 자동으로 표시됩니다.

앞서 언급한 바와 같이 계층적 마스터 페이지를 사용하면 바닥글, 메뉴, 배경 등을 "A-마스터" 페이지에만 두면 되므로 편리합니다. 나중에 고객으로부터 바둑판식 배경 이미지를 바꿔 달라는 요청을 받았을 때는 "A-마스터" 페이지만 업데이트하면 됩니다. "Main" 마스터 페이지는 자동으로 업데이트됩니다.

사이트 섹션을 둘로 나누고 각 섹션에 서로 다른 모양을 적용하기 위해 두 개의 서로 다른 마스터를 만드는 방법을 이 자습서의 뒷부분에서 살펴볼 것입니다. 그러나 일단은 "A-마스터" 페이지를 사용하는 대신 새로운 "Main" 마스터 페이지만 사용하도록 [플랜] 보기에서 모든 페이지를 업데이트합니다.

  1. "Main" 마스터 페이지를 클릭한 채 왼쪽 위 가장자리에 있는 "food" 페이지 축소판 위로 드래그합니다. "Main" 마스터 페이지 축소판을 드래그하여 "food" 페이지 축소판 위에 놓으면 "food" 페이지 축소판 아래 있는 파란색 텍스트가 [A-마스터]에서 [Main]으로 업데이트됩니다.

이는 [플랜] 보기에서 페이지에 마스터 페이지를 적용하는 가장 일반적인 방법이지만, 컨텍스트 메뉴를 사용하여 이를 적용할 수도 있습니다.

  1. “events" 페이지 축소판을 마우스 오른쪽 단추로 클릭하고 컨텍스트 메뉴가 나타나면 [마스터] > [Main]을 선택합니다.
본 자습서에서는 Adobe Muse 작업 영역이 어떻게 구성되어 있는지 살펴보고, 완벽하게 작동하는 웹 사이트를 어떠한 코드도 전혀 작성하지 않은 채 구축하는 방법을 설명합니다. 사이트맵을 작성하고 마스터 페이지를 사용하는 방법과 Muse의 브라우저 채우기 옵션에 대해서도 설명합니다.
컨텍스트 메뉴를 사용하여 "Main"을 "events" 페이지의 마스터 페이지로 설정합니다.

  1. (4단계와 5단계에서 설명한 방법 중) 자신에게 편리한 방법을 사용하여 "Main"을 나머지 세 개 페이지인 "home", "about", "visit"에 대한 마스터 페이지로 설정합니다.

이렇게 변경 작업을 마치고 나면 이제 각 페이지 축소판 아래 있는 파란색 텍스트 레이블에 [Main]이 표시됩니다. 파란색 레이블 중 하나 위에 마우스 커서를 놓고 기다리면 여기에 적용된 마스터 페이지의 계층 구조가 툴팁으로 표시됩니다.

본 자습서에서는 Adobe Muse 작업 영역이 어떻게 구성되어 있는지 살펴보고, 완벽하게 작동하는 웹 사이트를 어떠한 코드도 전혀 작성하지 않은 채 구축하는 방법을 설명합니다. 사이트맵을 작성하고 마스터 페이지를 사용하는 방법과 Muse의 브라우저 채우기 옵션에 대해서도 설명합니다.
레이블 위에 마우스 커서를 놓으면 계층 구조를 설명하는 유용한 툴팁이 표시됩니다.

이 예제에서는 계층 구조가 한 단계만 더 파생되었습니다. 즉, "Main" 마스터 페이지가 "A-마스터" 페이지 컨텐트를 상속하고 있습니다. 그러나 필요하다면 계속 꼬리를 물고 파생되는 일련의 마스터 페이지를 만들 수 있습니다. 예를 들어, 머리글 컨텐트만 포함된 "Header"라는 마스터 페이지를 만든 다음, "Header" 마스터 페이지 컨텐트를 상속하는 "Footer"라는 마스터 페이지를 만들고, 이번에는 (머리글도 포함된) "Footer" 마스터 페이지의 모든 요소를 상속하는 "Main"이라는 또 다른 마스터 페이지를 만들 수 있습니다. 사이트를 어떤 식으로 설계하고 디자인하는지, 특정 요소가 변경될 가능성이 얼마나 큰지에 따라 상속 수준을 여러 단계로 설정하여 구성할 수 있습니다. 이와 같이 디자인의 구획을 나누는 일은 마치 심벌을 만드는 것과도 같습니다. 디자인의 특정 부분을 따로 분리한 다음 나중에 필요할 때 해당 부분을 쉽게 찾아 편집할 수 있기 때문입니다.

계속하여 다음 자습서인 Muse를 사용하여 첫 웹 사이트 만들기, 2부에서는 위젯을 사용하여 작업하는 방법을 설명합니다. (위젯은 페이지 위로 드래그하여 사용할 수 있도록 미리 작성되어 있는 대화형 사이트 기능입니다.) 위젯을 사용하면 코드를 전혀 작성하지 않고도 페이지에 고급 기능을 쉽게 추가할 수 있습니다. 주로 살펴볼 내용은 위젯의 동작 및 모양을 편집하는 방법과 사이트 디자인 내에 위젯이 표시되는 방식을 사용자 정의하는 방법입니다.

Main 마스터 페이지에 머리글 컨텐트 추가

메뉴 위젯을 Main 마스터 페이지에 추가하여 바닥글을 완성했으므로 최상위 탐색 메뉴를 추가하겠습니다. 다음 단계에 따라 머리글 영역에 컨텐트를 추가하십시오.

  1. [플랜] 보기에서 Main 마스터 페이지 축소판을 두 번 클릭하여 페이지를 열고 [디자인] 보기에서 편집을 시작합니다(아직 열리지 않은 경우).
  2. 사각형 도구를 사용하여 브라우저 가시 영역의 상단 왼쪽에서 시작하고 상단 오른쪽까지 전체 폭으로 넓힌 사각형을 그립니다. 선택 도구를 사용하여 바닥글을 만들 때와 같이 사각형이 100% 폭으로 설정되었을 나타내는 빨간색 테두리가 잠깐 나타날 때까지 사각형의 위쪽, 왼쪽 및 오른쪽에 있는 핸들을 드래그합니다.
fig_30_building
브라우저 창의 전체 상단 부분에 걸친 사각형을 그립니다.

 

핸들을 드래그한 후 사각형의 크기는 약 1160픽셀 폭 x 253픽셀 높이가 되어야 합니다. 가로 X 값은 사각형의 상단 왼쪽이 페이지의 상단 왼쪽에서 100픽셀 위치에 있음을 의미하는 -100입니다. Y 값은 사각형의 상단 왼쪽이 페이지의 상단 왼쪽과 세로로 일치함을 의미하는 0입니다. 이러한 값을 정확하게 설정하려는 경우 사각형이 선택된 상태에서 [변형] 패널이나 컨트롤 패널에서 필드를 검토할 수 있습니다.

  1. 획 폭은 0으로 설정하고 [채우기] 메뉴를 사용하여 채우기 색상을 [없음]으로 설정합니다. [이미지] 섹션의 오른쪽에 있는 폴더를 클릭하고 tile-header.png라는 이미지를 찾아 선택합니다. [맞춤] 메뉴를 [가로 바둑판식 배열]로 설정합니다.
fig_31_building
[맞춤] 메뉴를 사용하여 배경 이미지를 가로 바둑판식으로 배열합니다.

 

머리글은 하나의 사각형으로 구성되지만 여기를 채우는 가로 바둑판식 배경 이미지는 회색 사각형이 검은색 사각형 위에 있다는 느낌을 줍니다.

  1. [파일] > [배치]를 선택하거나 바로 가기 키 Command+D(Mac) 또는 Ctrl+D(Windows)를 사용하여 [가져오기] 대화 상자를 엽니다.
  2. 샘플 파일 폴더에 있는 bg-ribbon.png라는 파일을 찾아 선택합니다. [열기]를 클릭하여 파일을 선택하고 [가져오기] 대화 상자를 닫습니다.
  3. 페이지 위쪽 부근 머리글 사각형의 가운데를 한 번 클릭합니다. 그러면 bg-ribbon.png 파일의 단일 인스턴스가 원래 크기로 놓여집니다.
  4. 선택 도구를 사용하여 주황색 리본 그래픽을 머리글의 위쪽 부근에서 세로로 가운데에 있고 페이지의 폭으로 확장되도록 정렬합니다.
fig_32_building
주황색 리본 그래픽이 머리글의 가운데에 오도록 배치합니다.

 

주황색 리본 그래픽은 다음 단원에서 추가할 최상위 메뉴의 배경이 됩니다.

마스터 페이지 복제

Main 마스터 페이지의 머리글 컨텐트가 완성되었습니다. 사이트의 모든 페이지에 대해 단순히 Main 마스터 페이지를 사용할 수도 있지만 이 사이트 디자인에는 두 가지 섹션이 있습니다. Main 마스터 페이지 디자인은 최종적으로 홈 및 방문 페이지에 사용됩니다. 약간 다른 두 번째 마스터 페이지는 음식, 이벤트 및 정보 페이지에 사용됩니다.

Main 마스터 페이지를 복제하려면 다음 단계를 따르십시오.

  1. [플랜] 보기에서 Main 마스터 페이지 축소판을 마우스 오른쪽 단추로 클릭합니다.
  2. 나타나는 컨텍스트 메뉴에서 [페이지 복제]를 선택합니다.
fig_38_building
메뉴를 사용하여 기존 Main 마스터 페이지를 복제합니다.

 

새 마스터 페이지가 기본 이름인 Main 사본으로 Main 마스터 페이지의 오른쪽에 나타납니다. Main 마스터 페이지를 복제했으므로 새 마스터도 이미 A-마스터 페이지를 기반으로 합니다.

  1. 방금 만든 마스터 페이지 아래에 있는 이름 필드를 두 번 클릭하고 Foreground로 이름을 바꿉니다.

다음 단원에서는 항목이 항상 페이지 요소 아래가 아닌 페이지 요소 위에 표시되도록 마스터 페이지에서 요소 배열을 설정하는 방법을 배웁니다. 이 시점에 작업한 내용을 저장하는 것이 좋습니다.

  1. [파일] > [사이트 저장]을 선택합니다.

복제 마스터 페이지를 만드는 장점 중 하나는 [배열] > [맨 앞으로 가져오기]를 선택하더라도 일부 컨텐트가 다른 페이지 컨텐트 위에 표시되도록 설정할 수 있다는 것입니다. 전경 동작은 음식 및 이벤트 페이지에 사용됩니다.

마스터 페이지 요소의 스택 순서를 설정하는 기능은 Muse 4.0에서 사용 가능한 새로운 기능입니다. 이전에는 페이지 레이아웃에서 공통되는 사이트 요소를 다른 컨텐트 위에 두고자 하는 경우에도 마스터 페이지 대신 머리글 또는 바닥글 요소를 모든 페이지에 두어야 했습니다.

마스터 페이지의 요소가 맨 앞에 표시되도록 설정

Muse에서는 [디자인] 보기 인터페이스를 통해 페이지 요소를 선택하고 [개체] > [맨 앞으로 가져오기], [앞으로 가져오기], [맨 뒤로 보내기] 또는 [뒤로 보내기]를 선택하여 한 항목이 페이지의 다른 항목 위나 아래에 표시되도록 할 수 있습니다. (또한 요소나 그룹을 마우스 오른쪽 단추로 클릭하고 [배열] > [맨 앞으로 가져오기], [앞으로 가져오기], [맨 뒤로 보내기] 또는 [뒤로 보내기]를 선택하여 스택 순서를 설정할 수도 있습니다.)

이전 버전의 Muse를 사용하여 사이트를 디자인할 경우 기본 동작은 페이지가 렌더링될 때 마스터 페이지의 요소가 항상 페이지의 모든 요소 뒤에 표시되는 것입니다. 유일한 임시 방편은 일반적으로 마스터 페이지에 두는 요소를 복사한 다음 맨 위에 표시할 모든 사이트 페이지에 붙여 넣는 것이므로 때때로 이 배경 레이어는 문제가 되기도 합니다(사이트 디자인에 따라).

Muse 에서는 마스터 페이지의 요소 배열을 제어할 수 있는 새로운 기능이 도입되었습니다. 이제 마스터 페이지의 모든 요소를 항상 페이지 요소 뒤에 두는 대신 마스터 페이지의 요소를 선택하고 전경 요소로 표시되도록 설정할 수 있습니다. 전경 요소로 설정된 마스터 페이지의 항목은 모든 페이지 요소 위에 표시됩니다.

이 새로운 옵션은 [개체] > [이동] > [마스터 전경]을 선택하여 사용할 수 있습니다. 또는 마스터 페이지를 편집할 때 [디자인] 보기에서 요소를 마우스 오른쪽 단추로 클릭하고 나타나는 컨텍스트 메뉴에서 [이동] > [마스터 전경]을 선택할 수 있습니다.

이 샘플 프로젝트의 디자인에서는 홈 및 방문 페이지의 컨텐트는 기본 스택 순서(페이지 요소가 Main 마스터 페이지의 머리글 위에 표시됨)를 사용해야 하지만 음식, 이벤트 및 정보 페이지는 그렇지 않습니다.

음식 및 방문 페이지의 경우, 머리글 컨텐트가 전경(페이지가 스크롤될 때 페이지 컨텐트 위)에 표시되도록 Foreground 마스터 페이지를 업데이트할 것입니다. 다음 단계를 따르십시오.

  1. [플랜] 보기에서 Foreground 마스터 페이지 축소판을 두 번 클릭하여 페이지를 열고 [디자인] 보기에서 편집을 시작합니다(아직 열리지 않은 경우).
  2. 선택 도구를 사용하여 바둑판식 배경이 있는 사각형, 배치된 주황색 리본 그래픽, 메뉴 위젯 및 가운데에 있는 애니메이션 GIF 로고를 포함한 전체 머리글 컨텐트를 클릭하고 드래그하여 선택합니다.
  3. 전체 머리글 컨텐트가 선택된 상태에서 마우스 오른쪽 단추를 클릭하고 [이동] > [마스터 전경]을 선택합니다. 선택한 개체에 대해 나타나는 일반적인 파란색 테두리와 달리 전경에 표시되도록 설정된 항목을 선택하면 파란색 테두리가 나타납니다.
fig_39_building
컨텍스트 메뉴를 사용하여 머리글 컨텐트를 전경으로 이동합니다.

그러면 Foreground 마스터 페이지가 적용된 머리글이 페이지의 페이지 요소 위에 표시됩니다.

  1. 전체 머리글이 여전히 선택된 상태에서 페이지를 스크롤하더라도 머리글이 함께 스크롤되지 않도록 페이지의 맨 위에 고정합니다. 개체 고정에 대한 내용은 7부에서 배우겠지만, 현재는 컨트롤 패널에서 맨 위 가운데 핀 위치를 클릭하여 머리글을 고정시킵니다.
fig_40_building
맨 위 가운데 위치를 선택하여 선택한 머리글을 고정시킵니다.

  1. Foreground 마스터 페이지를 클릭하고 음식 페이지로 드래그하여 적용합니다. 2단계를 두 번 더 반복하여 Foreground 마스터 페이지를 이벤트 페이지 및 정보 페이지에 적용합니다.

이 변경 작업을 수행하면 파란색 레이블 텍스트에 음식, 이벤트 및 정보 페이지가 이제 Foreground 마스터 페이지를 사용하고 있음을 나타내는 [Foreground] 단어가 표시됩니다. 커서를 파란색 [Foreground] 레이블로 가져가면 툴팁에 Foreground 마스터 페이지가 A-마스터 페이지를 기반으로 하고 있다는 것이 나타납니다.

사용자 자신의 프로젝트를 디자인할 때 새로운 전경으로 이동 기능을 사용하여 마스터 페이지의 요소가 맨 위에 표시되도록 설정할 수 있습니다. 나중에 이 자습서 시리즈에서 음식 및 이벤트 페이지에 대한 디자인을 마무리하고 전경 설정을 통해 어떻게 머리글이 페이지의 다른 컨텐트 위에 표시되는지 확인할 수 있습니다.

이 자습서의 다음 단원인 Muse를 사용하여 첫 웹 사이트 만들기 4부에서는 다른 웹 사이트에서 복사한 코드 표시를 위한 임베디드 HTML 작업 방법을 살펴봅니다. 또한 라이트박스 컴포지션 위젯을 추가하여 홈 페이지를 만드는 방법도 배웁니다.

여러 마스터 페이지 사용 및 애니메이션 포함하기

이번 단원에서는 사이트의 섹션을 여러 개로 나누면서도 전체적인 일관성을 유지할 수 있도록 공통 사이트 컨텐트를 여러 개의 마스터 페이지에 표시하는 방법을 설명하고, 마스터 페이지를 다루는 기타 여러 가지 방법을 함께 살펴보겠습니다. 여기에서는 마스터 페이지의 요소를 이동하는 방법도 설명합니다. 이 방법은 여러 개의 마스터 페이지를 만들고 각 페이지별로 특정 그래픽만 사용하도록 사이트를 디자인하고 싶을 때 유용할 수 있습니다. 이 단원에서는 일반적으로 마스터 페이지에 배치되는 요소를 특정 개별 페이지로 이동하는 방법도 설명합니다. 이렇게 하면 각 항목을 서로 겹치게 배열하여 독특한 디자인 효과를 얻을 수도 있습니다.

마스터 페이지 컨텐트 편집

마스터 페이지에 배치한 개체는 개별 페이지에 배치하는 다른 모든 컨텐트 아래 층위에 표시됩니다. 예를 들어, 홈 페이지의 머리글이나 바닥글에 배치하는 모든 개체는 마스터 페이지의 머리글과 바닥글에 배치한 배경 위에 겹쳐 표시됩니다. 바로 이와 같은 이유 때문에 때로는 마스터 페이지의 요소를 개별 페이지의 다른 요소 위에 표시하기 위해 마스터 페이지에서 개별 페이지로 요소를 이동 배치해야 하는 상황이 발생할 수도 있습니다.

마스터 페이지에 추가한 컨텐트는 나중에 마스터 페이지를 열고 편집해야 합니다. 마스터 페이지와 연결된 페이지를 열고 머리글, 바닥글 또는 기타 마스터 페이지 컨텐트를 편집하려고 하면 해당 항목이 잠겨 있어 편집할 수가 없습니다. 마스터 페이지의 컨텐트를 변경해야 할 때 사용할 수 있는 방법으로는 두 가지가 있습니다.

  1. [플랜] 보기에서 마스터 페이지 축소판을 두 번 클릭한 다음 [디자인] 보기에서 마스터 페이지의 컨텐트를 편집합니다.

  2. [플랜] 보기에서 마스터 페이지 축소판을 두 번 클릭하여 [디자인] 보기로 엽니다. 편집할 요소를 선택하고 [편집] > [잘라내기]를 선택하거나, 바로 가기 키 Command+X(Mac) 또는 Ctrl+X(Windows)를 사용합니다. (이 경우 편집할 요소를 사이트의 페이지에 배치하여 해당 요소가 다른 요소보다 위에 놓여야 합니다.)

  3. [플랜] 보기로 돌아와서 (지금까지 마스터 페이지에 있던) 컨텐트를 포함할 페이지를 두 번 클릭합니다. [편집] > [제자리에 붙여넣기]를 선택합니다. 이렇게 하면 마스터 페이지에서 잘라낸 하나 이상의 요소가 일반 페이지의 동일한 위치에 배치됩니다. 원한다면 여러 페이지를 열고 [편집] > [제자리에 붙여넣기]를 선택하여 마스터 페이지에 있던 컨텐트를 사이트의 서로 다른 여러 페이지에 배포할 수 있습니다.

필요하면 기존의 마스터 페이지를 복제할 수도 있습니다. 대부분의 페이지에는 특정 마스터 하나를 사용하고 일부 페이지에는 마스터를 복제하여 만든 유사 버전을 사용하도록 사이트를 구성할 수 있습니다. (이렇게 복제된 마스터 페이지에서 특정 요소를 복사하여 사이트의 특정 페이지에 사용할 수 있습니다.) 마스터 페이지를 복제하는 방법은 다음 소단원을 참조하십시오.

마스터 페이지가 아니라 개별 페이지에 개체를 배치하고 나면 필요에 따라 페이지별로 개체를 편집하여 해당 개체가 최상위에 표시되게 할 수 있습니다.

현재 이 샘플 프로젝트에서는 Kevin's Koffee Kart 로고(플래카드를 뒤에 매달고 있는 빨간색 자전거)를 머리글의 사이트 탐색 모음 바로 위에 표시하도록 사이트가 구성되어 있습니다. 머리글과 바닥글 컨텐트를 포함하고 있는 A-마스터 페이지에 Home 페이지(및 사용자가 만드는 기타 모든 페이지)가 기본적으로 연결되므로 머리글과 바닥글 컨텐트가 각 페이지에 자동으로 표시됩니다. 대부분의 상황에서는 모든 페이지에 동일한 마스터 페이지를 사용하도록 웹 사이트를 작성하여 사이트 전체에 일관성을 부여할 수 있습니다.

그러나 이 샘플 사이트의 경우에는 Home 페이지에만 표시되는 애니메이션 로고가 따로 있습니다. Kevin's Koffee Kart 사이트의 라이브 예제를 확인해 보면 Home 페이지를 처음 로드했을 때 마치 자전거가 페이지 왼쪽에서 출발하여 지나가는 것처럼 빨간색 자전거 로고가 움직이는 것을 알 수 있습니다. 탐색 모음을 클릭하여 다른 페이지를 방문해 보면 이 애니메이션이 Home 페이지에서만 재생되며, 사이트 페이지의 다른 모든 로고는 움직이지 않는다는 사실을 알 수 있습니다.

다음 소단원에서는 마스터 페이지 복제본을 만드는 방법과 [플랜] 보기에서 특정 마스터 페이지를 사용하도록 다른 일반 페이지를 할당하는 방법을 설명합니다.

마스터 페이지 복제 및 삭제

  1. [플랜] 링크를 클릭하여 [플랜] 보기를 엽니다. [플랜] 보기 인터페이스 하단에 있는 A-마스터 축소판을 찾습니다.

  2. "A-마스터" 축소판 위에 마우스 커서를 올려 놓으면 사이트맵에 새 페이지를 추가할 때 표시되는 것과 동일한 플러스 아이콘(+)이 나타납니다. "A-마스터" 축소판의 오른쪽에 있는 플러스 기호(+)를 클릭합니다. 마스터 페이지를 처음부터 새로 만들고 싶으면 항상 이 방법을 사용하면 됩니다. 축소판이 비어 있는 것을 알 수 있습니다. 이는 "A-마스터" 페이지에 추가한 컨텐트가 이 마스터 페이지에는 포함되어 있지 않음을 의미합니다. 새 마스터 페이지의 이름은 기본적으로 "B-마스터"라고 지정됩니다. 원한다면 축소판 아래 있는 필드를 클릭하고 이름을 변경할 수 있습니다.

    그런데 우리가 지금 수행하려는 것은 비어 있는 마스터 페이지를 처음부터 새로 만드는 작업이 아니라 기존의 "A-마스터"를 복제하는 작업입니다.

  3. "B-마스터" 페이지의 오른쪽 위 가장자리에 있는 [X] 아이콘을 클릭하여 이 페이지를 삭제합니다. (이 방법을 사용하여 기존의 마스터 페이지를 실수로 삭제했을 때는 [편집] > [마스터 페이지 삭제 실행 취소]를 선택하여 이를 복원할 수 있습니다.)

  4. A-마스터 페이지 축소판을 마우스 오른쪽 단추로 클릭하고 컨텍스트 메뉴가 나타나면 [페이지 복제]를 선택합니다. 복제하여 얻은 마스터 페이지를 가리키는 "A-마스터 사본"이라는 새 축소판이 표시됩니다.

    fig_59_getting
    [플랜] 보기에서 "A-마스터" 페이지를 복제합니다.

  5. "A-마스터 사본" 축소판 아래 있는 필드를 클릭하고 복제된 마스터 페이지의 이름을 "MasterFlash"라고 변경합니다. Home 페이지에서만 애니메이션으로 재생되는 리치 미디어 컨텐트를 추가하는 데 이 페이지를 사용할 것입니다. 다른 모든 페이지는 "A-마스터" 페이지와 연결을 계속 유지하여 머리글에 정적인 버전의 로고를 표시합니다.

  6. Home 페이지 축소판을 마우스 오른쪽 단추로 클릭합니다. 메뉴가 나타나면 [마스터] > [MasterFlash]를 선택합니다. 이렇게 하면 MasterFlash 마스터 페이지가 Home 페이지에 연결됩니다.

    참고:

    또는 "MasterFlash" 축소판을 "Home" 페이지 축소판 위로 드래그하여 이를 적용할 수도 있습니다.

MasterFlash 마스터 페이지를 적용하고 나면 이 마스터 페이지의 이름이 [플랜] 보기의 Home 페이지 축소판 아래 있는 필드에 표시됩니다.

현재 상태에서는 [미리 보기]를 클릭해도 Home 페이지에서 어떠한 차이점도 발견할 수 없습니다. MasterFlash는 A-마스터 파일을 복제한 것에 불과하므로 Home 페이지는 지금까지 표시되던 것과 마찬가지로 여전히 정적인 로고를 사용하고 있습니다. 그러나 다음 소단원에서 MasterFlash 컨텐트를 편집하여 Home 페이지에서만 재생되는 애니메이션을 추가하고 나면 변화가 생길 것입니다.

복제된 (거의 비슷하지만 약간의 차이가 있는) 마스터 페이지를 사용하면 웹 사이트의 특정 섹션을 쉽게 차별화할 수 있을 뿐만 아니라 이 프로젝트에서 설명하는 바와 같이 매우 독특한 Home 페이지를 만들 수 있습니다.

이 자습서에서는 마스터 페이지를 사용하는 방법을 설명합니다. 이를 위해 세 가지 사이트 레이아웃을 하나씩 뜯어 분석하며, 마스터 페이지 내에 공통 요소를 사용했을 때 어떤 흥미로운 결과를 얻을 수 있는지, 사이트의 일관성을 유지하는 데 어떤 효과가 있는지 살펴보도록 하겠습니다.

그런데 먼저 짚고 넘어가야 할 질문이 하나 있습니다. 마스터 페이지란 도대체 무엇일까요? 마스터 페이지란 머리글, 바닥글, 로고, 탐색 메뉴 등과 같은 공통 요소를 사이트의 여러 페이지에 적용하는 데 사용되는 페이지입니다. 전체 사이트에 대해 마스터 페이지를 한 개만 사용할 수도 있고, 사이트의 각 섹션별로 고유한 스타일을 신속하고 일관되게 적용하기 위해 여러 개의 마스터 페이지를 설정할 수도 있습니다.

기본적으로, Muse에서 새 사이트를 만들 때는 비어 있는 홈 페이지 한 개와 비어 있는 마스터 페이지 한 개가 자동으로 준비됩니다. 이들 페이지를 출발점으로 삼아 어떤 웹 사이트든 만들 수 있습니다. 빈 페이지를 사용하여 사이트맵을 구상한 다음 마스터 페이지를 나중에 적용할 수도 있고, 마스터 페이지부터 시작하여 이를 특정 페이지(홈 페이지)에 적용한 다음 그 디자인을 기초로 새 페이지를 만드는 방식으로 웹 사이트를 만들 수도 있습니다.

사이트 레이아웃 해체 분석

새로운 사이트 디자인 전략을 습득하는 좋은 방법 중 하나는 서로 다른 여러 가지 마스터 페이지 레이아웃을 살펴보는 것입니다. 본 문서에서는 Muse를 사용하여 만든 세 가지 서로 다른 사이트 레이아웃을 분석하며 각 레이아웃이 처음에 어떻게 구성되었는지 살펴보도록 하겠습니다.

설명을 따라가며 이러한 각 샘플 사이트의 에셋을 직접 열어 확인해 보고 싶으면 샘플 파일을 다운로드하여 ZIP 파일의 압축을 푼 다음 각 .muse 파일을 두 번 클릭하여 Muse에서 해당 파일을 여십시오.

이들 각 샘플 사이트를 분석할 때는 방문자가 사이트 컨텐트를 탐색하며 원하는 내용을 쉽게 찾을 수 있도록 사이트를 디자인하는 데 어떤 기능을 사용했는지 눈여겨볼 필요가 있습니다.

  • 사이트 속성을 구성하여 모든 페이지의 치수 정의
  • 안내선을 사용하여 마스터 페이지에 머리글과 바닥글 영역 정의
  • 개체를 브라우저 창에 고정하여 페이지 레이아웃 외부에 배치
  • 배경 이미지 채우기가 스크롤되거나 고정 위치를 유지하도록 설정하여 흥미로운 효과 구현
  • 100% 폭으로 표시되도록 사각형을 늘려 브라우저 폭에 맞추기
  • 아코디언 위젯과 슬라이드 쇼 위젯을 추가하여 대화형 페이지 컨텐트 표시
  • 메뉴 위젯을 사용자 정의하고 스타일 지정하여 사이트 탐색 기능 구현
  • 기준점 링크를 만들어 특정 페이지 섹션을 향해 가로 또는 세로 방향으로 이동
  • 타사 사이트의 코드(임베디드 HTML)를 붙여넣어 페이지에 기능 추가

각 예제 사이트를 방문하여 브라우저 창을 스크롤하고 크기를 조정해 보면서 라이브 예제가 어떤 식으로 작동하는지 직접 확인해 보십시오. 그런 다음 Muse에서 각 .muse 파일을 열고, 사이트 레이아웃을 표준화하고 좀 더 일관된 온라인 환경을 만드는 데 마스터 페이지가 어떤 역할을 하는지 살펴보십시오.

예제 1: Happy Valley Adventure

fig01.master.b720

첫 번째 예제에서는 바닥글 그래픽이 브라우저 창의 아래쪽에 고정되어 있습니다. 또한 페이지의 하단을 가로로 꽉 채우도록 바닥글 배경의 폭이 100%로 설정되어 있습니다. 페이지 컨텐트가 바닥글을 전경으로 삼아 아래로 길게 스크롤되면서 하늘의 그라데이션 효과를 표현하고 있습니다. 왼쪽에 있는 기준점 링크를 클릭하면 페이지가 세로 방향으로 이동하여 해당 링크에 상응하는 섹션이 표시됩니다. 반투명 그래픽 요소를 사용하고 각 요소를 겹쳐 쌓는 순서를 잘 궁리한 덕분에 방문자는 마치 기구를 타고 하늘을 나는 듯한 느낌을 받을 수 있습니다.

이 사이트의 .muse 파일을 분석해 보면 다음과 같은 사실을 알 수 있습니다.

그라데이션으로 채운 일련의 사각형을 마스터 페이지에 사용하여 긴 페이지 컨텐트의 밑그림으로 삼았습니다.

  • 홈 페이지에는 배경 이미지를 가로 방향으로 바둑판식 배열하여 만든 바닥글 그래픽이 포함되어 있습니다. 이 배경 이미지는 폭을 100%로 늘려 브라우저 창의 아래쪽에 고정하도록 설정됩니다. 두 번째 바닥글 그래픽(산봉우리)도 브라우저 아래쪽에 고정되어 있지만 위치를 가운데 정렬했다는 점에서 차이가 있습니다. 바둑판식으로 배열된 다른 바닥글 그래픽 위에 이 그래픽을 표시하기 위해 [정돈] > [맨 앞으로 가져오기]를 선택했습니다. 이렇게 하면 어떤 크기의 모니터에서든 동일한 바닥글 이미지 효과를 구현할 수 있습니다.
  • 왼쪽에 있는 탐색 링크는 세로 방향으로 길게 늘어뜨린 페이지에 추가된 기준점 태그로 곧장 이동하는 데 사용됩니다. 방문자가 링크를 클릭하면 그에 상응하는 컨텐트를 표시하는 위치로 페이지가 스크롤됩니다. 새 사이트 섹션을 표시해도 디자인의 균형이 무너지지 않으며 일관성을 잘 유지합니다.
  • 홈 페이지의 "Contact" 섹션에는 방문자와 쉽게 커뮤니케이션하고 앞으로 있을 모험 일정을 알리는 데 사용하기 위한 연락처 양식 요소를 표시하는 임베디드 HTML이 포함되어 있습니다.

예제 2: Kevin's Koffee Kart

fig02.master.b720
이 다중 계층 사이트에는 메뉴 위젯과 임베디드 HTML 기능이 사용되었습니다.

Kevin's Koffee Kart 사이트의 홈 페이지에는 Flash 애니메이션이 머리글로 포함되어 있고 구름 그래픽이 고정되어 있습니다. 스크롤바를 사용하여 페이지를 탐색해 보면 배경 이미지가 고정된 채 스크롤되지 않는 대신 페이지 컨텐트가 그 위로 스크롤되는 것을 알 수 있습니다. 임베디드 HTML Twitter 피드 아래로 이미지가 차례로 돌아가며 슬라이드 쇼가 자동으로 재생됩니다.

새 페이지를 추가하면 자동으로 업데이트되는 일관된 사이트 탐색 단추를 만들기 위해 가로 방향의 메뉴 위젯을 사용하여 머리글의 메뉴 막대를 만들었습니다. 이 예제에서는 최상위 페이지와 하위 페이지를 모두 표시하도록 메뉴 위젯을 구성했습니다.

메뉴를 사용하여 단추를 클릭할 때마다 각 페이지가 어떻게 로드되는지 확인해 보십시오. 머리글과 바닥글은 모든 페이지에 걸쳐 일률적이지만, 페이지 높이는 컨텐트에 따라 다릅니다. 갈색 바닥글은 브라우저 창의 전체 폭에 맞게 100% 폭으로 설정한 사각형 두 개로 이루어져 있으며, 이는 각 페이지에 일관성을 부여하는 효과가 있습니다.

Kevin's Koffee Kart 사이트를 만드는 데 사용된 주요 디자인 방법은 다음과 같습니다.

  • 이 사이트에는 서로 비슷한 마스터 페이지 두 개가 사용되었습니다. 그 중 하나는 사이트 페이지 대부분에 적용되는 것으로서, Flash 애니메이션이 없는 마스터 페이지입니다. 또 하나의 마스터 페이지는 홈 페이지에만 적용되는 것으로서, Flash 애니메이션을 포함하고 있습니다. 두 마스터 페이지 모두 디자인 테두리가 투명하고 폭이 100%인 바닥글을 포함하고 있으며, 일관성을 유지하기 위해 동일한 메뉴 위젯을 사용하고 있습니다. 첫 번째 마스터 페이지를 만든 후 요소를 복사하여 두 번째 마스터에 붙여넣는 방식으로 모든 요소가 완벽한 일치를 이루게 했습니다.
  • [플랜] 보기에서 페이지를 구성하여 사이트의 최상위 섹션과 하위 섹션을 만들었으며, 이러한 구조는 메뉴 위젯의 드롭다운 항목에 반영되었습니다.
  • 브라우저 채우기로 사용된 배경의 지도 이미지는 바둑판식으로 배열되지 않고 원래 크기대로 표시되도록 설정했습니다. 배경 이미지를 가운데 정렬했으며, 페이지의 컨텐트 아래로 스크롤되지 않도록 설정했습니다.
  • 페이지 배경 채우기로는 살짝 투명하게 만든 흰색 하나만 사용하여 배경의 지도 이미지가 비쳐 보이게 했습니다.
  • Home 페이지에는 브라우저에 고정된 반투명한 구름 이미지 두 개가 포함되어 있습니다. 이 고정된 요소는 페이지를 세로 방향으로 스크롤해도 움직이지 않으며 브라우저 창의 크기를 조정해도 같은 위치를 유지합니다.
  • Home 페이지에는 라이브 Twitter 피드 컨텐트를 표시하기 위한 임베디드 HTML이 사용되었습니다.
  • "Koffee" 페이지에는 방문자가 클릭하는 항목에 따라 패널을 확장 및 축소하는 아코디언 위젯이 사용되었습니다. 이는 최소한의 페이지 영역에 더 많은 컨텐트를 표시하는 데 효과적인 방법입니다.
  • "Origins" 페이지에는 대화형 사진 갤러리를 표시하는 축소판 슬라이드 쇼 위젯이 사용되었습니다. "Preparation" 페이지에는 기준점 태그 탐색 기능을 사용하여 페이지의 각 섹션으로 쉽게 이동할 수 있게 했으며, "Kart Map" 페이지에는 해당 계정에 사용된 휴대폰의 현재 위치를 기준으로 라이브 Google 위치찾기 지도를 표시하는 임베디드 HTML을 사용했습니다.

예제 3: More than Square

fig03.master.b720
겹치게 배치한 고정된 그래픽이 강렬한 인상을 주면서 페이지 컨텐트의 스크롤 부분에 대한 틀 역할을 합니다.

이 마지막 예제에서는 오른쪽 위 가장자리와 왼쪽 아래 가장자리에 고정된 건물 그래픽이 페이지 컨텐트에 대한 틀 역할을 하고 있습니다. 오른쪽 위 가장자리에 있는 건물 그래픽은 맨 앞으로 가져와 페이지 컨텐트 위로 겹치게 정돈한 반면, 왼쪽 아래 있는 건물 그래픽은 페이지 밑으로 표시됩니다.

페이지 컨텐트를 가운데 정렬했고, 가독성에 문제가 없도록 반투명한 디자인을 사용하여 건물 그래픽과 간격을 뒀으며, 가장자리를 둥글게 처리했습니다. 페이지 컨텐트는 세로로 스크롤되며, 페이지 요소를 클릭할 때마다 높이가 달라집니다. 페이지 왼쪽에는 소셜 네트워크 링크(Twitter, Facebook, YouTube)가 계속 표시됩니다. 이는 교차 연결을 쉽게 만들고 사이트 전반에 걸쳐 비대칭 디자인을 일관되게 표현하는 효과가 있습니다.

Home 페이지에는 [Next] 및 [Previous] 단추를 사용하여 앞뒤로 이동할 수 있는 사진 갤러리가 포함되어 있습니다. 이 사진 갤러리는 방문자가 단추를 클릭하지 않더라도 느린 속도로 하나씩 돌아가며 표시하도록 구성되어 있습니다. "How to Get Here" 페이지에는 Google 지도로부터 임베디드 HTML 코드를 복사하여 만든 대화형 지도가 포함되어 있습니다.

이 예제의 소스 .muse 파일을 분석할 때는 특히 다음 사실에 주목할 필요가 있습니다.

이 예제에 사용되는 공통 페이지 요소는 거의 대부분 마스터 페이지에 있습니다. 이렇게 하면 사이트를 업데이트하거나 개별 페이지 컨텐트를 변경하기가 더 쉽습니다.

마스터 페이지에는 바닥글 이미지로 사용되는 배경 그래픽이 포함되어 있습니다. 이 그래픽은 스크롤되지 않으며 브라우저의 왼쪽 아래 부분에 고정됩니다. 마스터 페이지에는 가장자리를 둥글게 처리한 반투명 페이지 디자인도 포함되어 있습니다. 여기에는 사이트 탐색 단추가 배치됩니다.

모든 사이트 페이지의 오른쪽 위 가장자리에는 고정된 그래픽이 있습니다. 페이지 컨텐트 위에 표시되도록 이 그래픽을 정돈하여 마치 건물 이미지를 사선으로 보는 듯한 원근법 효과를 구현했습니다.

Muse는 여러분의 디자인을 웹에서 표현하는 데 사용할 수 있는 직관적인 디자인 도구입니다. 마스터 페이지에 각 요소를 창의적으로 배치하고 각 페이지에 고유한 컨텐트를 표시하면 매우 인상 깊은 레이아웃을 만들 수 있습니다. 상상력만 있으면 불가능할 것이 없습니다. 여러분의 고객을 위해 혁신적인 사이트를 만들어 보십시오.

Muse를 사용하여 작업하는 데 더 많은 정보가 필요하면 Muse 도움말 및 자습서 페이지를 방문하거나 Muse 이벤트 페이지에서 실시간으로 또는 녹화 방송으로 진행되는 웨비나에 참석하십시오.

이 작업에는 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License의 라이센스가 부여되었습니다.  Twitter™ 및 Facebook 게시물은 Creative Commons 약관을 적용받지 않습니다.

법적 고지 사항   |   온라인 개인 정보 보호 정책