브라우저의 재발견
브라우저 능력 사전
설치 없이 브라우저로 쓰는 94가지 능력을 12개 분류로 정리했습니다. 능력마다 해결하는 문제, 쓰는 브라우저 기술과 라이브러리, 서버 의존도, 자주 막히는 곳, 만들 수 있는 AI·웹·피지컬 서비스, 코딩 에이전트에게 줄 프롬프트를 담았습니다.
모델은 바뀌어도, 여러분이 배운 단어는 안 바뀝니다.
능력 목록
내 컴퓨터 파일 메모장
파일 핸들을 받아 내 컴퓨터의 파일을 열고, 같은 파일에 그대로 덮어 저장합니다.
HWPX 공문 일괄 생성 (템플릿 보존)
원본 한글 파일을 통째로 품고 본문의 글자 자리(<hp:t>)만 갈아 끼워, 한글에서 그대로 열리는 공문을 브라우저에서 대량으로 만듭니다.
파일 부족 판별기
파일 앞부분 몇 바이트와 ZIP 구조를 확인해 네 부족(ZIP+XML, 순수 텍스트, 오픈 데이터, 닫힌 바이너리) 중 하나로 판정합니다.
만능 텍스트 추출기
hwpx, docx, pptx, xlsx는 사실 ZIP 묶음입니다. 브라우저에서 풀어 XML 속 글자만 꺼냅니다.
PDF 합치기와 쪼개기
PDF를 서버에 올리지 않고 브라우저에서 페이지를 복사하고 순서를 바꿔 새 PDF를 만듭니다.
서버 없이 엑셀·PDF·QR 만들기
SheetJS로 엑셀을, jsPDF로 PDF를, QR 라이브러리로 QR 코드를 브라우저 안에서 바로 만들어 내려받습니다.
브라우저는 XML 해석기다
브라우저에 내장된 DOMParser로 XML을 나무 구조로 읽고, querySelector나 XPath로 찾고, XMLSerializer로 다시 글자로 되돌립니다.
인터넷 없이 도는 이중 로딩
라이브러리를 먼저 같은 폴더의 ./libs/에서 찾고, 없을 때만 CDN에서 받는 방식으로 인터넷 없이도 동작하게 합니다.
브라우저 안의 저장소
작은 설정은 localStorage에, 많은 기록과 파일은 IndexedDB에 저장해 서버 없는 앱을 만듭니다.
영상으로 스크롤 페이지 만들기 (Film Slicer)
영상을 끌어다 놓으면 브라우저가 프레임을 하나씩 캔버스에 그려 뽑고, 스크롤하면 영상이 감기는 페이지를 HTML 한 장으로 만들어 줍니다.
움직임이 불꽃이 되는 거울
AI 모델 없이 직전 화면과 픽셀을 비교해, 움직인 자리에서만 불꽃이 피어오르게 합니다.
색깔 물건으로 허공에 그리기
화면에서 탭한 물건의 색을 기억하고 그 물건을 따라가며 허공에 빛나는 선을 그립니다.
입김으로 촛불 끄기
마이크 소리를 주파수별로 나눠 바람 소리의 낮은 대역을 찾아내고, 그 세기로 촛불을 끕니다.
목소리로 나는 새
소리의 평균 크기(RMS)를 재서 게임 속 새를 띄우는 힘으로 바꿉니다. 시작할 때 주변 소음으로 기준을 맞춥니다.
박수로 무대 조명 켜기
평소 소리보다 갑자기 크게 튀는 순간을 박수로 판단합니다. 두 번 연달아 치면 다른 동작을 합니다.
목소리로 음정 맞추기
소리 파형의 반복 주기를 찾아 음높이(Hz)를 구하고 계이름으로 바꿔 목표음과 비교합니다.
손가락 신디사이저
음원 파일 없이 코드로 소리를 만듭니다. 손가락 위치가 음높이와 음색이 되고, 여러 손가락으로 화음을 냅니다.
목소리 변조 녹음기
녹음한 목소리를 오디오 데이터로 풀어 효과 장치(노드)에 통과시켜 다른 목소리로 들려줍니다.
화면 녹화 스튜디오
화면, 웹캠, 마이크를 캔버스 한 장에 합쳐 녹화하고 영상 파일로 받습니다.
캔버스 영상 인코더
캔버스에 그린 애니메이션을 그대로 녹화해 영상 파일로 만듭니다. 1화 프레임 분해기의 반대 방향입니다.
업로드 없이 영상 자르고 바꾸기
영상 처리 도구 FFmpeg를 웹 어셈블리로 브라우저에 올려 자르기, 변환, 압축을 내 기기 안에서 처리합니다.
가상 배경 만들기
카메라 영상에서 사람만 픽셀 단위로 오려 배경을 흐리게 하거나 단색·사진·훈련장 그림으로 바꿉니다.
눌러서 물체 오려내기
사진에서 오리고 싶은 물체를 한 번 누르면 AI가 테두리를 찾아 배경 없는 PNG로 오려 줍니다.
얼굴을 스케치로 바꾸기
얼굴 사진을 컬러 스케치 그림으로 바꿉니다. 사진은 기기 안에서만 처리됩니다.
손으로 불씨 옮기기
카메라 영상에서 손가락 관절 21개를 실시간으로 찾아 집기와 누르기 동작을 판정합니다.
말로 하는 대피 훈련
한국어로 말한 문장을 글자로 바꾸고, 그 안에서 방향과 숫자를 찾아 명령으로 실행합니다.
안내방송 스튜디오
기기에 들어 있는 목소리로 문장을 읽고, 지금 읽는 단어를 화면에 표시합니다. 차임 소리는 코드로 만듭니다.
AI가 보는 깊이로 불꽃 가리기
사진 한 장에서 AI가 픽셀마다 거리를 추정하고, 가까운 물체 뒤로 가상 불꽃이 숨게 합니다.
사물 인식 화재 안전 안내
카메라에 보이는 물체 80종의 위치와 이름을 찾고, 물체에 맞는 안전 안내를 그 위에 붙입니다.
부서 문서 검색기
문서를 문단으로 나눠 뜻을 숫자 묶음(벡터)으로 바꿔 저장하고, 질문과 뜻이 가까운 문단을 찾습니다. 서버가 필요 없습니다.
사진 속 글자 읽기
사진이나 스캔 이미지 속 한글과 영어를 브라우저 안에서 글자로 바꿉니다.
인터넷 없는 받아쓰기
음성 인식 모델을 브라우저에 내려받아 녹음이나 음성 파일을 인터넷 없이 글자로 바꿉니다.
인터넷 없는 읽어주기
음성 합성 모델을 브라우저에서 돌려 자연스러운 목소리 파일을 만듭니다. 기기 내장 목소리보다 품질이 높습니다.
브라우저 속 언어 모델
내 PC의 그래픽카드로 작은 언어 모델을 브라우저 안에서 돌립니다. 질문이 밖으로 나가지 않습니다.
로컬 AI 비서 북마클릿
북마크 하나를 누르면 지금 보는 웹페이지 위에 채팅창이 떠서, 내 PC의 Ollama가 페이지를 요약합니다.
크롬에 내장된 AI (Prompt API)
크롬 안에 들어 있는 작은 AI 모델(Gemini Nano)을 LanguageModel.create() 한 줄로 부릅니다. 데이터가 기기 밖으로 나가지 않습니다.
40줄 AI 챗봇과 페르소나
HTML 안에서 fetch로 AI API를 부르면 40줄로 챗봇이 됩니다. 시스템 프롬프트 한 줄을 바꾸면 부산 아지매 봇, 조선 선비 봇이 됩니다.
인터넷 없는 로컬 AI와 브라우저 화면
내 PC에서 도는 Ollama(localhost:11434)를 HTML의 fetch로 부르면 인터넷 없는 AI와 브라우저 화면이 완성됩니다.
몸으로 하는 소방 훈련
몸 33개 지점(발목, 뒤꿈치, 발끝 포함)을 실시간으로 잡아 발로 불씨 차기, 스쿼트 세기, 자세 낮추기 훈련을 합니다.
손 모양 리모컨
주먹, 손바닥, 브이, 엄지 위·아래 같은 손 모양을 이름으로 알아보고, 0.6초 유지하면 슬라이드를 넘깁니다.
전신 따라 하는 아바타
얼굴 478개, 양손 42개, 몸 33개 지점을 동시에 잡아 아바타가 눈·입·손가락·팔까지 따라 합니다.
표정으로 조종하기
얼굴 점 478개와 표정 수치 52가지를 읽어, 입을 벌리면 점프하는 게임, 표정 계기판, 얼굴에 씌우는 소방 헬멧을 만듭니다.
이게 뭘까 카메라
카메라 장면을 1,000가지 이름 중에서 맞혀 상위 5개를 보여 줍니다. 자주 나오는 이름은 한국어를 함께 표시합니다.
소리 알림판
마이크 소리를 521가지로 알아보고 화재경보, 연기 감지기, 사이렌, 유리 깨짐 같은 소리가 들리면 칸을 켜고 진동하며 기록합니다.
글을 알아보는 AI 3종
언어 감지(한국어 포함 110여 개), 영어 문장 감정 분류, 영어 문장 뜻 비교를 기기 안에서 실행합니다.
브라우저 속 언어 모델 (Gemma)
작은 언어 모델(Gemma) 파일을 골라 그래픽카드로 브라우저 안에서 대화합니다. 서버와 API 키가 없습니다.
HTML로 파이썬 하기 (Pyodide 실험실)
파이썬 실행기를 웹 어셈블리로 브라우저에 올려 pandas, matplotlib, scikit-learn까지 설치 없이 돌리는 14가지 도구 실험실입니다.
엑셀처럼 쓰는 HTML 한 장 (ExcelHTML)
셀 입력, 기본 수식, 정렬·필터, 조건부 서식, 차트, 파일 불러오기와 AI 패널까지 갖춘 단일 HTML 스프레드시트입니다.
CSV 자동 분석기 (DataLens)
CSV를 끌어다 놓으면 열의 종류를 스스로 파악해 차트 6종을 자동으로 만들고, 끌어서 쓰는 피벗 표를 제공합니다.
파일에 바로 SQL 묻기
브라우저 안에서 도는 데이터베이스(DuckDB-WASM, sql.js)로 CSV·Parquet 파일에 바로 SQL을 던집니다.
비슷한 사진 찾기
사진을 숫자 묶음(임베딩)으로 바꾸고, 하나를 고르면 나머지를 닮은 순서로 정렬합니다.
국내증시 수급분석기 (크롬 확장)
종목을 입력하면 네이버 증권의 수급 데이터를 모아 외국인·기관·개인 흐름을 그래프와 표로 보여 주는 크롬 확장 프로그램입니다.
브라우저 콘솔 자동화
화면 캡처 대신 요소의 실제 구조를 AI에게 건네면, AI가 정확한 코드를 써서 반복 작업을 콘솔에서 처리합니다.
네트워크 탭으로 숨은 API 찾기
개발자 도구의 네트워크 탭에서 화면 뒤의 데이터 요청(JSON)을 찾아 "Copy as fetch"로 복제하면, 같은 데이터를 코드로 받을 수 있습니다.
클릭 녹화해서 자동화 코드 뽑기
개발자 도구의 Recorder 패널에서 내 클릭과 입력을 녹화해 재생하고, Puppeteer 자동화 코드로 내보냅니다.
즐겨찾기 버튼 도구 (북마클릿)
콘솔 코드를 즐겨찾기 주소로 저장해, 버튼 한 번으로 어느 사이트에서나 실행합니다.
AI가 브라우저를 조작하는 에이전트
브라우저 속 AI는 내장형(크롬의 Gemini, 엣지의 Copilot), 확장형(Claude in Chrome), 대체형(AI 브라우저)의 세 단계로 나뉩니다. 무엇을 맡기고 무엇을 확인할지가 핵심입니다.
Playwright의 두 얼굴
개발자의 테스트 도구인 Playwright는 ① 웹사이트 자동 조작과 ② HTML을 인쇄 품질 PDF로 뽑는 렌더링 엔진이라는 두 얼굴을 가집니다.
교실 소음 신호등
소리 크기를 0~100 지수로 바꿔 신호등 색으로 보여 주고, 시끄러운 상태가 이어지면 목소리로 안내합니다.
알림 타이머
끝나는 시각을 기준으로 남은 시간을 계산해, 다른 탭에 있어도 정확한 때에 운영체제 알림을 띄웁니다.
꺼지지 않는 무대 시계
화면 켜짐 유지를 요청해 아무것도 만지지 않아도 화면이 꺼지지 않게 하고, 큰 시계와 스톱워치를 띄웁니다.
바이브코딩 프롬프트 복사판
누르는 순간 프롬프트가 클립보드에 들어가 AI 채팅창에 바로 붙여 넣을 수 있습니다.
업무도구 5종 통합 HTML (57KB)
견적 계산, 실적 추적, 계약 체크, IP 대장, 역할표(RACI)를 57KB 파일 하나에 담고 데이터는 브라우저에 저장합니다.
AI 강사 브라우저 툴 50선
"브라우저로 만들 수 있는 업무도구" 후보 50개를 인터랙티브 목록으로 정리한 아이디어 뱅크입니다.
웹 애니메이션 사전 72종 (vibe-webeffect)
스크롤, 마우스 올리기, 등장 같은 웹 효과 72가지를 맥락에 맞게 골라 AI가 코드로 적용합니다.
손가락 불꽃놀이
손가락마다 다른 번호(pointerId)를 받아 여러 손가락을 동시에 구분하고, 누르는 힘으로 불꽃 크기를 바꿉니다.
전체화면 전광판
작은 캔버스에 글자를 그린 뒤 점 단위로 읽어 LED 점으로 다시 그리고, 화면 가득 흘려보냅니다.
AR 소화기 훈련
바닥을 인식해 실제 공간에 가상의 불을 고정하고, 소화기 사용 순서(PASS)대로 끄는 과정을 채점합니다.
병무청 3D 신체검사 참고 시뮬레이터
누를 수 있는 3D 인체 모형과 BMI 계산을 HTML 한 장에 담았습니다. 버전 차이로 생긴 오류를 고친 과정 자체가 교육 소재입니다.
지진 재난대응 3D 시뮬레이터
상황실 화면 느낌의 3D 도시와 위기경보 4단계, 대피 애니메이션을 HTML 한 장으로 만든 시연물입니다.
3D 장면 만들기
브라우저의 그래픽 기능으로 돌려 보고 확대할 수 있는 3D 장면을 만듭니다.
자바스크립트 0줄 CSS 인터랙션
details, :has(), :target, scroll-snap 같은 CSS 기능만으로 아코디언, 탭, 슬라이더, 다크 모드를 만듭니다.
글로 쓰면 그려지는 다이어그램
간단한 텍스트 문법으로 흐름도, 순서도, 간트 차트를 쓰면 브라우저가 그림으로 바꿉니다. AI가 쓰기 가장 쉬운 그림 언어입니다.
화면 색 수집 팔레트
화면 어디서든 색을 집어 모으고, 사진에서 주요 색을 뽑고, 글자를 올렸을 때 읽기 좋은지 대비를 계산합니다.
더블클릭 실행 버튼과 USB 이식
.bat이나 PowerShell 파일 하나로 로컬 서버를 켜고 브라우저를 여는 "실행 버튼"을 만듭니다. 설치가 막힌 곳에는 Node를 USB에 담아 갑니다.
빌드 없는 import 한 줄
브라우저가 직접 이해하는 모듈 방식(ES Modules)과 import map으로, 설치·빌드 없이 import 한 줄로 라이브러리를 씁니다.
남의 사이트를 내 수정본으로 덮어쓰기
개발자 도구 Sources 탭의 Local Overrides로 사이트 파일을 내 수정본으로 덮어써 새로고침해도 유지하고, 자주 쓰는 코드는 Snippets에 저장합니다.
Elements 탭으로 즉석 고치기
Elements 탭에서 글자와 스타일을 바로 고쳐 보고, 콘솔에서 document.designMode를 켜면 페이지 전체를 문서처럼 편집할 수 있습니다.
브라우저의 숨은 제어판
chrome://inspect로 휴대폰 크롬을 PC에서 디버깅하고, chrome://flags로 실험 기능을 켜고, Lighthouse로 아무 사이트나 성능·접근성을 진단합니다.
수료 카드 만들어 공유하기
캔버스로 카드 이미지를 그린 뒤 휴대폰 공유 창으로 이미지째 보냅니다.
무료 호스팅 3종으로 배포하기
GitHub Pages, Netlify, Vercel에 HTML 폴더를 올려 무료 HTTPS 주소를 받습니다. 카메라·센서 기능은 HTTPS여야 동작합니다.
기울여서 비상구로
휴대폰의 기울기 센서 값을 공의 가속도로 바꾸고, 충돌하는 순간 진동으로 손에 알려 줍니다.
흔들어서 주사위 굴리기
가속도 센서 값에서 중력을 빼 흔드는 세기를 구하고, 기준을 넘으면 주사위를 굴린 뒤 진동합니다.
걸으며 위치 기록하기
GPS 위치를 계속 받아 이동 거리와 속도, 지나온 길을 기록하고 나침반 방향을 보여 줍니다.
게임패드로 소방차 운전
USB·블루투스 게임패드의 스틱과 버튼을 매 순간 읽고, 패드에 진동을 돌려보냅니다.
블루투스 기기 탐색기
주변 블루투스 저전력 기기를 골라 연결하고, 심박 같은 값을 실시간으로 받아 그래프로 그립니다.
USB 센서 실시간 그래프
USB로 꽂은 보드가 한 줄씩 보내는 숫자를 실시간 그래프로 그리고, 웹에서 보드로 명령을 보냅니다.
NFC 안전 점검 투어
휴대폰을 NFC 스티커에 대면 태그 번호와 적힌 글을 읽어 점검 기록을 쌓고, 스티커에 글을 써 넣습니다.
USB 기기 직접 다루기 (WebUSB·WebHID)
WebHID와 WebUSB로 키보드·게임 컨트롤러 같은 입력 장치나 USB 기기와 브라우저가 직접 신호를 주고받습니다.
내 기기 상태 대시보드
웹페이지가 알 수 있는 기기 정보를 모아 보여 주고, 충전기나 와이파이 상태가 바뀌면 즉시 반영합니다.
보안이 엄격한 사이트에 AI 창 띄우기
Shadow DOM으로 사이트 디자인과 격리하고, 문자열을 HTML로 넣는 대신 요소를 하나씩 조립해 Trusted Types 정책을 통과합니다.
CORS와 실행 3단계
브라우저는 페이지가 어디서 왔는지(출처)에 따라 통신을 제한합니다. 더블클릭, Live Server, 로컬 서버 순으로 실행 방법을 올립니다.
되는 것과 책임지고 써도 되는 것
개발자 도구를 비개발자가 업무 자동화에 가져다 쓰는 것을 "도구의 전유"라고 합니다. 약관, 보안 정책, 기록 남기기를 함께 가르쳐야 그림자 자동화를 막습니다.
얼굴 자동 모자이크
카메라와 사진에서 얼굴을 찾아 모자이크나 흐림으로 가리고, 처리한 사진을 저장합니다. 사진은 기기 밖으로 나가지 않습니다.
조건에 맞는 능력이 없습니다. 거르기를 하나 풀거나 다른 단어로 찾아 보세요.