adobe muse(어도브 뮤즈) 웹사이트 만들기1

adobe muse(어도브 뮤즈) 웹사이트 만들기1

본 자습서에서는 Adobe Muse 작업 영역이 어떻게 구성되어 있는지 살펴보고, 완벽하게 작동하는 웹 사이트를 어떠한 코드도 전혀 작성하지 않은 채 구축하는 방법을 설명합니다. 

"Muse를 사용하여 첫 웹 사이트 만들기" 제1부에서는 Muse를 처음 시작하는 데 도움이 될 지침을 소개합니다. 여기에서는 마스터 페이지, 위젯, Photoshop 단추, 링크를 사용하는 방법을 설명합니다. 이 자습서를 학습하면서 언제든지 Katie's Cafe 라이브 웹 사이트를 방문하여 최종 사이트가 어떤 모양일지 확인할 수 있습니다.

소프트웨어 설치 및 샘플 프로젝트 설정

1. 최신 버전의 Muse를 다운로드하여 설치합니다.

2. 샘플 파일을 다운로드합니다.

3. ZIP 파일의 압축을 풀고 데스크톱의 katiesCafe라는 폴더에 저장합니다.

4. Muse를 실행합니다. 시작 화면이 표시됩니다. [새로 만들기] > [사이트]를 선택합니다(그림 1 참조).

 

그림 1. 시작 화면에서 새 사이트를 만들기 위한 옵션을 선택합니다. 

[새 사이트] 대화 상자가 나타납니다. 이 인터페이스를 사용하면 전체 사이트에 적용되는 설정을 편집할 수 있습니다.

5. 열의 개수를 12로 설정합니다. [열] 필드에 숫자 12를 입력하거나 필드 옆에 있는 위쪽 화살표를 클릭하여 현재 값을 늘립니다(그림 2 참조). 이 설정을 변경하고 나면 다른 값이 자동으로 업데이트됩니다.

 

그림 2. [새 사이트] 대화 상자에서 열의 개수를 업데이트합니다. 

참고: 이 자습서에서는 Muse를 사용하여 처음으로 데스크톱 컴퓨터용 웹 사이트를 만드는 방법을 설명합니다. 기본적으로 [초기 레이아웃] 메뉴가 [바탕 화면]으로 설정되어 있으므로 이를 변경할 필요가 없습니다. 나중에 스마트폰과 태블릿에 맞는 다른 레이아웃을 사용하여 웹 사이트를 만들려면 이 메뉴에서 어떤 레이아웃을 디자인할지 먼저 선택하면 됩니다.

[새 사이트] 대화 상자를 닫기 전에 [고정 바닥글]이라는 새 옵션을 잠시 살펴보도록 하겠습니다. 이 옵션은 기본적으로 활성화되어 있습니다. 대부분의 경우에는 웹 사이트를 만들 때 고정 바닥글 옵션을 활성화해 두는 것이 좋습니다. 이 옵션을 사용하면 Apple Cinema Display에서와 같이 브라우저 창이 웹 페이지 디자인보다 훨씬 더 커도 바닥글을 원하는 위치에 둘 수 있기 때문입니다(그림 3 참조).

 

그림 3. [고정 바닥글] 옵션은 기본적으로 활성화되어 있습니다. 

예를 들어, Muse 사이트를 미리 보기 위해 대형 모니터에서 브라우저를 열고 [고정 바닥글]이 활성화되어 있지 않은 페이지를 확대했을 때, 페이지 컨텐트가 브라우저 창의 크기에 비해 너무 작으면 바닥글 아래 영역에 브라우저 창이 표시되는 것을 알 수 있습니다. 그러나 [고정 바닥글] 옵션을 활성화하면 방문자가 사용하는 데스크톱 모니터의 해상도 및 화면 크기와 상관없이 바닥글 컨텐트가 브라우저 창 하단에서 계속 같은 높이를 유지합니다(그림 4 참조).

 

그림 4. [고정 바닥글]을 사용한 사이트(왼쪽)와 [고정 바닥글]을 사용하지 않은 사이트(오른쪽)를 확대하여 비교한 화면입니다. 

이 샘플 사이트 프로젝트(및 기타 대부분의 프로젝트)에서는 [새 사이트] 대화 상자의 [고정 바닥글] 옵션을 계속 활성화해 둡니다.

