반응형 홈페이지란, 화면 폭별로 무엇을 정하고 만드나

반응형 홈페이지는 주소 하나, 코드 한 벌로 만들어 화면 폭에 맞춰 배치가 저절로 바뀌는 사이트입니다. 휴대폰에서는 메뉴가 접히고 칸이 한 줄에 하나씩 세로로 쌓이며, 컴퓨터에서는 같은 내용이 여러 칸으로 펼쳐집니다. 만들기 전에 정할 것은 다섯 가지입니다 — 기준 기기 · 화면 폭 구간 · 메뉴 접는 방식 · 이미지 크기 · 확인 기기 목록. 이 목록이 있으면 시안 회의에서 무엇을 볼지가 먼저 정해집니다.

반응형 홈페이지란 무엇인가요

반응형 홈페이지 뜻을 한 줄로 줄이면 이렇습니다 — 하나의 페이지가 화면 폭을 읽고 스스로 배치를 바꾸는 방식입니다. 반응형 웹이라고도 부릅니다. 미리 정해 둔 폭을 넘을 때마다 다른 배치 규칙이 적용되는데, 이 경계값을 브레이크포인트(분기점)라고 부릅니다.

그래서 반응형 홈페이지란 화면을 기기 수만큼 따로 만드는 것이 아니라, 한 화면에 폭별 규칙을 붙여 두는 것입니다. 내용을 한 번 고치면 휴대폰 · 태블릿 · 컴퓨터에 똑같이 반영됩니다.

반응형 웹사이트가 제대로 움직이려면 페이지 머리(head)에 화면 폭 설정(viewport) 한 줄이 있어야 합니다. 이 줄이 빠지면 휴대폰이 넓은 화면 기준으로 그린 뒤 통째로 줄여 보여 줍니다. 모바일에서만 화면이 깨질 때 가장 먼저 보는 자리이고, 개발자에게 이 이름으로 물으면 바로 확인됩니다.

검색 쪽에서도 이 방식이 편합니다. 구글은 검색 안내 문서에서 반응형 방식을 권장하면서 구현과 관리가 가장 쉽다는 점을 이유로 듭니다. 또 구글은 스마트폰용 검색 로봇이 가져간 모바일 화면의 내용으로 색인합니다. 휴대폰 화면에서 내용을 빼면 구글이 색인할 내용도 그만큼 줄어듭니다.

반응형·적응형·모바일 별도 사이트는 무엇이 다른가요

화면 폭에 대응하는 방법은 크게 셋입니다. 이 글에서 적응형 웹은 같은 주소에서 서버가 기기를 알아본 뒤 미리 만들어 둔 화면 몇 벌 중 하나를 보내는 방식을, 모바일 별도 사이트는 휴대폰용 주소를 따로 두는 방식을 말합니다.

적응형은 기기별로 화면을 따로 다듬고 싶을 때 고르는 방식입니다. 다만 새 크기의 기기가 나오면 미리 만든 벌 사이에 끼는 폭이 생기고, 내용을 고칠 때마다 벌 수만큼 손이 갑니다. 회사 소개 · 서비스 안내 · 문의가 중심인 사이트라면 반응형을 기본으로 두고 시작합니다.

어느 방식이든 휴대폰 쪽 내용은 컴퓨터 쪽과 같게 둡니다. 화면이 좁아 줄여야 한다면 내용을 빼지 말고, 누르면 펼쳐지는 칸(아코디언)이나 탭으로 접어 둡니다. 구글 안내 문서가 권하는 방법이기도 합니다.

만들기 전에 무엇을 정하나요

다섯 가지를 이 순서로 정합니다. 앞 단계의 답이 뒤 단계의 기준이 됩니다. 반응형 홈페이지 제작 견적을 요청할 때도 이 다섯 줄이 적혀 있으면 작업 범위를 같은 기준으로 셀 수 있습니다.

1. 기준 기기 — 배치는 방문자 비율과 상관없이 좁은 화면에서 먼저 정리합니다. 좁은 화면에서 정리한 구성은 넓은 화면으로 늘리기 쉽지만, 반대 순서로 가면 뺄 것이 계속 생깁니다. 분석 도구에서 지난달 기기별 비율을 확인해 휴대폰이 절반을 넘으면 시안 회의도 휴대폰 화면부터 봅니다.
2. 화면 폭 구간 — 기본은 세 구간입니다. 예를 들어 767px까지 휴대폰, 768~1,199px 태블릿과 작은 노트북, 1,200px 이상 컴퓨터로 잡습니다. 숫자는 가정한 값이고, 실제 경계는 내용이 어색해지는 폭에서 정합니다. 넓은 모니터에서 본문이 끝까지 늘어나지 않게 본문 최대 폭도 함께 적습니다.
3. 메뉴 접는 방식 — 세 줄 아이콘을 눌러 여는 메뉴, 화면 아래에 고정한 탭, 가로로 밀어 보는 메뉴 중에서 고릅니다. 마우스를 올려야 열리는 하위 메뉴는 손가락으로는 열리지 않거나 첫 탭에 바로 다른 페이지로 넘어가 버리므로, 눌러서 여는 방식으로 바꿉니다.
4. 이미지 크기 — 같은 사진이라도 휴대폰에는 작은 파일을, 컴퓨터에는 큰 파일을 보냅니다. 가로로 긴 사진은 휴대폰에서 제품과 글자가 작아지므로 세로로 자른 판을 따로 둘지 이때 정합니다. 자리별 폭과 용량은 홈페이지 이미지 규격의 표를 기준으로 삼습니다.
5. 확인 기기 목록 — 작은 휴대폰 · 큰 휴대폰 · 태블릿 · 노트북 · 넓은 모니터(가로 1,920px 안팎) 다섯 가지를 적고, 휴대폰과 태블릿은 가로로 돌린 상태도 넣습니다. 목록을 문서로 남겨 두어야 오픈 전 확인이 빠짐없이 끝납니다.

