Muse.. - Muse는 Adobe에서 Beta버전으로 새로 발표한 WebSite Edit이다. 아직 정식 버전은 발표 되진 않았고, 내년 상반기에 출시 된다는 말이 있다. Adobe에서 발표한 것인 만큼 포토샵이나, 일러스트 처럼 프로그램 설계나 코드를 작성하지 않아도 손쉽게 WebSite를 만들 수 있다.

- Muse 홈페이지 : http://muse.adobe.com

- Muse 홈페이지 에서는 Muse Beta버전을 Download 받을 수 있고, 사용방법 또는 예제와 템플릿을 지원하기 때문에 처음 하는 사용자도 쉽게 따라 할 수 있게 친절히 설명이 되어있다.

1 2 3 4 5 6

- 위 그림에 표시되 있는 MenuBar에 대한 설명은 뒷장에서 볼 수 있다.

1. Features : Muse에 대한 예시로 Muse의 특징들을 알아 볼 수 있다.

2. Tech Specs : 지원 사양, 언어 등을 알아볼 수 있다.

3. FAQ : 자주 묻는 질문이 수록되어있어 필요한 정보를 찾아 볼 수 있다.

4. Pricing : 사용 가격에 대해 적혀 있다.

5. Learn : 사용 설명서, 템플릿, 시연 동영상이 있어 사용 도중 궁금한 사항이나 필요한 소스 및 파일을 Download 할 수 있다.

6. Showcase : 사이트에 있는 템플릿이나 예제로 만들어진 Website를 확인해 볼 수 있다.

자주 쓰는 사항에 대해서만 기술해 놓았다.

- 예제 및 템플릿 Download : http://muse.adobe.com/tutorials.html

- 시연 동영상 : http://muse.adobe.com/videos.html

Muse을 다운 받는 곳은 쉽게 찾을 수 있다. 어느 페이지를 가도 적색 상자로 표시된 Get Muse 라는 노란색 박스를 누르면 Download와 설치를 한번에 할 수 있다.

그림 1-1

그림 1-2

그림 1-3

1. Get Muse를 누르면 그림 1-1과 같은 화면이 나올 것이다. 설치파일을 저장 하려면 설치를, 저장하지 않고 바로 설치하려면 열기를 선택한다.

2. 선택할 것 없이 그림 1-2같이 설치를 누른다.

3. Muse를 설치할 위치를 지정하고 그림 1-3과 같이 계속을 누르면 설치를 완료 된 후 Muse가 실행 될 것이다.

지금 부터 시작할 예제 원본 확인 페이지 http://tistorytest.businesscatalyst.com/index.html

예제 템플릿 Download : http://muse.adobe.com/tutorials.html

다른 경로는 Learn에서 Tutorials 메뉴에서 위 표시된 링크를 통해 Download 받을 수 있다. 예제 템플릿

①

② ③

①을 클릭하면 새로운 사이트를 만들 수 있다. ②는 사이트 작업이 시작되면 아래의 최근 사이트파일이 나타나게 된다. ③을 클릭하여 템플릿이 있는 폴더로 이동하게 됩니다. 사이트를 직접 만들어 보려고 하기 때문에 ①번을 선택한다.

① ②

③

전 장에서 새로 사이트 만들기를 눌렀다면 위 그림과 같은 창이 뜰 것이다. 페이지의 넓이와 높이를 입력하고 컬럼수를 3, 컬럼의 넓이는 273, 컬럼간의 간격인 거터는 20을 입력합니다. 마진은 3의 체인아이콘을 클릭하고 50을 입력하면 4곳에 동일한 수치로 입력됩니다. 패딩은 상하 36을 입력합니다. 입력도중에 수치가 변경되는 수가 있는데, 이는 위 내용을 보면 가로 사이즈가 960인데 2번 항목의 수치를 다 더하게 되면 959가 나오게 됩니다. 그래서 자동으로 조절하기 위해서 마진 부분이나 페이지 넓이 부분에서 조정이 되기 때문입니다. OK를 클릭하고 메뉴에서 File – Site Properties를 선택하면 같은 창이 나오는데 수치가 변경되어있는 것을 확인할 수 있습니다.

①

②

