모바일 퍼스트

화면 설계는 오랫동안 데스크톱부터 그렸습니다. 너비 1440 짜리 화면을 먼저 완성하고 휴대폰 크기로 줄였습니다. 줄이는 일은 빼는 일이라 모바일 작업은 매번 무엇을 뺄지 고르는 협상이 됐고, 그때 빠지는 것은 대개 정작 필요한 항목이었습니다.

페이지덱 초기에도 그랬습니다. 대시보드를 데스크톱으로 그려 둔 뒤 모바일 버전을 만들 때, 민서와 태오가 사흘 동안 무엇을 접을지 다퉜습니다. 접자고 한 항목이 다른 쪽에게는 그 화면을 만든 이유였기 때문입니다.

모바일 퍼스트는 순서를 뒤집습니다. 좁은 화면을 먼저 그리면 자리가 부족해 꼭 필요한 것만 남고, 넓은 화면은 그 위에 더하는 일이 됩니다.

가장 좁은 화면을 완성한 다음 넓혀 갑니다. 네 단계입니다.

1. 너비 360 을 기준 화면으로 잡습니다. 흔한 휴대폰 너비이고, 여기서 한 단으로 읽히면 더 넓은 화면에서도 읽힙니다.
2. 들어갈 항목을 적고 위에서부터 순서를 정합니다. 단이 하나뿐이라 배치 순서가 곧 우선순위가 됩니다. 자리가 없는 항목은 접어 두거나 다른 화면으로 옮깁니다.
3. 화면을 넓혀 가며 배치가 어색해지는 지점을 브레이크포인트로 잡습니다. 한 줄이 길어져 눈이 다음 줄 앞을 못 찾는 지점이 보통 그 자리입니다.
4. 넓어진 자리에 무엇을 더할지 정합니다. 2번에서 접은 항목을 펼치거나 한 단이던 영역을 두 단으로 나눕니다. 새 기능은 여기서 넣지 않습니다.

모바일 접속이 절반을 넘는 제품에서 효과가 큽니다. 페이지덱 문서 화면은 모바일 비중이 62퍼센트라 좁은 쪽이 기준입니다. 반대로 열이 스무 개인 표를 다루는 관리자 화면은 한 단으로 쌓을 방법이 없어, 적응형 디자인처럼 크기별 배치를 따로 만드는 편이 낫습니다. 맨 아래 버튼은 세이프 에어리어에 겹치지 않는지 함께 봅니다.

"이번 개편은 모바일 퍼스트로 갑니다. 360 먼저 보고 데스크톱은 그다음에요."

좁은 화면 시안을 먼저 리뷰하자는 제안입니다.

"데스크톱 시안만 와 있는데, 이거 모바일에 다 안 들어가요."

순서를 거꾸로 밟아서 뺄 항목을 고르는 일이 남았다는 뜻입니다.

"모바일 퍼스트라고 모바일만 챙기자는 말은 아니에요."

시작점을 정하는 말이지 두 화면의 비중을 정하는 말이 아니라는 지적입니다.

페이지덱 대시보드 개편에서 민서는 시안을 360 한 벌로만 올렸습니다. 지현이 아래로 밀려난 항목을 확인하고 세 번째 이하는 이번 개편에서 빼기로 정했습니다. 데스크톱 시안은 그 결정이 끝난 뒤에 나왔습니다.