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

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

웹 사이트의 페이지를 채우고 구성하기 위한 사이트맵 만들기

(Muse를 사용하거나 웹 사이트를 만들 때 사용되는) "사이트맵"이라는 용어는 웹 사이트 하나에 포함되는 여러 페이지의 계층 구조를 가리킵니다. Muse에서 새로 만드는 모든 사이트에는 기본적으로 Home 페이지 하나가 포함됩니다. 

이는 방문자가 브라우저를 통해 라이브 사이트를 볼 때 맨 처음 로드되는 페이지입니다. 원한다면 Home 페이지의 이름을 "Index"라고 변경할 수 있습니다. 메뉴 막대 위젯을 사용하는 경우 동적 메뉴에 각 페이지의 이름이 자동으로 표시 및 연결됩니다. 페이지 이름은 언제든지 변경할 수 있습니다.

새 사이트를 처음 만들 때는 일반적으로 [플랜] 보기를 사용하여 사이트에 포함할 여러 개의 새 사이트 페이지를 만듭니다. 각 페이지를 만들 때는 축소판 아래 있는 이름 필드를 클릭하고 페이지에 대한 설명이 담긴 이름을 입력하는 것이 중요합니다. 

각 페이지 축소판은 페이지의 디자인을 나타냅니다. 언제든지 페이지 축소판을 두 번 클릭하여 [디자인] 보기에서 열고 해당 페이지를 편집할 수 있습니다. 

사이트의 구조를 정의하려면 [플랜] 보기에서 페이지 축소판을 클릭한 후 계층 구조 내의 다른 곳으로 드래그하여 위치를 조정하면 됩니다. 페이지의 여러 층위(서로 관련된 컨텐트를 포함하는 하위 페이지와 최상위 페이지)를 만들고 각 층위에 페이지를 배치할 수 있습니다. 

참고: "사이트맵"이라는 용어는 사이트의 전체 웹 페이지 목록을 설명하는 데 사용되기도 합니다. 일반적으로 이는 서로 연결된 페이지들을 인덱싱하기 위해 Google 및 기타 검색 엔진에 사용되는 XML 문서로서, 검색 결과에 표시되는 사이트의 노출 순위에 영향을 줍니다.

[플랜] 보기에 페이지를 추가하고 페이지 위치를 조정하여 사이트맵 만들기

이 단원에서는 [플랜] 보기에 사이트의 페이지를 추가하고 그 구조를 변경하는 방법을 설명하겠습니다. 사이트맵 인터페이스 내에서 여러 페이지를 구성하고 배치하여 구조를 설정하면 사이트 방문자에게 제공하고자 하는 컨텐트에 맞게 페이지를 배열하고 재배치할 수 있습니다. 예를 들어, 서비스에 대한 개요를 설명하는 최상위 페이지가 있을 때, 각 서비스 유형에 대해 좀 더 자세히 설명하는 하위 페이지를 원하는 수만큼 추가할 수 있습니다.

[플랜] 보기에서 각 페이지 축소판 위에 마우스 커서를 올려 놓으면 축소판 이미지의 양쪽 측면과 아래쪽에 플러스 기호(+) 단추가 나타납니다. 

최상위 및 하위 페이지를 만드는 단계별 작업 과정은 다음과 같습니다.

1. [플랜] 보기에서 페이지 축소판 아래 있는 "Home" 레이블을 두 번 클릭합니다. 필드에 텍스트를 입력하여 이름을 모두 대문자인 "HOME"으로 변경합니다. 

2. "HOME" 페이지 축소판 위에 마우스 커서를 놓습니다. "HOME" 페이지 축소판의 오른쪽에 있는 플러스 기호(+)를 클릭하여 새 페이지를 추가합니다. 새 페이지의 축소판 아래 있는 필드를 클릭하고 페이지 이름을 "THE KOFFEE"라고 입력합니다.

3. "THE KOFFEE" 페이지 축소판 위에 마우스 커서를 놓습니다. "THE KOFFEE" 축소판의 오른쪽에 있는 플러스 기호(+)를 클릭하여 새 페이지를 하나 더 만듭니다. 새 페이지의 이름을 "KART MAP"이라고 지정합니다.

4. "THE KOFFEE" 페이지 축소판 위에 마우스 커서를 놓습니다. "THE KOFFEE" 축소판의 아래쪽에 있는 플러스 기호(+)를 클릭하여 한 층위 아래 페이지를 추가합니다. 이 페이지의 이름을 "Origins"라고 지정합니다

(그림 14 참조).

 

