Adobe Muse Manual Korean by Kyung-soo Han

Contents 2

What is the Muse ?

…………………………………..

Install

…………………………………..

Muse’s Features

…………………………………..

- Plan your site

- Design with freedom

- Add rich interactivity

What is the MUSE? 4

• MUSE는 웹사이트를 제작하는 Adobe사의 드림위버나, 나모 웹에디터와 같은 웹 에디터 종류 중 하나입니다.

• 하나 다른 것이 있다면, 화면에는 포토샵과 같은 큰 캔버스가 주어지며, 그 캔버스에 제작할 사이트에 표시할 내용들을 배치하도록 되어 있습니다. 단지, 마우스로 도구를 클릭하고, 보여주고 싶은 것을 가져와 원하는 곳에 놓기만 하면 됩니다.

• Adobe의 Photoshop, Illustrator 등의 PSD파일을 지원해 직접 제작한 디자인을 포맷변환을 거칠 필요 없이, MUSE에서 바로 사용하기만 하면 됩니다. 웹사이트를 꾸미는 데에 시간이 매우 절약됩니다.

• 자동으로 사이트맵을 생성하거나, 보여주고 싶은 이미지를 골라 이미지 슬라이드쇼를 만들 수 있습니다. 특히, 이 슬라이드쇼는 이미지를 단순하게 넘기는 것이 아닌, 자연스러운 이미지 전환 기술을 사용해 사용자가 생각한 것 보다 더 고급스러운 연출을 할 수 있습니다.

Install 6 • Muse의 기능이 생각보다 많기 때문에, 먼저 설치를 진행하고, 하나씩 기능을 살펴보도록 하겠습니다.

• 직접 설명하기에 앞서, 이 매뉴얼은 직접 작성하고, 베누시안님의 MUSE 소개 및 기능 정보를 참고하여 제작하였습니다.

• 베누시안님께서 작성한 내용을 보시려면 아래의 링크를 클릭 하시기 바랍니다. –

베누시안 : http://martian36.tistory.com/

Install 7