화면 폭별로 무엇이 바뀌나요

구간마다 바뀌는 것을 표 한 장으로 정리해 두면 디자이너와 개발자가 같은 기준으로 움직입니다. 아래 숫자는 대체로 쓰는 범위입니다.

글자 크기와 줄 간격의 자리별 기준값은 홈페이지 글자 크기와 줄 간격에 있습니다. 버튼의 44px은 웹 접근성 국제 기준(WCAG 2.2)의 가장 높은 등급에 적힌 값으로, 버튼 · 링크처럼 누르는 대상을 가로세로 44 CSS 픽셀 이상으로 두라는 기준입니다(문장 속 링크는 예외).

표는 휴대폰에서 깨지기 쉬운 요소입니다. 칸이 넷을 넘는 표는 휴대폰에서 가로로 밀어 보게 하고, 비교 항목이 많은 표는 칸마다 카드로 풀어 세로로 쌓습니다. 어느 쪽이든 컴퓨터에만 있고 휴대폰에서 사라지는 칸이 없게 합니다.

자주 묻는 질문

반응형이면 앱이 필요 없나요

회사 소개와 서비스 안내, 문의 · 예약 접수가 중심인 사이트라면 반응형 홈페이지로 휴대폰 사용이 해결됩니다. 앱을 따로 검토할 만한 경우는 셋입니다 — 알림톡 · 문자로 대신하기 어려운 알림을 자주 보내야 할 때, 카메라 · 위치 같은 기기 기능을 매일 쓸 때, 로그인한 회원이 하루에도 여러 번 여는 서비스일 때. 셋 다 아니라면 반응형 사이트를 먼저 열고 이용 기록을 본 뒤에 판단해도 늦지 않습니다. 앱을 만든다면 웹앱과 네이티브 앱의 차이부터 비교합니다.

모바일 화면을 따로 디자인해야 하나요

모든 화면을 두 벌 그릴 필요는 없습니다. 첫 화면 · 메뉴 · 주요 목록 · 문의 양식처럼 구조가 바뀌는 화면만 휴대폰 시안을 따로 받고, 나머지는 구간별 규칙으로 처리합니다. 견적을 요청할 때 휴대폰 시안이 필요한 화면 목록을 함께 적으면 디자이너가 작업량을 바로 셀 수 있습니다.

기존 사이트를 반응형으로 바꿀 수 있나요

바꿀 수 있고, 방법은 둘입니다. 화면 수가 적고 구조가 단순하면 지금 틀에 구간별 규칙을 덧대고, 표로 짠 옛 배치나 글자를 이미지로 만든 페이지가 많으면 새로 짓는 편이 빠릅니다. 기존 주소는 그대로 두고, 바뀌는 주소는 옛 주소로 들어온 사람을 새 주소로 넘기는 설정(301 리디렉트)을 해 둡니다. m.으로 시작하는 주소를 쓰던 사이트라면 그 주소들도 같은 방식으로 넘겨, 검색 결과와 다른 곳에 걸린 링크가 끊기지 않게 합니다.

오늘 할 일

지난달 방문자 중 휴대폰으로 들어온 비율을 분석 도구의 기기별 보고서에서 찾아 적어 두십시오. 구글 애널리틱스라면 기기 카테고리별 사용자 수가 나오는 화면입니다. 비율이 절반을 넘으면 다음 시안 회의는 휴대폰 화면부터 봅니다. 아직 사이트가 없다면 이 숫자 대신 휴대폰 화면부터 설계한다고 적어 두면 됩니다.

지금 사이트 주소나 만들 사이트의 종류를 적어 문의로 보내 주시면, 화면 폭 구간과 휴대폰 시안이 필요한 화면 수를 정리해 회신드립니다.

이어서 읽기 — Framer 홈페이지, 코딩 없이 올리는 순서와 한계 · 홈페이지 팝업, 사이즈표와 조건·문구 예시 6개