localStorage
업무도구 5종 통합 HTML (57KB)
해결하는 문제
견적·실적·계약·대장 관리가 여러 엑셀 파일에 흩어져 있다.
견적 계산, 실적 추적, 계약 체크, IP 대장, 역할표(RACI)를 57KB 파일 하나에 담고 데이터는 브라우저에 저장합니다.
서버 의존도
서버 없이 브라우저 기본 기능만 씁니다.
브라우저만브라우저 + CDN브라우저 + API 키브라우저 + 엣지 함수서버 필요
데이터가 흐르는 길
무엇이 들어와서 브라우저 안에서 어떻게 바뀌어 나가는지 정리했습니다.
들어오는 것업무 입력값
브라우저가 하는 일탭별로 계산하고 브라우저 저장소에 보관
나오는 것업무 화면, 내보내기 파일
쓰는 브라우저 기술
localStorageDOMBlob 내보내기
라이브러리와 모델
외부 라이브러리 없이 브라우저 기본 기능만 씁니다.
바꿀 수 있는 옵션
- 탭 구성
- 저장 키 이름
- 내보내기 형식 (CSV·JSON)
자주 막히는 곳
- 브라우저 데이터를 지우면 함께 사라지므로 내보내기 백업이 필수다
- 다른 PC와 자동 동기화되지 않는다
이 능력으로 만들 수 있는 서비스
같은 기술을 AI 서비스, 웹 서비스, 피지컬 AI로 넓힌 예시입니다.
AI 서비스
- 입력한 실적을 요약해 주간 보고 초안 작성
웹 서비스
- 소규모 조직 업무 포털
피지컬 AI
- 현장 태블릿 업무 단말
넓히는 방법
- IndexedDB로 대용량 저장
- 팀 공유는 파일 주고받기로
- 백업·복원 버튼
지원 브라우저
PC 크롬·엣지된다
맥 사파리된다
안드로이드 크롬된다
아이폰 사파리된다
코딩 에이전트에게 줄 프롬프트
복사해서 Claude, Codex, Cursor 같은 코딩 에이전트에 그대로 붙여 넣습니다.
견적 계산, 실적 추적, 계약 체크리스트, 지식재산 대장, RACI 표를 탭으로 나눈 업무 도구를 HTML 하나로 만들고 데이터는 localStorage에 저장해줘.
같은 분류의 능력
07 단일 HTML 앱에 속한 다른 능력입니다.
무료로 보는 것
체험 페이지, 한 줄 설명, 미리보기 영상
스킬팩 구성
full.html, skill.md, prompt.md, rules.md, customize.md, troubleshooting.md, 예시 데이터, agent-instructions.md