모바일 우선 디자인의 의미와 반응형 디자인과의 차이를 알아보고 콘텐츠 순서, CSS min-width 중단점, 이미지와 테스트를 통해 사이트를 설계하고 제작하세요. 여러 지점을 둔 사업자를 위한 안내도 담았습니다.
반응형 디자인은 어떤 화면 크기에서도 레이아웃이 바뀌는 하나의 사이트를 뜻합니다. 모바일 우선은 디자인과 코딩의 순서로, 작은 화면부터 시작해 큰 화면에 맞게 확장합니다. 모바일 우선 사이트는 반응형이지만, 데스크톱부터 제작한 반응형 사이트는 모바일 버전이 비좁고 나중에 덧붙인 것처럼 보이기 쉽습니다.
Google은 모바일 우선 색인을 사용합니다. 페이지의 색인과 순위를 매길 때 주로 모바일 버전을 사용한다는 뜻입니다. 모바일에서 콘텐츠, 제목, 구조화 데이터, 링크가 빠지면 Google이 이를 확인하지 못할 수 있습니다.
콘텐츠에 맞춰 정하세요. 브라우저를 넓히다가 레이아웃이 늘어져 보이는 지점에 중단점을 추가합니다. 640px, 768px, 1024px, 1280px 부근이 흔한 시작점이며 많은 CSS 프레임워크가 min-width 미디어 쿼리로 사용합니다.
WCAG 2.2는 최소 터치 대상 크기를 24×24 CSS 픽셀(AA)로 정하고 44×44(AAA)를 권장합니다. Apple 지침은 44포인트, Google Material 지침은 48dp를 사용합니다. 주요 버튼과 메뉴 링크는 약 44~48픽셀을 목표로 하세요.
공통 템플릿을 사용해 지점별 페이지를 만들고 각 페이지 상단에 눌러 전화하기, 눌러 길 찾기, 영업시간, 해당 매장 예약 또는 주문 기능을 둡니다. '내 주변' 검색으로 들어온 모바일 방문자는 바로 행동하려 하므로 지점 찾기와 주요 행동을 한 손으로 사용할 수 있어야 합니다.
간단히 말해: 모바일 우선 웹 디자인은 페이지의 휴대전화 버전을 먼저 설계하고 제작한 뒤, 화면이 넓어질수록 태블릿과 데스크톱 레이아웃을 추가하는 방식입니다. 코드에서는 기본 CSS가 모바일 레이아웃이고 min-width 미디어 쿼리로 확장합니다. 페이지마다 가장 중요한 요소를 먼저 정하게 하며 오늘날 Google의 색인 방식에도 맞습니다.
두 용어를 같은 뜻으로 쓰곤 하지만 서로 다른 질문에 답합니다.
| 구분 | 반응형 디자인 | 모바일 우선 디자인 |
|---|---|---|
| 의미 | 화면 크기에 맞춰 레이아웃을 조정하는 하나의 사이트 | 작은 화면에서 시작해 확장하는 제작 과정 |
| CSS 방식 | max-width(데스크톱을 축소) 또는 min-width 가능 | min-width(모바일에서 확장) |
| 콘텐츠 우선순위 | 데스크톱에서 정한 뒤 압축하는 경우가 많음 | 가장 작은 화면을 기준으로 결정 |
| 흔한 문제 | 숨겨진 콘텐츠, 작은 터치 영역, 휴대전화에서 무거운 페이지 | 확장하지 않으면 데스크톱 레이아웃이 허전함 |
가장 좋은 방법은 둘을 함께 쓰는 것입니다. 모바일 우선 방식으로 제작한 반응형 사이트를 만드세요.
좁은 화면에서는 모든 콘텐츠가 한 열로 배열되므로 순서가 레이아웃 전체를 좌우합니다. 각 페이지에서 모바일 방문자에게 필요한 섹션을 순서대로 적으세요.
지역 서비스 홈페이지라면 다음과 같을 수 있습니다.
이 목록에 들어갈 이유가 없는 내용은 데스크톱에도 없어도 될 가능성이 큽니다.
모든 페이지의 head에 viewport 태그를 추가하세요.
``html <meta name="viewport" content="width=device-width, initial-scale=1"> ``
미디어 쿼리 없이 모바일 기본 스타일을 작성한 다음 공간이 생기면 min-width 쿼리를 추가합니다.
```css .services { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .services { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .services { grid-template-columns: repeat(3, 1fr); } .site-nav { display: flex; } /* 전체 메뉴 표시, 메뉴 버튼 숨김 */ } ```
다음 기법을 사용하면 더 쉽게 작업할 수 있습니다.
clamp()를 사용하는 등 유동형 글자와 간격을 적용하면 중단점 수를 줄일 수 있습니다. 예: font-size: clamp(1.75rem, 5vw, 3rem).grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr))는 공간이 충분할 때만 열을 추가합니다.md: 같은 접두사는 해당 너비부터 적용됩니다.특정 휴대전화 모델이 아니라 콘텐츠 레이아웃이 깨지는 지점에 중단점을 두세요.
휴대전화는 디자인에 쓰는 노트북보다 처리 속도가 느리고 네트워크가 불안정합니다. Google Core Web Vitals는 이를 측정합니다. Largest Contentful Paint(로딩), Interaction to Next Paint(응답성), Cumulative Layout Shift(시각적 안정성)가 포함됩니다.
srcset과 sizes를 사용해 휴대전화가 작은 파일을 받게 하고 WebP나 AVIF 같은 최신 형식을 사용하세요.loading="lazy"로 지연 로딩하되 주요 대표 이미지는 제외하세요.휴대전화 레이아웃이 제대로 작동하면 브라우저를 넓히면서 단순히 폭만 키우지 말고 가치를 더하세요.
프랜차이즈와 다지점 사이트에는 특별한 모바일 문제가 있습니다. 대부분의 방문자가 휴대전화에서 “내 주변” 검색을 통해 들어와 특정 지점 정보를 즉시 원합니다.
We.Inc가 만드는 모든 사이트는 처음부터 반응형이며 편집기에서 휴대전화 레이아웃을 미리 보고 시각적으로 또는 코드로 조정할 수 있습니다. 템플릿을 둘러보며 레이아웃이 한 열로 바뀌는 방식을 확인하거나 업체를 설명해 초안을 만든 다음 자신의 휴대전화에서 테스트하세요.
무료로 시작하기 · 신용카드 필요 없음