레이아웃 수치를 지정하고 나면 위와 같은 화면이 나옵니다. Ctrl+Shift+S키를 눌러 이전 글에서 다운받은 파일 폴더에 적당한 이름(MyNewSite)을 입력하고 저장합니다. 마스터페이지에서 공통적으로 들어갈 헤더와 푸터를 만들기 위해 2의 A-Master 썸네일을 더블 클릭합니다.

①

②

디자인뷰 화면에 들어오면 좌측 눈금자에 슬라이더가 다섯개 나옵니다. 첫번째 슬라이더는 페이지의 상단을 조절하는 기능을 하고 이것과 쌍을 이루는 것이 4번의 페이지 하단 조절 슬라이더입니다. 클릭 드래그하면 페이지의 상단과 하단이 조절됩니다. 5번은 브라우저의 하단을 조절하는 슬라이더이고 이 세가지는 나중에 배경 이미지를 삽입한 후에 설명드립니다. 2번의 헤더 슬라이더는 헤더영역을 설정하고 3의 푸터 슬라이더는 푸터 영역을 설정합니다. 이 두가지는 마스터페이지에만 나타나고 상세페이지에는 나타나지 않아서 조절기능이 없습니다.

③

④

⑤

① ②

어도비 뮤즈 베타의 도구모음에는 도구가 총 6개가 있는데 주로 쓰이는 것이 선택툴과 텍스트툴, 사각형툴입니다. 선택툴은 이미지나 텍스트를 선택해서 이동하거나 크기를 조절, 회전할 때 사용되고 가장 많이 사용됩니다. 텍스트툴은 텍스트를 거의 입력할 기회가 없지만 텍스트의 스타일을 설정하기 위해 사용됩니다. 사각형툴은 사각형을 그리고 색상을 입력하거나 이미지를 삽입할때 사용합니다. 빨간 상자를 컨트롤패널이라고 하는데 페이지에서 어떤 요소가 선택되느냐에 따라 내용이 바뀌게 됩니다. 상세페이지를 만들기 위해 Plan을 클릭합니다.

③

④

홈 썸네일에 마우스를 올리면 주변에 아이콘이 나타납니다. 우측의 플러스 아이콘을 두번 클릭하면 페이지가 두개 만들어집니다. 이름부분을 더블클릭하여 이름을 수정합니다. 하단에 있는 아이콘을 클릭하면 자식페이지가 만들어집니다. 다시 마스터 썸네일을 더블클릭합니다.

① ② ③

배경이미지를 삽입하기 위해 1을 클릭하면 메뉴가 나옵니다. 3을 클릭하면 색상을 선택할 수 있는데 4를 클릭하면 같은 화면이 나옵니다. 5의 폴더를 클릭하면 브라우저창이 나와서 이미지를 선택할 수 있습니다. 다운받은 폴더로 이동하여 bk-map.gif파일을 선택합니다. Fitting은 6을 클릭하여 Original size를 선택합니다. 7의 포지션은 중앙점을 선택합니다. 2의 Fill을 클릭하면 같은 메뉴가 나오는데 8을 클릭하여 투명도를 줄이면 9의 흰색배경이 투명해집니다. 90정도로 조절합니다.

① ②

③

④

⑤ ⑥

⑦ ⑧

⑨

메뉴에서 파일-Place를 선택하거나 단축키 Ctrl+D키를 누르면 브라우저창이 나옵니다. 이미지 저장폴더에서 top-nav.png를 선택하면 1처럼 커서에 작은 이미지가 따라다닙니다. 클릭하면 본래의 이미지가 나옵니다. 클릭드래그하여 3의 헤더슬라이더 위로 배치합니다. 중앙이나 어떤 선과 일치하는 곳에 오면 스마트가이드가 나타나서 배치하기 용이하도록합니다. 4의 페이지 탑 슬라이더를 아래로 이동해서 공간을 늘려주고 다시 Ctrl+D키를 누릅니다.

①

② ③

④

브라우저창에서 Ctrl키를 누르고 logo.png와 thedrip.png 파일을 선택하면 1처럼 두개의 이미지가 있다는 표시가 나옵니다. 페이지 상단에 클릭하여 하나를 배치하고 메뉴바 우측하단에 클릭하여 나머지를 배치합니다.

