반응형 홈페이지 검수, 화면 크기별로 확인할 9가지

시안 한 장이 검수가 아닌 이유

홈페이지는 모니터 한 장으로 끝나지 않습니다. 같은 페이지라도 버스 안에서 한 손으로 볼 때, 카페 테이블 위 태블릿으로 볼 때, 사무실 모니터로 볼 때 글줄과 버튼 자리가 달라집니다. 제작을 맡긴 쪽에서 시안만 보고 넘어가면, 다른 너비에서 메뉴가 본문을 가리거나 문장이 가로로 밀리는 일을 늦게 발견하기 쉽습니다.

검수의 질문은 예쁜가가 아닙니다. 손님이 실제로 쓰는 화면 크기에서 정보가 빠지지 않는가입니다. 반응형이라는 말은 창이 줄어들면 블록이 다시 쌓인다는 뜻이지, 한 기기에서만 보면 충분하다는 뜻이 아닙니다. 오픈 전에 화면을 나눠 보는 습관이 인수 기준이 됩니다.

검수 전에 맞춰 둘 세 가지 화면

기기를 모두 살 필요는 없습니다. 브라우저 창을 좁히고 넓히며 같은 주소를 반복해 보면 됩니다. 실무에서는 아래 세 구간을 기본 세트로 둡니다. 세로와 가로로도 한 번씩 돌려 봅니다. 방향이 바뀌면 메뉴와 입력창 위치가 달라지는 경우가 있습니다.

좁은 화면

한 손으로 스크롤하는 폭입니다. 메뉴가 접히는지, 본문이 한 열로 쌓이는지, 하단 고정 바가 글을 가리는지를 먼저 봅니다. 전화 걸기 버튼이나 문의 버튼이 본문보다 위에 떠 있으면, 글을 읽기도 전에 화면이 답답해집니다.

중간 화면

두 열이 생겼다가 깨지기 쉬운 구간입니다. 카드가 한 장만 남거나, 여백만 커지고 글이 한가운데 뜨는 경우가 많습니다. 이 너비는 노트북을 반만 접은 창, 작은 태블릿과 겹칩니다. 시안 작업에서 빠지기 쉬워 따로 표시해 두는 편이 낫습니다.

넓은 화면

모니터에서 한 줄이 너무 길어지지 않는지, 고정 헤더가 본문 첫 줄을 가리지 않는지, 이미지가 과하게 커져 초점이 흩어지는지를 봅니다. 넓은 화면은 통과했다고 착각하기 쉽습니다. 여백이 넓다고 읽기 쉬운 것은 아닙니다.

좁은 화면에서 정보가 사라지지 않는지

가로 스크롤이 생기거나 문장이 화면 밖으로 밀리면, 방문자는 내용을 놓칩니다. W3C의 리플로우 이해 문서는 일반적인 콘텐츠가 320 CSS 픽셀 너비에서도 정보가 빠지지 않고 다시 흐르도록 안내합니다. 검수할 때는 창을 그 근처까지 줄인 뒤, 확대에만 의존하지 않고 아래를 확인합니다.

• 본문, 표, 버튼이 화면 밖으로 밀리지 않는지
• 고정된 바와 팝업이 글을 가린 채 닫히지 않는지
• 표나 갤러리가 세로로 쌓이거나, 밀어 볼 수 있는 방식이 분명한지

숨긴 내용이 접힌 메뉴 안에만 있고 본문에서는 영영 안 보이면, 좁은 화면 사용자는 그 정보를 받지 못한 것과 같습니다. 지도, 영상, 외부 위젯도 이 구간에서 가로로 넘치는 일이 잦습니다. 위젯이 깨지면 페이지 전체가 좌우로 흔들립니다. 발견한 위치와 창 너비를 같이 적어두면 수정 범위가 분명해집니다.

이미지가 잘리고 밀리지 않는지

배너와 사람 사진은 너비에 따라 잘리거나 흐려지기 쉽습니다. MDN의 반응형 이미지 안내처럼 srcset, sizes, picture를 쓰면 브라우저가 상황에 맞는 이미지 소스를 고를 수 있습니다. 코드를 몰라도 화면만으로 확인할 수 있습니다. 얼굴이 잘려 표정이 이상해지거나, 넓은 화면에서 읽히던 문구가 사진 무늬에 묻히면 그 화면은 보류입니다.