6. [확인]을 클릭하여 변경 내용을 저장하고 [새 사이트] 대화 상자를 닫습니다.

7. [파일] > [사이트 저장]을 선택합니다. [Adobe Muse 파일을 다른 이름으로 저장] 대화 상자에서 사이트의 이름을 katiesCafe.muse라고 입력합니다. 이 샘플 프로젝트를 저장할 위치(데스크톱의 katiesCafe 폴더 등)를 찾은 다음 [저장]을 클릭합니다.

참고: katiesCafe 샘플 파일 폴더에는 샘플 프로젝트의 최종 완성 버전(katiescafe-final.muse)이 포함되어 있습니다. 필요하면 현재 작업 중인 버전의 프로젝트인 katiesCafe.muse를 저장한 후 최종 버전인 .muse 파일을 두 번 클릭하여 열어 볼 수 있습니다. Muse에서는 한 번에 여러 개의 사이트 프로젝트를 열어 둘 수 있으므로 katiescafe-final 파일을 열고 필요할 때마다 참조하면서 이 지침에서 설명하는 작업을 수행할 수도 있습니다.

다음 단원에서는 사이트에 새 페이지를 추가하겠습니다.

사이트맵 작성

사이트맵은 웹 사이트의 계층 구조를 형성하는 페이지들의 구조화된 목록입니다. 여러 페이지를 (하위 페이지 없이) 동일 수준에서 만들 수도 있고, 서로 다른 페이지 계층을 포함하는 사이트맵을 만들 수도 있습니다. (예를 들어, 사이트의 규모가 크면 "회사 소개" 페이지에 "인사말"과 "직원 소개"라는 하위 페이지 두 개를 포함할 수도 있습니다.) Muse를 사용하면 페이지를 어떤 순서로든 쉽게 만들고 다시 정돈할 수 있으며, 링크가 끊어질까 염려할 필요가 전혀 없습니다. 그러나, 새 사이트를 만들 때는 충분한 시간을 들여 해당 컨텐트를 어떤 식으로 구성할지 검토하고, 어떤 페이지가 필요한지 확인하고, 사이트의 정보를 어떻게 표현할지 결정하는 일이 매우 중요합니다. 실제 프로젝트를 진행할 때는 사전 계획 단계에서 각 사이트 섹션을 최종 결정하고 페이지 순서를 선택합니다.

[새 사이트] 대화 상자를 닫으면 Muse의 [플랜] 보기가 자동으로 열립니다. 기본적으로 모든 새 사이트에는 "홈"이라는 웹 페이지 하나가 포함되어 있고, 이 웹 페이지는 "A-마스터"라는 마스터 페이지 하나에 연결되어 있습니다. 이 두 페이지의 이름은 원하는 대로 변경할 수 있습니다.

일관성 있는 사이트 환경을 만들려면 머리글, 바닥글, 사이트 탐색 메뉴 등과 같이 반복되는 사이트 항목을 마스터 페이지에 배치하는 것이 좋습니다. 이와 같은 방법을 사용하면 각 페이지에는 고유한 컨텐트만 추가하면 되므로 나중에 사이트 디자인을 수정하기도 쉽습니다. 

이 샘플 프로젝트는 "홈" 페이지를 포함하여 총 다섯 페이지로 이루어진 작은 사이트입니다. 새 페이지를 추가하는 단계별 작업 과정은 다음과 같습니다.

1. "홈" 페이지 축소판 위에 마우스 커서를 놓고 "홈" 페이지 축소판의 오른쪽에 표시된 플러스(+) 아이콘을 클릭합니다. 이렇게 하면 처음 페이지와 동일한 수준에서 새 페이지가 생성됩니다. 새 페이지 아래 있는 레이블 필드를 클릭하고 이름을 "food"라고 지정합니다.

페이지 축소판 아래 표시된 플러스(+) 아이콘을 클릭하면 하위 수준의 페이지를 만들어 특정 주제와 관련된 페이지로 섹션을 확장할 수 있습니다.

