Mobile App UX/UI

Book Planet

지역 기반 탐색과 거래 설계로 중고 도서 거래의 사용성을 개선하는 UX/UI 프로젝트.

프로젝트 구분

개인 프로젝트

프로젝트 역할

UX 리서치 · UI 디자인 · 프로토타이핑

작업 범위

문제 정의 · 사용자 흐름 설계 · 화면 설계 · 프로토타입 제작

사용 툴

Figma · Photoshop

Book Planet — 홈 / 내 근처 책 / 채팅 화면 컴포지션
Book Planet 홈 화면 — 내 근처 책 영역

Project Overview

프로젝트 개요

지역 기반 탐색과 거래 설계로 중고 도서 거래의 사용성을 개선한 UX/UI 프로젝트

핵심 문제

중고 도서 거래는 접근성과 신뢰 문제로 일상적인 사용이 어렵다.

해결 방향

  • 위치 기반 탐색으로 실제 거래 가능성에 집중
  • 거래 전 판단에 필요한 정보 구조화
  • 채팅 중심의 빠른 거래 흐름 설계

Background & Strategy

Project Direction

공공 도서관은 접근성과 이용 시간에 한계가 있고, 개인이 소유한 책은 읽힌 뒤 활용되지 못한 채 방치되는 경우가 많습니다. Bookplanet은 가까운 지역 안에서 개인과 개인이 책을 나누고 빌릴 수 있도록 연결해, 책의 순환을 더 쉽고 가볍게 만드는 서비스로 기획했습니다.

  1. 01

    Problem

    공공 도서관은 시간, 거리, 이용 조건의 제약으로 접근성이 제한됩니다.

  2. 02

    Insight

    책은 존재하지만 필요한 사람에게 자연스럽게 이동하지 못합니다.

  3. 03

    Direction

    지역 기반으로 개인 간 책 대여와 나눔을 연결하는 순환 구조를 설계합니다.

  • Nearby First

    가까운 거리 기반 탐색

  • Flexible Exchange

    대여와 구매 선택 가능

  • Low Barrier

    진입 장벽 최소화

  • Circular Use

    읽지 않는 책의 재사용

User Flow

유저 플로우

사용자 거래 구조를 채팅 중심으로 설계

Book Planet user flow diagram

Design System

디자인 시스템

Typography

로고타입과 본문 타입 스케일을 정의합니다.

Logo Typeface

Primary logotype for brand identity

Type Scale

영문 · 숫자

Inter

Semibold / Medium / Regular

BookPlanet 20px

BookPlanet 18

BookPlanet 16

BookPlanet 14

BookPlanet 13

BookPlanet 12

Body / line-height 1.4

한글

Pretendard

Semibold / Medium / Regular

프리텐다드 20px

프리텐다드 18

프리텐다드 16

프리텐다드 14

프리텐다드 13

프리텐다드 12

Body / line-height 1.4

Color

중립 그레이 스케일과 단일 브랜드 컬러로 절제된 시스템을 구성합니다.

Gray Scale

본문 · 보조 텍스트

Gray scale palette 1

보조 액션 · 링크 · 비활성화

Gray scale palette 2

Brand Color

주요 CTA · 강조 상태

Brand color palette

Components

반복 사용되는 인터랙티브 컴포넌트의 기본 상태입니다.

Input Field

Default

Toggle

Default

Button

Default

Disabled

UI Design

UI 디자인

Home & Navigation

Book Planet 홈 화면 — 내 거래 / 내 근처 책 / 추천 영역

탐색

내 근처 책 리스트 화면 도서 상세 페이지

채팅

채팅 화면 — 거래 흐름

기타 페이지

기타 페이지 UI — 내 책방 / 마이페이지 / 상품등록

Other Projects

다른 프로젝트도 함께 살펴보세요.