Adobe Muse 내에서 다양한 개체를 구성, 관리 및 변형하는 방법을 알아보십시오. 이미지를 Adobe Muse용으로 최적화하는 방법에 대해 읽어보십시오.

참고:

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

Adobe Muse의 개체에는 외부 소스에서 가져오거나 만들어진 디자인 요소가 포함됩니다. 이미지, 텍스트, 이미지 프레임을 웹 페이지에 추가할 수 있으며 Adobe Muse 내의 다양한 도구를 사용하여 조작할 수 있습니다.

가장 일반적인 작업 과정 중의 하나는 Adobe Photoshop에서 단추를 만들어 가져오는 것입니다. 이를 위해 Adobe Muse는 Photoshop에서 만들어진 레이어 및 레이어 컴포지션을 인식합니다. Adobe Muse를 사용하여 이 레이어를 웹 사이트 내 단추 상태로 설정할 수 있습니다.

웹 페이지 캔버스에 배치된 개체의 경우, 웹 사이트의 디자인 요구에 맞추어 변환을 추가할 수 있습니다. 간격 중첩 요소를 처리하기 위해 적합한 여백과 간격 속성을 추가하는 개체를 따로 분리할 수도 있습니다.

Adobe Muse 프로젝트에 이미지 사용

Adobe Muse 프로젝트에 이미지 프레임 배치

[이미지 프레임] 도구를 클릭하여 Adobe Muse 프로젝트에 직접 이미지 프레임을 배치할 수 있습니다. [도구] 패널에서 [이미지 프레임] 도구를 클릭한 다음, 프로젝트에서 필요한 위치에 배치합니다.

  1. [도구] 패널에서 [사각형 프레임 도구] 또는 [타원 프레임 도구]를 클릭합니다.

    Adobe Muse의 [이미지 프레임] 도구
    Adobe Muse에서 사각형 및 타원형 프레임을 끌어 놓습니다.

  2. [이미지 프레임] 도구를 클릭하고 이미지 프레임을 끌어 프로젝트에 배치합니다.

    여러 이미지 프레임을 계속 클릭하여 프로젝트에 배치할 수 있습니다. 디자인 요구 사항에 맞게 이미지를 이동하고 크기를 조정할 수도 있습니다.

    프레임에 색상을 채우거나 이미지를 배치할 수 있습니다. 이미지를 배치하려면 프레임으로 이미지를 끌어 놓습니다. 프레임에 맞게 이미지 크기가 조정됩니다.

    사각형 및 타원형 이미지 프레임
    사각형 및 타원형 이미지 프레임

페이지에 이미지 한 개 배치

Muse 작업 영역은 배치된 이미지를 먼저 로드한 다음 페이지에서 해당 이미지를 표시할 위치를 클릭한다는 점에서 Illustrator나 InDesign과 작동 방식이 비슷합니다. 페이지에 직접 배치하여 이미지 파일을 추가하려면 다음을 수행하십시오.

  1. [파일] > [배치]를 선택하거나 바로 가기 키 Command+D(Mac) 또는 Ctrl+D(Windows)를 사용하여 [가져오기] 대화 상자를 엽니다.
  2. 샘플 파일 폴더에 있는 made-with-muse.png라는 파일을 찾아 선택합니다. [열기]를 클릭하여 파일을 선택하고 [가져오기] 대화 상자를 닫습니다.

페이지 아래쪽을 한 번 클릭하여 이미지를 배치합니다. 이 예제에서는 이미지를 전체 크기로 배치할 것이므로 마우스 단추를 한 번만 클릭합니다. 배치한 이미지의 크기를 조정하려면 마우스 단추를 클릭한 채 드래그하여 이미지의 비율을 특정 크기로 조정하면 됩니다. 

[선택] 도구로 이미지를 드래그하여 바둑판식으로 배열된 바닥글 사각형의 세로 가운데 지점으로 가져갑니다. 이미지를 가운데 지점에 정렬하기 쉽도록 빨간색 안내선과 옥색 측정 상자가 잠시 나타났다가 사라지는 것을 알 수 있습니다.

이 변경 작업을 끝으로 바닥글 섹션이 거의 완성되었습니다.

Adobe Muse에서 이미지 배치하기
사각형 배경 이미지 한 개를 바둑판식으로 배열하고 그 위에 가운데 정렬된 이미지를 배치하여 바닥글을 구성합니다.

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

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

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

웹에 표시할 이미지 최적화

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

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

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

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

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

자리 표시자 모양 그리기

