적응형과 반응형 (2) 좁아지면 무엇부터 빼나

휴대폰으로 쇼핑몰에 들어가면 화면 맨 위에 로고 하나와 줄 세 개짜리 버튼이 있다. 같은 쇼핑몰을 노트북에서 열면 같은 곳에 메뉴가 일곱 개 늘어서 있다.

메뉴 일곱 개가 어디로 갔는지는 화면에 안 적혀 있다. 누군가 접기로 정했다. 로고는 접지 않고 남기기로도 정했다.

화면을 미리 그려 놓은 그림을 시안이라 한다. 우리 시안에서 화면이 어디서 갈리는지 답을 받았다면, 갈리는 곳마다 무엇을 접을지 정하는 일이 붙는다.

화면이 좁아지면 무엇이 먼저 없어지고 무엇이 끝까지 남을지는 디자이너가 정해야 한다. 안 정하면 개발자가 그 자리에서 정한다. 좁은 화면에서는 무언가가 이미 접혀 있고, 접기와 내리기는 내용을 남기고 지우기는 안 남기며, 그 차례는 한 줄이면 적어 넘긴다.

좁은 화면에 다 넣을 수는 없고, 무엇을 뺄지는 사람이 정했다

노트북에서 쇼핑몰 맨 윗줄에 무엇이 있는지부터 센다. 로고 하나, 메뉴 일곱, 검색창 하나, 장바구니 하나, 로그인 하나. 열한 개다. 이 열한 개를 휴대폰 한 줄에 다 늘어놓을 수는 없다.

그래서 열 개가 접히고 로고 하나만 남았다. 줄 세 개짜리 버튼은 접으면서 새로 세운 것이다.

나눠 보면 왜 못 넣는지가 바로 나온다. 휴대폰 화면 가로를 320픽셀이라 치면, 열한 개에 30픽셀씩도 안 돌아간다. 30이면 한글 두 자다. 재 본 값이 아니라 나눠 본 값이지만, 두 자에 들어가는 메뉴 이름은 없다.

좁은 화면에는 군더더기를 놓을 데가 없어서 순위를 매길 수밖에 없다고 2009년에 적어 둔 사람이 있다.Luke Wroblewski, Mobile First, lukew.com, 2009년 11월 3일. 원문은 Mobile devices require software development teams to focus on only the most important data and actions in an application. There simply isn’t room in a 320 by 480 pixel screen for extraneous, unnecessary elements. You have to prioritize. 원문이 든 화면 크기는 320 by 480인데, 2009년 글에 나온 숫자라 지금 화면 규격이 아니다. 2026년 7월에 원문을 열어 세 문장을 확인했다. 실험으로 밝힌 결과가 아니라 한 사람이 낸 주장이다.

그러니 좁은 화면을 만들려면 줄여야 한다. 무엇을 줄일지는 사람이 고른다. 안 고르면 고른 게 없어지는 게 아니라, 아무도 모르게 골라진다.

그런데 접기와 지우기는 같지 않다.

좁힐 때 쓸 길은 접기와 내리기고, 지운 문단은 검색 색인에 안 들어간다

줄 세 개짜리 버튼을 눌러 보면 접힌 열 개가 그대로 나온다. 접기는 이렇게 감춰만 두고 내용은 건드리지 않는다. 감춰 두는 쪽과 지워 없애는 쪽은 남는 것이 다르다.

노트북에서는 상품 사진 오른쪽에 배송 안내가 붙어 있다. 휴대폰에서는 그 안내가 사진 아래로 내려간다. 없어진 게 아니라 놓인 데만 바뀐다.

그런데 좁아지면 안 그리고 넘어가는 화면도 있다. 노트북에서 상품 설명 아래 있던 리뷰 요약이 휴대폰에는 아예 없다. 누를 버튼도 없다.

지우면 사람만 못 보는 게 아니다. 구글은 휴대폰 쪽 페이지에 실린 글로 그 페이지 내용을 판단한다. 그러니 지운 문단은 구글이 만드는 색인에 안 들어간다. 버튼 뒤에 접힌 열 개가 그렇듯, 접어 둔 문단은 화면에 안 보여도 페이지에는 실려 있다.