그림 14. 페이지 축소판 위에 마우스 커서를 올려 놓고 플러스 기호(+)가 나타나면 이를 클릭하여 사이트 페이지의 구조를 만듭니다. 

플러스 기호(+)를 클릭하여 페이지를 추가할 수 있을 뿐만 아니라, 페이지의 축소판을 클릭한 채 원하는 위치로 드래그하여 계층 구조 내에서 임의의 페이지 위치를 조정할 수 있습니다. 

5. 사이트맵에서 페이지 하나를 드래그하여 다른 두 페이지 사이에 놓아 보면 사이트 구조를 바꾸고 사이트맵을 변경하기가 매우 쉽고 간단하다는 것을 알 수 있을 것입니다. 사이트맵을 변경하는 방법을 충분히 실습했으면 페이지를 드래그하여 위에 나와 있는 것과 같이 다시 원래 위치에 놓습니다.

참고: 

사이트맵에서 기존 페이지를 삭제하려면 페이지의 축소판 위에 마우스 커서를 놓고 축소판의 오른쪽 위 가장자리에 표시되는 둥근 X 단추를 클릭합니다. 확인 대화 상자가 나타나면 [확인]을 클릭하여 해당 페이지를 삭제합니다. 페이지를 실수로 삭제했을 때는 Command/Ctrl+Z 키를 눌러 삭제 작업을 실행 취소하거나 [편집] > [페이지 삭제 실행 취소]를 선택하여 방금 삭제한 페이지를 복원할 수 있습니다. 

브라우저 영역에 대한 단색 또는 그라데이션 채우기 색상 설정

이 단원에서는 브라우저 영역의 모양을 변경하는 방법을 설명합니다. 브라우저 채우기 설정은 방문자가 사용하는 브라우저의 창 영역, 즉 페이지 컨텐트 주위를 둘러싸는 영역의 모양에 적용됩니다.

1. [플랜] 보기에서 "A-마스터" 페이지를 두 번 클릭하여 [디자인] 보기로 엽니다.

2. [컨트롤] 패널에서 [브라우저 채우기] 링크 자체를 클릭하여 메뉴를 확장합니다. (이 링크 오른쪽에 있는 색상 피커를 선택하지 않도록 주의하십시오.) 이 메뉴에는 단색 및 그라데이션 채우기 색상 중 하나를 선택하는 데 사용할 수 있는 라디오 단추 2개가 있습니다. 

3. [채우기 유형]을 [그라데이션]으로 설정하면 색상 칩이 그라데이션의 처음 색상으로 시작하여 마지막 색상에서 끝나도록 설정되는 것을 알 수 있습니다(그림 15 참조).

 

그림 15. [채우기 유형]을 [그라데이션]으로 설정하고 색상 칩을 사용하여 그라데이션의 첫 색상과 마지막 색상을 선택합니다. 

4. [방향]을 [가로] 또는 [세로]로 설정하여 그라데이션의 방향을 설정합니다. 

참고: 

[채우기 유형]을 [그라데이션]으로 설정했을 때는 브라우저의 배경 채우기로 이미지가 표시되도록 설정할 수 없습니다. 다음 단원에서는 이미지 파일을 설정하는 방법을 설명합니다. 

5. 여기에서는 자습서 진행 방향에 맞춰 [채우기 유형]을 [단색]으로 설정하고 다음 단원으로 넘어가겠습니다.

마스터 페이지에 배경 이미지 채우기 추가

이번에는 마스터 페이지의 배경에 이미지를 추가하는 방법을 살펴보겠습니다. 일반적으로 말해서 마스터 페이지에는 사이트의 여러 페이지에 공통으로 표시할 요소가 포함됩니다.

1. [디자인] 보기에서 "A-마스터" 페이지 편집을 계속 진행합니다.

2. [브라우저 채우기] 메뉴에서 [채우기 유형]이 [단색]으로 설정되었는지 확인합니다. [이미지] 폴더 아이콘을 클릭한 후 브라우저 창의 배경을 채우는 데 사용할 이미지를 선택합니다(그림 16 참조).

 

그림 16. [이미지] 설정 옆에 있는 폴더 아이콘을 클릭하고 배경 이미지를 선택합니다. 

3. [가져오기] 대화 상자가 나타나면 KevinsKoffeeKart 폴더를 찾은 다음 bk-map.gif라는 이미지를 선택합니다. [열기]를 클릭하여 배경 이미지 파일을 선택하고 [가져오기] 대화 상자를 닫습니다. [맞춤] 메뉴를 [원래 크기]로 설정합니다. [위치] 섹션에 있는 9개의 격자 위치 중 정중앙 사각형을 클릭합니다. 이렇게 하면 브라우저 창의 한가운데로 이미지의 표시 위치가 설정됩니다(그림 17 참조). 

 

