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

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

Muse를 사용하여 첫 웹 사이트 만들기 1부에서는 웹 사이트를 만들고 플랜 보기를 사용하여 사이트 페이지를 만든 다음 디자인 보기에서 A-마스터 페이지를 편집하여 페이지 요소를 추가하고 머리글과 바닥글 영역을 정의했습니다. 또한 계층적 마스터에 대해 살펴보고 새로운 Main 마스터를 만든 다음 여기에 A-마스터를 적용했습니다. 여기에서는 Main 마스터 페이지를 편집하고 위젯을 추가 및 사용자 정의하는 방법을 배웁니다. 추가할 첫 번째 유형의 위젯은 방문자가 사이트에서 여러 페이지로 이동하는 데 도움을 주는 [메뉴] 위젯입니다.

메뉴 위젯 작업

Brian Wood가 진행하는 이 비디오에서는 페이지에 메뉴 위젯을 삽입하는 방법을 배울 수 있습니다.

 

앞 단원에서 만든 Main 마스터 페이지는 A-마스터 페이지의 모든 컨텐트를 상속하고 있으므로 거의 완성되었습니다. 또한 원래 마스터 페이지의 안내선은 다른 마스터를 적용할 때 복제한 페이지에 상속됩니다. 하지만 마스터 페이지에는 일반적으로 사이트 탐색 메뉴가 포함되므로 다음에 추가하게 됩니다.

Main 마스터 페이지에 가로 메뉴 추가:

1. [플랜] 보기에서 Main 마스터 페이지 축소판을 두 번 클릭하여 [디자인] 보기로 이 페이지를 열고 편집합니다.

2. 패널 모음에서 [위젯 라이브러리] 탭을 클릭하여 위젯 라이브러리를 엽니다. 또는 위젯 라이브러리가 닫힌 경우 [창] > [위젯 라이브러리]를 선택하여 엽니다. 위젯 라이브러리가 열리면 목록의 위젯 라이브러리 항목 옆에 확인 표시가 나타납니다.

3. 위젯 라이브러리에서 [메뉴] 섹션을 클릭하여 확장합니다. [가로 위젯]을 선택하고 패널에서 Main 마스터 페이지의 바닥글 영역으로 드래그합니다(그림 20 참조).

 

처음에 위젯을 페이지로 드래그할 때마다 나타나는 검은색 패널을 [옵션] 패널이라고 합니다. 패널에서 멀리 클릭하여 닫은 다음 다시 액세스를 원할 때마다 위젯 오른쪽에 표시된 파란색 화살표 단추를 클릭합니다.

4. 선택 도구를 사용하여 바닥글의 바둑판식 배경 이미지가 있는 기존 사각형의 위쪽(회색 영역 위쪽 부근 및 세로로 가운데 정렬)에 메뉴 위젯을 둡니다.

메뉴가 자동으로 페이지의 이름을 사이트 맵에 나타나는 동일한 순서로 표시합니다. 더욱이 페이지의 이름은 해당 페이지로 자동으로 링크되며 동적입니다. 따라서 나중에 페이지의 이름을 바꾸거나 페이지를 이동하더라도 메뉴는 자동으로 업데이트되고 링크는 계속해서 작동합니다. 위젯 사용은 직관적이므로 사이트 디자인에 맞게 어떻게 보이도록 사용자 정의할지에 집중할 수 있습니다.

각 유형의 위젯은 서로 다른 기능을 제공하지만 위젯으로 작업할 때 사용하게 될 대부분의 개념은 동일합니다. 위젯 라이브러리에서 사용하고자 하는 위젯을 찾은 다음 페이지로 드래그하면 됩니다. 각 위젯에는 중첩된 위젯 요소의 계층이 포함됩니다. 위젯을 클릭할 때 계속 클릭하여 하위 요소로 드릴 다운할 수 있습니다. 이렇게 하면 왼쪽 위에 선택 표시자가 나타나 현재 선택된 요소의 이름을 표시합니다.

예를 들어, 처음에 위젯을 클릭하면 위젯 자체가 선택됩니다. 다시 클릭하면 컨테이너를 선택하게 되고 다시 클릭하면 컨테이너 안의 다음 프레임을 선택하게 됩니다. 선택한 하위 요소에서 다시 뒤로 나오려면 Esc 키를 누릅니다. 위젯 영역 바깥쪽 페이지를 클릭하여 모두 선택 취소할 수도 있습니다.

