애드온HOSPITAL MARKETING
메뉴
홈페이지·사용성

안내 이미지의 글자가 휴대전화에서 묻히지 않는지 확인하는 방법

컴퓨터에서 선명한 안내 이미지도 휴대전화에서는 글자가 묻힐 수 있습니다. 축소 확인, 배치 조정, 본문 병기까지 대비 점검 순서를 정리했습니다.

애드온 편집팀

화면이 바뀌면 이미지의 읽힘도 달라집니다

안내용 이미지는 컴퓨터 모니터에서 선명해 보여도 휴대전화로 열면 전혀 다른 인상을 줄 수 있습니다. 화면 밝기가 낮거나 야외에서 보는 경우, 또는 화면이 작아져 이미지가 축소되는 경우에 글자가 배경에 묻혀 보이기 때문입니다. 디자인이 아무리 보기 좋아도 날짜와 장소, 버튼처럼 행동에 필요한 문구가 읽히지 않으면 이미지의 목적을 이루기 어렵습니다.

이 글에서는 이미지를 고르거나 확인할 때 분위기보다 먼저 살펴봐야 할 읽힘의 기준과 점검 순서를 정리합니다.

작게 줄여서 모바일 화면으로 봅니다

가장 쉬운 첫 점검은 이미지를 실제로 쓰일 크기보다 작게 줄여 휴대전화 화면에서 보는 것입니다. 밝은 사진 위에 흰 글씨를 얹은 경우 글자의 일부가 사라지지 않는지, 어두워지도록 넣은 그라데이션이 이미지 중간 영역에서만 효과를 내는 것은 아닌지 확인합니다.

화면 비율이 바뀌면 사진 배경이 잘리는 위치도 달라집니다. 컴퓨터에서는 어두운 영역에 있던 문구가 모바일에서는 밝은 물체 위로 옮겨 갈 수 있습니다. 그래서 여러 가지 자르기 비율에서 한 번씩 확인해 보는 것이 안전합니다.

읽기 어려울 때 고치는 방향

핵심 문구가 읽기 어렵다고 해서 글자에 그림자를 무작정 더하는 것은 좋은 해결책이 아닌 경우가 많습니다. 글자가 놓이는 곳에 단색 배경 영역을 만들거나, 사진과 글자의 배치 자체를 조정하는 편이 더 깔끔하게 읽힙니다.

버튼 이미지는 배경과 충분히 구분되어야 하고, 실제로 누르는 영역이 분명해야 합니다. 또한 색깔만으로 ‘가능’과 ‘불가’를 구분하지 않고 글자나 기호를 함께 써서 상태를 설명합니다. 색을 구별하기 어려운 사람도 같은 정보를 얻을 수 있어야 하기 때문입니다.

점검할 때 함께 보면 좋은 조건

같은 이미지라도 어두운 모드를 켠 기기, 밝기를 낮춘 야간 화면, 햇빛이 강한 환경에서는 다르게 보입니다. 모든 조건을 시험하기 어렵다면 가장 불리한 두 가지, 예를 들어 밝기가 낮은 작은 화면과 햇빛 아래의 화면만이라도 확인해 봅니다. 글자 크기는 본문 글자보다 작아지지 않도록 하고, 가늘고 장식이 많은 글꼴은 축소했을 때 읽기 어려우므로 핵심 문구에는 쓰지 않는 편이 좋습니다.

눈으로 보는 점검은 출발점입니다

눈으로 확인하는 점검은 빠르고 유용하지만 그것만으로는 충분하지 않습니다. 중요한 글자와 배경의 대비는 측정 도구로 수치를 확인할 수 있고, 확대한 화면과 다른 기기에서도 표본으로 살펴보는 것이 좋습니다.

이미지 안에만 날짜나 조건을 넣어 두면 화면을 소리로 읽어 주는 도구를 쓰는 사람은 내용을 놓칠 수 있습니다. 따라서 핵심 정보는 본문 텍스트에도 함께 적습니다. 이미지에 붙이는 대체 텍스트에는 이미지를 꾸미는 표현보다 전달해야 할 내용을 적는 것이 맞습니다.

한 번 만든 이미지를 다른 용도로 재사용할 때도 같은 점검을 다시 합니다. 가로형으로 만든 이미지를 정사각형이나 세로형에 맞춰 자르면 글자가 가장자리에 걸려 잘리는 일이 흔하기 때문입니다. 용도별로 별도 규격을 두는 편이 안전합니다.

시점이 있는 이미지는 사실 변경까지 함께 관리합니다

행사나 운영 일정처럼 기간이 있는 이미지라면 디자인 수정과 내용 변경을 하나의 작업으로 묶어 관리합니다. 일정이 바뀌어 본문은 고쳤는데 이미지 속에 예전 날짜가 남아 있다면, 대비가 아무리 좋아도 잘못된 안내가 됩니다.

이미지 파일의 버전과 적용된 페이지를 기록해 두고, 목록의 작은 썸네일과 상세 화면에서 모두 현재 정보로 보이는지 확인합니다. 교체한 뒤에는 이전 이미지가 캐시 때문에 계속 보이지 않는지도 열어 봅니다.

처음 보는 사람에게 짧게 보여 주는 테스트

가장 현실적인 검증은 이미지를 처음 보는 사람에게 몇 초만 보여 주고 핵심 날짜와 해야 할 행동을 말해 달라고 하는 것입니다. 답하지 못한다면 글자가 보이는지뿐 아니라 정보의 순서와 대비를 함께 고쳐야 한다는 신호입니다.

점검 결과는 간단한 표로 남겨 다음 이미지를 만들 때 참고합니다. 가독성 점검은 미적 평가라기보다 이용자가 중요한 정보를 놓치지 않는지 살피는 작업에 가깝습니다. 구체적인 기준과 도구는 사이트의 디자인과 운영 환경에 따라 다를 수 있으므로, 담당자와 함께 점검 목록을 만들어 정기적으로 적용하시기 바랍니다.

추가 정보

같은 카테고리 글 보기 · 전체 글 보기

CONSULTATION

어떤 정보를, 어디에 전할지
함께 정리해보세요.

병원의 현재 운영 채널과 필요한 작업을 알려주세요.
원고·이미지·홈페이지 중 필요한 업무 범위부터 확인합니다.

이메일로 문의하기 카카오 오픈채팅