AI로 첫 앱 만들기: 데이터가 없는 첫 화면부터 설계하는 방법

독서 기록 앱을 처음 열면 아직 저장한 책이 없습니다. 이 순간에 무엇을 보여줄지 정해 두면 사용자는 첫 행동을 바로 찾을 수 있습니다. 목록에 자료가 가득한 화면과 처음 방문한 화면을 함께 생각해 보세요.

같은 목록에도 여러 상태가 있습니다

상태	화면에서 알려줄 내용	할 수 있는 행동
첫 방문	아직 기록한 책이 없음	첫 책 기록하기
불러오는 중	기록을 불러오는 중임	잠시 기다리기
기록 있음	저장한 책 목록	읽기·수정·추가
검색 결과 없음	해당 검색어와 일치하는 책이 없음	검색어 지우기
조회 미완료	현재 목록을 가져오지 못함	다시 시도하기

첫 방문과 검색 결과 없음은 다른 장면입니다. 이미 기록이 있는데 검색어에 맞는 항목만 없는 상황이라면, 새 책 등록과 함께 검색을 해제하는 길도 보여주면 좋습니다.

문구는 현재 상태와 다음 행동을 연결합니다

첫 화면에는 “아직 기록한 책이 없어요. 첫 책을 남겨 보세요”와 ‘첫 책 기록하기’ 버튼을 둘 수 있습니다. 검색 결과가 없다면 “이 검색어에 해당하는 기록이 없어요”와 ‘검색어 지우기’를 연결합니다. 조회가 끝나지 않은 상태를 빈 목록으로 확정하지 않도록 요청하세요.

AI에게 건넬 요청문

독서 기록 앱의 목록 화면을 만들어 주세요. 첫 방문, 불러오는 중, 기록 있음, 검색 결과 없음, 조회 미완료 상태를 구분해 주세요. 상태마다 현재 상황을 한 문장으로 설명하고 가능한 다음 행동을 보여주세요. 버튼에는 동작을 설명하는 이름을 붙이고 기본 HTML 버튼을 사용해 주세요. 각 상태를 예제 데이터로 확인할 방법도 알려 주세요.

버튼과 입력 요소에 역할과 이름을 명확히 부여하는 기준은 MDN HTML 접근성 안내를 참고할 수 있습니다. 위 다섯 상태 구분과 문구는 이 글의 설계 제안입니다.

확인할 때는 상태가 바뀌는 순간도 봅니다

기록이 없을 때 첫 책을 추가하고 목록으로 돌아옵니다. 이어 검색어를 넣었다가 지우고 전체 목록이 다시 나타나는지 확인합니다. 조회를 다시 시도할 수 있는 환경이라면 재시도 후 안내가 실제 결과로 바뀌는지도 살펴보세요.

디자인 초안에서는 상태별 예제를 표시할 수 있고, 실제 앱에서는 각 조건을 재현해 확인해야 합니다. 두 결과를 따로 기록하면 구현된 범위가 명확해집니다. 오늘은 앱의 첫 방문 화면부터 열어 보고, 처음 온 사람이 누를 버튼이 보이는지 확인해 보세요.

영문판: Read in English.