반응형 웹, 정확히 무엇이 다른가

세 가지 방식

반응형 (Responsive)

하나의 HTML이 화면 폭에 따라 배치를 바꿉니다. 주소가 하나이므로 공유·검색·관리가 단순합니다. 현재 대부분의 사이트가 채택하는 방식입니다.

적응형 (Adaptive)

미리 정해둔 몇 가지 화면 크기별로 각각의 레이아웃을 준비합니다. 기기별로 전혀 다른 구성을 보여줄 수 있지만 유지보수 대상이 늘어납니다.

별도 모바일 사이트

m.example.com 형태로 사이트를 나눕니다. 과거에 많이 쓰였지만 같은 내용을 두 번 관리해야 하고 검색엔진 입장에서도 중복 문제가 생겨 지금은 권장되지 않습니다.

“반응형”이라고 다 같지 않다

반응형으로 만들었다고 해서 모바일 사용성이 보장되지는 않습니다. 실제로 자주 보이는 문제는 다음과 같습니다.

• PC용으로 만든 표가 모바일에서 가로로 넘쳐 화면이 밀린다
• 버튼이 작아 손가락으로 정확히 누르기 어렵다
• 본문 글자가 작아 확대해야 읽힌다
• PC용 고해상도 이미지를 그대로 내려받아 로딩이 느리다
• 메뉴가 3단계로 깊어 원하는 페이지에 닿기 어렵다

모바일 우선으로 설계한다는 것

PC 화면을 먼저 만들고 줄이는 방식으로는 무엇을 뺄지만 고민하게 됩니다. 모바일부터 설계하면 무엇이 가장 중요한지를 먼저 정하게 됩니다. 결과적으로 PC 화면도 더 명확해집니다.

체크리스트

1. 본문 글자 크기가 16px 이상인가
2. 버튼·링크의 터치 영역이 충분한가
3. 가로 스크롤이 발생하지 않는가
4. 이미지가 화면 크기에 맞게 제공되는가
5. 전화·문의 버튼이 항상 손에 닿는 위치에 있는가
6. 표·그래프가 모바일에서 읽히는 형태로 바뀌는가

이 여섯 가지를 만족하면 실무적으로 “모바일 대응이 되었다”고 볼 수 있습니다.