중단점에 대해 자세히 알아보려면 이 문서를 읽어 보십시오. 반응형 레이아웃에 맞춰 개체를 고정 및 크기 조정하는 방법과 중단점에서 텍스트 서식을 지정하는 방법을 배우게 됩니다.

참고:

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

반응형 디자인에서 개체 및 텍스트의 단일 레이아웃이 모든 화면 크기에 맞지 않을 수 있습니다. 이미지, 텍스트, 위젯 및 양식이 다른 중단점에 다시 배치될 수 있습니다. 프레임이 페이지 폭을 벗어날 수 있고 개체가 다른 개체와 겹치거나 텍스트 투명도가 줄어들 수 있습니다. 이미지, 텍스트, 위젯 및 양식이 다른 중단점에 다시 배치되어야 합니다. 따라서 다양한 화면 크기에서 잘 배치된 정돈된 상태로 나타나도록 개체를 신중하게 배치하고 텍스트 서식을 지정합니다. 

페이지를 디자인하면 스크러버를 사용하여 다양한 화면 크기에서 레이아웃을 미리 볼 수 있습니다. 특정 브라우저 폭에 개체를 다르게 배치해야 할 경우 중단점을 추가할 수 있습니다.

중단점에 대한 자세한 내용과 Adobe Muse의 반응형 레이아웃에서 레이아웃을 효과적으로 디자인하는 방법을 읽어 보십시오.

중단점이란 무엇입니까?

반응형 레이아웃의 중단점은 다른 브라우저 폭(픽셀)을 나타냅니다. 중단점을 사용하면 다른 브라우저 폭에서 디자인을 시각화하고 페이지의 개체가 브라우저 폭의 변경 사항에 반응하는 방식을 테스트할 수 있습니다.

중단점 추가

기본적으로 Adobe Muse의 새 사이트에는 데스크톱(960픽셀 폭)용 중단점이 포함되어 있습니다. 이 폭으로 레이아웃 디자인을 시작할 수 있습니다. 디자인을 완성하면 스크러버를 사용해서 다양한 폭의 레이아웃을 미리 볼 수 있습니다. 이 경우 디자인이 바뀌는 시점의 폭을 확인하고 기록할 수 있습니다. 예를 들어, 텍스트의 줄이 두 개로 나뉜다거나 가로로 나열된 이미지가 세로로 정렬되는 시점을 말합니다. 이런 경우에는 폭에 추가 중단점이 필요합니다. 필요한 중단점을 추가한 후 개체가 잘 배치되도록 디자인을 수정합니다.

Adobe Muse는 모든 중단점에 대한 백 엔드에서 해당 미디어 쿼리 선언을 웹 페이지에 추가합니다. 미디어 쿼리는 CSS3 모듈로, 다양한 화면 크기에 맞춰 콘텐츠 렌더링을 수행할 수 있습니다. 대부분의 최신 브라우저는 이러한 중단점에 맞게 미디어 쿼리를 해석할 수 있습니다. 사용자가 웹 페이지를 다양한 장치에서 보는 경우 브라우저를 통해 최적의 미디어 쿼리와 해당 디자인 레이아웃이 선택되어 사용자에게 표시됩니다.

  1. 중단점 막대에서 스크러버를 드래그하여 중단점을 추가하려는 지점에 있는 위치에 놓습니다.

  2. 중단점 막대에서 기호를 클릭합니다. 중단점 막대에 새 중단점이 추가됩니다. 중단점의 브라우저 폭도 확인할 수 있습니다.

    같은 방법으로 중단점 막대에서 필요한 지점에 중단점을 추가하고 특정 브라우저 폭을 설정합니다.

    중단점을 클릭하면 활성 중단점이 색으로 채워집니다. 다른 중단점은 회색으로 표시됩니다.

    참고:

    디자인 보기에서 중단점이 있는 라이브러리 항목을 배치하여 중단점을 추가할 수도 있습니다. 라이브러리 패널을 열고 배치할 개체를 선택한 다음 해당 개체 옆의 더하기(+) 기호를 클릭하고 디자인 보기로 개체를 드래그합니다.

중단점은 어디에 추가해야 합니까?

개별 페이지뿐만 아니라 중단점을 마스터 페이지에 추가할 수 있습니다. 중단점을 개별 페이지에 추가하면 중단점 값이 특정 페이지에만 적용됩니다.

