AI로 첫 앱 만들기: 사진 첨부에서 선택·미리보기·업로드 완료 구분하기

English version of this article

사진을 고르면 화면에 바로 보이는 앱을 만들고 싶다면, ‘보이는 사진’과 ‘서버에 저장된 사진’을 구분하는 것부터 시작해 보세요. 선택한 파일의 미리보기를 보여 주는 단계와 업로드가 끝난 단계는 다르게 설계할 수 있습니다. 이번 글은 개인 메모 앱에 사진 한 장을 붙이는 가상 설계 예시입니다.

1. 사진이 지나가는 네 단계
첫째, 사용자가 파일을 선택합니다. 둘째, 미리보기를 보여 줍니다. 셋째, 업로드를 진행합니다. 넷째, 저장 결과를 확인해 첨부 완료로 표시합니다. 기기에만 보관하는 앱이라면 업로드 대신 해당 저장 방식을 명시해야 합니다. 어떤 앱을 만들 것인지 먼저 정하면 화면 문구도 자연스럽게 정해집니다.

2. 상태에 맞는 문구 정하기
선택 전: ‘사진 한 장을 선택해 주세요.’
미리보기: ‘선택한 사진입니다. 저장하면 첨부됩니다.’
전송 중: ‘사진을 올리는 중입니다.’
완료: ‘사진이 첨부되었습니다.’
확인 필요: ‘연결 상태를 확인한 뒤 다시 시도해 주세요.’
문구는 직접 구성한 예시입니다. 미리보기만 준비된 상태에서 완료라고 표시하지 않도록 각 문장이 어떤 사건 뒤에 나타나는지 정하세요.

3. 제한 조건을 먼저 드러내기
허용할 파일 형식, 최대 용량, 한 번에 선택할 수 있는 개수를 선택 버튼 가까이에 적습니다. 예를 들어 ‘연습 앱: JPG·PNG, 한 장, 최대 5MB’라고 제안할 수 있지만, 이는 이번 설계의 가정이지 모든 앱의 공통 기준은 아닙니다. 실제 서버와 저장 서비스가 허용하는 조건을 확인하고 화면과 처리 로직을 맞춰야 합니다.

4. AI에게 줄 설계 요청문
“개인 메모 앱의 사진 한 장 첨부 흐름을 설계해 주세요. 파일 선택, 미리보기, 업로드 중, 완료, 재시도 상태를 구분하세요. 파일 형식과 용량 제한은 가정임을 표시하고 구현 환경에서 확인할 항목을 알려 주세요. 새 사진을 선택하면 기존 첨부가 언제 교체되는지 설명해 주세요. 업로드 성공 전에는 완료 문구를 표시하지 않도록 확인 항목을 작성해 주세요.”

5. 실제로 확인할 다섯 장면
정상 크기의 사진을 선택했을 때: 미리보기와 파일 이름을 확인합니다.
선택 창을 취소했을 때: 기존 화면과 첨부가 유지되는지 봅니다.
용량 기준을 넘는 파일을 골랐을 때: 기준과 다음 행동이 함께 안내되는지 봅니다.
전송 중 연결이 끊겼을 때: 재시도와 기존 파일의 상태가 분명한지 봅니다.
새 사진으로 바꿨을 때: 최종 저장된 사진이 사용자의 마지막 선택과 일치하는지 봅니다.
이 목록은 검증 계획이며 실제 앱에서 실행하기 전에는 통과라고 표시하지 않습니다.

사진 내용도 준비 단계에서 확인하기
연습에는 직접 만든 도형이나 공개해도 되는 풍경 사진을 사용해 보세요. 사람의 얼굴, 주소, 문서 내용이 들어 있다면 공개 범위를 먼저 살펴봅니다. 앱이 누구에게 사진을 보여 주는지, 삭제할 때 어떤 보관본이 함께 처리되는지도 서비스 설계에서 따로 정할 항목입니다.

오늘 해볼 일
사진 선택부터 완료까지 종이에 네 칸을 그리고, 각 칸 아래에 사용자가 읽을 문장 하나씩 적어 보세요. 이 그림을 AI에게 전달하면 버튼 하나의 요청을 구체적인 행동 흐름으로 바꿀 수 있습니다.