2. "food" 페이지 축소판의 오른쪽에 표시된 플러스(+) 아이콘을 클릭하여 새 페이지를 한 개 더 만듭니다. 레이블을 클릭하고 페이지 이름을 "events"라고 지정합니다. "events" 페이지 축소판의 오른쪽에 표시된 플러스(+) 아이콘을 클릭하여 새 페이지를 만듭니다. 새 페이지의 이름을 "about"이라고 지정합니다. 이 작업을 다시 반복하여 홈 페이지와 동일한 수준에 새 페이지를 하나 더 만들고 이름을 "visit"라고 지정합니다.

이제 "홈", "food", "events", "about", "visit"라는 총 다섯 페이지로 이루어진 사이트맵이 준비되었습니다(그림 5 참조).

 

그림 5. 사이트맵에 총 다섯 페이지를 만듭니다. 

참고: 이 자습서에서는 기본적인 작업 방법에 집중하기 위해 사이트맵에 포함된 다섯 페이지의 수준을 동일하게 맞췄습니다. 그러나 나중에 실제 사이트를 만들 때는 다른 하위 페이지를 만들어 추가할 수 있습니다. 아래쪽의 마스터 페이지 옆에 있는 플러스(+) 아이콘을 클릭하여 마스터 페이지를 더 만들 수도 있습니다. 이렇게 하면 사이트의 각 섹션별로 표시할 서로 다른 디자인을 만들 수 있습니다. 마스터 페이지가 여러 개인 경우 [플랜] 보기에서 페이지 축소판을 마우스 오른쪽 단추로 클릭하거나 Ctrl 키를 누른 채 클릭하여 해당 페이지를 특정 마스터 페이지에 연결할 수 있습니다. 새 사이트를 처음 만들 때는 각 페이지가 "A-마스터" 마스터 페이지에 자동으로 연결됩니다.

[플랜] 보기에는 사이트의 구조를 정의하고 방문자가 각 섹션에 어떤 경로로 액세스하게 할지 지정하기 위한 도구가 있습니다. 사이트의 구성을 변경하려면 페이지 축소판을 드래그하여 위치를 옮기는 간단한 방법으로 페이지 순서를 조정하기만 하면 됩니다.

3. 홈 페이지 축소판을 클릭한 후 드래그하여 "events" 페이지와 "about" 페이지 사이에 놓습니다.

4. 홈 페이지 축소판 아래 있는 필드를 두 번 클릭하고 페이지의 이름을 "home"이라고 변경합니다(그림 6 참조).

 

그림 6. 다른 페이지에 맞춰 홈 페이지의 이름을 소문자 "home"으로 변경합니다. 

이 변경 작업을 끝으로 사이트맵이 완성되었습니다.

[플랜] 보기 인터페이스 상단에 [바탕 화면], [태블릿], [휴대폰] 레이아웃을 위한 단추 3개가 있는 것을 알 수 있습니다. 이 샘플 프로젝트에서는 사이트를 컴퓨터 화면에서 보기 위한 데스크톱 디자인만 만듭니다. [태블릿] 및 [휴대폰] 레이아웃의 이름 옆에는 플러스(+) 기호가 있습니다. 이는 해당 레이아웃을 아직 만들지 않았다는 의미입니다(그림 7 참조).

 

그림 7. [플랜] 보기 상단에 있는 3개의 레이아웃 단추를 사용하면 서로 다른 크기의 화면에 표시되는 레이아웃 3개를 만들고 각 레이아웃 사이를 이동할 수 있습니다. 

레이아웃이 여러 개인 경우 레이아웃 단추를 클릭하여 사이트 레이아웃 사이를 이동하는 방법 외에 바로 가기 키를 사용하여 사이트 플랜 사이를 전환할 수도 있습니다.

- [데스크톱] 사이트맵으로 이동하려면 Command+7(Mac) 또는 Ctrl+7(Windows)을 누릅니다.

- [태블릿] 사이트맵으로 이동하려면 Command+8(Mac) 또는 Ctrl+8(Windows)을 누릅니다.

- [휴대폰] 사이트맵으로 이동하려면 Command+9(Mac) 또는 Ctrl+9(Windows)를 누릅니다. 

이러한 바로 가기 키는 사이트 프로젝트에 [바탕 화면], [태블릿] 및/또는 [휴대폰] 레이아웃이 적어도 2개 이상 포함된 경우에만 사용할 수 있습니다.

이 샘플 사이트 프로젝트를 빌드하는 나머지 과정에서는 계속하여 [바탕 화면] 레이아웃으로 작업합니다. 모바일 기기용 웹 사이트를 디자인하는 방법을 자세히 알고 싶으면 Muse에서 모바일 레이아웃 디자인 만들기를 참조하십시오.

