사용자는 React 화면에서 파일을 선택합니다. File API가 파일을 ArrayBuffer로 읽어 @rhwp/editor의 loadFile에 전달하고 로컬 studio iframe의 rhwp WebAssembly 엔진이 문서를 처리합니다. 저장 버튼은 exportHwp로 바이트를 받아 Blob과 다운로드 링크로 파일을 저장합니다. 화면과 파일 흐름은 본인 구현이며 문서 엔진은 rhwp 오픈소스를 활용합니다.
직접 구성한 React 화면
새 문서 진입과 파일 선택 화면, 현재 파일명, 저장·닫기 버튼과 로딩 표시를 구성했습니다.
rhwp 에디터 임베드
@rhwp/editor의 createEditor를 사용하고 프로젝트의 studio 페이지를 iframe으로 연결합니다. 문서 처리·편집 기능은 오픈소스 엔진을 활용합니다.
파일과 에디터 수명 관리
ArrayBuffer 파일 전달, exportHwp 결과의 Blob 다운로드, 파일 입력 초기화와 destroy 호출을 연결했습니다.
기술 선택 이유
rhwp · @rhwp/editor
기본적인 HWP/HWPX 처리를 처음부터 구현하는 대신 Edward Kim의 MIT 라이선스 rhwp 오픈소스를 활용했습니다. 문서 엔진의 역할과 본인의 UI·연동 작업을 구분합니다.
React · TypeScript · Vite
파일명·로딩·에디터 표시 상태와 버튼 동작을 구성하고 Vite로 로컬 웹 화면을 실행합니다.
File API · Blob · WebAssembly
앱은 파일을 ArrayBuffer로 읽어 전달하고 저장 결과를 Blob으로 내려받습니다. 문서 처리는 임베드한 오픈소스의 WebAssembly 엔진을 사용합니다.
DB · API · 인프라 구조
정적 studio 자산
studio HTML·JavaScript·WASM과 관련 자산을 프로젝트에 포함하고 임베드 URL로 연결합니다.
브라우저 파일 처리
앱 코드에는 로컬 파일 선택과 에디터 전달, HWP 다운로드 흐름이 있습니다. 별도 서버 DB를 사용하는 구조로 소개하지 않습니다.
핵심 처리 흐름
01. 파일 선택 또는 에디터 진입
시작 화면에서 문서를 선택하거나 에디터 화면으로 이동합니다.
02. 오픈소스 에디터 초기화
createEditor로 studio iframe을 연결하고 준비된 에디터 인스턴스를 관리합니다.
03. 문서 데이터 전달
파일을 ArrayBuffer로 읽고 loadFile에 파일명과 데이터를 전달합니다.
04. 저장과 닫기
exportHwp 결과를 Blob 다운로드로 연결하고 닫기·해제 시 에디터 인스턴스를 정리합니다.
내가 직접 구현한 것
개인 불편에서 출발한 도구 기획
OS 재설치 후 한글을 다시 설치하는 번거로움을 기본적인 웹 문서 도구로 해결해보려 했습니다.
화면과 사용 흐름 구현
문서 선택·시작 화면·파일명·로딩 표시·저장·닫기 UI를 구성했습니다.
오픈소스 연동
rhwp 에디터 임베드와 파일 API, 다운로드·에디터 수명 관리를 연결했습니다. 문서 엔진 개발은 오픈소스의 기여입니다.
03 / RESULTS & VALIDATION
결과/검증 — 그래서 무엇이 좋아졌는가
직접 사용해보는 웹 도구 구성
오픈소스를 활용해 기본 문서 흐름을 시험할 수 있는 개인용 도구를 만들었습니다.
기본 기능 중심의 구현 범위
완성된 한글 대체 제품이 아니라 포트폴리오와 개인 테스트를 위한 도구입니다. 복잡한 문서의 조판·서식·편집 호환성은 추가 검증이 필요합니다.
검증 방법과 근거
앱 코드와 rhwp 임베드 API를 확인하고 임시 로컬 환경에서 시작 화면과 문서 에디터 화면을 실행해 확인했습니다. 캡처에는 오픈소스에 포함된 기능 확인용 샘플 문서를 사용하며 개인 문서는 사용하지 않습니다. rhwp 제공 샘플 HWP를 열고 HWP로 다운로드한 뒤 저장한 파일을 다시 여는 흐름을 확인했습니다. 모든 문서 형식이나 편집 기능의 호환성을 검증한 것은 아닙니다.
