낯선 밑줄

모르는 사람과 전자책 한 권, 일기장 한 권을 천천히 주고받는 익명 교환독서·교환일기 웹앱.

바로 써 보기: https://exchange-reading.vercel.app

설치나 로그인 없이 브라우저(휴대폰·PC)에서 주소를 열면 바로 홈이 나옵니다. 일반 창·시크릿 창·다른 브라우저는 각각 다른 익명 사용자가 되므로, 창 2~3개로 "낯선 사람"끼리의 함께 읽기·교환일기를 바로 해 볼 수 있습니다.

1. 제작한 것 소개

낯선 밑줄은 친구끼리 하던 교환독서를 낯선 사람과의 경험으로 바꾼 익명 슬로우 소셜 웹앱입니다.

교환독서는 한 권의 책을 돌려 읽으며 밑줄과 메모를 남기는 놀이입니다. 그런데 아는 사람끼리는 생각이 닮아 있고, 속마음을 적기엔 부끄럽고, 같이 할 사람이 없으면 시작조차 못 합니다. 그래서 이름도 얼굴도 없이 펜 색으로만 구분되는 낯선 사람과 책과 일기를 주고받게 했습니다.

주요 기능

홈	함께 읽기	블라인드	교환일기

스크린샷은 배포 주소(exchange-reading.vercel.app)에서 README용 예시 데이터로 찍은 휴대폰(375px) 화면입니다. 처음 화면(PC)만 PC 크기로 찍었습니다. (11/2, 23단계 기준)

로그인 없이 시작 — 처음 접속하면 화면 뒤에서 익명 계정이 만들어지고 그 브라우저에 기억됩니다(Supabase 익명 로그인).

책 읽기 — 저작권이 끝난 한국 단편 8편(운수 좋은 날, 봄·봄, 메밀꽃 필 무렵, 날개, 동백꽃, B사감과 러브레터, 감자, 벙어리 삼룡이)을 문단 단위로 읽습니다. 문단을 누르면 여백에 메모(300자)를 남기고, 오른쪽 여백에 메모 개수가 동그라미로 표시됩니다.

	혼자 읽기	함께 읽기
방	나만 있는 방. 같은 책을 다시 열면 같은 방	같은 책의 빈자리 있는 방(최대 3명). 없으면 새 방
펜 색	검정 펜	남은 색 중 하나: 파란 펜 · 초록 펜 · 주황 펜
메모	나만 봅니다	같은 방 사람들이 펜 색별로 봅니다
블라인드	—	내 메모가 없는 문단은 "숨겨진 메모 N개"로만 보입니다. 내가 먼저 쓰거나 "그냥 보기"를 누르면 열립니다
답글	—	메모 아래 한 단계 답글

일기 쓰기 — 날마다 바뀌는 "오늘의 질문"(10개 순환)을 보며 공책 줄 위에 1,000자 이내로 씁니다.

	혼자 쓰기	교환일기
시작	바로 내 일기장이 생깁니다	기다리는 사람이 있으면 바로 짝. 없으면 "짝을 기다리는 중"
쓰기	언제든	번갈아 한 편씩. 마지막 글이 내 글이면 "짝의 답장을 기다리는 중"으로 잠깁니다
홈 표시	편 수	"내 차례" · "짝의 차례" · "짝을 기다리는 중" (알림 대신)

형광펜 (22단계)

• 형광펜 — 문장을 고르면 밑줄 긋기와 형광펜 칠하기 중에 고른다. 형광펜도 내 펜 색으로 칠해지고, 누르면 밑줄처럼 한마디·답글이 열린다.

새 디자인 (17단계)

• 참고 이미지의 느낌으로 앱 전체를 다시 꾸몄다. 처음 화면의 입자감 있는 책등 세 권을 누르면 교환독서·교환일기·독서 달력으로 간다.
• 사이드바는 아이콘 메뉴, 책장은 색 표지가 있는 흰 카드로 바꿨다. 책 본문과 일기는 읽기 편한 고운바탕으로 두었고, 21단계에서 손글씨 글꼴을 없애 밑줄 한마디·답글·편지도 같은 글꼴로 맞췄다. 자세한 내용은 docs/DESIGN.md에 있다.

