모바일 버전 위젯 배치하기
아임웹 디자인 모드는 PC버전을 제작하는 중 자동으로 모바일 버전도 구성됩니다. 이 과정에서 여러 연관된 위젯들을 적절하게 콘텐츠 단위로 묶어 배치하지 않는 경우, 모바일에서 알맞지 않은 모양 및 순서로 표시될 수 있습니다.
다음 그림은 디자인 모드에서 이미지 위젯과 텍스트 위젯을 사용해 제작한 페이지로 일견 문제가 없어 보입니다.
그러나 뷰포트를 모바일로 전환하면 다음처럼 순서에 맞지 않게 표시되는 걸 확인할 수 있습니다.
그 이유는 PC 뷰포트에서 위젯들을 다음 그림처럼 한 줄로 배치했기 때문입니다. 한 줄에 배치한 위젯들은 아임웹 그리드 시스템에 따라 모바일 화면의 부족한 너비에 자동으로 반응하여 한줄 씩 내려가게 됩니다.
이에 따라 사용자는 PC 뷰포트에서 위젯 배치 시 다음 그림처럼 연관된 위젯들을 하나로 묶어 배치해야 합니다.
참고: 연관 위젯들을 하나로 묶어 배치하는 방법은 아래 튜토리얼 7번 애니메이션을 참고해 주세요.
이처럼 묶어 배치한 위젯들은 모바일 뷰포트 전환 시 다음처럼 묶음 단위로 한줄 씩 본문폭에 맞춰 나열됩니다.
다음은 PC 뷰포트에서 배치한 위젯들을 모바일에서 정상적으로 표시되도록 배치하는 방법에 대해 튜토리얼 형식으로 설명합니다.
배치방법 예제 따라하기
세 개 칼럼으로 나눠진 위젯들이 모바일에서 적절하게 표시되려면 다음 그림처럼 기준이 되는 위젯의 위 또는 아래에 배치해야 합니다.
- 디자인 모드에 접속합니다. 접속방법
- 이미지 위젯 3개를 삽입합니다. 위젯 추가방법
- 이미지 위젯 하나를 마우스 클릭 후 드래그하여, 한 줄에 2개가 되도록 이동시킵니다. 위젯 이동방법
남은 이미지 위젯도 같은 방법으로 한 줄에 3개가 되도록 배치합니다. 그럼 다음 그림처럼 배치됩니다.
- 텍스트 위젯 3개를 추가합니다.
텍스트 위젯 하나를 마우스 클릭 후 드래그하여, 가장 왼쪽 아이콘 위젯 바로 아래로 이동시킵니다.
참고: 텍스트 위젯이 아이콘 위젯 바로 아래 위치하는 경우 다음 그림처럼 텍스트 위젯 너비만큼 검정색 선이 표시됩니다. 이 때 마우스를 놓아주세요.
같은 방법으로 남은 2개의 텍스트 위젯들도, 아이콘 위젯 바로 아래 하나씩 배치합니다. 다음 애니메이션을 참고해 배치해 보세요.
각 이미지 위젯의 설정을 열어 이미지를 추가합니다.
참고: 이미지 크기는 각 이미지 위젯 설정에서, 높이를 똑같은 크기로 입력하므로서 모든 이미지가 같은 크기로 표시되도록 설정할 수 있습니다.
- 각 텍스트 위젯을 마우스 더블-클릭하여, 글자를 입력합니다.
- 디자인 모드 상단 중앙의 모니터 아이콘을 클릭해, 뷰포트를 모바일로 전환합니다. 뷰포트 변경방법
- 이미지와 텍스트가 의도한 순서대로 나열되는지 확인합니다.