전체 위젯이 선택된 경우 위치를 조정할 수 있습니다. 변형 핸들을 드래그하여 전체 위젯의 크기를 확대하거나 조정할 수도 있습니다. 채우기 및 획 색상을 설정하고 스타일을 적용하여 전체 위젯의 모양을 꾸밀 수 있습니다.

위젯 구성 및 사용자 정의

위젯을 구성하려면 [옵션] 패널에서 설정을 업데이트합니다. [옵션] 패널은 변경 내용을 적용하여 해당 위젯에 고유한 설정을 업데이트할 수 있는 컨텍스트 패널입니다. 일부 위젯은 다른 위젯보다 더 많은 옵션이 있지만, 항상 이 [옵션] 패널을 사용하여 위젯이 어떻게 동작하고 컨텐트가 어떻게 표시되는지 제어할 수 있습니다.

컨테이너 요소가 선택되면 채우기 및 획 옵션을 설정하여 모양을 업데이트할 수 있습니다. 텍스트가 선택된 경우 [텍스트] 패널 또는 [컨트롤] 패널의 텍스트 옵션을 사용하여 텍스트의 스타일을 지정할 수 있습니다. 때로는 위젯의 텍스트 레이블을 편집하기도 합니다(수동 메뉴 입력을 사용하도록 메뉴 위젯을 설정하지 않더라도 페이지 이름은 이미 사이트 맵의 페이지를 기준으로 설정되어 있습니다).

1. 페이지의 바닥글 섹션에 있는 메뉴 위젯을 클릭하면 선택 표시자에 메뉴라는 단어가 표시됩니다. 파란색 화살표 단추를 클릭하여 [옵션] 패널에 액세스합니다(그림 21 참조).

 

이 예의 경우 그림 22에 나온 대로 다음 기본 옵션이 설정되어 있는지 확인하십시오.

- 메뉴 유형: 최상위 페이지

- 방향: 가로

- 함께 편집: 사용

- 항목 크기: 균일 크기

- 왼쪽 아이콘 표시: 사용 안 함

- 레이블 표시: 사용

- 오른쪽 아이콘 표시: 하위 메뉴만

- 파트 위치 지정: 가로; 가운데 정렬

 

그림 22. 기본 설정을 사용하여 가로 메뉴 위젯을 구성합니다. 

[옵션] 메뉴 설정을 사용하여 메뉴가 어떻게 동작할지 구성할 수 있습니다.

2. 페이지의 다른 곳을 클릭하여 [옵션] 메뉴를 닫습니다.

이제 메뉴의 단추 모양을 편집하는 방법과 사이트의 디자인에 맞게 텍스트 서식을 지정하는 방법에 대해 배웁니다.

단추 상태 이해

1. [파일] > [브라우저에서 사이트 미리 보기]를 선택합니다. 이 옵션을 사용하여 사이트의 모든 페이지를 미리 볼 수 있습니다.

2. 기본적으로 나타나는 메뉴 위젯을 테스트합니다. 페이지가 처음에 로드될 때 메뉴의 단추를 살펴봅니다(이 상태를 표준 상태라고 함). 커서를 단추 위로 가져가면 롤오버 상태가 나타나는지 테스트합니다. 단추를 클릭하면 해당 페이지가 로드되고 단추가 기본 활성 상태인 어두운 회색으로 표시됩니다. 이 활성 상태는 방문자가 사이트를 이동할 때 현재 선택된 페이지를 나타내므로 안내하는 데 도움이 됩니다.

참고: 마우스 단추를 클릭한 상태로 유지할 경우 방문자가 커서를 단추 위로 가져갈 때 마우스를 누르면 사용자 정의 모양을 표시하는 마우스 누름이라는 추가 상태가 있습니다.

이제 단추의 상태를 편집하는 방법을 살펴보겠습니다.

1. 브라우저를 닫고 Muse로 돌아옵니다.

2. 위젯을 한 번 클릭하여 전체 메뉴를 선택합니다. 음식 단추를 다시 한 번 클릭하여 음식 메뉴 항목을 선택합니다(그림 23 참조). 실수로 세 번 클릭하고 선택 표시기에 레이블이라는 단어가 나타날 경우 Esc 키를 한 번 눌러 계층의 한 수준 위로 이동하면 메뉴 항목이라는 단어가 표시됩니다.

 

