가로로 밀어야 읽을 수 있다면 레이아웃부터 확인
데스크톱에서 두세 열로 보이는 카드가 좁은 화면에서 그대로 유지되면 글자가 지나치게 작아지거나 내용이 잘립니다. 단순 축소 대신 콘텐츠 우선순위에 맞게 열을 다시 배치해야 합니다.
320px 전후의 좁은 화면부터 일반적인 스마트폰, 태블릿 폭까지 단계별로 확인하고, 고정 너비 입력창과 긴 버튼 텍스트가 화면 밖으로 나가는지 검사합니다.
메뉴는 열리는가? 다시 닫히는가?
햄버거 버튼을 추가했다고 모바일 탐색이 완성되지는 않습니다. 메뉴가 열렸는지 알 수 있는 상태 표시, 키보드 접근, 링크 선택 후 화면 전환, 다른 요소와 겹치는 문제까지 확인해야 합니다.
홈페이지 상단에서 메뉴를 열고 ‘웹사이트 제작’을 선택해 보세요. 여러 페이지에서 같은 위치와 규칙으로 동작하는지도 확인합니다. MODERUN 메뉴 테스트 ↗
정보가 많은 화면에서는 간격이 더 중요하다
PC에서 읽기 편한 긴 문장이 모바일에서는 여러 줄로 바뀝니다. 제목과 본문의 크기뿐 아니라 줄간격, 문단 사이의 여백, 주요 정보의 순서를 다시 점검해야 합니다. 컨트라스트도 배경에 따라 달라집니다.
특히 다크모드가 있는 사이트는 밝은 화면과 어두운 화면 모두에서 글자와 버튼이 구별되는지 확인해야 합니다. MODERUN 상단 테마 스위치로 두 상태를 비교할 수 있습니다.
긴 양식은 입력을 시작한 뒤에 문제가 드러난다
모바일에서 이메일 키보드가 적절하게 뜨는지, 선택지가 손가락으로 눌리기 쉬운지, 필수 항목 오류가 어디에 표시되는지 확인합니다. 버튼이 보인다고 해서 실제로 전송이 끝났다고 가정해서는 안 됩니다.
MODERUN 문의 양식에서 연락 방법 선택과 메일 확인 안내를 살펴보세요. 실제 접수 흐름은 별도 운영 테스트가 필요합니다.
애니메이션은 정보를 돕는 데까지만
등장 효과와 호버 반응은 화면에 생동감을 주지만, 카드가 늦게 나타나 내용을 읽을 수 없거나 조작을 방해하면 목적을 잃습니다. 움직임을 줄이도록 설정한 사용자에게는 필수 정보를 애니메이션 없이 제공해야 합니다.
짧은 화면에서 메뉴 탐색 → 카드 스크롤 → 다크모드 전환 → 문의 입력 → 가로 스크롤 여부 확인. 실패한 지점은 화면 캡처와 함께 수정 목록으로 남깁니다.