Adobe Muse(어도비 뮤즈) 시작하기 제1부

Adobe Muse(어도비 뮤즈) 시작하기 제1부

이 자습서에서는 Adobe® Muse™ 소프트웨어를 기반으로 하여 실제 프로젝트에서 일반적으로 사용되는 기능을 담고 있는 웹 사이트를 만드는 방법을 설명합니다. 여기에서는 마스터 페이지를 사용하는 방법, 텍스트와 이미지를 다루는 방법, 위젯을 통해 대화형 기능을 추가하는 방법, 임베디드 HTML을 사용하여 리치 미디어 및 동적 웹 데이터를 삽입하는 방법 등을 주로 살펴봅니다. 

이 첫 단원을 진행하려면 인터넷에 연결되어 있어야 합니다. Adobe Muse 제품 페이지를 방문하여 소프트웨어를 다운로드하고 설치합니다. Muse를 사용하려면 서비스에 가입을 해야 하지만 평가용 버전을 30일 동안 무료로 사용해 볼 수도 있습니다. 소프트웨어를 실행하고 사이트를 디자인하기 위해서는 제일 먼저 로그인을 해야 합니다. 나중에 최초 평가용 사이트를 게시할 준비가 되었을 때 사용자가 업로드한 사이트 파일을 사용자의 계정을 통해 추적 관리할 수 있습니다. Muse에서 웹 사이트를 만들 때는 그 수가 몇 개가 되었든 상관없이 항상 동일한 사용자 이름과 암호를 사용하여 로그인합니다. 

처음으로 Muse를 열면 Adobe ID로 로그인하여 무료 Business Catalyst 계정을 만들라는 메시지가 나타납니다. 이미 Adobe ID를 가지고 있으면 동일한 사용자 이름과 암호를 사용하여 로그인할 수 있습니다. 

1. Muse를 실행합니다. 로그인 화면이 나타납니다(그림 1 참조).

 

그림 1. 로그인 프로세스를 시작하려면 [다음]을 클릭합니다. 

2. 다음 화면에서 제품의 기본 언어(한국어)를 선택하고 [다음]을 클릭합니다. 다음 페이지에는 기존 가입 자격을 사용하여 로그인하거나 Muse를 평가용으로 사용해 볼 수 있는 선택 옵션이 표시됩니다. 이미 Muse에 가입했거나 Creative Cloud 서비스를 사용하고 있으면 위쪽 옵션을 클릭합니다. 그렇지 않으면 [Adobe Muse 무료 체험] 옵션을 클릭합니다(그림 2 참조).

 

그림 2. 가입 또는 평가 옵션 중 로그인에 사용할 방법을 선택합니다. 

3. Adobe ID 또는 Business Catalyst 계정을 이미 가지고 있으면 기존 계정의 이메일 주소와 암호를 입력하고 [로그인] 단추를 클릭합니다. 그렇지 않으면 화면 오른쪽에 있는 [Adobe ID 만들기] 단추를 클릭합니다(그림 3 참조).

 

그림 3. 기존의 Adobe ID 자격 증명을 입력하거나 새 Adobe ID를 만듭니다. 

로그인에 성공하면 Adobe Muse 시작 화면이 나타납니다(그림 4 참조).

 

다음 순서로는 이 자습서에 사용할 샘플 파일을 다운로드합니다. ZIP 파일을 데스크톱에 저장하고 파일의 압축을 풉니다. 이렇게 하면 Kevins_Koffee_Kart라는 폴더가 생성됩니다. 이 샘플 프로젝트를 진행하면서 사용할 사이트 에셋과 파일이 바로 이 폴더에 들어 있습니다. 샘플 파일 폴더에는 02KevinsKoffeeKartFinished.muse라는 파일도 있습니다. 이 파일은 참조용으로 사용할 수 있도록 미리 완성되어 있는 버전의 프로젝트입니다. 

 Muse_Getting Started_Kevins_Koffee_Assets.zip

 Muse_Getting Started_Kevins_Koffee.pdf

