모바일 장치 또는 스마트폰용 웹 사이트를 만드는 방법에 대한 자세한 내용은 이 문서를 참조하십시오.

참고:

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

Adobe Muse의 반응형 웹 디자인을 사용하여 모바일용 웹 사이트를 만들고 디자인할 수 있습니다. 반응형 레이아웃을 사용하면 하나의 Muse 파일로 모바일을 포함한 모든 장치를 위한 웹 사이트를 만들 수 있습니다.

먼저 사이트를 디자인할 브라우저 폭을 결정해야 합니다. 그런 다음 계속 사이트를 디자인합니다. 반응형 레이아웃을 사용하여 모바일 사이트를 만드는 방법에 대한 자세한 내용은 반응형 사이트 만들기를 참조하십시오.

모바일 전용 사이트를 위한 대체 레이아웃을 디자인하려는 경우 다음 문서를 참조하십시오.

모바일 전용 웹 사이트 디자인

Adobe Muse를 사용하면 데스크톱, 스마트폰 및 태블릿에 표시할 웹 컨텐트의 사이트 레이아웃을 만들 수 있습니다. 모바일 디자인 기능을 사용하면 데스크톱뿐 아니라 휴대폰과 태블릿을 위한 대체 레이아웃을 만들 수 있습니다.

Adobe Muse에는 현재 일반적으로 사용되고 있는 여러 가지 장치 화면에서 디자인을 올바르게 렌더링하는 데 도움을 주기 위한 100% 폭 전환, 고정 바닥글 기능 등과 같은 설정이 포함되어 있습니다. Adobe Muse를 사용하면 평소와 다를 바 없는 작업 과정을 통해 어떤 크기의 화면에든 잘 맞는 몰입형 디자인을 만들 수 있습니다.

모바일용 대체 레이아웃을 만드는 방법은 다음과 같습니다.

  1. Adobe Muse를 열고 [파일] > [새 사이트]를 클릭합니다.

    특정 장치용 사이트를 만들려면 [고정 폭]을 선택합니다.
    모바일 웹 사이트를 만들려면 [고정 폭]을 선택합니다.

  2. [고정 폭]을 선택한 다음 동일한 대화 상자에서 [고급 설정]을 클릭합니다.

    새 사이트 고급 설정
    새 사이트를 만들 때 적용할 수 있는 고급 설정입니다.

  3. [최대 페이지 폭] 또는 최대 페이지 폭을 지정합니다.

    휴대폰에 적절한 브라우저 폭을 확인하고 값을 지정합니다.

  4. 모바일 사이트에 대한 [여백] 및 [안쪽 여백] 값을 입력합니다. 다음 세부 정보를 입력합니다.

    • 페이지 폭 및 높이: 페이지의 처음 크기를 설정할 수 있습니다. Muse는 컨텐트를 계속 추가함에 따라 페이지 높이를 자동으로 높이기 때문에 페이지 높이에 대한 최대값을 설정하지 않습니다.
    • 열 및 열 폭: 열은 디자인 요소를 정확하게 정렬할 수 있도록 Muse 웹 페이지를 시각적으로 동일한 부분으로 나눕니다. Muse는 지정된 열 수에 대한 열 폭과 간격값을 자동으로 설정합니다.
    • 여백 및 안쪽 여백: 여백은 디자인 영역 밖에서 웹 페이지 주변 영역을 지웁니다. 안쪽 여백을 사용하면 웹 페이지의 디자인 주변 내부에 있는 영역을 지울 수 있습니다.

    [확인]을 클릭합니다.

    모바일 웹 사이트용 레이아웃 디자인을 시작할 수 있습니다.

기존 Adobe Muse 사이트에 휴대폰 레이아웃 추가

새 프로젝트를 만들 때 임의의 레이아웃을 먼저 디자인한 다음 동일한 .Muse 파일을 활용하여 다른 레이아웃을 추가로 만들 수 있습니다.  사이트를 게시하거나 내보내면 모든 레이아웃에 대한 모든 페이지의 목록이 포함된 sitemap.xml이라는 파일이 Adobe Muse를 통해 자동으로 생성됩니다. sitemap.xml 파일은 다른 사이트 에셋과 함께 업로드됩니다. 이 파일은 검색 엔진을 통해 사이트가 정확하게 인덱싱되게 하여 사이트의 SEO(검색 엔진 최적화)를 향상시키는 역할을 합니다. SEO가 높아지면 페이지가 검색 결과 상위에 노출됩니다.

