어보브 더 폴드

말 자체는 신문에서 왔습니다. 신문을 반으로 접어 가판대에 쌓아 두면 위쪽 절반만 보이고, 그 면에 무엇을 싣느냐가 판매를 갈랐습니다. 화면에서도 같은 일이 벌어집니다.

페이지덱의 소개 페이지가 그랬습니다. 제품을 설명하는 문장 셋과 화면 사진을 위에 놓고 가입 버튼은 그 아래에 두었습니다. 방문자 기록을 보니 페이지를 연 사람의 38퍼센트가 한 번도 스크롤하지 않고 나갔습니다. 그 38퍼센트에게 가입 버튼은 없는 것과 같았습니다. 버튼을 사진 옆으로 올린 뒤 같은 달의 가입 전환이 눈에 띄게 올랐고, 바뀐 것은 문구도 디자인도 아니라 그 요소가 접힌 선 위에 있느냐 아래에 있느냐였습니다.

이 영역의 경계는 고정된 숫자가 아니라 보는 사람의 화면 크기가 정합니다. 그래서 하나의 선이 아니라 여러 개의 선으로 다룹니다.

1. 기기마다 선이 다릅니다. 노트북에서는 세로 780픽셀쯤에서 잘리고 휴대폰에서는 640픽셀쯤에서 잘립니다. 어느 한 값을 기준으로 삼는 대신 방문자가 가장 많이 쓰는 기기 두셋을 골라 각각에서 확인합니다.
2. 이 영역이 전달할 것은 둘입니다. 여기가 무엇을 하는 곳인지, 그리고 다음에 무엇을 하면 되는지입니다. 셋째를 넣으려 하면 글자가 작아지고 여백이 사라지면서 앞의 둘도 흐려집니다.
3. 아래가 잘려 보이게 둡니다. 다음 내용의 윗부분이 화면 끝에 걸쳐 있으면 사람들은 더 있다는 것을 알고 내립니다. 한 화면이 딱 맞게 끝나면 거기서 페이지가 끝난 줄 압니다.
4. 좁은 화면에서는 그리드 시스템의 단이 접히면서 요소가 세로로 쌓입니다. 화면 크기에 따라 배치를 바꾸는 반응형 디자인을 적용한 페이지에서 특히 자주 생기는 일이고, 넓은 화면에서 사진 옆에 있던 버튼이 휴대폰에서는 사진 아래로 내려가 접힌 선 밖으로 나갑니다.

"가입 버튼이 폴드 아래로 내려갔어요. 사진 높이를 줄입시다."

핵심 행동 버튼이 첫 화면 밖으로 밀려났다는 지적입니다.

"노트북에서는 보이는데 휴대폰에서는 안 보입니다."

접히는 선이 기기마다 달라 한쪽에서만 확인한 결과라는 뜻입니다.

"폴드 위에 다 넣으려니까 글자가 11픽셀이 됐네요."

한 화면에 욕심을 내다 읽을 수 없는 화면이 됐다는 말입니다.

현우와 민서가 랜딩 페이지를 고칠 때 쓴 방법은 단순했습니다. 휴대폰 화면 크기로 페이지를 열어 화면을 딱 한 번 찍고, 그 그림만 보고 여기가 무엇을 하는 곳인지 맞혀 보라고 팀 밖 사람 다섯에게 물었습니다. 다섯 중 둘이 문서 저장 서비스라고 답했습니다. 협업이라는 말이 첫 화면에 없었기 때문이고, 그 문장을 위로 올리는 것으로 고침이 끝났습니다.