자리 표시자 모양으로는 타원, 사각형, 다각형이 가능하며 모양에 이미지, 텍스트 또는 색상을 채울 수 있습니다.

  1. [도구] 패널에서 [사각형 도구] 또는 [타원 도구]를 선택합니다.

    Adobe Muse에서 자리 표시자 모양 그리기
    도구 모음에서 [사각형] 도구 또는 [타원] 도구를 선택

  2. 사각형 또는 타원 모양을 끌어 Adobe Muse 프로젝트에 배치합니다. 

    • 사각형을 만들려면 Shift 키를 누른 채 [사각형 도구]를 클릭합니다.
    • 원을 만들려면 Shift 키를 누른 채 [타원 도구]를 클릭합니다.

    모양에 그래픽, 텍스트 또는 색상을 채울 수 있습니다.

  3. 개체 맞춤 속성을 설정하려면 사각형 또는 타원을 선택하고 [개체] > [맞춤]을 클릭합니다.

    다음 [맞춤] 옵션 중 하나를 선택하면 됩니다.

    • 비율에 맞게 컨텐트 맞추기: 컨텐트 비율을 유지한 채 프레임에 맞게 컨텐트 크기를 조정합니다. 프레임 치수는 변경되지 않습니다. 컨텐트와 프레임의 비율이 다르면 일부 빈 공간이 생깁니다.
    • 비율에 맞게 프레임 맞추기: 컨텐트의 비율을 유지한 채 전체 프레임에 가득 차도록 컨텐트 크기를 조정합니다. 프레임 치수는 변경되지 않습니다. 내용과 프레임의 가로 세로 비율이 서로 다른 경우 프레임의 테두리 상자를 기준으로 내용의 일부가 잘릴 수 있습니다.
    Adobe Muse에서 개체에 대해 비율에 맞게 컨텐트 맞추기
    개체에서 비율에 맞게 컨텐트 맞추기

    개체에서 비율에 맞게 프레임 맞추기(Adobe Muse)
    개체에서 비율에 맞게 프레임 맞추기

Photoshop 파일을 롤오버 단추로 배치

  1. [파일] > [Photoshop 단추 배치]를 선택합니다. 표시된 [Photoshop 가져오기] 대화 상자에서 PSD 파일을 찾습니다. [선택](Mac) 또는 [열기](Windows)를 클릭하여 파일을 선택합니다.

  2. [Photoshop 가져오기 옵션] 대화 상자가 나타납니다. 여기서 잠시 시간을 내어 설정이 어떤 식으로 적용되는지 살펴보도록 하겠습니다. 이 대화 상자의 메뉴를 사용하면 단추의 [표준 상태](페이지를 처음 로드했을 때 표시되는 단추 모양), [롤오버 상태](방문자가 마우스 커서를 단추 위에 올려 놓았을 때 표시되는 단추 모양), [마우스 누름 상태](방문자가 단추를 클릭했을 때 표시되는 단추 모양)에 대해 Photoshop 파일의 어느 레이어를 표시할지 지정할 수 있습니다. 세 가지 상태 메뉴에 Photoshop 레이어의 이름이 표시되며, 선택한 각 레이어가 어떻게 표시되는지 시각적으로 확인할 수 있는 축소판 이미지가 함께 제시됩니다.

  3. 이 예제의 경우 Photoshop 레이어가 단추 상태를 표시하는 데 맞게 올바른 순서로 이미 정돈되어 있습니다. 따라서 메뉴 설정을 변경할 필요가 없습니다. [확인]을 클릭하여 기본적으로 정돈되어 있는 상태를 그대로 적용합니다.

    [Photoshop 가져오기 옵션] 대화 상자를 사용하여 기존 Photoshop 레이어를 각각에 상응하는 단추 상태에 연결합니다.
    [Photoshop 가져오기 옵션] 대화 상자를 사용하여 기존 Photoshop 레이어를 각각에 상응하는 단추 상태에 연결합니다.

  4. A-마스터 페이지에서 머리글의 오른쪽 위 영역을 한 번 클릭하여 Photoshop 파일을 원래 크기로 배치합니다.

  5. [미리 보기] 링크를 클릭하여 WebKit 기반의 렌더링 에뮬레이터를 실행합니다. "A-마스터" 페이지가 어떻게 표시되는지 확인합니다. 페이지를 처음 열었을 때는 단추의 [표준 상태]가 표시됩니다. 마우스 커서를 단추 위에 올려 놓으면 단추의 모양이 살짝 달라져서 갈색 커피 방울의 색상이 좀 더 밝은 톤으로 바뀝니다. 단추를 클릭하면 흰색 텍스트가 연한 갈색으로 바뀝니다. 마우스 단추를 누르고 있는 동안은 텍스트의 연한 갈색이 계속 유지됩니다.

  6. [디자인]을 클릭하여 [디자인] 보기의 A-마스터 페이지 편집 화면으로 돌아갑니다.

