개발에 넘기기 전 화면 읽기 기준

화면을 만들기 전에 글자 크기 · 대비 · 누르는 영역 · 입력칸 이름표 · 대체 텍스트 다섯 줄을 요구사항에 적어 두면, 만든 뒤에 고칠 자리가 크게 줄어듭니다. 다섯 줄은 화면마다 다시 정하는 값이 아니라 프로그램 개발을 시작할 때 한 번 정해 모든 화면에 그대로 쓰는 값입니다. 기기와 화면마다 다르니 첫 화면이 나왔을 때 실제로 한 번 확인합니다.

요구사항에 어떤 값을 적어 두나요

아래 표를 그대로 옮겨 적고 오른쪽 칸만 프로젝트에 맞게 채웁니다. 값이 적혀 있으면 만드는 쪽도 확인하는 쪽도 같은 것을 보게 되고, 나중에 「좀 더 크게」 같은 말로 오가는 일이 줄어듭니다.

항목	기준값	이 값이 쓰이는 자리
본문 글자	16~18px	안내문 · 목록 · 상세 내용
가장 작은 글자	14px 이상	표 안 글자 · 보조 설명
글자 대비	본문 4.5:1 이상, 큰 글자 3:1 이상	모든 글자와 그 배경
누르는 영역	한 변 44~48px 이상	버튼 · 체크 상자 · 아이콘
영역 사이 간격	8px 이상	나란히 놓인 버튼
입력칸 이름표	칸 위에 항상 보이게	모든 입력칸
대체 텍스트	뜻이 있는 이미지에 한 줄	제품 사진 · 아이콘 · 도표

대비 — 글자 색과 그 뒤 배경색의 밝기 차이를 숫자로 나타낸 값입니다. 대비를 재 주는 도구에 두 색 값을 넣으면 4.5:1 같은 숫자가 바로 나옵니다. 화면에서 쓰는 색을 미리 정해 두었다면 색끼리 짝을 지어 한 번에 재 보고, 기준에 못 미치는 짝은 쓰지 않는 조합으로 표에 적어 둡니다.

대체 텍스트 — 이미지가 안 뜨거나 화면을 소리로 읽을 때 대신 나오는 짧은 설명입니다. 이름표 — 그 칸이 무엇을 받는 칸인지 알려 주는 글자로, 칸 안에 흐리게 넣는 안내 글자와 다릅니다. 안내 글자는 입력을 시작하면 사라지지만 이름표는 남습니다. 긴 양식에서 다섯 칸쯤 내려간 뒤 지금 채우는 칸이 무엇이었는지 되짚게 되는 자리가 여기서 갈립니다.

누르는 영역을 44~48px로 잡는 이유는 손가락이 화면에 닿는 넓이 때문입니다. 눈에 보이는 아이콘은 20px라도, 눌리는 사각형은 그보다 크게 잡아 둡니다. 보이는 크기와 눌리는 크기를 따로 적어 두는 것이 이 줄의 핵심입니다. 표 안에 아이콘 여러 개를 나란히 놓을 때는 사이 간격 8px도 함께 적습니다 — 간격이 없으면 옆 것이 눌립니다.

색만으로 알려 주지 않는다는 건 무슨 뜻인가요

화면은 상태를 색으로 알려 주는 일이 많습니다. 빨간 칸은 잘못 입력한 것, 초록 점은 정상. 색이 붙어 있는 것은 좋지만 색 하나만으로 알려 주면 화면 밝기가 낮거나 색이 비슷하게 보이는 조건에서 그 정보가 통째로 사라집니다.

색으로만 알린 것	같이 붙이는 표시
빨간 테두리 입력칸	칸 아래 한 줄 문장 — 무엇을 고칠지
초록·회색 상태 점	점 옆에 상태 이름 글자
색으로 나눈 그래프 선	선 모양이나 끝에 이름 붙이기
파란 글자 링크	밑줄 또는 화살표 표시