듣기 (16단계)

• 듣기(TTS) — 리더의 "듣기" 버튼으로 지금 읽는 문단부터 기기의 음성으로 읽어 준다. 멈추기, 앞·다음 문단, 속도, 목소리를 고를 수 있고 읽는 문단을 화면이 따라간다. 브라우저 음성(Web Speech API)을 쓰므로 목소리는 기기마다 다르고, 한국어 음성이 없는 기기에서는 쓸 수 없다.

내 취향대로 보기 (14단계)

• 쪽 수 고르기 — 페이지 모드에서 자동·한 쪽·두 쪽을 고른다. 두 쪽은 화면 너비 700px 이상에서 보인다.
• 책장 배치 — 목록·3열·4열 중에서 고르고, 브라우저에 기억한다. 목록은 읽기 버튼이 책 옆에 있다. 표지 이미지가 없는 책은 제목과 저자로 만든 글자 표지를 쓴다.
• 책 머리 글자 — 글자 크기를 바꾸면 책 제목과 안내 글도 같은 비율로 바뀐다.

읽는 화면 다듬기 (13단계)

PC에서 페이지 모드로 읽을 때 펼친 책처럼 두 쪽이 나란히 보이는 화면입니다.

• 두 쪽 보기 — 화면이 넓으면(900px 이상) 페이지 모드가 펼친 책처럼 두 쪽씩 보이고 두 쪽씩 넘어간다.
• 글자 크기 픽셀 지정 — 12~40px을 직접 넣거나 ±로 맞춘다. 작게·보통·크게 바로가기도 있다.
• 책 끝 정돈 — 페이지 모드의 편지·다음 책 쪽을 가운데에 놓고, "이 방 나가기"를 눈에 띄는 버튼으로 바꿨다. 스크롤 모드 본문 옆의 색 띠는 없앴다.

오래 함께하기 (12단계)

• 같은 사람들과 다음 책 — 함께 읽기 책 끝에서 다음 책을 제안하고, 방 사람 모두가 좋다고 하면 같은 펜 색으로 새 방이 열린다. 서로 누구인지는 끝까지 모른다. 거절은 상대에게 따로 알리지 않는다.
• 나의 독서 달력 — 언제 얼마나 읽고 썼는지(읽은 문단, 밑줄, 답글, 편지, 일기)를 나만 보는 달력에 쌓는다. 점수나 연속 기록은 없다.

오래 쓰기 위한 기능 (10단계)

• 나만의 열쇠 — 로그인이 없어서 브라우저를 바꾸면 기록에 다시 들어갈 수 없다. "나만의 열쇠"(12자)와 복구 링크를 만들어 두면, 다른 브라우저에서 열쇠를 넣어 내 책·일기장·짝과의 교환일기를 그대로 옮겨 온다. 열쇠는 DB에 해시로만 저장하고, 원문은 그 브라우저에만 기억해 /key에서 언제든 다시 볼 수 있다.
• 짝이 멀어졌을 때 — 교환일기에서 짝의 차례로 7일 넘게 멈추면 "짝이 잠시 멀어졌어요. 기다릴까요, 마무리할까요?"를 묻고, 조금 더 기다리기·마무리하기·마무리하고 새 짝 찾기를 고른다. 마무리해도 지난 일기는 두 사람 모두 볼 수 있다.
• 다 읽은 뒤 기념 카드 — 책 끝에서 함께 그은 밑줄·한마디·편지를 독서 영수증 한 장으로 모아 이미지로 저장하거나 공유한다. (20단계에서 대출 카드 모양을 영수증으로 바꿈)
• 책장 넓히기 — 이상 「날개」, 김유정 「동백꽃」, 현진건 「B사감과 러브레터」, 김동인 「감자」, 나도향 「벙어리 삼룡이」를 더해 8권. 저작권 보호기간이 끝난 작품만 넣는다.

사용 후 개선 (9단계)

책처럼 넘기는 페이지	밑줄에 한마디	날짜별 일기·댓글