이제 사이트맵 설정을 마쳤습니다. 다음 단원에서는 "A-마스터" 페이지를 편집하여 바닥글 컨텐트 등과 같은 사이트 공유 요소를 추가하는 방법을 살펴보겠습니다.

A-마스터 페이지 편집

이번 단원에서는 사이트의 첫 번째 마스터 페이지를 디자인합니다. 여기에는 사이트에서 링크로 연결되는 다른 페이지에 표시할 영구 아트웍이 포함됩니다.

Muse의 작동 방식은 많은 부분에 있어서 디자인 도구와 비슷하지만, 그 이면에서는 웹 페이지를 만드는 데 필요한 산업 표준 HTML, JavaScript 및 CSS가 생성됩니다. 둥근 모서리, 그라데이션 채우기 색상 등과 같은 스타일을 적용하고 싶다고 해서 Muse로 벡터 도형이나 픽셀 그리드를 만들 수는 없습니다. 대신, 표준에 따라 완벽하게 작동하는 웹 페이지를 최종 결과물로 게시할 수 있습니다. 그러면 우선 배경 그래픽을 업데이트하는 작업부터 시작하겠습니다. 

바둑판식 배경 이미지를 브라우저 채우기로 설정

1. [플랜] 보기에서 "A-마스터" 페이지 축소판을 두 번 클릭하여 [디자인] 보기로 이 페이지를 엽니다. "A-마스터" 페이지가 작업 영역 상단에 별도의 탭으로 열립니다(그림 8 참조).

 

그림 8. [디자인] 보기에서 A-마스터 페이지를 편집할 준비가 되었습니다. 

[컨트롤] 패널의 왼쪽 위 가장자리에 선택 표시자가 있습니다. 아무것도 선택하지 않았을 때는 선택 표시자에 [페이지]라는 단어가 표시됩니다. 이는 페이지 자체만 선택한 상태임을 의미합니다. 페이지에 배치된 이미지 같은 개체를 선택하면 [이미지 프레임]이라는 단어가 표시됩니다.

이는 현재 선택된 항목이 무엇인지 확인하는 데 매우 유용합니다. 작업을 진행하면서 선택 표시자를 확인하면 제어할 요소를 올바르게 선택했는지 쉽게 알 수 있습니다. 페이지 요소를 잘못 선택했을 때는 언제든지 페이지 왼쪽 또는 오른쪽 측면에 있는 회색 영역을 클릭하여 전체 페이지를 새로 선택할 수 있습니다.

페이지를 선택한 상태에서 [컨트롤] 막대의 메뉴를 사용하여 채우기 색상 및 획 설정을 업데이트할 수 있습니다. 이 예제에서는 다음 단계에 따라 마스터 페이지를 업데이트합니다.

2. [컨트롤] 패널에서 [브라우저 채우기]라는 링크 단어를 클릭합니다. [이미지] 섹션 옆에 있는 폴더 아이콘을 클릭하고 샘플 파일 폴더에 있는 bg-tile.png라는 파일을 찾아 선택합니다. [열기]를 클릭하여 배경 이미지를 설정합니다(그림 9 참조).

 

그림 9. [브라우저 채우기] 패널을 사용하여 브라우저 창에 표시할 배경 이미지를 설정합니다. 

기본적으로 [맞춤] 메뉴가 [바둑판식 배열]로 설정되어 있습니다. 이 설정을 사용하면 배경 이미지가 바둑판처럼 가로 및 세로 방향으로 반복되어 브라우저 창을 채웁니다.

3. [브라우저 채우기] 패널 바깥쪽을 아무 곳이나 클릭하여 이 패널을 닫습니다.

사이트를 게시하면 바둑판식 배경 채우기로 설정한 작은 크기의 원래 이미지가 브라우저에 한 번만 로드됩니다. 바둑판식 배경 이미지를 사용하면 사이트의 성능이나 다운로드 속도에 영향을 주지 않으면서 페이지의 넓은 면적을 필요한 만큼 이미지로 덮을 수 있습니다.

4. [컨트롤] 패널에서 [채우기] 색상 칩을 클릭하고 페이지의 채우기 색상을 [없음](빨간색 대각선이 있는 흰색 견본)으로 설정합니다.

