데스크톱과 모바일 사이의 간격
넓은 데스크톱 화면에는 탐색 메뉴가 잘 맞고 휴대전화에서는 간결한 메뉴로 바뀌더라도, 그 중간 너비에서는 어색하게 줄바꿈될 수 있습니다. 2열 양식도 중단점이 바뀌기 전에 레이블이 서로 밀집하면서 같은 문제를 겪을 수 있습니다. 화면 크기 양끝의 스크린샷만으로는 그 사이를 확인할 수 없습니다.
콘텐츠를 사용하기 어려워지기 시작하는 지점 주변에서 화면 크기를 조정해 보세요. 익숙한 기기 너비에서 통과했는지가 중요한 것이 아닙니다. 콘텐츠가 더 이상 들어가지 않을 때 레이아웃이 합리적으로 대응하는지가 중요합니다.
이상적인 레이블을 현실적인 내용으로 바꾸세요
긴 조직 이름, 현지화가 지원되는 경우의 번역된 레이블, 이미지 누락, 예시보다 훨씬 큰 값을 넣어 보세요. 이는 복잡한 예외 상황이 아니라 흔히 발생하는 콘텐츠 조건입니다. 짧은 텍스트나 완전한 데이터에 레이아웃이 은근히 의존하는지 드러납니다.
텍스트를 줄바꿈하거나 자르거나 별도 행으로 옮길 시점을 의도적으로 정하세요. 장식용 설명을 자르는 것은 괜찮을 수 있지만, 계정 이름 두 개를 구분하는 부분이 숨겨지면 사용자가 올바른 계정을 선택하지 못할 수 있습니다.
열을 쌓은 뒤에도 관계를 유지하세요
넓은 화면에서는 설명이 관련 컨트롤 옆에 놓일 수 있습니다. 열을 쌓고 나면 다른 섹션이 둘 사이에 들어갈 수 있습니다. 모든 요소가 화면에 남아 있는지만 확인하지 말고 좁은 레이아웃을 위에서 아래로 읽어 보세요.
텍스트 확대와 페이지 확대 상태의 경험도 살펴보세요. 고정 헤더나 화면에 붙어 있는 동작 막대가 실제로 쓸 수 있는 공간을 거의 남기지 않을 수 있습니다. 콘텐츠가 모두 보인다고 해서 읽을 수 있거나 다음 동작에 도달할 수 있는 것은 아닙니다.
중단점만 말하지 말고 문제를 설명하세요
의도적으로 가로 스크롤이 가능한 비교 표와 페이지 전체를 옆으로 밀어야 하는 문단은 다릅니다. 어느 영역이 넘치는지, 무엇이 불편해지는지, 어떤 콘텐츠로 재현되는지 설명하세요. 그러면 무조건 “넘침 숨기기”를 적용해 중요한 정보를 가리는 일을 막을 수 있습니다.
유용한 인수인계 내용은 다음과 같을 수 있습니다. “이 너비에서 조직의 전체 이름을 사용하면 계정 선택기가 저장 동작을 가립니다.” 다음 검토자는 이 상태를 재현하고 “모바일에서 이상함”이 무엇을 뜻하는지 추측하지 않고도 관계가 복구됐는지 확인할 수 있습니다.