이제 기본적인 설정을 마쳤으며 Muse에서 첫 웹 사이트를 만들 준비가 되었습니다. 

이 샘플 프로젝트에서는 설명을 따라가면 Kevin’s Koffee Kart라는 가상의 비즈니스 사이트를 디자인하는 과정을 직접 실습해 보겠습니다(그림 5 참조).

 

그림 5. Kevin’s Koffee Kart라는 가상의 웹 사이트 홈 페이지입니다. 

Muse 작업 영역 둘러보기

이 단원에서는 [플랜] 보기와 [디자인] 보기를 사용하여 새 사이트를 만드는 방법을 실습을 통해 알아보도록 하겠습니다. 그와 함께 여러 가지 낯익은 Adobe 도구를 만날 수 있는 Muse 작업 영역도 둘러보겠습니다. Adobe InDesign® 소프트웨어를 사용하여 작업하는 데 익숙하다면 두 인터페이스 모두 표준 인쇄 디자인 관례를 따르고 있으므로 여러 가지 유사한 부분을 쉽게 발견할 수 있을 것입니다. 

Muse에서 새 사이트를 만들 때 사이트 속성 설정

다음 단계에 따라 새 사이트를 만들고 사이트의 속성을 정의합니다.

1. 시작 화면에서 [새로 만들기] > [사이트]를 선택합니다.

2. [새 사이트] 대화 상자가 나타나면 [페이지 폭]을 950으로, [최소 높이]를 800으로 설정합니다. [열]을 3으로, [열 폭]을 270으로, [간격]을 20으로 설정합니다. [여백] 섹션에 있는 값 네 개를 모두 50으로 설정합니다. [안쪽 여백] 값을 36으로 설정합니다(그림 6 참조). 

 

그림 6. 필드에 값을 직접 입력하거나 각 설정의 화살표 단추를 클릭하여 사이트 특성을 설정합니다. 

참고: 

휴대폰 및 태블릿에 해당하는 사이트 디자인의 경우, "바탕화면으로부터 리디렉션" 옵션으로 모바일 레이아웃의 리디렉션을 설정/해제할 수 있습니다. 이 기능은 준비가 되지 않아 아직 리디렉션되어서는 안 되는(작업 진행 중) 레이아웃에 유용합니다. 리디렉션 옵션을 해제한 상태에서도 레이아웃을 내보낼 수 있습니다. 하지만 모바일 브라우저는 모바일 페이지로 리디렉션되지 않으며 사이트의 [사이트 속성] 대화 상자에서 해당 옵션을 설정하기 전에는 내보낸 파일이 sitemap.xml에 포함되지 않습니다.

3. [확인]을 클릭하여 설정을 저장하고 대화 상자를 닫습니다.

4. [파일] > [사이트 속성]을 선택합니다. [파비콘 이미지] 옆에 있는 폴더 아이콘을 클릭합니다. Kevins_Koffee_Kart 샘플 폴더를 찾은 다음 favicon.png라는 파일을 선택합니다. [확인]을 클릭합니다(그림 7 참조).

 

그림 7. 파비콘은 브라우저의 주소 표시줄에서 사이트의 URL 옆에 표시되는 아이콘입니다. 

5. [파일] > [저장]을 선택합니다. 새 사이트의 이름을 중복되지 않게 지정합니다(예: YourNameKoffeeKart.muse). (이 자습서에서는 샘플 사이트의 이름으로 01KevinsKoffeeKart.muse를 사용합니다.)

플랜 보기와 디자인 보기 설명

새 사이트를 만들면 기본적으로 [플랜] 보기가 표시됩니다. [플랜] 보기의 사이트맵 레이아웃에는 홈 페이지와 "A-마스터"라는 마스터 페이지가 하나씩 포함됩니다. 방문자에게 온라인으로 표시되는 실제 사이트 페이지들은 [플랜] 보기의 위쪽 섹션에 표시됩니다. 

