전체 화면으로 건너뛰기

App 01인디 독서 기록 앱

dogear. 앱 아이콘
dogear.
도그이어

dogear.

읽던 곳을 접어두세요

책 한 권, 한 쪽, 한 문장. 작은 기록이 쌓여 나만의 서재가 되는 인디 독서 기록 앱. 책 모서리를 접는 몸짓 하나를 앱 전체의 언어로 삼았습니다.

독서 기록앰비언트 몰입 모드생성형 표지라이트 · 다크
분야
라이프스타일 · 독서
대상
매일 조금씩 읽고 기록하고 싶은 독자
작업 범위
서비스 기획 · 리서치, UX/UI 디자인, 인터랙티브 HTML 프로토타입, 디자인 시스템(토큰 · 아이콘 · 서체), 자동 QA, Flutter 이전 가이드
구분
자체 기획 컨셉 프로젝트 · 모바일 앱(iOS · Android)

Overview

무엇을 풀었나

대상 — 매일 조금씩 읽고 기록하고 싶은 독자

01문제

독서 기록 앱은 연속 기록·배지 같은 게임화나 업무용 카드 UI로 흐르기 쉽습니다. 읽는 일이 숙제처럼 느껴지고, 기록이 쌓여도 내 서재처럼 보이지 않습니다.

02해결

책 모서리를 접는 조용한 몸짓을 기록의 단위로 삼았습니다. 한 번 읽을 때마다 모서리가 접히고, 표지 없는 책도 타이포 표지와 책등으로 서재에 꽂힙니다.

03디자인 언어

종이·먹·리본 주홍. 오른쪽 위 모서리를 사선으로 접고, 접힌 뒷면은 언제나 리본 주홍입니다. 카드·FAB·주요 버튼·차트 막대·히트맵 칸까지 같은 모양을 씁니다.

Key features

핵심 기능

dogear.을(를) 다르게 만드는 4가지

01

접힌 모서리, 앱의 단 하나의 모양

독서를 마치면 모서리가 0에서 30으로 접히며 기록을 확인해 줍니다. 같은 모서리가 카드, 플로팅 버튼, 차트 막대에도 쓰여 화면 어디서나 dogear.임을 알아볼 수 있습니다.

  • 완료 순간을 접힘 애니메이션으로 확인
  • 모서리의 뒷면은 언제나 리본 주홍

02

몰입 독서와 앰비언트 팔레트

새벽·낮·해질녘·밤 네 가지 팔레트가 읽는 시간의 공기를 바꿉니다. 타이머와 쪽수 기록만 남기고 나머지는 물러납니다.

  • 시간대별 4가지 앰비언트 팔레트
  • 일시정지 · 완료 · 그만두기 확인까지 설계

03

생성형 타이포 표지와 한국식 책등

표지 이미지가 없는 책도 9개 팔레트 × 6개 템플릿으로 표지를 만듭니다. 책등 보기는 세로쓰기이고, 책등 두께는 쪽수에 비례합니다.

  • 표지 9 팔레트 × 6 템플릿
  • 세로쓰기 책등 · 두께 = 쪽수

04

쪽수 눈금자와 문장 카드

한 쪽에 눈금 하나. 책 상세에서 어디까지 읽었는지 눈금으로 보고, 밑줄 친 문장은 4:5·9:16 카드로 만들어 공유합니다.

  • 쪽수 눈금자 · 쪽수 다이얼 입력
  • 문장 카드 4:5(피드) · 9:16(스토리)

All screens

전체 화면 76장

모든 화면은 실제로 동작하는 HTML 프로토타입에서 자동 촬영했습니다. 화면을 누르면 크게 볼 수 있어요.

크게 보기에서 ← → 키 또는 좌우로 밀어 넘기기

온보딩

3
  • 00a온보딩 1
  • 00b온보딩 2
  • 00c온보딩 · 목표 정하기

오늘

3
  • 01오늘
  • 01b오늘 · 스크롤
  • 01c오늘 · 맨 아래

서재 · 책

