PC 버전은 괜찮은데, 모바일에서 이상하게 나와요!

  아임웹 연구소 소장 해준  |  2017 . 09 . 11

시작에 앞서
아임웹은 PC 버전을 만들면, 모바일 버전도 자동으로 만들어줍니다. 이는 무척 편리한 기능입니다. 그러나 디자인 스타일에 따라서는, PC 버전에서 만든 디자인이 모바일에서는 안 좋게 보일 수 있습니다.


하지만 걱정하실 필요는 없습니다. 아임웹은 [모바일 전용 섹션]이라는 강력한 모바일 편집 기능을 제공하기 때문입니다.

이제부터 [모바일 뷰포트]에서 [모바일 전용 섹션]을 사용해, PC에서는 괜찮아 보이는데, 모바일에서는 이상해 보이는 디자인을 편집하는 몇 가지 팁에 대해 알려드리겠습니다.



1) 모바일 디자인모드 변경하는 방법
디자인 모드 좌측 툴바 중앙에 [모니터] 아이콘을 클릭해, PC 또는 모바일 디자인 모드로 변경할 수 있습니다.


*정식 명칭은 [PC 또는 모바일 뷰포트]지만, 저는 평소 회원분들의 이해를 돕기 위해 [PC 디자인모드], [모바일 디자인모드]라고 부르곤 합니다.



2) 모바일 전용 섹션을 사용하기
모바일 디자인모드(뷰포트)로 변경하면, 모바일 버전을 편집할 수 있습니다. 그러나 한 가지 주의할 점이 있습니다.

사용자가 [PC 디자인모드]에서 디자인한 섹션은, [모바일 디자인모드]에서 편집이 제한적이라는 점입니다. 모바일 디자인을 100% 편집하려면, [모바일 전용 섹션]을 사용해야 합니다.


[모바일 전용 섹션]이란, 문자 그대로 모바일에서만 보이는 섹션을 말합니다.

모바일 전용 섹션에 추가한 각종 텍스트, 이미지 등의 요소들은 PC에서는 보이지 않으며, 오직 모바일 기기에서만 나타납니다.


모바일 전용 섹션에는 우리가 PC 디자인모드에서 페이지를 디자인했던 것처럼, 위젯을 추가하고, 꾸미는 것이 가능합니다.

다시 한 번 말씀드리지만, 모바일 전용 섹션에 디자인한 모든 디자인적 요소들은 PC에는 반영되지 않으며, 오직 모바일 기기에서만 나타납니다. :)




3) 이미지 맵 사용하기
위에서 말씀드린 것처럼 [모바일 전용 섹션]을 사용하면 상대적으로 대단히 자유롭게 모바일 전용 디자인 편집이 가능해집니다. 그러나 어떻게 해도 원하는 디자인이 어려운 경우, 이미지 맵 위젯이 대안이 될 수 있습니다.


이미지 맵 위젯을 사용하면 이미지 내 특정 영역을 링크로 만들 수 있습니다. 이미지 링크를 마우스 클릭(또는 손가락으로 터치)하면 방문자를 관련 페이지로 이동시키는 것이 가능해집니다.





4) PC 디자인 모드에서 제작한 섹션 숨기기
모바일에서 전용 섹션을 추가하면, 하단에는 PC에서 제작한 같은 내용이 함께 나오게 됩니다.

그럴 땐 어떻게 해야 할까요?
아임웹 모바일 디자인모드에서는, PC 디자인모드에서 제작한 섹션을 모바일에서는 나오지 않도록 설정할 수 있습니다.


그 방법은 간단합니다. 먼저 모바일 뷰포트로 이동합니다.

그 후 PC 버전에서 제작한 섹션의 눈동자 아이콘을 클릭하시면, 해당 섹션이 [숨김] 처리되어, 모바일 기기에서는 안 보이게 됩니다.


해준
배우고 익히고 나누는 | 해준씨 | 유용한 콘텐츠 마케팅 | 네이버 카페 '아임웹 연구소' 소장
jin@haejoon.com

아임웹 공식제휴사

아임웹은 페이팔, KG이니시스, 네이버페이, KCP 공식파트너입니다.