guide
브라우저에서만 처리된다는 말을 직접 확인하는 법
브라우저에서 처리합니다라는 문구만으로는 부족하다. 파일 선택 버튼이 로컬 파일을 읽는 것인지, 서버 업로드를 시작하는 것인지 화면만 보고는 구분하기 어렵다. 내가 만든 도구도 설명만 적어두기보다 현재 코드에서 실제 처리 경로를 다시 확인했다.
네 도구를 코드 기준으로 확인했다
| 도구 | 입력값 | 현재 처리 방식 | 서버 저장 |
|---|---|---|---|
| zozincanvas | 이미지 파일, 도형, 텍스트 | FileReader와 Canvas | 없음 |
| TEXT_TO_IMG | 문구, 색상, 크기 | Canvas toBlob, 설정은 localStorage | 없음 |
| WTHeat | 선택한 음식 후보 | React 상태와 localStorage | 없음 |
| 정산 칠판 | 멤버, 영수증, 정산 결과 | 공통 계산 로직과 localStorage | 없음 |
zozincanvas의 현재 script.js에는 업로드용 fetch나 XMLHttpRequest가 없다. 선택한 파일은 FileReader로 읽고 Canvas에 그린다. 다운로드할 때는 새 Canvas 결과를 toDataURL로 만든다.
TEXT_TO_IMG도 문구를 Canvas에 그린 뒤 toBlob으로 PNG, JPG, WebP 파일을 만든다. localStorage에는 마지막 색상과 크기 같은 설정이 들어가지만 입력 문구를 서버 계정에 저장하지 않는다.
WTHeat은 선택한 음식 ID 목록을 localStorage에 넣는다. 최종 선택은 crypto.getRandomValues를 사용할 수 있으면 그 값을 쓰고, 서버 추천 API를 호출하지 않는다. 정산 칠판도 모임 데이터를 현재 브라우저에 보관하고 공통 계산 함수로 결과를 만든다.
이 내용은 2026년 7월 22일 저장소 상태를 기준으로 확인한 것이다. 나중에 동기화나 분석 기능이 추가되면 달라질 수 있으므로 개인정보처리방침과 네트워크 요청을 다시 보는 게 맞다.
개발자 도구에서 확인하는 가장 쉬운 순서
Chrome이나 Edge에서 직접 확인하려면 개발자 도구의 Network 탭을 연다.
- 페이지를 새로고침하고 초기 파일 요청이 끝날 때까지 기다린다.
- Network 목록을 한 번 지운다.
- 이미지를 고르거나 문구를 입력하고 결과를 만든다.
- 새로 생긴
fetch나xhr요청이 있는지 본다. - 요청이 있다면 URL, 전송 방식, Request Payload를 확인한다.
폰트, 광고, 분석 스크립트처럼 페이지 자체가 불러오는 외부 요청은 있을 수 있다. 중요한 건 내가 고른 이미지나 입력 문구가 요청 본문에 실리는가다. 파일 선택 뒤 큰 POST 요청이나 업로드 진행률이 생긴다면 서버 처리를 의심해야 한다.
localStorage는 서버 저장이 아니지만 영구 보관도 아니다
브라우저 저장소는 현재 기기와 브라우저 프로필 안에 있다. 서버 계정과 동기화되지 않는 대신 브라우저 데이터를 지우면 사라질 수 있다. 시크릿 모드에서는 저장이 제한되거나 창을 닫을 때 없어질 수 있다.
그래서 WTHeat 후보와 정산 칠판 모임 데이터는 장기 보관용으로 보면 안 된다. 정산이 끝나기 전에 브라우저 데이터를 지우면 복구할 서버가 없다. 정산 칠판에는 백업과 복원 기능이 있는 이유가 여기에 있다.
브라우저 처리여도 조심해야 하는 경우
로컬 처리라는 사실이 공개 안전을 보장하지는 않는다. API 키가 보이는 캡처를 가리지 않고 내려받아 블로그에 올리면 결과는 그대로 공개된다. 계좌번호를 텍스트 이미지로 만든 뒤 단체방에 올리는 것도 마찬가지다.
또 브라우저 확장 프로그램, 운영체제 클립보드, 다운로드 폴더는 해당 웹 도구와 별개의 영역이다. 민감한 자료를 다룬다면 불필요한 확장 프로그램을 끄고 공용 컴퓨터를 피하는 게 낫다.
서버 기능이 있는 도구가 더 나은 경우도 있다
여러 기기에서 이어서 작업하거나, 팀원이 같은 문서를 편집하거나, 공유 링크가 필요하다면 서버 저장이 편하다. 문제는 서버를 쓰는 것 자체가 아니라 사용자가 그 사실과 보관 기준을 모르는 것이다.
짧은 캡처 가리기, 텍스트 이미지 만들기, 점심 후보 고르기처럼 한 기기에서 끝나는 작업은 브라우저 처리가 잘 맞는다. 반대로 장기 정산 장부나 공동 편집은 로그인과 백업이 있는 서비스를 쓰는 편이 낫다.
내가 확인하는 질문은 결국 다섯 개다. 입력이 네트워크로 나가는가, 어디에 저장되는가, 지우는 방법이 있는가, 기기를 바꾸면 이어지는가, 개인정보처리방침이 실제 코드와 맞는가. 이 질문에 답이 보이지 않으면 민감한 입력값은 넣지 않는다.