아임웹은 PC 디자인을 하면, 자동 리사이징되어 모바일 디자인에도 반영되는 반응형 웹솔루션이에요!
이때 반영된 모바일 디자인이 마음에 들지 않거나, 모바일만의 디자인을 만들고 싶다면 ‘모바일 전용 섹션’을 통해 디자인해 볼 수 있어요.

모바일 전용 섹션을 구분하는 방법부터 모바일만의 디자인을 하는 방법까지 소개해 드릴게요!

1. 디자인 모드에 접속해서 모바일 뷰포트로 변경해 주세요.

2. ‘모바일 전용 섹션’인지 ‘PC 디자인이 자동으로 반영된 섹션’인지 확인해 주세요.
아래 이미지에 표시된 것처럼 모바일 아이콘이 보인다면 이 섹션은 ‘모바일 전용 섹션’이에요.

모바일 전용 섹션은 모바일에서만 확인할 수 있는 디자인이에요!

아래 이미지 표시처럼 눈 모양 아이콘이 보인다면, 이 섹션은 ‘PC 디자인이 자동으로 반영된 부분’이에요.
모바일에서는 보여주고 싶지 않다면 눈 모양 아이콘을 클릭해서 숨겨볼 수 있어요.
다시 모바일에 보여주고 싶다면 우측 물방울 모양을 클릭해서 숨김 처리한 디자인을 복원해 주세요!

TIP! 모바일 디자인을 미리 보는 방법

PC에서 모바일 디자인 화면을 확인할 수 있는 방법 2가지를 소개해 드릴게요!
이 방법은 화면을 모바일 크기에 맞춰서 ‘디자인’을 확인하는 방법이에요. 모바일 기능을 모두 확인하기는 어려운 점 참고해 주세요.

방법1: 화면 가로 폭을 좁혀서 확인하기

아래 이미지와 같이 PC 브라우저 크기를 줄여서 모바일 디자인 화면을 확인할 수 있어요.

방법2: 개발자 도구를 통해 확인하기 (Chrome 브라우저 기준)

1. [Chrome(크롬) 브라우저 우측 상단 ‘더보기’버튼 클릭 > 도구 더보기 > 개발자 도구]를 클릭, 또는 키보드 F12 버튼을 눌러 개발자 도구에 접속해 주세요.2

2. 개발자 도구 왼쪽 상단의 기기(장치) 아이콘을 클릭해 주세요.

3. 브라우저 상단 Dimensions(크기) 버튼을 클릭한 후 모바일 기종을 선택해서 모바일 디자인 화면을 확인해 주세요.
또는 Responsive(반응형)를 선택한 후 직접 사이즈를 지정해서 확인하는 방법도 있어요!

👉 모바일 디자인은 처음이에요 동영상 가이드