모바일 반응형 실전 패턴 5가지

주니어 때는 미디어 쿼리가 전부인 줄 알았다

768px 이하면 이렇게, 1024px 이상이면 저렇게. 반응형이 그거 아닌가? 실무에서 2년 넘게 반응형 작업을 하다 보니, 미디어 쿼리는 반응형의 일부일 뿐이라는 걸 깨달았다. 자주 쓰는 5가지 패턴을 정리해본다.

패턴 1: 컨테이너 쿼리로 카드를 자유롭게

내 블로그 포스트 카드는 홈에서 3열 그리드, 사이드바에서 1열, 관련 포스트에서 2열로 표시된다. 예전에는 각 위치마다 별도 카드를 만들거나 미디어 쿼리로 세 가지 레이아웃을 관리했다.

CSS Container Query를 쓰면 카드가 자기 부모 크기에 따라 알아서 레이아웃을 바꾼다. 부모가 넓으면 가로, 좁으면 세로. 어디에 놓든 알아서 적응한다. 미디어 쿼리는 "화면이 얼마나 큰가"를 보지만, 컨테이너 쿼리는 "내가 놓인 공간이 얼마나 큰가"를 본다. 이 차이가 컴포넌트 재사용성을 크게 높인다.

패턴 2: JS 조건부 렌더링 대신 CSS로 숨기기

모바일에서 사이드바를 숨길 때 {isMobile ? null : <Sidebar />} 이렇게 하는 경우가 많다. 문제는 isMobile 판단하려면 window.innerWidth를 읽어야 하고, 서버 렌더링에서 안 된다. hydration mismatch의 원인이 된다.

Tailwind hidden md:block으로 하면 서버 렌더링이랑 충돌이 없다. HTML은 이미 렌더링되어 있고 CSS가 보이고 안 보이고만 결정한다. 다만 숨겨진 DOM이 메모리를 차지하는 건 사실이다. 가벼운 UI는 CSS 숨기기, 무거운 컴포넌트는 dynamic import + 조건부 렌더링 조합이 내 기준이다. (이 기준도 매번 흔들리긴 한다.)

패턴 3: 핵심 네비게이션은 하단으로

데스크탑에서 상단 가로 네비게이션, 모바일에서 햄버거 메뉴. 가장 흔한 패턴인데, 나는 한 가지를 추가한다. 모바일에서 자주 쓰는 메뉴 2~3개를 하단 탭 바로 빼는 거다.

사용자 엄지가 닿는 영역은 화면 하단이다. 상단 햄버거 메뉴는 매번 손을 위로 뻗어야 한다. 핵심은 하단, 나머지는 햄버거 안에. 이 하이브리드가 모바일 UX에서 훨씬 효과적이다. 근데 이렇게 하면 하단 탭에 뭘 넣을지 결정하는 게 의외로 어렵다. 세 개만 골라야 하니까.

패턴 4: clamp()로 반응형 폰트

font-size: 16px 고정이면 큰 화면에서 작아 보인다. clamp() 쓰면 화면 크기에 따라 자연스럽게 변한다. font-size: clamp(1rem, 0.5rem + 1.5vw, 1.5rem) — 최소 16px에서 최대 24px 사이를 화면 크기에 비례해서 움직인다. 미디어 쿼리 없이도 모든 화면에서 적절한 크기가 된다.

블로그 본문에 이걸 적용한 뒤로 "모바일에서 글씨가 작아요" 피드백이 사라졌다.

패턴 5: 터치 타겟 44px 사수

모바일에서 버튼 누르려다 옆에 걸 누르는 경험. 있지 않나. WCAG 기준 터치 타겟 최소 크기가 44x44px이다. 텍스트 링크는 패딩으로 영역을 넓히고, 아이콘 버튼은 시각적으로 작더라도 히트 영역을 44px 이상으로 확보한다. Tailwind 기준 min-h-11 min-w-11을 아이콘 버튼 기본으로 쓰는 습관을 들이면 모바일 사용성이 크게 개선된다.

크롬 DevTools만으로는 부족하다

실제 폰에서 테스트해야 잡히는 게 있다. 호버 상태가 모바일에서 sticky하게 남는 문제, 소프트 키보드 올라올 때 레이아웃 밀리는 문제, 손가락 관성 스크롤 느낌 같은 것들.

나는 ngrok으로 로컬 서버 열고 실제 폰에서 수시로 확인한다. 이 습관 하나가 "모바일에서 이상해요" 피드백을 절반으로 줄여줬다. 귀찮지만 효과는 확실하다.

어쨌든

반응형은 "화면 크기에 맞추는 것"이 아니라 "사용 맥락에 맞추는 것"이다. 모바일 사용자는 화면만 작은 게 아니라, 한 손으로 쓰고, 햇빛 아래에서 보고, 불안정한 네트워크를 탄다. 근데 이걸 매번 다 챙기는 건 현실적으로 어렵다. 하나씩이라도 해보는 수밖에.