AI로 첫 앱 만들기: 로딩 중·완료·다시 시도 화면을 함께 설계하기

메모 목록을 불러오는 버튼을 만들었다면 기다리는 화면도 함께 정해 보세요. 사용자가 알고 싶은 것은 ‘지금 무엇을 하고 있는지’와 ‘다음에 무엇을 할 수 있는지’입니다. 이 글은 웹 메모 앱을 가정한 화면 설계 예시입니다.

1. 상태를 나누어 이름 붙이기
시작 전에는 ‘메모 불러오기’ 버튼을 보여 줍니다. 요청 중에는 ‘메모를 불러오는 중입니다’라고 안내합니다. 완료되면 실제 목록과 개수를 표시합니다. 요청이 끝나지 못하면 기존 목록을 보존하며 다시 시도할 방법을 제공합니다. 메모가 0개인 정상 응답은 ‘아직 저장한 메모가 없습니다’라는 별도 완료 화면입니다.

2. 기다리는 동안 무엇을 유지할까?
이미 목록이 있다면 기존 목록을 보여 주고 갱신 중임을 알려 주는 방식을 생각할 수 있습니다. 첫 방문이라면 짧은 안내와 로딩 표시가 어울립니다. 실제 진행률을 알 수 없을 때는 임의의 퍼센트 대신 진행 중이라는 상태를 표시하세요. 버튼을 여러 번 눌렀을 때 요청을 하나만 처리할지도 정합니다.

3. AI에게 전달할 요청문
“웹 메모 앱의 목록 조회 화면을 만들어 주세요. 시작 전·불러오는 중·목록 있음·목록 없음·다시 시도 상태를 구분해 주세요. 조회 중에는 중복 요청을 막고 기존 목록은 유지해 주세요. 상태 안내는 화면낭독기에도 전달되게 해 주세요. 서버에 내용을 저장하는 기능은 이번 범위에 포함하지 않습니다.”

4. 개발 설명을 읽을 때 확인할 두 가지
웹의 fetch는 응답을 받아도 HTTP 상태 코드를 따로 확인해야 할 수 있습니다. 404 응답만으로 Promise가 자동으로 거절되는 것은 아니므로 response.ok 확인을 구현에 포함합니다. MDN Fetch 안내에서 확인할 수 있는 동작입니다.
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

상태 문구가 화면에 나타나는 것과 화면낭독기에 전달되는 것은 별도로 확인합니다. W3C의 상태 메시지 설명은 포커스를 옮기지 않는 상태 변화도 보조 기술이 알아낼 수 있게 제공하는 방법을 다룹니다. 일반 진행 안내에는 상황에 맞는 status 역할 등을 검토할 수 있습니다.
https://www.w3.org/WAI/WCAG21/Understanding/status-messages

5. 완성 후 직접 해볼 확인
조회가 빠르게 끝날 때, 몇 초 기다릴 때, 목록이 비어 있을 때를 각각 열어 보세요. 연결이 끊겨도 기존 메모가 남는지 확인합니다. 다시 시도한 뒤 성공 안내가 보이는지까지 살펴보세요. 이 목록은 구현 후 수행할 항목이며 특정 앱을 실제로 검사한 결과는 아닙니다.

English version of this article: Read in English.