마스터 페이지에서 중단점을 추가하는 경우 필요한 모든 중단점을 선택하여 개별 페이지에 적용할 수 있습니다. 마스터 페이지의 중단점은 개별 페이지에서 작은 삼각형으로 나타납니다. 플러스 기호(+)를 클릭하기만 하면 페이지별로 이러한 중단점을 활성화할 수 있습니다.

마스터 페이지 중단점
+를 클릭하여 마스터 페이지 중단점을 추가합니다.

이 시나리오를 고려하십시오. 사이트를 배치할 때 휴대전화와 같은 장치에 대한 특정 중단점을 추가해야 할 수 있습니다. 마스터 페이지에서 적절한 중단점을 추가하면 개별 페이지에서도 사용할 수 있습니다. 개별 페이지를 추가로 디자인할 경우 한 번 클릭으로 이 중단점을 해당 페이지에 추가할 수 있습니다.

참고:

다른 마스터 페이지를 개별 페이지에 적용하면 이전 마스터 페이지의 중단점이 새로운 마스터 페이지의 중단점으로 교체됩니다.

중단점 편집

  1. 중단점 막대에서 스크러버를 드래그하여 원하는 중단점 값에 놓습니다. 이것이 수정된 중단점 위치입니다.

  2. 중단점 색을 확인하거나 편집하려면 중단점을 마우스 오른쪽 단추로 클릭하고 [중단점 속성]을 선택하거나 중단점을 두 번 클릭합니다.

    또한 이 창에서 중단점 색, 페이지 폭, 높이 및 여백 값을 수정할 수 있습니다.

    중단점 색상 및 여백 값을 보고 수정하기 위한 중단점 속성
    [중단점 속성] 대화 상자를 사용하여 중단점 색상, 중단점 값을 수정할 수 있습니다.

  3. [확인]을 클릭하여 변경 사항을 저장합니다.

참고:

개별 페이지에서는 마스터 페이지 중단점을 편집할 수 없습니다.

중단점 삭제

  1. 중단점을 삭제하려면 다음 단계 중 하나를 수행합니다.

    • 활성 중단점 왼쪽에 있는 X를 클릭합니다.
    • 중단점 막대를 마우스 오른쪽 단추로 클릭하고 [중단점 삭제]를 클릭합니다.

    중단점을 삭제하면 해당 레이아웃이 변경되고 중단점에 대한 텍스트 설정이 삭제됩니다.

    중단점 삭제
    중단점을 삭제하려면 x 기호를 클릭하십시오.

    마우스 단추 오른쪽 클릭으로 중단점 삭제
    마우스 오른쪽 단추를 클릭해서 중단점을 삭제합니다.

    참고:

    개별 페이지에서는 마스터 페이지 중단점을 삭제할 수 없습니다.

중단점 간 이동

현재 중단점에서 다음 또는 이전 중단점으로 이동할 수 있습니다. 이전 또는 다음 중단점으로 이동하려면 다음을 수행합니다.

  • Windows 사용자: 
    • 이전 중단점 - Ctrl + Shift + 5를 누름
    • 다음 중단점 - Ctrl + Shift + 6을 누름
  • Mac OS 사용자:
    • 이전 중단점 - Cmnd + Shift + 5를 누름
    • 다음 중단점 - Cmnd + Shift + 6을 누름

반응형 레이아웃에서 개체 작업

다음 옵션을 사용하여 모든 중단점에서 레이아웃이 올바르게 보이도록 할 수 있습니다.

  • 개체 숨기기/표시: 선택적으로 한 중단점에서는 개체를 숨기고 다른 중단점에는 개체를 표시하도록 선택할 수 있습니다. 자세한 내용은 개체 표시 또는 숨기기를 참조하십시오.
  • 여러 중단점에서 개체를 다르게 배치: 여러 중단점에 있는 서로 다른 위치에 단일 개체를 배치할 수 있습니다. 자세한 내용은 반응형 웹 디자인에서 개체 배치를 참조하십시오.
  • 반응형 핀으로 고정 사용: 고정시킬 개체와 유동으로 설정할 개체를 지정할 수 있습니다. 모든 중단점에서 개체가 동일한 위치에 있도록 개체를 핀으로 고정시킬 수 있습니다. 자세한 내용은 반응형 핀으로 고정을 참조하십시오.
  • 개체 크기 조정: 중단점별로 개체 크기를 조정할 수 있습니다. 또한 페이지 폭에 따라 개체 크기가 자동으로 조정되도록 설정할 수 있습니다. 개체 크기 조정에 대한 자세한 내용은 개체 크기 조정을 참조하십시오.
  • 여러 중단점에 대한 텍스트 서식 지정: 여러 중단점에서 텍스트 서식을 다르게 지정하여 다른 브라우저 폭에서 텍스트의 명확성 및 가독성을 높일 수 있습니다. 자세한 내용은 반응형 레이아웃에서 텍스트 서식 지정을 참조하십시오.