구글은 지우지 말고 접어 두라고 직접 적어 뒀다.Google Search Central, Mobile site and mobile-first indexing best practices. 원문은 Make sure that your mobile site contains the same content as your desktop site이고, 이어서 You can have a different design on mobile to maximize user experience (for example, moving content into accordions or tabs); just make sure that the content is equivalent to the desktop site, since indexing on your site comes from the mobile site라고 적는다. 지우지 말라는 대목은 Instead of removing content, consider moving content into accordions or tabs to save space다. 2026년 7월에 원문을 열어 세 문장을 확인했다.

그러니 내용이 남는 길은 접기와 내리기 두 가지다. 접기는 공간을 아끼고, 내리기는 놓인 데만 바꾼다. 지우기는 셋째 길이 아니라 예외다.

그러면 무엇을 먼저 접고 무엇을 끝까지 남길지는 어디에 적나.

카드 한 장에 든 여섯 조각에 디자이너가 번호를 매기면, 그 밖에 넘길 것이 없다

쇼핑몰 맨 윗줄 아래에는 상품이 죽 늘어서 있고, 상품 하나가 담긴 네모를 카드라 한다. 카드 한 장을 열면 맨 위 썸네일 사진, 제목, 날짜, 요약 두 줄, 분류 태그, 저장 버튼이 들어 있다. 세어 보면 여섯 개다. 좁아지면 이 여섯 조각을 어떤 차례로 접을지 번호를 매기면, 넘길 것을 그 번호로 다 적은 셈이다.

실제로 번호를 매겨 본다. 1번은 끝까지 남기고, 접는 차례는 거꾸로 6번부터다. 1번 제목, 2번 썸네일, 3번 저장 버튼, 4번 날짜, 5번 태그, 6번 요약.

이건 표준이 아니라 내가 이 카드에 매긴 번호다. 사진 보고 사는 물건이면 썸네일이 1번이다.

왜 이 번호를 디자이너가 정하나. 제목이 태그보다 중요하다는 말은 화면 어디에도 안 적혀 있다. 화면을 그리는 브라우저에도 그 차례는 안 들어 있고, 개발자도 모른다.

안 적어 넘기면 개발자가 대신 정한다. 그때 무엇이 더 중요한지 물어볼 사람을 부르지 않는다.

적을 때는 화면 가로가 얼마일 때 접느냐가 아니라 무엇이 안 들어가면 접느냐로 적는다. 제목이 두 줄로 넘어가는 순간 요약부터 접는다고 해 두면, 같은 카드를 좁은 데 다시 써도 그대로 통한다. 화면 가로가 600픽셀일 때 요약을 접는다고 하면, 그 숫자는 지금 이 화면에서만 맞는다.

다 적으면 한 줄이다. 좁아지면 요약, 태그, 날짜, 저장 버튼을 차례로 접고, 제목과 썸네일은 끝까지 남긴다. 접는 대신 아래로 내리기로 했다면 내리는 차례도 이 번호를 따른다. 지운다는 말은 여기 안 들어간다.

조각이 두세 개뿐인 화면이면 접는 차례가 뻔해서 매길 번호도 없다. 아이디와 비밀번호를 넣을 줄 둘에 누를 버튼 하나뿐인 로그인 화면이 그렇다. 그런 화면은 시안 한 장으로 끝난다.

정리: 빼는 차례는 디자이너가 정해 넘긴다

좁게 만들려면 무언가를 빼야 한다. 열한 개가 휴대폰 맨 윗줄에 안 들어가 열 개가 접혔다. 접거나 아래로 내리면 내용이 남고, 지우면 색인에서도 빠진다. 카드 여섯 조각은 번호를 매겨 한 줄로 넘긴다.

여섯 조각짜리 카드면 번호는 한 번 앉아서 다 매긴다. 다음에 좁은 시안을 그릴 때는 카드 한 장을 먼저 열어 조각을 세고, 번호 한 줄을 붙여 넘겨라.

넘긴 뒤에는 번호대로 나왔는지 개발자가 만든 화면을 열어 본다.