반응형 디자인

한동안 휴대폰용 사이트를 따로 만들었습니다. 주소도 화면도 따로였고, 같은 내용을 두 군데서 관리해야 했습니다.

페이지덱에서도 그랬습니다. 현우가 요금제 문구 한 줄을 고쳐 달라고 요청했는데 컴퓨터용만 바뀌고 휴대폰용은 2주 동안 옛 문구를 내보냈습니다. 태블릿이 끼어들고 휴대폰 화면이 계속 커지자 몇 벌을 만들어야 하는지 끝이 없어졌습니다.

반응형 디자인은 기기마다 한 벌씩 만드는 일을 그만두고, 배치를 크기에 따라 늘어나고 줄어드는 규칙으로 적습니다. 고칠 곳이 한 군데가 되니 어긋날 자리도 없어집니다.

크기를 고정된 값이 아니라 비율로 적는 것에서 시작합니다.

1. 너비를 비율로 바꿉니다. 카드 너비를 400으로 적지 않고 전체의 3분의 1로 적습니다. 창을 조금 줄이면 카드도 조금 줄어들어 남는 자리나 잘리는 자리가 생기지 않습니다.
2. 브레이크포인트를 정합니다. 화면 너비가 어느 값을 넘을 때 배치를 바꿀지 정한 기준점입니다. 특정 기기 크기가 아니라 창을 줄여 가며 배치가 답답해지는 지점에서 잡습니다.
3. 구간마다 단 수를 정합니다. 768 아래는 한 단, 그 위는 두 단, 1024 위는 세 단처럼 적습니다. 구간 안에서는 요소만 늘어나고 줄어들며, 단 수는 구간을 넘을 때 바뀝니다.
4. 이미지와 표도 함께 손봅니다. 그림은 제 칸을 넘지 않게 최대 너비를 정하고, 옆으로 긴 표는 그 표만 따로 밀어 보게 만듭니다.
5. 실제 기기에서 봅니다. 컴퓨터에서 창을 줄이는 것과 휴대폰으로 보는 것은 다릅니다. 손가락으로 누를 자리가 충분한지, 화면 곡면에 내용이 걸리지 않는지는 세이프 에어리어에서 확인합니다.

"이거 반응형으로 갈까요, 아니면 모바일은 나중에 볼까요?"

한 벌로 모든 크기를 덮을지 지금은 한 크기만 만들지 묻는 말입니다.

"1024에서 세 단인데 900쯤에서 카드가 너무 좁아져요. 기준점을 하나 더 넣죠."

구간 안에서 요소가 줄어들다가 읽기 어려워졌다는 뜻입니다.

"시안이 두 장뿐이에요. 그 사이 크기에서는 어떻게 되는 거죠?"

기준점 사이 구간의 모습이 정해지지 않았다는 지적입니다.

페이지덱 시안은 세 장으로 옵니다. 민서가 360, 768, 1440을 그리고 그 사이 구간에서 무엇이 늘어나고 무엇이 고정인지를 표로 적습니다. 태오가 자주 되묻는 것이 그 표입니다. 표가 없으면 500이나 1100에서 어떻게 보일지를 만드는 사람이 정하고, 그 결과가 검수에서 다시 올라옵니다.