그림 17. [채우기] 메뉴의 [이미지] 섹션에 있는 폴더 아이콘을 클릭하고, 채우기로 사용할 배경 이미지를 선택합니다. 

채우기로 사용할 배경 이미지를 선택한 후 마음이 바뀌었을 때는 폴더 아이콘 옆에 있는 휴지통 아이콘을 클릭하여 선택 이미지를 채우기에서 삭제할 수 있습니다. 

4. [브라우저 채우기] 메뉴에서 [맞춤] 메뉴를 사용하여 옵션을 [원래 크기]로 설정합니다. 여러 가지 옵션을 사용하여 배경 이미지를 바둑판식으로 배열할 수도 있습니다. 페이지 디자인을 만들 때 바둑판식 배열 옵션을 사용하면 이미지가 사방으로 반복되게 하여 방문자의 모니터 크기와 상관없이 브라우저 창을 가득 채울 수 있습니다. 

5. [색상] 섹션 옆에 있는 색상 피커 견본을 클릭합니다. [색상 견본] 패널이 표시됩니다. [스포이드] 도구를 선택한 다음 지도의 단색 퍼티 색상 영역을 클릭하여 이 색상을 배경색으로 설정합니다. 화면을 다른 아무 곳이나 클릭하여 [색상 견본] 패널을 닫습니다. 

6. [위치] 섹션에 있는 9개의 격자 위치 중 정중앙 사각형을 클릭합니다. 이렇게 하면 브라우저 창의 한가운데로 이미지의 표시 위치가 설정됩니다. 그런 다음 화면을 다른 아무 곳이나 클릭하여 [브라우저 채우기] 메뉴를 닫습니다.

사이트를 게시하거나 내보낼 때 Muse에서 이미지를 최적화하는 방식 설명

방금 마스터 페이지에 배치한 bk-map.gif 이미지는 웹에 표시할 것을 염두에 두고 Adobe Photoshop® 소프트웨어를 사용하여 만든 것입니다. 인쇄용 이미지를 Muse에 사용할 수도 있습니다. 이 경우에는 이미지가 웹에 적합한 형식으로 변환됩니다. 그러나 이미지를 웹에 적합하게 변환하기 위해서는 이미지를 압축하고 이미지 품질을 어느 정도 저하시켜야 할 때가 많습니다. 웹을 염두에 두지 않고 작성된 이미지를 Muse에 추가하면 이미지가 자동으로 압축됩니다. 사이트를 게시하거나 내보낼 때 자동으로 처리된 결과에 만족하지 않으면 Photoshop 또는 Adobe Fireworks® 소프트웨어를 사용하여 웹에 적합한 이미지를 직접 만들고 최적화해 보십시오. 이 경우 원래 이미지를 삭제하고 새로 최적화한 이미지를 페이지에 배치한 다음 사이트를 다시 게시하거나 내보내면 됩니다. 

Muse에 사용된 이미지를 자르거나, 크기를 바꾸거나, 경사, 그림자 또는 광선을 추가하는 등 이미지를 임의로 변경하면 Muse를 통해 이미지가 새로 만들어지고 자동으로 압축된다는 점을 주의해야 합니다. 최적화 과정을 좀 더 세밀한 부분까지 제어하고 싶으면 Photoshop이나 Fireworks를 사용하여 이미지에 효과를 더하고, 이미지 편집 프로그램을 사용하여 파일을 최적화한 다음, 이미지를 Muse에 배치하여 압축 수준을 직접 설정해야 합니다. Photoshop의 PSD 파일을 PNG, JPG 또는 GIF 파일로 내보내지 않고 Muse에 직접 배치할 수도 있습니다. 그러나 이 경우에도 Muse의 자동 압축 알고리즘을 통해 새 이미지 파일이 자동으로 생성된다는 점에는 차이가 없습니다.

에셋 패널을 사용하여 사이트 파일 관리 

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

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

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

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

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

 

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

참고: 

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

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

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

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

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

 

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

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

 

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

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