휴대폰을 위한 새로운 모바일 레이아웃을 만들기 위해 제일 먼저 해야 할 일 중 하나는 기존 사이트의 컨텐트를 검토하여 스마트폰 사용 환경에 필요한 항목이 무엇인지 결정하는 작업입니다. 스마트폰을 사용하는 방문자는 이동 중에 작은 화면에서 컨텐트를 보는 경우가 많으므로 디자인을 간소화하여 터치 스크린에서 쉽게 다룰 수 있는 유용한 컨텐트만 표시하는 것이 중요합니다.

  1. 대체 휴대폰 레이아웃을 추가할 기존 .Muse 파일을 엽니다.

  2. 프로젝트의 각 파일을 열고 [페이지] > [대체 레이아웃 추가] > [휴대폰]을 클릭합니다.

    휴대폰 레이아웃 옵션 추가
    모바일 사이트를 만들기 위한 휴대폰 레이아웃을 추가합니다.

  3. 이 대화 상자에 있는 메뉴로 기존 레이아웃을 선택하여 이를 복사할 수 있습니다. 이 문서에서는 데스크톱 레이아웃을 복사하여 휴대폰 레이아웃을 만들 것이므로 [데스크톱]을 선택합니다.

    이 대화 상자에는 [사이트 플랜 복사], [페이지 특성 복사], [브라우저 채우기 복사]라는 몇 가지 복사 옵션이 함께 제공됩니다. 기본 설정을 그대로 둔 채 기존의 데스크톱 사이트 정보를 휴대폰 레이아웃으로 복사합니다.

  4. [확인]을 클릭하여 대화 상자를 닫고 휴대폰 레이아웃을 추가합니다.

    휴대폰 레이아웃을 위한 사이트 플랜이 Muse를 통해 자동으로 만들어집니다. 페이지 이름, 사이트 구조 및 마스터 페이지의 특성이 그대로 복사됩니다. [휴대폰] 레이아웃 단추의 이름 옆에 플러스 기호(+)가 더 이상 표시되지 않습니다. 휴대폰 레이아웃이 Muse 프로젝트에 추가되었기 때문입니다.

    실제 페이지 컨텐트는 휴대폰 레이아웃 페이지 축소판에 추가되지 않은 것을 알 수 있습니다. 이는 모바일 레이아웃의 각 페이지에 정말로 필요한 컨텐트만 복사할 수 있도록 작업 편의성을 고려한 동작입니다. 새 페이지 각각에 추가할 컨텐트를 가져올 때 모바일 화면의 작은 크기에 맞도록 컨텐트의 크기를 조정할 수 있습니다.

    홈 페이지의 오른쪽에 있는 플러스 기호(+)를 클릭하여 새 페이지를 추가할 수 있습니다. 사이트맵을 설정한 후에는 모바일 환경 디자인을 시작할 수 있습니다.

    휴대폰 레이아웃용 마스터 페이지를 설정하는 방법은 다음 섹션을 참고하십시오.

    새 페이지를 추가하여 모바일 레이아웃의 사이트맵 만들기
    새 페이지를 추가하여 모바일 레이아웃의 사이트맵을 만듭니다.

마스터 페이지 설정 및 공통 웹 페이지 요소 추가

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

  2. [브라우저 채우기] 인터페이스를 열어 배경 이미지를 설정합니다.

  3. 이미지 섹션에서 [이미지 추가]를 클릭합니다. 배경 이미지로 설정하려는 파일을 검색하고 선택합니다.

    이미지 추가 옵션
    휴대폰 마스터 페이지에 배경 이미지를 추가합니다.

  4. [맞춤] 옵션을 [채우기에 맞게 비율 조정]으로 설정하고 가운데 지점을 클릭합니다.

  5. 페이지 바깥쪽의 회색 영역을 클릭하거나 컨트롤 패널을 아무 곳이나 클릭하여 [브라우저 채우기] 인터페이스를 닫습니다.

사이트 탐색을 위한 하이퍼링크 추가

Adobe Muse를 사용하여 [하이퍼링크]를 통해 외부 페이지, 다운로드 가능한 파일, 웹 페이지 내 섹션에 간편하게 연결할 수 있습니다. 사이트에서 적절한 탐색을 설정하는 경우 방문자가 웹 사이트 페이지를 간편하게 이동할 수 있도록 하는 것은 중요합니다. 잘 구성된 사이트 탐색을 통해 검색 엔진에 대해 웹 사이트를 최적화할 수 있습니다. 자세한 내용은 하이퍼링크 만들기를 참조하십시오.

[하이퍼링크] 드롭다운에는 사이트맵에 추가된 페이지 또는 기준점 링크가 나열됩니다. 올바른 링크를 검색하려면 페이지 또는 기준점 이름을 입력합니다. 처음 몇 글자만 입력하면 [하이퍼 링크] 메뉴를 통해 필터링된 결과가 드롭다운 목록에 표시됩니다. 이 방법을 사용하면 업데이트할 링크를 쉽고 빠르게 찾아 액세스할 수 있습니다.

하이퍼링크 옵션
[링크] 메뉴 필드에 처음 몇 글자를 입력하여 링크 목록을 필터링합니다.

휴대폰 레이아웃 페이지에 컨텐트 추가

우선 "Home" 페이지를 마무리해야 합니다.

  1. [Interior(휴대폰)] 탭을 클릭합니다. 번호가 매겨진 네 개의 단추 그룹 전체를 복사합니다.
  2. [페이지로 이동] 기능을 사용하여 "Home(휴대폰)" 페이지로 이동한 다음 단추 그룹을 붙여넣습니다. 앞 단원에서 추가한 링크가 그대로 유지되므로 "Home" 페이지와 "Interior" 마스터 페이지가 둘 다 동일한 탐색 기능을 공유합니다.
  3. [선택] 도구를 사용하여 그룹을 "Home" 페이지 중앙 하단의 바닥글 근처에 배치합니다.
  4. [scratch(데스크톱)] 탭을 클릭하여 "scratch" 페이지로 돌아갑니다. 맨 왼쪽 포드에 있는 "There's more than one way to solve a problem"이라는 텍스트 프레임을 복사합니다.
  5. [Home(휴대폰)] 탭을 클릭하고 텍스트 프레임을 붙여넣습니다. [선택] 도구를 사용하여 단추 그룹 위의 중앙에 텍스트 프레임을 배치합니다.
