LingerBreath - 슬로우 타이핑 명상 웹앱

LingerBreath 도덕경 1장 화면

LingerBreath는 소셜 미디어와 AI 시대의 정보 과잉에 지친 사람을 위한 디지털 안식처입니다. 도덕경 같은 동양 고전을 한 장씩, 한 글자씩 천천히 따라치면서 텍스트와 단둘이 머무는 경험을 만듭니다. “Linger on each breath. Breathe with each line.”

서비스 바로가기

스크린샷

Arrival 화면 - 챕터 미리보기 + Begin slowly
Active typing - 라인별 잉크 깨어남 Completion - You lingered here

컨셉

도덕경 1장을 평범하게 읽다가 갑자기 눈물이 났던 경험에서 출발했습니다. 그 순간 어떤 기능도 쓰지 않았고, 그저 텍스트 앞에 머물렀을 뿐입니다. LingerBreath는 그 머무름을 화면 위로 옮기는 시도입니다.

  • 종이책 + 펜 → 진입장벽 높고 휴대 어려움
  • 명상 앱(Calm, Headspace) → 음성 기반, 시각·텍스트 깊이 부족
  • e-book → 속도 통제 없음, 안식 분위기 없음

이 사이에 비어있는 자리: 속도를 강제하지 않는 디지털 환경에서 고전을 천천히 따라치며 머무는 경험.

핵심 디자인 결정

  • 타이핑은 제2악장, 만남이 먼저 - 첫 화면은 입력 필드가 아니라 읽기 침묵. dim 컬러의 챕터 미리보기 위에 ink-black “Begin slowly” 하나만 떠 있음. 클릭하면 dim이 라인별로 깨어남.
  • 방 전체가 호흡 - 페이지 배경, 상단 잉크 mark, 커서가 모두 같은 15초 사이클(4 bpm, 전통 프라나야마 시작 페이스)로 동기화. 명상 가이드 없이 환경이 리듬을 안내.
  • Soft pace - 차단 없음 - 오타는 조용히 무시. 정타 키 하나가 dim 글자를 ink로 깨움. “잉크가 종이에 스며드는” 메타포.
  • Anti-AI-slop 가이드 - 만다라/연꽃/보라 그라디언트/카드 격자 모두 금지. 손글씨 잉크 stroke를 호흡 마커로 사용 (Gemini 이미지 생성 + ffmpeg colorkey로 투명화).
  • 사용자 자신의 페이스 알아차림 - 빠르게 칠 때 강제로 늦추지 않음. 환경이 한결같이 호흡하니까 사용자가 스스로 알아차림.

사용 기술

현재 (프로토타입) - vanilla HTML/CSS/JS, ~30KB 총량, 의존성 0:

  • HTML / CSS / JavaScript - Next.js·React를 검토하고 쓰지 않기로 했습니다. 글자 단위 DOM 조작이 React 조정(reconciliation)과 맞지 않고, 정적 텍스트 + localStorage뿐인 앱에 프레임워크는 과합니다.
  • Cloudflare Pages - 정적 호스팅, 글로벌 CDN. Wrangler CLI로 자동 배포.
  • Cloudflare DNS - lingerbreath.com 도메인 + SSL 자동 발급.
  • localStorage - 챕터 진행도, dwell time 저장. DB 없음, 계정 없음.

예정 (검증 통과 후) - Vite + TypeScript + plain CSS:

  • 챕터 데이터: content/tao-te-ching/legge-1891/chapter-NNN.json + manifest
  • TypingEngine: framework-independent imperative DOM 모듈
  • 성능 예산: JS < 35KB gzip, CSS < 15KB gzip, 1초 첫 렌더 on slow 4G

검증 과정

만들기 전에 제품·디자인·엔지니어링 세 갈래로 AI 리뷰를 돌려 방향을 잡았습니다.

  • 제품 리뷰 - 만들 것은 “고전 해석 위키”가 아니라 “AI 시대의 고전 안식처”라는 결론. 초기 컨셉을 여기서 틀었습니다
  • 디자인 리뷰 - 위 다섯 가지 디자인 결정을 확정
  • 엔지니어링 리뷰 - Next.js + Tailwind 대신 Vite + TypeScript + plain CSS. 프레임워크 전환은 사용자 검증을 통과한 뒤로 미룸
  • 직접 검증 - 1장을 끝까지 타이핑하며 처음의 정서 반응이 다시 오는지 확인. 이어서 지인 5명에게 같은 과정을 부탁

콘텐츠

  • Tao Te Ching 1~10장 (Phase 1 MVP)
  • 영문 번역: James Legge, The Sacred Books of the East vol. 39 (1891) - public domain
  • 향후 (단계 4): Bhagavad Gita, 스토아 명언, 논어/장자 등 확장 검토