반응형 홈페이지,
화면 폭별 확인법과 점검표

반응형 홈페이지란 무엇이고 모바일 전용과 어떻게 다른가요?

반응형 홈페이지는 하나의 주소에서 화면 폭에 맞춰 배치와 크기를 바꾸어 보여 주는 홈페이지입니다.
같은 글과 사진을 쓰고 칸 수와 글자 크기,
메뉴 모양만 달라집니다.

휴대폰용 주소를 따로 두는 모바일 전용 사이트는 글을 두 곳에서 고쳐야 하고 한쪽만 갱신되기 쉽습니다.
반응형은 주소가 하나라서 글을 한 번만 고치면 됩니다.

적응형 웹은 몇 개의 기준 폭마다 미리 짜 둔 배치로 바꾸어 끼우는 방식이고,
PC 화면 하나만 만든 고정 폭 사이트는 휴대폰에서 화면 전체가 줄어들어 글자가 작게 보입니다.
반응형은 창 폭이 조금씩 달라져도 배치가 따라 움직인다는 점이 다릅니다.

• viewport 메타: 화면 폭을 기기의 실제 폭으로 잡으라고 브라우저에 알리는 한 줄입니다.
  없으면 휴대폰이 PC 화면을 줄여 보여 주려 해서 글자가 작아집니다.
• CSS 조건부 배치: 화면 폭이 기준보다 클 때와 작을 때 배치 규칙을 다르게 적용하는 방식으로 미디어 쿼리라고도 합니다.
• 유동형 그리드: 칸 너비를 고정된 픽셀 대신 비율로 정해서 창 폭을 줄이면 칸도 함께 줄어드는 방식입니다.
• 유연한 이미지: 사진이 칸 폭을 넘지 않고 가로 세로 비율을 지키며 줄어들게 하는 규칙입니다.

이 사이트의 공개 안내 쪽을 그리는 공통 틀의 머리에는 viewport 메타 태그가 있고 값은 width=device-width,
initial-scale=1,
viewport-fit=cover 입니다.
이 한 줄만으로 반응형이 완성되지는 않고 실제 배치는 CSS가 정합니다.

내 홈페이지가 반응형인지 어떻게 확인하나요?

데스크톱 브라우저 창 폭을 줄이거나 개발자 도구의 기기 모드로 보아 가로 스크롤이 없으면 대체로 반응형입니다.
한 번 훑어보는 데는 오래 걸리지 않습니다.

1. 브라우저 창 줄이기PC 브라우저 창의 오른쪽 끝을 끌어 폭을 천천히 줄입니다.
   칸이 위아래로 쌓이고 메뉴 모양이 바뀌면 반응형일 가능성이 높습니다.
2. 기기 모드 켜기크롬에서는 F12로 개발자 도구를 열고 기기 툴바 단추를 눌러 폭을 360,
   390처럼 숫자로 입력합니다.
   같은 숫자로 되풀이하면 고친 뒤에도 같은 조건으로 확인할 수 있습니다.
3. 실제 휴대폰으로 열기같은 주소를 휴대폰으로 열어 세로와 가로 방향을 모두 보고,
   주소창이 접히고 펼쳐질 때 화면이 어떻게 움직이는지도 봅니다.
4. 네 가지 확인하기옆으로 밀리는지,
   글이 잘리거나 겹치는지,
   단추가 손가락으로 누를 만한 크기인지,
   메뉴가 열리고 닫히는지 차례로 봅니다.
5. 확대가 막혀 있지 않은지 보기휴대폰에서 두 손가락으로 화면을 벌렸을 때 확대되는지 봅니다.
   확대를 막아 둔 사이트는 글자가 작아 읽기 어려운 방문자가 키워 볼 수 없습니다.
6. 문제 폭 적어 두기이상이 생긴 폭과 기기,
   브라우저 이름을 적어 두어야 고친 뒤 같은 조건으로 다시 확인할 수 있습니다.

기기 모드는 터치와 주소창 높이,
키보드가 올라오는 모습까지 똑같이 보여 주지는 못합니다.
기기 모드는 1차 확인으로 쓰고 마지막에 실제 휴대폰으로 한 번 더 열어 보세요.

어떤 화면 폭으로 점검해야 하나요?

휴대폰 360px과 390px,
태블릿 768px,
노트북 1280px 네 폭을 기본으로 점검합니다.
이 숫자는 기기 점유율 통계가 아니라 점검하기 좋은 대표값입니다.

• 360px,
  작은 휴대폰 세로: 제목이 여러 줄이어도 읽히는지,
  단추 글자가 잘리지 않는지 봅니다.
• 390px,
  일반 휴대폰 세로: 첫 화면에 핵심 문구와 연락 단추가 함께 보이는지 봅니다.