다음 순서로는 모든 사이트 페이지에 표시할 바닥글을 만드는 데 필요한 그래픽을 추가하겠습니다.

폭이 100%로 설정된 요소 다루기

항목의 폭을 100%로 설정하면 방문자가 브라우저 창 크기를 얼마나 넓게 조정하든 상관없이 해당 항목을 사용하여 브라우저를 가로로 가득 채울 수 있습니다. 브라우저 창의 위쪽 및 아래쪽 가장자리에 맞춰 페이지 요소가 정렬되도록 설정하면 바둑판식으로 배열된 에셋 또는 단색으로 채운 개체가 사용 가능한 공간의 크기에 맞게 확장됩니다.

1. [사각형] 도구를 사용하여 페이지 폭에 맞고 높이가 약 250픽셀인 사각형을 페이지 아래쪽에 그립니다.

2. 사각형을 선택하고 획 두께를 0으로 설정합니다. 왼쪽 위 가장자리에 있는 선택 표시자에 [사각형]이라는 단어가 표시되었으면 사각형을 제대로 선택한 것입니다(그림 10 참조).

 

그림 10. [획] 필드를 사용하여 선택된 사각형의 획을 0으로 설정합니다. 

3. [컨트롤] 패널에서 [채우기]라는 단어를 클릭하여 [채우기] 메뉴를 엽니다. [채우기] 메뉴를 사용하여 색상을 [없음](빨간색 대각선이 있는 흰색 견본)으로 설정합니다. [이미지] 섹션 옆에 있는 폴더 아이콘을 클릭하고 사각형의 배경 이미지를 footer-tile.jpg로 설정합니다. [맞춤] 메뉴에서 옵션을 [가로 바둑판식 배열]로 설정합니다. 이렇게 하면 이미지가 X-축을 따라 왼쪽에서 오른쪽으로 바둑판식으로 배열됩니다.

4. 사각형의 변형 핸들을 드래그하여 화면에 표시된 영역의 맨 아래쪽에 사각형을 배치한 다음, 페이지의 왼쪽, 아래쪽, 오른쪽 측면이 덮이도록 사각형의 폭을 조정합니다. 사각형이 "100% 폭" 모드로 설정되었음을 의미하는 빨간색 테두리가 잠시 나타났다가 사라집니다(그림 11 참조).

 

그림 11. 사각형을 드래그하여 브라우저 창의 아래쪽 및 좌우 측면에 맞춰 정렬합니다. 

페이지에 이미지 한 개 배치

이번에는 배경 이미지를 페이지 또는 사각형으로 설정하는 대신 이미지를 페이지에 직접 배치하는 방식으로 이미지 파일을 추가해 보겠습니다. Muse 작업 영역은 배치된 이미지를 먼저 로드한 다음 페이지에서 해당 이미지를 표시할 위치를 클릭한다는 점에서 Illustrator나 InDesign과 작동 방식이 비슷합니다.

1. [파일] > [배치]를 선택하거나 바로 가기 키 Command+D(Mac) 또는 Ctrl+D(Windows)를 사용하여 [가져오기] 대화 상자를 엽니다.

2. 샘플 파일 폴더에 있는 made-with-muse.png라는 파일을 찾아 선택합니다. [열기]를 클릭하여 파일을 선택하고 [가져오기] 대화 상자를 닫습니다.

페이지 아래쪽을 한 번 클릭하여 이미지를 배치합니다. 이 예제에서는 이미지를 전체 크기로 배치할 것이므로 마우스 단추를 한 번만 클릭합니다. 배치한 이미지의 크기를 조정하려면 마우스 단추를 클릭한 채 드래그하여 이미지의 비율을 특정 크기로 조정하면 됩니다. 

[선택] 도구로 이미지를 드래그하여 바둑판식으로 배열된 바닥글 사각형의 세로 가운데 지점으로 가져갑니다. 이미지를 가운데 지점에 정렬하기 쉽도록 빨간색 안내선과 옥색 측정 상자가 잠시 나타났다가 사라지는 것을 알 수 있습니다.

여기까지 작업을 마쳤으면 바닥글 섹션을 거의 완성한 셈입니다(그림 12 참조).

 

