Components

리디북스 모바일 뷰어 애플리케이션에서 공통으로 사용하는 UI 컴포넌트입니다.

App bars

iOS 내비게이션 바

탐색, 검색과 더불어 현재 위치한 화면과 관련된 여러 액션을 표시할 때 사용합니다.

구성에 따른 종류

  1. 업 버튼만 있는 경우
  2. 업 버튼과 액션 아이콘이 함께 쓰는 경우
  3. 업 버튼이 있고 타이틀에 다른 기능이 있는 경우 (정렬, 글자 수 표시 등)
  4. 업 버튼과 레이블 버튼을 함께 쓰는 경우
  5. 업 버튼과 탭을 함께 쓰는 경우
  6. 업 버튼과 필드를 함께 쓰는 경우

개발에 따른 종류

  • 시스템 앱 바
  • 커스텀 앱 바
    • 기본 내비게이션 바의 레이아웃을 벗어날 경우, 커스텀 내비게이션 바를 사용합니다.
    • 커스텀 앱 바를 써야 할 경우 앱 바 안에 모든 요소의 디자인 요구사항이 필요합니다.

Android 앱 바

내비게이션 바는 상태 바 하단에 나타나며 계층으로 구성된 화면을 탐색할 수 있게 합니다.

구성

  • 내비게이션 바의 가운데 영역은 현재 위치한 화면의 타이틀을 보여줍니다.

  • 왼쪽, 오른쪽 영역 모두 복수의 버튼을 배치할 수 있습니다. (ex. ‘뒤로 가기’, 편집’, ‘완료’ 등)
  • iPad에서는 상황에 따라 폼 시트에 적합한 내비게이션 바를 사용합니다.

Banners

배너는 중요하고 간결한 메시지를 노출할 때 사용합니다. 에러가 났을 때, 알려야 하는 변경 사항이 있을 때 사용합니다. 사용자가 선택할 수 있는 레이블 버튼이 제공된다는 점이 토스트와 다른 점입니다.

구성

  • 메시지는 최대 두 줄까지 표시할 수 있습니다.
  • 최대 두 개의 옵션을 제공할 수 있습니다.
  • 메시지의 이해를 돕는 아이콘을 표시할 수 있습니다.

유의 사항

  • 한 페이지에 하나의 배너만 올 수 있습니다.
  • 스크롤을 해도 고정되어 보이므로 중요한 메시지를 노출할 때만 사용해야 합니다.

Buttons

버튼은 한 번의 탭으로 액션을 실행합니다. 버튼은 크게 4가지 종류로 나뉩니다.

종류

액션 아이콘 버튼

  • 메타포로도 충분한 시각적 힌트가 있을 때 사용합니다. 주로 앱 바에서 사용합니다.

레이블 버튼

  • 아이콘의 도움 없이도 이해될 수 있을 때 사용합니다. 한눈에 들어오는 짧은 레이블이 적합합니다.

아이콘 레이블 버튼

  • 아이콘과 레이블이 시너지를 내서 시각적 힌트를 최대로 주는 버튼입니다. 레이블만으로 충분하지 않을 때 주로 사용하지만, 공간이 넉넉하다면 아이콘 레이블 버튼을 사용하는 게 좋습니다.

일러스트레이션 버튼

  • 아이콘, 레이블로는 설명하기 어려울 때 사용합니다.

Bottom navigation

iOS 탭 바

바텀 내비게이션은 화면 하단에 노출되는 요소로 다른 페이지로 빠르게 이동할 수 있게 해줍니다. 바텀 내비게이션은 언제 어디에서든 접근할 수 있도록 스크롤을 해도 계속 하단에 고정되어 노출됩니다.

구성

  • 최대 5개의 기능만 표시합니다.
  • 아이콘과 텍스트 레이블을 반드시 함께 사용하여 이해를 돕습니다.

유의 사항

  • 상시 노출되는 만큼 중요한 기능으로 구성해야 합니다.

iOS 액션 시트

모달 바텀 시트는 스피너팝업 메뉴의 대안입니다.

구성

  • 주로 리스트 스타일로 쓰지만 그리드 스타일로도 사용할 수 있습니다.
  • 헤더가 필요할 땐 추가할 수 있으며 헤더에 속하지 않은 아이템은 선으로 구분합니다.
  • 바텀 시트는 내용이 길어질 경우 스크롤이 가능합니다. 액티비티로 전체 페이지를 덮을 수도 있습니다. 이때 업 버튼보다는 닫기 버튼을 사용합니다.