• 책처럼 넘기는 페이지 — 글이 문단을 넘어 쪽으로 이어진다(빈자리 없음). 화면 가장자리를 누르거나 밀어서 넘긴다.
• 밑줄에 한마디 — 문장에 밑줄을 그을 때 짧은 한마디를 붙일 수 있다. 밑줄을 누르면 한마디와 답글이 열린다. 함께 읽기에서는 그 문단에 내 밑줄을 먼저 그어야 남의 한마디가 보인다(블라인드). 문단 메모는 이것으로 대신했다.
• 일기장 이름 바꾸기, 내 일기 지우기, 일기마다 댓글.
• 같은 질문 — 교환일기는 두 사람이 같은 질문에 한 번씩 답한 뒤 다음 질문으로 넘어간다.
• 날짜별 탭 — 달력에서 날짜를 누르면 그날 쓴 일기만 따로 보는 탭이 열린다.

화면 구조 (8단계)

처음 화면 (PC)	일기 달력

• 처음 화면에서 교환독서와 교환일기 중 하나를 고른다. 왼쪽 사이드바(휴대폰은 ☰)로 언제든 오갈 수 있다.
• 교환독서(/read): 내 책, 책장. 교환일기(/diary): 내 일기장, 새 일기장 시작하기(혼자 · 낯선 사람과 · 아는 사람과 코드로).
• 일기장은 "일기" 탭이 먼저다. 달력에 일기를 쓴 날이 쓴 사람의 펜 색으로 칠해지고(교환일기에서 둘 다 쓴 날은 반반), 날짜를 누르면 그날 일기로 간다. 쓰기는 "오늘의 일기 쓰기" 탭에서.

마감 후 추가한 기능 (7단계)

페이지로 읽기	밤 모드	문장 밑줄	다 읽고 편지

• 읽는 방식 고르기 — "보기 설정"에서 스크롤 또는 페이지. 페이지는 좌우로 밀거나 ‹ › 버튼·키보드 ← →로 넘기고 쪽수가 보인다.
• 글자 크기·밤 모드 — 글자 3단계(13단계에서 픽셀 지정으로 바꿈), 어두운 바탕(앱 전체, 홈에도 버튼).
• 이어 읽기 — 다시 열면 마지막으로 읽던 문단부터. "처음부터 읽기"도 있다.
• 랜덤 또는 참여 코드 — 함께 읽기·교환일기에서 "낯선 사람과" 또는 "코드로 만들기"(6자리 코드를 친구에게) · "코드로 들어가기". 코드 방은 랜덤 매칭에 섞이지 않는다.
• 일기마다 바뀌는 질문 — 질문 30개. 한 편 쓰면 다음 질문으로 넘어가고, 교환일기는 짝이 새 질문을 받는다.
• 새 메모 표시 — 마지막으로 본 뒤 달린 메모·답글에 "새 메모", 홈의 내 책에 "새 메모 N".
• 문장 밑줄 — 문장을 길게 눌러 고르면 내 펜 색으로 밑줄. 블라인드 문단에서는 남의 밑줄도 가린다.
• 다 읽고 편지 한 장 — 책 끝에서 함께 읽은 사람들에게(혼자 읽기는 나에게) 한 장.
• 이 방 나가기 — 이 방에 남긴 내 기록을 지우고 나간다.
• 일기장 나가기 — 혼자 쓰는 일기장은 지우기. 교환일기는 나가면 "끝남"이 되고, 짝은 지난 일기를 계속 볼 수 있다.

권한 — 메모는 같은 방 멤버만, 일기는 같은 일기장 멤버만 읽고 쓸 수 있도록 DB(RLS)에서 막습니다. 혼자 모드는 멤버가 나 하나라서 같은 규칙만으로 "나만 보기"가 됩니다. 남의 방·없는 방 주소로 들어오면 안내한 뒤 홈으로 돌아갑니다.

구조

기술 스택: Next.js 16 (App Router) · TypeScript · Tailwind CSS 4 · Supabase (익명 로그인, Postgres, RLS) · Vercel

여기까지가 README 앞부분입니다. 나머지는 원문에서 읽을 수 있습니다. README 전문 보기 ↗