화면을 넓히기 전에 동시에 보여 줄 정보와 탐색 흐름을 정해 적응형 레이아웃을 설계하는 기준을 설명합니다. 이 주제를 이해할 때 첫 기준은 ‘목록과 상세’입니다. 휴대전화에서는 화면을 나누더라도 넓은 화면에서는 목록과 선택한 상세를 동시에 보여 주면 탐색 맥락을 유지할 수 있습니다.
이 글의 범위
실제 경험이나 측정 결과를 가정하지 않고, 공식 문서로 확인 가능한 개념과 적용 순서를 일반 가이드로 설명합니다. 제품 버전과 서비스 정책은 바뀔 수 있으므로 적용 전 연결된 공식 문서를 다시 확인하세요.
먼저 구분할 핵심
태블릿과 폴더블 대응은 픽셀을 늘리는 작업이 아니라 정보 사이의 관계를 다시 배치하는 작업입니다. ‘목록과 상세’에서 시작해 ‘주요 행동과 보조 정보’와의 경계를 정하면 구현할 범위와 실패했을 때 확인할 지점을 구분하기 쉬워집니다.
 |
| 태블릿과 폴더블 대응은 정보 구조부터 설계해야 한다 핵심 판단 흐름 설명용 개념도 |
그림 1. 태블릿과 폴더블 대응은 정보 구조부터 설계해야 한다의 핵심 판단 순서를 정리한 설명용 개념도입니다. 실제 서비스 화면, 운영 로그 또는 측정 결과가 아닙니다.
화면 폭보다 먼저 정할 정보 관계
목록과 상세
휴대전화에서는 화면을 나누더라도 넓은 화면에서는 목록과 선택한 상세를 동시에 보여 주면 탐색 맥락을 유지할 수 있습니다.
주요 행동과 보조 정보
폭이 넓다고 모든 버튼을 같은 비중으로 늘리지 않습니다. 핵심 행동은 안정된 위치에 두고 보조 정보만 추가 공간을 사용합니다.
창 크기 등급
특정 기기 이름보다 실제 사용 가능한 창 크기에 반응합니다. 폴더블의 접힘·펼침과 멀티 윈도우에서도 같은 규칙이 작동해야 합니다.
상태 보존
한 열과 두 열 레이아웃이 바뀔 때 선택 항목, 스크롤, 입력 중인 값을 잃지 않게 화면 상태와 레이아웃 상태를 분리합니다.
접근성과 터치
넓은 화면에서도 텍스트 줄 길이와 터치 목표가 무한히 커지지 않게 최대 폭과 간격을 정합니다.
적응형 화면을 설계하는 순서
- 사용자 작업을 목록·선택·상세·행동으로 나눕니다.
- 동시에 보이면 도움이 되는 정보 쌍을 정합니다.
- 창 크기 구간별 한 열·두 열·보조 패널 구조를 정의합니다.
- 회전, 분할 화면, 접힘 변화에서 상태 보존을 확인합니다.
- 대표 태블릿뿐 아니라 여러 창 폭을 자동 스크린샷 테스트로 검증합니다.
단순 확대에서 생기는 문제
- 휴대전화 컴포넌트 너비만 100%로 늘리기
- 기기 모델명으로 레이아웃을 분기하기
- 창 크기 변경 때 화면을 처음부터 다시 만들기
- 넓은 화면에 빈 공간이 보인다는 이유로 중요하지 않은 정보를 채우기
적용 전 마지막 점검
| 확인 항목 | 질문 |
|---|---|
| 첫 기준: 목록과 상세 | 변경 전에 전제와 목적을 확인했는가? |
| 분리 대상: 주요 행동과 보조 정보 | 다른 책임과 섞이지 않게 경계를 정했는가? |
| 피할 패턴: 휴대전화 컴포넌트 너비만 100%로 늘리기 | 본문에서 경고한 패턴이 남아 있지 않은가? |
| 오류와 복구 | 정상 경로뿐 아니라 실패와 되돌리기도 확인했는가? |
정리
태블릿과 폴더블 대응은 픽셀을 늘리는 작업이 아니라 정보 사이의 관계를 다시 배치하는 작업입니다. 창 크기와 작업 흐름을 기준으로 구조를 만들면 새로운 화면 크기가 생겨도 같은 원칙을 적용할 수 있습니다.
댓글 없음:
댓글 쓰기