①

②

③

사각형툴을 선택하고 가로로 길게 클릭 드래그해서 사각형을 만듭니다. Fill을 클릭하고 컬러의 작은 세모를 클릭하여 색상없음을 선택합니다. 이미지 폴더아이콘을 클릭하여 브라우저창에서 footer-zag.png파일을 선택하고 Fitting는 Tile Horizontally를 선택합니다. 스토록 컬러를 색상 없음을 선택하거나 8에서 수치를 0으로 만듭니다.

①

②

③

④ ⑤

⑥

⑦

⑧

이미지의 한쪽끝을 페이지의 좌측끝에 이동하여 붙이고 다른쪽 끝의 조절점을 클릭드래그해서 끝에 맞추면 이미지가 늘어나면서 채워집니다. 다시 사각형툴을 선택하고 하단에 크게 그려줍니다. Fill 컬러를 클릭하면 색상도구 상자가 나옵니다. 7의 스포이드툴을 선택하고 이미지위에 클릭하면 같은 색이 사각형에 채워집니다. 선택툴을 선택하고 클릭드래그하여 이미지하단에 맞춰줍니다.

① ②

③

④

⑤

⑥ ⑦

⑧

⑨

이미지와 큰 사각형에 우클릭하여 메뉴에서 Footer Item에 체크되어있는지 확인합니다. 컨트롤패널에서 2의 Footer에 체크되어있으면 Footer슬라이더 아래에 있는 요소들은 모든 푸터아이템에 체크됩니다. 이것은 가운데 있는 Content영역의 내용이 길어지게 되서 아래로 늘어나게 되면 푸터아이템은 자동으로 아래로 내려가게 되는 것을 의미합니다. 푸터아이템으로 체크가 안되면 컨텐트요소로 취급됩니다.

①

②

③

상단의 로고이미지를 선택툴로 선택하고 콘트롤패널에서 Effects를 클릭하면 3가지 메뉴가 나옵니다. 섀도우를 선택하고 On에 체크해서 그림자 색상을 선택하고 여러가지 수치를 조정합니다. 베벨효과도 마찬가지로 입력해주고 필요에 따라 글로우 효과도 줄 수 있습니다.

①

②

③

④

메뉴에서 파일-Place Photoshop Button을 선택하면 브라우저 창이 나옵니다. btn-share.psd 이미지를 선택하면 포토샵 옵션창이 뜹니다. 버튼은 4가지 상태(State)가 있는데 평상시의 이미지, 마우스 오버시, 마우스 다운시, 활성 상태 등 4가지 상태에 따라 버튼효과를 달리할 수 있습니다. 여기서는 3가지 이미지만 있습니다. OK를 클릭하면 커서에 이미지가 따라다닙니다. 2처럼 이미지를 보면 테두리가 보이지만 클릭하면 없어집니다. 2의 위치에 클릭하고 프리뷰모드로 가서 마우스 오버하면 이미지가 변합니다.

①

②

메뉴에서 윈도우-위젯을 선택하면 위젯패널이 나옵니다. 메뉴의 작은 세모를 클릭해서 트리를 열면 3가지 메뉴형태가 나옵니다. 이미 메뉴바가 있으니 4의 Horizontal을 선택하고 클릭드래그해서 화면에 놓으면 3가지 메뉴가 나옵니다. 플랜뷰를 클릭해서 보면 3가지 메뉴밖에 없으므로 하나를 더 추가하여 About라는 이름을 입력하고 다시 마스터탭을 클릭하면 5처럼 새로운 메뉴가 만들어집니다. 클릭드래그해서 6의 메뉴바 위에 올려놓습니다.

①

② ③ ④

⑤

⑥

