Adobe Muse에서 에셋을 추가 및 관리하는 방법을 알아봅니다.

참고:

Adobe Muse는 더 이상 새로운 기능을 추가하지 않으며 2020년 3월 26일 목요일에 지원이 중단됩니다. 자세한 정보 및 지원은 Adobe Muse 서비스 종료 페이지를 참조하십시오.

Adobe Muse에서 사이트를 작성하면서 추가하는 파일은 [에셋] 패널에 나열됩니다. 이 패널에는 디자인을 만들 때 그래픽을 신속하게 업데이트, 최적화 및 교체하는 데 사용할 수 있는 여러 가지 유용한 기능이 포함되어 있습니다.

[에셋] 패널을 열려면 [창] > [에셋]을 선택합니다. 또는 [에셋] 탭을 클릭하여 패널 모음에서 [에셋] 패널을 활성화할 수도 있습니다.

에셋 패널

[에셋] 패널에서 임의의 에셋(또는 선택된 에셋 집합)을 마우스 오른쪽 단추로 클릭한 후 메뉴 옵션을 적용할 수 있습니다. 어떤 유형의 파일을 클릭하는가에 따라 표시되는 메뉴 항목이 조금씩 다를 수 있습니다. 옵션은 다음과 같습니다.

  • 링크 포함: 배치된 원래 파일에 대한 참조 링크를 제거합니다. 이 옵션을 선택하면 [에셋] 패널의 여러 가지 파일 관리 기능을 사용할 수 없게 되지만, Adobe Muse 파일에 필요한 에셋이 자체 포함되므로 .muse 파일을 다른 디자이너와 공유할 때 경고가 나타나는 불편함을 방지할 수 있습니다.
  • 다시 링크: 에셋을 배치한 후 에셋의 위치나 이름을 변경했을 때 에셋 파일을 다시 연결할 수 있습니다. 창이 열리면 다시 해당 파일을 찾아 선택합니다. 이렇게 하면 [에셋] 패널에서 경고 아이콘이 사라집니다.
  • 에셋으로 이동/에셋 사용으로 이동: Adobe Muse에서 작업할 때 업로드된 에셋 또는 배경 이미지를 사용한 위치를 추적하기 어려울 수 있습니다. 이제 새로운 에셋 사용으로 이동 옵션을 활용하여 배경 이미지 사용을 추적하고 웹 사이트에 에셋을 업로드할 수 있습니다.
  • 원본 편집: 마스터 파일을 변경할 수 있도록 (컴퓨터에 저장되어 있는) 원래 이미지를 엽니다. 파일 형식과 컴퓨터의 파일 연결 설정에 따라 해당 에셋을 변경하는 데 사용할 수 있는 외부 편집기에 파일이 열립니다.
  • 제목 추가: 선택한 에셋의 제목과 대체 텍스트를 입력하는 데 사용할 수 있는 필드가 포함된 [이미지 속성] 대화 상자가 열립니다. 제목과 대체 텍스트는 사이트를 게시할 때 사이트 코드에 포함되는 짧은 텍스트 설명입니다. 제목은 에셋에 대한 추가 정보를 제공하기 위한 것입니다. 제목은 에셋에 대한 설명을 담아 기억하기 쉽고 간결하게 작성해야 합니다. 브라우저에 따라서는 이미지 위에 마우스 커서를 올려 놓았을 때 제목 텍스트가 툴팁으로 표시됩니다.
  • 대체 텍스트 추가: 선택한 에셋의 제목과 대체 텍스트를 입력하는 데 사용할 수 있는 필드가 포함된 [이미지 속성] 대화 상자가 열립니다. 제목과 대체 텍스트는 사이트를 게시할 때 사이트 코드에 포함되는 짧은 텍스트 설명입니다. 대체 텍스트는 브라우저에 이미지가 표시되지 않도록 설정해 둔 사용자나 화면 판독기 또는 기타 탐색 보조 장치를 사용하여 웹을 탐색하는 시각 장애인 방문자를 위한 대체 정보 소스입니다. 대부분의 검색 엔진에서는 사이트를 인덱싱하는 데 대체 텍스트를 사용합니다. 따라서 대체 텍스트를 추가하면 사이트를 검색 결과 상위에 노출하는 데 도움이 됩니다.
  • Finder에 나타내기: 컴퓨터에 있는 원래 파일의 위치를 Mac Finder 또는 Windows 탐색기의 파일 계층 구조 내에 표시합니다.
  • 전체 경로 복사: 하드 드라이브에 있는 원래 에셋 파일 위치를 다음과 유사한 형식으로 클립보드에 복사합니다. file:///Users/User_Name/Folder_Name/Subfolder_Name/image.jpg