그림 12. 사각형 배경 이미지 한 개를 바둑판식으로 배열하고 그 위에 가운데 정렬된 이미지를 배치하여 바닥글을 구성했습니다. 

다음 섹션에서는 마스터 페이지의 머리글 및 바닥글 영역을 정의하는 방법을 살펴보겠습니다.

안내선을 사용하여 페이지의 머리글 및 바닥글 영역 정의

HTML과 CSS를 사용하여 웹 사이트를 만들면 개별 페이지에 표시되는 고유한 컨텐트에 따라 각 페이지의 높이가 제각각이기 일쑤입니다. Muse의 기능을 사용하면 각 페이지의 고유한 컨텐트에 따라 사이트 페이지마다 표시되는 길이를 서로 다르게 할 수 있습니다. 각 페이지의 높이와 상관없이 머리글이 페이지 맨 위에 계속 남아 있고 바닥글이 항상 페이지 컨텐트 바로 아래 표시되도록 영역을 설정할 수 있습니다. 이번 단원에서는 마스터 페이지의 머리글과 바닥글 영역을 정의해 보겠습니다.

아래에서 설명하는 단계에 따라 안내선을 표시하고 페이지 영역을 설정합니다.

1. 우선 머리글과 바닥글 안내선이 표시되어 있는지 확인합니다. 안내선이 표시되어 있지 않으면 [보기] > [머리글과 바닥글 표시]를 선택합니다. 또는 [컨트롤] 패널의 [보기] 메뉴를 사용하여 [머리글과 바닥글] 안내선을 활성화해도 됩니다. 머리글과 바닥글을 표시하면 [보기] 메뉴 목록의 [머리글과 바닥글] 항목 옆에 있는 확인란이 선택 표시됩니다(그림 13 참조).

 

그림 13. 머리글과 바닥글 안내선이 활성화되었는지 확인합니다. 

또는 작업 영역 왼쪽에서 브라우저 창 영역의 바로 옆 바깥쪽을 마우스 오른쪽 단추로 클릭할 수도 있습니다. 컨텍스트 메뉴가 나타나면 [머리글과 바닥글 표시] 옵션을 활성화합니다.

머리글과 바닥글 안내선의 위치를 조정하려면 눈금자도 활성화되어 있어야 합니다. 눈금자를 사용하면 안내선을 정확한 픽셀 위치에 맞춰 설정할 수 있습니다. 기본적으로 (새 사이트를 만들 때 설정한 열의 개수를 표시하는) 일반 안내선도 함께 표시됩니다.

파란색 가로 안내선 5개가 페이지 폭만큼 화면을 가로지르고 있습니다. 이 5개의 안내선은 맨 위에서부터 각각 페이지의 최상단, 머리글의 아래쪽 가장자리, 바닥글의 위쪽 가장자리, 웹 페이지의 최하단, 브라우저 창의 최하단을 정의하는 데 사용됩니다. 이러한 영역을 정의하기 위해 안내선을 드래그하면 각 안내선에 대한 설명과 현재 위치를 표시하는 툴팁이 나타납니다. 페이지의 배율을 늘려 화면을 확대하면 안내선을 좀 더 정확하게 배치하는 데 도움이 될 수도 있습니다.

참고: 브라우저 창의 최하단은 방문자가 브라우저에서 사이트를 볼 때 표시되는 영역의 가장 낮은 부분을 의미합니다. 디자인에 따라, 브라우저 자체를 위한 배경색이나 배경 이미지를 설정할 수도 있고, 페이지 컨텐트 아래 배경색이나 이미지가 표시되도록 브라우저 최하단 안내선 위에 있는 페이지 최하단 안내선을 설정할 수도 있습니다.

이 샘플 프로젝트에서는 브라우저 채우기를 페이지 컨텐트 아래 표시하지 않습니다.

2. [페이지 아래] 안내선과 [브라우저 아래] 안내선을 드래그하여 페이지 하단의 동일한 위치로 가져와서 그림 14에서와 같이 바닥글 사각형 바로 아래 놓습니다.

 

그림 14. [페이지 아래] 안내선과 [브라우저 아래] 안내선이 동일한 위치에 있으면 페이지 최하단 아래쪽에 브라우저 채우기 컨텐트가 표시되지 않습니다. 

