아임웹 모바일 디자인 — PC와 다르게 만드는 법

Q: 모바일 전용 디자인을 완전히 다르게 만들 수 있나요?

100% 다르게는 불가능하지만, 모바일 전용 섹션을 많이 활용하면 사실상 별도 페이지처럼 보이게 할 수 있어요.

Q: 모바일에서만 다른 폰트를 쓸 수 있나요?

공통 디자인 설정의 옵션에서 모바일 폰트 크기 조절은 가능. 다만 다른 폰트 적용은 코드 위젯 + CSS로 직접 해야 함: ``css @media (max-width: 768px) { body { font-family: 'NotoSansKR' !important; } } ``

Q: 모바일에서 가로 스크롤이 생겨요.

보통 가로폭 고정 위젯이나 큰 이미지 때문입니다. 위젯 가로폭을 %로 변경하거나 이미지를 모바일 전용으로 교체.

Q: PC 안 쓰고 모바일만 쓰는 방법?

공통 디자인 설정 → 옵션 → PC보기 버튼 OFF로 PC 사용자도 모바일 화면으로 강제 가능. 하지만 권장하지 않습니다(PC 사용자 경험 손상).

아임웹은 반응형이라 PC를 만들면 모바일이 자동 적용됩니다. 그런데 그대로 두면 모바일에서 답답하거나 너무 작게 보이는 경우가 많아요. 모바일 뷰포트 전환·위젯 숨김·모바일 전용 섹션 세 가지 도구로 모바일 경험을 최적화하세요.

시작하기 전에

PC 디자인 먼저 완성 권장. PC 디자인을 변경하면 모바일에 자동 반영되어 모바일 맞춤 설정이 초기화될 수 있어요.
디자인 모드 진입 필요.

모바일 뷰포트로 전환하기

디자인 모드 우상단 모니터 아이콘 클릭 → 모바일 아이콘 선택.

모바일 뷰포트 전환

화면이 모바일 크기로 바뀌고, 모바일 전용 편집 도구가 활성화됩니다.

모바일에서 할 수 있는 것

1. 위젯 숨기기

PC에선 보이는 위젯을 모바일에서만 숨길 수 있어요.

위젯 우클릭 → 모바일에서 숨김.
숨겨진 위젯은 회색·반투명으로 표시. 언제든 다시 보이게 가능.

💡 활용 예: PC에서는 큰 비주얼 배너 + 카피, 모바일에선 비주얼 빼고 카피만 (스크롤 부담 ↓).

2. 위젯 이동

드래그로 위치 변경. 단, 인접한 위젯끼리만 이동 가능. 멀리 옮기려면 단계별로.

3. 모바일 전용 섹션 추가

모바일에서만 보이는 새 섹션을 추가할 수 있어요.

섹션 사이 + 버튼 → 모바일 전용 섹션 선택.
모바일 아이콘이 표시된 섹션이 추가됨. PC에서는 보이지 않음.

💡 활용 예: 모바일에 “전화 걸기” 큰 버튼 섹션. PC에선 불필요하므로 모바일 전용.

4. 폰트·간격·여백 별도 설정

공통 디자인 설정 → 옵션 → 모바일 폰트 크기 따로 지정 가능.

위젯 단위로도 모바일에서만 패딩·마진을 다르게 설정할 수 있어요(위젯 설정에서).

모바일에서 할 수 없는 것

PC 디자인에서 자동 반영된 섹션은 모바일에서 수정 불가. PC 뷰포트로 돌아가 수정해야 합니다.
새 위젯 추가는 가능하지만 PC와 공유. 모바일에만 보이게 하려면 모바일 전용 섹션 안에 추가해야 함.

섹션 구분 아이콘

아이콘	의미
📱 모바일	모바일 전용 섹션 (PC에 안 보임)
👁 눈	PC 디자인이 자동 반영된 섹션. 모바일에서 숨김/복원만 가능

흔한 모바일 최적화 패턴 5가지

1. 비주얼섹션 카피 줄이기

