[틸노트 디자인] 북스2 _읽기 뷰 작업기 — 3컬럼 레이아웃으로 전자책 독서 경험 만들기

북스 상세 페이지를 만들고 나니, 다음 과제는 자연스럽게 정해졌습니다.

책을 펼쳤다면, 이제 읽을 수 있어야 합니다. 읽기 뷰를 만들어야 했습니다.

전자책 읽기 화면은 크게 두 가지로 나눌 수 있습니다. 본문만 넓게 보여주는 전체 화면형과, 양옆에 필요한 정보를 함께 두는 사이드바형입니다. Tilnote 북스에는 후자가 더 잘 맞는다고 판단했습니다. 목차가 항상 보여야 "내가 지금 어디를 읽고 있는지" 감이 오고, 챕터 사이를 이동하기도 자연스럽기 때문입니다.

정보 구조 설계부터 시작했습니다

v1 챕터 뷰는 단순했습니다. 상단 길잡이와 본문만 있었고, 목차는 없었습니다.

v2에서는 완전히 바꿨습니다. 먼저 정보를 어떻게 나눠 보여줄지 정리하고, 그다음 화면을 그렸습니다.

상단에는 서비스 이름, 책 제목, 현재 챕터, 공유와 찜 버튼을 두었습니다. 본문 아래로는 세 개의 영역을 나눴습니다.

• 왼쪽: 책 전체의 진행률과 챕터 목록

• 중앙: 챕터 제목, 저자·날짜·읽기 시간, 본문 콘텐츠

• 오른쪽: 현재 챕터 안의 소제목 목록, 읽기 진행, 이전/다음 챕터 이동

세 개의 컬럼입니다. 왼쪽은 책 전체 목차, 중앙은 읽는 내용, 오른쪽은 현재 챕터 안에서 이동할 수 있는 작은 길잡이 역할을 합니다.

왼쪽 사이드바: 챕터를 주제별로 묶었습니다

챕터를 그냥 나열하면 20개가 하나의 벽처럼 느껴집니다. 그래서 주제별로 묶어 보여주는 방식이 필요했습니다.

예를 들면 이런 식입니다.

• 시작하기

  • 0 프롤로그 · 4분

• AI 이해하기

  • 1 AI 도구 생태계 · 8분

  • 2 프롬프트의 구조 · 10분

  • 3 AI 출력 검증하기 · 7분

• 실전 활용

  • 4 업무 자동화 · 12분

  • 5 AI와 글쓰기 · 9분

• 심화

  • 8 AI 에이전트 개념 · 14분

큰 주제별 이름으로 챕터들을 묶었습니다. 이렇게 하면 20개 챕터가 4개의 덩어리로 나뉘어 보여서, 지금 책의 어디쯤을 보고 있는지 바로 알 수 있습니다.

진행률 표시도 넣었습니다. "읽은 챕터 1 / 20"과 진행 바를 보여줍니다. 이걸 보면 자연스럽게 "다음 챕터도 읽어볼까?" 하는 마음이 생깁니다.

상단 길잡이에 챕터 목록을 달았습니다

상단 길잡이는 tilnote / 말기는 AI / 0. 프롤로그처럼 표시됩니다. 여기서 챕터 이름 부분을 누르면 전체 챕터 목록이 아래로 열립니다.

이 기능을 만든 이유는 단순합니다. 사이드바가 보이지 않는 모바일에서도 챕터를 빠르게 넘어가려면 별도의 이동 장치가 필요했기 때문입니다. 매번 목차 화면으로 돌아가는 방식은 너무 번거롭습니다.

챕터 목록은 현재 챕터 이름 아래로 자연스럽게 펼쳐집니다. 목록 바깥 영역을 누르면 닫히게 해서, 사용자가 따로 닫기 버튼을 찾지 않아도 되도록 했습니다.

본문 영역: 콘텐츠 종류별 처리

본문은 글 콘텐츠를 화면에 읽기 좋게 보여준다는 기준으로 만들었습니다. 단순한 문단 외에도 따로 다듬어야 할 요소들이 있었습니다.

인용문

파란 왼쪽 선과 연파랑 배경을 사용했습니다. 본문과 시각적으로 분리되지만, 눈에 거슬리지 않도록 했습니다.