홈 페이지 디자인이 완성되었습니다
홈 페이지 디자인이 완성되었습니다.

이번에는 "Section 01" 페이지에 페이지 컨텐트를 추가하겠습니다.

  1. [scratch(데스크톱)] 탭을 클릭하여 "scratch" 페이지로 돌아갑니다. 왼쪽 두 번째 포드에 있는 흰색의 둥근 배경 사각형과 텍스트 프레임 세 개를 선택합니다. 이 세 개의 텍스트 프레임에는 원 안의 숫자 01, 섹션 01의 자리 표시자 텍스트, 주황색 PHONE 단추가 포함됩니다. 선택한 항목을 복사합니다.
  2. Command+J(Mac) 또는 Ctrl+J(Windows)를 누르고 "Section 01"의 처음 몇 글자를 입력합니다. 아래쪽 화살표 키를 눌러 "Section 01" 휴대폰 페이지를 선택한 다음 Return/Enter 키를 눌러 [디자인] 보기에서 이 페이지를 엽니다.
  3. 앞서 복사한 요소를 휴대폰 레이아웃의 "Section 01" 페이지에 붙여넣습니다. [선택] 도구를 사용하여 요소를 페이지 중앙에 배치합니다. 잠시 나타났다 사라지는 안내선을 참조하면 요소를 쉽게 배치할 수 있습니다.

"Section 01" 페이지의 목적은 회사를 간략하게 소개하고 모바일 방문자가 회사에 전화를 쉽게 걸 수 있게 하는 데 있습니다. 모바일 웹 사이트를 디자인할 때는 새로운 유형의 링크를 추가할 수 있습니다. 이는 방문자가 화면을 터치하여 스마트폰의 전화 메뉴를 호출한 다음 특정 번호로 전화를 거는 데 사용할 수 있는 링크입니다. 이렇게 하면 잠재적인 고객이 해당 기업에 매우 쉽게 전화를 걸 수 있으므로 이는 모바일 사이트의 매우 큰 장점이라 할 수 있습니다.

특정 번호로 전화를 거는 링크를 모바일 레이아웃에 추가하려면 다음 단계를 따릅니다.

  1. [선택] 도구를 사용하여 PHONE 단추를 선택합니다.
  2. [링크] 메뉴 필드에 "tel:+1"을 입력한 다음 전화 번호를 입력합니다. 예를 들면 다음과 같은 형식입니다.
    tel:+14155551234

이는 모바일 브라우저에서 전화 번호 링크를 인식하는 데 사용되는 형식입니다.

  1. Return 키나 Enter 키를 눌러 링크를 저장합니다.

참고: 이메일 링크를 만들고 싶으면 하이퍼링크 메뉴 필드에 다음 형식으로 이메일 주소를 입력하면 됩니다.
mailto:designers@design-is-fun.com

Phone 단추에 링크를 추가하는 것으로 "Section 01" 페이지의 디자인이 완성되었습니다.

  1. [scratch(데스크톱)] 탭을 클릭하여 "scratch" 페이지로 돌아갑니다. 흰색의 둥근 배경 사각형, 녹색 원 안의 숫자 02, Section 02 텍스트 프레임, 임베디드 지도, 녹색 MAP 단추를 선택합니다. 선택한 항목을 복사합니다.
  2. Command+J(Mac) 또는 Ctrl+J(Windows)를 누르고 "Section 02"의 처음 몇 글자를 입력합니다. 아래쪽 화살표 키를 눌러 "Section 02" 휴대폰 페이지를 선택한 다음 Return/Enter 키를 눌러 [디자인] 보기에서 이 페이지를 엽니다.
  3. 1단계에서 복사한 요소를 휴대폰 레이아웃의 "Section 02" 페이지에 붙여넣습니다. [선택] 도구를 사용하여 요소를 페이지 중앙에 배치합니다. 정렬 안내선을 참조하면 요소를 쉽게 배치할 수 있습니다.

"Section 02" 페이지에는 대화형 지도를 만들기 위해 Google 지도 웹 사이트에서 생성한 임베디드 HTML 코드가 포함됩니다.

"Adobe Muse 시작하기" 자습서의 설명을 잘 따라왔다면 Google 웹 사이트에서 Google 지도 소스 코드를 복사한 다음 Muse에서 사이트 페이지에 코드를 붙여넣어 임베디드 HTML 기능을 구현했던 것을 기억할 것입니다.

다행히 Google 지도 코드에는 손가락을 사용한 터치 스크린 조작 방법을 지원하는 기능이 미리 포함되어 있으므로 모바일 기기를 사용하는 방문자의 지도 조작 방법을 쉽게 구현할 수 있습니다 이 샘플 프로젝트에서는 지도의 치수가 이미 크기 조정된 상태입니다.

나중에 실제 프로젝트에서 임베디드 HTML 컨텐트의 치수를 크기 조정해야 할 상황이 발생하면 컨텐트를 마우스 오른쪽 단추로 클릭하고 [HTML 편집]을 선택하여 코드를 [HTML 편집] 창에 표시하면 됩니다. 코드의 높이 및 폭 값을 편집하여 더 작은 화면에 맞게 지도 크기를 조정할 수 있습니다.

