자동 저장만 믿었던 메모장에 저장 버튼을 다시 넣었다

코딩은 AI에게 맡겼습니다 · 시즌 1 / 13

2026년 7월 4일 v1.1.0에서는 명시적 저장, 제목, 고정과 정렬, Markdown, 설정을 한꺼번에 추가했습니다. 다섯 개 파일에서 617줄을 추가하고 77줄을 삭제했습니다. 그중 눈에 띄지 않지만 사용 흐름을 크게 바꾼 것은 저장 버튼이었습니다.

먼저 보는 핵심
자동 저장만으로는 사용자가 “이 메모의 작성이 끝났는가”를 구분하기 어렵습니다. 입력 중인 초안을 보존하는 동작과 완성한 메모를 목록에 보관하는 동작을 나누면 저장 버튼의 역할이 분명해집니다.


자동 저장이 있는데 왜 저장 버튼이 필요한가

처음 메모장은 입력할 때마다 내용을 보존했습니다. 사용자가 버튼을 누르지 않아도 된다는 장점이 있습니다. 그러나 메모가 하나의 긴 초안인지, 여러 개의 저장된 기록인지 구분하기 어려웠습니다.

저장 버튼에 부여한 역할은 다음과 같습니다.

  • 현재 편집 중인 내용을 이름 있는 메모로 보관한다.
  • 저장 시점을 기준으로 목록에 추가한다.
  • 이후 새 메모를 시작할 수 있다.
  • 사용자가 완료감을 느낀다.

자동 저장은 작업 중 손실을 막고, 저장 버튼은 하나의 메모를 확정합니다. 같은 단어를 사용해도 역할이 다릅니다.


기능 묶음이 만든 새로운 규칙

제목, 고정, 정렬이 함께 들어오면서 데이터 모델도 달라졌습니다.

필드 필요한 이유
id 제목이 같아도 메모를 구분
title 목록에서 내용을 빠르게 찾기
createdAt 생성 순서 표시
updatedAt 최근 수정 기준 정렬과 자동 정리
pinned 일반 정렬 순서보다 고정한 메모를 우선 표시
content 리치 텍스트 본문

AI에게 기능별 코드를 따로 요청하면 같은 메모 객체를 여러 방식으로 수정할 수 있습니다. 먼저 공통 데이터 구조와 편집·저장 시의 상태 변화를 정한 뒤 구현하는 편이 안전합니다.


저장 중·완료·실패를 화면에서 구분하기

버튼을 눌렀는데 아무 변화가 없으면 사용자는 다시 누릅니다. 저장 중, 성공, 실패 상태를 구분해야 합니다.

편집 중 → 저장 중 → 저장 완료
                  ↘ 저장 실패 → 다시 시도

AI가 저장 코드를 만들 때는 오류 처리뿐 아니라 버튼 비활성화, 중복 클릭, 성공 안내가 함께 있는지 확인해야 합니다. 저장 실패를 콘솔에만 출력하면 사용자는 성공한 것으로 오해합니다.


다음 편

저장한 메모가 늘어나자 한 가지 불안이 생겼습니다. 확장 프로그램을 삭제하거나 브라우저를 바꾸면 어떻게 될까요? 다음 편에서는 서버 없는 앱의 백업과 복원을 다룹니다.

댓글

이 블로그의 인기 게시물

React에서 Socket.IO Client 연결하기: CORS와 useEffect 정리

Xamarin WebView 예제를 .NET MAUI로 다시 만들기

Android Koin 적용하기: Compose와 ViewModel 의존성 주입