지난 2년간 유명 개발자 사이먼 윌리슨은 LLM을 사용하여 150개 이상의 "HTML 도구"를 개발했습니다. "단일 파일 HTML + 네이티브 브라우저 기능 + AI 프로그래밍"을 결합한 그의 경험은 주목할 만합니다. 최근 블로그 게시물 "HTML 도구 구축을 위한 유용한 패턴"에서 사이먼은 "HTML 도구"라고 부르는 매우 가볍고 실용적이며 유지 관리가 쉬운 소프트웨어 개발 패턴을 소개합니다. HTML 도구는 HTML, JavaScript, CSS가 모두 단일 파일에 포함되어 백엔드 서버 없이 실행될 수 있는 소형 애플리케이션을 의미합니다. https://t.co/SCvbUyXZ1p "HTML 도구"란 무엇인가요? • 단일 파일 아키텍처: 모든 코드(HTML/JS/CSS)가 하나의 파일에 있습니다. 복잡한 빌드 프로세스(예: Webpack 또는 npm)가 필요 없고, 서버 배포도 필요 없으며, 파일을 브라우저에서 직접 열거나 복사하여 붙여넣는 것만으로 배포할 수 있습니다. • LLM 기반: 이러한 도구의 대다수는 ChatGPT, Claude, Gemini와 같은 AI의 도움을 받아 작성되었습니다. 단일 파일 구조는 AI가 전체 코드 컨텍스트를 한 번에 읽거나 생성할 수 있기 때문에 LLM에 매우 적합합니다. 핵심 건축 패턴 및 기법 사이먼은 복잡성을 줄이고 사용성을 향상시키기 위한 효율적인 개발 "모범 사례"들을 요약했습니다. • 복잡한 프레임워크 사용 자제: 저자는 AI 생성 코드를 사용할 때 "React 미사용"을 강력히 권장합니다. React와 같은 프레임워크는 컴파일 단계를 필요로 하므로 단일 파일 애플리케이션의 이식성을 저해하고 디버깅 및 배포를 어렵게 만듭니다. 네이티브 JavaScript 또는 간단한 CDN 라이브러리가 더 나은 선택입니다. • LLM의 "캔버스" 기능을 활용한 프로토타이핑: ChatGPT 캔버스 또는 Claude 아티팩트를 사용하여 인터랙티브 프로토타입을 신속하게 생성할 수 있습니다. • CDN 종속성: PDF 처리 및 차트 그리기와 같은 타사 라이브러리가 필요한 경우 CDN 링크를 통해 직접 가져와 로컬 코드를 깔끔하게 유지하고 종속성을 제거할 수 있습니다. • 능숙한 국가 관리: • URL 매개변수: 도구의 상태(예: 편집 중 구성)를 URL에 저장하여 사용자가 공유 링크를 통해 현재 작업 상태를 공유할 수 있도록 합니다. • localStorage: API 키와 같은 민감한 데이터 또는 대량의 텍스트를 저장하는 데 사용되며, 데이터가 사용자의 브라우저에만 유지되고 서버에 업로드되지 않도록 하여 개인 정보 보호를 보장합니다. • 브라우저의 기본 기능을 활용하세요: • CORS API: 백엔드 포워딩 없이 브라우저 프런트엔드에서 도메인 간 요청을 지원하는 공개 API를 직접 호출할 수 있습니다. • 파일 처리: ``을 사용하여 파일을 클라우드에 업로드하지 않고 로컬에서 파일을 읽고 처리할 수 있습니다(예: 이미지 자르기, OCR 인식). • WebAssembly 및 Pyodide: WebAssembly를 사용하면 브라우저에서 Python 데이터 분석(Pandas) 또는 복잡한 C++ 라이브러리(FFmpeg 및 Tesseract 등)를 실행할 수 있어 프런트엔드 도구의 기능을 크게 확장할 수 있습니다. 이 모델이 중요한 이유는 무엇일까요? 이는 인공지능 시대의 소프트웨어 개발 패러다임 변화를 보여줍니다. • 진입 장벽 낮추기: 개발자는 특정 문제점(예: JSON을 특정 형식으로 변환, 이미지에서 텍스트 추출 또는 API 디버깅)을 해결하는 간단한 도구를 매우 저렴한 비용(몇 분)으로 구축할 수 있습니다. • 데이터 주권 및 개인정보 보호: 이 도구는 정적이며 로컬에서 실행되므로 사용자는 개인 데이터를 제3자 서버로 전송할 필요가 없습니다. • 재사용성 및 리믹스 가능성: 코드가 단순하고 독립적이므로 기존 도구의 코드를 AI에 "컨텍스트"로 쉽게 입력할 수 있어 기존 기능을 기반으로 새로운 도구를 신속하게 개발할 수 있습니다.