유의 사항

  • 구심점을 갖기 어려울 때 사용하면 좋습니다. 메뉴가 나타날 때 스피너나 팝업 메뉴는 구심점이 있습니다. 보통 스피너는 현재 선택된 아이템, 팝업 메뉴는 오버플로 버튼이 구심점입니다.
  • 복잡한 메뉴를 구성해야 할 때 사용해도 좋습니다. 이때 아이콘을 함께 사용하면 사용자가 메뉴를 이해하는 데 도움이 됩니다.

iOS 얼럿

모달 다이얼로그는 주로 요청할 때 사용합니다. 주로 확인, 선택, 입력, 결정 등을 요청합니다.

종류

확인

  • 안내 사항을 알리고 이를 사용자가 확인해야 할 때, 정보를 전달할 때 사용합니다.
  • ex. PAPER 기기 정보, PAPER 슬립 화면 사용자 이미지 안내, 긴급 공지 사항

입력

  • 입력이 필요한 내용을 요청할 때 사용합니다.
  • ex. 책장 이름 입력, 비밀번호 설정

선택

  • 여러 선택지 중에 선택해야 할 때 사용합니다.
  • ex. 책 롱 프레스 시, 독서노트 메모 저장

결정

  • 중요한 결정을 해야 할 때 사용합니다.
  • ex. 이 페이지의 모든 책 다운로드, 책 삭제, 독서노트 삭제 등

구성

크게 제목, 본문과 액션으로 구성됩니다.

제목

  • 명사형이나 질문으로 구성됩니다.
    • ex. 책장 이름 변경, 터치 잠금 모드를 켜시겠습니까?
  • 이해를 돕는 제목이 있을 경우 다이얼로그 내용을 더 빠르게 이해할 수 있습니다. 하지만 본문과 내용이 겹칠 경우, 제목을 생략할 수 있습니다.
    • ex. [Samsung Galaxy Note 4]에서 1시간 전에 읽던 위치로 가시겠습니까?

본문

  • 최대한 간결하게 메시지를 작성하는 게 중요합니다. 수정에 수정을 거쳐서 글자 수를 줄여야 합니다.
  • 강조할 내용은 강조 처리하고 주의할 내용은 * 별표를 앞에 붙여 사용합니다.
  • 이해를 돕는 이미지나 일러스트레이션을 사용해도 좋습니다.

액션

  • 명확한 액션으로 작성하여 어떤 액션인지 바로 인지할 수 있게 합니다.
    • 삭제하시겠습니까?
      • x
      • O삭제
  • 명사형으로만 작성합니다.
  • 더 우위에 있는 액션을 우측에 배치합니다.

유의 사항

  • 모달 다이얼로그는 현재 상황을 벗어나지 않고 처리할 수 있는 간단한 태스크에 사용하는 것이 적합합니다. 그러므로 너무 많은 내용을 담아서는 안됩니다.
  • 모달 다이얼로그는 배너보다 더 사용자의 주의를 끕니다. 그러므로 중요도를 따져서 모달 다이얼로그를 사용할지, 배너를 사용할지 결정해야 합니다.

Lists

리스트는 연속된 행이 수직으로 나열됩니다. 리스트는 하나의 주제의 유사한 데이터 유형을 나열할 때 가장 적합합니다.

종류

라인 수에 따라서

  • 싱글 라인 아이템
  • 멀티플 라인 아이템

구성에 따라서

  • 텍스트만 있는 경우
    • 주요 텍스트만 있는 경우
    • 주요 텍스트와 부가 텍스트가 함께 있는 경우
  • 텍스트와 아이콘 및 다른 요소가 함께 표시되는 경우

액션에 따라서

  • 주요 액션만 있는 경우
  • 주요 액션과 부가적인 액션이 함께 있는 경우
    • 부가 액션은 오른쪽에 배치하여 주요 액션과 확실히 구분되어야 합니다.
    • 부가 액션의 충분한 터치 영역 확보가 중요합니다.

서브 헤더 유무에 따라서

  • 서브 헤더 없이 나열되는 경우
  • 서브 헤더에 따라 구분되어 나열되는 경우

iOS 액션 시트

메뉴에는 옵션 메뉴, 콘텍스트 메뉴, 팝업 메뉴가 포함되며 상황별로 다르게 사용합니다.

