왜 필요한가

필요한 기능이 모두 있어도 무엇부터 해야 할지 찾기 어려운 화면이 있습니다. 좁은 기기에서는 옆 영역이 본문을 누르고 조작 요소의 읽는 순서가 뒤섞입니다. 몇 열이 예쁜지 결정하기 전에 사용자가 끝내려는 작업을 기준으로 정보를 조직해야 합니다. 배치는 장식을 채우는 일이 아니라 행동의 순서를 만드는 일입니다.

어떻게 해결하는가

  1. 카탈로그 항목 두 개를 찾아 비교하는 것처럼 작업 하나를 고릅니다. 먼저 필요한 정보, 판단을 돕는 정보, 나중에 봐도 되는 정보를 나눕니다. 탐색·필터·결과·보충 설명에 서로 다른 역할을 줍니다. 모든 영역을 주요 행동처럼 강조하면 정작 시작할 곳이 없어집니다. 중요도는 실제 과업으로 결정합니다.
  2. 한 열의 읽는 순서를 먼저 그립니다. 페이지의 정체성과 목적, 조작부, 결과, 보충 내용 순으로 살펴봅니다. 실제 긴 제목, 번역된 라벨, 빈 결과를 넣습니다. 짧은 가짜 문구만으로는 공간 문제가 드러나지 않습니다. 콘텐츠가 늘어났을 때 무엇이 밀리고 무엇이 계속 보여야 하는지도 확인합니다.
  3. 동시에 보여야 도움이 될 때 열을 늘립니다. 넓은 화면에서는 긴 목록 옆에 필터를 둘 수 있습니다. 좁아지면 어느 영역도 답답해지기 전에 의미 있는 순서로 쌓습니다. 분기점은 남은 콘텐츠 공간을 따라야 하며 모든 휴대전화나 태블릿이 특정 너비라고 가정하지 않습니다. 시각적 순서와 키보드 순서도 맞춰 봅니다.
  4. 항목의 비교 방법에 맞춰 표현을 고릅니다. 반복되는 글 정보는 행으로, 비슷한 시각 자료는 정렬한 카드로 비교하기 좋습니다. 높이가 다른 이미지 모음은 불균일한 배치가 가능하지만 키보드 이동이 이해되어야 합니다. 같은 내용을 유지한 채 배치를 비교해야 장식이나 정보량 차이가 결론을 대신하지 않습니다.
  5. 실제 상태를 시험합니다. 불러오는 중, 검색 결과 없음, 오류, 긴 내용, 펼친 설명을 모두 봅니다. 키보드만으로 조작부를 찾고 결과에 도달해 봅니다. 모달이 꼭 필요하다면 이름, 닫는 방법, 내부 포커스 이동, 닫은 뒤 돌아갈 위치를 정합니다. 기본 화면의 스크린샷만으로 이러한 동작을 확인할 수는 없습니다.

좁고 넓은 화면, 확대 상태, 지원 언어마다 과업 전체를 따라갑니다. 사용자가 시작점을 찾고 다음 결과를 예상하며 아무것도 나오지 않았을 때 회복할 수 있나요? 그 답으로 배치를 수정합니다. 화면 안에 요소가 들어왔다는 사실과 읽고 사용할 수 있다는 판단은 다릅니다. 공간이 부족하면 중요도가 낮은 정보를 재배치하되 필요한 기능을 설명 없이 없애지 않습니다.

헤더● ● ●
본문계속 →

무엇이라 부르는가

영역과 반복 콘텐츠의 위치·읽는 순서를 정하는 것이 레이아웃입니다. CSS Grid는 구현 도구 중 하나이며 계획 자체는 아닙니다. 모달 동작은 WAI 패턴을 참고합니다. 열·목록·그리드는 과업을 도와야 하며 콘텐츠나 화면 크기가 바뀌어도 각 선택의 장단점을 확인할 수 있어야 합니다.