참고:

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

반응형 디자인은 Adobe Muse 2016년 2월 릴리스 이후에서 지원됩니다. 2016년 2월 릴리스 이전 버전에서 만든 웹 사이트가 있는 경우 사이트를 반응형 디자인으로 변환할 수 있습니다.

반응형 레이아웃으로 마이그레이션해야 하는 이유

대체 레이아웃을 사용하는 기존 Adobe Muse 프로젝트가 있는 경우 프로젝트를 반응형 레이아웃으로 마이그레이션할 수 있습니다. 그러나 대체 레이아웃으로 작업을 계속하려면 해당 작업을 수행할 수 있습니다.  

반응형 사이트는 대개 많은 코딩 및 복잡한 템플릿을 의미합니다. 처음으로 Adobe Muse는 코딩이나 그리드 또는 템플릿을 사용하지 않고 반응형 사이트를 만들 수 있는 기능을 제공합니다. 또한 단일 파일을 사용하여 화면 크기에 상관없이 모든 장치에서 제대로 배치되는 완벽한 반응형 사이트를 만들 수 있습니다. 이제 별도의 레이아웃을 만들지 않아도 됩니다.

Adobe Muse 반응형 디자인을 사용하면 매우 편리하게 텍스트와 이미지를 업데이트할 수 있습니다. 동일한 변경사항으로 각 레이아웃을 업데이트하느라 많은 시간을 소비하지 않아도 됩니다. 또한 브라우저를 통해 사이트 컨텐트를 편집할 수 있게 해주는 응용 프로그램인 In-Browser Editing에서도 반응형 레이아웃을 지원합니다.

Adobe Muse는 사이트 디자인에 필요한 많은 유연성을 제공합니다. 특정 중단점에서 특정 개체를 표시하거나 숨기도록 선택할 수 있습니다. 예를 들어, 모바일 장치를 통해 사이트를 조회할 때 터치식 메뉴를 표시하도록 선택할 수 있습니다. 개체를 위치에 고정하거나 특정 중단점의 개체 위치를 조정할 수 있습니다.

기존 Adobe Muse 사이트를 반응형 레이아웃으로 마이그레이션하는 방법을 읽어 보십시오. 사이트를 반응형 디자인으로 마이그레이션하고 미래 지향적인 웹 사이트로 만드십시오.

대체 레이아웃을 반응형 레이아웃으로 마이그레이션하는 방법

웹 사이트를 반응형 레이아웃으로 마이그레이션하기 전에 Adobe Muse에서 반응형 웹 디자인의 개요를 확인할 수 있습니다.

사이트를 반응형 레이아웃으로 마이그레이션하는 방법은 다음과 같습니다.

  1. 기존 웹 사이트를 엽니다.

  2. 웹 사이트에서 각 페이지를 열고 [페이지] > [페이지 속성]을 클릭합니다.

    페이지 속성 클릭
  3. [레이아웃] 탭에서 고정 폭유동 폭으로 변경합니다. 이 창에서 최소, 최대 페이지 폭 및 여백을 설정할 수도 있습니다.

    확인을 클릭합니다.

    고정 폭을 유동 폭으로 변경
    페이지 속성 창에서 고정 폭을 유동 폭으로 변경합니다.

  4. 추가하는 모든 새 페이지도 유동으로 설정하려면 [파일] > [사이트 속성]을 클릭합니다. 이 창에서 고정 폭유동 폭으로 수정합니다.

  5. 레이아웃에 대한 최대 페이지 폭, 최소 폭 및 최소 높이를 선택합니다.

  6. 확인을 클릭합니다.

  7. 마스터 페이지 및 개별 페이지로 이동하여 페이지를 유동 폭으로 엽니다.

    반응형 디자인을 효율적으로 사용하려면 스크롤 효과를 사용 안함으로 설정합니다. 특정 페이지에 대한 스크롤 효과를 유지하려면 해당 페이지에 대해 고정 폭을 계속 사용하십시오.

    고정 폭으로 페이지를 열 경우 기본적으로 페이지의 개체에 고정 폭 설정이 있습니다. 개체는 왼쪽으로 고정됩니다.

  8. 브라우저 폭에 비례해서 개체 크기가 변하도록 개체를 유동으로 설정합니다. 유동으로 만들 각 개체를 마우스 오른쪽 단추로 클릭하고 [반응형] 옵션을 선택합니다.

    개체를 유동으로 만들려면 고정을 제거합니다. 고정을 제거하려면 개체를 마우스 오른쪽 단추로 클릭하고 [페이지에 고정] > [유동]을 선택합니다.

  9. 스크러버를 사용하여 다른 브라우저 폭에서 페이지 레이아웃을 보십시오.

    일부 위젯이 유동이 아님을 알 수 있습니다. 이러한 위젯이 디자인을 망친다면 해당 페이지 폭에 중단점을 추가하면 됩니다. 그러면 중단점에 맞게 위젯 크기를 조정하거나 해당 중단점에 대해 위젯을 숨길 수 있습니다.

    기본적으로 이전 버전에서 만든 웹 사이트에서 작업할 때는 중단점 막대가 표시되지 않습니다. 중단점을 표시하려면 [보기] > [중단점 표시]를 클릭합니다.

    보기 메뉴를 통해 중단점 표시하기
    [보기] > [중단점 표시]를 클릭합니다.

    참고:

    반응형 디자인에서 레이아웃을 계획할 경우 먼저 가장 큰 페이지 폭에 대해 페이지를 배치합니다. 그런 다음 스크러버를 사용하여 다른 브라우저 폭에서 페이지를 봅니다. 디자인이 중단될 경우 해당 폭에서 중단점을 추가합니다. 그런 다음 이러한 중단점에서 레이아웃을 조정합니다.

    가장 바람직한 방법은 사용자 장치의 화면 크기가 아니라 사이트의 레이아웃을 기반으로 중단점을 추가하는 것입니다.

  10. 개체 크기와 위치를 조정하고 모든 브라우저 폭에서 잘 배치되어 나타나도록 텍스트 서식을 지정합니다. 반응형 레이아웃에서 개체 배치에 대한 자세한 내용은 반응형 웹 디자인에서 개체 배치를 참조하십시오.

    참고:

    개체를 배치할 때 개체 간 거리와 개체와 브라우저 가장자리 사이의 거리를 확인합니다. 중단점 사이에서 발생하는 디자인 문제를 해결하려면 개체 배치를 조정하거나 다른 중단점을 추가해야 할 수 있습니다.

  11. 모든 중단점에서 텍스트 정렬 및 가독성을 확인하십시오. 텍스트 상자를 재정렬하거나 특정 페이지 폭에 대한 텍스트 서식을 지정하려면 반응형 레이아웃에서 텍스트 서식 지정을 참조하십시오.

  12. 스크러버를 특정 중단점으로 드래그하여 변경 내용을 미리 보거나 웹 브라우저에서 변경 내용을 미리 보십시오.

  13. 다른 장치에서 만들었을 수 있는 웹 사이트의 대체 레이아웃을 모두 삭제하십시오. 반응형 웹 디자인을 사용하면 단일 캔버스에서 모든 장치에 대한 사이트를 마이그레이션하고 유지할 수 있습니다.

이제 반응형 웹 사이트를 게시할 준비가 되었습니다.

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

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