라이브러리 패널을 사용하여 디자인 요소 구성 및 재사용

Muse의 [라이브러리] 패널은 공통 페이지 요소를 저장하고 관리하기 위한 편리한 방법을 제공합니다. 빠르게 액세스하고 사이트의 페이지에 컨텐트를 추가할 수 있도록 [라이브러리]에 항목을 추가합니다. [라이브러리]에는 로고, 사이트 이미지, 색상 견본, 안내선, 사용자 정의 위젯, 포함된 HTML, 단락, 문자, 그래픽 스타일 등 많은 유형의 요소가 포함될 수 있습니다. 이 문서에서는 [라이브러리] 패널을 사용하여 디자인 프로세스를 효율화하는 방법에 대한 개요를 제공합니다.

Creative Cloud Add-on을 사용하면 디자인의 질을 높이도록 도와주는 매우 다양한 디자인 요소를 선택할 수 있습니다. 다운로드하려면 Adobe Muse용 Creative Cloud Add-on을 참조하십시오.

[라이브러리] 패널은 [디자인] 보기에서 액세스할 수 있습니다. [창] > [라이브러리]를 선택하거나 고정된 패널 모음에서 [라이브러리] 탭을 클릭하여 패널을 활성화합니다.

라이브러리 패널에서 폴더 관리

새 폴더 만들기

[라이브러리] 패널 사용을 시작하려면 새 폴더를 만듭니다. 다음 단계를 따르십시오.

1. [라이브러리] 패널 하단에 있는 [폴더 만들기] 단추(폴더 아이콘)를 클릭합니다.

2. 폴더 아이콘 옆에 있는 필드에 설명이 포함된 이름을 입력합니다.

폴더는 [라이브러리] 패널에서 이름을 기준으로 알파벳순으로 정렬되므로 유사한 이름을 사용하면 목록에서 관련 항목을 함께 둘 수 있습니다.

언제라도 라이브러리에서 폴더를 두 번 클릭하여 이름을 바꿀 수 있습니다.

폴더를 만들었으면 라이브러리에 항목을 추가할 수 있습니다.

라이브러리에 여러 항목을 추가하려는 경우 항목을 추가하기 전에 빈 폴더 모음을 만들고 이름을 지정할 수 있습니다.

폴더에 페이지 요소 추가

빠르게 액세스하고 다른 페이지에 추가할 수 있도록 라이브러리에 요소를 추가하려면 페이지에서 요소를 선택합니다. 여러 항목을 선택할 경우 Shift 키를 누른 상태에서 또는 [선택] 도구를 클릭하고 드래그하여 원하는 요소를 선택합니다.

두 가지 옵션 중 하나를 선택하여 라이브러리에 요소를 추가합니다.

옵션 1:

1. 선택한 요소를 마우스 오른쪽 단추로 클릭하고 [라이브러리에 추가]를 선택한 다음 라이브러리 항목을 저장할 폴더를 선택합니다.

선택한 항목이 폴더에 추가되고 미리 보기가 [라이브러리] 패널에 표시됩니다.

2. 제공된 필드에 요소에 대한 설명이 포함된 이름을 입력합니다.

또는 다음 작업 과정을 사용하여 선택한 항목을 라이브러리에 추가합니다.

옵션 2:

1. 요소가 선택된 상태에서 [라이브러리] 패널의 하단 오른쪽에 있는 [선택한 항목 추가] 단추(페이지 넘기기 아이콘)를 클릭합니다.

2. 제공된 필드에 요소의 이름을 입력합니다.

폴더에 하나 이상의 항목이 포함되어 있으면 폴더 이름 왼쪽에 있는 아래쪽 화살표를 클릭하여 폴더의 컨텐트를 확장/축소할 수 있습니다.

큰 프로젝트 파일에서는 [라이브러리] 패널의 모든 폴더를 축소하여 요소 목록을 짧게 하고 검색 및 관리가 용이하게 할 수 있습니다. [라이브러리] 패널에서 모든 폴더를 열거나 닫으려면 option 키(Windows의 경우 alt 키)를 누른 상태에서 화살표를 클릭합니다.

폴더 이름 바꾸기 및 구성

앞에서 언급한 대로 언제라도 폴더를 두 번 클릭하여 이름을 바꿀 수 있습니다. 특정 클라이언트나 사이트 섹션에 대한 요소를 저장하는 경우 폴더가 함께 나열되도록 [라이브러리] 패널에서 모든 폴더 이름을 지정하는 것이 좋습니다.

폴더 및 라이브러리 항목은 알아보기 쉬운 이름으로 지정하는 것이 좋습니다. Muse에서 지정하는 기본값인 제목 없음 이름을 사용하지 마십시오. 설명이 포함된 이름을 추가하면 폴더 목록을 보고 빠르게 항목을 찾을 수 있습니다. 또한 이 경우 다음 섹션에 설명된 대로 특정 라이브러리 항목을 검색할 수 있습니다.

라이브러리 패널에서 에셋 관리

라이브러리 패널 검색