마스터 페이지는 머리글, 바닥글, 로고 컨텐트 같이 여러 페이지에 공통으로 사용되는 디자인 요소를 포함하는 일종의 템플릿과도 같습니다. 새 사이트를 만들면 마스터 페이지가 기본적으로 한 개만 생성되지만, 원한다면 마스터 페이지를 얼마든지 더 만들어 임의의 페이지에 적용할 수 있습니다. 마스터 페이지는 언제나 [플랜] 보기의 아래쪽 섹션에 표시됩니다.

작업 영역 상단의 [컨트롤] 패널에는 [플랜], [디자인], [미리 보기], [게시], [관리]라는 이름의 링크 다섯 개가 있습니다. 작업을 진행하면서 이러한 링크를 클릭하면 인터페이스의 각 섹션 사이를 쉽게 전환하여 앞뒤로 오갈 수 있습니다. 임의의 페이지나 마스터 페이지를 두 번 클릭하여 [디자인] 보기에서 편집할 수 있게 열 수도 있습니다.

1. Home 페이지를 두 번 클릭하여 [디자인] 보기를 표시합니다. 또는 [디자인] 링크를 클릭해도 됩니다. Muse의 [디자인] 보기에 Home 페이지가 표시됩니다. 선택한 페이지에 대한 탭이 만들어집니다. 이 탭의 이름을 확인하면 현재 편집하고 있는 페이지가 무엇인지 쉽게 알 수 있습니다(그림 8 참조).

 

그림 8. [디자인] 보기에서 일반 페이지나 마스터 페이지를 열면 각 페이지의 이름이 탭에 표시되므로 원하는 페이지를 쉽게 찾아 이동할 수 있습니다. 

참고: 

[디자인] 보기에서 페이지 편집을 마친 다음 탭의 오른쪽에 있는 [X] 아이콘을 클릭하여 탭을 닫을 수 있습니다.

2. 잠시 시간을 내서 패널을 살펴보십시오. 현재 화면에 표시되어 있지 않은 패널에 액세스해야 할 때는 인터페이스 상단에 있는 [창] 메뉴를 선택하고 패널 이름을 선택하십시오. 패널의 이름 옆에 확인 표시가 있으면 해당 패널이 이미 열려 있다는 의미입니다. 패널은 범주별로 묶여 있습니다. 기본적으로, 첫 그룹에는 [색상 견본], [채우기], [에셋], [텍스트] 패널이 속합니다. 그 다음으로는 [문자 스타일], [단락 스타일], [그래픽 스타일], [변형] 패널이 함께 묶여 있습니다. 그 아래에는 [위젯 라이브러리], [간격], [상태], [줄바꿈] 패널이 표시됩니다. 

고정된 패널의 위쪽에 있는 회색 막대의 맨 오른쪽 가장자리를 보면 이중 화살표가 있습니다. 이 화살표를 클릭할 때마다 전체 패널 모음이 확장 또는 축소됩니다. 

다른 Adobe 제품과 마찬가지로 이러한 패널을 열거나, 닫거나, 위치를 바꾸거나, 위치를 고정하여 작업 영역을 사용자 정의할 수 있습니다. 작업 영역을 사용자 정의하면 사이트를 디자인하면서 주로 사용하는 패널과 도구에 쉽게 액세스할 수 있습니다(그림 9 참조). 

 

그림 9. 패널을 잠시 둘러보면서 패널 탭을 클릭하여 어떤 옵션과 도구가 제공되는지 살펴보십시오.

 

3. [플랜] 링크를 클릭하여 [플랜] 보기로 다시 전환합니다. [플랜] 보기의 하단에 있는 마스터 페이지("A-마스터")를 두 번 클릭하여 [디자인] 보기에서 엽니다. 일반 페이지를 열고 편집할 때와 마찬가지로, [플랜] 보기에서 마스터 페이지 축소판을 두 번 클릭하여 마스터 페이지를 열고 편집할 수 있습니다. 

