millie Design Library
밀리의 서재 디자인 시스템
밀리 디자인 라이브러리 (a.k.a. 밀디라)
밀리 디자인 라이브러리는 개발자와 디자이너뿐만 아니라 디자이너 사이의 협업을 수월하게 해 주며, 시각 및 경험 자산의 일관성을 유지하는 역할을 하고 있습니다.
자주 사용되는 부분을 모아 놓은 것이라는 의미와 더불어 도서관이라는 뜻을 가진 ‘라이브러리’를 네이밍에 활용하여 플랫폼의 색깔을 더했습니다.
해당 시스템은 실용적인 협업을 위해 꾸준히 업데이트되고 있습니다.
CI
기본형으로 사용되고 있는 로고는 ‘밀리의 서재’라는 브랜드 이름의 축약형으로, ‘millie’만 표현된 워드마크 타입의 로고입니다.
심볼에 소문자 ‘m’을 담고 있어, 영문 표기 시 Millie 대신 millie를 권장합니다.
Grids / Layouts
Grids
전체 뷰포트의 좌우 여백은 24px을 사용하며, 그 외에는 Material Guide의 8 Grid System을 유연하게 따릅니다.
Desktop의 경우, 컨텐츠를 우선으로 12 columns 혹은 9 columns를 기반으로 레이아웃을 나눕니다.
배경, 선 등의 장식적 요소의 일부를 제외하고 최대 넓이 1280px의 내부 박스에 컨텐츠를 배치합니다. 요소의 중요도에 따라 화면을 기기 특성에 맞게 좌우 분할하여 배치할 수도 있습니다.
Layouts
표지 썸네일 간의 간격은 표지 사이즈에 따라 다소 조정될 수 있습니다.
단, 마크는 간격에 영향을 끼치지 않습니다.
Typography
Font
밀리의 서재 서비스에서 국문은 Noto Sans KR을 사용하고 영문, 숫자, 특수문자는 Lato를 사용합니다. 포인트 서체는 Noto Serif KR을 사용합니다.
서체 굵기는 Bold와 Regular 두 가지를 사용합니다.
Usage
위계에 따라 Title과 Body를 구분하여 사용합니다.
Title은 8가지, Body는 3가지로 구성되어 있으며, 경우에 따라 예외를 둘 수 있습니다.
Colors
Brand Colors
밀리의 서재 브랜드 색상입니다. Main 색상이 주 색상이며, Sub 색상은 보조 색상입니다.
주로 millie Yellow에 비중을 실어서 사용합니다.
millie Purple은 오디오북과 포인트 요소에 사용하며 Orange는 챗북과 에러, 공지, 경고에 사용합니다.
Red는 삭제, 실패에 사용하며 Blue는 성공에 사용합니다.
Greyscale Colors
주로 타이포그래피, 아이콘에 사용합니다.
해당 색상 이외의 회색 사용은 금지합니다.
Background Colors
배경 색상으로 사용합니다.
배경은 흰색을 기본으로 하되, 경우에 따라 해당 색상을 사용합니다.
Book Info
Book
표지 썸네일은 책 고유 비율을 유지하는 방식을 사용하되, 적용이 어려운 경우에는 1:1.4 비율을 사용합니다.
썸네일은 S, M, L 사이즈를 기본으로 합니다. 경우에 따라 자유롭게 설정 가능합니다.
마크는 오른쪽 상단에 위치하며 썸네일 넓이가 100px 이하일 경우에는 미 노출합니다.
커밍순은 남은 기간이 5일 이하일 경우 D-day로 표기하며 그 외에는 오픈 일자로 표기합니다.
Label
도서명은 최대 2줄, 저자명은 최대 1줄 노출을 기본으로 합니다. 초과될 경우 말줄임 처리합니다.
인포메이션 버튼은 오른쪽 상단에 위치하되, 경우에 따라 예외를 둘 수 있습니다.
책 타입 정보는 최상단에 위치하며 오디오북의 경우 리더명을 함께 표기합니다.
Book+Label
서비스 적용 예시입니다.
책 타입에 해당되는 마크는 중요도에 따라 순서대로 노출됩니다.
Icons
아이콘의 사이즈는 24px을 기본으로 하며 상황에 따라 12px, 16px, 24px, 32px로 제작하여 사용합니다.
아이콘의 선 처리는 Corner와 Cap을 Round로 처리합니다.
아이콘의 선 두께는 1px을 기본으로 하며 중요도에 따라 2px로 지정합니다.
Components
그림자는 지정된 스타일을 사용합니다.
탭, 프로필, 툴팁, 드롭다운 등의 요소는 지정된 스타일 사용을 권장합니다.
Navigation
Global Navigation Bar
현재 위치하는 화면을 표기하는 용도로 사용합니다.
각 OS에 적합한 내비게이션 바를 사용하며 앱, 모바일 웹은 하단에 위치하고 웹은 상단에 위치합니다.
Book List
사용자가 가장 최근에 읽은 책을 노출합니다.
GNB + Book List
서비스 적용 예시입니다.
도서 읽기가 가능한 앱에서만 노출됩니다.
Buttons / Selection controls
Buttons
각 버튼은 상황에 따라 알맞은 컬러, 크기의 버튼을 사용합니다.
Selection controls
체크 박스와 라디오 버튼, 셀렉트는 상황에 따라 목적에 맞게 사용합니다.
체크 박스는 하나 이상을, 라디오 버튼은 하나만 선택할 때 사용합니다.
Text Fields
Input
입력창은 상황에 따라 목적에 맞는 스타일을 사용합니다.
입력된 내용에 따라 시각적 피드백을 제공합니다.
Text Area
한 줄 이상의 내용을 입력해야 하는 경우에 사용합니다.
Search bar
돋보기 아이콘을 통해 검색이 가능하다는 것을 인지시켜 줍니다.
검색 내용 입력 시, 한 번에 지울 수 있는 삭제 버튼을 제공합니다.
Text Fields for Editor
에디터 화면에서는 해당 폼을 사용합니다.
Modals / Popup
Modals
모달은 중앙 정렬을 기본으로 하며, 4가지 버튼 타입을 사용합니다.
모달은 체크박스, 링크, 주의사항, 리스트, 테이블, 일러스트레이션 등의 형태를 포함할 수 있습니다.
Toast Popup
토스트 팝업은 화면 중앙에 나타나며, 일정 시간이 지난 후 사라집니다.
메시지는 간결해야 하며 최대 2줄까지 작성 가능합니다.
밀리 디자인 라이브러리 : https://bit.ly/3hsiTHP
해당 내용은 Figma 링크에서 언제든지 열람이 가능합니다.