종류

옵션 메뉴

  • 현재 위치한 페이지 전체와 관련 있는 옵션을 포함해야 합니다.
    • 내 서재 > 최근 읽은 책 전체 보기 > 오버플로 버튼 눌렀을 때 > 내 서재에서 숨기기

팝업 메뉴

  • 특정 콘텐츠와 관련된 작업을 메뉴로 보여줍니다.
    • ex. 독서노트 형광펜의 오버플로 버튼

콘텍스트 메뉴

  • 롱 프레스 하면 다이얼로그와 유사한 메뉴가 나타납니다.
    • ex. 내 서재에서 책 롱 프레스 했을 때

Action sheets

Android 모달 바텀 시트, 메뉴

액션 시트는 얼럿의 한 형태입니다. 현재 위치한 화면과 관련된 선택지를 표시할 때 사용합니다. 새로운 태스크를 시작하는 옵션이나 ‘삭제’ 같은 치명적인 액션을 실행하기 전 승인 요청 옵션을 표시할 수 있습니다.

작은 화면에서 액션 시트는 화면 하단에서 슬라이드 업(slide up)하여 나타납니다. 보통 iPad 같은 큰 화면에서 액션 시트는 팝 오버의 형태로 표시되지만 슬라이드 업하며 나오는 경우도 있습니다.

유의 사항

  • ‘취소’ 버튼은 항상 최하단에 포함되어야 합니다.
  • 치명적이고 위험한 옵션은 글자색을 붉은색으로 표시하고 최상단에 위치시켜야 합니다.
  • 액션 시트에 표시할 수 있는 옵션의 개수는 정해져 있지 않지만 스크롤 할 정도의 개수는 적합하지 않습니다.
    • 스크롤 해야 할 경우, 모든 옵션을 한 번에 볼 수 없으므로 선택하는 데 시간이 소요되며 스크롤 하다가 실수로 버튼을 누르게 될 수도 있습니다.

Progress indicators

iOS 프로그레스 인디케이터

프로그레스 인디케이터는 기능을 실행할 때 현재 진행 상황을 알려줍니다. 다음 2가지 경우에 사용됩니다.

첫째, 전체 과정의 진행률을 보여주는 경우입니다. 진행률을 수치, 프로그레스 바로 보여주며 확정(determinate) 인디케이터로 부릅니다.

둘째, 진행 시간이 정해지지 않았을 때입니다. 애니메이션이 가미된 로더를 사용하며 비확정(indeterminate) 인디케이터로 부릅니다.

확정 인디케이터

iOS 프로그레스 바

구성

  • 선형, 원형 프로그레스 바
  • 진행률(%) 혹은 진행된 개수 / 전체 개수
  • 메시지 (ex. 책을 처음으로 열기 위한 준비 중입니다…)

비확정 인디케이터

iOS 액티비티 인디케이터

구성

  • 원형 프로그레스 바

Sliders

슬라이더로 다양한 값을 빠르게 탐색하고 선택할 수 있습니다. 슬라이더는 긴 바 형태를 띕니다. 바가 처음 시작되는 지점부터 끝나는 지점까지 값이 순서대로 배열되어 있고 사용자는 이 중 하나의 값을 선택할 수 있습니다.

유의사항

  • 정확한 값이 필요한 곳에는 적합하지 않습니다. 정확한 수치를 입력할 수 있는 필드를 제공할 수 있지만 난이도가 올라갈 수 있습니다.
  • 사용자가 슬라이더로 값을 선택하면 바로바로 수치를 반영해서 보여줘야 합니다.

구성

  • 슬라이더는 긴 바와 동그란 형태의 텀브로 구성됩니다.
    • 텀브의 보이는 크기는 작더라도 최소 터치 영역을 확보해 줘야 합니다.
    • 텀브는 크기가 작기 때문에 터치했을 때 프레스드 효과가 반드시 필요합니다.
  • 슬라이더 양쪽 끝에 범위를 알 수 있도록 수치나 아이콘을 표시합니다.

Spinners

iOS 테이블 뷰

스피너는 여러 값 중 하나를 선택할 수 있는 컴포넌트입니다. 기본 상태의 스피너는 현재 선택된 값을 보여줍니다. 스피너를 터치하면 선택할 수 있는 값들을 드롭다운 메뉴로 보여줍니다.

