단일 파일, 이식 가능, 자동 업데이트되는 순수 HTML 웹앱

• Hyperclay는 모든 UI, 로직, 데이터가 하나의 HTML 파일에 통합되는 방식의 웹앱 제작을 지원함
• 파일 자체에서 변경 즉시 즉각적인 수정 및 실시간 공유가 가능하며, 앱의 외형과 동작, 편집 방식까지 직접 제어할 수 있음
• 별도의 빌드·배포 과정, 데이터베이스 또는 복잡한 백엔드 없이 즉시 실행·저장 구조를 제공함
• HTML 파일 하나만으로 브라우저, 서버, 오프라인 등 어디서나 앱을 실행하고, 모든 변경사항이 버전 관리 및 복구됨
• 현대 웹 개발의 복잡성을 줄이고, 실시간으로 살아 있는 인터랙티브 앱을 누구나 쉽게 만들 수 있게 설계함

소개: HTML 파일 하나로 만드는 살아 있는 웹앱, Hyperclay

• Hyperclay는 프로그래머가 복잡한 인프라 관리 없이, 하나의 이식 가능한 HTML 파일로 제품을 빚듯 웹앱을 만드는 경험을 제공함
• 기존 웹 개발에서 필수였던 설정 파일, 빌드, 프레임워크, 배포 파이프라인 등을 없애고, 파일 한 개만으로 완결되는 구조를 목표로 함

핵심 컨셉 및 장점

• 앱이 하나의 HTML 파일로 구성됨
• 시각적 UI를 통해 파일 자체를 실시간으로 편집할 수 있고, 이 편집 내용이 바로 앱의 상태로 영구 저장됨
• UI, 로직, 데이터가 모두 한 파일 안에 동적으로 포함되어 있음
• 사용자는 문서처럼 앱을 즉시 수정하고, 변경사항을 바로 공유·다운로드하여 오프라인 사용도 가능함
• "Google Docs for interactive code"라는 비유처럼, 공유와 수정, 소유권 제어가 자유로움

주요 기능 요약

• 직접 조작: 앱이 실행되는 동안 바로 편집 가능함. 컴파일, 새로고침 없이 변경이 즉시 반영됨
• What you see is what you build: UI를 수정하거나 소스 코드를 직접 편집하면 곧바로 앱이 바뀌며 중간 계층 없음
• 진정한 이식성: 앱을 HTML 파일로 내보내어 어디에서나(서버·오프라인) 동일하게 실행 가능함. 모든 저장시 버전 관리가 적용되어 복구 가능함
• 이 모든 것이 특별한 기술 없이, 오직 표준 HTML 파일 한 개로 이루어짐

기술적 구조

• Hyperclay는 NodeJS 서버와 클라이언트 측 JS 라이브러리로 구성됨
• HTML 페이지가 자체적으로 DOM을 수정하면, 변경된 document.body.outerHTML을 서버에 보내고, 이 HTML 파일 자체가 갱신됨
• 체크박스의 checked 속성 등 앱 내의 변경 사항이 영구적으로 HTML 코드에 저장되어, 다음 접속에서도 동일한 상태를 재현할 수 있음
• 버전 관리와 읽기/쓰기 권한 관리 지원

실제 예시

• 직접 편집 가능한 블로그, 근무 시간 체크리스트 등 모든 앱을 HTML 한 파일로 작성 및 저장 가능함
• contenteditable 속성이나, <input type="checkbox" persist> 형태로 바로 앱의 상태를 문서에 기록함

배경 및 문제의식

• 매년 수십 개의 웹사이트를 제작하며, 웹앱 코딩이 글쓰기만큼 자연스러웠으면 하는 니즈가 있었음
• 전통적인 정적 웹사이트는 변경사항이 휘발적임(사용자 행위가 저장되지 않음)
• 데이터 영속성을 웹에 구현하려면, 데이터베이스·API·템플릿·계정 시스템 구축 등 과도한 작업이 필요함
• 프로토타입, 간단한 도구, 개인 개발 로그, 블로깅 등 빠르게 만들고 실시간으로 수정, 공유하고 싶은 요구에 비효율적임

Hyperclay의 해결 방식

• HTML 한 파일에 UI·상태·동작이 통합됨
• 마치 데스크탑 앱을 여는 것처럼 손쉽게 열고 곧바로 수정, 결과를 온라인에 바로 반영 가능함
• 영속적(shared, cloneable, persistent)인 디지털 오브젝트 개념을 제시함
• 웹사이트 빌더, 문서·도표·프레젠테이션 툴, 대시보드, 블로그, 설문·퀴즈 제작, 데이터 시각화 등 다양한 도구에 적용 가능함

전체 개념 요약

• 웹앱 대부분은 이미 HTML을 사용함
• 중간 단계를 생략하면 HTML 파일이 전체 데이터베이스/ API/ UI 역할을 하여, 스택이 단 몇 줄로 단순화됨
• 개발자는 복잡성을 줄이고, 최소한의 코드로도 사용성과 유지관리가 우수한 앱을 만들 수 있음

Hyperclay 사용 예시

• 블로그, 체크리스트 등 어떤 앱이든 단 한 개 HTML로 작성·배포·공유·편집 가능함
• <div contenteditable>내 블로그!</div> 형태로 바로 사용 가능, <input type="checkbox" persist>로 각 상태가 문서에 영구 기록됨

결론

• Hyperclay는 웹 개발의 번거로움 없이, 누구나 가볍고 이식성이 뛰어난 인터랙티브 웹앱을 제작하고, 실시간으로 공유·저장·복구할 수 있는 새로운 방법을 제시함
• 개발자, 디자이너 뿐 아니라 누구든 쉽게 사용할 수 있는 차세대 웹앱 플랫폼임