AI로 첫 앱 만들기: 첫 사용과 검색 0건을 다르게 안내하는 법

목록을 보여 주는 앱에서는 자료가 아직 없을 때와 자료를 불러오는 중일 때가 서로 다릅니다. 같은 빈 화면으로 처리하면 사용자는 기다려야 하는지 새 항목을 만들어야 하는지 알기 어렵습니다. 이 글은 가상의 독서 기록 앱을 예로 들어 목록 화면의 상태를 정하는 연습입니다. 실제 앱을 배포하거나 사용성을 측정한 결과는 아닙니다.

1. 처음 진입한 상태를 적습니다
사용자가 처음 앱을 열고 기록이 하나도 없다면 제목 “아직 독서 기록이 없어요”와 버튼 “첫 기록 추가”를 보여 줄 수 있습니다. 단순히 “0건”만 표시하기보다 다음 행동을 알려 주는 문구입니다. 이미 기록이 있는데 검색어와 일치하는 항목이 없다면 “검색 결과가 없어요”와 “검색어 지우기”를 보여 줍니다. 두 경우는 같은 빈 목록처럼 보여도 사용자의 다음 행동이 다릅니다.

2. 자료를 불러올 때는 기다리는 이유를 보여 줍니다
요청을 보내고 응답을 기다리는 동안에는 “기록을 불러오는 중”을 표시합니다. 여러 번 화면을 눌러도 동일한 요청이 계속 만들어지지 않도록 버튼 상태를 정합니다. 오래 기다려야 하는 경우에는 기다리는 중이라는 표시와 함께 화면을 벗어날 수 있는 길을 남겨 둡니다. 실제 시간 기준은 서비스 환경에서 측정한 뒤 정하세요.

3. 결과를 확인할 수 없는 경우를 분리합니다
응답을 확인하지 못했다면 “기록을 확인할 수 없습니다. 다시 확인해 주세요”처럼 관측된 상태와 다음 행동을 표시합니다. 사용자가 작성하던 내용은 가능한 범위에서 보존하고, 다시 시도 버튼을 둡니다. 저장 요청의 결과를 모르는 상태라면 중복 저장 가능성을 생각해 먼저 목록이나 상세 화면에서 기존 항목을 확인하도록 설계할 수 있습니다.

4. AI에게 상태표를 요청합니다
“독서 기록 목록 화면을 설계해 주세요. 첫 사용으로 기록 0건, 검색 결과 0건, 불러오는 중, 기록 표시, 결과 확인이 필요한 경우를 나눠 제목·보조 문구·버튼·버튼 동작을 표로 작성해 주세요. 각 상태가 되는 조건도 적어 주세요.” 이렇게 요청하면 화면 문구와 데이터 조건을 함께 검토할 수 있습니다. 그림은 이 가운데 주요 네 상태를 간추려 보여 줍니다.

5. 손으로 전환을 확인합니다
가상 기록 한 건을 만들고, 검색어를 바꾸고, 네트워크 응답을 기다리는 상황을 차례로 놓아 보세요. 각 상태에서 버튼을 누른 뒤 어느 화면으로 이동하는지 적습니다. 빈 목록과 검색 결과 없음이 구분되고, 로딩 표시가 완료 뒤 사라지고, 재확인 뒤 결과가 갱신되면 기본 흐름이 이어집니다. 그림은 주요 상태 네 가지를 간추린 설계 예시입니다.

바로 해볼 연습
처음 사용자가 “첫 기록 추가”를 눌렀다고 가정하고 입력 화면까지 이어지는 화살표를 그려 보세요. 이어서 기록을 저장하고 목록으로 돌아왔을 때는 첫 사용 문구 대신 그 기록이 보여야 합니다. 이 두 화면을 이어 보면 빈 상태의 버튼이 실제 기능과 연결되는지 확인할 수 있습니다.

같은 0건을 두 화면으로 나누는 규칙

가상의 독서 기록 앱에서 전체 기록이 0건이면 첫 사용 안내를 보여 줍니다. 전체 기록은 있지만 사용자가 검색어 “여름”을 넣어 결과가 0건이라면 검색 안내를 보여 줍니다. 두 경우 모두 화면에 카드가 없지만 다음 버튼이 다릅니다. 첫 사용에는 “첫 기록 추가”, 검색 0건에는 “검색어 지우기”가 더 직접적인 다음 행동입니다.

전체 기록	검색어	검색 결과	화면 제목	버튼
0건	없음	0건	첫 기록을 남겨 보세요	첫 기록 추가
3건	여름	0건	검색 결과가 없어요	검색어 지우기
3건	여름	1건	기록 1건	해당 기록 열기
확인 중	없음	미정	기록을 불러오는 중	대기 또는 이동