Share 단추의 상태가 올바르게 표시된 것을 확인할 수 있습니다. 다음 단원에서는 사이트 탐색 모음의 오른쪽에 있는 커피 방울 이미지를 기준으로 Share 단추를 정렬하는 방법을 살펴보겠습니다.

다음 섹션에서는 마스터 페이지의 머리글 및 바닥글 영역을 정의하는 방법을 살펴보겠습니다.

브라우저 창에 개체 고정

이미지를 배치하거나 다른 방법을 사용하여 아트웍을 페이지에 추가하는 경우 [선택] 도구 및 화살표 키를 사용하여 재배치합니다. 이미지를 이동하면 페이지에 이미 존재하는 다른 요소(이미지, 텍스트 및 미디어)에 따라 상대적으로 이동합니다. 다른 요소를 이동할 수도 있지만 전체 페이지가 브로셔나 포스터와 같이 동작합니다. 페이지의 항목은 단일 면에 존재합니다. 페이지가 길고(많은 세로 컨텐트 포함) 방문자가 아래로 스크롤할 경우 페이지의 맨 위에 있는 이미지는 더 이상 보지 못합니다.

웹 사이트를 방문할 때 고정된 개체를 본 적이 있을 것입니다. 이러한 항목은 한 위치에 항상 표시되는 “영구” 항목입니다. 나머지 페이지 컨텐트 위에 떠 있는 것처럼 보입니다.

[핀] 도구를 사용하면 이미지의 흐름에서 사실상 이미지를 제거하게 됩니다. 다른 페이지 요소에 따라 상대적으로 배치하는 대신 브라우저에서 상대적인 특정 위치에 고정합니다. 고정된 이미지는 “접착된” 것처럼 보입니다. 다른 스크롤 페이지 요소와 상관 없이 한 지점(예: 상단 오른쪽 모퉁이 또는 하단 부근)에 항상 있습니다. 방문자가 브라우저 크기를 조정할 경우 고정된 이미지는 브라우저 창에서 상대적인 고정 위치에 항상 존재합니다.

코르크 보드에 메모지를 핀으로 고정하는 것처럼 페이지의 디자인에서 “이미지를 꺼내어” 브라우저에 부착하는 방법으로 생각할 수 있습니다. 방문자가 브라우저 창 크기를 조정할 경우 고정된 요소는 브라우저에서 상대적인 고정 위치를 유지하면서 이동하지만, 방문자가 페이지 컨텐트를 가로나 세로로 스크롤할 경우 고정된 요소는 이동하지 않습니다.

[핀] 도구를 사용하려면 다음 단계를 따르십시오.

  1. A-마스터 페이지가 [디자인] 보기에서 열린 상태에서 [선택] 도구를 사용하여 Facebook 아이콘을 선택합니다.
  2. 컨트롤 패널의 [핀] 인터페이스에서 상단 오른쪽 핀 위치를 클릭합니다. 이 설정은 상단 오른쪽 모퉁이의 현재 위치로 요소를 "핀으로 고정"합니다.
  1. 1 ~ 2단계를 반복하여 나머지 페이지가 스크롤될 때 브라우저 창 내에서 이동하지 않도록 Google+ 및 Twitter 아이콘 단추를 상단 오른쪽 위치에 고정합니다.
  2. [플랜]을 클릭하여 페이지 축소판을 확인합니다. 마스터 페이지에 추가했으므로 이제 모든 페이지에 3개의 소셜 미디어 아이콘이 포함되어 있다는 것을 알 수 있습니다.
  3. [플랜] 보기에서 음식 페이지를 두 번 클릭하여 [디자인] 보기에서 엽니다. 또는 이미 열린 경우 음식 페이지 탭을 클릭하여 활성화합니다. [파일] > [브라우저에서 페이지 미리 보기]를 선택하여 브라우저에서 페이지를 봅니다.
  4. Dessert 메뉴 항목을 클릭하여 긴 페이지의 아래쪽에 있는 Dessert 메뉴 섹션으로 이동합니다. 나머지 페이지 요소가 스크롤되더라도 소셜 미디어 아이콘은 고정되어 있으므로 페이지의 오른쪽에 그대로 나타납니다.
