적응형 디자인

폭이 하나였던 시절에는 확인할 것도 하나였습니다. 1024픽셀에 맞춰 그린 한 장이 맞으면 끝이었습니다. 휴대폰과 태블릿이 들어오면서 폭이 사실상 무한해졌고, 시안을 몇 장 그려야 하는지 정할 기준이 사라졌습니다.

처음 나온 답은 두 벌을 따로 만드는 것이었습니다. 휴대폰용 주소를 두고 화면을 통째로 다시 만들었습니다. 확인 대상은 둘로 분명해졌지만 기능 하나를 고칠 때마다 두 곳을 고쳐야 했고, 한쪽만 고친 채 배포되는 일이 반복됐습니다.

적응형 디자인은 그 사이를 택합니다. 무한히 대응하지도 두 벌을 두지도 않고, 구간을 셋이나 넷으로 정해 그 구간마다 배치를 만듭니다. 대응 범위를 유한하게 만들어 시안 장수와 검수 대상을 함께 정하는 것이 이 방식의 값입니다.

지원할 구간을 정하는 일부터 시작합니다. 다섯 단계입니다.

1. 접속 기록에서 실제 화면 폭을 모읍니다. 360·768·1440픽셀 부근에 몰리는 경우가 흔하지만 제품마다 다릅니다. 기업 고객이 많으면 큰 폭에 몰리고 소비자용은 작은 폭이 절반을 넘습니다.
2. 구간을 셋에서 넷으로 끊습니다. 배치를 바꾸는 기준 폭을 브레이크포인트라 하고, 앞에서 본 분포의 봉우리 사이에 둡니다.
3. 구간마다 배치를 따로 그립니다. 같은 배치를 늘이고 줄이는 것이 아니라 다른 배치입니다. 3단이 1단이 되고 왼쪽 사이드바가 아래쪽 탭 바로 옮겨 갑니다.
4. 구간 사이의 폭에서 확인합니다. 구간 안에서는 고정 폭을 쓰니 420픽셀처럼 기준점 사이 폭에서는 양옆 여백이 크게 벌어집니다. 어색하면 고정 폭을 줄이거나 기준점을 옮깁니다.
5. 기기가 가리는 영역을 뺍니다. 노치나 홈 바에 가리지 않는 세이프 에어리어 안에 요소를 넣어야 작은 구간 배치가 잘리지 않습니다.

작은 화면을 먼저 그리는 모바일 퍼스트와는 함께 쓸 수 있습니다. 어느 구간을 먼저 그리느냐와 구간을 몇 개 둘지는 다른 결정입니다.

"적응형이면 시안 세 장으로 끝나요. 대신 태블릿 가로는 셋 중 하나에 끼워야 합니다."

확인 대상이 줄어드는 대신 끼워 맞추는 구간이 생긴다는 말입니다.

"420픽셀에서 양옆 여백이 너무 벌어져요."

기준점 사이 폭에서 고정 폭이 어색해졌다는 지적입니다.

"접속 기록에 1440이 60퍼센트예요. 거기 맞춘 배치를 먼저 만들죠."

분포를 근거로 어느 구간을 먼저 그릴지 정했다는 뜻입니다.

페이지덱 문서 편집 화면이 이 방식입니다. 현우가 폭 분포를 뽑아 왔고 민서가 360·768·1440 세 구간의 배치를 따로 그렸습니다. 태오가 구현한 뒤 420픽셀에서 여백이 벌어져, 작은 구간의 고정 폭을 늘려 덮었습니다.