• 인물 얼굴이나 핵심 문구가 잘려 의미가 바뀌지 않는지
• 좁은 화면에서 필요 이상으로 큰 원본만 늦게 뜨지 않는지
• 장식 이미지가 본문과 버튼을 아래로 밀어내지 않는지

배경 위에 글을 올린 첫 화면은 특히 주의합니다. 모니터에서는 어두운 영역에 글이 있었는데, 폰에서는 밝은 옷자락 위로 글이 겹칠 수 있습니다. 이미지가 안 뜰 때 무엇을 설명하는 자리인지도 봅니다. 대체 텍스트가 비어 있으면 이미지 오류가 곧 정보 공백이 됩니다.

메뉴와 폼을 키보드로도 쓰는지

손가락만 있다고 가정하지 않습니다. W3C 키보드 이해 문서는 모든 기능이 키보드 인터페이스로 동작해야 한다고 말합니다. 노트북에서 탭 키만으로 페이지를 훑어 보면, 마우스로는 안 보이던 빈틈이 드러납니다. 커스텀 셀렉트, 슬라이더 점, 햄버거 메뉴가 여기에 자주 걸립니다.

메뉴

버튼을 연 뒤 닫을 수 있는지, 열린 메뉴가 본문을 가린 채 스크롤만 잠그는지 봅니다. 키보드로 메뉴 항목에 도달할 수 있는지도 확인합니다. 열려 있는 동안 뒤쪽 링크가 같이 선택되면, 사용자는 지금 어디를 누르는지 헷갈립니다.

폼과 포커스

입력창이 떠오른 키보드에 가리지 않는지, 오류 문구가 필드 근처에 붙는지, 제출 버튼이 화면 밖으로 밀리지 않는지를 봅니다. 지금 어디를 선택했는지 테두리나 밑줄이 보여야 합니다. 포커스가 사라진 링크는 키보드 사용자에게 막힌 길입니다.

중간·넓은 화면과 마지막 아홉 가지

좁은 화면만 통과했다고 끝이 아닙니다. 중간 너비에서는 그리드가 한 장만 남거나 카드 높이가 제각각입니다. 넓은 화면에서는 줄 길이가 한눈에 안 들어오거나, 고정 헤더와 안내 바가 겹쳐 본문 첫 줄을 가릴 수 있습니다. 자동으로 넘어가는 배너와 슬라이더는 좁은 화면에서 높이만 커지고 내용은 안 읽히는 경우가 있어, 움직임을 잠시 멈추고 따로 봅니다.

검수를 한 번에 끝내려면 아래 아홉 가지를 화면마다 통과 또는 보류로 표시합니다. 느낌 문장 대신 화면 크기와 실패한 항목을 같이 적습니다.

• 320 CSS 픽셀 근처에서도 정보가 빠지지 않고 다시 흐르는가
• 가로 스크롤 없이 본문과 버튼이 보이는가
• 메뉴가 열리고 닫히며 키보드로도 도달하는가
• 링크와 버튼 사이가 손가락으로 누르기 어렵지 않은가
• 이미지가 잘리거나 의미 있는 문구를 가리지 않는가
• 화면 너비에 맞는 이미지 소스가 바뀌는가
• 폼 필드와 오류 문구가 가려지지 않는가
• 탭 키만으로 주요 기능을 끝까지 쓸 수 있는가
• 중간·넓은 화면에서 그리드, 줄 길이, 고정 바가 본문을 해치지 않는가

검수 메모를 문의에 붙이는 방법

Studio OD 공개 사이트는 홈페이지 제작 범위와 문의 경로를 안내합니다. 검수에서 걸린 화면 크기, 세로·가로 방향, 재현 순서, 화면 캡처를 붙여 문의하면 첫 대화에서 손볼 지점이 구체적입니다. 이 글에서 가격이나 작업 기간을 단정하지 않습니다. 범위는 페이지 구성, 기존 사이트 유무, 콘텐츠 준비 상태에 따라 달라지므로 사이트 문의 경로로 확인하는 편이 맞습니다.