이 문서를 읽어보고 Adobe Muse에서 반응형 디자인을 시작해 보십시오. 모든 장치에서 반응형 사이트를 만드는 방법을 배워봅니다.

참고:

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

반응형 사이트를 만들 때 특정 장치, OS 또는 제품 브랜드 기반의 중단점을 추가하는 것은 효율적인 방법이 아닐 수 있습니다. 이러한 요소 기반의 중단점을 정의하는 작업은 상당한 유지보수를 요구할 수 있습니다. 대신에 레이아웃과 웹 사이트 콘텐트는 중단점을 추가하는 방법과 위치를 정의하는 데 유용합니다.

추천 디자인 접근법을 읽어보고 Adobe Muse를 사용해 반응형 사이트를 만들어 보십시오.

1

사이트를 만듭니다. [새 사이트] 대화 상자에서 [유동 폭]을 선택합니다.

공백이나 기타 디자인 문제가 발생하지 않도록 페이지 크기를 설정합니다. [고급 설정]을 클릭하여 최소, 최대 페이지 폭을 설정한 후 사이트의 최소 높이를 설정합니다.


[새 사이트] 대화 상자에서 [유동 폭]을 선택합니다.
[새 사이트] 대화 상자에서 [유동 폭]을 선택합니다.

 

 

 

2

마스터 페이지 또는 개별 페이지를 엽니다. 기본 중단점이 960픽셀로 설정되어 있는지 확인합니다.


기본 중단점이 960픽셀로 설정되어 있는지 확인합니다.
기본 중단점이 960픽셀로 설정되어 있는지 확인합니다.

 

 

 

3

이 중단점에서 텍스트, 이미지, 슬라이드 쇼, 위젯과 같은 페이지 요소를 배치합니다.


웹 페이지 레이아웃을 지정합니다.
웹 페이지 레이아웃을 지정합니다.

 

 

 

4

스크러버를 사용하여 여러 브라우저 폭을 시뮬레이션합니다. 브라우저 폭별로 사이트가 어떻게 표시되는지 확인합니다.


스크러버를 사용하여 다른 브라우저 폭에서 웹 사이트가 어떻게 표시되는지 확인합니다.
스크러버를 사용하여 다른 브라우저 폭에서 웹 사이트가 어떻게 표시되는지 확인합니다.

 

 

 

5

디자인이 깨지는 부분에 중단점을 추가합니다. 예를 들어 이전 이미지를 보면 스크러버를 드래그하면 텍스트 상자가 폭에서 벗어나는 것을 확인할 수 있습니다. 디자인이 깨지는 폭에 중단점을 추가합니다.


디자인이 깨지는 곳마다 중단점을 추가합니다.
디자인이 깨지는 곳마다 중단점을 추가합니다.

 

 

 

6

사이트 레이아웃이 올바르게 배치될 수 있도록 새 중단점의 레이아웃을 조정합니다.


중단점의 레이아웃을 조정합니다.
중단점의 레이아웃을 조정합니다.

 

 

 

7

최소 폭까지 사이트 미리 보기를 수행합니다. 필요에 따라 중단점을 추가하고 레이아웃을 조정합니다.


이렇게 디자인하면 사이트가 어떤 브라우저 폭에서든, 어떤 장치에서든 올바르게 표시됩니다. 즉, 디자인이 특정 장치 크기나 화면 크기에 구속되지 않게 됩니다.

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

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