브레이크포인트

화면을 한 가지 너비로 그리던 시절에는 기준점이 필요하지 않았습니다. 960픽셀에 맞춰 그리고 그대로 내보내면 됐습니다. 보는 기기가 여러 가지가 되면서 같은 화면이 어떤 창에서는 오른쪽이 잘리고 어떤 창에서는 좁게 몰렸습니다.

페이지덱 문서 목록이 그랬습니다. 카드를 세 장씩 늘어놓는 배치였는데, 창을 좁혀 보니 카드 하나가 110픽셀이 되고 제목이 세 줄로 접혔습니다.

브레이크포인트는 기기가 아니라 너비를 기준으로 삼는 방식입니다. 모든 너비를 따로 다루는 대신 경계 몇 개만 정하고, 그 사이에서는 같은 규칙이 늘고 줄게 둡니다.

화면 너비가 정해 둔 값을 지나는 순간 배치 규칙이 다음 단계로 바뀝니다. 정해 둘 것은 여섯 가지입니다.

1. 개수를 적게 유지합니다. 작은 화면·중간·큰 화면으로 셋에서 넷이면 충분합니다. 경계가 여덟 개면 확인할 조합도 여덟 벌입니다.
2. 값은 기기 이름이 아니라 내용이 깨지는 너비에서 정합니다. 카드 하나가 280픽셀은 되어야 제목이 한 줄에 들어간다면, 세 장을 나란히 못 놓게 되는 너비가 경계입니다.
3. 구간마다 무엇이 달라지는지 표로 적어 둡니다. 열 수, 메뉴가 펼쳐졌는지 접혔는지, 본문 글자 크기입니다.
4. 한 경계에서 한 가지만 바꿉니다. 같은 지점에서 열 수와 글자 크기와 메뉴를 동시에 바꾸면 무엇 때문에 깨졌는지 가려낼 수 없습니다.
5. 작은 화면부터 그리는 모바일 퍼스트 순서로 쓰면 경계마다 규칙이 더해지는 방향이 되어 읽기 쉽습니다.
6. 확인은 경계 양쪽에서 합니다. 640을 경계로 잡았으면 639와 641에서 각각 보며 한쪽에만 적용된 규칙이 없는지 봅니다.

이 기준점은 화면 크기에 따라 배치가 유연하게 늘어나는 반응형 디자인에서 쓰는 도구입니다. 정해진 몇 가지 크기마다 화면을 따로 만드는 적응형 디자인에서는 경계가 곧 별도 화면의 경계라서, 같은 말이어도 뒤에 붙는 작업량이 다릅니다.

"이 값은 기기 이름으로 잡은 거예요? 카드가 깨지는 너비로 다시 잡읍시다."

경계의 근거가 기기가 아니라 내용이어야 한다는 지적입니다.

"한 경계에서 열 수랑 글자 크기랑 메뉴를 다 바꾸면 어디서 깨졌는지 못 찾아요."

변화를 나눠 두라는 요청입니다.

"640에서 639로 1픽셀 줄여서도 확인해 주세요."

경계 자체가 검사 대상이라는 뜻입니다.

민서는 카드 최소 너비 280픽셀로 경계를 두 개 잡았습니다. 640픽셀 아래에서는 한 줄에 카드 하나, 640에서 1024 사이에서는 두 장, 그보다 넓으면 세 장입니다. 제목이 접히는 일은 사라졌고, 새 기기가 나와도 그 너비가 세 구간 중 어디에 들어가는지만 보면 됐습니다.