구성

  • 값을 선택할 수 있는 메뉴가 나타날 때 기본 상태의 스피너를 덮으면서 나타나야 합니다.
  • 선택된 값을 중복으로 표시하지 않습니다.
  • 글자색이나 리스트 배경색을 바꾸거나 체크 아이콘으로 표시하는 등 선택된 값을 강조해서 표시해도 좋습니다.

Steppers

iOS 스테퍼

스테퍼는 두 개의 컨트롤 영역으로 나뉘어 있습니다. 왼쪽을 누르면 수치가 감소하고 오른쪽을 누르면 수치가 증가합니다.

유의 사항

  • 지원하는 총 단계 수가 너무 많을 경우 사용하기에 적합하지 않습니다. 사용자가 처음에서 마지막 값으로 이동할 때 너무 많이 터치하지 않게 해야 합니다.
    • 리디북스 앱은 최대 12단계까지만 제공합니다.
  • 스테퍼 자체에 수치를 표시하지 않습니다. 조정해야 하는 값의 타이틀 우측에 수치를 표시합니다.
  • 스테퍼로 값을 변경하면 바로바로 값을 반영해서 보여줘야 합니다.

Android의 스테퍼

  • Android에서 스테퍼는 단계별로 진행 상황을 보여주는 요소입니다. 긴 과정을 단계별로 나눠 보여주어 계속 진행할 수 있게 도와줍니다. 한 번에 많은 정보를 입력해야 하는 회원 가입 같은 경우에 적합합니다.
  • 리디북스 앱에서 스테퍼는 iOS Human Interface Guidelines의 의미를 따릅니다.

Tabs

iOS 세그멘티드 컨트롤

탭을 사용하면 한정된 공간 안에서 연관된 여러 콘텐츠를 체계적으로 보여줄 수 있습니다. 페이지에서 완전히 벗어나지 않고 쉽게 연관된 콘텐츠를 살펴볼 수 있습니다.

구성에 따른 종류

  1. 기본 탭
  2. 기본 탭과 콘텐츠 정렬 기능도 포함된 경우
  3. 기본 탭과 텍스트 필드도 포함된 경우
  4. 기본 탭과 아이콘 버튼이 함께 사용된 경우
  5. 4개 이상의 콘텐츠를 표시하는 탭

유의사항

  • 하위 콘텐츠들은 서로 관련성이 있어야 합니다.
  • 하위 콘텐츠 간의 이동이 빈번할 때 사용하면 좋습니다.
  • 스와이프 제스처를 사용하는 하위 페이지는 탭의 하위 항목으로 적절하지 않습니다.
  • 한 번에 한 탭만 활성화해야 합니다.
  • 탭 레이블은 명확하고 정확하게 콘텐츠를 설명해야 합니다.
  • 다시 탭이 노출되었을 때 마지막 사용 탭을 기억할지, 기본 탭을 보여줄지 결정해야 합니다.
  • 탭 이동 시 하위 페이지의 스크롤 위치를 기억할지 다시 최상단을 노출할지 결정해야 합니다.

Text fields

텍스트 필드로 사용자는 텍스트를 입력하고 편집할 수 있습니다.

상태

필드는 여러 상태를 가지며 서로 명확하게 구분되어야 합니다.

  • inactive
  • activated
  • focused
  • disabled
  • error

종류

  • 싱글 라인 필드
  • 텍스트 에어리어

유의 사항

  • 텍스트 레이블은 공간의 여유가 있다면 추가하는 게 좋습니다. 하지만 필드가 하나고 어떤 텍스트를 입력해야 하는지 상황이 명확하다면 플레이스홀더만으로 대체할 수 있습니다.
  • 필드의 아이덴티티를 나타내는 아이콘을 함께 보여주면 좋습니다.
  • 필드의 텍스트를 한 번에 지워주는 제거 버튼이 있으면 좋습니다.

Text selection toolbars

iOS 에디트 메뉴

텍스트 셀렉션 툴바는 텍스트를 선택할 때 사용합니다. 선택하고자 하는 텍스트를 롱 프레스 하거나 형광펜이 남겨져 있는 텍스트를 탭 하면 해당 텍스트 위에 선택할 수 있는 옵션이 표시됩니다. ‘더 보기’를 누르면 부가적인 메뉴를 보여주는 모드로 전환됩니다.

종류

