전자책 상세 페이지를 만들 때 가장 어려운 질문은 의외로 단순했습니다.
"책인데, 어떻게 하면 진짜 책처럼 보이게 할 수 있을까?"
대부분의 전자책 상세 페이지는 비슷합니다. 표지 이미지가 있고, 제목이 있고, 저자 정보와 목차가 있습니다. 필요한 정보는 다 있지만, 책을 집어 드는 느낌은 없습니다.
틸노트 북스 상세 페이지에서는 그 지점을 바꿔보고 싶었습니다. 사용자가 화면 속에서 책 한 권을 발견하고, 표지를 열어보고, 안쪽 내용을 살짝 훔쳐보는 경험을 만들고 싶었습니다.
닫혔을 때 (idle)
펼쳤을 때
핵심 질문: "정보 페이지"가 아니라 "책을 만나는 장면"으로 만들기
전자책 상세 페이지 UX에서 중요한 것은 단순히 정보를 많이 보여주는 것이 아닙니다.
사용자는 책을 고를 때 이런 생각을 합니다.
이 책이 나에게 필요한가요?
읽기 부담은 어느 정도인가요?
안쪽 내용은 믿을 만한가요?
지금 바로 읽어보고 싶나요?
그래서 상세 페이지는 단순한 정보 테이블이 아니라, 책과 독자가 처음 만나는 장면이어야 합니다.
틸노트 북스에서는 이 장면을 만들기 위해 3D 책 애니메이션을 사용했습니다. 단, 화려함이 목적은 아니었습니다. 목표는 하나였습니다.
"아, 이건 눌러보고 싶다."
3D 책 애니메이션: 처음에는 너무 과했습니다
처음 아이디어는 간단했습니다.
표지를 평면 이미지로 보여주는 대신, 실제 책처럼 살짝 기울어져 있고 클릭하면 펼쳐지는 구조를 만들자는 것이었습니다.
하지만 막상 구현해보니 문제가 생겼습니다. 표지만 휙 뒤집히는 애니메이션은 책 같지 않았습니다. 오히려 카드 플립 UI에 가까웠습니다.
책은 카드와 다릅니다.
책에는 이런 요소가 필요합니다.
책등이 있어야 합니다.
페이지 두께가 느껴져야 합니다.
표지가 한쪽 축을 기준으로 열려야 합니다.
펼쳤을 때 안쪽 면과 오른쪽 페이지가 보여야 합니다.
그림자가 닫힌 상태와 열린 상태에서 달라져야 합니다.
즉, "표지가 회전한다"가 아니라 "책 한 권이 공간 안에서 열린다"는 느낌이 중요했습니다.
디테일 1: 책을 살짝 기울이면 더 진짜처럼 보입니다
닫힌 책을 정면으로만 보여주면 이상하게 평면적으로 느껴집니다. 실제 책을 책상 위에 올려놓고 볼 때도 완벽한 정면보다는 약간의 각도가 있습니다.
그래서 처음 상태에서는 책을 아주 살짝 오른쪽으로 기울였습니다.
이 작은 기울기가 주는 효과는 큽니다.
표지가 더 입체적으로 보입니다.
책등과 페이지 두께가 자연스럽게 드러납니다.
사용자가 "이건 움직일 수 있는 오브젝트"라고 인식합니다.
UX 디자인에서 이런 미세한 각도는 장식이 아닙니다. 사용자의 행동을 유도하는 시각적 단서입니다.
마치 문손잡이가 "잡아당기세요"라고 말하지 않아도 잡고 싶게 생긴 것과 같습니다.
디테일 2: hover는 "여기 눌러도 됩니다"라는 조용한 안내입니다
상세 페이지에 들어온 사용자는 아직 이 책이 열리는지 모릅니다.
이때 선택지는 두 가지였습니다.
첫 번째는 텍스트로 안내하는 방법입니다.
"클릭해서 책 열기"
명확하지만 조금 촌스럽습니다. 경험을 설명하는 순간, 마법이 깨집니다.
두 번째는 표지에 마우스를 올렸을 때 살짝 반응하게 만드는 방법입니다. 표지가 아주 조금 들리고, 그림자가 은근히 살아나는 식입니다.
결국 두 방식을 섞었습니다.
작은 텍스트 힌트는 보조적으로 배치했습니다.
핵심 피드백은 hover 애니메이션으로 전달했습니다.
여기서 중요한 점은 과하게 움직이지 않는 것이었습니다.
표지가 크게 열리거나 흔들리면 장난감처럼 보입니다. 대신 아주 조금만 들리게 만들었습니다. 사용자가 "어?" 하고 느낄 정도면 충분했습니다.
좋은 인터랙션은 소리치지 않습니다. 살짝 손짓합니다.
디테일 3: 책은 한 번에 열리면 어색합니다
가장 많은 시간을 쓴 부분은 책이 열리는 타이밍이었습니다.
처음에는 클릭과 동시에 표지가 바로 열렸습니다. 그런데 이상했습니다. 책이 공간 안에서 정렬되기도 전에 표지가 열리니, 물리적으로 말이 안 되는 느낌이었습니다.
그래서 동작을 두 단계로 나눴습니다.
1단계: 책 전체가 정면을 향합니다
닫힌 상태에서 살짝 기울어져 있던 책이 먼저 사용자를 향해 돌아옵니다.
이 단계는 "자, 이제 보여드릴게요"라는 준비 동작입니다.
2단계: 표지가 왼쪽으로 열립니다
아주 짧은 딜레이 뒤에 표지가 열립니다.
이 짧은 간격이 핵심이었습니다. 시간으로 보면 0.15초 정도에 불과하지만, 체감상으로는 큰 차이가 납니다.
동시에 움직이면 UI 애니메이션처럼 보입니다.
순서대로 움직이면 실제 물체처럼 보입니다.
프로덕트 디자인에서 자연스러움은 대부분 이런 작은 시간 차이에서 나옵니다.
디테일 4: 표지 안쪽에는 목차 미리보기를 넣었습니다
책을 열었을 때 빈 표지 안쪽만 보이면 아쉽습니다.
그래서 표지 안쪽에는 목차 미리보기를 넣었습니다.
이 선택에는 두 가지 이유가 있었습니다.
첫째, 사용자는 책을 열자마자 "안에 뭐가 있지?"를 궁금해합니다.
둘째, 목차는 책의 신뢰도를 빠르게 판단하게 해주는 정보입니다.
목차 미리보기에는 다음 요소를 담았습니다.
주요 챕터 목록
짧은 인용구
책의 분위기를 보여주는 미리보기 텍스트
즉, 표지를 여는 행동이 단순한 재미로 끝나지 않도록 했습니다.
인터랙션 뒤에는 반드시 정보 가치가 있어야 합니다.
오른쪽 메타 영역: 감성 옆에는 명확한 정보가 필요합니다
왼쪽에서 책이 감성적 경험을 담당한다면, 오른쪽 메타 영역은 판단을 도와야 합니다.
그래서 정보 위계를 명확하게 정리했습니다.
메타 정보의 우선순위
카테고리 태그
책 제목
부제
저자 정보
챕터 수, 읽기 시간, 열람자 수, 평점
주요 CTA 버튼
사용자는 아름다운 애니메이션만 보고 책을 읽지 않습니다.
마지막에는 "읽을 만한가?"를 판단해야 합니다.
그래서 오른쪽 영역은 최대한 빠르게 스캔할 수 있게 구성했습니다.
특히 CTA는 세 단계로 나눴습니다.
읽기 시작하기: 가장 중요한 행동
찜하기: 나중에 볼 사용자를 위한 행동
전체 무료: 부담을 낮추는 정보
좋은 상세 페이지 UX는 감성과 판단을 동시에 설계해야 합니다.
아래 섹션: 목차와 책 소개는 "읽기 전 확신"을 만듭니다
Hero 영역 아래에는 목차와 책 소개를 나란히 배치했습니다.
여기서 중요한 목표는 하나였습니다.
사용자가 스크롤을 내렸을 때 더 확신하게 만들기.
목차는 프롤로그만 기본으로 보여주고, 나머지 챕터는 접어두었습니다.
처음부터 20개 챕터를 모두 보여주면 정보량이 너무 많습니다. 사용자는 읽기도 전에 지칠 수 있습니다.
그래서 구조는 이렇게 잡았습니다.
프롤로그는 바로 노출
나머지 챕터는 아코디언으로 접기
각 챕터에는 제목, 부제, 읽기 시간, 무료 여부 표시
이 방식은 사용자의 인지 부담을 줄여줍니다.
UX에서 중요한 것은 정보를 숨기는 것이 아닙니다.
필요한 순간에 꺼내볼 수 있게 만드는 것입니다.
모바일에서는 3D를 과감히 포기했습니다
데스크톱에서 3D 책 인터랙션은 꽤 매력적입니다.
하지만 모바일에서는 이야기가 달라집니다.
작은 화면에서는 입체감보다 가독성과 조작성이 더 중요합니다. 터치 환경에서는 hover도 없습니다. 3D 애니메이션이 오히려 사용성을 해칠 수 있습니다.
그래서 모바일에서는 과감히 단순화했습니다.
책은 정면 중심의 2D 뷰로 변경
레이아웃은 1열 구조로 변경
클릭 힌트는 숨김
콘텐츠 탐색과 CTA 접근성을 우선
이 결정은 중요한 교훈을 줍니다.
모든 화면에서 같은 경험을 줄 필요는 없습니다.
대신 각 디바이스에서 가장 좋은 경험을 줘야 합니다.
만들면서 배운 UX 디자인 인사이트
1. 입체감은 기술보다 "시각적 설득력"이 중요합니다
3D 효과 자체는 어렵지 않습니다. 요즘 CSS만으로도 책 넘김, 카드 플립, 3D 회전 같은 효과를 만들 수 있습니다.
하지만 진짜 어려운 것은 "그럴듯하게 보이게 하는 것"입니다.
각도, 그림자, 중심점, 타이밍이 조금만 어긋나도 장난감처럼 보입니다.
디자이너 입장에서는 개발 속성보다 이런 질문이 더 중요합니다.
이 움직임이 실제 물체처럼 느껴지나요?
사용자가 다음 행동을 예측할 수 있나요?
재미가 정보 전달을 방해하지 않나요?
2. 그림자는 상태를 설명합니다
닫힌 책은 살짝 떠 있는 느낌이 필요했습니다. 그래서 파란빛이 도는 그림자를 사용했습니다.
반대로 열린 책은 안정적으로 펼쳐져 있어야 했습니다. 그래서 더 중성적인 그림자로 바꿨습니다.
그림자는 단순한 장식이 아닙니다.
닫힘: 기대감, 클릭 가능성
열림: 안정감, 읽기 준비 상태
이렇게 상태에 따라 그림자도 역할이 달라집니다.
3. 0.15초 차이가 경험을 바꿉니다
애니메이션에서 0.15초는 아주 짧습니다.
하지만 사용자 경험에서는 충분히 긴 시간입니다.
책이 먼저 정면을 향하고, 그다음 표지가 열리는 작은 간격이 자연스러움을 만들었습니다.
프로덕트 인터랙션에서 좋은 타이밍은 사용자가 의식하지 못합니다.
하지만 없으면 바로 어색함을 느낍니다.
4. 과한 인터랙션은 브랜드를 가볍게 만들 수 있습니다
책 상세 페이지는 신뢰가 중요합니다.
너무 튀는 애니메이션은 순간적으로 재미있을 수 있지만, 콘텐츠의 무게감을 해칠 수 있습니다.
그래서 이번 디자인에서는 "와!"보다 "오, 좋다"에 가까운 반응을 목표로 했습니다.
프로덕트 디자인에서 오래가는 인상은 대부분 절제에서 나옵니다.
UX/프로덕트 디자이너를 위한 체크리스트
전자책 상세 페이지나 콘텐츠 상세 페이지를 디자인하신다면 아래 질문을 확인해보세요.
인터랙션 체크
사용자가 클릭 가능한 영역을 직관적으로 알 수 있나요?
hover나 탭 피드백이 충분히 자연스러운가요?
애니메이션이 정보 탐색을 방해하지 않나요?
동작에 시작, 전환, 완료 상태가 있나요?
정보 구조 체크
제목과 부제가 가장 먼저 읽히나요?
저자, 읽기 시간, 챕터 수 같은 판단 정보가 잘 보이나요?
CTA 버튼의 우선순위가 명확한가요?
목차가 너무 부담스럽게 노출되어 있지는 않나요?
반응형 체크
모바일에서도 같은 인터랙션이 꼭 필요한가요?
터치 환경에서 hover 의존성이 제거되었나요?
작은 화면에서 CTA가 충분히 빨리 보이나요?
애니메이션을 줄여야 할 사용자 환경을 고려했나요?
결론: 책 상세 페이지는 "정보"보다 먼저 "경험"입니다
틸노트 북스 상세 페이지에서 만들고 싶었던 것은 거대한 기능이 아니었습니다.
사용자가 책 한 권을 꺼내 펼치는 느낌.
표지를 열었을 때 안쪽 이야기가 살짝 보이는 순간.
그리고 자연스럽게 "읽기 시작하기"를 누르고 싶어지는 흐름.
핵심은 세 가지입니다.
3D 효과는 화려함보다 자연스러움이 중요합니다.
인터랙션은 재미 뒤에 정보 가치를 담아야 합니다.
모바일에서는 과감히 단순화하는 것도 좋은 UX입니다.
다음에 콘텐츠 상세 페이지를 디자인하신다면, 정보 배치 전에 먼저 질문해보세요.
"사용자는 이 콘텐츠를 어떤 장면으로 만나야 할까?"
이 질문 하나가 평범한 상세 페이지를 기억에 남는 경험으로 바꿔줍니다.
이 글이 도움이 되셨다면, 전자책 UX나 인터랙션 디자인을 고민하는 동료 디자이너에게도 공유해 주세요.
이 노트는 보도·비평·교육·연구 목적으로 작성되었습니다. 저작권 문의가 있으시면 에서 알려주세요.