5
  • 02서재 · 표지 보기
  • 02b서재 · 읽고 싶은 책
  • 03서재 · 책등 보기
  • 04책 상세
  • 04b책 상세 · 스크롤

몰입 독서

5
  • 05몰입 독서 · 밤
  • 05b몰입 독서 · 새벽(일시정지)
  • 05c몰입 독서 · 낮
  • 05d몰입 독서 · 해질녘
  • 05e독서 완료 · 모서리 접힘

밑줄 · 문장 카드

4
  • 06밑줄
  • 06b밑줄 · 스크롤
  • 07문장 카드 4:5
  • 07b문장 카드 9:16

통계 · 검색 · 설정

8
  • 08통계
  • 08b통계 · 차트
  • 08c통계 · 맨 아래
  • 09검색
  • 09b검색 결과
  • 09c검색 · 결과 없음
  • 10설정
  • 10b설정 · 맨 아래

시트 · 대화상자

9
  • D1대화상자 · 독서 그만두기
  • S1시트 · 문장 기록
  • S1b시트 · 문장 기록(입력)
  • S2시트 · 쪽수 기록
  • S3시트 · 빠른 추가
  • S4시트 · 책 메뉴
  • S5시트 · 정렬
  • S6시트 · 목표
  • S7시트 · 책 고르기

접근성

1
  • T1글자 크기 130%

Design system

디자인 시스템

색 · 서체 · 아이콘을 DTCG 토큰 JSON과 SVG 에셋으로 정리해 그대로 개발에 넘깁니다.

색 라이트 · 다크 토큰

라이트 · 종이와 먹

canvas#F3EEE4
surface#FBF8F1
sunken#EAE3D6
ink#1C1A16
ink-2#544D42
리본 주홍#C9411F
marker#EFCF7A
fold#DCD3C3

다크

canvas#13120F
surface#1C1A16
sunken#25221D
ink#F3EEE4
ink-2#B5AC9C
리본 주홍#EE5C3D
fold#3F3A32

차트

주홍#C9411F
파랑#3060B8
황토#D99A2B
초록#2A845A

서체 OFL 라이선스

읽던 곳을 접어두세요

Gowun Batang브랜드 세리프 · 제목 · 인용 · 큰 숫자

오늘 24쪽 읽었어요

PretendardUI 본문 · 버튼 · 목록

p.128 / 312

IBM Plex Mono쪽수 · 시간 · 메타 정보

브랜드 · 에셋

앱 아이콘
앱 아이콘먹 바탕 위 종이 한 장, 접힌 모서리는 리본 주홍
워드마크
워드마크소문자 dogear 와 주홍 마침표
생성형 타이포 표지9개 팔레트 × 6개 템플릿 · 퍼블릭 도메인 작품으로 시연
아이콘 · 일러스트 시트
아이콘 · 일러스트 시트SVG 아이콘 57종과 온보딩 일러스트

Deliverables & QA

산출물과 품질 검수

보기 좋은 시안에서 멈추지 않고, 개발자가 바로 옮길 수 있는 기준본을 만듭니다.

38화면 상태
(화면 10 · 시트 8 · 온보딩)
76스크린샷
라이트 38 · 다크 38
57SVG 아이콘
12화면별 명세 문서
11/11인터랙션 플로우
자동 검증 통과
45WCAG 대비 검사
전 항목 통과
668터치 영역 검사 요소
미달 0
0런타임 오류

동작하는 HTML 프로토타입

390×844 기준 실제 모바일 크기. 탭 이동, 스택 전환, 바텀시트 8종, 몰입 독서 타이머까지 손으로 만져볼 수 있습니다. 딥링크로 모든 화면 상태에 바로 갈 수 있습니다.

Flutter 이전 가이드

DTCG 토큰 → ThemeExtension 대응표, 화면별 명세 12편, 컴포넌트 대응, 한글 서브셋 폰트(23MB → 4.3MB)까지 Flutter로 옮길 준비를 마쳤습니다.

기술 스택

프로토타입 · 자동 검수

React 19TypeScriptViteTailwind CSS v4MotionZustandPlaywright