AI로 첫 앱 만들기: 새로고침해도 남는 메모의 저장 방식 정하기

메모 앱을 처음 만들 때는 입력과 목록 표시가 눈에 들어옵니다. 다음으로 정할 것은 저장 위치입니다. 브라우저 안에 보관할지, 계정과 연결해 서버에 보관할지에 따라 사용자가 기대할 수 있는 범위가 달라집니다.

먼저 사용 장면을 한 문장으로 씁니다

“내 노트북의 같은 브라우저에서 장보기 메모를 다시 열어 본다”라면 브라우저 저장을 연습해 볼 수 있습니다. “휴대폰과 노트북에서 같은 목록을 함께 쓴다”라면 계정·서버·동기화 설계까지 고려해야 합니다.

웹의 localStorage는 사이트 출처별로 문자열 데이터를 보관하며 브라우저 세션이 끝나도 유지될 수 있습니다. 다만 사용자가 사이트 데이터를 지우거나 저장을 제한하면 유지 조건이 달라집니다. 시크릿 모드의 데이터는 마지막 시크릿 탭을 닫을 때 지워집니다. MDN의 localStorage 설명

AI에게는 저장 약속까지 요청하세요

개인 연습용 장보기 메모 웹앱을 만들어 주세요. 항목 추가·완료 표시·삭제를 지원하고 localStorage에 저장해 주세요. 화면에는 ‘이 브라우저에 저장됩니다’라고 표시해 주세요. 저장할 수 없을 때는 안내를 보여주고 현재 입력은 화면에 남겨 주세요. 개인정보나 로그인 정보는 저장하지 않습니다. 실행 방법과 확인 순서를 함께 설명해 주세요.

처음부터 가족 공동 사용을 계획한다면 위 요청문을 그대로 쓰기보다 공동 사용 요구를 먼저 전달하는 편이 좋습니다. 저장 방식은 버튼 디자인보다 앞서 정할 사용자 약속입니다.

확인은 세 장면으로 나눕니다

장면	직접 할 일	확인할 내용
같은 화면	메모 두 개를 추가하고 새로고침	두 항목과 완료 상태 유지
다시 방문	탭을 닫고 같은 주소로 열기	저장 목록 다시 표시
다른 환경	다른 브라우저에서 같은 주소 열기	자동 동기화 여부를 구분

다른 브라우저에서도 같은 목록이 필요하다면 그 요구를 다음 개발 항목으로 적어 주세요. 개인 실습은 실제 웹 주소나 로컬 개발 서버로 진행하고, 파일을 직접 여는 방식은 저장 동작이 브라우저마다 다를 수 있음을 알아두면 좋습니다.

완성 기준을 사용자 문장으로 남기기

“저장 기능 구현”보다 “같은 브라우저에서 다시 열었을 때 메모를 볼 수 있다”가 확인하기 쉽습니다. 예제 목록으로 세 장면을 직접 확인하고 결과를 적어 보세요. 이 글은 설계와 확인 절차 안내이며, 독자의 앱에서 실행한 결과를 대신하지 않습니다.

English version