그림 23. 두 번 클릭하여 위젯 계층 내에서 음식 메뉴 항목을 선택합니다. 

 

[옵션] 패널에서 [함께 편집] 옵션이 설정되어 있으므로 이 음식 메뉴 항목의 모양에 대한 모든 변경 내용은 가로 메뉴 위젯의 나머지 단추에 모두 적용됩니다. 이 경우 편집이 더욱 빨라집니다. 디자인에 따라 각 단추에 서로 다른 스타일을 적용해야 하는 경우가 아니라면 [함께 편집] 옵션의 기본 설정을 사용으로 두십시오.

3. 탭을 선택하거나 [창] > [상태]를 선택하여 [상태] 패널을 엽니다.

이 패널을 사용하여 방문자의 커서 작업에 따라 단추의 그래픽이 표시되는 다양한 방식을 편집할 수 있습니다. 각 상태의 모양을 정의하는 여러 회색 상자가 있습니다(그림 24 참조).

 

 

사이트를 미리 볼 때 표준 상태는 페이지가 처음 로드될 때 방문자의 커서가 메뉴와 상호 작용하지 않을 경우 메뉴가 보이는 방식을 나타낸다는 것을 확인했습니다. 방문자가 커서를 단추 위로 가져갈 경우 롤오버 상태에 적용된 스타일이 표시됩니다. 방문자가 단추를 누르고 있을 경우 마우스 누름에 적용된 스타일이 표시됩니다. 마지막으로 방문자가 사이트의 현재 페이지에 있을 경우(예를 들어, 정보 메뉴 항목을 클릭하고 정보 페이지를 보고 있는 경우) 단추는 활성 상태에 스타일을 지정한 방식으로 나타납니다. 이 마지막 상태는 선택 사항이지만, 방문자가 현재 보고 있는 페이지가 무엇인지 한 눈에 알 수 있으므로 경우에 따라 도움이 됩니다.

4. [상태] 패널에서 목록의 각 항목(표준, 롤오버, 마우스 누름 및 활성 상태)을 클릭합니다. 패널에서 각 상태를 클릭할 때마다 페이지의 메뉴 위젯이 업데이트되어 상태의 기본 모양이 표시됩니다.

5. 표준 상태를 다시 클릭합니다. 음식 메뉴 항목이 선택된 상태에서 채우기 색상 칩을 사용하여 완전히 다른 색(예: 빨간색)을 선택합니다. 다른 채우기 색상을 설정할 경우 [함께 편집] 옵션이 설정되어 있으므로 모든 메뉴 항목의 표준 상태가 업데이트됩니다(그림 25 참조).

 

그림 25. 하나의 단추 상태에 대한 채우기 색상을 업데이트할 경우 [함께 편집] 옵션이 설정되어 있으므로 나머지도 자동으로 업데이트됩니다. 

 

6. [파일] > [브라우저에서 사이트 미리 보기]를 다시 선택하고 단추의 표준 상태를 사용자 정의했는지 확인합니다. 메뉴가 처음 로드될 때 현재 페이지를 설명하는 하나를 제외한 모든 단추가 이제 빨간색입니다. 각 단추 위로 커서를 가져가면 기본 회색 롤오버 색상이 표시되어 롤오버 효과를 만듭니다.

7. 이 예의 경우 [상태] 패널에서 각 상태를 선택(또는 [컨트롤] 패널의 선택 표시기 옆에 있는 [상태] 메뉴를 사용하여 각 상태를 선택)하고 채우기 색상을 없음(빨간색 대각선이 있는 흰색 칩)으로 설정합니다. 이 설정은 보기에서 배경 메뉴 항목 단추를 효과적으로 제거하여 메뉴 단추가 투명해지고 배경 디자인이 보이게 됩니다.

이 설명서 작성 당시 가로 메뉴 위젯의 바깥쪽 컨테이너는 기본적으로 투명입니다. 하지만 원할 경우, 채우기 색상 피커를 사용하여 메뉴 항목 단추 컨테이너와 마찬가지로 채우기 색상을 설정할 수 있습니다. 나중에 사용자 자신의 상태를 만들 때 전체 위젯에 대한 채우기 색상을 테스트한 다음 단추 컨테이너에 대해 다른 채우기 색상을 설정할 수 있습니다. 또한 배경 이미지를 추가하여 단추를 디자인할 수도 있습니다.