콜아웃 (팁·경고) 두 종류로 나눴습니다. 여기서 콜아웃은 중요한 안내를 본문과 구분해서 보여주는 박스입니다.

• 팁 (💡 아이콘): 연파랑 배경, 파랑 텍스트

• 경고 (⚠ 아이콘): 연노랑 배경, 암버 텍스트

경고 문구는 너무 밝거나 흐리지 않게 조정했습니다. 노란 배경 위에서도 잘 읽히고, 동시에 지나치게 강하게 튀지 않는 색을 골랐습니다.

이미지 자리 표시 본문 중간에 아직 이미지가 없는 경우도 있습니다. 이때는 빈 공간처럼 보이지 않도록 회색 박스와 설명 문구로 처리했습니다.

오른쪽 사이드바: 챕터 안에서 이동하기

오른쪽 사이드바는 두 가지 역할을 합니다.

1. 현재 챕터 안의 섹션 목차

2. 읽기 진행 표시

섹션 목차는 스크롤해도 계속 보입니다. 누르면 해당 섹션으로 이동합니다.

읽기 진행 바는 사용자가 페이지를 얼마나 내려 읽었는지에 따라 실시간으로 채워집니다. 책갈피처럼 "이 챕터를 어느 정도 읽었는지" 알려주는 역할을 합니다.

챕터 하단: 이전/다음 챕터 이동

챕터 본문이 끝나면 이전/다음 챕터 버튼이 나옵니다.

← 이전 챕터         다음 챕터 →
  첫 챕터입니다     AI 도구 생태계 이해하기

이전 챕터가 없을 때는 "첫 챕터입니다"로 비활성 처리했습니다. 스타일도 회색으로 흐리게 보이도록 했습니다. 존재하지 않는 버튼이 눌리면 안 되기 때문입니다.

모바일: 사이드바를 숨기고 버튼으로 열었습니다

모바일에서 3컬럼 레이아웃은 사용하기 어렵습니다. 왼쪽과 오른쪽 사이드바는 기본적으로 숨기고, 본문에 집중할 수 있도록 했습니다.

대신 왼쪽 위에 ☰ 버튼이 생깁니다. 누르면 왼쪽 목차가 화면 밖에서 안쪽으로 밀려 들어오고, 배경에는 어두운 막이 깔립니다. 이 막을 누르면 목차가 다시 닫힙니다.

모바일 목차는 이렇게 동작합니다.

• 평소에는 화면 밖에 숨겨 둡니다.

• ☰ 버튼을 누르면 왼쪽에서 부드럽게 열립니다.

• 본문 영역과 구분되도록 배경을 어둡게 처리합니다.

• 바깥 영역을 누르면 다시 닫힙니다.

데스크탑에서는 사이드바가 스크롤을 따라 적당한 위치에 고정되어 보입니다. 같은 목차를 화면 크기에 따라 다르게 보여주는 방식이 깔끔했습니다.

v1과 비교해 달라진 점

만들면서 배운 점

3컬럼 레이아웃을 화면 크기에 맞게 바꾸는 일이 핵심이었습니다. 데스크탑에서 자연스러운 구성이 모바일에서 무너지지 않으려면, 화면 크기별로 무엇을 보여주고 무엇을 숨길지 처음부터 정해야 합니다. 나중에 끼워 맞추면 두 배로 힘들어집니다.

상단 길잡이에서 챕터 목록을 여는 기능은 처음엔 과한 기능처럼 보였습니다. 그런데 모바일에서 챕터 이동을 테스트해보니 꼭 필요했습니다. "사용자가 목차로 돌아가지 않고도 챕터를 넘길 수 있어야 한다"는 요구사항이 있었다면 처음부터 설계했을 기능입니다.

고정되어 보이는 사이드바는 생각보다 섬세했습니다. 오른쪽 사이드바가 스크롤 중간에서 어색하게 멈추는 문제가 있었습니다. 결국 주변 영역의 높이와 정렬을 다시 잡아, 본문을 읽는 동안 자연스럽게 따라오도록 다듬었습니다.

북스 읽기 뷰는 단순해 보이지만, 사용자가 책을 끝까지 읽게 하는 경험 설계가 들어가 있습니다. 진행률, 다음 챕터 버튼, 섹션 이동 모두 "계속 읽게 만드는" 장치입니다.