HM소프트

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

장부 관리 데모 앱을 GitHub Pages에 올리며 밟은 Vite·React 빌드·배포 함정 기록. npm ci와 lock 정합성, tsc -b 타입 검사 차단, Tailwind v4 @apply 미적용, body overflow-hidden 전역 스타일 사고, SPA 새로고침 404를 HashRouter로 회피, base 경로와 단일 CSS 번들, Pages 배포 권한까지 순서대로 다룹니다. 2편: 빌드와 배포1편에서 에디토리얼 스타일 UI를 다뤘다. 이번 편은 이 데모를 GitHub Pages에 올리며 만난 실전 트러블슈팅이다. 작은 데모라도 "빌드가 통과하고, CI가 돌고, 정적 호스팅에서 보이게" 하는 데는 잔 함정이 많았다.1) CI 실패: npm ci vs npm installGitHub A..

장부 관리 데모 앱을 흔한 SaaS 대시보드 룩에서 벗어나게 만든 에디토리얼 디자인 시스템 구축기. 극단적 타이포 대비와 번트 오렌지 단일 액센트, Tailwind v4 @theme 토큰과 CSS 변수 폰트 페어링, 번호 매긴 내비게이션과 비대칭 그리드, 장부형 테이블, 두 번 갈아엎으며 일관성으로 수렴한 과정을 다룹니다.시리즈를 시작하며장부(가계부/회계) 관리 데모 앱을 만들며, "AI가 찍어낸 것 같지 않은" 디자인을 목표로 삼았다. 흔한 SaaS 대시보드 룩에서 벗어나, 에디토리얼(잡지) 스타일의 UI를 입혔다. 두 편으로 나눠 기록한다.(이 글) 에디토리얼 스타일 UI와 브랜드 아이덴티티Vite + React 빌드·배포 트러블슈팅스택은 React + TypeScript + Vite, 스타일은 Ta..

Electron 키오스크 모드(전체화면·close 이벤트 차단·Ctrl+Shift+Q 탈출구·setLoginItemSettings 자동실행)와, 같은 코드를 mock electronAPI로 브라우저 웹 데모로 배포한 기록. isDev 분기, SQL 문자열 흉내 mock, transform scale 반응형, Vite base 경로, .nojekyll 함정까지 다룬다.같은 코드를 데스크톱 앱과 브라우저, 두 곳에서 돌리기시리즈의 마지막 편이다. 앞선 세 편에서 렌더러와 메인 사이의 IPC 경계, Konva 기반 디자인 편집기, 그리고 실제 하드웨어를 흉내 내는 스텁을 차례로 다뤘다. 이번 편의 주제는 두 가지다. 하나는 현장에 놓인 기기를 "앱에서 빠져나갈 수 없는 상태"로 가두는 키오스크 모드, 다른 하..