• 먼저 MUSE 사이트(http://muse.adobe.com)에 접속을 합니다.

• MUSE의 사이트도 소개할 프로그램인 MUSE를 사용해 제작되었다는 표시를 보실 수 있습니다.

• 다시 상단으로 이동하여 ‘Get Muse’를 클릭합니다.

• 다음과 같은 화면이 나타나면 [열기]를 누르거나 [저장]을 누릅니다. • 여기에서는 [열기]를 누르도록 하겠습니다.

Install 9

• 다음과 같은 화면이 나타나면, [설치]를 누릅니다.

• 설치 정보를 확인 한 뒤 [계속]을 누릅니다.

• 설치가 완료되면 [완료]를 클릭합니다.

• 설치가 다른 Adobe 프로그램들에 비해 가볍고, 빠릅니다. • Mac OS X를 사용하는 분들은 Google의 Chrome을 사용해 설치할 것을 권장합니다.

MUSE’s Features 12 • 설치한 MUSE를 통해 이 프로그램의 기능을 하나씩 살펴보도록 하겠습니다. • MUSE에서는 크게 네 가지로 기능을 분류해 놓았습니다. - Plan your Site - Add rich interactivity - Design with freedom - Publish your site • 이 네 가지의 기능을 한글로 풀어보면 다음과 같습니다. – 제작할 사이트의 웹 페이지 수를 계획 – 자유로운 디자인 – 다양한 복합 기술 – 사이트 출판 • 이제 대충 어떤 기능을 하고 있는지 좀 보이시나요? • 사이트 출판을 제외한 나머지에 대해 세부적인 내용을 순서대로 진행할 예정입니다. • 사이트 출판은 http://muse.adobe.com을 참조하시기 바랍니다. (보시면 아시겠지만, 별거 없습니다. 참, 쉽습니다.) • 직접 사이트를 제작하는 방법으로 각 기능과 사용방법을 설명 드리도록 할 것입니다. 모양새가 나지 않더라도 감안하시고, 사용하시는 분들에게 자그마한 도움이 되었으면 합니다.

Plan your site (웹사이트 계획)

Plan your site 15

• MUSE를 실행하면 다음과 같은 화면이 나옵니다. • 간단히 하나를 만들어 봅시다. [File] -> [New Site]를 누릅니다.

• 여기에서 페이지의 넓이와 높이, 그리고 여백 등을 설정합니다. • 당장 웹 페이지를 만들지 않을 것이므로 그냥 OK를 누릅니다.

• MUSE 창으로 돌아오면 다음과 같은 화면을 볼 수 있습니다. • 이 화면은 웹페이지의 구조를 어떤 방식으로 구성할지 정하는 [Plan – 2번]영역입니다. 툴바에 [Plan – 1번]이 선택되어 있는 걸 보실 수 있습니다. • 자신이 제작할 웹페이지의 구조를 하나의 다이어그램 형태로 보여 줌으로써 조금 더 체계적인 웹사이트 설계가 가능합니다. • 아래의 [Masters – 3번]영역은 [PowerPoint]의 슬라이드 마스터와 같은 역할을 합니다. 이곳에서 메인 디자인을 정해 놓으면, 이 마스터를 사용한 웹페이지의 기본 디자인을 따라가는 형태입니다. 마스터의 디자인이 변경되면, 이것을 사용한 웹 페이지의 디자인도 변경됩니다. 이 부분은 나중에 한 번더 살펴 보도록 하겠습니다.

• 지금은 [Home]화면을 가지고 간단하게 웹 페이지를 제작해 보도록 하겠습니다. 2번 영역 안에 [Home]이라 쓰인 곳을 더블 클릭합니다.

Plan your site 17

• Photoshop이나 Illustrator와 같은 하얀색 작업영역이 나타납니다. • 이곳에 자신의 취향에 맞게 웹사이트를 제작하면 됩니다.

• 저는 다음과 같이 웹페이지 화면을 제작해 보았습니다.

(툴바버튼들의 역할에 대해서는 [Design with freedom]에서 살펴보겠습니다.)

• 제작한 웹사이트를 먼저 미리보고 싶다면 툴바의 [Preview]를 클릭해 확인해 볼 수 있습니다.

• 작성한 웹 페이지를 미리보고 있는 [Preview] 화면입니다. • 현재 작업 중인 페이지를 모두 점검해볼 수 있습니다. • 물론 툴바의 [Publish]나 메뉴의 [File] -> [Export HTML]을 통해 웹 페이지를 저장, 익스플로러나 크롬 등의 웹 브라우저로도 확인 할 수 있습니다.

• 다음은 Masters 영역을 알아보도록 하겠습니다.

Plan your site 19

• 다시 [Plan – 1번] 영역으로 돌아갑니다. • 사이트 다이어그램에 보시면(2번) [Home] 아래에 [A-Master]가 쓰인 것을 보실 수 있습니다. • 이 [A-Master]는 Masters의 [A-Master]를 사용하고 있다는 것입니다. • 만약 [A-Master]가 아닌 다른 이름, 예를 들면 [Master_01]이라면 [Master_01]이라는 이름으로 기록이 될 것입니다.

• 아래의 [Masters – 3번] 영역의 [A-Master]를 더블 클릭합니다.

• Master를 수정하는 화면입니다. 이 화면도 웹사이트를 만드는 화면과 크게 다르지 않습니다. 다만 중앙 영역에는 웹페이지의 내용이 담기기 때문에 되도록 외곽 쪽을 중점으로 디자인 하시길 권장합니다. • 필자는 다음과 같이 디자인을 해봤습니다.

Plan your site 21

• Masters 편집을 마치고 다시 [Home] 화면 편집화면으로 돌아옵니다. • Masters에서 편집한 내용이 그대로 적용이 되어 나타납니다. • 이렇게, 마스터를 지정해 놓으면 페이지 하나하나 디자인을 만들지 않아도 되고, 페이지에 해당하는 내용만 넣어주면 됩니다. • 실제 웹 페이지에서 나타나는 화면을 보고 싶다면 [Preview]로 이동하여 제대로 출력되는지 확인합니다.

• 새 페이지를 추가하고, 페이지의 속성을 변경해 보도록 합시다. [Plan]영역 -> [Home] 페이지에 마우스를 올리면 양 옆, 하단에 [+] 버튼이 생깁니다. 오른쪽의 [+] 버튼을 눌러 페이지를 추가합니다.

• 새 페이지를 추가하고 이름을 변경합니다. • 필자는 이 새로운 페이지의 이름을 [About]으로 지정했습니다.

Plan your site 23

• 새로 만든 [About] 페이지에서 오른쪽 버튼을 누른 뒤, [Page Properties…]를 선택합니다.

• [Page Properties]화면입니다. • 앞에서도 설명 드렸습니다만, 페이지의 기본 속성을 설정하는 영역 입니다.

• [1]은 페이지의 넓이(Width), 높이(Height)를 지정합니다. 그 아래의 체크 박스는 페이지를 가운데로 고정시킬 것인지 설정하는 곳 입니다. Column은 페이지를 분할합니다. 표의 열과 같은 역할을 합니다. Column Width는 분할된 영역의 넓이를, Gutter는 분할된 영역 사이 여백의 넓이를 조절합니다. • [2]는 내용이 채워지는 영역에 여백을 설정합니다. 체인을 걸면 모두 같은 값이 적용되고, 체인을 풀면 각 영역별로 여백을 설정할 수 있습니다. • [3]은 페이지 자체에 여백을 줍니다. • [4]의 Favicon Image는 즐겨찾기나 웹 브라우저 접속 시 페이지 내 아이콘을 설정합니다. 이 아이콘의 이미지는 반드시 정사각형의 형태로 제작된 이미지만 삽입이 가능합니다.

MUSE’s Features 25

[모든 페이지를 네비게이션에 포함시킨 경우의 메뉴]

• [4]의 Navigation Options는 페이지 내의 페이지 메뉴를 표시하는 데에 사용합니다.

[About 페이지를 네비게이션에서 제외한 경우의 메뉴]

• Include page in navigation은 이 페이지를 웹 페이지 메뉴에 포함할 것인지를 설정합니다. 체크를 해제하면 메뉴에 해당 페이지가 표시 되지 않습니다.

• Export Page는 페이지를 내보낼 것인지를 묻습니다. 추후 [File] -> [Export as HTML]을 사용할 때 체크가 해제된 페이지는 HTML 파일이 생성되지 않습니다.

Design with Freedom (자유로운 디자인)

Design with freedom 27 • 이제 디자인을 한글로 해석한 기능과 툴바가 알아가 보도록

작업하는 단계입니다. 먼저 메뉴가 어떤 것이 있는지, 이미지를 먼저 살펴보도록 하겠습니다. 그 뒤에, 각 어떤 기능을 하는지 직접 기능들을 사용해 보면서 하겠습니다.

• 메뉴의 [File]입니다. 사이트를 만들거나, 기존에 뮤즈에서 작업했던 사이트 프로젝트를 불러오고, 저장하거나, PSD파일을 불러오는 등 파일과 직접적인 관련이 있는 메뉴들이 모여있습니다. • 제가 보기엔 [Preview Page…] 나 [Preview Site]가 [View]메뉴로 옮겨 가야 할 것 같습니다만…. 이유가 있으니 여기에 발라 놓았겠죠?

• [Edit]는 편집에 주로 사용하는 메뉴를 모아놓았습니다. • 같은 내용을 복사하거나, 잘못된 곳을 잘라내어 붙이는 경우 등 주로 사이트의 내용부분에 들어가는 곳을 수정할 때 사용하는 메뉴들입니다. • [Edit]와 유사한 메뉴들이 보이기 때문에 대충 어느 메뉴가 어떤 역할을 할 것인지 짐작이 가실 겁니다.

• 여기에서 가장 신선한 메뉴는 [Change Case]입니다. 소문자나, 대문자로 모두 변경해야 할 경우, 어렵진 않지만 같은 단어를 단지 소문자나 대문자로 변경해 작성해야 하기 때문에 작업은 같은데 투자되는 시간이 늘어납니다. 뮤즈는 텍스트를 대/소문자로 변경 해주는 기능이 포함되어 있어, 작업 시간을 꽤 단축시켜줄 수 있습니다. 이건 정말 좋은 기능인 것 같습니다.

Design with freedom 29

• [Page] 메뉴는 페이지나 마스터 페이지를 생성하고, 페이지의 속성을 정의하는 메뉴로 구성되어 있습니다.

• [Object] 메뉴는 페이지를 제작하면서 사용되는 각 요소들을 컨트롤 하는 기능으로 구성되어 있습니다. • 크게 배치하기 / 요소들 묶고 고정하기 / 새 요소 삽입하기 등 3가지로 나뉘어져 있습니다.

• [Object]의 세부 메뉴들을 펼쳐 놓아 보았습니다.

• Fitting은 선택된 요소(특히 Slideshow 같은) 내의 컴포넌트 들을 어느 기준으로 맞출 것인지 정하는 것입니다. 만약 Slideshow내의 그림을 보여주는 영역에 빈 회색 공간이 보이는 것이 싫다면 전체 프레임에 맞춤을, 그렇지 않고 딱 정해진 영역 안에 그림을 그대로 보여주고 싶다면 내용 영역에 맞춤을 선택합니다. • 나머지는 웹 페이지에 추가할 컴포넌트 들입니다.

Design with freedom 31

• [Insert Composition]은 정해진 형식을 가져다 쓰는 것입니다. • [Tooltip / 왼쪽 1번째]은 마우스를 가져다대면 말풍선이 나타나, 무언가를 설명할 때에 사용하기 좋은 형식입니다. • [LightBox Display]는 간단히 무언가를 설명하거나 보여줄 때, 혹은 내용이 주어진 영역보다 작을 때 새로운 화면을 띄워 보여줍니다.

• [Presentation]은 PowerPoint처럼 프레젠테이션 형식을 사용합니다. 특히 한 화면에 제품을 설명하고자 한다면, 이것만큼 좋은 형식은 없을 겁니다. • [Newspaper]는 신문형태로 소개하는 형식입니다. 하나의 페이지에 여러 제품을 소개하거나, 간단히 조그맣게 제품 이미지와 정보를 넣고 싶다면 추천할 만한 형식입니다. • 각 형식은 각각의 장단점이 있습니다. 어떤 형식을 가져와야 하는지 잘 판단하시고 사용하셔야 합니다.

• [Insert Menu]는 현재 사이트의 메뉴, 즉 각 페이지로 이동할 수 있는 버튼의 집합입니다. • [Page Properties]의 [Navigation Option]에 따라 메뉴에 추가 되거나, 그렇지 않은 경우가 있으며, 사용자가 직접 메뉴를 제작할 수도 있습니다.

• [Panel]은 일정 영역에 내용을 입력하는 형식으로 클릭해 영역을 올리거나 내리는 [Accordion] 형식, 탭을 누르거나 마우스를 올려 내용을 표시하는 [Tabbed Panels] 형식이 있습니다.

Design with freedom 33

• [Insert Composition]은 정해진 형식을 가져다 쓰는 것입니다. • [Tooltip / 왼쪽 1번째]은 마우스를 가져다 대면 말풍선이 나타나, 무언가를 설명할 때에 사용하기 좋은 형식입니다. • [LightBox Display]는 간단히 무언가를 설명하거나 보여줄 때, 혹은 내용이 주어진 영역보다 작을 때 새로운 화면을 띄워 보여줍니다.

• [Presentation]은 PowerPoint 등의 프레젠테이션 형식을 사용합니다. 특히 한 화면에 제품을 설명하고자 한다면, 이것만큼 좋은 형식은 없을 겁니다. • [Newspaper]는 신문형태로 소개하는 형식입니다. 하나의 페이지에 여러 제품을 소개하거나, 간단히 조그맣게 제품 이미지와 정보를 넣고 싶다면 추천할 만한 형식입니다. • 각 형식은 각각의 장단점이 있습니다. 어떤 형식을 가져와야 하는지 잘 판단하시고 사용하셔야 합니다.

• [Insert Slideshow]는 여러장의 이미지를 여러 형태로 보여줍니다. • [Basic]은 기본 형태로 이미지를 표시하는 영역과 이동버튼, 캡션이 있습니다. • [LightBox]는 자그마한 이미지를 배치하고 해당하는 이미지를 눌렀을 때 화면 전체를 가리고 이미지를 표시하는 방식입니다. 아래의 그림과 같이 이미지가 표시되고, 아래에 캡션을 표시하고, 양 옆으로 이동하는 버튼이 있습니다.

• [Blank]는 [Basic]형식을 가져오지만 샘플 이미지가 제외된 형태로 제공됩니다. • [Thumbnails]는 [Basic]형식에 표시할 이미지를 미리 볼 수 있도록 조그마한 이미지 형태로 모아놓은 형태입니다.

Design with freedom 35

• [View]는 작업영역에 대한 컨트롤을 하는 부분입니다.

• [Window]는 도구 패널을 컨트롤 합니다. • 도구 패널에 있는 각 패널 요소들이 이 [Window] 메뉴에 포함되어 있습니다.

• [Help]는 MUSE 프로그램에 대한 정보를 표시하거나, 도움말을 표시하고, MUSE에 대한 피드백 커뮤니티나 Muse를 사용하는데 도움이 되는 프로그램을 표시하는 웹 사이트로 이동합니다.

Design with freedom 37

• MUSE는 Adobe사의 다른 제품들과 같은 유사한 구조로 이루어져 있습니다. • 포토샵을 써 보신 분들이라면, 손 쉽게 편집이 가능할 정도입니다.

• 각 요소들의 크기를 줄이거나 늘릴 때, 가이드라인에 자동으로 맟줘 주거나, 각 영역의 중앙을 찾아 맞춰 주는 등 많은 부분이 Adobe의 제품들과 닮았습니다.

• Adobe의 모든 그래픽 디자인 프로그램에 포힘된 이 기능을 활용해 정교하고 깔끔한 웹 사이트를 제작할 수 있습니다.

• [Page Properties]에서 페이지의 Width와 Height을 설정했었던 화면을 기억하시는지요(p. 24). • 지금 빨간색으로 표시된 부분이 Height을 준 영역의 시작/끝 위치 입니다.

• Min Height은 최소한의 높이를 설정하는 것으로, 내용이 없거나, 부족한 경우 설정한 높이로 고정됩니다. 만약 내용이 많아 이 높이 에 넣을 수 없다면, 그냥 아래에 추가하시면 됩니다. 자동으로 빨간 색 사이의 영역이 늘어납니다.

Design with freedom 39

• Adobe 프로그램들의 공통점은, 자사의 그래픽 작업 파일(PSD 등)을 다른 프로그램에서도 사용할 수 있다는 특징이 있습니다. • [File] -> [Place]를 통해 PSD, PNG파일을 불러올 수 있습니다. • PSD내의 레이어를 볼 수 있고, 합쳐진 이미지를 가져오거나, 레이어 하나를 가져와 사용할 수 있습니다.

• [Place Photoshop Button]은 PSD파일을 불러와 사용자가 제작한 버튼의 기본 / 롤 오버 / 다운 / 페이지 활성화 레이어를 선택할 수 있습니다.

• [Assets]는 제작하고 있는 사이트에 사용된 이미지나, 동영상, 소리 등의 리소스들을 관리하는 패널입니다. 리소스들의 수정이 필요할 때, [Assets]의 Edit Original의 메뉴를 사용, Photoshop을 실행하고, 수정합니다. 수정한 뒤에 다시 파일을 불러와 적용하는 것이 아닌, MUSE가 직접 수정된 이미지를 가져올 것인지 묻습니다.

• 수정된 이미지를 적용하겠다고 선택하면 오른쪽 그림과 같이 변경된 이미지가 표시된 것을 확인할 수 있습니다.

Design with freedom 41

• MUSE는 Font Type을 Web Safe Font와 System Font로 구분하고 있습니다. • Web Safe Font는 웹에서 대부분 표준으로 사용하는 Font를, System Font는 사용자의 컴퓨터에 설치된 Font로 나누어 놓았습니다.

• Web Safe Font로 분류된 Font는 웹페이지에서 텍스트 형태를 유지 하고 있어, 자유롭게 원하는 부분의 텍스트를 선택할 수 있습니다. • System Font로 분류된 Font는 텍스트 형태가 아닌 PNG와 같은 이미지 형태의 파일로 저장되어 표시되므로, 웹 페이지를 이용하는 유저들이 적용한 Font로 표시될 수 있게 합니다.

• 툴바의 [T] 버튼(빨간색 영역)은 텍스트 상자로, 페이지 내에 글씨를 써 넣을 수 있습니다. 마스터페이지 이외의 다른 곳으로 이동해 텍스트 영역을 임의로 지정해봅니다.

• 다음과 같이 텍스트를 입력하고, Font는 ‘Arial’를 사용했습니다. • 텍스트 편집을 마치려면 마우스 포인터(빨간색) 버튼을 누릅니다. • 이 상태에서는 텍스트 영역에 어떤 표시도 나타나지 않습니다.

• 앞에서 만든 텍스트의 Font를 변경해보겠습니다. • 해당 텍스트 영역을 더블클릭 합니다. • Web Safe Font가 아닌, [System Font]영역에 있는 임의의 Font를 선택합니다

• Font 하나 바꿨을 뿐인데, 빨간색 영역의 아이콘이 표시되었습니다. • 이 아이콘은 텍스트가 모든 컴퓨터가 지원하지 않을 수 있기 때문에, PNG등의 이미지 형태로 저장하겠다는 겁니다. • 웹 디자이너와 웹 사이트 이용자를 위한 (작지만 큰)배려가 느껴집니다.

• [Pin]은 웹 페이지에 사용된 요소들을 고정시키는 역할을 합니다. 쉽게, 옷 핀이나, 못, 압정 등을 생각하시면 이해가 빠르실 겁니다. • 지금은 Accordion에 Pin을 설정해 두었습니다.

• Preview 모드에서 Accordion이 스크롤과 함께 움직이는 것을 확인 할 수 있습니다. • Pin을 줄 수 있는 곳은 상단/하단에 좌 / 중앙 / 우측에 놓을 수 있습니다. 사이트에 특성에 맞게 고정시키면 될 것 같습니다. 제가 고정해 놓은 곳은 상단/중앙입니다.

Design with freedom 45

• MUSE에는 하단 이미지를 웹페이지 전체를 차지할 수 있는 기능이 있습니다. Plan 모드로 이동 후 [A-Master]로 이동하겠습니다.

• 표시된 버튼은 페이지 내에 사각형 도구를 추가하는 버튼입니다. • 이 버튼을 선택하고 하단 부분에 사각형을 추가합니다. • 사각형에 그라데이션 효과를 삽입할 경우, 작업 패널 상단의 Fill로 이동한 다음, Gradient를 선택합니다.

• 아래 만든 사각형의 모서리를 둥글게 만들고 싶다면, 툴바의 Corners를 조정합니다. 상단/하단의 좌우를 선택할 수 있으며, 숫자를 입력해 둥글기 정도를 조절할 수 있습니다. 사이트에 맞게 모서리 둥글기를 조절합니다.

• [Footer]는 최 하단에 해당하는 요소라는 걸 구분짓는 항목입니다. 만든 사각형을 체크한 뒤 이 Footer에 체크합니다.

Design with freedom 47

• 만든 사각형을 페이지 하단에 맞춘 뒤, 양 옆을 페이지의 좌/우 끝에 맞춥니다. 가이드라인의 색상이 변경되면 페이지의 끝까지 옮겨간 것입니다. • 확인을 위해 Preview 모드로 전환합니다.

• 창의 가로 크기에 따라 사각형의 넓이가 유동적으로 변형되는 것을 확인할 수 있습니다. • MUSE는 이런 기능들을 통해 사용자가 원하는 디자인을 웹페이지에 적용할 수 있도록 많은 공을 들여 놓았다고 합니다(?).

48 • 여기까지가 MUSE 사이트에서 소개한 [Design with Freedom]의 기능을 대부분 소개해 드렸습니다. • 더 자세한 내용을 원하시거나, MUSE 사이트의 Features, Tutorial 동영상을 보고 싶으신 분들은 http://muse.adobe.com에서 관련 동영상을 시청하실 수 있습니다. • 또한 국내에 유일하게 MUSE를 설명해 주신 베누시안님의 MUSE 포스팅도 참고해 보시면 더 좋을 것 같네요. • http://martian36.tistory.com/

Design with freedom 49

Add rich interactivity (다양한 복합 기술)

Add rich interactivity 51 • MUSE에는 다양한 복합 기술을 내장해 웹 페이지의 기능과 디자인을 한꺼번에 잡았습니다. 메뉴에서 봤던 [Insert XXXXX]를 쓰는 방법에 대해 짚어볼 것입니다. 대부분 수정하는 방법은 비슷하기 때문에, 특성이 약간 다른 것들만 위주로 작성하겠습니다. 안 나온 것들은 다 여러분 몫입니다.

• 먼저 [Menu]부터 시작하겠습니다. 앞에서 잠깐 소개해 드렸듯이 이 메뉴는 웹 사이트의 전체 페이지를 접속할 수 있는 메뉴입니다 (편집 - 빨간색 영역 / p. 32를 참조하세요.). • [Page Properties]의 설정에 따라 이 메뉴(MUSE에서는 메뉴를 Navigation이라고도 하는 것 같습니다.)에 페이지 링크를 표시하거나 숨길 수 있습니다. • 그림에 있는 [About]의 메뉴(링크)를 감춰보도록 하겠습니다. • 먼저 [Plan]영역으로 이동해보겠습니다.

• About 페이지위에 마우스를 올려놓고 오른쪽 버튼을 클릭합니다. • [Page Properties]를 클릭합니다.

• [Include page in navigation]이 체크되어 있으면 메뉴에 About 페이지 링크가 표시됩니다. 이 체크를 해제합니다.

Add rich interactivity 53

• 메뉴 목록에 [About] 페이지가 제외된 것을 확인할 수 있습니다.

• 메뉴 옵션 중 전체 페이지 링크를 표시하는 All Pages, 상위 페이지의 링크만 표시하는 Top Level Pages, 사용자가 직접 정의할 수 있는 Manual이 있습니다.

• Manual로 메뉴를 지정하는 경우 메뉴 텍스트의 이름을 변경하고, 툴바의 [Hyperlink]에서 지정하고 싶은 페이지를 선택하면 됩니다. 참 쉽죠?

• 이미지를 넣고 싶다면 아래 작업 패널의 [States] 탭으로 이동한 후 이미지를 지정할 버튼의 상태를 선택합니다. • 다음 상단 작업 패널의 [Fill]로 이동해 Image의 폴더버튼을 클릭, 사용할 이미지를 지정합니다.

Add rich interactivity 55

• 이제, Google Map을 페이지 내에 포함시키는 작업을 해보겠습니다. • 간단히 웹사이트를 소개하는 페이지를 디자인해 보았습니다. 오른쪽 에 Google Map을 포함시킬 겁니다. • Google Maps로 이동해 Embed tag를 복사합니다. (태그를 가져오는 방법은 구글링을 권장합니다.)

• 메뉴의 [Object] -> [Insert HTML]을 선택하면 다음과 같은 화면이 나타납니다. • HTML Code 아래 입력 창에 복사한 embed tag를 붙여 넣습니다. • OK를 누릅니다.

• Google Maps가 포함되었습니다만, 이 HTML영역의 크기를 한 번 조절하고, 또 Google Maps Tag내의 넓이와 높이를 HTML영역에 맞게 조절해야 합니다. • 그림은 Google Maps를 적용한 웹 페이지입니다. • Google Maps 이외에 You Tube, 음악, 동영상 등도 추가할 수 있습니다.

• 적절한 용도에 맞추어 HTML 태그를 사용하면 좋을 것 같습니다.

Add rich interactivity 57

• Anchor는 페이지가 너무 길 때 클릭하면 지정한 위치로 이동하는, 페이지의 책갈피라고 생각하시면 될 것 같습니다. • 저는 다음과 같이 텍스트를 길게 복사하고, Anchor를 적용할 위치만 글자를 크게 표시했습니다.

• 낚시 바늘(?) 버튼을 누르고 이동할 위치를 클릭하면 [Create an Anchor] 화면이 나타납니다. Anchor의 이름을 적는 것이죠. • 이름(click_here)을 적고 OK를 누르면 마지막 화살표가 가리키는 것 처럼 나타납니다.

• 이제 Anchor를 적용할 대상을 선택합니다(텍스트 – Click Here). • 툴바의 Hyperlink에 Anchor 항목이 추가되며, 그 아래로 앞에서 생성한 click_here Anchor가 보입니다. 이 click_here를 선택합니다.

• Preview 모드로 이동해 제대로 작동하는지 확인합니다. • 페이지에서 Click Here를 클릭하면, 앵커로 지정했던 위치로 이동하는 것을 확인할 수 있습니다.

Add rich interactivity 59

• 다음으로 알아볼 것은 Slideshow입니다. [Insert Slideshow]메뉴를 살펴보면 Lightbox / Thumbnails / blank / basic 등 총 4가지가 있습니다. 지금 위의 그림은 Thumbnails를 적용한 화면입니다.

• 추가된 Thumbnails를 선택하면 우측상단에 파란색 원형 버튼이 생기는데요, 이 버튼을 누르면 옵션 패널이 새로 보입니다.

• 이미지를 추가하려면 [Add Images…] 옆의 폴더 그림을 클릭합니다.

• 추가한 이미지가 적용되어 화면에 나타난 모습입니다. • 편집 영역에서 샘플 이미지의 Thumbnail을 삭제하면, 표시된 샘플 이미지들이 삭제됩니다. • Thumbnails는 이미지를 5장 이내로 사용하는 것이 제일 적합하다 판단됩니다. 이 이상의 이미지는 Thumbnails만 표시하고 클릭하면 별도의 화면을 통해 표시하는 Lightbox나 Basic을 추천해 드립니다. 옵션패널은 모두 같습니다. • 페이지의 특성에 맞는 컴포넌트를 활용하시기 바랍니다.

Add rich interactivity 61

• 상단의 버튼을 누르면 해당하는 패널의 내용이 보이는 아코디언 컴포넌트를 사용해 보겠습니다. • [Object] - > [Insert Panel] -> [Accordian]을 선택해 원하는 곳에 배치합니다.

• 저는 각각의 패널에 텍스트와 이미지를 넣었습니다. 이미지는 [File] -> [Place]를 통해 넣을 수 있습니다.

• [Accordion] Panel도 디자인을 할 수 있습니다. 생성한 [Accordion] 패널을 선택하고 파란색 원형의 [▷]버튼을 누릅니다.

[옵션] - 모든 패널 닫힘 - 최초 접속 시 패널 닫힘 ---------------한꺼번에 수정하기

• 모든 패널에 같은 디자인을 적용하고 싶다면 [Edit Together]에 체크를, 그렇지 않으면 해제 합니다. • 이미지나 색상을 적용하려면 작업 패널의 [Fill]패널에서 작업을 진행하면 됩니다.

Add rich interactivity 63

• [LightBox Display]를 이용해 Google Maps를 별도의 화면에 나타내는 작업을 해보겠습니다. • 먼저 [Object] -> [Insert Composition] –> [LightBox Display]를 선택한 뒤, 원하는 곳에 배치합니다.

• [LightBox Display]추가하면 상단의 버튼 3개와, 아래 이미지가 들어있는 검정색 상자가 보입니다. • 각 구성원의 역할은 그림의 표시된 내용과 같습니다.

• 각 버튼에 따라 LightBox의 내용이 다르다면, 버튼을 누른 후 검정 색 상자 안의 내용을 바꿔주시기만 하면됩니다. • 여기서는 Google Map 하나만 표시할 것이기 때문에 LightBox 버튼을 하나만 남겨두고 나머지는 삭제했습니다. • LightBox 버튼 삭제는 삭제하고 싶은 버튼을 선택한 뒤, 마우스의 오른쪽 버튼 -> [Delete Element]를 선택하면 됩니다.

• 앞서 사용한 [Insert HTML…]을 사용해 Google Maps를 추가하고, 추가한 영역을 검정색 상자에 넣습니다.

• [Preview] Mode에서 확인하면 다음과 같습니다. • Map이라는 LightBox 버튼을 누르면 화면이 검정색으로 채워지며, Google Maps가 나타납니다. • 검정색 상자의 배경색을 다른 색으로 변경할 수도 있으며, 투명도를 조절할 수도 있습니다. • 또한 LightBox버튼도 이미지로 변경이 가능합니다. • 이 부분은 앞서 설명 드린 [Accordion]의 설정방법과 같아, 별도로 설명 드리지 않겠습니다.

CLOSE - 닫기 -

67 • MUSE는 전문적인 웹 디자이너가 아니더라도, 일반인이 손쉽게 웹 사이트/페이지를 포토샵과 거의 동등한 툴을 제공해 생성할 수 있도록 한 훌륭한 프로그램인 것 같습니다. • 아직 베타버전이긴 하지만, 아직 한글언어가 지원되지 않는 것을 보면, 한국을 포함해 다른 외국의 언어도 지원되지 않을 것이라, 추측, 다음 베타버전 업데이트나, 실제 정식 버전이 지원되면 한글 지원이 되어 있길 바라봅니다. • 여기서는 별도로 MUSE – Features의 Publish 기능을 다루진 않았습니다. 단순히 웹 사이트/페이지를 출력하는 정도의 기능이기 때문입니다. • MUSE를 한글로 설명하신 분이 많지 않고, 정보를 다양하게 제공한 사이트나 블로그도 부족합니다. 좀 많이 알려졌음 좋겠습니다. • 개인적으로 정식 출시되면 나모나, 드림위버는 [끝]날 것 같습니다.

• 매뉴얼 봐주셔서 감사합니다.