PC에서 “최고의 진료를 제공하는 안산 본오동 이비인후과” → 모바일에선 “안산 본오동 이비인후과”로 위젯 텍스트 줄이기 (또는 PC 카피 숨기고 모바일 전용 텍스트 위젯).

2. 전화·예약 버튼 크게

모바일에서 가장 누르기 쉬운 영역은 화면 하단. 모바일 전용 섹션으로 큰 전화/예약 버튼 1개만 띄우세요.

3. 메뉴를 햄버거(드로어)로

PC: 가로 GNB → 모바일: 햄버거 메뉴 (자동). 모바일 전용 메뉴 위젯으로 세부 조정 가능.

4. 이미지 크기 축소

PC에서 1920px 와이드 이미지를 모바일에 그대로 두면 데이터 소모·로딩 속도에 영향. 모바일 전용 섹션에서 작은 이미지로 교체.

5. 멀티컬럼 → 싱글컬럼

PC의 3컬럼 그리드는 모바일에선 답답합니다. 모바일 뷰포트에서 위젯 순서를 위→아래로 재정렬.

모바일 미리보기 확인하는 법

방법 1: 아임웹 미리보기

디자인 모드 우상단 미리보기 아이콘 → 모바일 뷰포트에서 확인.

방법 2: 실제 휴대폰

게시 후 본인 휴대폰으로 사이트 접속. 가장 정확.

방법 3: Chrome 개발자 도구

PC 브라우저에서 사이트 접속.
F12 또는 우클릭 → 검사.
좌상단 기기 모드 아이콘 (휴대폰 모양) 클릭.
상단 드롭다운에서 기기 선택 (iPhone, Galaxy 등).

다양한 기기 사이즈를 한 화면에서 비교 가능.

⚠️ 자주 막히는 포인트

“모바일에서 위젯 수정이 안 돼요” → PC 디자인 자동 반영 섹션은 PC 뷰포트에서만 수정. 눈 아이콘 확인.
“모바일에서 위젯이 화면 밖으로 잘려요” → 가로폭 고정값(px)을 쓴 위젯. 가로폭을 %로 변경.
“PC 작업하면 모바일 설정이 초기화돼요” → PC 변경 후 모바일 맞춤 구성 경고 표시. 작업 순서: PC 먼저 → 모바일.
“모바일에서 폰트가 너무 작아요” → 공통 디자인 설정 → 옵션 → 모바일 폰트 크기를 110~115%로 키우기.
“모바일에서 메뉴가 안 펼쳐져요” → 햄버거 메뉴 위젯이 빠졌거나, 모바일 전용 메뉴 위젯 설정 미완.

❓ FAQ

Q. 모바일 전용 디자인을 완전히 다르게 만들 수 있나요? A. 100% 다르게는 불가능하지만, 모바일 전용 섹션을 많이 활용하면 사실상 별도 페이지처럼 보이게 할 수 있어요.

Q. 태블릿(아이패드) 디자인은 따로 설정하나요? A. 아임웹은 PC/모바일 2가지 뷰포트만 제공. 태블릿은 가로 모드에서 PC, 세로 모드에서 모바일로 자동 전환됩니다.

Q. 모바일에서만 다른 폰트를 쓸 수 있나요? A. 공통 디자인 설정의 옵션에서 모바일 폰트 크기 조절은 가능. 다만 다른 폰트 적용은 코드 위젯 + CSS로 직접 해야 함:

@media (max-width: 768px) {
  body { font-family: 'NotoSansKR' !important; }
}

Q. 모바일에서 가로 스크롤이 생겨요. A. 보통 가로폭 고정 위젯이나 큰 이미지 때문입니다. 위젯 가로폭을 %로 변경하거나 이미지를 모바일 전용으로 교체.

Q. PC 안 쓰고 모바일만 쓰는 방법? A. 공통 디자인 설정 → 옵션 → PC보기 버튼 OFF로 PC 사용자도 모바일 화면으로 강제 가능. 하지만 권장하지 않습니다(PC 사용자 경험 손상).