텍스트패널을 열고 2를 클릭하면 폰트 리스트가 나옵니다. 상단에 웹세이프(Web Safe) 폰트 목록이 나오고 그 다음에 시스템폰트가 나옵니다. 웹세이프 폰트는 거의 모든 컴퓨터에 공통적으로 설치되어있는 폰트라서 이 폰트를 사용하면 어떤 컴퓨터라도 같은 모양으로 나오게 됩니다. 스크롤바를 내려서 시스템폰트를 사용한 경우 어도비 뮤즈 베타는 이를 이미지화 시키고 HTML 코드에 alt text로 모든 글자를 첨부하게 해서 인터넷 검색시 검색되도록 하고 있습니다. 시스템 폰트를 사용하면 이미지화 되고 하단에 이미지화됐다는 의미로 T라는 큰 글자와 이미지 아이콘이 만들어집니다. 5에서 글자의 크기를 높이고 6을 클릭하여 볼드체로 바꿉니다. 7을 클릭하여 흰색을 선택한 다음 스페이싱패널을 열고 거터부분에서 수치를 올려 단어간의 간격을 벌려줍니다.

① ② ⑤ ⑥

⑦

⑧

⑨

④

③

프리뷰모드를 선택하여 웹상에서 어떻게 보여지는지 확인해봅니다. 메뉴에 마우스를 오버하면 배경이 1처럼 회색으로 나옵니다. 이를 투명하게 수정해줘야합니다. 다시 디자인 모드로 와서 홈버튼부분만 선택합니다. 다른 곳을 클릭한 다음 홈버튼 부분을 한번 클릭하고 좀 기다렸다가 다시 클릭하면 선택됩니다. 하나의 버튼만 수정하면 다른 버튼도 다 수정이 되는데 이것이 가능한 것은 3의 아이콘을 클릭하면 옵션메뉴가 나옵니다. 4의 Edit Together에 체크가 되어있어야 합니다. States패널을 열고 롤오버를 선택한 다음 Fill패널을 열어 컬러를 클릭하여 사선아이콘을 선택하면 9의 배경이미지가 사라집니다. 10도 마찬가지 방법으로 배경을 없애줍니다. 11은 액티브상태인데 다른 이미지를 넣어봅니다. 11을 선택하고 마찬가지로 배경색상을 없애준 다음 12의 폴더아이콘을 클릭해서 브라우저에서 top-nav-over.png파일을 선택합니다.

①

②

⑤

⑥

⑦

⑧

⑨

④

③

⑩ ⑪

⑫

Fitting 은 Original Size로 선택하고 포지션은 중앙점을 클릭합니다. 이미지가 커서 다 보이지 않으니 2의 조절점을 클릭드래그해서 아래로 늘려줍니다. 상방향키를 여러번 눌러서 글자가 메뉴바의 중간에 오도록 재배치합니다. 프리뷰 버튼을 클릭하여 웹상에서 어떻게 보이는지 확인해봅니다.

①

②

어도비 뮤즈 베타의 플랜뷰에서 두번째 썸네일을 선택하고 3, 4의 서브페이지를 만들어줍니다. 서브페이지에서 우측 플러스 아이콘을 클릭하면 새 페이지가 만들어집니다. 이름을 더블클릭하여 Preparation과 Origin으로 입력한 다음 A-Master 썸네일을 더블클릭합니다.

①

②

④ ③

⑤

우선 이전글에서 빠트린 부분을 보완합니다. THE KOFFEE 부분을 선택합니다. 여러개의 요소가 있는 부분에서 한 부분을 선택하려면 다른 빈 공간을 클릭하여 해당부분이 전혀 선택이 안된 상태에서 한번 클릭하고 2초 정도 기다렸다가 다시 클릭하면 1처럼 선택됩니다. States패널을 선택하고 롤오버를 선택합니다. 텍스트 패널에서 컬러를 클릭하여 금색을 선택하면 롤오버시 선택한 색상이 나오게 됩니다. 하나의 메뉴만 설정해줘도 다른 메뉴도 동시에 적용됩니다.

① ②

④

③

아무것도 선택이 안된 상태에서 1의 세모를 느리게 더블클릭하면 서브메뉴가 나옵니다. 다시 Preparation부분을 느리게 더블클릭하면 이 부분만 선택이 됩니다. States패널을 열고 Normal부분을 클릭합니다. Fill패널에서 컬러를 선택하고 스포이드툴로 메뉴바를 클릭하면 배경색상이 바뀝니다. 롤오버 상태를 선택하고 같은 색상으로 바꿔줍니다.

①

② ⑤

⑥

④

③

텍스트패널을 열고 글자의 크기를 메인메뉴의 글자와 같은 크기로 만들고 컬러를 흰색으로 만듭니다. 롤오버 State 를 선택하고 글자의 색상을 금색으로 바꿔줍니다.