• 768px,
  태블릿 세로: 칸 수가 바뀌는 지점의 여백이 어색하지 않은지 봅니다.
• 1280px,
  노트북과 PC: 한 줄 글자 수가 너무 많지 않은지,
  본문이 양끝까지 늘어나지 않는지 봅니다.

네 폭 사이에서도 창을 천천히 줄이며 배치가 바뀌는 지점을 찾아보세요.
그 지점은 업체나 도구마다 달라서 위 숫자 근처에서 바뀌는 사이트도 있고 다른 숫자에서 바뀌는 사이트도 있습니다.
겹침은 그 지점 근처에서 잦으므로 문제 폭의 숫자를 그대로 전달하면 설명이 빨라집니다.

반응형이 자주 깨지거나 느려지는 곳은 어디인가요?

가로 스크롤,
고정 띠의 가림,
표와 이미지의 넘침,
작은 터치 대상,
큰 사진으로 느려지는 열림이 흔합니다.
증상마다 확인법과 고치는 방향이 다릅니다.

1. 가로 스크롤폭을 줄이며 옆으로 밀리기 시작하는 지점을 찾고,
   큰 이미지나 폭이 고정된 표,
   긴 영문 주소를 하나씩 가려 보며 원인을 좁힙니다.
2. 화면 아래 고정 띠끝까지 스크롤해 마지막 내용이 띠에 가리지 않는지 보고,
   본문 아래에 띠 높이만큼 여백을 둡니다.
3. 표 넘침좁은 폭에서 마지막 열까지 보이는지 확인하고,
   열을 줄이거나 항목별로 위아래로 쪼갭니다.
4. 이미지 비율세 폭에서 같은 사진을 비교해 가로 세로 비율을 지키며 줄어드는지 봅니다.
5. 입력칸 글자 크기문의 폼 입력칸을 눌렀을 때 화면이 저절로 확대되지 않는지,
   입력 글자가 너무 작지 않은지 봅니다.
6. 터치 대상이 작음접근성 지침 WCAG 2.2에도 손가락 누름 대상의 크기를 다루는 항목이 있고,
   44px 안팎을 권장값으로 쓰는 곳이 많습니다.
   단추끼리 간격도 함께 봅니다.
7. 사진 용량과 열리는 속도휴대폰에서 첫 화면이 열리는 데 오래 걸리면 큰 사진 원본을 그대로 올린 것이 원인일 수 있습니다.
   화면에 보이는 크기에 맞춘 사진을 쓰는지 업체에 묻고,
   느린 회선에서도 한 번 열어 봅니다.
   구글이 안내하는 Core Web Vitals 같은 속도 지표의 기준값은 공식 문서에서 확인하세요.

일곱 가지는 폭을 바꿔 보면 대부분 찾을 수 있고 고친 뒤에도 다시 나타나기 쉽습니다.
글이나 사진을 바꿀 때마다 두 폭 이상 다시 열어 보는 것이 가장 확실한 예방법입니다.

고정 하단 띠는 PC에서 어떻게 달라지나요?

휴대폰에서는 화면 아래에 고정하던 띠를 PC에서는 본문 흐름 안에 두어 내용을 가리지 않게 합니다.
좁은 화면에서는 아래에 붙은 신청이나 연락 단추가 엄지로 누르기 편하지만,
넓은 화면에서는 떠 있는 띠가 본문을 가립니다.

그래서 같은 단추를 두 벌 만들어 좁은 폭에는 고정 띠를,
태블릿 이상 폭에는 본문 끝의 띠를 보이는 방식을 많이 씁니다.
두 벌이 함께 보이거나 함께 사라지지 않는지가 첫 점검 지점입니다.

• 폭 390px: 맨 아래까지 내려가 마지막 줄이 띠에 가려지지 않는지 봅니다.
• 시트나 팝업을 열었을 때 닫기 단추가 아래 띠에 눌려 가려지지 않는지 봅니다.
• 입력칸을 눌러 키보드가 올라와도 보내기 단추와 입력칸이 함께 보이는지 봅니다.
• 폭 1280px: 띠가 떠 있지 않고 본문 아래 제자리에 놓이는지 봅니다.

마지막 절에서 실제 주문 화면으로 같은 점검을 해 봅니다.

제작을 맡길 때 반응형을 어떻게 요구하나요?

제작을 맡길 때는 점검할 화면 폭을 계약서에 적고,
폭별 화면 캡처를 검수 자료로 받도록 요구합니다.
반응형이라는 말만으로는 어느 폭까지 보장하는지 알 수 없습니다.

• 점검 폭 명시: 360,
  390,
  768,
  1280px 네 폭에서 확인한다고 적습니다.