가로 메뉴 위젯에서 상태를 편집했으므로 이제 유사한 편집 프로세스를 사용하여 각 메뉴 항목 내부의 텍스트 모양을 업데이트하는 방법을 살펴보겠습니다.

메뉴 위젯의 레이블 편집

여기에서는 각 메뉴 항목에서 페이지 이름을 표시하는 텍스트 레이블을 편집하는 방법을 살펴보겠습니다. 이 가로 메뉴 위젯은 바닥글에 있으므로 모든 상태에 대해 동일한 글꼴 서식 지정을 사용하는 단순한 텍스트 링크의 매우 기본적인 디자인을 사용합니다.

1. 페이지가 선택된 상태에서 위젯을 한 번 클릭하면 선택 표시기에 메뉴라는 단어가 표시됩니다. 음식 단추를 클릭하여 음식 메뉴 항목을 선택합니다. 선택 표시기에 메뉴 항목이라는 단어가 표시됩니다. 음식이라는 단어를 다시 한 번 클릭하여 레이블(음식이라는 단어가 포함된 위젯의 일부)을 선택합니다. 선택 표시기에 레이블이라는 단어가 표시됩니다.

2. [상태] 패널에서 표준 상태가 선택되었는지 확인합니다.

3. 탭을 선택하거나 [창] > [텍스트]를 선택하여 [텍스트] 패널을 엽니다.

4. 선택한 레이블에 대해 [텍스트] 패널에서 다음과 같은 옵션을 선택하여 텍스트 서식을 지정합니다(그림 26) 참조).

- 글꼴: Droid Serif

- 글꼴 스타일: 이탤릭체

- 글꼴 크기: 15

- 글꼴 색상: #EEE5C4

 

그림 26. [텍스트] 패널에서 옵션을 설정하여 메뉴 레이블의 모양을 업데이트합니다. 

참고: Droid Serif는 [글꼴] 메뉴에서 [웹 글꼴 추가]를 선택하여 다운로드할 수 있는 웹 글꼴입니다. 하지만 원할 경우 다른 웹 안전 글꼴이나 컴퓨터에 설치된 시스템 글꼴을 사용하도록 선택할 수도 있습니다. 웹 글꼴 작업에 대한 자세한 내용은 Muse와 타이포그래피: 웹 글꼴, 웹 안전 글꼴 및 시스템 글꼴 사용을 참조하십시오.

텍스트 서식 지정 변경 작업을 수행한 후 모든 레이블이 업데이트되어 동일한 글꼴 스타일을 사용하게 됩니다. 이것은 [옵션] 패널에서 [함께 편집]이 설정되어 있기 때문입니다. 각 메뉴 항목에 대해 서로 다른 글꼴 서식을 가지도록 메뉴를 만들려는 경우 언제든지 [함께 편집] 옵션을 사용 안 함으로 설정할 수 있습니다.

시각적 일관성을 위해 사이트 디자인에서 전체적으로 이 글꼴 스타일을 사용하게 됩니다. 다음 섹션에서는 사이트의 다른 텍스트에도 동일한 서식을 쉽게 다시 적용할 수 있도록 특성을 단락 스타일로 저장하는 방법을 살펴봅니다.

단락 스타일 만들기 및 적용

1. 탭을 선택하거나 [창] > [단락 스타일]을 선택하여 [단락 스타일] 패널을 엽니다.

2. 패널의 아래쪽에 있는 [새 스타일] 단추(페이지 아이콘)를 클릭하여 이 글꼴 스타일 모음을 저장합니다. 스타일 모음을 저장하면 나중에 다른 텍스트 요소에 적용할 수 있습니다.

3. 방금 [단락 스타일] 패널에서 만든 기본 이름의 단락 스타일인 새 스타일을 두 번 클릭합니다. 이름을 top-nav-normal로 바꿉니다(그림 27 참조).

 

그림 27. [새 스타일](페이지 아이콘)을 클릭하여 새 단락 스타일을 추가한 다음 새 스타일을 두 번 클릭하고 이해하기 쉬운 이름을 입력합니다. 

참고: 

