동물병원 홈페이지 모바일 디자인, 글자·버튼은 어떻게 정할까?

동물병원 홈페이지 모바일 디자인에서 글자와 버튼은 예쁜 시안 한 장만 보고 정하기 어렵습니다. 실제 안내 문구를 넣고, 작은 화면에서 읽고 누르고 확대해도 필요한 내용을 놓치지 않는지 확인하는 것이 먼저입니다. 본문 글자 크기만 키우기보다 배경과의 대비, 버튼의 실제 터치 영역, 긴 문구의 줄바꿈을 함께 살펴야 합니다.

이 글은 홈페이지를 새로 만들거나 모바일 화면을 부분 수정하려는 원장과 운영 담당자를 위한 기준입니다. 제작 시안에서 합의할 항목과 수정 요청 예시를 다루며, 전체 접근성 인증이나 법률 검토를 대신하지 않습니다. 이미 안내를 읽고 조작하는 데 문제가 없다면 유행하는 디자인에 맞추려고 전면 리뉴얼할 필요는 없습니다.

첫 화면을 줄여 보는 대신, 해야 할 일을 정합니다

데스크톱 시안을 휴대전화 폭에 맞춰 축소하면 사진과 메뉴는 모두 들어가도 안내가 읽히지 않을 수 있습니다. 반대로 글자와 버튼을 전부 크게 만들면 첫 화면이 길어지고 필요한 정보가 뒤로 밀릴 수 있습니다. 두 경우 모두 크기 자체보다 보호자가 그 화면에서 무엇을 해야 하는지가 판단의 출발점입니다.

첫 방문 안내라면 진료시간과 접수 방법을 읽는 일, 오시는 길이라면 주소와 주차 위치를 확인하는 일을 먼저 정하세요. 각 화면에서 가장 중요한 행동을 한 문장으로 쓰면 줄여도 되는 장식과 남겨야 할 정보를 구별하기 쉽습니다. 사전 전화 확인이 필요한 진료라면 그 조건도 연락 버튼과 함께 읽혀야 합니다.

디자인을 고를 때는 ‘무엇이 보이는가’와 ‘무엇을 할 수 있는가’를 같이 봐야 합니다. 필요한 정보의 목록이 아직 없다면 먼저 동물병원 홈페이지 필수 정보를 정리하는 편이 좋습니다. 내용이 정해진 다음에야 어떤 문구를 크게 보여주고 어떤 설명을 이어 붙일지 결정할 수 있습니다.

시안에는 ‘진료 안내 문구가 들어갑니다’ 같은 임시 문장 대신 병원이 확인한 실제 문구를 넣어 달라고 요청하세요. ‘예약 안내’라는 짧은 글자와 ‘첫 방문은 전화로 접수 가능 여부를 확인해 주세요’라는 문장은 차지하는 공간이 다릅니다. 사진 아래 설명과 버튼 주변의 조건까지 넣은 화면을 봐야 긴 문구에서 생기는 문제를 일찍 발견할 수 있습니다.

글자는 크기와 색, 줄 길이를 함께 정합니다

본문이 작아 보이면 글자 크기뿐 아니라 글자와 배경의 밝기 차이도 확인해야 합니다. 옅은 회색 설명은 글자를 조금 키워도 읽기 어려울 수 있고, 사진 위의 흰 글자는 배경 사진이 바뀌는 위치마다 다르게 보입니다. 특히 접수 마감이나 준비물처럼 꼭 알아야 하는 조건을 장식용 글자처럼 흐리게 두지 않는 것이 좋습니다.

W3C의 글자 대비 설명은 WCAG의 일반 글자 대비 기준을 4.5:1 이상, 큰 글자는 3:1 이상으로 안내하며 예외도 구분합니다. 여기서 큰 글자는 단순히 본문보다 조금 크다는 뜻이 아니라 18pt 이상 또는 14pt 이상의 굵은 글자라는 정의를 따릅니다. 제작사에는 화면에서 사용하는 실제 글자색과 배경색 조합을 측정해 달라고 요청하세요.