• 폭별 캡처 제출: 같은 쪽을 네 폭으로 캡처해 검수 자료로 받는다고 적습니다.
• 가로 스크롤 없음: 네 폭 모두 화면이 옆으로 밀리지 않는다고 적습니다.
• 메뉴와 연락 단추: 좁은 폭에서 메뉴가 열리고 닫히며 단추가 눌린다고 적습니다.
• 수정 요청의 범위: 검수에서 찾은 배치 문제를 몇 번까지 고쳐 주는지 적습니다.
• 견적서의 기본과 추가: 모바일 화면 대응이 기본 항목인지 추가 항목인지,
  휴대폰 화면 수정이 따로 청구되는지 적습니다.
  같은 반응형이라는 이름이어도 업체마다 포함 범위가 다릅니다.

업체가 폭 숫자를 꺼린다면 확인하는 기기와 브라우저 이름이라도 서면으로 받아 두세요.

반응형은 검색 노출과 관계가 있나요?

검색 서비스는 모바일 화면 기준으로 페이지를 평가하므로 모바일에서 읽히지 않으면 검색에도 불리합니다.
구글은 이 방식을 모바일 우선 색인이라는 이름으로 안내합니다.

반응형은 주소가 하나라서 같은 글이 PC 주소와 휴대폰 주소로 갈라지지 않는 점도 관리에 유리합니다.
휴대폰용 주소를 따로 두면 두 주소의 내용이 같은지,
서로 이어져 있는지 계속 확인해야 합니다.

그렇다고 반응형이면 순위가 오른다는 뜻은 아닙니다.
모바일에서 글이 잘리거나 단추가 눌리지 않으면 방문자가 바로 떠난다는 정도로 이해하면 충분하며,
순위는 업체가 약속할 수 없습니다.

세부 기준은 구글 검색 센터의 모바일 우선 색인 안내에서 확인하세요.
이 글은 문구를 옮기지 않았고,
네이버 서치어드바이저의 모바일 안내는 확인하지 못했습니다.

인사책 홈페이지 제작의 모바일 화면은 어떻게 확인하나요?

인사책의 예시 홈페이지 세 쪽은 휴대폰 폭과 PC 폭에서 각각 열어 직접 비교해 볼 수 있습니다.
주문한 뒤 받게 될 홈페이지의 반응형 여부는 이 글에서 약속하지 않으며,
시안 단계에서 위 점검을 요청하세요.

직접 해 보면 — 판매 화면을 폭 390과 1280에서 나란히 열어 보기

1. 판매 화면 열기관리자 화면의 업무 지원에서 홈페이지를 열고 「귀사의 홈페이지를 쉽게 가져보세요」 안내를 확인합니다.
   폭 390px 창과 폭 1280px 창을 준비합니다.
2. 폭 390에서 단계 탭 보기기본 · 고급(추천) · 프리미엄 · 맞춤 네 탭이 같은 폭으로 한 줄에 들어가고 글자가 잘리지 않는지 봅니다.
3. 폭 390에서 아래 띠와 시트 보기「결제하고 만들기」(맞춤형은 「상담 신청」) 띠가 화면 아래에 붙어 있고 마지막 내용을 가리지 않는지 봅니다.
   눌러 열린 시트의 「구매 조건·환불 규정에 동의」 칸과 「자세히」 단추도 손가락으로 눌러 봅니다.
4. 폭 1280에서 같은 띠 보기고정 띠는 숨고 같은 단추가 본문 아래에 놓입니다.
   「우리 회사로 미리 보기」 칸이나 「자주 묻는 질문」을 가리지 않는지 봅니다.
5. 결제 뒤 입력 화면의 아래 띠 보기결제를 마친 회사의 입력 화면에서는 「나중에 쓸게요」와 제출 단추가 폭이 좁으면 화면 아래에 붙은 띠에,
   넓으면 본문 아래의 같은 줄에 놓이도록 만들어져 있습니다.
   폭 390에서 입력칸을 눌러 키보드가 올라와도 띠가 입력칸을 가리지 않는지 확인합니다.
6. 예시 세 쪽 열고 기록하기기본형,
   고급형,
   프리미엄형 예시를 휴대폰과 PC에서 번갈아 엽니다.
   가상의 회사로 만든 화면이라 내 문구가 들어가면 줄바꿈이 달라질 수 있습니다.
   폭별 측정값은 이 글에 싣지 않았으니 본인 기기와 브라우저 이름과 함께 결과를 적어 두세요.

막히기 쉬운 곳은 예시와 내가 받을 홈페이지를 같은 것으로 착각하는 점입니다.
내 홈페이지의 폭별 모양은 시안에서 위 순서로 다시 확인해야 합니다.

• 홈페이지 제작 단계와 예시 보기
• 기본형 예시 홈페이지 열기
• 화면 배치와 색 정하기
• 웹사이트 만드는 순서 보기
• 제작업체에 물어볼 질문 보기