개체 표시 또는 숨기기

고려할 상황: 일반적인 데스크톱용 메뉴를 삽입했습니다. 하지만, 이 메뉴는 태블릿 화면에서 너무 많은 공간을 차지합니다. 샌드위치 메뉴 또는 아코디언은 태블릿 장치에서 더 잘 작동합니다.

Adobe Muse에서 반응형 웹 사이트를 디자인할 때는 이런 상황을 간편하게 처리합니다. 다음 이미지와 같이 데스크톱 보기에 대해 기존 메뉴를 표시하고 태블릿 장치에 대해 샌드위치 메뉴를 표시하도록 선택할 수 있습니다.

반응형 레이아웃에서 개체 표시 또는 숨기기
데스크톱 보기에서는 기존 메뉴를 표시하고 샌드위치 메뉴를 숨깁니다.

반응형 레이아웃에서 개체 표시 또는 숨기기
모바일 보기에서는 샌드위치 메뉴를 표시하고 기존 메뉴를 숨깁니다.

Adobe Muse 프로젝트에서 개체를 표시 또는 숨기는 방법은 다음과 같습니다.

  1. 일부 중단점에서 숨기려는 개체를 포함하여 필요한 모든 개체를 삽입합니다.

  2. 스크러버를 드래그하여 특정 중단점 보기로 이동합니다.

  3. 숨기려는 개체를 마우스 오른쪽 단추로 클릭한 다음 [중단점에서 숨기기]를 클릭합니다.

    해당 개체는 현재 중단점 보기에서는 숨겨지지만 다른 중단점에는 표시됩니다. 해당 개체를 다른 모든 중단점에서도 숨기려면 [다른 중단점에서 숨기기]를 클릭합니다. 레이어 패널을 사용해서 나중에 특정 중단점의 개체를 표시할 수 있습니다.

    중단점에서 개체 숨기기
    중단점에서 개체 숨기기

    이제 중단점 보기에서 표시되는 개체를 배치합니다.

  4. 이전에 숨겼던 개체를 표시하려는 중단점 보기로 이동합니다. 그렇게 하도록 스크러버를 드래그할 수 있습니다.

  5. [레이어] 패널을 클릭하고 숨기기 해제하려는 개체의 레이어를 찾습니다. 개체 레이어를 찾기 위해 다른 레이어를 드릴 다운해야 할 수도 있습니다.

    [레이어] 패널을 통해 개체 표시 또는 숨기기
    [레이어] 패널을 사용하여 개체 표시/숨기기

  6. 개체 레이어에 해당하는 첫 번째 열을 클릭합니다. 이제 개체가 현재 중단점 보기에 표시됨을 나타내는 작은 검은색 점이 나타납니다.

    표시 또는 숨길 개체 클릭
    개체를 표시 또는 숨길 첫 번째 열을 클릭하십시오.

    모든 중단점에서 개체의 숨기기를 해제하려면 해당 개체를 마우스 오른쪽 단추로 클릭하고 [다른 중단점에 표시]를 클릭합니다.

개체 배치

여러 중단점 보기에서 개체를 다르게 배치할 수 있습니다. 예를 들어, 데스크톱 보기에서는 이미지를 가로로 배치하고 모바일 보기에서는 이미지를 세로로 배치할 수 있습니다.

Adobe Muse는 개체 위치를 기억했다가 화면 크기가 바뀌면 그에 맞게 표시합니다.

데스크톱 보기를 위한 개체 배치
데스크톱 보기를 위한 개체를 가로로 배치합니다.

데스크톱 보기를 위한 개체를 배치합니다.
모바일 장치를 위한 개체를 세로로 배치합니다.

중단점 사이에서 개체를 이동하려면 다음을 수행합니다.

  1. 개체를 배치하려는 중단점을 선택합니다.

  2. 개체를 드래그하여 원하는 위치에 놓습니다.

    참고:

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

여러 개체를 그룹으로 이동