[단락 스타일] 패널에서 스타일의 이름을 마우스 오른쪽 단추로 클릭(또는 Control-클릭)하면 스타일을 복제, 삭제 또는 링크 해제할 수 있는 메뉴가 나타납니다. 메뉴에서 [스타일 옵션]을 선택할 경우 자동으로 스타일을 사용하는 Paragraph 태그(p, h1, h2, h3 등)를 선택할 수 있는 새 창이 나타납니다(그림 28 참조). [스타일 옵션]을 연 후 닫으려면 [취소]를 클릭합니다.

 

그림 28. 스타일 옵션 창에는 특정 HTML 태그에 스타일을 적용할 수 있는 기능이 포함되어 있습니다. 

[상태] 패널을 보면 모든 상태(표준, 롤오버, 마우스 누름 및 활성)가 메뉴 항목 레이블에 대해 동일한 글꼴 서식을 사용한다는 것을 알 수 있습니다.

4. 브라우저에 나타나는 대로 Muse에서 렌더링되는 페이지를 보려면 [미리 보기]를 클릭합니다. Muse에서는 많은 최신 웹 브라우저에서 사용되는 Webkit 버전을 사용하여 페이지를 표시합니다. 메뉴와 상호 작용할 때 단추가 해당 레이블만 표시한다는 것을 알 수 있습니다(메뉴 항목 컨테이너는 투명). 또한 커서를 가져가거나 메뉴의 단추를 클릭해도 레이블이 변경되지 않습니다.

5. 테스트 및 메뉴 미리 보기를 마쳤으면 [디자인]을 클릭하여 Main 마스터 페이지로 돌아갑니다.

페이지 요소를 바닥글 항목으로 설정

Main 마스터에서 탐색 컨텐트가 완성되었지만 마지막 하나의 작업이 남아 있습니다. 페이지 및 마스터 페이지를 디자인할 때 바닥글 영역의 요소가 바닥글 항목으로 설정되었는지 확인하는 것이 좋습니다. 이 작업은 바닥글 항목이 항상 각 페이지의 고유 페이지 컨텐트 아래에 표시되도록 합니다. 다음 단계를 따르십시오.

1. [플랜]을 클릭하여 플랜 보기로 돌아옵니다. A-마스터 페이지 축소판을 두 번 클릭하여 [디자인] 보기에서 편집합니다.

2. 선택 도구를 사용하여 바둑판식 배경 및 Muse에서 만든 이미지가 있는 사각형을 선택합니다. 바닥글의 항목을 클릭하고 드래그하여 선택하거나 Shift 키를 누른 상태에서 선택할 각 항목을 클릭합니다.

3. 페이지의 항목을 마우스 오른쪽 단추로 클릭하고 나타나는 메뉴의 마지막 항목인 바닥글 항목에 확인 표시가 있는지 확인합니다. 또는 [컨트롤] 패널에서 바닥글 확인란이 선택되어 있는지 확인합니다. 이러한 각 설정은 선택한 항목이 바닥글에 표시되도록 설정되어 있음을 나타냅니다(그림 29 참조).

 

4. Main 마스터 페이지의 탭을 클릭하여 [디자인] 보기에서 활성화합니다. 또는 Main 마스터 페이지를 닫은 경우 Main 마스터 페이지 축소판을 두 번 클릭하여 [디자인] 보기에서 편집합니다.

5. [선택] 도구를 사용하여 메뉴 위젯을 선택합니다. 한 번만 클릭하여 전체 메뉴 위젯이 선택되고 선택 표시기에 메뉴라는 단어가 표시되도록 합니다. 두 번 클릭하고 실수로 메뉴 항목을 선택한 경우 Esc 키를 한 번 눌러 뒤로 이동하고 메뉴 자체를 선택합니다.

6. [메뉴] 위젯을 마우스 오른쪽 단추로 클릭하고 메뉴가 바닥글 항목으로 설정되어 있고 바닥글에 표시되는지 확인합니다.

7. [파일] > [사이트 저장]을 선택하여 지금까지 변경한 내용을 저장합니다.

다음 자습서인 Muse를 사용하여 첫 웹 사이트 만들기 3부에서는 사이트에 대한 머리글 컨텐츠를 추가합니다. 위젯(페이지로 드래그할 수 있는 미리 만들어진 사이트 대화형 사이트 기능) 작업을 계속하며 마스터 페이지의 요소가 개별 페이지에 추가된 요소 위에 표시되도록 설정하는 방법도 배웁니다.

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