코드의 임베디드 HTML 요소 크기 조정
임베디드 HTML 요소의 크기를 조정해야 하는 경우에는 코드를 직접 편집하여 치수를 업데이트할 수 있습니다.

[HTML 편집] 창을 열었으면 아무것도 변경하지 말고 [확인]을 클릭하여 창을 닫습니다.

  1. MAP 단추를 선택합니다.

이번에는 모바일 방문자가 새 브라우저 창을 열고 전체 크기의 지도를 쉽게 볼 수 있도록 외부 웹 사이트(Google 지도)로 연결되는 링크를 추가하겠습니다.

  1. 아래 링크를 복사하여 [링크] 메뉴의 필드에 붙여넣습니다.

https://maps.google.com/maps?q=adobe+systems,+san+francisco&hl=en&sll=37.269174,-119.306607&sspn=17.492546,19.160156&hq=adobe+systems,&hnear=San+Francisco,+California&t=m&z=14

  1. [링크] 메뉴 왼쪽에 있는 "링크"라는 단어를 클릭합니다. 대화 상자가 열리면 [링크를 새 창이나 탭에서 열기] 확인란을 선택합니다. [툴팁] 필드에는 Map to Adobe Fremont라는 텍스트를 입력합니다.
하이퍼링크 옵션
링크가 새 브라우저 창에서 열리도록 설정하고 툴팁을 추가합니다.

  1. [링크] 대화 상자 바깥쪽을 클릭하여 대화 상자를 닫습니다.

이번에는 "Section 03" 페이지에 페이지 컨텐트를 추가하겠습니다.

  1. [scratch(데스크톱)] 탭을 클릭하여 "scratch" 페이지로 돌아갑니다. 흰색의 둥근 배경 사각형, 자주색 원 안의 숫자 03, Section 03 텍스트 프레임, 연락처 양식, SUBMIT 단추를 선택합니다. 선택한 항목을 복사합니다.
  2. Command+J(Mac) 또는 Ctrl+J(Windows)를 누르고 "Section 03"의 처음 몇 글자를 입력합니다. 아래쪽 화살표 키를 눌러 "Section 03" 휴대폰 페이지를 선택한 다음 Return/Enter 키를 눌러 [디자인] 보기에서 이 페이지를 엽니다.
  3. 1단계에서 복사한 요소를 휴대폰 레이아웃의 "Section 04" 페이지에 붙여넣습니다. [선택] 도구를 사용하여 요소를 페이지 중앙에 배치합니다. 정렬 안내선을 참조하면 요소를 쉽게 배치할 수 있습니다. 연락처 양식을 휴대폰 레이아웃으로 복사해도 데스크톱 연락처 양식 위젯에 적용한 스타일이 그대로 유지됩니다. 모바일 레이아웃을 위한 양식을 준비할 때는 단지 작은 화면에 맞게 양식과 양식 요소의 크기를 조정하기만 하면 됩니다.

"Section 03" 페이지에는 제출된 양식 데이터를 처리하기 위해 Business Catalyst 서버 측 스크립트와 데이터베이스를 사용하는 연락처 양식 위젯이 포함됩니다. [게시]를 클릭하여 Muse의 사이트 파일을 업로드하면 양식의 기능이 자동으로 작동하기 시작합니다.

참고: 완성된 Muse 웹 사이트를 호스팅하는 데 다른 서비스 공급자를 사용할 수도 있지만, 이와 같이 Business Catalyst 서버가 아닌 다른 서버에 연락처 양식을 호스팅할 때는 코드를 추가로 수정해야 할 수도 있다는 점을 염두에 두십시오.

이 샘플 프로젝트에서는 연락처 양식에 CAPTCHA 기능을 사용하지 않습니다. CAPTCHA는 양식이 스크립트나 "스팸 봇"을 통해 제출된 것이 아니라 실제로 사람이 제출한 것임을 확인하는 데 사용되는 기능으로서, 연락처 양식 위젯의 [옵션] 메뉴에서 설정할 수 있습니다. CAPTCHA 인터페이스에는 일련의 문자가 이미지 형태로 표시됩니다. 방문자가 양식을 통해 메시지를 제출하기 위해서는 이미지에 일치하는 문자열을 입력해야만 합니다. 한편으로 스팸 봇에 의한 양식 제출이 골칫거리인 것이 사실이지만, 휴대폰에서 사이트를 사용하기 쉽게 만드는 것도 중요하게 고려해야 할 사항입니다. 양식을 작성하기가 너무 까다롭게 만들면 방문자가 메시지를 아예 제출하지 않을 수도 있습니다.

이제 "Section 03" 페이지가 완성되었습니다. SUBMIT 단추에는 링크를 추가할 필요가 없습니다. 이 단추는 이미 연락처 양식 위젯의 한 부분으로 설정되어 있기 때문입니다.

휴대폰 레이아웃의 마지막 페이지인 "Section 04"에는 슬라이드 쇼 위젯이 포함됩니다. Muse의 위젯은 대부분의 최신 데스크톱과 모바일 브라우저에서 제대로 작동하도록 설계되어 테스트를 마친 것들이므로 터치 스크린에서 슬라이드 쇼가 작동하도록 따로 손을 봐야 할 부분이 전혀 없습니다.

