20. 휴대전화와 키보드 사용을 고려한 화면

화면의 폭이 달라집니다

컴퓨터에서 나란히 놓인 항목이 휴대전화에서는 너무 좁아질 수 있습니다. 화면의 폭에 맞춰 배치가 바뀌는 방식을 반응형 화면이라고 부릅니다. 예를 들어 관심사 세 개를 넓은 화면에서는 가로로, 좁은 화면에서는 세로로 놓을 수 있습니다.

휴대전화용으로 별도의 내용을 새로 쓰는 것은 아닙니다. 같은 내용이 다른 폭에서도 읽히고 눌릴 수 있게 만드는 것입니다. 글이 화면 밖으로 나가지는 않는지, 그림이 너무 커서 중요한 링크를 밀어내지는 않는지, 작은 버튼끼리 붙어 있지는 않은지 살펴봅니다.

창을 줄이는 것과 실제 기기 확인

컴퓨터 브라우저의 폭을 줄이면 배치 변화를 빠르게 볼 수 있습니다. 하지만 실제 휴대전화에서는 손가락으로 누르는 느낌과 화면 키보드가 올라오는 모습이 다릅니다. 공개 주소가 생기면 휴대전화에서도 확인하는 이유입니다.

휴대전화의 키보드가 나타났을 때 입력칸과 버튼이 가려질 수 있습니다. 링크 모음에서는 입력 도중에도 무엇을 쓰는지 확인할 수 있어야 합니다. 글을 읽는 화면뿐 아니라 사용자가 행동하는 순간의 화면을 생각해야 합니다.

마우스 없이 사용하는 사람

키보드의 Tab 키를 누르면 링크나 버튼, 입력칸 사이를 이동할 수 있습니다. 현재 어느 요소를 선택했는지 나타나는 표시를 포커스라고 합니다. 이 표시가 보이지 않으면 어디에서 동작할지 알기 어렵습니다. Enter 키로 링크를 열거나 버튼을 실행할 수 있는지도 확인합니다.

처음부터 접근성 기준 전체를 외울 필요는 없습니다. 클릭할 수 있어 보이는 곳이 키보드로도 닿는지, 선택 위치가 보이는지, 입력칸에 무엇을 써야 하는지 이름이 있는지를 먼저 봅니다. 이런 기본은 마우스 사용이 어려운 사람뿐 아니라 모든 사용자의 이해에도 도움이 됩니다.

기능을 알아볼 수 있게 표현하기

아이콘만 있는 버튼은 의미가 모호할 수 있습니다. 휴지통 그림을 보고 삭제라고 추측할 수 있어도, 무엇을 삭제하는지는 알아야 합니다. 화면을 읽어 주는 도구가 버튼 이름을 알려 줄 수 있도록 설명이 필요합니다. AI에게 “그림 버튼에도 의미를 알 수 있는 이름을 붙여 줘”라고 부탁할 수 있습니다.

작게 보이는 문제를 해결한다고 모든 글을 한꺼번에 줄이지 않습니다. 중요한 버튼을 찾기 어려운 문제와 내용이 너무 긴 문제는 해결 방식이 다릅니다. 누가 어떤 상황에서 사용하는지 생각하며 조정하면 화면 크기만 맞추는 데서 한 걸음 더 나아갈 수 있습니다.

세로 배치로 바뀌었을 때의 순서

컴퓨터에서 사진과 소개글이 나란히 있으면 두 요소를 함께 볼 수 있습니다. 휴대전화에서 세로로 놓일 때는 어느 것이 먼저 오는지 정해야 합니다. 소개 내용이 중요하다면 사진이 화면을 모두 차지하지 않게 조정할 수 있습니다. 작은 화면에서는 순서가 더 직접적으로 드러납니다.

관심사 카드 여러 개도 마찬가지입니다. 가로로 읽던 순서가 세로로 자연스럽게 이어지는지 봅니다. 중요한 링크가 마지막까지 내려가서 찾기 어렵다면 위치를 다시 생각합니다. 컴퓨터에서 괜찮았다는 이유로 모든 화면에서 완료라고 판단하지 않습니다.

키보드 이동을 보는 사례

Tab 키를 눌렀을 때 현재 선택된 링크에 테두리나 다른 표시가 나타나면 다음 행동을 예상할 수 있습니다. 표시 없이 선택 위치만 이동하면 Enter를 눌렀을 때 무엇이 열릴지 알기 어렵습니다. 눈에 보이는 포커스는 장식이 아니라 현재 위치를 알려 주는 정보입니다.

입력칸 다음에 추가 버튼이 오는 순서도 자연스러운지 볼 수 있습니다. 화면에서는 위에서 아래로 보이는데 키보드는 전혀 다른 곳으로 이동하면 사용하기 어렵습니다. AI에게 키보드 이동 순서와 현재 선택 표시를 유지하도록 부탁하고, 실제로 이동해 보는 것이 중요합니다.

꼭 기억하세요

읽을 수 있는 화면에 더해, 다른 크기의 기기와 키보드에서도 사용할 수 있는 화면을 생각합니다.