반응형 레이아웃에서 개체 그룹을 함께 이동할 수 있습니다. 세로로 정렬된 개체 그룹을 이동하려면 맨 위의 개체를 선택하기만 하면 됩니다. Adobe Muse의 왼쪽 여백에 수직 이동 핸들이 표시되는 것을 확인할 수 있습니다.

Adobe Muse의 수직 이동 핸들
세로로 정렬된 개체 그룹을 이동합니다.

핸들을 클릭하여 위 또는 아래로 이동하면 선택한 개체와 아래 개체들이 모두 그룹으로 이동하는 것을 확인할 수 있습니다.

중단점이 있는 개체 배치

디자인 보기에서 중단점이 있는 라이브러리 항목을 배치하여 일련의 중단점을 추가할 수 있습니다. [라이브러리] 패널([창] > [라이브러리])을 엽니다. 페이지에 추가할 항목을 선택합니다. 항목 옆에 있는 더하기 기호를 클릭한 다음 항목을 디자인 보기로 드래그합니다.

라이브러리 항목을 사용하여 중단점 추가
더하기(+) 기호를 클릭하여 중단점이 있는 개체 배치

페이지에 일련의 중단점이 자동으로 추가된 것을 볼 수 있습니다. 페이지에 이미 중단점이 추가되어 있는데 중단점이 있는 라이브러리 항목을 추가한 경우, 페이지에서 모든 중단점이 활성화됩니다.

중단점이 있는 라이브러리 항목을 사용하여 여러 페이지 간에, 그리고 여러 .muse 파일 간에 중단점을 복제할 수 있습니다.

핀으로 개체 고정

Adobe Muse에서 특정 개체를 고정하려면 핀으로 고정 기능을 사용하십시오. 개체는 페이지나 브라우저에 고정시킬 수 있습니다.

  • 브라우저에 핀으로 개체 고정: 브라우저 스크롤 막대를 사용할 때도 개체가 유지되도록 하려면 개체를 브라우저에 고정할 수 있습니다. 예를 들어, 위아래로 스크롤해도 그대로 유지되는 메뉴 막대를 만들 수 있습니다. 브라우저에 개체를 고정하는 방법에 대한 자세한 내용은 링크를 참조하십시오.
  • 페이지에 핀으로 개체 고정: 웹 페이지에 대해 개체가 고정된 채로 유지되도록 하려면 페이지에 개체를 고정할 수 있습니다. 예를 들어, 웹 페이지의 오른쪽 위 모서리에 회사 로고가 항상 표시되도록 할 수 있습니다.

반응형 디자인에서 개체를 페이지에 고정하는 방법을 살펴보십시오.

참고:

개체를 고정시킬지 결정하려면 스크러버를 사용하고 여러 브라우저 폭에서 페이지를 확인합니다. 페이지에 개체를 고정시키려면 다음 단계를 수행합니다.

  1. 핀으로 고정시키려는 개체를 선택합니다.

  2. 맨 위의 [핀으로 고정] 옵션에서 개체를 페이지에 고정할 상자 중 하나를 선택합니다.

    반응형 디자인에서 [페이지에 핀으로 고정] 옵션을 사용합니다.
    [핀으로 고정] 메뉴를 사용하여 반응형 레이아웃에 개체를 고정합니다.

  3. 다음 방법 중 하나로 페이지에 개체를 고정하십시오.

    • 왼쪽에 핀으로 고정 : 웹 사이트의 왼쪽에 개체를 고정하려면 이 상자를 선택합니다. 브라우저의 가장자리와 개체의 왼쪽 사이의 거리는 그대로 유지됩니다.
    • 가운데에 핀으로 고정 : 개체를 가운데에 고정하려면 이 상자를 선택합니다. 개체의 왼쪽 및 맨 위 가장자리와 브라우저의 가장자리 사이의 거리는 그대로 유지됩니다.
    • 오른쪽에 핀으로 고정 : 웹 사이트의 오른쪽에 개체를 고정하려면 이 상자를 선택합니다. 브라우저의 가장자리와 개체의 오른쪽 사이의 거리는 그대로 유지됩니다.

    예를 들어, 모든 중단점에서 페이지의 오른쪽 모서리에 지금 선주문과 같은 단추가 표시되어야 하는 경우 이미지에 보이는 것처럼 이 단추를 선택하여 오른쪽에 고정해야 합니다.

    개체를 오른쪽에 고정할 상자를 클릭합니다.
    개체를 오른쪽에 고정할 오른쪽 상자를 클릭합니다.

    Adobe Muse에서 페이지에 개체를 고정하면 [페이지에 핀으로 고정] 위치를 나타내는 개체를 점선으로 표시합니다. 다음 이미지에서 페이지의 오른쪽 모서리로 확장된 점선을 확인하십시오. 이는 개체가 페이지의 오른쪽에 고정되었다는 것을 나타냅니다.

    페이지에 고정 크로우바
    점선은 [페이지에 핀으로 고정] 위치를 나타냅니다.

  4. 다른 페이지 폭에서 레이아웃을 보려면 스크러버를 사용하십시오. 페이지 크기가 조정되면 핀으로 고정이 페이지 레이아웃에 영향을 미치는지 확인하십시오.