다음 단계에 따라 데스크톱 레이아웃의 "scratch" 페이지에 있는 컨텐트를 휴대폰 레이아웃의 "Section 04" 페이지로 복사합니다.

  1. [scratch(데스크톱)] 탭을 클릭하여 "scratch" 페이지로 돌아갑니다. 흰색의 길쭉한 배경 사각형, 빨간색 원 안의 숫자 04, 슬라이드 쇼 위젯, Section 04 텍스트 프레임을 선택합니다. [선택] 도구를 클릭한 채 모든 요소가 포함되게 드래그하여 요소를 모두 한 번에 선택할 수 있습니다. 선택한 항목을 복사합니다.
  2. Command+J(Mac) 또는 Ctrl+J(Windows)를 누르고 "Section 04"의 처음 몇 글자를 입력합니다. 아래쪽 화살표 키를 눌러 "Section 04" 휴대폰 페이지를 선택한 다음 Return/Enter 키를 눌러 [디자인] 보기에서 이 페이지를 엽니다.
  3. 1단계에서 복사한 요소를 휴대폰 레이아웃의 "Section 04" 페이지에 붙여넣습니다. [선택] 도구를 사용하여 요소를 페이지 중앙에 배치합니다. 정렬 안내선을 참조하면 요소를 쉽게 배치할 수 있습니다. 연락처 양식을 휴대폰 레이아웃으로 복사해도 데스크톱 연락처 양식 위젯에 적용한 스타일이 그대로 유지됩니다. 모바일 레이아웃을 위한 양식을 준비할 때는 단지 작은 화면에 맞게 양식과 양식 요소의 크기를 조정하기만 하면 됩니다. Muse에서 만든 모바일 레이아웃에 슬라이드 쇼 위젯 같이 대화형 기능이 있는 위젯을 추가하면 [옵션] 패널에 [스와이프 설정]이라는 옵션이 표시됩니다. 이 설정은 기본적으로 활성화되어 있으므로 모바일 디자인에 위젯을 추가하면 방문자가 화면을 터치하고 손가락으로 조작할 수 있도록 해당 위젯이 자동 설정됩니다. "Section 04" 페이지에 포함되는 슬라이드 쇼 위젯은 방문자가 축소판을 터치하면 그에 상응하는 이미지를 표시하는 기능을 수행합니다. 이 슬라이드 쇼는 갤러리의 이미지를 가로 방향으로 넘겨 전환하도록 구성됩니다. 이 예제에서는 사용자가 원하는 이미지를 터치해야만 해당 사진이 표시되지만, 페이지를 로드할 때 이미지가 하나씩 차례로 돌아가며 자동으로 표시되도록 슬라이드 쇼 위젯을 설정할 수도 있습니다.

참고: [서서히 사라지기], [가로] 또는 [세로] 전환 방식을 사용하도록 슬라이드 쇼 위젯을 구성하면 Muse에서 손가락 스와이프 동작을 지원하게끔 코드가 자동으로 설정됩니다. 이 경우 방문자가 터치 스크린을 스와이프하여 슬라이드 쇼 이미지를 앞뒤로 넘길 수 있습니다.

다음 단원인 Muse에서 모바일 레이아웃 디자인 만들기에서는 모바일 플랫폼 전체에 걸쳐 에셋을 손쉽게 업데이트하는 방법과 각 모바일 레이아웃에 대해 Muse 사이트를 게시하는 방법을 설명합니다.

모바일 웹 사이트용 에셋 업데이트 및 최적화

데스크톱 컴퓨터에 비해 태블릿과 스마트폰은 프로세서 성능이 훨씬 더 제한적이고, 연결 속도가 더 느리며, 저장 용량이 더 작습니다. 따라서 모바일 장치를 위한 사이트를 디자인하고 게시할 때는 좀 더 세세한 부분까지 신경을 써야 합니다.

Muse에 포함되어 있는 기능을 사용하면 모바일 레이아웃에 표시되는 그래픽을 최적화하여 사이트 로드 속도를 높이고 일정 수준 이상의 성능을 보장하는 데 도움을 얻을 수 있습니다.

  1. Command+7(Mac) 또는 Ctrl+7(Windows)을 눌러 데스크톱 레이아웃을 표시한 다음 "A-마스터" 데스크톱 파일을 두 번 클릭하여 [디자인] 보기로 엽니다.
  2. [에셋] 패널의 탭을 클릭하여 이 패널을 열고 활성화합니다. 이 패널이 닫혀 있으면 [창] > [에셋]을 선택합니다.
  3. 초록빛 언덕의 모습을 담고 있는 큰 배경 이미지를 선택합니다. 에셋이 [에셋] 패널에 강조 표시됩니다.
  4. 에셋의 이름인 background.jpg를 클릭하여 사이트에 사용되는 인스턴스의 목록을 확장합니다. 배경 이미지 파일 항목이 목록에 세 번 나오고, 서로 다른 아이콘 두 개가 사용된 것을 알 수 있습니다. 이는 해당 파일이 휴대폰 및 데스크톱 레이아웃에 둘 다 사용되는 것임을 의미합니다.
에셋 패널
[에셋] 패널에서 background.jpg의 인스턴스를 확인하여 이 에셋이 사용되는 사이트 위치에 대한 정보를 얻습니다.

이 예제 사이트는 크기가 작으므로 에셋 목록을 관리하기가 상당히 쉽습니다. 그러나 규모가 더 큰 사이트를 구축할 때는 에셋 목록이 더 길어져서 필요한 항목을 찾기가 어려울 수 있습니다.

