contenteditable
엑셀처럼 쓰는 HTML 한 장 (ExcelHTML)
해결하는 문제
간단한 표 계산과 차트를 위해 무거운 프로그램을 켜야 한다.
셀 입력, 기본 수식, 정렬·필터, 조건부 서식, 차트, 파일 불러오기와 AI 패널까지 갖춘 단일 HTML 스프레드시트입니다.
서버 의존도
외부 AI·서비스의 API 키가 필요합니다. 키를 페이지에 넣어 배포하면 노출되므로 주의합니다.
브라우저만브라우저 + CDN브라우저 + API 키브라우저 + 엣지 함수서버 필요
데이터가 흐르는 길
무엇이 들어와서 브라우저 안에서 어떻게 바뀌어 나가는지 정리했습니다.
들어오는 것CSV·TSV·XLSX·JSON 파일 또는 직접 입력
브라우저가 하는 일셀 값과 수식을 계산하고 서식·차트 적용
나오는 것표, 차트, 저장 파일, AI 분석 결과
쓰는 브라우저 기술
DOM 표·이벤트File APICanvas 차트fetch (AI 패널)
라이브러리와 모델
SheetJS (엑셀 읽기·쓰기)
바꿀 수 있는 옵션
- 지원 수식 범위
- 틀 고정·필터
- AI 패널의 API 설정
자주 막히는 곳
- 수식 엔진을 직접 만들면 엑셀과 계산 규칙이 미묘하게 다를 수 있다
- API 키를 페이지에 넣어 배포하면 노출된다
이 능력으로 만들 수 있는 서비스
같은 기술을 AI 서비스, 웹 서비스, 피지컬 AI로 넓힌 예시입니다.
AI 서비스
- 선택 영역을 해석하고 수식을 만들어 주는 AI 패널
웹 서비스
- 설치 없는 팀 계산표
- 교육용 스프레드시트
피지컬 AI
- 센서 기록을 바로 붙여 넣어 분석
넓히는 방법
- 피벗 표
- 여러 시트
- 오프라인 AI(브라우저 속 모델) 연결
지원 브라우저
PC 크롬·엣지된다
맥 사파리된다
안드로이드 크롬된다
아이폰 사파리된다
코딩 에이전트에게 줄 프롬프트
복사해서 Claude, Codex, Cursor 같은 코딩 에이전트에 그대로 붙여 넣습니다.
셀 입력, SUM·AVERAGE 수식, 정렬, 필터, 차트, CSV·XLSX 불러오기가 되는 스프레드시트를 HTML 파일 하나로 만들어줘.
같은 분류의 능력
05 데이터 분석·대시보드에 속한 다른 능력입니다.
무료로 보는 것
체험 페이지, 한 줄 설명, 미리보기 영상
스킬팩 구성
full.html, skill.md, prompt.md, rules.md, customize.md, troubleshooting.md, 예시 데이터, agent-instructions.md