에셋 패널을 사용해 파일 관리

[에셋] 패널의 측면 또는 아래쪽 가장자리를 드래그하여 패널을 확장하면 목록을 더 많이 표시할 수 있습니다.

에셋 목록의 순서를 조정하려면 위쪽에 있는 머리글 막대를 클릭합니다. 에셋 이름, 오류 아이콘 또는 페이지 이름을 기준으로 삼아 오름차순이나 내림차순으로 목록의 순서를 재정렬할 수 있습니다. 각 머리글은 그에 상응하는 열의 항목을 정렬하는 전환 단추와도 같은 역할을 합니다.

동일한 이미지 파일의 인스턴스 여러 개를 배치하면 원래 에셋 아래 해당 인스턴스가 함께 표시됩니다. 원래 에셋의 이름 왼쪽에 있는 화살표를 클릭하여 에셋 집합을 확장하거나 축소할 수 있습니다. 이 기능을 사용하면 에셋 목록의 길이를 짧게 줄이고 [에셋] 패널에서 항목을 간편하게 찾을 수 있습니다.

에셋 패널
이미지 이름 왼쪽에 있는 화살표를 클릭하여 인스턴스 집합을 확장하거나 축소할 수 있습니다.

참고:

이미지를 배치한 다음 이를 복제하여 편집(회전 또는 자르기 등)한 경우, 사이트를 내보내거나 게시하면 회전하거나 잘라낸 이미지를 내보내는 데 처음과 다른 파일 이름이 사용됩니다. 이미지를 배치한 다음 이를 자르지 않고 복제 또는 크기 조정한 경우, 크기가 작은 모든 이미지는 가장 큰 이미지를 참조 대상으로 가리키며, 인스턴스의 치수는 코드를 통해 조정됩니다.

대부분의 일반적인 작업 과정에서 배치한 에셋은 사용자가 선택한 원래 파일에 대한 참조를 유지할 수 있도록 .muse 파일에 연결됩니다. 예를 들어, [파일] > [배치]를 선택하고 데스크톱에서 이미지를 찾아 선택한 다음 이를 페이지에 배치하면 해당 이미지가 페이지 디자인에 추가되고, 이미지의 이름이 [에셋] 패널에 추가되며, 원래 파일이 있는 데스크톱 위치를 가리키는 참조 링크가 설정됩니다.

따라서 Photoshop, Illustrator, Fireworks 등과 같은 이미지 편집 프로그램을 사용하여 웹에 최적화된 이미지 파일을 내보낼 때는 사이트의 .muse 파일이 들어 있는 데스크톱 폴더를 대상 위치로 삼는 것이 좋습니다. 이렇게 하면 사이트의 모든 요소를 로컬 폴더 하나로 관리할 수 있습니다. (이 방법을 사용하면 프로젝트를 주고받기도 쉬우므로 다른 디자이너와 함께 작업하면서 전체 프로젝트를 다른 누군가에게 건네주고 싶지 않을 때도 편리합니다.)

파일을 배치하면 Adobe Muse에서 파일의 위치와 상태를 계속 추적하기 위한 참조 링크가 설정됩니다. 이와 관련하여 다음과 같은 경우 [에셋] 패널에 경고 메시지가 나타납니다.

누락된 이미지: 연결된 파일의 원래 에셋을 배치한 후 원래 에셋의 위치를 옮겼거나 이름을 변경했습니다. 원래 이미지를 이동하거나 이름을 변경한 후 Adobe Muse 프로젝트 파일을 열었을 때는 경고 상자에서 [확인]을 클릭한 다음 [에셋] 패널을 사용하여 에셋을 다시 연결해야 합니다.

누락된 에셋 경고 상자
[확인]을 클릭하여 누락된 에셋 경고 상자를 닫습니다.

오래된 에셋: 연결된 파일의 원래 에셋을 배치한 후 Adobe Muse 이외의 프로그램을 사용하여 원래 에셋을 편집했습니다. 원래 이미지를 변경한 후 Muse 프로젝트 파일을 열었을 때는 대화 상자의 [확인]을 클릭하면 연결 후 수정한 에셋이 자동으로 업데이트됩니다.

에셋 업데이트 경고 상자
[확인]을 클릭하면 연결 후 Muse 이외의 프로그램으로 수정한 에셋이 업데이트됩니다.