Adobe Muse 사이트에서 브라우저 창에 개체 고정하기
브라우저 창에 개체 고정

Muse를 사용하여 첫 웹 사이트 만들기 6장에서는 여러 개체를 그룹화하여 하나의 요소로 동작하도록 하는 방법을 살펴봅니다. 또한 Katie's Cafe의 위치를 방문자에게 표시하는 내장된 Google 지도를 추가하여 방문 페이지를 완성할 것입니다. 그리고 사이트를 완성한 후 클라이언트 및 동료와 진행 중인 작업을 공유할 수 있도록 호스팅 서버(Business Catalyst 기반)에 업로드하여 온라인에 쉽게 게시하는 방법을 살펴봅니다.

Muse를 사용하여 첫 웹 사이트 만들기 4장에서는 수동 가로 메뉴 위젯에서 기준점 태그를 추가하고 메뉴 항목에 이 태그를 연결하는 방법을 살펴보았습니다. 페이지의 요소가 스크롤되지 않도록 고정하는 방법도 알아보았습니다. 또한 방문자가 파일을 다운로드할 수 있게 파일에 링크를 적용하는 방법도 배웠습니다.

또한 개체 그룹화 및 이러한 그룹을 사용하여 페이지의 내용에 붙여넣는 방법을 알아볼 수 있습니다. 또한 이번에는 임베디드 HTML을 사용하여 방문 페이지에 대화형 Google 지도를 추가해 보겠습니다. 그리고 마지막으로 파비콘을 추가하여 평가용 사이트를 제공된 호스팅 서버로 게시하여 사이트를 마무리하는 방법을 알아봅니다.

단일 개체로 개체 그룹화 및 그룹 붙여넣기

InDesign을 비롯한 기타 디자인 프로그램과 마찬가지로 여러 개체를 한 그룹으로 결합하여 단일 개체로 취급할 수 있습니다. 이 단원에서는 (이미지와 텍스트 프레임이 배치된) 여러 요소로 구성된 디자인을 만들고 이러한 요소를 그룹화하여 간편하게 단일 항목으로 배치하거나 복사하는 방법을 살펴봅니다. 다음 단계를 따르십시오.

  1. [플랜] 보기에서 홈 페이지 축소판을 두 번 클릭하여 [디자인] 보기로 이 페이지를 엽니다.
  2. [파일] > [배치]를 선택합니다. 샘플 파일 폴더에서 panel-open-bottom.png 파일을 찾아 선택합니다. [열기]를 클릭하여 [가져오기] 대화 상자를 닫고 홈 페이지 아래에서 (라이트박스 컴포지션 아래 및 바닥글 위) 한 번 클릭하면 그래픽이 전체 크기로 배치됩니다.

PNG 파일의 불투명도는 낮게 설정되어 있습니다. 따라서 반투명 꽃 디자인에서 틸팅 배경 이미지가 비칩니다.

  1. [파일] > [배치]를 다시 선택합니다. 이번에는 spoon-map.png 이미지 파일을 찾아 선택합니다. [열기]를 클릭하고 가운데 위 꽃잎을 한 번 클릭하면 배치됩니다.
  2. 숟가락 이미지를 선택하고 Option(Mac) 또는 Alt(Windows)를 누른 상태에서 숟가락 이미지를 복제한 후 가운데에서 오른쪽으로 바로 드래그합니다. 이 작업을 다시 반복 수행하여 가운데 숟가락 이미지를 복제한 후 사본을 꽃잎의 왼쪽으로 드래그합니다. 다음 그림과 같이 [선택] 도구를 사용하여 3개의 숟가락을 배치합니다.
디자인에서 위 3개의 꽃잎에 3개의 숟가락 이미지를 배치합니다.
디자인에서 위 3개의 꽃잎에 3개의 숟가락 이미지를 배치합니다.

  1. [텍스트] 도구를 사용하여 가운데 꽃잎에 텍스트 프레임을 만들고 다음을 입력합니다.

Katie's Cafe

Noe Valley

123 Elizabeth Street

MON–FRI 6AM–10PM

