Adobe Muse에서 반응형 웹 사이트를 만드는 방법을 살펴봅니다.

이 튜토리얼에서는 제작 가능한 반응형 웹 사이트에 대해 알아봅니다. 웹 페이지의 구조를 확인하고 반응형 요소가 데스크탑, 태블릿 및 폰 브라우저의 화면 크기에 따라 어떻게 바뀌는지 살펴봅니다. 

반응형 웹 사이트를 따라 만들어 보려면 Responsive Web Design (Muse) 라이브러리를 엽니다. Creative Cloud에 저장을 클릭하여 계정에 라이브러리의 사본을 생성합니다. 이 시작 파일을 참조하려면 반응형 웹 디자인 시작 파일 링크를 열어 컴퓨터에 다운로드합니다.

참고: 라이브러리를 저장하려면 Creative Cloud 계정에 로그인해야 합니다. Adobe ID가 없는 경우 Adobe ID를 만듭니다.

반응형 디자인 검토(1:18), 프로젝트 파일에 액세스(2:48)

사이트 플랜 만들기

새 사이트를 만들고, 플랜 모드를 살펴보고, 사이트 플랜을 설정합니다. 사이트에 구성할 페이지를 연결하고 이름을 입력한 다음 페이지 제목을 추가합니다.  

웹용 및 인쇄용 레이아웃 비교(00:20), 최종 페이지 디자인 검토(2:10), 사이트 플랜에 페이지 추가(2:27)

마스터 페이지 설정

마스터 페이지를 만들어 웹 사이트의 모든 페이지에서 공통으로 사용할 요소를 디자인합니다. 웹 사이트 디자인 전체에서 사용할 단락 및 그래픽 스타일을 추가합니다. 

마스터 페이지 열기 및 모듈 검토(00:18), 마스터 페이지 요소 검토(00:55), 마스터 페이지 디자인(1:25), 작업 생산성을 높여주는 팁(2:24)

바닥글 만들기

반응형 속성을 사용하여 웹 사이트의 바닥글을 만들고 스타일을 지정합니다. 소셜 미디어 아이콘을 추가하고 사용자가 아이콘 위로 마우스를 가져가면 시각적 힌트를 제공하는 롤오버 상태를 정의합니다. 사이트에서 다른 웹 사이트를 열 수 있는 하이퍼링크를 바닥글 아이콘에 연결합니다. 메뉴 위젯을 사용하여 사이트의 내비게이션을 정의합니다. 마지막으로 또 다른 위젯을 사용하여 바닥글에 양식을 추가합니다.

바닥글 영역 정의(00:09), 바닥글 요소 추가(00:39), 롤오버 상태 정의(2:32), 하이퍼링크 추가(4:03), 바닥글에 내비게이션 메뉴 추가(5:30), 바닥글에 양식 추가(7:02)

머리글 만들기

반응형 속성을 사용하여 웹 사이트의 머리글을 만들고 스타일을 지정합니다. 사이트 로고와 버튼을 추가하고 정렬 기능을 사용하여 레이아웃을 조정합니다. 머리글에 사이트 내비게이션을 위한 메뉴를 추가하고 모양을 사용자 정의합니다.

머리글 영역 정의(00:12), 머리글 요소 추가(00:31), 페이지 메뉴 내비게이션 사용자 정의(1:42)

마스터 페이지에 반응형 요소 추가

핀으로 고정 및 기타 반응형 설정을 사용하여 다양한 디바이스의 브라우저 크기에 맞게 페이지 요소가 자동으로 조정되도록 합니다. 중단점을 디자인에 추가하여 브라우저 크기에 따라 레이아웃 간의 전환을 관리합니다. 반응형 툴을 사용하여 사이트가 다른 레이아웃에서 표시되는 모양을 미리 봅니다. 보기를 최적화하기 위해 중단점마다 페이지 요소를 조정합니다.

반응형 레이아웃을 위한 요소를 핀으로 고정(1:18), 브라우저에서 디자인 미리 보기(3:34), 중단점 추가(4:19), 다른 중단점에서 요소 위치 변경(7:27)

반응형 메뉴 추가

데스크탑, 태블릿 및 폰의 브라우저에 맞게 자동으로 조정되는 메뉴를 디자인하고 레이아웃을 지정합니다. 큰 데스크탑 디스플레이에서부터 작은 폰 디스플레이에 이르기까지 메뉴 레이아웃이 바뀔 때 항목도 이에 따라 조정되도록 머리글 및 바닥글의 요소를 구조화하는 방법을 살펴봅니다.

터치 지원 메뉴 추가(00:52), 레이어를 만들어 페이지 요소 구조화(3:32), 태블릿 및 폰 레이아웃에서만 반응형 메뉴 표시(5:29)

모바일 디스플레이를 위한 레이아웃 만들기

폰 레이아웃의 중단점을 추가합니다. 데스크탑 또는 태블릿 디스플레이보다 좁은 보기 영역을 제공하는 휴대폰 브라우저에서 보기를 최적화하기 위해 수직 레이아웃에 맞게 페이지 요소를 재정렬합니다.

작은 레이아웃을 위한 바닥글 콘텐츠 최적화(1:02), 중단점 추가(3:00)

홈 페이지 만들기

사이트의 홈 페이지 디자인을 완성합니다. 다양한 브라우저에서 콘텐츠의 크기와 비율이 올바로 조정되도록 텍스트와 이미지를 조정하여 레이아웃을 수정합니다. 사용자가 페이지의 다른 부분으로 이동할 때 사용자의 경험을 향상시킬 수 있도록 추가 롤오버 상태를 정의합니다.

개별 머리글 및 바닥글 중단점 정의(00:52), 반응형 홈 페이지 요소 추가 및 검토(2:14), 롤오버 상태 및 크기 조정 설정 검토(7:19)

웹 사이트 완성 및 게시

웹 사이트 디자인을 완성한 다음 마스터 페이지의 중단점과 다른 중단점을 개별 페이지에 추가하는 사례를 검토합니다. 다양한 레이아웃에서 보기를 최적화하기 위해 콘텐츠를 숨기고 표시하는 방법, 작은 화면에서 손쉽게 읽을 수 있도록 텍스트 크기를 조정하는 방법 또는 중단점에 서식 및 레이아웃을 복사하는 방법과 같이 추가적인 반응형 디자인 기법을 살펴봅니다.

마지막으로 검토를 위해 사이트를 공유하거나 라이브로 게시하는 옵션을 살펴봅니다.

중단점 검토(1:00), 반응형 레이아웃을 위한 이미지 조정(2:36 ), 중단점에서 텍스트 서식 지정(4:26), 게시 옵션(6:42)
05/17/2019
The Royal Studio
이 페이지가 도움이 되었습니까?