Local Web App Toolkit

로컬 웹 유틸리티 실습 가이드

외부 서버 연동 없이 내 웹 브라우저에서 안전하고 편리하게 구동하는 프리미엄 도구 모음입니다.

이 프로젝트는 현대적인 웹 프론트엔드 핵심 기술을 활용하여 일상에서 자주 사용되는 유틸리티들을 단일 HTML 파일로 경량화하여 개발한 실습 파일 세트입니다. 모든 코드가 브라우저 내에서 직접 작동하므로 속도가 빠르며 안전합니다.

유틸리티 실습 프로그램 목록

실습 1

바이브코딩 소개

바이브코딩 플랫폼의 핵심 철학과 프론트엔드 학습의 시작을 알리는 소개 페이지입니다.

  • 반응형 인터랙티브 레이아웃
  • 세련된 다크/라이트 테마 기본 적용
도구 실행하기
실습 2 & 4

QR 코드 생성기

원하는 URL이나 텍스트를 입력하여 나만의 프리미엄 QR 코드를 실시간 디자인하고 저장합니다.

  • Wi-Fi 및 이메일 전용 QR 지원
  • 이미지 다운로드 및 다크모드 개선(4번)
개선판 실행하기
실습 3

QR 코드 스캐너

웹캠 카메라나 QR 이미지 파일을 업로드해 신속하게 코드를 읽고 링크를 열 수 있는 스캐너입니다.

  • 장치 카메라 연동 실시간 스캐닝
  • 드래그 앤 드롭 파일 업로드 분석
도구 실행하기
PDF 유틸

로컬 PDF 분리 도구

대용량 PDF 문서에서 원하는 페이지만 편리하게 선택해서 별도 파일로 추출합니다.

  • PDF 실시간 페이지 썸네일 제공
  • 브라우저 메모리상 처리 (유출 방지)
도구 실행하기
PDF 유틸

로컬 PDF 압축 도구

브라우저 레벨에서 대용량 PDF 문서의 리소스 화질을 조절해 파일 용량을 최적화합니다.

  • 고압축 / 저압축 두 가지 모드 제공
  • 압축 전/후 용량 직관적인 수치 시각화
도구 실행하기

중요: 브라우저 보안에 따른 실행 제한 해결방법

PDF 미리보기 및 실시간 카메라 기능은 브라우저 보안 규정(CORS)으로 인해 단순히 파일을 더블 클릭해 실행할 경우(file:// 경로) 작동이 원활하지 않을 수 있습니다. 가상 로컬 웹 서버 환경에서 구동하는 것을 강력하게 권장합니다.

권장 로컬 웹 서버 실행 가이드

  1. VS Code 개발 환경(Live Server) 사용 시:

    VS Code 확장 탭에서 Live Server를 검색하여 설치하고, 실행할 HTML 파일 우측 하단의 [Go Live] 버튼을 클릭하여 구동하세요.

  2. Python 내장 웹서버를 이용할 시:

    터미널이나 명령 프롬프트(CMD)를 켠 다음, 현재 프로젝트 폴더 경로로 이동하여 아래 명령어를 입력합니다.

    python -m http.server 8000

    브라우저 주소창에 http://localhost:8000을 입력하여 접속하세요.

제공되는 실습용 샘플 파일

PDF 관련 실습 도구들을 쉽게 시험해볼 수 있도록 아래와 같은 대용량 샘플을 동봉해 두었습니다.

100% 로컬 보안 환경 작동 보장

프로그램 코드의 모든 작동(이미지 스캔, PDF 디코딩, 인코딩, QR 렌더링)은 사용자 브라우저 메모리 안에서 로컬하게 이루어지며, 외부의 서버로 파일이나 정보를 송출하지 않으므로 보안이 철저히 보호됩니다.