이 경우 각 에셋의 첫 번째 항목을 선택한 다음 왼쪽에 있는 화살표를 클릭하여 해당 그룹을 축소하면 에셋 목록을 좀 더 쉽게 탐색할 수 있습니다. 화살표를 다시 클릭하면 사이트 프로젝트에서 에셋이 사용되고 있는 인스턴스의 전체 목록을 볼 수 있도록 그룹이 확장됩니다.

특정 레이아웃에 대해 사용되는 에셋을 찾으려면 [에셋] 패널의 상단 맨 오른쪽에 있는 열을 클릭하여 [데스크톱], [태블릿] 또는 [휴대폰] 아이콘을 표시하면 됩니다. 이렇게 하면 에셋을 각 레이아웃별로 함께 묶어 표시하도록 에셋 목록이 정렬됩니다.

에셋 패널
[에셋] 패널에서 임의의 열 머리글 제목을 클릭하면 해당 유형을 기준으로 에셋 목록이 정렬됩니다.

그래픽을 변경하여 (모든 레이아웃에서) 해당 인스턴스 전체를 업데이트하려면 에셋 이름을 마우스 오른쪽 단추로 클릭하고 컨텍스트 메뉴에서 [원본 편집]을 선택합니다.

전체 사이트에 대해 에셋을 업데이트하려면 [원본 편집]을 선택합니다.
전체 사이트에 대해 에셋을 업데이트하려면 [원본 편집]을 선택합니다.

원본 파일을 만드는 데 사용했던 Photoshop, Fireworks 또는 기타 이미지 편집 프로그램에서 해당 파일이 열리므로 사이트에 배치한 파일을 쉽게 변경할 수 있습니다.

원본 파일을 수정하여 저장하고 Muse로 돌아오면 [에셋] 패널의 해당 항목에 [동기화 안 됨] 아이콘이 표시됩니다. 이는 사이트에 사용되고 있는 버전의 그래픽이 소스 파일과 더 이상 일치하지 않음을 의미합니다. 파일을 다시 마우스 오른쪽 단추로 클릭하고 [업데이트]를 선택하면 새 버전의 파일을 사용하도록 그래픽 인스턴스가 모두 업데이트됩니다.

사이트에 사용되는 인스턴스를 모두 수정하려면 [업데이트] 기능을 사용합니다
사이트에 사용되는 인스턴스를 모두 수정하려면 [업데이트] 기능을 사용합니다.

모바일 레이아웃 미리 보기

작성된 사이트 디자인을 미리 보는 데는 여러 가지 옵션을 사용할 수 있습니다.

[데스크톱] 레이아웃의 [디자인] 보기에서 [미리 보기]를 클릭하면 기본 제공되는 WebKit 기반의 에뮬레이터를 통해 HTML, CSS 및 JavaScript를 렌더링한 결과를 볼 수 있습니다. 미리 보기 기능을 사용하면 사이트를 게시하고 장치에서 온라인으로 사이트를 검토하기 전에 브라우저를 통해 레이아웃의 모양을 확인할 수 있습니다.

[휴대폰] 레이아웃의 [디자인] 보기에서 [미리 보기]를 클릭하면 휴대폰 레이아웃 디스플레이가 표시됩니다. [미리 보기 크기] 메뉴를 사용하여 iPhone 4, iPhone 5, Samsung Galaxy S III, Nokia Lumia 920 중 하나를 선택하고 각기 다른 크기의 화면에서 레이아웃이 어떻게 표시되는지 확인할 수 있습니다.

모바일 레이아웃 미리 보기
휴대폰 또는 태블릿 레이아웃에서 페이지를 미리 볼 때는 [미리 보기 크기] 메뉴가 나타납니다.

[미리 보기 크기] 메뉴 오른쪽에 있는 아이콘을 클릭하면 레이아웃 보기를 가로 또는 세로 모드로 전환할 수 있습니다.

[미리 보기 크기]에는 가장 대표적인 휴대폰들의 화면 크기에 해당하는 가로-세로 비율 몇 가지가 미리 정의되어 있습니다.

그러나 일부 스마트폰(예: Motorola Droid 등)은 화면이 옆으로 더 넓을 수 있습니다. 방문자가 사용하는 휴대폰의 디스플레이 폭이 더 넓으면 사용 가능한 실제 화면 영역에 맞게 휴대폰 레이아웃 폭의 비율이 Muse의 Viewport 기능을 통해 자동으로 조정됩니다.

미리 보기 모드에서도 링크를 클릭하고 사이트를 탐색할 수 있습니다. 화면을 스크롤하면 손가락을 사용한 스와이프 동작을 시뮬레이션할 수 있습니다. 그러나 이 기능을 제대로 확인하려면 실제 장치를 사용하여 테스트하는 것이 좋습니다.

미리 보기 모드에서 [미리 보기 크기] 메뉴 옆에 있는 [i] 단추를 클릭하면 Edge Inspect라는 Adobe 도구에 대해 설명하는 링크가 나타납니다. Edge Inspect를 사용하면 Chrome 브라우저 확장 기능을 통해 모바일 장치를 컴퓨터에 연결한 다음 데스크톱의 Chrome 브라우저에 표시된 컨텐트와 장치를 동기화할 수 있습니다.