여러 많은 요소를 [라이브러리] 패널에 추가하면 어떤 폴더에 사용하고자 하는 항목이 포함되어 있는지 기억하는 것이 어려워집니다. 항상 각 폴더를 확장하여 컨텐트를 볼 수 있지만, 이 경우 큰 라이브러리에서 작업할 때 많은 시간이 소요될 수 있습니다.

[라이브러리] 패널을 검색하려면 [이름별 필터링] 필드에 항목 이름의 일부를 입력합니다.

일치하는 모든 항목이 확장된 라이브러리 폴더의 아래 목록에 표시됩니다.

검색을 마쳤으면 X 단추를 클릭하여 필드를 지우고 다시 [라이브러리] 패널의 전체 항목 목록을 확인합니다.

에셋 가져오기

사용자 정의 라이브러리 에셋은 사용자끼리 공유하여 다른 디자이너와 쉽게 공동 작업을 수행하고 사이트 디자인의 모양과 느낌을 표준화할 수 있습니다. 내보낸 Muse 라이브러리 파일은 .mulib 파일 확장명으로 저장됩니다.

Muse 라이브러리 파일을 현재 프로젝트로 가져오려면 .mulib 파일을 두 번 클릭합니다. Muse가 실행되고(아직 열리지 않은 경우) 라이브러리 파일의 컨텐트가 [라이브러리] 패널에 추가됩니다.

또는 다음 단계를 수행합니다.

1. [라이브러리] 패널의 하단 왼쪽에 있는 [Muse 라이브러리 가져오기] 단추를 클릭합니다.
2. 나타나는 [라이브러리 항목 가져오기] 대화 상자에서 데스크톱에 있는 .mulib 파일을 찾아 선택한 다음 [열기]를 클릭합니다.

가져온 폴더가 [라이브러리] 패널에 나타나고 현재 파일에서 사용할 준비가 됩니다.

[디자인] 보기에서 작업하지 않을 때 라이브러리 항목을 가져오려는 경우 [파일] > [사이트 열기]를 선택한 다음 나타나는 [열기] 대화 상자에서 하나 이상의 .mulib 파일을 찾아 선택할 수도 있습니다.

디자인에 라이브러리 항목 사용

그래픽, 벡터 이미지, 양식, 머리글, 바닥글 요소를 비롯해 다양한 유형의 자산을 저장하고 관리할 수 있습니다. 디자인에 이러한 항목을 사용하는 방법에는 두 가지가 있습니다.

라이브러리 항목 배치:

디자인에 사용할 항목을 선택합니다. 라이브러리 항목을 디자인 보기로 드래그합니다.

중단점이 있는 라이브러리 항목 배치:

라이브러리 항목에 중단점이 포함되어 있는 경우 레이아웃에 중단점과 함께 항목을 배치할 수 있습니다. 중단점이 있는 라이브러리 항목을 사용하려면 해당 항목 옆에 있는 더하기 기호를 클릭합니다. 항목을 디자인 보기로 드래그 앤 드롭합니다.

라이브러리 항목의 중단점이 페이지에 추가됩니다. 이 기능을 사용하면 클릭 한 번으로 마스터 및 하위 페이지에 일련의 중단점을 추가할 수 있습니다. 또한 여러 Adobe Muse 프로젝트에서 중단점을 유지할 수도 있습니다.

페이지에 이미 중단점이 있는데 중단점이 있는 라이브러리 항목을 추가한 경우, 모든 중단점이 페이지에 추가됩니다.

이미지 및 다른 에셋 내보내기

[라이브러리] 패널에 컨텐트를 추가했으면 다른 디자이너와 공유하기 위해(또는 여러 컴퓨터에서 작업할 때 디자인 프로세스 속도를 높이기 위해) 자립적인 파일로 내보낼 수 있습니다.

Adobe Edge Animate OAM 파일, 비디오 클립 및 기타 링크된 컨텐트와 같이 웹 사이트에 링크된 컨텐트(포함된 것 대신)는 [라이브러리] 패널에서 요소를 내보낼 때 만들어지는 .mulib 파일에 포함되지 않는다는 점을 유의해야 합니다.

이미지 파일도 포함된 Muse 라이브러리 파일을 내보내려면 다음 단계를 수행하십시오.

1. [디자인] 보기에서 라이브러리에 추가할 요소 또는 요소 모음을 만듭니다. 이 요소 모음에는 사각형, 텍스트 및 이미지 파일이 포함될 수 있습니다.
2. [라이브러리] 패널에 항목을 추가하기 전에 [에셋] 패널([창] > [에셋])을 열고 내보내려는 이미지를 마우스 오른쪽 단추로 클릭한 다음 [링크 포함]을 선택합니다.

참고: 내보내려는 라이브러리 폴더에 이미지 파일이 포함되지 않을 경우 2단계를 건너뛸 수 있습니다.

3. 원하는 요소를 선택하고 라이브러리에 추가합니다.
4. [라이브러리] 패널의 하단에 있는 내보내기 단추를 클릭합니다.

.mulib 파일이 만들어지고 데스크톱(또는 사용자가 지정하는 위치)에 저장됩니다. .mulib 파일을 이메일이나 파일 전송을 통해 다른 디자이너 또는 팀원에게 배포합니다.

