교회 앱 UX — “등록이 안 돼요”는 실은 버튼이 안 보인 것이었습니다

교회 전자주보를 만들고 나서 두 번 들은 말입니다. “새가족 등록이 안 된대요.” “사진이 안 올라가요.”

두 번 다 코드는 정상이었습니다. 그런데 사용자는 못 쓰고 있었습니다. 이 글은 그 두 사건의 기록입니다.

이 글은 교회 전자주보 만들기 시리즈의 3편입니다.

사건 1 — 새가족 등록이 안 된다

먼저 데이터베이스에 직접 넣어 봤습니다. 들어갑니다. 로컬에서 폼을 채워 제출해 봤습니다. 등록이 완료되었습니다가 뜨고 기록이 쌓입니다. 실제 서비스 사이트에서도 해봤습니다. 똑같이 성공합니다.

동의 체크를 빼고 제출해 봤더니 개인정보 수집·이용에 동의해 주세요.가 제대로 뜹니다. 관리자 계정으로 새가족함을 열어 보니 목록도 정상입니다.

전부 정상인데 사용자는 못 쓰고 있었습니다.

폼을 다시 봤습니다. 항목이 이렇습니다.

이름 · 연락처 · 연령대 · 거주 지역 · 가족 구성 · 방문 경로
관심 있는 모임
목회자 상담 희망
개인정보 수집·이용 동의   ← 필수
[ 등록하기 ]

폰 화면에서는 아래로 스크롤해야 동의 칸과 등록 버튼이 나옵니다.

거기까지 안 내리면 버튼이 아예 보이지 않습니다. 그리고 이름만 쓰고 위쪽 어딘가를 누르면, 빨간 경고는 화면 밖에 떠 있습니다. 사용자에게는 이렇게 보입니다.

이름 썼는데 아무 일도 안 일어남 → “안 되네”

버튼이 없는 게 아니라 손이 닿지 않았던 것입니다.

등록 버튼을 시트 바닥에 고정했습니다. 스크롤이 어디에 있든 화면 아래에 항상 붙어 있습니다.

그리고 못 채운 칸이 있으면 그 칸으로 화면이 저절로 이동하고, 버튼 위에 한 줄이 뜹니다.

빨간 글씨로 표시된 곳을 채워 주세요.

이제 눌렀는데 아무 일도 안 일어나는 상황이 없습니다. 무언가는 반드시 눈앞에서 바뀝니다.

파일 업로드에 실패했습니다. 잠시 후 다시 시도해 주세요.

잠시 후 다시 시도해도 똑같았습니다. 이 문구로는 관리자도 저도 아무것도 알 수 없었습니다.

실제 원인은 파일 저장소의 권한 정책이 빠져 있던 것이었습니다(자세한 이야기는 5편에서 다룹니다). 서버가 보낸 응답은 이랬습니다.

403 Unauthorized
new row violates row-level security policy

정보는 처음부터 있었습니다. 화면이 그걸 버리고 있었을 뿐입니다.

실패 사유를 가려서 무엇을 하면 되는지까지 알려 주도록 바꿨습니다.

원인	화면에 뜨는 말
권한 없음	이 계정에는 파일을 올릴 권한이 없습니다. 교회 관리자에게 권한을 요청하세요.
용량 초과	파일이 너무 큽니다. 영상은 용량을 줄이거나 유튜브에 올린 뒤 주소를 붙여넣어 주세요.
연결 끊김	인터넷 연결이 끊겼습니다. 연결을 확인하고 다시 시도해 주세요.
그 외	업로드에 실패했습니다 — (서버가 보낸 원문)

마지막 줄이 중요합니다. 예상 못 한 원인은 원문을 그대로 보여 줍니다. 사용자가 그 문장을 그대로 알려 주면 원인을 바로 찾을 수 있습니다. 친절하게 뭉개는 것보다 낫습니다.

“안 돼요”는 대개 기능이 없다는 뜻이 아닙니다.

둘 다 코드를 아무리 들여다봐도 안 보입니다. 만든 사람은 버튼이 어디 있는지 알고 있고, 에러 원인도 개발자 도구로 보면 되니까요. 만든 사람에게는 문제가 아닙니다.

교회에서 쓰는 프로그램은 사용자층이 넓습니다. 20대도 쓰고 80대도 씁니다. 폰으로 카카오톡만 쓰시는 분도 씁니다.

몇 가지 원칙으로 정리하면 이렇습니다.

그 뒤로도 같은 종류의 일이 이어졌습니다. 글씨와 누르는 자리를 키우고, 순서 바꾸기를 드래그 대신 버튼으로 바꾸고, 광고 띠를 주보 맨 위로 올린 것 모두 “손이 닿느냐”의 문제였습니다.

다음 편은 성격이 다릅니다. 교회가 실제로 가장 많이 막히는 지점 — 카카오 로그인입니다.