모바일만의 디자인하기 (모바일 전용 섹션, 모바일 미리보기)

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

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



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


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

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

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

[참고]  디자인이 반영된 섹션은 모바일에서 수정할 수 없어요. PC 디자인 뷰포트로 변경해서 수정해 주세요.



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

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

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

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

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

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

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

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



👉 썸머 매니저의 '모바일 디자인은 처음이에요' 영상 확인하기




목록으로

시작이 어려우신가요?

교육 받아보시면 쉽습니다.

온라인 교육 바로가기

한 번 이용하면 팬이 됩니다.

아임웹에서 당신의 생각을 표현해보세요.
978.2K
누적 사이트 이용 수
이미 수만 명이 아임웹 팬이 되어
각자의 생각을 표현하고 있습니다.
315
일 평균 사이트 개설 수
지금 이 순간에도 매일
새로운 브랜드가 소개되고 있습니다.
2.2K
전국 파트너/리셀러 수

아임웹과 함께하는 제휴사

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