모바일 우선 디자인 — 70%의 트래픽을 위한 설계

한국 비즈니스 사이트의 **모바일 트래픽 비율은 평균 65~80%**입니다. 그런데 많은 사이트가 여전히 데스크탑 먼저 디자인 → 모바일을 축소. 결과는 모바일에서 깨지거나 답답한 사이트. Mobile-first는 발상의 전환입니다.

Mobile-first란?

모바일 화면에서 먼저 디자인 → 데스크탑으로 확장.

옛 방식:

데스크탑 시안 → 모바일에 압축 → 흔히 깨짐

Mobile-first:

모바일 시안 → 데스크탑에서 확장 → 모바일·데스크탑 모두 자연스러움

왜 Mobile-first인가

1. 트래픽 비율

• 한국 평균: 모바일 70%, PC 30%
• 20·30대 타겟: 모바일 85%+
• 시니어·B2B: PC 비중 ↑

→ 다수 사용자를 위한 설계.

2. 구글 모바일 우선 색인

Core Web Vitals + 모바일 참고.

검색엔진이 모바일 화면을 SEO 기준.

3. 제약이 명확성을 만듦

작은 화면 = 핵심만 가능. 사이트 전체가 더 명확해짐.

모바일 디자인 — 핵심 원칙 7가지

1. 한 화면·한 메시지

각 섹션이 모바일에서 한 화면을 거의 채움. 너무 많은 정보 ↓.

[H1 헤드라인 - 큰 글자]
[부가 카피 - 한 줄]
[CTA 버튼 - 큼직]

이 3요소가 모바일 한 화면.

2. 세로 흐름

데스크탑의 좌우 칼럼 ❌. 모바일에선 위→아래 단일 흐름.

데스크탑          모바일
┌─┬─┐            ┌─┐
│A│B│            │A│
└─┴─┘            └─┘
                 ┌─┐
                 │B│
                 └─┘

3. 터치 타깃 — 최소 44px

손가락 평균 너비 ~9mm = 약 44px (Apple HIG·Google Material 권장).

• 버튼: 최소 44×44px
• 링크: 충분한 패딩
• 사이 간격 8~16px

.btn {
  min-height: 44px;
  padding: 12px 24px;
}

4. 폰트 크기 — 16px 이상

iOS는 16px 미만 인풋에 자동 줌. UX 망침.

body {
  font-size: 16px;
}

본문 작아도 16px. 모바일에서 너무 작으면 안 읽음.

5. 손가락 영역 (Thumb Zone)

오른손 엄지 기준:

┌───────────────┐
│   [⚠️ 어려움]   │
├───────────────┤
│   [중간]       │
├───────────────┤
│   [✅ 쉬움]    │ ← CTA·메뉴 여기
└───────────────┘

핵심 액션은 화면 하단·우측.

6. 빠른 로딩

모바일 = 느린 네트워크 가정:

• 이미지 압축·WebP
• Lazy loading
• 핵심 콘텐츠 빠르게

속도 최적화 참고.

7. 가로 스크롤 절대 금지

화면 폭을 넘는 요소 = 사용자 혼란.

body {
  overflow-x: hidden;
}

또는 모든 요소 max-width: 100%.

CSS — Mobile-first 작성법

미디어 쿼리 방향

/* 모바일 기본 */
.container {
  padding: 16px;
}

/* 태블릿 이상 */
@media (min-width: 768px) {
  .container {
    padding: 24px;
  }
}

/* 데스크탑 이상 */
@media (min-width: 1024px) {
  .container {
    padding: 32px;
  }
}

min-width 사용 (모바일에서 데스크탑으로 확장).

흔한 브레이크포인트

엄격한 정답은 없음. 사이트 콘텐츠에 맞춰 조정.

흔한 컴포넌트 — 모바일 패턴

헤더

• 로고 + 햄버거(≡) 메뉴 + (필요 시) CTA 1개
• 메뉴 펼침은 풀스크린 또는 드로어

Hero

• 큰 헤딩 (28~32px)
• 짧은 서브카피 (한 줄)
• CTA 1개 (큼직)
• 비주얼 이미지 (선택)

카드·아이템

• 데스크탑 3컬럼 → 모바일 1컬럼
• 또는 2컬럼이면 작아도 정사각

폼

• 전체 폭 인풋
• 충분한 패딩 (44px+)
• 라벨 위·인풋 아래 (좌우 ❌)
• 키보드 자동 — 이메일·전화 인풋은 type="email"·type="tel"