SAT–SUN 7AM–10PM

  1. [텍스트] 패널에서 다음 설정을 적용하여 텍스트 서식을 지정합니다.
    • 글꼴: Droid Serif(또는 모든 Serif 글꼴)
    • 글꼴 크기: 14
    • 글꼴 색상: #222222 (5부에서 이 색상 이름을 katieblack이라고 지정했습니다.)
    • 글꼴 정렬: 가운데
    • 행간: 120%
  1. 그런 다음 (요일로 시작하는) 마지막 두 줄을 선택하고 글꼴 색상을 빨간색(#A6342A)으로 설정합니다.
  2. [선택] 도구를 사용하여 텍스트 프레임을 선택합니다. Option(Mac) 또는 Alt(Windows)를 누른 상태에서 텍스트 프레임을 복제한 후 숟가락 이미지 위쪽에서 오른쪽으로 바로 드래그합니다. 이 작업을 다시 반복 수행하여 가운데 텍스트 프레임을 복제한 후 사본을 꽃잎의 왼쪽으로 드래그합니다. [선택] 도구를 사용하여 다음 그림과 같이 3개의 숟가락 위에 3개의 텍스트 프레임을 배치합니다.
Adobe Muse에서 개체 그룹화하기
디자인에서 위 3개의 꽃잎에 3개의 숟가락 위에 3개의 주소가 배치됩니다.

  1. [텍스트] 도구로 전환합니다. 왼쪽 주소에서 텍스트를 선택하고 다음과 같이 변경합니다.

Katie's Cafe

Laurel Heights

800 Spruce Street

MON–FRI 5AM–12AM

SAT–SUN 9AM–1AM

  1. [텍스트] 도구를 사용하여 오른쪽 주소의 텍스트를 선택하고 다음과 같이 변경합니다.

Katie's Cafe

Cole Valley

301 Carmel Street

MON–FRI 7AM–10PM

SAT–SUN 9AM–10PM

이제 디자인이 완성되었으니 요소를 선택하여 그룹화할 수 있습니다.

  1. [선택] 도구를 사용하여 전체 꽃 디자인을 클릭하여 드래그합니다. 이때 배치한 꽃 이미지, 3개의 숟가락 이미지와 3개의 텍스트 프레임을 모두 선택해야 합니다. 마우스 오른쪽 단추를 클릭하고 컨텍스트 메뉴가 나타나면 [그룹]을 선택합니다. 원하는 경우 [개체] > [그룹]을 선택할 수도 있습니다.

여러 개체를 그룹화하면 컨트롤 패널의 위쪽에 있는 [선택 표시자]에 [그룹]이라는 단어가 표시됩니다.

  1. 선택한 그룹을 복사합니다. [플랜]을 클릭하여 [플랜] 보기로 되돌아간 다음 방문 페이지 축소판을 두 번 클릭하면 디자인 보기에서 열립니다. [편집] > [제자리에 붙여넣기]를 선택하여 전체 요소 그룹을 동일한 위치에 배치합니다.

이 간단한 예제에서 알 수 있듯이 디자인을 완료하고 이 디자인을 단일 요소로 사용하여 페이지에 재배치하거나 다른 페이지에 복사 및 붙여넣을 때 그룹화가 매우 유용합니다.

디자인을 완료한 후 유용하게 사용할 수 있는 도구로는 그룹화 이외에 [잠그기] 기능이 있습니다. 그룹 또는 선택한 여러 요소를 마우스 오른쪽 단추로 클릭하고 컨텍스트 메뉴가 나타나면 [잠그기]를 선택하여 잠급니다. (또는 [개체] > [잠그기]를 선택할 수도 있습니다.) 페이지에서 완료된 요소를 잠그면 더 이상 선택할 수 없기 때문에 실수로 이동되거나 삭제되지 않습니다. 나중에 잠긴 요소를 업데이트해야 하는 경우 [개체] > [페이지에서 모두 잠금 해제]를 선택합니다.

방문 페이지의 아래에 꽃 디자인을 붙여넣기하면 페이지 내용이 어느 정도 완료된 것입니다. 다음 섹션에서는 방문 페이지를 계속 편집하여 고객이 근처 커피숍을 찾을 수 있게 대화형 지도 인터페이스를 추가해 보겠습니다.

리치 미디어 컨텐트를 포함하여 애니메이션 추가

  1. [플랜] 보기에서 "MasterFlash" 축소판을 두 번 클릭하여 [디자인] 보기에서 편집할 수 있도록 엽니다. 이 페이지는 앞서 "A-마스터" 페이지를 복제하여 얻은 것이므로 정적인 로고 이미지가 여전히 남아 있습니다. 이 정적인 이미지를 사용하면 애니메이션 사각형을 정확한 위치에 배치할 수 있어 편리하지만, 리치 미디어 요소를 포함한 후 정적으로 배치된 로고 이미지를 삭제하는 것을 잊지 않도록 주의해야 합니다.

  2. [파일] > [배치]를 선택합니다. [가져오기] 대화 상자에서 Kevins_Koffee_Kart 폴더를 찾은 다음 logo.swf라는 파일을 선택합니다.

  3. SWF 파일을 왼쪽 위 가장자리에 있는 기존 로고 이미지 파일과 같은 위치에 배치합니다.

  4. 방금 배치한 새 SWF 창을 기존의 정적 로고에 맞춰 정렬했으면 정적 로고를 선택하고 Delete 키를 눌러 이를 삭제합니다.

  5. Home 페이지를 새로 변경한 후 전체 사이트의 모양이 어떻게 달라졌는지 확인하려면 [파일] > [브라우저에서 사이트 미리 보기]를 선택한 후 각 페이지의 로고 표시 방식을 테스트합니다. 사이트를 게시하지 않아도 컴퓨터에서 로컬로 작업한 후 브라우저를 통해 사이트를 미리 보면서 사이트 탐색에 있는 각 페이지를 클릭해 볼 수 있습니다. 애니메이션(SWF 파일)이 Home 페이지에서 한 번만 재생되고 멈추는 것을 알 수 있습니다. 다른 페이지를 클릭하면 정적인 로고만 표시됩니다.

    참고:

    [파일] > [브라우저에서 페이지 미리 보기]를 선택하면 Home 페이지를 표시하는 새 브라우저 창을 조금 더 빨리 로드할 수 있지만, 이렇게 하면 현재 활성화된 페이지(Home)를 제외한 다른 페이지는 미리 볼 수가 없습니다. 따라서 이 옵션은 전체 웹 사이트가 아니라 사이트의 특정 페이지 하나만 검사하려는 경우에 사용해야 합니다.

공백 패널 사용

간격 패널을 사용하면 CSS 여백 및 간격 속성을 활용할 수 있습니다. 안쪽 여백은 요소의 컨텐트(테두리 내부) 주변에 있는 영역을 지웁니다. 안쪽 여백은 요소의 배경색에 의해 영향을 받습니다.

위쪽, 오른쪽, 아래쪽 및 왼쪽의 안쪽 여백은 별도의 속성을 사용하여 개별적으로 변경할 수 있습니다. 일관되게 편집하도록 선택하여 모든 안쪽 여백 속성을 균일화할 수도 있습니다.

  1. Adobe Muse에서 [창]> [간격]을 선택하여 [간격] 패널을 가져옵니다.
Adobe Muse에서 [간격] 패널 열기
Adobe Muse에서 [간격] 패널 열기

  1. 왼쪽, 오른쪽, 위쪽 및 아래쪽의 안쪽 여백 속성에 대한 값을 지정합니다. 다양한 값을 입력하려면  단추를 선택 취소합니다.
[간격] 패널에서 여백 및 간격 설정을 구성하십시오.
[간격] 패널에서 여백 및 간격 설정을 구성하십시오.

  1. 가로 및 세로 간격 속성을 지정하도록 선택할 수 있습니다.

변형 패널을 사용하여 개체 비율 조정 및 회전

Adobe Muse를 사용하여 개체에 2D 변환을 적용할 수 있습니다. X 및 Y축에 개체를 배치하고 회전하며 비율을 조정할 수 있습니다.

변형 패널의 100% 폭 전환을 사용하면 개체를 100% 폭으로 설정할 수 있습니다. 크기 조정 가능한 개체를 설정하여 브라우저 폭을 확장하고 컴퓨터 화면에 맞출 수도 있습니다.

선택한 개체에 변형을 적용하려면 다음을 수행합니다.

  1. Adobe Muse에서 [창] > [변형]을 선택합니다.
Adobe Muse에서 [변형] 패널을 여십시오.
Adobe Muse에서 [변형] 패널을 여십시오.

  1. 선택한 개체를 사용하여 다음 변형을 적용합니다.
    • 위치: X 및 Y값을 입력하여 웹 페이지의 원하는 위치에 개체를 배치합니다.
    • 비율: 개체에 대한 폭과 높이를 입력합니다.   단추를 클릭하여 균일한 폭과 높이로 개체 비율을 조정하도록 선택할 수도 있습니다.
    • 회전(): 개체의 회전 각도를 입력합니다.
    • 100% 폭(): 개체를100% 폭으로 설정하여 브라우저 폭에 맞게 비율을 조정할 수 있습니다.

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

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