브랜드 색을 지키는 일과 모든 글자를 그 색으로 쓰는 일은 다릅니다. 밝은 병원 색상은 넓은 배경이나 장식에 남기고 안내 글자는 더 어두운 계열로 조정할 수 있습니다. 사진 위에서는 글자 뒤에 단색 면을 두거나 설명을 사진 밖으로 옮기는 선택도 가능합니다. 색상을 바꿨다는 사실보다 최종 조합에서 안내를 읽을 수 있는지가 중요합니다.

본문 크기는 예를 들어 16~18 CSSpx 정도에서 실제 한글 문구를 넣고 비교해 볼 수 있습니다. 이는 이 글이 제안하는 시안 검토의 출발점이며, 모든 병원의 정답이나 W3C가 정한 일괄 최소 글자 크기가 아닙니다. 같은 크기도 글꼴의 굵기와 모양, 줄 간격과 화면 여백에 따라 다르게 보이므로 최종 휴대전화 화면으로 판단해야 합니다.

줄바꿈은 정보를 줄이는 방식으로 해결하지 마세요. ‘오후 접수 마감’과 시간, 주차 조건과 적용 대상을 읽는 흐름이 이어지도록 배치하면 내용을 덜어내지 않고도 이해를 도울 수 있습니다. 제목을 보기 좋게 끊으려고 줄바꿈을 고정했다면 더 좁은 화면과 긴 문구에서도 어색하지 않은지 다시 봅니다.

버튼은 보이는 아이콘보다 실제 누르는 영역을 봅니다

전화 아이콘이 작아도 주변의 넓은 영역을 눌러 작동한다면 실제 터치 영역은 아이콘보다 큽니다. 반대로 넓은 테두리 안에서도 글자 부분만 눌리는 버튼은 겉보기와 동작이 다를 수 있습니다. 원장이나 운영 담당자는 직접 눌러 보고, 제작사에는 실제 작동 영역을 표시한 화면을 요청하면 좋습니다.

W3C의 최소 타깃 크기 설명은 WCAG 2.2 AA에서 포인터 입력 영역의 24×24 CSSpx 기준을 설명합니다. 작은 대상 사이의 충분한 간격이나 문장 속 링크 등에는 예외가 있으므로 모든 링크를 같은 크기의 사각 버튼으로 만들라는 뜻은 아닙니다. 최소 기준에 맞았다는 판단과 손가락으로 편하게 누른다는 평가는 구별해야 합니다.

자주 쓰는 연락 버튼은 최소값에 맞추는 데서 검토를 끝내지 마세요. 예를 들어 주요 버튼 높이를 44 CSSpx 정도로 잡고 충분한 가로 여백과 버튼 사이 간격을 확보하는 안을 비교할 수 있습니다. 이 역시 실무 제안이며 44px이면 모든 기기와 모든 사람에게 편하다는 보장은 아닙니다. 화면을 직접 조작하며 옆 버튼을 잘못 누르지 않는지도 확인하세요.

전화와 길찾기, 외부 예약처럼 결과가 다른 버튼에는 그 행동을 알아볼 수 있는 문구를 붙이는 편이 좋습니다. 다만 ‘예약하기’라고 썼는데 다음 화면이 단순 문의 접수라면 크기를 잘 정해도 기대가 어긋납니다. 버튼의 문구와 연결 뒤의 절차는 병원의 실제 운영에 맞춰 함께 확인해야 합니다.

화면 아래 고정 버튼은 본문을 가리지 않는지도 살펴보세요. 마지막 안내를 읽으려는데 연락 영역이 덮고 있거나 문의 입력 중 키보드와 겹친다면 높이와 여백을 조정해야 합니다. 연락이 중요하다는 이유로 보호자가 읽을 조건까지 가려서는 안 됩니다.

AI로 생성한 개념 삽화입니다. 글자 확대와 버튼 여백을 상징하며 실제 시안의 크기·대비 측정 결과가 아닙니다.

확대해도 안내와 기능이 함께 남아야 합니다