수신자가 .mulib 파일을 열면 라이브러리 항목이 페이지에 추가되고 이미지가 [에셋] 패널에 포함된 이미지로 나타납니다.

사용자 정의 색상 견본 만들기

[라이브러리] 패널을 사용하여 사이트 디자인에서 사용된 모든 색상이 포함된 요소를 저장할 수 있습니다. 사용자 정의 안내선 모음을 선택하고 [라이브러리] 패널에 추가할 수도 있습니다. 이러한 방법은 사이트 프로젝트의 모양과 느낌을 표준화하는 데 매우 유용합니다.

디자인 프로세스 속도를 높이기 위해 특정 색상 모음을 새 .muse 파일로 가져오려면 다음 단계를 수행하십시오.

1. 저장하려는 색상이 포함된 .muse 파일을 엽니다. [사각형] 도구를 사용하여 단일 사각형 모양을 만든 다음 Option/Alt 키를 누른 상태에서 사각형을 드래그하여 여러 번 복제합니다. [채우기] 메뉴의 스포이드 도구를 사용하여 각 사각형의 채우기를 사이트의 기본 색상 값 중 하나로 설정합니다.
2. [라이브러리] 패널에서 색상 견본을 저장할 새 폴더를 만듭니다.
3. [선택] 도구를 사용하여 전체 사각형 모음을 선택합니다. 선택한 사각형 그룹을 마우스 오른쪽 단추로 클릭하고 [라이브러리에 추가]를 선택하거나 [라이브러리] 패널의 하단에 있는 [선택한 항목 추가] 단추를 클릭할 수 있습니다. 필드에 설명이 포함된 이름을 입력하여 색상 견본 모음 레이블을 지정합니다.
4. 색상 견본이 포함된 폴더를 선택하고 [라이브러리] 패널 하단에 있는 [내보내기] 단추를 클릭하여 선택한 컨텐트와 함께 Muse 라이브러리 파일을 내보냅니다. 이메일 첨부 파일 전송 또는 USB 드라이브를 통한 파일 전송을 통해 .mulib 파일을 팀원에게 보냅니다.
5. .mulib 파일 수신자는 Muse를 실행하고 새 사이트를 만든 다음 [라이브러리] 패널을 열고 [가져오기] 단추를 클릭하여 색상 견본이 포함된 파일을 자신의 라이브러리로 가져옵니다. (또는 [파일] > [사이트 열기]를 선택하고 .mulib 파일을 열 수 있습니다.)
6. 이제 [라이브러리] 패널에서 색상이 포함된 요소를 페이지로 드래그하여 색상 견본을 [색상 견본] 패널에 추가합니다.
7. 그러면 수신자는 [색상 견본] 패널([창] > [색상 견본])을 열고 [색상 견본] 패널을 마우스 오른쪽 단추로 클릭한 다음 나타나는 컨텍스트 메뉴에서 [사용되지 않는 모든 항목 삭제]를 선택합니다.

[색상 견본] 패널에서 사용되지 않는 색상 견본을 삭제한 후 원할 경우 페이지에서 라이브러리 요소를 삭제합니다.

사용자 정의 축소판 만들기

[라이브러리] 패널의 미리 보기 창은 라이브러리에서 항목을 보다 쉽게 선택하고 페이지에 추가할 수 있도록 선택한 컨텐트를 시각적으로 나타내기 위해 고안되었습니다. 하지만 미리 보기 창은 기본적으로 사각형인 파일을 표시하도록 설정되어 있습니다. 세로나 가로로 긴 요소 또는 요소 모음을 라이브러리에 추가할 경우 나타나는 미리 보기 이미지 축소판은 크기가 조정됩니다.

원할 경우 라이브러리 항목에 대한 미리 보기로 사용할 여러 축소판 이미지를 만들 수 있습니다. 다음 단계를 따르십시오.

1. Mac Finder 또는 Windows 탐색기를 사용하여 컴퓨터에서 다음 디렉토리를 검색합니다.

• Mac: ~/Library/Preferences/Adobe/AdobeMuseLibrary/
• Windows: %AppData%/AdobeMuseLibrary/

2. 업데이트할 Muse의 라이브러리 폴더와 일치하는 폴더 이름을 찾습니다. 이 예에서 라이브러리 폴더 이름은 nav - background입니다.
3. 폴더를 열어 컨텐트를 봅니다. PNG 파일이 포함되어 있습니다.
4. 이미지 편집 프로그램(Photoshop 또는 Fireworks 등)을 사용하여 PNG 파일을 엽니다. PNG 파일을 원하는 대로 편집합니다.
5. PNG 파일을 현재 위치에 저장하고 이미지 편집 프로그램을 종료합니다.
6. Muse로 돌아와 라이브러리에서 항목을 선택합니다. 편집한 PNG 파일이 미리 보기 창에 표시됩니다.

Adobe Muse 작업에 대해 더 자세히 알아보려면 Adobe Muse 도움말 및 자습서 페이지를 방문하고 Adobe Muse 지원 포럼을 참조하십시오.