푸터

• 카테고리별 접힘·펼침 (Accordion)
• 또는 단순 리스트

데스크탑 확장 시 주의

1. 좌우 공간 채우기

모바일은 폭 충분. 데스크탑은 1920px 화면에서 어색하지 않게:

• 본문 폭 720~960px 제한
• 좌우 여백 자동
• 또는 좌우 멀티 컬럼 활용

2. 마우스 호버 효과

모바일엔 hover 없음. 데스크탑만 호버 효과:

• 버튼 색 변화
• 카드 살짝 떠오름

다만 호버 의존 X — 클릭·터치로도 작동.

3. 정보 밀도

데스크탑은 한 화면에 더 많이. 모바일은 핵심만:

• 사이드바·관련 글 (데스크탑)
• 메인 콘텐츠만 (모바일)

모바일 우선 — 콘텐츠 우선순위

작은 화면 = 무엇이 가장 중요한지 강제로 결정.

우선순위 4단계

1순위: 핵심 가치 제안 (Hero)
2순위: 핵심 CTA (예약·문의·구매)
3순위: 신뢰 신호 (후기·인증·실적)
4순위: 부가 정보

데스크탑은 14 다 보임. 모바일은 12가 우선. 3·4는 스크롤.

테스트 — 실제 기기에서

브라우저 시뮬레이션만으론 부족.

• 본인 휴대폰
• 다른 사람 휴대폰 (다른 OS·기기)
• 작은 화면 (구형 4.7인치)
• 큰 화면 (6.7인치 이상)

적어도 5명에게 시켜보기.

점검 항목

• 모든 페이지 가로 스크롤 없음
• 모든 CTA 손가락으로 누르기 편함
• 폰트 16px 이상
• 이미지 빠르게 로드
• 메뉴 펼침이 자연스러움
• 폼 입력이 부담 없음
• 전화·이메일 링크 작동

자주 받는 질문

Q. 데스크탑 디자인 어떡하나요?

Mobile-first ≠ 모바일만. 모바일 끝낸 후 데스크탑은 추가 작업. 양쪽 다 좋게가 목표.

Q. 모바일·태블릿·데스크탑 시안 다 그려야?

추천. 처음엔 모바일·데스크탑 2개만. 태블릿은 데스크탑에서 자동 조정 가능한 경우 다수.

Q. 클라이언트는 PC에서만 봐요.

클라이언트는 PC 보지만 방문자는 모바일. 모바일을 우선시켜야 사이트 효과.

Q. 화면이 너무 좁아 디자인이 답답해요.

좋은 신호. 모바일의 작은 화면이 꼭 필요한 정보만 살리도록 강제.

Q. 옛 사이트를 Mobile-first로 바꿔야?

리뉴얼 시 적용 권장. 일부만 모바일 최적화는 결국 흠.

⚠️ 자주 하는 실수

• 데스크탑 시안만 그리고 모바일은 자동 변환 기대: 무조건 깨짐
• 터치 타깃 너무 작음: 손가락이 안 닿거나 옆 버튼 누름
• 모바일에서 폰트 12px: 안 읽힘
• 가로 스크롤 발생: UX 망함
• 시뮬레이션만 테스트: 실제 기기 필수

❓ FAQ

Q. iOS·Android에서 다르게 보여요. A. 일부 CSS 동작 차이. 가장 흔한 원인은 vh·viewport 설정. 둘 다 테스트 필수.

Q. 모바일에서 비주얼섹션이 잘려요. A. 이미지 비율 문제. 모바일 전용 이미지 사용 또는 object-fit: cover로 잘림 방향 제어.

Q. 햄버거 메뉴 vs 하단 탭 어느 게 좋나요? A. 콘텐츠 많은 사이트는 햄버거. 앱 같은 핵심 4~5탭 사이트는 하단 탭. 비즈니스 사이트는 햄버거.

Q. 모바일에서만 보여줄 콘텐츠가 있어요. A. CSS display: none 또는 자식 테마 조건부 로직 (is_mobile()).

Q. 사용자가 90%가 모바일이면 PC 디자인은 신경 안 써도? A. 신경 써야 함. PC 사용자가 의사결정자·구매자인 경우 多.

관련 가이드

• 디자인 시스템·토큰
• Core Web Vitals + 모바일
• 웹 접근성 기초
• 모바일 편집 (아임웹)