AI로 첫 앱 만들기: 메모 내보내기 버튼과 파일 확인까지 설계하기

English version of this article

메모 앱에 내보내기 버튼이 있으면 작성한 내용을 다른 곳에 보관하거나 옮길 수 있습니다. 버튼을 만드는 요청에 파일 형식과 확인 방법을 함께 적어 보세요. 이 글은 자신의 메모를 파일로 내려받는 웹 앱의 설계 예시입니다.

1. 파일을 누가 다시 읽을까?
사람이 바로 읽을 목적이면 텍스트가 간단합니다. 표 계산 도구에서 열 목적이면 CSV를 생각할 수 있습니다. 앱으로 다시 가져올 목적이라면 필드 이름과 구조를 유지하는 JSON을 검토할 수 있습니다. 첫 버전에서는 한 가지 형식을 정해도 됩니다. 아래 예시는 JSON을 사용합니다.

2. 내보낼 범위를 먼저 보여 주기
현재 검색 결과만 내보내는지 전체 활성 메모를 내보내는지 정합니다. ‘활성 메모 3개 내보내기’처럼 실제 범위를 표시하면 사용자가 확인할 수 있습니다. 휴지통 메모를 포함할지도 정합니다. 예시에서는 활성 메모만 포함하고 계정 정보는 제외합니다.

3. 파일 안에 필요한 것
형식 버전, 내보낸 시각, 메모 목록을 생각해 볼 수 있습니다. 각 메모에는 식별자·제목·본문·수정 시각을 넣습니다. 파일 이름에 붙이는 날짜는 어떤 시간대 기준인지 정합니다. 파일을 만든 시각과 메모를 마지막으로 수정한 시각은 서로 다른 필드로 보관합니다.

4. AI에게 전달할 요청문
“웹 메모 앱에 JSON 내보내기를 추가해 주세요. 전체 활성 메모만 포함하고 휴지통 항목과 계정 정보는 제외해 주세요. 파일에는 형식 버전·내보낸 시각·메모 목록을 넣어 주세요. 한글·줄바꿈·따옴표가 유지되게 하고 메모가 0개면 빈 목록임을 안내해 주세요. 완료 문구는 다운로드를 요청한 단계에 맞게 표현해 주세요.”

5. 구현 설명과 실제 파일을 함께 확인하기
브라우저에서는 Blob으로 파일 데이터를 만들고 URL.createObjectURL로 이를 참조하는 주소를 생성하는 방식을 사용할 수 있습니다. 사용이 끝난 객체 URL은 revokeObjectURL로 해제하는 수명 관리도 고려합니다. 관련 동작은 MDN 문서에서 확인할 수 있습니다.
https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL_static

내려받은 파일을 직접 열어 한글 제목, 여러 줄 본문, 따옴표가 있는 메모를 읽어 보세요. 목록 개수도 확인합니다. 파일 생성과 다운로드 시작만으로 기기 저장 완료까지 확인한 것은 아니므로 실제 다운로드 목록과 파일을 함께 살펴봅니다.

다음 단계
가져오기까지 만든다면 파일을 다시 읽었을 때 같은 메모가 복원되는지 별도로 검증합니다. 이번 글은 설계와 확인 절차를 제안하며 앱을 실행해 검증한 결과를 보고하는 글은 아닙니다.