색을 빼라는 말이 아니라 색에 글자나 모양을 하나 더 붙이라는 말입니다. 붙이는 것은 글자 한 줄이면 충분합니다. 특히 잘못 입력한 칸은 빨갛게 만드는 것만으로는 무엇이 잘못됐는지 알 수 없으니, 칸 바로 아래에 「휴대전화 번호를 숫자만 넣어 주세요」처럼 고칠 방법을 적습니다. 이 문장은 요구사항에 화면별로 미리 적어 두면 만들 때 그대로 들어갑니다.

만든 화면을 어떻게 확인하나요

다섯 가지를 순서대로 봅니다. ①기기 설정에서 글자 크기를 가장 크게 하고 글자가 상자 밖으로 넘치는 화면을 찾습니다. ②화면을 흑백으로 바꿔 색으로만 구분하던 것을 찾습니다. ③화면 밝기를 30% 아래로 낮추고 회색 글자를 봅니다. ④엄지 하나로 버튼을 눌러 옆 버튼이 눌리는 자리를 찾습니다. ⑤키보드의 이동 키만으로 입력칸을 처음부터 끝까지 지나가 봅니다. 다섯 가지 모두 화면 하나에 5분이면 끝납니다.

다섯째가 낯설 수 있는데, 지금 어느 칸에 있는지 화면에 표시가 뜨는지만 보면 됩니다. 표시 없이 넘어가는 자리가 있으면 그 칸 이름을 적어 둡니다. 기기와 화면마다 다르니 폰 하나와 컴퓨터 하나로 같은 화면을 각각 한 번씩 봅니다.

값이 빠지면 어디부터 걸리나요

빠진 값	먼저 나타나는 자리	고치는 값
본문 크기	긴 안내문·약관 화면	16px로 통일
대비	회색 설명 글·비활성 버튼	색을 한 단계 어둡게
누르는 영역	표 안 작은 아이콘	44px 사각형으로 넓히기
이름표	입력 도중 무슨 칸인지 잊는 자리	칸 위로 이름표 올리기
대체 텍스트	이미지로만 된 안내 화면	같은 내용을 글로 함께

다섯 줄 모두 만든 뒤에도 고칠 수 있습니다. 다만 드는 손이 다릅니다. 대비와 글자 크기는 한 곳에서 정의해 두면 화면 전체가 한 번에 바뀌고, 누르는 영역과 이름표는 화면마다 하나씩 손이 들어갑니다. 요구사항에 미리 적어 두는 값을 고를 때도 뒤의 두 줄이 더 값어치가 큽니다.

이미 만든 화면은 어떤 순서로 고치나요

사람이 가장 많이 지나가는 화면부터 갑니다. 대개 첫 화면 · 목록 · 입력 화면 · 완료 화면 넷입니다. 화면 하나에서 순서는 대비 → 글자 크기 → 누르는 영역 → 이름표입니다. 색은 한 곳에서 정의해 두면 화면 전체가 한 번에 바뀌므로 손이 가장 적게 듭니다.

고칠 것은 목록으로 만들어 한 번에 넘깁니다. 화면 이름 · 지금 값 · 바꿀 값 세 칸이면 충분합니다. 「글자가 작아요」보다 「목록 화면 표 안 글자 12px → 14px」가 한 번에 끝납니다. 값이 정해져 있으니 서로 다시 물을 일이 없고, 다음에 만드는 화면에는 처음부터 그 값이 들어갑니다. 업무 시스템처럼 화면 수가 많은 경우에도 값 자체는 한 벌이라 목록만 길어집니다.

오늘 할 일

위 기준값 표를 요구사항 문서 맨 앞에 그대로 붙여 넣고 오른쪽 칸을 프로젝트에 맞게 채워 두십시오. 그리고 지금 쓰는 화면 하나를 열어 기기 설정에서 글자 크기를 가장 크게 키워 보고, 글자가 상자 밖으로 넘치는 자리를 화면 이름과 함께 적어 두면 오늘 안에 끝납니다.