개체 크기 조정

  1. 개체 크기를 조정하려는 중단점 보기로 이동합니다.

  2. 개체를 마우스 오른쪽 단추로 클릭한 후 [크기 조정] > <크기 조정 옵션>을 선택합니다.

    참고:

    개체마다 크기 조정 옵션이 다릅니다. 예를 들어, 반응형 레이아웃의 경우 이미지 크기를 폭과 높이로 조정할 수 있는 반면, 텍스트 상자의 크기는 폭으로만 조정할 수 있습니다.

    유동이 아닌 개체에는 크기 조정 옵션이 없습니다.

  3. 현재 중단점의 개체를 드래그하여 크기를 조정합니다.

    예를 들어, 첫 번째 이미지에서 이미지는 768픽셀의 중단점 폭을 초과합니다. 두 번째 이미지에 표시된 것처럼 페이지 폭에 맞게 이미지를 드래그하고 크기를 조정할 수 있습니다.

    이미지가 페이지 폭을 초과합니다.
    이미지가 페이지 폭을 초과합니다.

    다른 중단점에 대한 개체의 크기를 조정합니다.
    다른 중단점에 대한 개체를 드래그하고 크기를 조정합니다.

  4. 브라우저에서 이 변경 내용을 미리 봅니다. 브라우저 폭이 중단점 값에 도달할 때까지 브라우저 크기를 조정합니다. 브라우저 폭이 중단점 값에 도달하면 개체 크기가 변경됩니다.

참고:

상태 단추 또는 기타 위젯 컨테이너에 있는 항목이 유동으로 설정되면 컨테이너 크기가 조정될 때 다시 배치되거나 크기가 조정됩니다.

개체 크기 및 위치 복사

여러 중단점에 있는 개체 크기 및 위치를 복사하려면 다음 단계를 수행합니다.

  1. 복사하려는 개체를 마우스 오른쪽 단추로 클릭합니다.

  2. 다음 중 하나를 수행합니다.

    • [크기 및 위치를 다음 위치로 복사] > <특정 중단점 값>을 선택하여 현재 개체 크기 및 위치를 특정 중단점에 적용합니다.
    • [크기 및 위치를 다음 위치로 복사] > [모든 중단점]을 선택하여 현재 개체 크기 및 위치를 모든 중단점에 적용합니다.

반응형 레이아웃에서 텍스트 서식 지정

반응형 디자인에서 다양한 브라우저 폭에 대한 텍스트를 명확하고 읽을 수 있도록 처리하는 것이 중요합니다. 한 중단점 보기에 배치된 텍스트가 다른 중단점 보기에서 갑자기 줄 바꿈될 수 있습니다. 중단점을 전환하면 원치 않는 줄 바꿈이 나타날 수도 있습니다.

Adobe Muse에서는 다양한 중단점에서 텍스트 서식을 다르게 지정할 수 있습니다. 예를 들어, 태블릿에 대해 글꼴 크기 20pt, 모바일에 대해 15pt를 선택할 수 있습니다.

데스크톱 보기용 텍스트 서식 지정
데스크톱 보기용 텍스트 서식 지정

모바일 보기용 텍스트 서식 지정
모바일 보기용 텍스트 서식 지정

반응형 레이아웃에서 텍스트 서식을 지정하기 위해 Adobe Muse는 패널에 텍스트 서식 지정 아이콘을 제공하며 자르기 도구와 선택 도구도 확인할 수 있습니다. 이 아이콘에는 두 가지 옵션이 있고 두 옵션 중 하나를 선택하여 텍스트 서식을 지정할 수 있습니다.

