모바일 편집하기

반응형 웹사이트란, 다양한 장치의 디스플레이 크기에 대응하여 웹사이트 레이아웃, 콘텐츠 등이 최적의 형태로 제공되는 웹 기술을 말합니다. 과거에는 PC, 스마트폰, 태블릿 버전을 개별적으로 만들곤 했지만, 현재는 반응형 웹사이트 하나로 거의 모든 기기에서 대응하고 있습니다.

아임웹에는 이 반응형 웹 기술이 적용되었습니다. 사용자가 PC 버전을 만들면 자동으로 모바일 버전이 제작되며, 의도치 않게 자동 구성된 디자인은 사용자가 직접 변경하거나 추가하는 것도 가능합니다.

이 도움말에서는 모바일 버전 편집을 위한 뷰포트 변경 방법부터, 기본 편집 방법, 모바일 전용 섹션 활용 방법, 모바일 상단 디자인 방법에 관해 설명합니다.

모바일 편집 시작하기

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

뷰포트 변경하기

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

1. 위젯 & 섹션 숨기기

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

2. 위젯 이동하기

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

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

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

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

모바일 편집 시 참고사항

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

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

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

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

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

모바일 전용 섹션 활용하기

모바일 상단 편집하기

모바일은 세로 방향으로 볼 때 가로폭이 크게 좁아지는 만큼, PC 버전과 다르게 사이트 상단 영역을 간소화시키는 것이 좋습니다. 아래 도움말 링크를 참고해 모바일에 맞게 상단을 수정해 보세요.

모바일 상단 편집하기

목록으로