여기서 “전체 기록 3건”은 연습 데이터입니다. 실제 앱에는 필터, 권한, 동기화 범위가 있을 수 있어 전체 건수를 어느 범위에서 세는지 정해야 합니다. 결과를 아직 받지 못했을 때는 0건으로 추정하지 않고 로딩 상태를 유지합니다. 데이터가 도착한 뒤에만 첫 사용 또는 검색 0건으로 나눕니다.

화면 문구와 버튼 동작을 한 쌍으로 적기

상태	보조 문구	누르면 이동할 곳
첫 사용	읽은 책을 한 권 기록하면 목록이 시작됩니다	새 기록 입력 화면
검색 0건	다른 검색어를 쓰거나 검색어를 지워 보세요	검색어 지운 전체 목록
결과 확인 필요	지금은 기록을 확인할 수 없습니다	현재 목록 다시 확인

빈 상태 버튼은 실제 이동 경로와 연결돼야 합니다. “첫 기록 추가”를 누른 뒤 입력 화면이 열리고 저장이 확인되면 목록에 그 기록이 보여야 합니다. “검색어 지우기”를 누르면 이전 기록 3건이 다시 보이는 것이 이 가상 자료의 기대값입니다. 버튼 문구를 먼저 정한 뒤 화면 전환을 시험하면 화면 문구만 있고 동작이 비어 있는 경우를 찾을 수 있습니다.

상태를 고르는 간단한 순서

if (loading) show('불러오는 중');
else if (resultNeedsCheck) show('다시 확인');
else if (allItems.length === 0) show('첫 사용');
else if (visibleItems.length === 0) show('검색 0건');
else show('기록 목록');

이는 화면 분기를 설명하는 의사 코드입니다. allItems와 visibleItems가 같은 사용자·같은 권한 범위에서 계산돼야 하고, 로딩이 끝난 뒤에만 길이를 비교해야 합니다. 검색어가 비어 있는데 visibleItems가 0건이라면 필터 조건이나 데이터 범위를 다시 확인합니다. 서버 상태와 로컬 저장 상태가 서로 다른 앱이라면 어떤 자료를 기준으로 보여 줄지도 제품 규칙에 적습니다.

AI 요청문과 확인 질문

독서 기록 목록 화면의 상태표를 만들어 주세요. 전체 기록 0건, 전체 기록 3건·검색 결과 0건, 결과 1건, 로딩, 결과 확인 필요를 구분합니다. 각 상태마다 진입 조건, 제목, 보조 문구, 버튼, 버튼을 누른 다음 화면을 적어 주세요. 화면에 없는 데이터를 추측하지 말고 확인 질문으로 남겨 주세요.

Q. 첫 사용자에게 검색어 지우기를 보여도 되나요? 전체 기록이 0건인 예시에서는 새 기록 입력이 더 알맞은 다음 행동입니다.

Q. 응답 전 목록이 비면 첫 사용 화면인가요? 아직 자료를 확인 중이므로 로딩 상태를 보여 줍니다.

Q. 검색 결과가 없을 때 새 기록 버튼도 둘 수 있나요? 둘 수 있습니다. 다만 검색어를 지워 원래 목록으로 돌아가는 경로를 분명히 남깁니다.

관련 글: 검색창과 필터의 함께 작동하는 규칙, 로딩·완료·재확인 화면. 이 글은 그중 첫 사용과 검색 0건의 차이에 집중합니다.

세 번의 전환으로 직접 검토하기

첫 전환은 기록이 0건인 계정에서 시작합니다. “첫 기록 추가”를 눌러 가상의 책 제목 “책 A”를 저장하고, 저장 완료 응답을 받은 뒤 목록에 1건이 나타나는지 확인합니다. 두 번째 전환에서는 “없는 제목”을 검색해 결과 0건 화면을 띄운 다음 “검색어 지우기”를 눌러 책 A가 다시 보이는지 확인합니다. 세 번째 전환에서는 자료를 불러오는 중에 화면을 다시 열어 로딩 표시가 보이는지, 결과를 받은 뒤 로딩 표시가 사라지는지 기록합니다.

전환	입력	기대 화면	확인할 자료
첫 사용 → 기록	책 A 저장	목록 1건	저장 응답과 목록
검색 0건 → 전체	검색어 지우기	책 A 표시	검색 조건과 목록
로딩 → 결과	조회 응답 수신	로딩 종료	요청 상태와 화면

이 기대값은 실제 앱을 시험한 결과가 아니라 구현 전에 정하는 검증 기준입니다. 구현 후에는 기기 크기와 연결 상태를 바꿔 같은 전환을 관찰하고, 입력한 기록이 어느 저장소에서 읽혔는지도 함께 적어야 합니다.

화면 제목과 버튼 동작을 함께 확인한 기록을 남기면 이후 검색 필터가 늘어날 때도 같은 기준으로 상태를 비교할 수 있습니다.