이렇게 하면 Adobe Muse의 [브라우저에서 미리 보기] 옵션과 Chrome을 사용하여 데스크톱에서 사이트를 볼 수 있으며, 데스크톱에 연결된 장치에도 동일한 페이지가 자동으로 표시됩니다. (Chrome이 기본 브라우저로 설정되어 있어야 합니다.)

원한다면 Reflection이라는 타사 도구를 구입할 수도 있습니다. 이 도구를 사용하면 (동일한 네트워크를 사용하여 연결된) 장치의 에뮬레이션 결과를 데스크톱 화면에 표시하여 볼 수 있습니다. 스마트폰이나 태블릿을 사용하여 사이트를 탐색하면 이 에뮬레이터를 통해 장치의 터치 스크린이 미러링됩니다.

모바일 레이아웃과 관련된 추가 기능

고정 바닥글

이전 버전의 Muse에서와 마찬가지로 안내선을 드래그하여 페이지 아래쪽 영역을 정의하고 바닥글 영역을 설정할 수 있습니다. 또한 임의의 컨텐트 요소를 바닥글 항목으로 설정할 수도 있습니다. 이렇게 하면 [사이트 속성]에 설정된 최소 페이지 높이 또는 기존 페이지 컨텐트 중 길이가 더 긴 쪽의 아래 영역에 해당 항목이 표시됩니다.

사이트의 페이지 길이가 제각각일 경우 바닥글 컨텐트를 정의하면 매우 유용합니다. 페이지 컨텐트를 덮어 가리지 않는 범위 내에서 페이지 맨 아래쪽을 따라 일정한 자리에 표시되도록 바닥글의 세로 위치가 조정되기 때문입니다.

[고정 바닥글] 옵션은 기본적으로 활성화되어 있습니다. 이는 특히 데스크톱용 대형 모니터를 사용하는 방문자를 염두에 두고 설계된 기능입니다. 대부분의 경우에는 웹 사이트에 대해 [고정 바닥글] 옵션을 활성화해 두는 것이 좋습니다. 이 옵션을 사용하면 Apple Cinema Display에서와 같이 브라우저 창이 웹 페이지 디자인보다 훨씬 더 커도 바닥글을 원하는 위치에 둘 수 있기 때문입니다.

브라우저에서 Muse 사이트를 미리 보면서 페이지를 축소해 보면 이 기능이 어떻게 작동하는지 쉽게 알 수 있습니다. 브라우저 창에 비해 페이지 컨텐트를 너무 작게 만들면 바닥글이 페이지 맨 아래쪽에 맞춰 정렬되는 대신 바닥글 아래 영역에 브라우저 창이 표시됩니다.

Muse에서 새 사이트를 만들 때 [새 사이트] 대화 상자를 보면 [고정 바닥글] 옵션이 기본적으로 활성화된 것을 알 수 있습니다.

새 사이트 옵션
새 사이트를 만들 때 [고정 바닥글] 확인란이 자동으로 선택됩니다.

일반적으로는 사이트를 디자인할 때 고정 바닥글 기능을 사용하는 것이 좋습니다. 그러나 (사이트에 최소한의 페이지 컨텐트 밖에 없어서 페이지가 상당히 짧은 데 반해 바닥글 위치가 고정되어 있어서) 페이지 길이가 원하는 것보다 훨씬 더 길게 표시된다면 언제든지 [페이지 속성] 대화 상자에서 확인란을 선택 취소하여 이 기능을 해제할 수 있습니다.

페이지 속성에서 고정 바닥글을 해제합니다.
사이트를 만든 후에 [페이지 속성]을 업데이트하여 [고정 바닥글] 옵션을 해제합니다.

고정된 요소

Muse를 통해 생성되는 코드는 모든 최신 웹 브라우저와 플랫폼에서 디자인 의도대로 표시되고 작동하는지 확인 테스트를 거쳤습니다.

데스크톱 버전과 모바일 버전의 브라우저는 웹 표준에서 몇 가지 차이를 보이는데 고정된 페이지 요소 지원 기능도 그 중 하나입니다. 데스크톱 브라우저를 위한 사이트를 디자인할 때는 요소를 선택한 다음 컨트롤 패널 옵션을 사용하여 해당 요소를 브라우저 창에 고정할 수 있습니다. 특정 요소를 고정하면 일관된 탐색 환경을 만드는 데 도움이 됩니다. 페이지 길이가 긴 경우, 방문자가 페이지를 아래쪽으로 얼마나 많이 스크롤하든 상관없이 특정 요소를 동일한 자리에 계속 유지하고 싶을 때도 이 기능을 유용하게 사용할 수 있습니다.

이 문서를 작성하는 현재 시점에서, 모바일 브라우저는 이와 같은 고정된 개체를 완벽하게 지원하지 않습니다. 따라서 휴대폰 및 태블릿 레이아웃을 디자인할 때는 고정된 개체를 구현하기 위한 대체 전략을 마련해야만 합니다.

휴대폰 또는 태블릿 레이아웃을 디자인할 때는 [핀] 옵션이 비활성화되어 이를 선택할 수 없습니다.

고정된 요소 옵션
모바일 레이아웃을 디자인할 때는 컨트롤 패널의 [핀] 인터페이스를 사용할 수 없습니다.

모바일 레이아웃이 적용된 사이트 게시

