작성자: 컴맹 집사
대표 이미지: 계정 없이도 기록은 내 기기 안에만 남는다 (사진: webandi / Pixabay)
이 글에서 얻는 것
- 이런 분께 로그인 기능 없이 웹앱에 기록과 사진을 남기고 싶은 분
- 핵심 답 글자 위주는 LocalStorage, 사진이 많으면 IndexedDB, 기기 이동은 파일 내보내기. 이 앱은 LocalStorage를 기본으로 쓰고 파일 백업을 더했다
- 바로 쓰는 팁 “글자뿐인가, 사라지면 큰일인가, 여러 기기에서 봐야 하나” 세 질문에 답해 AI에게 알려 주면 맞는 저장 방법을 골라 준다
“다른 휴대폰에서도 내 작위증 볼 수 있어?”
이전 결과 보기 기능을 만들고 나서 받은 질문이다. 답은 “아니요”였다. 작위증을 휴대폰 브라우저 안에만 저장하고 있었기 때문이다. 게다가 앞으로 저장할 것은 점점 늘어날 참이었다. 작위증 재료와 사진, 아카데미 승급 단계, 게임 최고 기록, 첫 화면에 걸 “우리 집 왕” 사진까지.
그럼 로그인을 넣으면 되지 않을까? 초보자에게 그건 집을 한 채 더 짓는 수준의 공사였다. 그래서 질문을 바꿨다. “회원가입 없이 어디까지 저장할 수 있을까? 그중 우리 앱에 맞는 건 뭘까?”
잠깐, 로그인은 원래 왜 하는 걸까?
로그인을 피하려면 로그인이 하는 일부터 알아야 했다. AI의 설명을 쉽게 바꾸면 이렇다. 로그인은 서버에게 “이 데이터는 이 사람 거예요”라고 알려 주는 이름표다. 데이터를 회사 서버 한곳에 모아 두는 앱이라면, 누구 것인지 구분해야 하니 로그인이 꼭 필요하다.
거꾸로 말하면, 데이터를 사용자의 휴대폰 안에 두면 로그인이 필요 없다. 그 휴대폰 자체가 “이 사람 것”이니까. 우리 앱은 처음부터 이쪽이었다. 이유도 분명했다.
- 재미로 하는 집사 진단에 회원가입까지 할 사람은 거의 없다.
- 로그인이 생기면 비밀번호, 이메일 같은 개인정보를 책임져야 한다.
- 서버와 데이터베이스를 만들고 지키는 일은 초보자에게 너무 크다.
방법 1. LocalStorage, 브라우저 속 작은 공책
앞 글에서 다룬 그 공책이다. 이름표를 붙여 적어 두면 앱을 닫아도 남는다.
장점은 정말 쉽다는 것. 단점은 공책이 작고(보통 5MB 안팎) 글자만 적힌다는 것이다. 그래서 설정값, 마지막 결과, 게임 점수처럼 작은 기록에 딱 맞다. 사진을 많이 넣기에는 좁다.
방법 2. IndexedDB, 브라우저 속 큰 창고
AI가 사진 저장용으로 추천한 것이 IndexedDB였다. 이름은 외계어 같지만, 공책 옆에 있는 큰 창고라고 생각하면 된다. (출처: MDN 웹 문서, IndexedDB) 공책보다 훨씬 많이 넣을 수 있고, 사진 같은 큰 파일도 그대로 보관할 수 있다.
대신 사용법이 공책보다 복잡하다. 다행히 AI 말로는 이 창고를 쉽게 쓰게 도와주는 작은 도구도 있다고 한다. 사진을 많이 다루는 앱이라면 이쪽이 정답이다.
방법 3. 파일로 내보내기, 내 손에 쥐는 백업
세 번째는 발상이 다르다. 기록을 파일로 만들어 사용자가 직접 보관하게 하는 것이다. 브라우저 기록을 지워도, 휴대폰을 바꿔도 파일만 있으면 다시 불러올 수 있다. 다른 기기로 기록을 옮길 때도 쓸 수 있다.
출처: 왕립 개집사협회 앱 2026년 10월 1일 버전 화면, 직접 캡처
단점은 사용자가 파일을 직접 챙겨야 한다는 것. 사실 앞에서 만든 “작위증 이미지 저장”도 넓게 보면 이 방식이다. 작위증을 사진첩에 저장해 두면 앱 기록이 사라져도 증서는 남는다.
한눈에 비교
| 구분 | LocalStorage (공책) | IndexedDB (창고) | 파일 내보내기 |
|---|---|---|---|
| 어디에 | 브라우저 | 브라우저 | 내 휴대폰의 파일 |
| 얼마나 | 작음 (5MB 안팎) | 큼 | 거의 제한 없음 |
| 사진 | 어려움 | 가능 | 가능 |
| 난이도 | 쉬움 | 보통 | 보통 |
| 기록 삭제하면 | 사라짐 | 사라짐 | 남음 |
그래서 내가 고른 조합
결론은 단순했다. 공책을 기본으로 쓰고, 모자란 부분만 다른 방법으로 메운다.
- 작위증 재료, 아카데미 단계, 게임 기록 → 공책(LocalStorage). 모두 글자로 된 작은 기록이다.
- 사진 → 원본 대신 긴 쪽 900픽셀로 줄인 사진을 공책에 함께 넣는다. 자리가 모자라면 사진만 빼고 저장한다.
- 백업 → 작위증 이미지 저장과 기록 파일 내보내기. 휴대폰을 바꿔도 소중한 건 남는다.
창고(IndexedDB)도 진지하게 고민했다. 하지만 우리 앱은 작위증에 사진 한 장, 첫 화면에 사진 한 장이 전부였다. 줄인 사진 한두 장이면 공책으로도 충분했다. 나중에 사진 기능이 커지면 그때 옮기기로 하고, 지금은 “알아만 두기”로 정리했다.
나에게 맞는 방법 고르는 질문 세 가지
로그인 없는 앱을 만들려는 분이라면 아래 세 가지만 스스로 물어보면 된다.
- 저장할 것이 글자뿐인가, 사진도 많은가? 글자뿐이면 공책, 사진이 많으면 창고다.
- 사라지면 큰일 나는 자료인가? 그렇다면 파일 내보내기나 이미지 저장 같은 백업을 꼭 같이 둔다.
- 여러 기기에서 같이 봐야 하는가? 그렇다면 그때는 로그인과 서버가 필요하다는 신호다.
이 답을 AI에게 그대로 알려 주면, AI가 알맞은 저장 방법을 골라 준다.
사진 약속은 그대로 지켰다
사진을 저장하게 되면서 사용자에게 보여 주는 안내 문구도 다시 확인했다. “사진은 사용자의 기기 안에서만 처리·저장되며, 서버나 다른 곳으로 전송되지 않습니다.” 처음 사진 기능을 만들 때 한 약속이라, 저장 방식이 바뀌어도 이 문장만은 지켜야 했다.
첫 화면 “우리 집 왕” 사진과 작위증 사진은 서로 다른 이름표로 따로 저장했다. 첫 화면 사진을 바꿔도 이미 받은 작위증 사진은 그대로다. 헷갈리지 않도록 “이 사진은 작위증 사진과는 별개예요”라는 안내도 붙였다.
뜻밖에 막힌 곳: 누워 버린 폐하
첫 화면 사진을 만들다가 황당한 일을 겪었다. 휴대폰으로 세로로 찍은 사진을 올리면 폐하가 옆으로 누운 채 나오는 것이다. 알고 보니 사진 파일 안에는 “몇 도 돌려서 봐야 하는지”가 따로 적혀 있는데, 사진을 줄이는 과정에서 이 정보를 읽지 않아 생긴 문제였다. AI에게 그 정보를 읽어 방향을 바로잡아 달라고 해서 해결했다.
안전장치도 몇 가지 달았다. 20MB가 넘는 사진이나 이미지가 아닌 파일을 고르면 “사진 용량이 너무 커요”, “이미지 파일만 올릴 수 있어요”라고 알려 준다. 저장 공간이 모자라면 사진을 더 작게 줄여서 다시 해 보고, 그래도 안 되면 안내만 띄운다. 어떤 경우에도 앱이 멈추지 않는 게 원칙이었다.
여기까지로 집사 작위증 앱의 기본기는 다 갖췄다. 질문, 결과, 작위증, 사진, 저장, 공유, 기록까지. 이제 앱을 더 재미있게 만들 차례다. 첫 도전은 그림도 못 그리는 내가 앱 안에 웹툰을 넣는 것이었다.
이전 글: LocalStorage, 브라우저 속 작은 공책? 컴맹도 이해한 저장의 원리
다음 글: 그림 못 그려도 웹툰 연재? 앱 안에 만화 넣은 방법