마스터 페이지에 안내선을 배치하여 페이지 영역 설정

마스터 페이지에는 이동할 수 있는 가로 안내선 5개가 포함되어 있습니다. 맨 위쪽과 맨 아래쪽 안내선의 위치에 따라 전체 페이지 크기가 결정됩니다. 중간에 있는 안내선 2개는 페이지 컨텐트의 주요 부분, 즉 머리글의 아래쪽 가장자리와 바닥글의 위쪽 가장자리 사이에 위치하는 영역을 정의합니다(그림 10 참조).

 

그림 10. [디자인] 보기에서 각 안내선 위에 마우스 커서를 올려 놓으면 안내선에 대한 설명이 툴팁으로 표시됩니다. 

참고: 

이러한 안내선을 표시하거나 숨겨야 할 때는 페이지 오른쪽에 있는 회색 영역을 마우스 오른쪽 단추로 클릭하고 [안내선 표시]/[안내선 숨기기]와 [머리글과 바닥글 표시]/[머리글과 바닥글 숨기기]를 선택하십시오. 또는 작업 영역 상단의 [컨트롤] 패널에 있는 [보기] 옵션 메뉴를 사용하여 [안내선 표시]/[안내선 숨기기]와 [머리글과 바닥글 표시]/[머리글과 바닥글 숨기기]를 선택해도 됩니다. 이들 설정은 토글 스위치처럼 작동합니다.

안내선을 현재 표시한 상태이면 안내선을 숨길 수 있는 옵션이 제공됩니다. 반대로, 안내선을 현재 숨긴 상태이면 안내선을 다시 표시할 수 있는 옵션이 제공됩니다. 

다음 단계에 따라 안내선을 설정하고 페이지 영역을 정의합니다.

1. [디자인] 보기에서 마스터 페이지를 열고 페이지 위쪽 안내선과 머리글 안내선을 페이지 상단에서 40픽셀 지점까지 드래그합니다. 

2. 페이지 아래쪽 안내선과 바닥글 안내선을 650픽셀 지점까지 드래그하고, 브라우저 아래쪽 안내선을 900픽셀 지점까지 드래그합니다. 페이지 위쪽, 머리글, 바닥글, 페이지 아래쪽, 브라우저 아래쪽을 정의하는 다섯 개의 안내선 외에도, 페이지에서 개체를 정렬하는 데 사용할 수 있는 눈금자 안내선이 있습니다. 눈금자 안내선을 사용하면 페이지 디자인의 요소를 원하는 위치에 쉽게 정렬할 수 있습니다. 

눈금자 안내선을 사용하여 페이지에 요소 정렬

디자인의 페이지 요소를 정렬할 때 눈금자 안내선을 사용하면 편리합니다. 작업을 할 때 안내선을 표시할지 숨길지 선택할 수 있습니다. 

안내선의 표시 여부를 결정하려면 다음 방법 중 하나를 사용합니다. 

[보기] > [안내선 표시]/[안내선 숨기기]를 선택합니다. 

또는 

페이지 디자인의 바깥쪽에 있는 회색 영역을 마우스 오른쪽 단추로 클릭하고 컨텍스트 메뉴가 나타나면 [안내선 표시]/[안내선 숨기기]를 선택합니다. 

이들 메뉴 옵션은 토글 스위치처럼 작동합니다. 안내선을 현재 표시한 상태이면 안내선을 숨길 수 있는 옵션이 제공되고, 안내선을 현재 숨긴 상태이면 안내선을 표시할 수 있는 옵션이 제공됩니다(그림 11 참조).

 

그림 11. 페이지를 디자인할 때 안내선을 표시하려면 [보기] 메뉴나 컨텍스트 메뉴에서 [안내선 표시]를 선택합니다. 