[전체 중단점에 텍스트 서식 설정] 옵션을 선택하면 페이지에 있는 모든 중단점의 텍스트 서식을 지정할 수 있습니다. 이 옵션을 선택하면 한 중단점 보기에서만 텍스트 서식을 지정해야 합니다. 다른 중단점에서 텍스트는 자동으로 서식이 지정됩니다.

반면, 특정 중단점에 대한 텍스트 서식을 지정해야 하는 경우 [현재 중단점에 텍스트 서식 설정] 옵션을 선택하면 됩니다. 예를 들어, 모바일용 텍스트를 배치할 때 텍스트 크기가 24로 커지도록 선택할 수 있습니다.

텍스트 형식을 기억했다가 웹 사이트를 다른 브라우저 폭으로 볼 때 그에 맞게 표시합니다.

반응형 레이아웃에서 텍스트 서식 지정

  1. 필요한 중단점 보기로 이동합니다.

  2. 텍스트 상자를 선택하고 드래그하여 크기를 조정합니다. 텍스트 상자 크기를 조정하면 텍스트가 재배치됩니다.

    참고:

    텍스트 상자의 오른쪽 테두리는 텍스트 상자 크기를 조정하면서 텍스트가 폭에 맞게 표시되는 정도를 정의합니다.

  3. 텍스트 서식을 지정하려면 서식을 지정하려는 텍스트를 선택하고 다음 중 하나를 클릭합니다.

    • 모든 중단점에서 텍스트 서식을 지정하려면 [전체 중단점에 텍스트 서식 설정]
    • 현재 중단점에서만 텍스트 서식을 지정하려면 [현재 중단점에 텍스트 서식 설정]

    이 옵션은 모두 텍스트 도구와 자르기 도구를 선택하는 왼쪽 패널에서 사용할 수 있습니다.

    중단점의 텍스트 서식 지정
    반응형 디자인에서 텍스트 서식 지정

    A. 전체 중단점에 텍스트 서식 지정 B. 현재 중단점에 텍스트 서식 지정 

    참고:

    반응형 레이아웃의 텍스트 서식 지정 옵션은 텍스트 서식만 변경합니다. 중단점별로 단어나 내용을 변경할 수는 없습니다.

중단점의 텍스트 서식 지정 복사

여러 중단점 또는 브라우저 폭에서 텍스트 크기 및 위치를 복사하려면 다음 단계를 수행합니다.

  1. 복사하려는 텍스트를 선택합니다.

  2. 다음 중 하나를 수행합니다.

    • 특정 중단점에 현재 텍스트 특성을 적용하려면 [텍스트 형식을 다음 위치로 복사] > <특정 중단점 값>을 마우스 오른쪽 단추로 클릭하여 선택합니다.
    • 다른 모든 중단점에 현재 텍스트 특성을 적용하려면 [텍스트 형식을 다음 위치로 복사] > [모든 중단점]을 마우스 오른쪽 단추로 클릭하여 선택합니다.

    모든 중단점에서 스크러버를 사용하여 레이아웃을 미리 봅니다. 필요에 따라 중단점을 추가하여 다양한 브라우저 폭에 맞게 레이아웃을 최적화합니다.

반응형 레이아웃에 스크롤 효과 적용

