[디자인 팁!]모바일 디자인이 이상하게 나타납니다. (모바일 버전 위젯 배치 방법)

디자인 모드는 PC버전을 제작하는 중 자동으로 모바일 버전도 구성됩니다. 이 과정에서 여러 연관된 위젯들을 적절하게 콘텐츠 단위로 묶어 배치하지 않는 경우, 모바일에서 알맞지 않은 모양 및 순서로 표시될 수 있습니다.

다음 그림은 디자인 모드에서 이미지 위젯과 텍스트 위젯을 사용해 제작한 페이지로 일견 문제가 없어 보입니다.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/4742ba28-643f-4f8d-81f2-ba387a8e2cda/00.png

그러나 뷰포트를 모바일로 전환하면 다음처럼 순서에 맞지 않게 표시되는 걸 확인할 수 있습니다.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/4574f04b-7c06-4423-a871-a9eea8aee6fb/01.png

그 이유는 PC 뷰포트에서 위젯들을 다음 그림처럼 한 줄로 배치했기 때문입니다. 한 줄에 배치한 위젯들은 그리드 시스템에 따라 모바일 화면의 부족한 너비에 자동으로 반응하여 한줄 씩 내려가게 됩니다.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/078d3c2a-cf9e-4bf5-abce-b7f5a1800069/02.png

이에 따라 사용자는 PC 뷰포트에서 위젯 배치 시 다음 그림처럼 연관된 위젯들을 하나로 묶어 배치해야 합니다.
참고: 연관 위젯들을 하나로 묶어 배치하는 방법은 아래 튜토리얼 7번 애니메이션을 참조해주세요.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/f290f00e-dbec-4e60-9afa-4ece7c082b8f/03.png

이처럼 묶어 배치한 위젯들은 모바일 뷰포트 전환 시 다음처럼 묶음 단위로 한줄 씩 본문폭에 맞춰 나열됩니다.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/fbd0ad5b-cfcb-4559-b733-cf52d775fdb2/04.png

다음은 PC 뷰포트에서 배치한 위젯들을 모바일에서 정상적으로 표시되도록 배치하는 방법에 대해 튜토리얼 형식으로 설명합니다.


배치방법 예제 따라하기

세 개 칼럼으로 나눠진 위젯들이 모바일에서 적절하게 표시되려면 다음 그림처럼 기준이 되는 위젯의 위 또는 아래에 배치해야 합니다.

  1. 디자인 모드에 접속합니다. 
  2. 이미지 위젯 3개를 삽입합니다. 
  3. 이미지 위젯 하나를 마우스 클릭 후 드래그하여, 한 줄에 2개가 되도록 이동시킵니다. 
  4. 남은 이미지 위젯도 같은 방법으로 한 줄에 3개가 되도록 배치합니다. 그럼 다음 그림처럼 배치됩니다.

  5. 텍스트 위젯 3개를 추가합니다.
  6. 텍스트 위젯 하나를 마우스 클릭 후 드래그하여, 가장 왼쪽 아이콘 위젯 바로 아래로 이동시킵니다.
    참고: 텍스트 위젯이 아이콘 위젯 바로 아래 위치하는 경우 다음 그림처럼 텍스트 위젯 너비만큼 검정색 선이 표시됩니다. 이 때 마우스를 놓아주세요.

  7. 같은 방법으로 남은 2개의 텍스트 위젯들도, 아이콘 위젯 바로 아래 하나씩 배치합니다. 다음 애니메이션을 참조해 배치해보세요.

  8. 각 이미지 위젯의 설정을 열어 이미지를 추가합니다.
    참고: 이미지 크기는 각 이미지 위젯 설정에서, 높이를 똑같은 크기로 입력하므로서 모든 이미지가 같은 크기로 표시되도록 설정할 수 있습니다.

  9. 각 텍스트 위젯을 마우스 더블-클릭하여, 글자를 입력합니다.
  10. 디자인 모드 상단 중앙의 모니터 아이콘을 클릭해, 뷰포트를 모바일로 전환합니다. 
  11. 이미지와 텍스트가 의도한 순서대로 나열되는지 확인합니다.
감성적인 느낌이 있는 디앤퍼슨스의 디자인
웹사이트, 쇼핑몰 디자인 맞춤제작 그리고 템플릿
COPYRIGHT © 2007-2024. DNPERSONs ALL RIGHTS RESERVED.