중간에 있는 안내선 3개는 머리글과 바닥글 영역에 표시되는 컨텐트를 정의합니다. 나머지 가운데 영역은 고유한 페이지 컨텐트를 추가할 자리입니다. 이 가운데 영역은 각 페이지에 배치된 요소의 높이에 맞춰 확장됩니다.

페이지에서 사각형과 요소를 선택할 수도 있습니다. 선택된 요소의 테두리 상자를 사용하면 머리글과 바닥글 영역을 설정할 때 안내선을 쉽게 정렬할 수 있습니다.

3. 바닥글에서 바둑판식 배경 이미지가 포함된 사각형을 선택합니다. [바닥글] 안내선을 드래그하여 바닥글 사각형의 위쪽 끝에 맞춰 정렬합니다.

4. [페이지 위쪽] 안내선의 위치를 최상단(Y: 0px 위치)에 그대로 둡니다. [머리글] 안내선을 아래쪽으로 드래그하여 약 253픽셀 정도 위치로 옮깁니다.

머리글 컨텐트는 페이지 맨 위쪽과 [머리글] 안내선 사이의 영역에 표시됩니다. 여기까지 작업을 마치고 나면 안내선이 다음과 같은 모양이 됩니다(그림 15 참조).

 

그림 15. A-마스터 페이지에서 안내선의 위치를 조정한 결과입니다. 

머리글 및 바닥글 컨텐트에 맞춰 안내선을 다시 조정해야 할 때는 디자인 프로세스를 진행하는 동안 언제든지 "A-마스터" 페이지로 돌아올 수 있습니다.

[플랜] 링크를 클릭하거나 katiesCafe라는 탭을 클릭하여 [플랜] 보기로 돌아갑니다.

링크로 연결된 "A-마스터" 페이지에 추가한 디자인 요소가 사이트의 다른 모든 페이지 축소판에도 표시된 것을 알 수 있습니다(그림 16 참조).

 

그림 16. [플랜] 보기에서 링크로 연결된 모든 페이지 축소판에 A-마스터 디자인이 표시됩니다. 

사이트를 디자인하면서 언제든지 마스터 페이지를 변경할 수 있습니다. 이렇게 하면 링크로 연결된 모든 페이지가 자동으로 업데이트됩니다. 이와 같이 마스터 페이지를 사용하면 마스터 페이지 하나만 업데이트하여 사이트 전체의 모양을 바꿀 수 있으므로 사이트를 업데이트하거나 유지 관리하기가 쉽습니다.

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

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

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

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

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

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

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

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

1. [플랜] 보기에 사이트맵을 표시한 상태에서 "A-마스터" 페이지 축소판 위에 마우스 커서를 올려 놓아 축소판 양 옆에 플러스(+) 아이콘을 표시합니다. "A-마스터" 페이지 오른쪽에 있는 플러스(+) 아이콘을 클릭하여 또 하나의 새 마스터 페이지를 만듭니다. 새 마스터 페이지의 이름은 "B-마스터"로 기본 설정됩니다.

2. 축소판 아래 있는 "B-마스터" 텍스트 필드를 두 번 클릭하여 이를 편집합니다. 방금 만든 새 마스터 페이지의 역할을 좀 더 쉽게 알 수 있는 이름을 입력합니다. 이 예제에서는 "Main"이라는 이름을 사용합니다.

3. "Main" 마스터 페이지 축소판을 마우스 오른쪽 단추로 클릭하고 컨텍스트 메뉴가 나타나면 [마스터] > [A-마스터]를 선택합니다(그림 17 참조).

 

그림 17. 메뉴에서 [A-마스터]를 선택하여 이를 "Main" 마스터 페이지에 적용합니다. 

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

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

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

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

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

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

5. "events" 페이지 축소판을 마우스 오른쪽 단추로 클릭하고 컨텍스트 메뉴가 나타나면 [마스터] > [Main]을 선택합니다(그림 18 참조).

 

그림 18. 컨텍스트 메뉴를 사용하여 "Main"을 "events" 페이지의 마스터 페이지로 설정합니다. 

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

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

 

그림 19. 레이블 위에 마우스 커서를 놓으면 계층 구조를 설명하는 유용한 툴팁이 표시됩니다. 

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

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

* 이 내용은 ADOBE 홈페이지  어도비 뮤즈<adobe muse> 도움말을 가지고 왔습니다.