업샘플링된 에셋: 연결된 파일을 배치한 후 이를 표시하는 데 사용할 수 있는 데이터보다 더 크게 비율을 조정했습니다. 그 결과로 이미지 품질이 저하되어 이미지가 픽셀 단위로 표시됩니다. 이 문제를 해결하는 방법은 뒤에 나오는 "웹에 표시할 이미지 최적화" 단원을 참조하십시오.

블로우트된 프로젝트 파일: 상당히 큰 이미지 파일을 연결하여 배치한 다음 페이지 디자인에서 이미지를 훨씬 더 작게 비율 조정했습니다. 그 결과로 이미지를 표시하는 데 필요한 것보다 더 많은 데이터가 .muse 파일에 포함되어 .muse 파일의 크기가 불필요하게 커졌습니다. 프로젝트 파일의 크기에 따라서는 사이트를 내보낼 때 성능이 저하되고 사이트를 내보내거나 게시할 때 오류가 발생할 수 있습니다.

이 문제를 해결하는 방법은 업샘플링된 에셋 경고 사용에 대한 정보가 나와 있는 다음 섹션을 참조하십시오.

Adobe Muse 프로젝트에서 에셋 복사 및 붙여넣기

컨텐트를 복사한 다음 페이지에 직접 붙여넣는 방법을 사용하여 컨텐트를 Adobe Muse로 가져올 수도 있습니다. 이 방법을 사용하면 브라우저 창, 이메일 메시지 또는 이미지 편집 프로그램을 통해 기존 사이트의 에셋을 곧바로 복사할 수 있으므로 잠재적 고객을 위한 와이어프레임 사이트를 매우 신속하게 만들어야 할 때 매우 편리합니다.

그러나 일반적으로 말해서 최종 사이트 디자인을 만들 때는 컨텐트를 복사하여 붙여넣는 방법이 썩 좋은 것은 아닙니다. 이렇게 하면 아래에서 설명하는 [에셋으로 이동], [원본 편집], [Finder에 나타내기], [더 큰 크기 가져오기] 옵션 등과 같은 [에셋] 패널의 수많은 기능을 제대로 활용할 수 없기 때문입니다. 이는 파일을 붙여넣은 경우 컴퓨터에 있는 마스터 파일에 대한 참조 링크를 계속 유지할 수 없다는 의미이기도 합니다. 이렇게 붙여넣은 에셋 파일은 연결되는 것이 아니라 "포함"되는 것이기 때문입니다.

원한다면 기존에 배치된 임의의 에셋을 포함된 에셋으로 전환할 수 있습니다. 이를 위해서는 [링크 포함] 옵션을 선택하면 됩니다. 때로는 Adobe Muse 사이트의 모든 에셋을 연결이 아닌 포함 방식으로 처리하는 편이 더 유리할 수도 있습니다. 예를 들어, 다른 디자이너와 협력하여 사이트 작업을 할 때는 원래 이미지가 변경되더라도 "오래된 에셋" 오류가 발생하지 않게 하고 싶을 수 있습니다. 이 경우 소스 파일에 대한 참조 링크를 제거한 것이 아니므로 그와 같은 경고가 더 이상 표시되지 않습니다. 그러나 이 방법을 사용하면 [에셋] 패널에서 제공하는 여러 가지 유용한 기능을 사용할 수 없다는 점도 기억해야 합니다.

하나의 폴더로 에셋 추출

Adobe Muse의 모든 에셋 파일을 로컬 컴퓨터 또는 외부 하드 디스크에 있는 하나의 폴더로 복사할 수 있습니다. 모든 에셋을 백업하거나 프로젝트를 특정 컴퓨터에서 다른 컴퓨터로 이동하려는 경우에 에셋을 하나의 폴더에 저장하면 매우 유용합니다.

모든 에셋을 수집하려면 다음을 수행하십시오.

  1. [에셋] 패널에서 [에셋 모두 수집] 아이콘을 클릭합니다.

    에셋 모두 수집 아이콘
    하나의 위치로 모든 에셋 수집

  2. 에셋을 컴퓨터 또는 하드 디스크의 폴더에 저장합니다.

    에셋이 지정한 위치에 저장됩니다. 추출된 총 에셋 수가 포함된 컬렉션 요약이 Adobe Muse에 표시됩니다.

이 작업에는 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License의 라이센스가 부여되었습니다.  Twitter™ 및 Facebook 게시물은 Creative Commons 약관을 적용받지 않습니다.

법적 고지 사항   |   온라인 개인 정보 보호 정책