텍스트를 선택할 때

  • 제스처
    • 롱 프레스
  • 툴바가 뜨는 위치
    • 한 줄 선택 시, 선택된 텍스트 위에
    • 두 줄 선택 시, 선택된 텍스트 아래에

남겨진 형광펜을 선택할 때

  • 제스처
  • 툴바가 뜨는 위치
    • 탭 한 위치

Toasts

토스트는 화면 하단에서 동작에 관해 메시지로 짧은 피드백을 제공합니다. 토스트는 보통 화면 최상단 계층에 위치합니다.

구성

  • 토스트는 제한된 시간이 되면 사라집니다. 그러므로 빠르게 읽도록 최대한 짧은 메시지로 구성해야 합니다.
  • 중요한 안내 사항이라면 토스트보다는 다이얼로그로 안내하는 게 적합합니다.

Toolbars

iOS 툴바

툴바는 화면 하단에 노출되는 요소로 툴바가 있는 화면에서 필요한 기능으로 구성됩니다.

유의 사항

  • 툴바는 필요하지 않을 때 감출 수 있어야 합니다.
  • 툴바에는 맥락에 맞는, 자주 사용하는 커맨드가 포함되어야 합니다.
  • 툴바는 현재 머무는 화면과 관련된 기능으로 구성되므로 맥락을 알 수 있게 불투명도를 주는 게 좋습니다.
  • 아이콘과 텍스트 레이블을 함께 사용하여 명시성을 주면 좋습니다.

Android의 툴바

  • Android 공식 가이드에서 앱 바를 만들 때 추천하는 클래스입니다.
  • 리디북스 앱에서 툴바는 iOS Human Interface Guidelines의 의미를 따릅니다.

Tutorial dialogs

튜토리얼은 온보딩에 속하는 개념입니다. 온보딩이란 제품을 처음 샀을 때 패키지를 개봉하는 것과 같은 경험을 말합니다. 다른 점이라면 온라인에서 이루어지는 경험이라는 점입니다.

온보딩 중에서도 튜토리얼은 사용 문턱이 있는 기능을 사용자에게 소개하거나 알려주는 것을 말하고 다양한 컴포넌트를 목적에 맞게 사용할 수 있습니다. 그중 하나가 튜토리얼 다이얼로그입니다. 튜토리얼 다이얼로그는 가볍게, 맥락에 맞게 다이얼로그로 안내하는 컴포넌트입니다.

구성

  • 사용자의 시선을 끌 수 있게 기능을 설명하는 일러스트레이션 같은 이미지나 영상을 반드시 사용합니다.
  • 한 번에 읽을 수 있도록 메시지는 너무 길지 않아야 합니다. 메시지가 길수록 사용자는 더 빠르게 튜토리얼 다이얼로그를 닫습니다.
  • ‘닫기’ 버튼이 반드시 필요합니다.
  • 소개하는 기능을 바로 사용할 수 있는 단축키는 추가할 수 있다면 반드시 추가합니다.

유의 사항

  • 새로 추가되는 모든 기능을 튜토리얼 다이얼로그로 소개하지 않습니다. 튜토리얼 다이얼로그를 사용해야 하는 기준은 다음과 같습니다.
    • 맥락에 맞춰서 소개하기 어려운 기능
    • 너무 유용하지만 사용법이 다소 어려운 기능
    • 마케팅적으로 중요한 기능
  • 튜토리얼 다이얼로그는 최대한 맥락에 맞게 띄어져야 하고 동선을 방해하지 않도록 최초 한 번 나타나는 게 좋습니다.

Tutorial tooltips

튜토리얼에 사용되는 컴포넌트로 형태는 툴팁과 같습니다. 튜토리얼 다이얼로그와 용도가 비슷합니다. 하지만 좀 더 가볍게, 사용자의 동선을 최대한 방해하지 않으면서 기능을 소개합니다.

구성

  • 한 번에 읽을 수 있도록 메시지는 핵심만 담아서 작성합니다.
  • 어디를 터치해도 튜토리얼 툴팁은 닫히기 때문에 따로 ‘닫기’ 버튼이 없어도 상관없습니다. 하지만 튜토리얼 툴팁을 보고 어떤 액션을 해야 할지 모르는 사용자를 위해 특정 영역을 누르도록 유도해도 좋습니다.
  • 튜토리얼 툴팁은 최대한 맥락에 맞게 띄워져야 하고 동선을 방해하지 않도록 최초 한 번 나타나는 게 좋습니다.