UX/UI
반응형 화면은 맞는데, 실제 콘텐츠를 넣으면 왜 깨질까?
반응형 화면은 맞는데, 실제 콘텐츠를 넣으면 왜 깨질까?
짧은 제목으로 완성한 화면이 실제 콘텐츠를 넣으면 깨지는 이유를 살펴봅니다. 긴 문장과 글자 확대, 모바일 읽기 순서까지 고려해 운영 중에도 유지되는 반응형 화면을 설계하는 기준을 정리했습니다.
짧은 제목으로 완성한 화면이 실제 콘텐츠를 넣으면 깨지는 이유를 살펴봅니다. 긴 문장과 글자 확대, 모바일 읽기 순서까지 고려해 운영 중에도 유지되는 반응형 화면을 설계하는 기준을 정리했습니다.
화면 너비만 맞췄다고 반응형 작업이 끝나지는 않습니다
데스크톱에서는 제목이 두 줄, 모바일에서는 세 줄입니다. 버튼도 화면 안에 들어오고 가로 스크롤도 없습니다. 이 정도면 반응형 작업을 마쳤다고 생각하기 쉽습니다. 그런데 운영자가 제목을 바꾸자 카드 아래쪽이 잘립니다. 안내 문구를 한 줄 추가했더니 버튼이 다음 영역을 덮습니다. 화면 너비는 그대로인데 결과가 달라졌습니다.
원인은 콘텐츠가 들어갈 자리를 너무 일찍 확정했기 때문일 수 있습니다. 디자인할 때 쓴 짧은 제목과 한 줄짜리 설명이 사실상 화면의 규격이 된 셈입니다. 사진 비율이나 기기별 배치는 정했어도 내용이 늘어날 때 어디까지 커져야 하는지는 정하지 않은 것입니다.
반응형 설계에는 화면 크기뿐 아니라 콘텐츠가 달라질 때의 동작도 포함됩니다. 같은 모바일에서도 사용자가 글자를 키울 수 있고 운영자는 예상보다 긴 상품명을 등록할 수 있습니다. 처음 준비한 샘플이 잘 보인다는 사실만으로 이런 조건까지 확인했다고 보기는 어렵습니다.
이 글에서는 가상의 전시 예약 서비스를 예로 들어보겠습니다. 처음에는 ‘주말 전시’라는 제목으로 카드를 만들었습니다. 실제 등록할 제목은 ‘도시의 오래된 물건을 새롭게 읽는 주말 전시’입니다. 설명과 예매 버튼까지 들어가야 하니 카드가 감당할 내용이 꽤 달라집니다. 문제를 해결하려면 글자를 무작정 줄이기 전에, 어떤 정보가 반드시 보여야 하는지부터 정해야 합니다.
긴 제목을 줄일지, 카드가 늘어나게 할지 먼저 결정합니다
모든 텍스트를 끝까지 보여줄 필요는 없습니다
전시 목록에서 사용자가 하는 일은 여러 항목을 훑어보고 관심 있는 전시를 고르는 것입니다. 상세 페이지의 설명을 목록에 전부 옮길 필요는 없습니다. 반면 제목이 비슷한 두 전시를 구분하는 단어가 뒤쪽에 있다면 제목을 잘랐을 때 선택 자체가 어려워집니다.
예를 들어 ‘도시의 오래된 물건’이라는 공통 제목 뒤에 ‘어린이 체험’과 ‘성인 해설’이 붙는다고 가정해보겠습니다. 둘 다 앞부분만 보이면 서로 다른 프로그램이라는 사실을 놓칠 수 있습니다. 제목을 두 줄로 제한한다는 규칙보다, 차이를 알아볼 수 있게 한다는 목적이 먼저입니다. 목록에 대상 배지를 따로 보여주거나 핵심 구분어를 제목 앞쪽으로 옮길 수도 있습니다.
잘림 처리는 공간을 아끼는 결정인 동시에, 어떤 정보를 늦게 보여줄지 고르는 결정입니다. 전문을 확인할 방법이 있다고 해서 어떤 문장이나 잘라도 되는 것은 아닙니다. 마감 여부, 취소 조건, 금액처럼 행동에 영향을 주는 정보는 특히 조심해야 합니다.
콘텐츠 | 먼저 정할 기준 | 가능한 처리 |
|---|---|---|
전시 제목 | 목록에서 항목을 구분할 수 있는가 | 줄바꿈을 허용하고 필요하면 구조를 변경 |
소개 문장 | 상세에서 읽어도 선택에 문제가 없는가 | 요약문을 별도로 작성 |
예매 버튼 | 행동의 의미가 온전히 보이는가 | 버튼 높이가 내용에 맞게 증가 |
환불 안내 | 생략해도 오해가 없는가 | 전체 노출하거나 명확한 상세 안내 제공 |
위 표는 이 서비스에 적용할 수 있는 판단 예시입니다. 같은 제목이라도 검색 결과와 결제 확인 화면에서는 역할이 다르므로 처리 방식도 달라질 수 있습니다.
높이를 맞추는 일과 내용을 담는 일을 구분합니다
카드 높이를 일정하게 만들면 목록이 정돈돼 보입니다. 문제는 고정 높이를 유지하려고 중요한 글자를 숨기거나 폰트를 계속 줄일 때 생깁니다. 카드의 사진 영역은 일정한 비율로 두고 텍스트 영역은 내용에 따라 커지도록 나누면 두 목적을 함께 다룰 여지가 생깁니다.
이때 카드가 길어질 때 버튼이 어디에 놓일지도 정해야 합니다. 버튼을 카드 하단에 맞추고 싶다면 제목과 설명이 쓸 공간을 충분히 확보해야 합니다. 버튼을 절대 위치로 덮어놓는 방식으로 정렬만 맞추면 긴 설명이 버튼 뒤로 들어갈 수 있습니다. 정렬 결과가 아니라 내용이 늘어나는 상황에서 두 영역이 서로를 밀어내는지 확인해야 합니다.
운영 규칙도 필요합니다. ‘제목은 짧게 써주세요’라고만 전달하면 사람마다 기준이 달라집니다. 목록용 제목과 상세 제목을 나눌지, 설명은 별도 요약문을 쓸지 정하고 실제 예문을 함께 남기는 편이 구체적입니다. 글자 수 제한을 두더라도 한글과 영문, 숫자의 폭이 다르므로 제한값 하나가 줄 수를 보장하지는 않습니다.
글자가 커져도 읽고 누를 수 있어야 합니다
확대는 작은 화면 테스트와 같은 검사가 아닙니다
모바일에서 화면이 잘 보이더라도 글자를 키우면 다른 문제가 나올 수 있습니다. 텍스트는 커지는데 컨테이너 높이가 그대로라면 두 번째 줄이 잘립니다. 버튼 이름이 줄바꿈하면서 옆 버튼과 겹칠 수도 있습니다. 기본 글자 크기에서만 확인하면 발견하기 어려운 문제입니다.
W3C의 WCAG 2.2 이해 문서는 텍스트를 200%까지 확대했을 때 내용이나 기능을 잃지 않도록 하는 기준을 설명합니다. 별도의 리플로 기준은 일반적인 세로 스크롤 콘텐츠가 320 CSS 픽셀에 해당하는 너비에서도 정보와 기능을 유지하며 읽히는지를 다룹니다. 브라우저 확대가 좁은 레이아웃을 작동시킬 수는 있지만 두 기준은 구분해서 확인해야 합니다. 텍스트 확대 기준, 리플로 기준
이 숫자는 모바일 디자인을 전부 같은 폭으로 만들라는 뜻이 아닙니다. 사용자가 내용을 크게 보려 할 때 읽거나 조작할 수 없게 되는 부분이 있는지 살펴볼 근거입니다. 특정 너비에서 캡처 한 장을 확인했다고 웹사이트 전체가 해당 기준을 충족한다고 말할 수도 없습니다.
“줄이 하나 늘어나면, 아래 내용이 내려가나요? 아니면 그 자리에 가려지나요?”
전시 카드에 이 질문을 적용해보면 수정할 지점이 보입니다. 제목이 늘어나면 설명이 내려가고 설명이 늘어나면 버튼도 내려갑니다. 버튼 안의 글자가 두 줄이 되면 버튼 높이도 늘어납니다. 카드가 차지하는 공간은 달라지지만 내용의 순서는 유지됩니다. 이 관계를 먼저 만들고 나서 기기별 간격과 크기를 다듬는 편이 판단하기 쉽습니다.
가로 공간을 줄일 때 읽는 순서까지 보존합니다
데스크톱의 두 열을 모바일에서 한 열로 바꾸는 작업에도 순서가 있습니다. 왼쪽에 전시 소개, 오른쪽에 일정과 예매 버튼을 둔 화면을 생각해보겠습니다. 모바일에서 두 영역을 차례로 쌓으면 긴 소개를 다 읽은 뒤에야 날짜를 찾게 될 수 있습니다. 사용자에게 필요한 판단 순서가 ‘전시명 → 날짜 → 요약 → 예매’라면 그 순서에 맞게 내용을 다시 묶어야 합니다.
시각적으로 위쪽에 보인다는 것과 실제 읽기 순서가 같다는 것도 별개입니다. 키보드로 이동하거나 보조 기술로 읽을 때의 순서가 화면과 어긋나지 않는지 확인할 필요가 있습니다. 화면에서 버튼만 위로 옮기고 문서 안에서는 맨 뒤에 남겨두면 사용 방식에 따라 다른 흐름을 만날 수 있습니다.
긴 URL이나 공백 없는 식별값은 또 다른 조건입니다. 문장처럼 자연스럽게 줄바꿈되지 않을 수 있으므로 실제 데이터를 넣어봐야 합니다. URL은 의미 있는 링크 이름으로 보여줄 수 있지만 복사해야 하는 예약번호를 중간에서 숨기면 업무가 어려워집니다. 값의 역할에 따라 줄바꿈이나 복사 기능을 정해야 합니다.
표나 지도처럼 두 방향의 배치가 의미를 갖는 콘텐츠는 예외가 있을 수 있습니다. W3C도 리플로 설명에서 이런 경우를 구분합니다. 다만 카드 제목이나 일반 안내 문장이 길다는 이유만으로 같은 예외를 적용할 수는 없습니다. 페이지 전체를 가로로 밀어야 하는 상태와 필요한 표 영역만 이동하는 상태를 나눠 살펴보세요.
운영에 들어갈 콘텐츠로 확인하고 규칙을 남깁니다
반응형 검토를 시작할 때 모든 기기를 한꺼번에 준비할 필요는 없습니다. 먼저 콘텐츠가 화면을 흔드는 조건을 모으면 됩니다. 짧고 예쁜 샘플을 더 만드는 것보다 실제로 등록할 긴 제목 하나가 문제를 잘 드러낼 수 있습니다.
운영 자료에서 샘플을 고릅니다. 긴 제목, 여러 줄 설명, 이미지 없는 항목, 긴 식별값을 모읍니다. 아직 자료가 없다면 가상 샘플임을 표시하고 운영 담당자와 현실적인 범위를 합의합니다.
각 정보의 노출 원칙을 정합니다. 전문이 필요한지, 목록용 요약이 가능한지, 생략한다면 어디에서 확인하는지 적습니다.
너비와 글자 확대를 나눠 확인합니다. 대표 데스크톱·태블릿·모바일 폭뿐 아니라 그 사이 너비도 살펴봅니다. 텍스트 확대에서 잘림과 겹침이 생기는지도 따로 확인합니다.
수정한 화면에서 실제 행동을 해봅니다. 제목을 읽고 날짜를 찾고 예매 버튼으로 이동합니다. 키보드 이동과 포커스 표시도 확인합니다.
운영자가 다시 쓸 수 있게 기록합니다. 제목·요약 작성 예시와 이미지 비율, 예외 처리 방식을 CMS 입력 가이드에 남깁니다.
검토가 끝났을 때 ‘모바일 확인 완료’라는 한 줄만 남으면 다음 콘텐츠에서 같은 문제가 반복될 수 있습니다. 어떤 샘플과 조건에서 확인했는지 남겨야 바뀐 부분을 다시 살펴볼 수 있습니다. 이미지 중심 카드와 텍스트 중심 카드는 서로 다른 조건을 갖는다는 점도 함께 기록해두면 좋습니다.
실제 내용이 들어와도 선택하고 행동할 수 있는 화면이 목표입니다. 조금 길어진 카드가 나쁜 결과인 것은 아닙니다. 필요한 정보를 지우지 않으면서 목록을 읽기 쉽게 만들었다면 충분히 검토할 가치가 있는 선택입니다.
4PS는 웹사이트와 서비스 화면을 설계할 때 운영할 콘텐츠와 입력 규칙을 함께 살펴봅니다. 시안은 정돈돼 있는데 게시물을 올릴 때마다 화면을 고쳐야 한다면 현재 사용 중인 제목과 설명 몇 개를 보내주세요. 화면 구조를 바꿀 부분과 콘텐츠 작성 규칙으로 풀 부분부터 함께 정리하겠습니다.
Latest Blogs
UX/UI
반응형 화면은 맞는데, 실제 콘텐츠를 넣으면 왜 깨질까?
반응형 화면은 맞는데, 실제 콘텐츠를 넣으면 왜 깨질까?
짧은 제목으로 완성한 화면이 실제 콘텐츠를 넣으면 깨지는 이유를 살펴봅니다. 긴 문장과 글자 확대, 모바일 읽기 순서까지 고려해 운영 중에도 유지되는 반응형 화면을 설계하는 기준을 정리했습니다.
짧은 제목으로 완성한 화면이 실제 콘텐츠를 넣으면 깨지는 이유를 살펴봅니다. 긴 문장과 글자 확대, 모바일 읽기 순서까지 고려해 운영 중에도 유지되는 반응형 화면을 설계하는 기준을 정리했습니다.
화면 너비만 맞췄다고 반응형 작업이 끝나지는 않습니다
데스크톱에서는 제목이 두 줄, 모바일에서는 세 줄입니다. 버튼도 화면 안에 들어오고 가로 스크롤도 없습니다. 이 정도면 반응형 작업을 마쳤다고 생각하기 쉽습니다. 그런데 운영자가 제목을 바꾸자 카드 아래쪽이 잘립니다. 안내 문구를 한 줄 추가했더니 버튼이 다음 영역을 덮습니다. 화면 너비는 그대로인데 결과가 달라졌습니다.
원인은 콘텐츠가 들어갈 자리를 너무 일찍 확정했기 때문일 수 있습니다. 디자인할 때 쓴 짧은 제목과 한 줄짜리 설명이 사실상 화면의 규격이 된 셈입니다. 사진 비율이나 기기별 배치는 정했어도 내용이 늘어날 때 어디까지 커져야 하는지는 정하지 않은 것입니다.
반응형 설계에는 화면 크기뿐 아니라 콘텐츠가 달라질 때의 동작도 포함됩니다. 같은 모바일에서도 사용자가 글자를 키울 수 있고 운영자는 예상보다 긴 상품명을 등록할 수 있습니다. 처음 준비한 샘플이 잘 보인다는 사실만으로 이런 조건까지 확인했다고 보기는 어렵습니다.
이 글에서는 가상의 전시 예약 서비스를 예로 들어보겠습니다. 처음에는 ‘주말 전시’라는 제목으로 카드를 만들었습니다. 실제 등록할 제목은 ‘도시의 오래된 물건을 새롭게 읽는 주말 전시’입니다. 설명과 예매 버튼까지 들어가야 하니 카드가 감당할 내용이 꽤 달라집니다. 문제를 해결하려면 글자를 무작정 줄이기 전에, 어떤 정보가 반드시 보여야 하는지부터 정해야 합니다.
긴 제목을 줄일지, 카드가 늘어나게 할지 먼저 결정합니다
모든 텍스트를 끝까지 보여줄 필요는 없습니다
전시 목록에서 사용자가 하는 일은 여러 항목을 훑어보고 관심 있는 전시를 고르는 것입니다. 상세 페이지의 설명을 목록에 전부 옮길 필요는 없습니다. 반면 제목이 비슷한 두 전시를 구분하는 단어가 뒤쪽에 있다면 제목을 잘랐을 때 선택 자체가 어려워집니다.
예를 들어 ‘도시의 오래된 물건’이라는 공통 제목 뒤에 ‘어린이 체험’과 ‘성인 해설’이 붙는다고 가정해보겠습니다. 둘 다 앞부분만 보이면 서로 다른 프로그램이라는 사실을 놓칠 수 있습니다. 제목을 두 줄로 제한한다는 규칙보다, 차이를 알아볼 수 있게 한다는 목적이 먼저입니다. 목록에 대상 배지를 따로 보여주거나 핵심 구분어를 제목 앞쪽으로 옮길 수도 있습니다.
잘림 처리는 공간을 아끼는 결정인 동시에, 어떤 정보를 늦게 보여줄지 고르는 결정입니다. 전문을 확인할 방법이 있다고 해서 어떤 문장이나 잘라도 되는 것은 아닙니다. 마감 여부, 취소 조건, 금액처럼 행동에 영향을 주는 정보는 특히 조심해야 합니다.
콘텐츠 | 먼저 정할 기준 | 가능한 처리 |
|---|---|---|
전시 제목 | 목록에서 항목을 구분할 수 있는가 | 줄바꿈을 허용하고 필요하면 구조를 변경 |
소개 문장 | 상세에서 읽어도 선택에 문제가 없는가 | 요약문을 별도로 작성 |
예매 버튼 | 행동의 의미가 온전히 보이는가 | 버튼 높이가 내용에 맞게 증가 |
환불 안내 | 생략해도 오해가 없는가 | 전체 노출하거나 명확한 상세 안내 제공 |
위 표는 이 서비스에 적용할 수 있는 판단 예시입니다. 같은 제목이라도 검색 결과와 결제 확인 화면에서는 역할이 다르므로 처리 방식도 달라질 수 있습니다.
높이를 맞추는 일과 내용을 담는 일을 구분합니다
카드 높이를 일정하게 만들면 목록이 정돈돼 보입니다. 문제는 고정 높이를 유지하려고 중요한 글자를 숨기거나 폰트를 계속 줄일 때 생깁니다. 카드의 사진 영역은 일정한 비율로 두고 텍스트 영역은 내용에 따라 커지도록 나누면 두 목적을 함께 다룰 여지가 생깁니다.
이때 카드가 길어질 때 버튼이 어디에 놓일지도 정해야 합니다. 버튼을 카드 하단에 맞추고 싶다면 제목과 설명이 쓸 공간을 충분히 확보해야 합니다. 버튼을 절대 위치로 덮어놓는 방식으로 정렬만 맞추면 긴 설명이 버튼 뒤로 들어갈 수 있습니다. 정렬 결과가 아니라 내용이 늘어나는 상황에서 두 영역이 서로를 밀어내는지 확인해야 합니다.
운영 규칙도 필요합니다. ‘제목은 짧게 써주세요’라고만 전달하면 사람마다 기준이 달라집니다. 목록용 제목과 상세 제목을 나눌지, 설명은 별도 요약문을 쓸지 정하고 실제 예문을 함께 남기는 편이 구체적입니다. 글자 수 제한을 두더라도 한글과 영문, 숫자의 폭이 다르므로 제한값 하나가 줄 수를 보장하지는 않습니다.
글자가 커져도 읽고 누를 수 있어야 합니다
확대는 작은 화면 테스트와 같은 검사가 아닙니다
모바일에서 화면이 잘 보이더라도 글자를 키우면 다른 문제가 나올 수 있습니다. 텍스트는 커지는데 컨테이너 높이가 그대로라면 두 번째 줄이 잘립니다. 버튼 이름이 줄바꿈하면서 옆 버튼과 겹칠 수도 있습니다. 기본 글자 크기에서만 확인하면 발견하기 어려운 문제입니다.
W3C의 WCAG 2.2 이해 문서는 텍스트를 200%까지 확대했을 때 내용이나 기능을 잃지 않도록 하는 기준을 설명합니다. 별도의 리플로 기준은 일반적인 세로 스크롤 콘텐츠가 320 CSS 픽셀에 해당하는 너비에서도 정보와 기능을 유지하며 읽히는지를 다룹니다. 브라우저 확대가 좁은 레이아웃을 작동시킬 수는 있지만 두 기준은 구분해서 확인해야 합니다. 텍스트 확대 기준, 리플로 기준
이 숫자는 모바일 디자인을 전부 같은 폭으로 만들라는 뜻이 아닙니다. 사용자가 내용을 크게 보려 할 때 읽거나 조작할 수 없게 되는 부분이 있는지 살펴볼 근거입니다. 특정 너비에서 캡처 한 장을 확인했다고 웹사이트 전체가 해당 기준을 충족한다고 말할 수도 없습니다.
“줄이 하나 늘어나면, 아래 내용이 내려가나요? 아니면 그 자리에 가려지나요?”
전시 카드에 이 질문을 적용해보면 수정할 지점이 보입니다. 제목이 늘어나면 설명이 내려가고 설명이 늘어나면 버튼도 내려갑니다. 버튼 안의 글자가 두 줄이 되면 버튼 높이도 늘어납니다. 카드가 차지하는 공간은 달라지지만 내용의 순서는 유지됩니다. 이 관계를 먼저 만들고 나서 기기별 간격과 크기를 다듬는 편이 판단하기 쉽습니다.
가로 공간을 줄일 때 읽는 순서까지 보존합니다
데스크톱의 두 열을 모바일에서 한 열로 바꾸는 작업에도 순서가 있습니다. 왼쪽에 전시 소개, 오른쪽에 일정과 예매 버튼을 둔 화면을 생각해보겠습니다. 모바일에서 두 영역을 차례로 쌓으면 긴 소개를 다 읽은 뒤에야 날짜를 찾게 될 수 있습니다. 사용자에게 필요한 판단 순서가 ‘전시명 → 날짜 → 요약 → 예매’라면 그 순서에 맞게 내용을 다시 묶어야 합니다.
시각적으로 위쪽에 보인다는 것과 실제 읽기 순서가 같다는 것도 별개입니다. 키보드로 이동하거나 보조 기술로 읽을 때의 순서가 화면과 어긋나지 않는지 확인할 필요가 있습니다. 화면에서 버튼만 위로 옮기고 문서 안에서는 맨 뒤에 남겨두면 사용 방식에 따라 다른 흐름을 만날 수 있습니다.
긴 URL이나 공백 없는 식별값은 또 다른 조건입니다. 문장처럼 자연스럽게 줄바꿈되지 않을 수 있으므로 실제 데이터를 넣어봐야 합니다. URL은 의미 있는 링크 이름으로 보여줄 수 있지만 복사해야 하는 예약번호를 중간에서 숨기면 업무가 어려워집니다. 값의 역할에 따라 줄바꿈이나 복사 기능을 정해야 합니다.
표나 지도처럼 두 방향의 배치가 의미를 갖는 콘텐츠는 예외가 있을 수 있습니다. W3C도 리플로 설명에서 이런 경우를 구분합니다. 다만 카드 제목이나 일반 안내 문장이 길다는 이유만으로 같은 예외를 적용할 수는 없습니다. 페이지 전체를 가로로 밀어야 하는 상태와 필요한 표 영역만 이동하는 상태를 나눠 살펴보세요.
운영에 들어갈 콘텐츠로 확인하고 규칙을 남깁니다
반응형 검토를 시작할 때 모든 기기를 한꺼번에 준비할 필요는 없습니다. 먼저 콘텐츠가 화면을 흔드는 조건을 모으면 됩니다. 짧고 예쁜 샘플을 더 만드는 것보다 실제로 등록할 긴 제목 하나가 문제를 잘 드러낼 수 있습니다.
운영 자료에서 샘플을 고릅니다. 긴 제목, 여러 줄 설명, 이미지 없는 항목, 긴 식별값을 모읍니다. 아직 자료가 없다면 가상 샘플임을 표시하고 운영 담당자와 현실적인 범위를 합의합니다.
각 정보의 노출 원칙을 정합니다. 전문이 필요한지, 목록용 요약이 가능한지, 생략한다면 어디에서 확인하는지 적습니다.
너비와 글자 확대를 나눠 확인합니다. 대표 데스크톱·태블릿·모바일 폭뿐 아니라 그 사이 너비도 살펴봅니다. 텍스트 확대에서 잘림과 겹침이 생기는지도 따로 확인합니다.
수정한 화면에서 실제 행동을 해봅니다. 제목을 읽고 날짜를 찾고 예매 버튼으로 이동합니다. 키보드 이동과 포커스 표시도 확인합니다.
운영자가 다시 쓸 수 있게 기록합니다. 제목·요약 작성 예시와 이미지 비율, 예외 처리 방식을 CMS 입력 가이드에 남깁니다.
검토가 끝났을 때 ‘모바일 확인 완료’라는 한 줄만 남으면 다음 콘텐츠에서 같은 문제가 반복될 수 있습니다. 어떤 샘플과 조건에서 확인했는지 남겨야 바뀐 부분을 다시 살펴볼 수 있습니다. 이미지 중심 카드와 텍스트 중심 카드는 서로 다른 조건을 갖는다는 점도 함께 기록해두면 좋습니다.
실제 내용이 들어와도 선택하고 행동할 수 있는 화면이 목표입니다. 조금 길어진 카드가 나쁜 결과인 것은 아닙니다. 필요한 정보를 지우지 않으면서 목록을 읽기 쉽게 만들었다면 충분히 검토할 가치가 있는 선택입니다.
4PS는 웹사이트와 서비스 화면을 설계할 때 운영할 콘텐츠와 입력 규칙을 함께 살펴봅니다. 시안은 정돈돼 있는데 게시물을 올릴 때마다 화면을 고쳐야 한다면 현재 사용 중인 제목과 설명 몇 개를 보내주세요. 화면 구조를 바꿀 부분과 콘텐츠 작성 규칙으로 풀 부분부터 함께 정리하겠습니다.
Latest Blogs
UX/UI
반응형 화면은 맞는데, 실제 콘텐츠를 넣으면 왜 깨질까?
반응형 화면은 맞는데, 실제 콘텐츠를 넣으면 왜 깨질까?
짧은 제목으로 완성한 화면이 실제 콘텐츠를 넣으면 깨지는 이유를 살펴봅니다. 긴 문장과 글자 확대, 모바일 읽기 순서까지 고려해 운영 중에도 유지되는 반응형 화면을 설계하는 기준을 정리했습니다.
짧은 제목으로 완성한 화면이 실제 콘텐츠를 넣으면 깨지는 이유를 살펴봅니다. 긴 문장과 글자 확대, 모바일 읽기 순서까지 고려해 운영 중에도 유지되는 반응형 화면을 설계하는 기준을 정리했습니다.
화면 너비만 맞췄다고 반응형 작업이 끝나지는 않습니다
데스크톱에서는 제목이 두 줄, 모바일에서는 세 줄입니다. 버튼도 화면 안에 들어오고 가로 스크롤도 없습니다. 이 정도면 반응형 작업을 마쳤다고 생각하기 쉽습니다. 그런데 운영자가 제목을 바꾸자 카드 아래쪽이 잘립니다. 안내 문구를 한 줄 추가했더니 버튼이 다음 영역을 덮습니다. 화면 너비는 그대로인데 결과가 달라졌습니다.
원인은 콘텐츠가 들어갈 자리를 너무 일찍 확정했기 때문일 수 있습니다. 디자인할 때 쓴 짧은 제목과 한 줄짜리 설명이 사실상 화면의 규격이 된 셈입니다. 사진 비율이나 기기별 배치는 정했어도 내용이 늘어날 때 어디까지 커져야 하는지는 정하지 않은 것입니다.
반응형 설계에는 화면 크기뿐 아니라 콘텐츠가 달라질 때의 동작도 포함됩니다. 같은 모바일에서도 사용자가 글자를 키울 수 있고 운영자는 예상보다 긴 상품명을 등록할 수 있습니다. 처음 준비한 샘플이 잘 보인다는 사실만으로 이런 조건까지 확인했다고 보기는 어렵습니다.
이 글에서는 가상의 전시 예약 서비스를 예로 들어보겠습니다. 처음에는 ‘주말 전시’라는 제목으로 카드를 만들었습니다. 실제 등록할 제목은 ‘도시의 오래된 물건을 새롭게 읽는 주말 전시’입니다. 설명과 예매 버튼까지 들어가야 하니 카드가 감당할 내용이 꽤 달라집니다. 문제를 해결하려면 글자를 무작정 줄이기 전에, 어떤 정보가 반드시 보여야 하는지부터 정해야 합니다.
긴 제목을 줄일지, 카드가 늘어나게 할지 먼저 결정합니다
모든 텍스트를 끝까지 보여줄 필요는 없습니다
전시 목록에서 사용자가 하는 일은 여러 항목을 훑어보고 관심 있는 전시를 고르는 것입니다. 상세 페이지의 설명을 목록에 전부 옮길 필요는 없습니다. 반면 제목이 비슷한 두 전시를 구분하는 단어가 뒤쪽에 있다면 제목을 잘랐을 때 선택 자체가 어려워집니다.
예를 들어 ‘도시의 오래된 물건’이라는 공통 제목 뒤에 ‘어린이 체험’과 ‘성인 해설’이 붙는다고 가정해보겠습니다. 둘 다 앞부분만 보이면 서로 다른 프로그램이라는 사실을 놓칠 수 있습니다. 제목을 두 줄로 제한한다는 규칙보다, 차이를 알아볼 수 있게 한다는 목적이 먼저입니다. 목록에 대상 배지를 따로 보여주거나 핵심 구분어를 제목 앞쪽으로 옮길 수도 있습니다.
잘림 처리는 공간을 아끼는 결정인 동시에, 어떤 정보를 늦게 보여줄지 고르는 결정입니다. 전문을 확인할 방법이 있다고 해서 어떤 문장이나 잘라도 되는 것은 아닙니다. 마감 여부, 취소 조건, 금액처럼 행동에 영향을 주는 정보는 특히 조심해야 합니다.
콘텐츠 | 먼저 정할 기준 | 가능한 처리 |
|---|---|---|
전시 제목 | 목록에서 항목을 구분할 수 있는가 | 줄바꿈을 허용하고 필요하면 구조를 변경 |
소개 문장 | 상세에서 읽어도 선택에 문제가 없는가 | 요약문을 별도로 작성 |
예매 버튼 | 행동의 의미가 온전히 보이는가 | 버튼 높이가 내용에 맞게 증가 |
환불 안내 | 생략해도 오해가 없는가 | 전체 노출하거나 명확한 상세 안내 제공 |
위 표는 이 서비스에 적용할 수 있는 판단 예시입니다. 같은 제목이라도 검색 결과와 결제 확인 화면에서는 역할이 다르므로 처리 방식도 달라질 수 있습니다.
높이를 맞추는 일과 내용을 담는 일을 구분합니다
카드 높이를 일정하게 만들면 목록이 정돈돼 보입니다. 문제는 고정 높이를 유지하려고 중요한 글자를 숨기거나 폰트를 계속 줄일 때 생깁니다. 카드의 사진 영역은 일정한 비율로 두고 텍스트 영역은 내용에 따라 커지도록 나누면 두 목적을 함께 다룰 여지가 생깁니다.
이때 카드가 길어질 때 버튼이 어디에 놓일지도 정해야 합니다. 버튼을 카드 하단에 맞추고 싶다면 제목과 설명이 쓸 공간을 충분히 확보해야 합니다. 버튼을 절대 위치로 덮어놓는 방식으로 정렬만 맞추면 긴 설명이 버튼 뒤로 들어갈 수 있습니다. 정렬 결과가 아니라 내용이 늘어나는 상황에서 두 영역이 서로를 밀어내는지 확인해야 합니다.
운영 규칙도 필요합니다. ‘제목은 짧게 써주세요’라고만 전달하면 사람마다 기준이 달라집니다. 목록용 제목과 상세 제목을 나눌지, 설명은 별도 요약문을 쓸지 정하고 실제 예문을 함께 남기는 편이 구체적입니다. 글자 수 제한을 두더라도 한글과 영문, 숫자의 폭이 다르므로 제한값 하나가 줄 수를 보장하지는 않습니다.
글자가 커져도 읽고 누를 수 있어야 합니다
확대는 작은 화면 테스트와 같은 검사가 아닙니다
모바일에서 화면이 잘 보이더라도 글자를 키우면 다른 문제가 나올 수 있습니다. 텍스트는 커지는데 컨테이너 높이가 그대로라면 두 번째 줄이 잘립니다. 버튼 이름이 줄바꿈하면서 옆 버튼과 겹칠 수도 있습니다. 기본 글자 크기에서만 확인하면 발견하기 어려운 문제입니다.
W3C의 WCAG 2.2 이해 문서는 텍스트를 200%까지 확대했을 때 내용이나 기능을 잃지 않도록 하는 기준을 설명합니다. 별도의 리플로 기준은 일반적인 세로 스크롤 콘텐츠가 320 CSS 픽셀에 해당하는 너비에서도 정보와 기능을 유지하며 읽히는지를 다룹니다. 브라우저 확대가 좁은 레이아웃을 작동시킬 수는 있지만 두 기준은 구분해서 확인해야 합니다. 텍스트 확대 기준, 리플로 기준
이 숫자는 모바일 디자인을 전부 같은 폭으로 만들라는 뜻이 아닙니다. 사용자가 내용을 크게 보려 할 때 읽거나 조작할 수 없게 되는 부분이 있는지 살펴볼 근거입니다. 특정 너비에서 캡처 한 장을 확인했다고 웹사이트 전체가 해당 기준을 충족한다고 말할 수도 없습니다.
“줄이 하나 늘어나면, 아래 내용이 내려가나요? 아니면 그 자리에 가려지나요?”
전시 카드에 이 질문을 적용해보면 수정할 지점이 보입니다. 제목이 늘어나면 설명이 내려가고 설명이 늘어나면 버튼도 내려갑니다. 버튼 안의 글자가 두 줄이 되면 버튼 높이도 늘어납니다. 카드가 차지하는 공간은 달라지지만 내용의 순서는 유지됩니다. 이 관계를 먼저 만들고 나서 기기별 간격과 크기를 다듬는 편이 판단하기 쉽습니다.
가로 공간을 줄일 때 읽는 순서까지 보존합니다
데스크톱의 두 열을 모바일에서 한 열로 바꾸는 작업에도 순서가 있습니다. 왼쪽에 전시 소개, 오른쪽에 일정과 예매 버튼을 둔 화면을 생각해보겠습니다. 모바일에서 두 영역을 차례로 쌓으면 긴 소개를 다 읽은 뒤에야 날짜를 찾게 될 수 있습니다. 사용자에게 필요한 판단 순서가 ‘전시명 → 날짜 → 요약 → 예매’라면 그 순서에 맞게 내용을 다시 묶어야 합니다.
시각적으로 위쪽에 보인다는 것과 실제 읽기 순서가 같다는 것도 별개입니다. 키보드로 이동하거나 보조 기술로 읽을 때의 순서가 화면과 어긋나지 않는지 확인할 필요가 있습니다. 화면에서 버튼만 위로 옮기고 문서 안에서는 맨 뒤에 남겨두면 사용 방식에 따라 다른 흐름을 만날 수 있습니다.
긴 URL이나 공백 없는 식별값은 또 다른 조건입니다. 문장처럼 자연스럽게 줄바꿈되지 않을 수 있으므로 실제 데이터를 넣어봐야 합니다. URL은 의미 있는 링크 이름으로 보여줄 수 있지만 복사해야 하는 예약번호를 중간에서 숨기면 업무가 어려워집니다. 값의 역할에 따라 줄바꿈이나 복사 기능을 정해야 합니다.
표나 지도처럼 두 방향의 배치가 의미를 갖는 콘텐츠는 예외가 있을 수 있습니다. W3C도 리플로 설명에서 이런 경우를 구분합니다. 다만 카드 제목이나 일반 안내 문장이 길다는 이유만으로 같은 예외를 적용할 수는 없습니다. 페이지 전체를 가로로 밀어야 하는 상태와 필요한 표 영역만 이동하는 상태를 나눠 살펴보세요.
운영에 들어갈 콘텐츠로 확인하고 규칙을 남깁니다
반응형 검토를 시작할 때 모든 기기를 한꺼번에 준비할 필요는 없습니다. 먼저 콘텐츠가 화면을 흔드는 조건을 모으면 됩니다. 짧고 예쁜 샘플을 더 만드는 것보다 실제로 등록할 긴 제목 하나가 문제를 잘 드러낼 수 있습니다.
운영 자료에서 샘플을 고릅니다. 긴 제목, 여러 줄 설명, 이미지 없는 항목, 긴 식별값을 모읍니다. 아직 자료가 없다면 가상 샘플임을 표시하고 운영 담당자와 현실적인 범위를 합의합니다.
각 정보의 노출 원칙을 정합니다. 전문이 필요한지, 목록용 요약이 가능한지, 생략한다면 어디에서 확인하는지 적습니다.
너비와 글자 확대를 나눠 확인합니다. 대표 데스크톱·태블릿·모바일 폭뿐 아니라 그 사이 너비도 살펴봅니다. 텍스트 확대에서 잘림과 겹침이 생기는지도 따로 확인합니다.
수정한 화면에서 실제 행동을 해봅니다. 제목을 읽고 날짜를 찾고 예매 버튼으로 이동합니다. 키보드 이동과 포커스 표시도 확인합니다.
운영자가 다시 쓸 수 있게 기록합니다. 제목·요약 작성 예시와 이미지 비율, 예외 처리 방식을 CMS 입력 가이드에 남깁니다.
검토가 끝났을 때 ‘모바일 확인 완료’라는 한 줄만 남으면 다음 콘텐츠에서 같은 문제가 반복될 수 있습니다. 어떤 샘플과 조건에서 확인했는지 남겨야 바뀐 부분을 다시 살펴볼 수 있습니다. 이미지 중심 카드와 텍스트 중심 카드는 서로 다른 조건을 갖는다는 점도 함께 기록해두면 좋습니다.
실제 내용이 들어와도 선택하고 행동할 수 있는 화면이 목표입니다. 조금 길어진 카드가 나쁜 결과인 것은 아닙니다. 필요한 정보를 지우지 않으면서 목록을 읽기 쉽게 만들었다면 충분히 검토할 가치가 있는 선택입니다.
4PS는 웹사이트와 서비스 화면을 설계할 때 운영할 콘텐츠와 입력 규칙을 함께 살펴봅니다. 시안은 정돈돼 있는데 게시물을 올릴 때마다 화면을 고쳐야 한다면 현재 사용 중인 제목과 설명 몇 개를 보내주세요. 화면 구조를 바꿀 부분과 콘텐츠 작성 규칙으로 풀 부분부터 함께 정리하겠습니다.