반응형 웹
Responsive Web Design
반응형 웹이란?
- 화면 크기에 맞춰 자동 재배치
- PC·모바일 어디서나 보기 좋게
- 모바일 시대 필수
반응형 웹을 도입하면 관리해야 할 사이트가 하나로 줄어듭니다. PC용과 m.도메인을 따로 굴리던 회사는 배너 하나를 바꿔도 두 번 작업하고, 한쪽만 고쳐 가격이 서로 다르게 표시되는 사고를 겪습니다. 주소(URL)가 하나로 통일된다는 점이 실무에서는 더 큽니다. 카카오톡으로 공유한 링크가 PC에서도 그대로 열리고, 검색엔진도 한 페이지에 평가를 몰아줍니다. 유지보수 인력과 광고 링크 관리가 절반으로 줄어드는 것이 도입의 진짜 이유입니다.
기준이 되는 것은 화면 전환점, 즉 브레이크포인트입니다. 현업에서는 보통 모바일 480px 이하, 태블릿 768~1024px, PC 1200px 이상 세 구간을 잡습니다. 화면 크기별로 미리 만들어 둔 몇 개의 고정 레이아웃을 갈아 끼우는 적응형(Adaptive)과는 구분해야 합니다. 반응형은 그 사이 값에서도 자연스럽게 늘고 줄기 때문입니다. 여기에 viewport 메타 태그 한 줄이 빠지면 아무리 잘 만들어도 모바일에서 PC 화면이 그대로 축소돼 보입니다.
제작 단계에서는 검증 범위를 어디까지 잡느냐가 관건입니다. 국내 방문자 기준이라면 아이폰 최근 2~3세대, 갤럭시 보급형, 아이패드 정도만 실기기로 확인해도 대부분 걸러집니다. 브라우저 개발자도구의 화면 크기 조절 기능으로 1차 점검하고, 결제나 문의 폼처럼 매출과 직결되는 화면만 실제 기기에서 손으로 눌러 봅니다. AI에게 화면을 맡길 때도 '반응형으로'라고만 하면 부족하고, '480/768/1200px 세 구간으로 나눠 달라'처럼 기준을 지정하는 편이 결과가 안정적입니다.
가장 흔한 오해는 '반응형이면 모바일 최적화는 끝났다'는 생각입니다. PC 기준 2MB짜리 이미지를 그대로 내려보내면 화면만 줄어들 뿐 로딩은 여전히 느리고, 이동통신 환경에서 5초를 넘기면 방문자는 그냥 나갑니다. 제품 사양표처럼 가로로 넓은 표는 1단으로 접히는 순간 가로 스크롤이 생겨 읽기 어려워지므로, 모바일에서는 접었다 펴는 카드 형태로 다시 설계해야 합니다. 버튼 간격을 마우스 기준으로 잡아 손가락으로는 자꾸 옆 버튼이 눌리는 일도 자주 봅니다. 디자인을 모바일부터 그린 뒤 PC로 넓히는 순서로 바꾸면 이런 사고가 크게 줄어듭니다.
웹 디자이너 이선 마콧(Ethan Marcotte)이 2010년 글에서 'Responsive Web Design'이라는 개념과 이름을 제시하며 대중화됐습니다.
가상의 사례로 살펴보겠습니다. 경남에서 산업용 밸브를 만드는 A사는 임직원 48명, 연매출 220억 원 규모입니다. 2015년에 제작한 홈페이지를 8년째 그대로 쓰고 있었는데, 유입의 71%가 모바일인데도 화면이 PC 그대로 축소돼 나왔습니다. 해외 바이어가 '사양표가 안 읽힌다'는 메일을 보내오면서 개편 논의가 시작됐습니다.
- 마케팅팀 김 과장이 접속 통계를 뽑아 보니 모바일 방문자 평균 체류 시간이 19초, 문의 폼까지 도달하는 비율은 0.4%였습니다. 대표에게 '문의가 안 오는 게 아니라 못 오는 겁니다'라고 보고했습니다.
- 외주 견적이 PC·모바일 분리 제작 2,800만 원, 반응형 단일 제작 1,900만 원으로 나왔습니다. 운영팀 박 차장이 '배너 하나 바꾸는 데 두 번 일하는 건 이제 못 하겠다'고 해 반응형으로 정리했습니다.
- 브레이크포인트를 480·768·1200px 세 구간으로 잡고, 밸브 사양표 12개 항목은 모바일에서 접었다 펴는 카드로 다시 짰습니다. 제품 사진도 모바일용 400KB 버전을 따로 내려보내게 했습니다.
- 공개 이틀 전 김 과장이 갤럭시와 아이폰, 사무실 아이패드로 문의 폼을 직접 눌러 봤고, 손가락으로 자꾸 옆이 눌리던 '견적 요청' 버튼 영역을 세로 48px까지 넓혔습니다.
- 개편 3개월 뒤 모바일 체류 시간은 19초에서 1분 12초로, 월 온라인 문의는 6건에서 23건으로 늘었습니다. 배너·공지 수정 작업 시간도 건당 40분에서 15분으로 줄었습니다.