①

② ③

Effects를 클릭해서 그림자효과를 선택하고 수치를 입력합니다. 이제부터는 상세페이지를 만드는 과정이 됩니다. 플랜뷰로 가서 THE KOFFEE썸네일을 더블클릭해서 디자인뷰로 불러옵니다.

①

위젯패널을 선택하고 Panels의 세모아이콘을 클릭해서 트리를 연 다음 어코디언을 클릭 드래그해서 본문에 배치합니다. 5의 아이콘을 클릭하면 항목이 추가됩니다. 짙은 회색의 타이틀 부분을 클릭하면 옅은 회색의 내용부분이 나오게 됩니다. 타이틀 부분을 이미지로 삽입하고 내용부분은 텍스트를 삽입할 것입니다. 위젯의 우측에 작은 파란색 아이콘은 항상 보이는데 이곳을 클릭하면 Edit Together에 체크되어있어야 합니다. 기본적으로 체크되어있으니 이부분은 항상 생략하고 넘어갑니다.

①

②

⑤

⑥

④

③

선택툴로 옅은 회색부분을 느리게 더블클릭하면 선택됩니다. 텍스트툴을 선택하고 클릭드래그해서 텍스트프레임을 만들면 처음부분에 커서가 깜박거립니다. TASTING NOTES라고 입력합니다. Ctrl+D키를 눌러 브라우저 창에서 TextThreeSpeed.txt파일을 선택하고 외부 공간에 클릭한 다음 클릭드래그해서 2에 배치합니다. 3의 타이틀항목을 클릭하여 2의 내용이 접히는지 확인합니다.

① ②

첨부된 유료폰트를 시스템에 설치합니다. 텍스트툴을 선택하고 타이틀 글자를 블럭설정한 다음 텍스트패널에서 폰트를 선택합니다. 글자크기는 34포인트 색상은 흰색으로 하고 Leading은 120%로 하면 글자의 스타일이 바뀌면서 9부분에 이미지가 나타납니다. 웹세이프폰트가 아니면 이미지화되기 때문에 이를 표시하는 것입니다. 하단의 두개의 타이틀도 동시에 변경됩니다.

①

②

⑤ ⑥ ⑦

⑧ ⑨

④

③

⑩

서브타이틀을 블럭설정하고 같은 폰트를 사용해서 15포인트 색상은 그린, 레딩은 164%로 설정하고 새 스타일을 만들고 Subhead Green으로 입력합니다. 본문텍스트를 빠르게 세번클릭하면 블럭설정이 됩니다. 웹세이프폰트인 Geogia를 선택하고 19포인트 색상은 6e6161을 입력한 다음 새스타일을 만들고 Georgia Body Medium으로 이름을 입력합니다.

①

②

⑤

④ ③

⑥ ⑦

선택툴로 전환하고 빈곳을 클릭한 다음 타이틀을 선택하고 4의 아이콘을 클릭, Edit Together에 체크해제합니다. Fill 패널을 선택하고 Color를 클릭하여 빨간사선의 색상없음을 선택한 다음 이미지폴더 아이콘을 클릭하여 Acc-Green.png파일을 불러옵니다.

①

②

⑤

⑥

⑦ ⑧

④ ③

스페이싱 패널을 열고 Left 수치입력란을 클릭하고 상방향키를 계속 눌러주면 글자가 우측으로 이동합니다. 알맞게 조절합니다. 하단의 두개의 타이틀부분도 같은 방법으로 배경색상을 없애고 이미지를 Acc-Blue와 Acc-Yellow로 바꿔주고 타이틀 이름은 ESPRESSO와 AMERICAN ROAST로 바꿔줍니다. 내용부분은 TextCruiser.txt와 Text MorningBlend.txt를 사용합니다.

① ②

③

타이틀부분은 스타일이 이미 적용되어 있으니 글자만 바꾸고 Left 패딩만 조절하면 되고 내용은 텍스트파일을 불러와서 붙여넣고 스타일을 클릭하면 적용됩니다. 내용부분의 배경도 색상없음으로 전부 바꿔줍니다. 선택할때는 항상 바운딩 박스를 확인하고 작업해야합니다. 엉뚱한 곳에 적용될 수도 있습니다. 다 적용되었으면 프리뷰 모드를 클릭하여 웹상에서 보여지는 것을 확인합니다.