블로우트된 프로젝트 파일: 상당히 큰 이미지 파일을 연결하여 배치한 다음 페이지 디자인에서 이미지를 훨씬 더 작게 비율 조정했습니다. 그 결과로 이미지를 표시하는 데 필요한 것보다 더 많은 데이터가 .muse 파일에 포함되어 .muse 파일의 크기가 불필요하게 커졌습니다. 프로젝트 파일의 크기에 따라서는 사이트를 내보낼 때 성능이 저하되고 사이트를 내보내거나 게시할 때 오류가 발생할 수 있습니다. 이 문제를 해결하는 방법은 뒤에 나오는 "경고 아이콘 설명" 단원에서 업샘플링된 에셋 경고 아이콘에 대한 부분을 참조하십시오. 

에셋 복사 및 붙여넣기

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

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

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

에셋 패널 메뉴 옵션 사용

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

링크 포함: 배치된 원래 파일에 대한 참조 링크를 제거합니다. 이 옵션을 선택하면 [에셋] 패널의 여러 가지 파일 관리 기능을 사용할 수 없게 되지만, Muse 파일에 필요한 에셋이 자체 포함되므로 .muse 파일을 다른 디자이너와 공유할 때 경고가 나타나는 불편함을 방지할 수 있습니다.

다시 링크: 에셋을 배치한 후 에셋의 위치나 이름을 변경했을 때 에셋 파일을 다시 연결할 수 있습니다. 창이 열리면 다시 해당 파일을 찾아 선택합니다. 이렇게 하면 [에셋] 패널에서 경고 아이콘이 사라집니다.

에셋으로 이동: 붙여넣은 이미지가 포함된 페이지를 표시하도록 [디자인] 모드를 업데이트합니다. 이 기능을 사용하면 사이트 디자인의 에셋으로 신속하게 이동할 수 있습니다.

원본 편집: 마스터 파일을 변경할 수 있도록 (컴퓨터에 저장되어 있는) 원래 이미지를 엽니다. 파일 형식과 컴퓨터의 파일 연결 설정에 따라 해당 에셋을 변경하는 데 사용할 수 있는 외부 편집기에 파일이 열립니다.

제목 추가: 선택한 에셋의 제목과 대체 텍스트를 입력하는 데 사용할 수 있는 필드가 포함된 [이미지 속성] 대화 상자가 열립니다. 제목과 대체 텍스트는 사이트를 게시할 때 사이트 코드에 포함되는 짧은 텍스트 설명입니다. 제목은 에셋에 대한 추가 정보를 제공하기 위한 것입니다. 제목은 에셋에 대한 설명을 담아 기억하기 쉽고 간결하게 작성해야 합니다. 브라우저에 따라서는 이미지 위에 마우스 커서를 올려 놓았을 때 제목 텍스트가 툴팁으로 표시됩니다. 

대체 텍스트 추가: 선택한 에셋의 제목과 대체 텍스트를 입력하는 데 사용할 수 있는 필드가 포함된 [이미지 속성] 대화 상자가 열립니다. 제목과 대체 텍스트는 사이트를 게시할 때 사이트 코드에 포함되는 짧은 텍스트 설명입니다. 대체 텍스트는 브라우저에 이미지가 표시되지 않도록 설정해 둔 사용자나 화면 판독기 또는 기타 탐색 보조 장치를 사용하여 웹을 탐색하는 시각 장애인 방문자를 위한 대체 정보 소스입니다. 대부분의 검색 엔진에서는 사이트를 인덱싱하는 데 대체 텍스트를 사용합니다. 따라서 대체 텍스트를 추가하면 사이트를 검색 결과 상위에 노출하는 데 도움이 됩니다. 

Finder에 나타내기: 컴퓨터에 있는 원래 파일의 위치를 Mac Finder 또는 Windows 탐색기의 파일 계층 구조 내에 표시합니다. 

전체 경로 복사: 하드 드라이브에 있는 원래 에셋 파일의 위치를 클립보드에 복사합니다. 복사되는 파일 경로의 형식은 다음과 같습니다.

file:///Users/User_Name/Folder_Name/Subfolder_Name/image.jpg

웹에 표시할 이미지 최적화

연결된 파일을 배치할 때 그 해상도가 매우 높아서 해당 파일의 크기가 페이지에서 원본보다 훨씬 더 작게 비율 조정되면 내보내기 오류가 발생하거나 내보내기 작업의 속도가 느려질 수 있습니다. 이는 썩 바람직한 작업 결과가 아닙니다. (2,000픽셀이 넘는) 전체 크기 이미지를 반복 배치한 다음 이를 디자인에 맞게 비율 조정하면 문제가 더 확연하게 드러납니다. 

