제목은 의미 단위로 줄바꿈되어야 합니다
모바일에서 가장 먼저 깨지는 요소는 큰 제목입니다. 한글 제목이 한 글자씩 떨어지거나 문장의 핵심이 이상한 위치에서 끊기면 첫인상이 바로 낮아집니다.
제목은 가능한 짧게 쓰고, 필요한 경우 줄 단위를 직접 나누는 것이 좋습니다. CSS에서는 `word-break: keep-all`을 사용해 한글 단어가 어색하게 깨지는 것을 줄일 수 있습니다.
카드는 작아질수록 정보량을 줄입니다
데스크톱 카드에 들어간 라벨, 제목, 설명, 이미지, 버튼을 그대로 모바일에 넣으면 화면이 답답해집니다. 작은 화면에서는 카드 안에서 가장 중요한 정보만 먼저 보여야 합니다.
설명문은 두세 줄 안에서 끝내고, 버튼은 충분히 누르기 쉬운 높이를 확보합니다. 카드 사이 간격도 너무 좁으면 각 정보가 분리되어 보이지 않습니다.
이미지는 크롭 위치가 중요합니다
와이드 이미지를 모바일에 넣으면 양옆이 잘리기 쉽습니다. 핵심 오브젝트가 가운데 있는지, 텍스트와 겹치지 않는지, 어두운 오버레이가 과하지 않은지 확인해야 합니다.
이미지가 본문을 설명하는 자료라면 너무 장식적으로 숨기지 말고, alt 텍스트와 캡션으로 맥락을 보완하는 편이 좋습니다.
터치 영역은 디자인보다 사용성을 우선합니다
모바일 버튼과 링크는 손가락으로 누르는 요소입니다. 너무 작은 아이콘, 붙어 있는 링크, 좁은 체크박스는 사용자를 불편하게 만듭니다.
버튼은 충분한 높이와 여백을 두고, 체크박스와 라벨은 함께 눌릴 수 있게 구성하는 것이 좋습니다. 디자인 완성도는 실제 사용 가능한 화면에서 완성됩니다.
모바일 QA 예시: 390px 화면에서 카드 읽기
데스크톱에서 보기 좋은 카드가 모바일에서 갑자기 답답해지는 경우가 많습니다. 모바일 검수는 단순 축소가 아니라 줄바꿈, 터치 영역, 문단 길이를 다시 설계하는 과정입니다.
작은 화면에서는 장식보다 읽는 순서가 중요합니다. 제목이 세 줄 이상으로 밀리거나 버튼이 너무 아래로 내려가면 정보 탐색 속도가 떨어집니다.
390px 기준 검수표
| 제목 | 의미 없는 한 글자 줄바꿈이 생기지 않는지 확인합니다. |
|---|---|
| 카드 | 카드 안쪽 여백이 너무 좁아 글이 가장자리에 붙지 않게 합니다. |
| 버튼 | 손가락으로 누를 수 있는 높이와 주변 여백을 확보합니다. |
| 목록 | 세 개 이상의 항목은 한 화면에 너무 많이 밀어 넣지 않습니다. |
수정 기록 예시
“모바일 대응”이라고만 쓰기보다 “카드 제목을 두 줄 안에서 읽히게 줄이고, 버튼을 하단 고정이 아니라 내용 뒤에 배치했다”처럼 구체적으로 남깁니다.
- 가로 스크롤이 생기지 않는가?
- 버튼과 링크 사이 간격이 충분한가?
- 본문 한 문단이 모바일에서 지나치게 길지 않은가?
- 이미지나 표가 화면 밖으로 밀리지 않는가?
작성자 검수 메모
모바일 가독성은 반응형 코드만의 문제가 아닙니다. 정보량을 줄이고 문장을 나누는 편집 판단까지 함께 들어가야 실제로 읽히는 화면이 됩니다.
이 글은 모바일 화면에서 글, 카드, 버튼, 목록이 자연스럽게 읽히도록 점검하는 기준을 정리했습니다.
현장 적용 노트
모바일 검수는 화면을 줄이는 일이 아니라 읽는 단위를 다시 나누는 일입니다. 데스크톱에서 한 문단으로 괜찮았던 설명도 모바일에서는 두 문단으로 나눠야 자연스럽게 읽힐 수 있습니다.
카드형 UI에서는 안쪽 여백과 버튼 주변 여백을 따로 봐야 합니다. 글은 잘 보여도 버튼이 너무 가까우면 사용자는 실수로 다른 링크를 누를 수 있고, 이는 사용성 신뢰를 떨어뜨립니다.
포트폴리오 기록 포인트
포트폴리오에는 모바일 전후 화면을 함께 넣으면 좋습니다. 줄바꿈, 카드 간격, 버튼 높이를 어떻게 조정했는지 보여주면 반응형 작업의 판단 기준이 분명해집니다.
실기기에서 확인할 모바일 가독성
브라우저 크기 조절만으로는 모바일 가독성을 충분히 확인하기 어렵습니다. 실제 기기에서는 손가락이 가리는 영역, 주소창이 줄어드는 순간, 밝은 야외에서의 대비가 함께 영향을 줍니다. 카드 안의 문장이 두 줄을 넘을 때 버튼과 겹치지 않는지, 목록을 빠르게 내릴 때 제목만으로 차이를 구분할 수 있는지도 봐야 합니다.
- 버튼 주변에는 손가락이 닿을 여백을 남깁니다.
- 카드 제목은 첫 줄만 읽어도 주제가 드러나게 씁니다.
- 흐린 회색 본문은 밝은 화면에서 다시 대비를 확인합니다.
스크롤 중에도 구분되는 카드 만들기
모바일 사용자는 글을 처음부터 끝까지 천천히 읽기보다 스크롤하면서 필요한 정보를 찾는 경우가 많습니다. 그래서 카드 제목, 카테고리 라벨, 날짜, 핵심 문장이 서로 다른 역할로 보여야 합니다. 모든 텍스트가 비슷한 크기와 굵기이면 목록은 빠르게 지루해집니다.
검수할 때는 화면을 빠르게 내려보며 제목만 남겨도 글의 차이가 보이는지 확인합니다. 카드 사이 여백이 너무 좁으면 하나의 덩어리처럼 보이고, 너무 넓으면 목록의 연속성이 끊어집니다.
터치 영역과 읽기 영역 분리하기
모바일 화면에서는 읽는 영역과 누르는 영역이 가까워지기 쉽습니다. 링크가 본문 사이에 너무 붙어 있거나 버튼이 카드 끝에 몰리면 실수로 누를 가능성이 커집니다. 터치 영역은 시각적으로도 충분히 분리되어야 하고, 버튼 주변에는 다른 링크를 가까이 두지 않는 편이 좋습니다.