평소 글자 크기에서 괜찮았던 화면도 확대하면 버튼 문구가 잘리거나 메뉴가 겹칠 수 있습니다. 휴대전화를 바꾸면 괜찮다는 답만으로 끝내지 말고, 어떤 화면 폭과 확대 조건에서 문제가 생기는지 기록하세요. 확대 기능을 막아서 원래 모양을 유지하는 해결은 글자를 크게 읽어야 하는 이용자의 필요를 없애지 못합니다.

W3C의 텍스트 크기 변경 설명은 자막과 문자 이미지 등의 예외를 제외하고 200%까지 글자를 확대해도 내용과 기능을 잃지 않아야 한다고 설명합니다. 휴대전화의 시스템 글자 설정과 브라우저의 확대 기능이 모든 환경에서 똑같이 동작하는 것은 아닙니다. 제작사와 확인한 브라우저·확대 방법을 기록하고, 문구가 잘리거나 조작이 막히는 곳을 구체적으로 전달하는 것이 좋습니다.

확대 검사는 글자가 커졌는지보다 커진 뒤에도 읽고 행동할 수 있는지를 봅니다. 진료시간의 마지막 줄이 사라지지 않는지, 버튼 안의 문구가 끝까지 보이는지, 메뉴를 열고 닫을 수 있는지 확인하세요. 필요한 설명을 이미지 안에만 넣었다면 글자만 따로 확대하거나 수정하기 어려우므로 실제 웹페이지 글자로 제공하는 방식을 먼저 검토합니다.

좁은 폭에 맞춰 내용이 다시 배치되는지도 별도로 확인해야 합니다. W3C의 재배치 설명은 세로로 읽는 콘텐츠에서 폭 320 CSSpx에 해당하는 조건에서도 내용과 기능을 잃지 않고 양방향 스크롤 없이 볼 수 있어야 한다고 설명합니다. 지도나 데이터 표처럼 의미상 두 방향 배치가 필요한 부분에는 예외가 있습니다. 이는 특정 휴대전화의 물리적 해상도를 뜻하거나 모든 표의 가로 이동을 금지한다는 말이 아닙니다.

표의 정보는 줄을 억지로 좁히기보다 모바일에서 항목별 카드로 보여주는 안도 비교할 수 있습니다. 가로 이동이 필요한 표라면 표가 더 이어진다는 사실과 항목 이름을 이해할 수 있어야 합니다. 일반 설명 문단까지 화면 밖으로 밀리는 문제와 표 자체의 이동은 구별해서 제작사에 전달하세요.

시안 한 장으로 기준을 합의하는 표

새 홈페이지라면 디자인을 확장하기 전에 첫 방문 안내처럼 중요한 화면 한 장을 골라 기준을 맞춰 보세요. 페이지마다 글자와 버튼을 따로 정하면 수정할 곳이 늘어나므로 공통으로 쓰는 본문·제목·버튼의 규칙을 함께 확인하는 편이 효율적입니다. 아래 표는 병원과 제작사가 합의할 내용을 적는 예시이며 완성된 접근성 검사표는 아닙니다.

합의할 기준에는 숫자와 실제 화면의 결과를 함께 남겨야 합니다. 본문 17px, 버튼 높이 44px처럼 값만 적어두면 긴 문구와 확대 상태에서의 결과가 빠질 수 있습니다. 반대로 ‘잘 보이게’라고만 쓰면 수정 후 무엇을 보고 끝낼지 정하기 어렵습니다. 크기·색·여백의 값은 제작사가 관리하고 병원은 핵심 안내가 읽히는 결과를 같이 확인하는 방식이 좋습니다.

모든 기기에서 모든 경우를 병원 담당자가 시험할 필요는 없습니다. 제작사의 기술 검사 범위와 병원에서 직접 확인할 대표 화면을 나눠 합의하세요. 이 글에서 다루지 않은 키보드 조작, 보조기술의 읽기 순서, 입력 오류 안내 등도 전체 접근성 검토에서는 별도로 필요합니다.

수정 요청은 위치와 기대 결과까지 씁니다