매우 큰 이미지 파일을 배치하면 Muse에서 크기를 자동으로 제한하여 이미지 폭을 2048픽셀로 비율 조정합니다. [에셋] 패널에서 에셋의 이름 위에 마우스 커서를 올려 놓으면 배치된 이미지의 원래 크기와 리샘플링된 이미지 크기(최대 크기 제한을 넘지 않도록 비율 조정된 크기)를 비교한 정보가 툴팁으로 표시됩니다. 

사이트의 웹 그래픽은 이미지 편집 프로그램을 사용하여 먼저 크기를 조정하고 최적화한 다음 페이지에 배치하는 것이 가장 좋습니다. 치수가 매우 큰 이미지를 배치하면 .muse 파일의 크기가 필요 이상으로 훨씬 더 커질 수 있습니다. .muse 파일에서는 이미지를 웹에 표시하는 데 필요하지 않은 초과 픽셀 데이터를 처리해야만 합니다. 따라서 사이트를 내보내고 게시할 때 처리 시간이 더 길어질 수 있습니다. 때로 .muse 파일이 너무 크면 내보내기 또는 게시 프로세스를 진행하는 동안 모든 파일의 크기를 조정하고 최적화하느라 제한 시간을 초과할 수도 있습니다. 이 경우 시간 초과 오류가 발생할 수 있습니다.

이 문제를 해결하려면 에셋 이름을 마우스 오른쪽 단추로 클릭하고 [에셋 크기 최적화]를 선택하여 비율 조정된 이미지를 표시하는 데 필요하지 않은 데이터를 제거해야 합니다. 

최적화된 이미지를 비율 조정하여 디자인에 이미지가 더 크게 표시되게 하면 업샘플링된 플러스 에셋 오류가 발생할 수 있습니다. 이 문제를 해결하려면 [더 큰 크기 가져오기]를 선택하여 비율 조정된 이미지를 적절한 크기로 표시하는 데 필요한 이미지 데이터를 추가로 가져와야 합니다. 

경고 아이콘 설명

다음은 [에셋] 패널에 표시되는 경고 아이콘의 목록입니다.

 포함된 에셋 - 이 경고를 제거하려면 [다시 링크]를 선택한 다음 데스크톱에서 원래 파일을 찾아 선택합니다. 이렇게 하면 에셋에 대한 참조 링크가 다시 만들어집니다. 포함된 에셋 파일에 대한 자세한 내용은 앞에 나오는 [링크 포함] 옵션의 설명 부분을 참조하십시오.

 누락된 링크 - 에셋을 페이지에 배치한 이후 원래 파일의 위치를 이동했거나 이름을 변경했습니다. 이 경고를 제거하려면 [다시 링크]를 선택한 다음 데스크톱에서 파일을 찾아 선택합니다.

  오래된 링크 - 에셋을 페이지에 배치한 이후 원래 파일을 편집했습니다. 이 경고를 제거하려면 [링크 업데이트]를 선택합니다. 링크로 연결된 에셋이 원래 파일과 일치하도록 업데이트됩니다. 이 방법을 사용하면 사이트를 신속하게 업데이트할 수 있습니다.

 업샘플링된 에셋 - 연결된 파일을 배치한 이후 이를 표시하는 데 현재 사용할 수 있는 이미지 데이터보다 더 크게 비율 조정한 결과로 이미지가 픽셀 단위로 표시되고 이미지 품질이 저하될 수 있음을 알리는 경고입니다. 이 경고를 제거하려면 [에셋으로 이동]을 선택합니다. 그런 다음 에셋을 편집하여 페이지에 표시되는 크기를 100% 이하로 비율 조정합니다. 이렇게 하면 이미지를 표시하는 해상도가 적정 수준으로 수정됩니다. 또는 [에셋으로 이동]을 선택한 후 배치된 이미지를 삭제하고 해상도가 더 높게 설정된 다른 이미지를 배치해도 됩니다. 

 업샘플링된 플러스 에셋 - 배치된 원래 파일에 더 많은 정보가 있지만 디자인에서 크기 조정된 연결 이미지를 표시하는 데 현재 사용할 수 있는 이미지 데이터가 부족합니다. 이 경고를 제거하려면 [더 큰 크기 가져오기]를 선택합니다. 자세한 내용은 앞에 나오는 "웹에 표시할 이미지 최적화" 단원의 설명을 참조하십시오.

계속하여 Adobe Muse 시작하기 제3부에서는 페이지를 계속 편집하면서 테두리(획 색상)를 추가하고 몇 가지 그래픽 효과를 적용해 보겠습니다.