HM소프트

Canvas 실시간 미리보기와 PNG 내보내기를 한 렌더 함수로 통일해 화면과 결과물을 일치시킨 과정을 다룬다. 화면 캡처 라이브러리를 버리고 원본 픽셀을 읽어 배경색을 추정해 덮고, 오츠 이진화로 글자색을 추정하며, 폰트 크기 이진탐색·디바운스·렌더 버전 검사로 어긋남을 막은 이미지 텍스트 교체 도구 구현 기록이다. 3편: 미리보기와 내보내기1편 엔진, 2편 위저드/상태에 이어 시리즈 마지막이다. 사용자가 입력한 것이 결과물로 떨어지는 부분, 실시간 미리보기와 PNG 내보내기를 다룬다.실시간 미리보기 패널이 도구의 사용감을 좌우하는 부분이다. 사용자가 텍스트를 바꾸거나 항목을 옮길 때마다, 결과가 어떻게 보일지 즉시 보여줘야 한다. "바꾸고 → 결과 보기" 버튼을 누르는 흐름이면 답답하다.그래서 미리보..

브라우저 OCR 엔진을 인식과 렌더링 두 단계로 분리하고, 로컬 모델·클라우드·경량 엔진 폴백 사슬과 다중 전처리 앙상블로 한글 인식 정확도를 높인 과정을 정리한다. 픽셀에서 글자색·획 두께를 추정하고 원본을 깎지 않는 비파괴 오버레이로 새 글자를 덮어 PNG로 내보내는 이미지 텍스트 교체 도구 설계를 다룬다.OCR과 오버레이 렌더링 엔진을 만든 과정을 정리한다. 시리즈를 시작하며이미지 안에 박혀 있는 글자를, 원본 디자인은 그대로 둔 채 다른 내용으로 바꿔주는 웹 도구를 만들었다. 이미지를 올리면 OCR로 글자를 읽어 위치를 잡고, 그 자리에 새 텍스트를 덮어 그린 다음, 결과를 PNG로 내보낸다.세 편으로 나눠 기록한다.(이 글) OCR + 오버레이 텍스트 교체 엔진스텝 위저드 UX와 전역 상태 설계..

Konva와 react-konva로 터치 키오스크 디자인 편집기를 만든 기록. 상태는 zustand가, 그리기는 Konva가 맡는 소유권 분리, 레이어=배열 순서 모델, 원형 clipFunc 클리핑, onTap 터치 대응, 그리고 USB 이미지를 IPC로 읽어 data URL로 캔버스에 얹는 연동까지 정리했다.키오스크의 심장, 디자인 편집기1편에서 Electron의 메인/렌더러 분리와 IPC 경계를 다뤘다. 이번 편의 주제는 이 무인 키오스크에서 사용자가 가장 오래 머무는 화면 — 캔버스 디자인 편집기다. 손님이 직접 원형 굿즈에 들어갈 디자인을 만든다. 텍스트를 얹고, 자기 USB에 담아 온 사진을 올리고, 미리 준비된 캐릭터를 골라 배치한다. 다 만들면 미리보기 → 결제 → 인쇄로 넘어간다.이 한 화..