모바일 편집을 시작하려면 가장 먼저 뷰포트를 모바일로 변경해야 합니다. 디자인 모드의 상단 중앙에 위치한 모니터 아이콘을 클릭해 뷰포트를 변경할 수 있습니다.

뷰포트 변경하기

모바일은 PC와 다르게 화면이 작아 지나치게 많은 정보는 방문자에게 부담을 줄 수 있습니다. 이에 따라 사용자는 모바일 디자인에서는 불필요하다고 생각되는 위젯이나 섹션을 숨기고, 일부 제한된 영역에서 화면에 맞게 위젯을 재배치할 수 있습니다.

1. 위젯 & 섹션 숨기기

모바일에서는 불필요한 위젯이나 섹션을 숨길 수 있습니다. 숨긴 위젯과 섹션은 언제든 복원 가능합니다.

• 모바일 버전에서 PC 위젯 숨김 처리하기
• 모바일 버전에서 PC 섹션 숨김 처리하기

2. 위젯 이동하기

자동 구성된 모바일 버전의 위젯 위치가 마음에 들지 않다면 마우스로 드래그하여 이동시킬 수 있습니다. 위젯은 인접한 요소끼리만 이동할 수 있으며 모든 위치로 이동시킬 순 없습니다.

모바일 버전은 아임웹 그리드 시스템에 의해 PC 버전 데이터를 기반으로 자동 구성되며, 한 줄에 1개 또는 2개의 위젯으로 표현됩니다. 예를 들어, 위 그림과 같이 PC 버전에서 3개의 이미지를 가로로 나열했다면 모바일에서는 세로로 나열됩니다.

만약 PC 버전과 같이 모바일에서도 한 줄에 3개씩 나열하고 싶은 경우, 위젯을 마우스로 드래그하여 배치할 수 있지만 위 그림의 오른쪽 그림과 같이 일정 영역 바깥으로는 이동시킬 수 없습니다.

만약 인접한 요소들을 벗어나 위젯을 새롭게 배치하고, 다른 레이아웃으로 모바일 디자인을 변경하려면 다음 3단계에서 소개하는 모바일 전용 섹션을 활용해 보시길 바랍니다.

모바일 편집 시 참고사항

모바일 편집은 되도록 PC 구성을 완료한 후 진행하실 것을 권장합니다. 만약 PC 버전 제작 중 모바일 버전을 편집하면 아래 그림과 같은 모바일 맞춤 구성 초기화 경고가 나타날 수 있습니다.

만약 경고를 무시하고 확인을 클릭하는 경우, 작업하신 모바일 디자인이 초기화될 수 있으므로 주의해 주세요.

PC에서는 표시되지 않으면서, 모바일에서만 보이는 모바일 전용 섹션을 추가할 수 있습니다. 이 모바일 전용 섹션에는 직접 위젯을 추가할 수 있으며, 위젯 이동 또한 비교적 자유롭고, 설정도 변경할 수 있습니다.

PC 버전과는 전혀 다른 레이아웃이나 콘텐츠를 추가하거나, 기능을 구현할 때 이용할 수 있습니다. 예를 들어, PC 버전에서는 상담신청 버튼을 클릭하면 게시판으로 이동하지만, 모바일 전용 섹션에서는 전화걸기가 작동되도록 설정할 수 있습니다.

모바일 전용 섹션의 경우 PC 버전을 편집하더라도 모바일 맞춤 구성이 초기화되지 않습니다.

모바일 전용 섹션 활용하기