[앱인토스] 한줄서재(One-Liner)

[ 한줄서재(One-Liner) ]

 책 속 좋은 문장을 기록하고, 39종의 예쁜 카드로 꾸며서 공유하는 문장 수집 앱

 

스크린샷 / 데모

 

https://minion.toss.im/tp1Tzy7a

토스 한줄서재

 

https://youtube.com/shorts/V9FOBykYARw?feature=share

 

 

기술 스택

• React 19 + TypeScript
• Vite 7
• Tailwind CSS 3.4
• Tesseract.js (카메라 OCR)
• html2canvas (카드 이미지 저장)
• Sentry (에러 트래킹)

 

왜 만들었나

책을 읽다 보면 마음에 꽂히는 문장이 있습니다.
밑줄을 긋고, 사진을 찍고, 메모장에 옮겨 적기도 하죠.
그런데 그렇게 모은 문장들, 나중에 다시 꺼내보신 적 있나요?
대부분 갤러리 어딘가에 묻히거나, 메모장 속에서 잊혀집니다.
그래서 생각했습니다.

기록한 문장을 예쁜 카드로 만들어서 간직하고 공유할 수 있다면?
그렇게 이 앱이 탄생하게 되었어요.

주요 기능
  - 오늘의 문장 — 매일 기록한 문장 중 하나를 랜덤으로 보여줌
  - 문장 기록 — 직접 입력 또는 카메라 OCR로 책 촬영 후 자동 추출
  - 내 서재 — 7개 카테고리(응원/위로/감사/사랑/지혜/성장/자유)로 분류 관리
  - 카드 꾸미기 — 39종 템플릿(클래식, 감성, 판타지, 레트로 등)으로 카드 생성 및 저장
  - 검색 — 문장, 책 제목, 저자로 바텀시트 검색
  - 일괄 삭제 — 선택 모드 + 전체 선택으로 여러 문장 한번에 정리
  - 보상형 광고 — 프리미엄 카드 템플릿 잠금 해제

 

배운 점
  - Tesseract.js WASM 기반 OCR 엔진의 한국어 인식 최적화와 Worker 로딩 전략
  - html2canvas로 DOM → 이미지 변환 시 웹폰트 렌더링 타이밍 이슈 해결
  - 39종 카드 템플릿에서 문장 길이별 동적 폰트 스케일링 설계

 

어려웠던 점

  - 39개 카드 템플릿마다 폰트, 배경, 레이아웃이 달라 문장 길이에 따른 폰트 크기 자동 조절 로직이 가장        
  복잡했음. 템플릿별 min/max fontSize를 두고 글자 수 구간으로 스케일링하는 방식으로 해결
  - 카메라 OCR에서 한국어 인식률이 기대보다 낮아 kor.traineddata 학습 데이터를 직접 번들링하고, 촬영 가이드  
  UI를 추가하는 과정에서 시행착오 발생
  - BottomSheet 애니메이션에서 transform: translateY → transform: none 전환 시 텍스트가 흐려지는 서브픽셀    
  렌더링 문제. settled 상태를 분리하여 GPU 레이어 해제 타이밍을 제어

  링크
  
   - GitHub: https://github.com/miracle380301/toss-oneLiner
   - 서비스: 토스 앱인토스 (심사 예정)

 
 다음 계획

  - 토스 앱인토스 심사 제출
  - Sentry DSN 이메일 알림 규칙 설정
  - 사용자 피드백 반영 및 UI 개선
  - 광고 SDK 연동 (프리미엄 템플릿 실제 광고 교체)
  - 문장 공유 기능 (카카오톡, 인스타그램 스토리)