반응형 레이아웃에 스크롤 효과를 추가할 수 있습니다. 스크롤 효과는 고정 중단점에만 지원됩니다. 고정 중단점은 레이아웃이 해당 페이지 폭에 고정되어 있음을 나타냅니다. 고정 중단점을 추가하고 스크롤 효과를 적용하려는 개체를 선택한 다음, [스크롤 효과] 설정을 구성합니다.

  1. 스크롤 효과를 추가하려는 Adobe Muse 페이지를 엽니다. 예를 들어, 머리글의 탐색 메뉴 및 배경 이미지에 스크롤 효과를 추가하려고 합니다.

  2. 반응형 레이아웃을 열면 페이지에 중단점이 표시됩니다. 이 중단점은 유동 중단점이며 양방향 화살표가 있는 아이콘으로 표시됩니다.

    유동 중단점
    양방향 화살표 아이콘으로 표시되는 유동 중단점

    [스크롤 효과] 패널을 보고 있는 경우에는 옵션이 해제된 것을 확인할 수 있습니다.

    유동 중단점에 대해 해제된 스크롤 효과
    유동 중단점에 대해 스크롤 효과가 해제되어 있습니다.

  3. 스크롤 효과를 사용하려면 고정 중단점을 추가해야 합니다. 고정 중단점을 추가하려면 중단점 막대에서 해당 중단점을 클릭한 후 [중단점 추가]를 클릭합니다. 

  4. 드롭다운에서 [고정 폭]을 선택하고 [확인]을 클릭합니다.

    고정 폭 중단점 추가
    고정 폭 중단점 추가

    고정 중단점
    사각형 아이콘으로 표시되는 고정 중단점

    고정 중단점은 페이지에 사각형으로 표시됩니다. 1225픽셀 이상의 브라우저 폭으로 페이지를 보는 경우 페이지는 1225픽셀에서 표시되는 폭으로 고정됩니다. 이 중단점에서는 유동 레이아웃이 불가능합니다.

  5. 스크롤 효과를 적용하려는 개체를 선택한 후 [스크롤 효과] 설정을 구성합니다.

    선택한 개체에 스크롤 효과 적용
    선택한 개체에 스크롤 효과 적용

    참고:

    고정 중단점에 있고 다른(유동) 중단점에 위치하지 않은 경우에만 스크롤 효과를 적용할 수 있습니다.

    Adobe Muse에서 스크롤 효과를 추가 및 사용하는 방법에 대한 자세한 내용은 Adobe Muse에 스크롤 효과 적용을 참조하십시오.

FAQ

데스크톱, 태블릿 및 모바일용 사이트를 디자인할 때 이상적인 중단점은 무엇입니까?

특정 장치에 맞는 사이트를 디자인할 경우 해당하는 중단점을 추가할 수 있습니다. 그러나 사용자는 화면 크기에 관계없이 다른 장치에서도 사이트를 볼 수 있습니다. 따라서 디자인이 중단되는 위치에만 중단점을 추가하는 것이 좋습니다. 그래야 모든 장치에서 사이트가 제대로 배치될 수 있습니다.

마스터 페이지의 중단점이 개별 페이지에서 작동하지 않는 이유는 무엇입니까?

마스터 페이지 중단점이 개별 페이지에서 흰색 삼각형으로 표시됩니다. 개별 페이지에서 이 중단점을 사용하려면 중단점 막대의 흰색 삼각형을 클릭한 다음, 더하기(+) 기호를 클릭합니다.

마스터 페이지에서 특정 페이지로 중단점을 쉽게 가져갈 수 있는 또 다른 방법은 마스터 페이지 요소를 복사하고, 중단점을 적용할 페이지로 전환한 다음, [편집] > [중단점으로 붙여넣기]를 선택하고, 붙여넣은 항목을 캔버스에서 삭제하는 것입니다. 항목은 삭제되지만 마스터 페이지의 중단점은 남아 있습니다.

반응형 레이아웃에서 텍스트 상자의 겹침을 방지하는 방법은 무엇입니까?

텍스트 상자가 "유동"이 아닐 경우 상자의 크기가 조정되지 않고 다른 상자와 겹칠 수 있습니다. 텍스트 상자를 유동 상자로 만들려면 각 텍스트 상자를 마우스 오른쪽 단추로 클릭하고 [크기 조정] > [반응형 폭]을 선택합니다.

반응형 사이트에서 불필요한 공백이나 여백을 어떻게 제거할 수 있습니까?

고정 바닥글 또는 숨겨진 개체 등과 같은 몇 가지 이유로 인해 불필요한 공백이나 여백이 있을 수 있습니다. 이 문제의 해결 방법에 대한 자세한 내용은 이 문서를 참조하십시오.

사이트를 미리 볼 때 나타나는 회색 영역을 어떻게 제거할 수 있습니까?

미리 보기에 회색 영역이 표시될 때마다 페이지 외부에 숨겨진 개체나 외부 개체가 있는지 확인하십시오. 모든 개체를 선택하려면 [보기] > [프레임 가장자리 표시]를 클릭하십시오. 축소하여 모든 개체의 배치를 확인할 수도 있습니다. 숨겨진 개체나 외부 개체가 있는지 확인하고 개체를 레이아웃 내에 배치하여 이 문제를 해결하십시오.

모든 위젯을 유동 또는 반응형으로 만들 수 있는 방법은 무엇입니까?

현재 Adobe Muse의 일부 위젯은 반응형 위젯이 아닙니다. 각 위젯의 반응형 동작을 확인하려면 이 표를 참조하십시오.

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

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