데스크톱 사이트를 게시하는 데 일반적으로 사용하는 것과 같은 방법으로 Muse에서 여러 가지 레이아웃이 적용된 사이트를 게시할 수 있습니다. 모바일 레이아웃을 디자인할 때는 평가용 사이트를 게시한 다음 모바일 장치를 사용하여 라이브 버전을 보면서 작은 화면으로 디자인을 테스트하는 것이 좋습니다.

사이트 파일을 호스팅 서버에 업로드하려면 [게시]를 클릭하거나 [파일] > [FTP 호스트에 업로드]를 선택합니다.

여러 가지 레이아웃이 적용된 Muse 사이트를 게시하더라도 이를 라이브로 푸시하는 데는 단일 URL이 사용됩니다. 따라서 예를 들어 다음과 같은 도메인 이름을 한 개만 등록하면 됩니다.

http://www.my-site.com

서로 다른 레이아웃이 두세 개 포함된 사이트를 게시하면 방문자가 페이지에 액세스하는 데 사용하는 브라우저의 유형이 무엇인지, 컴퓨터 또는 장치의 유형이 무엇인지 식별하는 감지 스크립트가 포함된 사이트 코드가 Muse를 통해 생성됩니다.

이 감지 코드에서는 플랫폼 및 브라우저 버전을 확인한 다음 그에 맞는 레이아웃을 자동으로 선택하여 표시합니다. 태블릿을 사용하는 방문자에게는 태블릿용 디자인을 보여 주고 스마트폰을 사용하는 방문자에게는 휴대폰용 디자인을 보여 주기 위해 따로 신경을 쓸 부분이 전혀 없습니다. 이 모든 작업이 자동으로 처리됩니다.

Muse에 새로 추가된 모바일 레이아웃 기능을 사용하면 장치 사용자가 불필요하게 큰 파일을 다운로드하지 않아도 되도록 모바일 레이아웃을 최적화할 수 있습니다. 대체 레이아웃 기능은 크기가 작게 조정된 이미지 파일만을 위한 것으로서, 어떤 플랫폼과 브라우저에서든 사이트가 제 기능을 올바르게 수행하도록 하는 데 그 목적이 있습니다.

Muse를 사용하여 작업하는 방법을 더 자세히 알고 싶으면 Adobe Muse 도움말 페이지에서 여러 가지 다른 문서와 자습서를 참조하십시오.

페이지로 이동을 사용하여 레이아웃 간 사이트 컨텐트 복사

[A-마스터(데스크톱)] 탭을 클릭하여 마스터 데스크톱 페이지를 [디자인] 보기에서 활성화합니다.

Muse에서 제공하는 [페이지로 이동] 도구를 사용하면 레이아웃 사이를 쉽게 전환할 수 있습니다. 이 단추는 레이아웃이 여러 개인 프로젝트의 [디자인] 보기에 표시됩니다.

  1. [페이지로 이동] 단추를 클릭합니다.
[페이지로 이동] 단추
[페이지로 이동] 단추는 페이지를 가리키는 화살표 모양입니다.

레이아웃이 여러 개일 때는 여러 페이지 사이를 앞뒤로 신속하게 오가며 컨텐트를 간편하게 복사하고 붙여넣을 수 있어야 작업을 쉽게 진행할 수 있습니다.

참고: [페이지로 이동] 단추를 클릭하는 대신 바로 가기 키 Command+J(Mac) 또는 Ctrl+J(Windows)를 사용해도 됩니다.

[페이지로 이동] 대화 상자가 열립니다. 이 대화 상자에는 사이트의 페이지 이름을 입력할 수 있는 텍스트 필드가 있습니다. 페이지 이름의 처음 몇 글자만 입력하면 매번 [플랜] 보기로 돌아가지 않고도 해당 페이지를 찾아 쉽게 이동할 수 있습니다.

  1. 찾고자 하는 페이지의 이름 중 처음 세 글자를 입력합니다. 이 예제에서는 "Master"라는 단어의 처음 세 글자인 "mas"를 입력합니다.

사이트에 있는 모든 일치하는 페이지 이름을 검색한 결과가 필드 아래 목록으로 표시됩니다.

  1. 아래쪽 화살표 키를 두 번 눌러 "A-마스터(휴대폰)" 페이지를 선택한 다음 Return/Enter 키를 눌러 해당 페이지를 엽니다.

"A-마스터(휴대폰)" 페이지가 [디자인] 보기에서 열리고 편집할 준비가 됩니다.

새로 추가된 다음과 같은 바로 가기 키를 사용하여 사이트의 각 레이아웃 사이를 쉽게 이동할 수도 있습니다.

  • Command/Ctrl+7을 누르면 데스크톱 레이아웃이 표시됩니다.
  • Command/Ctrl+8을 누르면 태블릿 레이아웃이 표시됩니다.
  • Command/Ctrl+9를 누르면 휴대폰 레이아웃이 표시됩니다.

이러한 바로 가기 키는 그에 상응하는 레이아웃이 현재 편집 중인 사이트에 있을 때만 활성화됩니다. 새로 추가된 이러한 바로 가기 키를 직접 사용해 보면서 레이아웃과 특정 페이지 사이를 어떻게 전환하는 것이 가장 편한지 자신에게 맞는 방법을 찾으십시오.

그러면 이번에는 두 번째 마스터 휴대폰 페이지를 만들고 디자인 요소를 추가해 보겠습니다.

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

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