①

②

③

타이틀을 느리게 더블클릭하면 선택됩니다. States패널을 열고 롤오버를 선택한 다음 Fill패널에서 색상없음을 선택합니다. 마우스다운의 배경은 롤오버에서 적용을 하고나면 자동으로 제거됩니다. 나머지 두개의 타이틀도 같은 작업을 해주면 완성입니다.

①

②

⑤

④ ③

Ctrl+D키를 눌러서 저장 폴더의 slideshows 폴더에서 커피 열매 사진을 불러옵니다. 사진이 커서 사이즈를 줄여야 합니다. 위젯안에 클릭하면 수정하기 어려우니 밖에 클릭한 다음 조절점을 클릭 드래그하여 축소해줍니다. 포토샵처럼 Shift키를 누르지 않아도 가로세로 비율을 유지한채 축소됩니다. 이미지 크기를 줄인 다음 Ctrl+X키를 누르면 클립보드에 저장됩니다. 텍스트툴을 선택하고 글자의 앞에 클릭하면 커서가 깜박거릴때 Ctrl+V키를 누르면 이미지가 삽입됩니다. Wrap패널을 열고 두번째 아이콘을 클릭하면 글자가 이미지를 감싸게 됩니다. 이미지와 글자간의 간격을 떨어지게 하려면 Offsets을 이용합니다. 여기서는 5에 클릭하여 상방향키를 누르면 사이가 벌어집니다.

①

②

⑤

④ ③

플랜뷰에서 Origin 썸네일을 더블클릭하여 디자인뷰에 불러옵니다. 위젯 패널을 열고 슬라이드쇼를 열어 라이트박스를 선택하고 클릭드래그하여 페이지위에 올립니다. 라이트박스는 슬라이드되면서 화면의 중간에 이미지가 나오고 이미지 외부는 어둡게 되는 효과입니다.

①

②

③

파란색 아이콘을 클릭하면 옵션박스가 나옵니다. 2에서 이미지의 효과를 설정합니다. Fade는 서서히 사라지는 효과이고 Horizontally는 우에서 좌로 이미지가 이동, Vertically는 수직으로 이동합니다. 3에서 자동 슬라이드를 설정합니다. 4를 체크해제하면 이미지외부의 어둡게 되는 효과가 나오지 않고 원래의 자리에서 이미지가 나타납니다. 5에서 이미지를 선택하는 버튼을 만듭니다. 6에서 캡션을 넣거나 카운터, 닫기버튼을 설정합니다. 마지막으로 7의 폴더아이콘을 클릭하여 slideshow폴더에서 여러개의 이미지를 Shift키를 누르거나 Ctrl키를 눌러서 선택한 다음 열기버튼을 클릭하면 썸네일 이미지가 추가됩니다.

①

②

⑤ ⑥

⑦

④

③

썸네일 그룹을 선택하고 Shift키를 누른채 흑백이미지만 선택한 다음 Delete키를 누르면 제거됩니다.

1의 조절점을 늘리면 썸네일 이미지를 한줄로 정렬할 수 있습니다. 3의 조절점을 위로 이동해서 사이즈를 조절합니다. 카운터를 이미지의 아래로 배치하고 캡션은 이미지마다 설명을 입력할 수도 있습니다. 내용이 길면 이미지의 우측에 배치합니다. 5의 버튼들도 적절한 곳에 배치합니다. 닫기버튼은 이미지의 외부를 클릭하면 닫아지므로 필요는 없으나 넣어주는 배려도 필요합니다. 적절한 곳에 배치하고 프리뷰 버튼을 클릭하여 웹상에서 어떻게 보이는지 확인합니다. 처음에는 큰이미지가 안나오고 썸네일만 나옵니다. 썸네일을 클릭하면 이미지가 나옵니다. 라이트박스에서는 이미지가 중앙에 나오도록 설정되어 있으므로 위치변경은 안됩니다. 옵션박스에서 라이트박스에 체크해제하면 원래의 위치에 이미지가 나오게 됩니다.