다음은 실제 고객 사례가 아닌 가상 수정 요청입니다. “모바일에서 글자를 키워주세요” 대신 “첫 방문 안내의 접수 조건이 사진 위에서 흐리게 보입니다. 안내를 사진 밖으로 옮기거나 배경을 조정하고, 대비 측정 결과와 휴대전화 화면을 함께 보여주세요”라고 요청할 수 있습니다. 어떤 정보를 읽기 어렵고 무엇이 달라져야 하는지가 드러나면 제작사도 수정 방향을 제안하기 쉽습니다.

버튼 문제도 같은 방식으로 적어 보세요. “오시는 길에서 전화와 길찾기가 붙어 있어 옆 버튼을 누르기 쉽습니다. 실제 터치 영역과 사이 간격을 확인하고, 긴 문구와 확대 상태에서도 두 행동이 구분되게 조정해 주세요”라는 요청이 가능합니다. 이용자의 개인정보나 실제 진료 기록이 담긴 화면을 첨부할 필요는 없습니다.

수정 전후를 같은 조건에서 비교해야 완료 여부를 판단할 수 있습니다. 주소와 화면 이름, 확인 날짜, 기기와 브라우저, 확대 방법을 적고 문제가 보이는 위치를 남기세요. 글자 크기를 바꾼 뒤 다른 안내가 잘렸다면 첫 문제만 해결된 것으로 끝내지 않고 함께 다시 확인합니다.

기존 홈페이지가 있다면 가장 중요한 안내 한 곳부터 부분 수정을 검토하세요. 공통 글자 스타일과 버튼을 바꾸는 것으로 해결되는지, 여러 페이지의 배치 구조까지 손봐야 하는지는 제작사가 실제 구조를 보고 판단해야 합니다. 부분 수정과 리뉴얼을 나누는 기준을 함께 보고 범위를 정하면 작은 문제를 전체 재제작으로 확대하지 않을 수 있습니다.

효과를 보려면 문의 건수와 화면 문제를 구별합니다

모바일 디자인을 수정한 뒤 문의가 늘어도 그 원인을 글자나 버튼 하나로 단정할 수는 없습니다. 같은 기간의 광고, 진료 일정, 유입 경로가 달라졌을 수 있고 방문 자체가 적으면 숫자 몇 건으로 비율이 크게 흔들립니다. 먼저 읽기와 조작의 문제가 해결됐는지 확인한 뒤, 수집 가능한 행동 지표를 별도로 관찰하는 편이 좋습니다.

내부 확인표에는 시험한 화면·조건, 발견한 문제, 수정 뒤 다시 확인한 결과를 남길 수 있습니다. 예를 들어 확인할 작업을 네 개로 정했다면 네 작업 모두 같은 방법으로 점검하고 남은 오류를 기록하세요. 이는 병원 내부의 소규모 검사이며 보호자 전체의 성공률이나 예약 증가율을 뜻하지 않습니다.

연락 버튼 클릭과 예약, 실제 내원은 서로 다른 결과입니다. 관찰 기간을 예를 들어 수정 전후 각각 2주로 정했다면 기간과 페이지, 기기 구분, 클릭을 세는 방법을 동일하게 유지하세요. 해당 페이지의 모바일 방문 수를 확인할 수 없으면 클릭률을 만들지 않고 클릭 건수와 측정 한계를 남깁니다. 표본이 적거나 수집 방식이 바뀌었다면 효과 판단을 보류하는 것이 맞습니다.

오늘의 실행: 안내 화면 한 장부터 합의합니다

오늘 할 일은 첫 방문 안내 화면 하나를 휴대전화로 열고, 실제 문구를 읽고 연락 버튼을 누르기 직전까지 확인하는 것입니다. 읽기 어려운 문장, 구별되지 않는 버튼, 확대 후 가려지는 조건을 각각 표시해 제작사와 기준을 정하세요. 제작 중이라면 이 표로 시안 한 장을 먼저 합의하고, 납품 단계라면 오픈 전 검수에 연결해 수정 결과를 확인해 보세요.

기존 홈페이지의 어느 부분부터 고칠지 판단하기 어렵다면 홈페이지 진단 상담에서 현재 주소와 확인이 필요한 화면을 알려주세요. 바로 전체 재제작을 정하기보다 실제 안내와 제작 범위를 바탕으로 부분 수정부터 검토할 수 있습니다.