눈금자 안내선을 사용하여 작업하려면 눈금자 표시 여부도 지정해야 합니다. 눈금자를 사용하려면 [보기] > [눈금자 표시]를 선택합니다.

다음 단계에 따라 눈금자 안내선을 사용해 보십시오. 

눈금자의 한 지점을 클릭한 채 마우스 커서를 드래그하여 안내선을 표시합니다. 위쪽 눈금자를 클릭한 채 드래그하면 가로 방향의 안내선을 표시할 수 있고, 왼쪽 눈금자를 클릭한 채 드래그하면 세로 방향의 안내선을 표시할 수 있습니다. 원한다면 눈금자의 틱 눈금을 두 번 클릭하여 정확한 지점에 안내선을 설정할 수도 있습니다. 

안내선의 위치를 조정하려면 페이지 측면의 회색 영역에서 안내선을 선택합니다. 개별 안내선을 클릭한 채 드래그하여 위치를 하나씩 조정합니다. 마우스 단추를 클릭한 채 회색 영역의 선택 윤곽이 포함되도록 드래그하여 여러 개의 안내선을 한꺼번에 선택할 수도 있습니다. 

여러 개의 안내선을 선택하여 그룹 하나로 묶은 다음 이를 페이지의 다른 위치로 드래그할 수 있습니다.

안내선 그룹을 선택한 채 각 안내선 사이의 간격을 일정 비율만큼 조정할 수도 있습니다.

[사각형] 도구로 사각형 한 개를 그려서 안내선의 작동 방식을 여러 가지로 테스트해 보십시오. [선택] 도구로 사각형을 드래그하여 눈금자 안내선에 맞춰 정렬할 수 있습니다. [스마트 안내선]을 활성화한 경우에는 눈금자 안내선이나 페이지 요소의 위치에 맞춰 스마트 안내선이 나타납니다(그림 12 참조).

 

그림 12. 개체를 드래그하면 눈금자 안내선을 기준으로 개체를 정렬하는 데 도움이 되도록 스마트 안내선이 잠시 나타났다 사라집니다. 

마우스 단추를 클릭한 채 선택 윤곽이 포함되도록 페이지를 가로질러 드래그하면 페이지 요소만 선택되고 눈금자 안내선은 선택에서 제외됩니다. 마우스 단추를 클릭한 채 페이지 바깥쪽의 회색 영역이 포함되도록 드래그하면 여러 개의 눈금자 안내선을 선택할 수 있습니다. Shift 키를 누른 채 눈금자 안내선을 선택하여 안내선 그룹을 선택할 수도 있습니다.

안내선을 복제하려면 Option 키(Mac)나 Alt 키(Windows)를 누른 채 안내선을 드래그합니다. Option 키나 Alt 키를 누르고 있으면 복제 커서 아이콘이 나타납니다. 이중 화살표 모양의 이 커서는 눈금자 안내선을 복제할 수 있는 상태임을 의미합니다.

눈금자를 마우스 오른쪽 단추로 클릭하면 눈금자 안내선을 제어할 수 있는 컨텍스트 메뉴가 나타납니다. 이 메뉴에는 안내선을 현재 위치에 고정하여 잠그는 등 여러 가지 유용한 설정이 포함되어 있습니다(그림 13 참조). 

 

그림 13. 눈금자 컨텍스트 메뉴에서 안내선을 잠그는 옵션을 선택합니다. 

안내선을 완전히 제거하려면 눈금자 위에 커서를 놓고 마우스 오른쪽 단추를 클릭합니다. 컨텍스트 메뉴에서 [안내선 잠금 해제]를 선택한 다음 [모든 안내선 삭제]를 선택하면 안내선이 모두 삭제됩니다.

계속하여 Adobe Muse 시작하기, 제2부에서는 사이트맵을 만들어 웹 사이트의 페이지를 채우고 틀을 구성하는 방법을 살펴보겠습니다.

Adobe Muse(어도비 뮤즈) 시작하기 제1부

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