Overview/시작하기
여기 있는 값을 바꾸면 안드로이드와 iOS 앱이 함께 바뀝니다. 화면마다 따로 고칠 필요가 없습니다.
어떻게 움직이나
- 1디자이너가 값을 정한다색 하나, 여백 하나를 이 사이트에서 보고 고릅니다.
- 2파일 한 곳에 적는다
design-tokens.json 한 파일만 고칩니다.
- 3두 앱이 같이 바뀐다안드로이드·iOS·이 사이트가 그 값을 따라갑니다.
부품 진행 상황
0정의됨두 앱이 같은 규격으로 구현
3초안규격은 있고 확정이 필요
9비어있음디자이너가 채울 칸
약속
값은 디자이너가 정합니다값은 디자이너(연주희)가 정한다. 개발은 칸과 이름만 만든다. 아래 값은 현재 화면에서 실제로 쓰고 있는 값을 옮겨 적은 임시 기준선이며, 디자인 시스템이 나오면 통째로 덮어쓴다.
단위는 없습니다숫자는 단위 없는 밀도 독립 값이다. 안드로이드는 dp(글자는 sp), iOS는 point로 그대로 읽는다. 두 앱에 같은 숫자를 쓰면 같은 크기로 보인다.
층 구조Brand(로고·상징색) → Foundation(색·간격·글자·모서리·그림자·움직임) → Component(부품별 규격). 지마켓 디자인 시스템과 같은 층 구조다.
Brand/상징
- 디자인
- 초안
- 앱 연결
- 일부
브랜드 상징. 화면 장식에 함부로 쓰지 않고 로고·강조 한 곳에만 쓴다.
워드마크
provee.kr과 같은 워드마크. Poppins 700, 자간 -0.035em. 글자는 본문 먹색, 끝의 점만 브랜드 와인. 로고 여백 규칙, 최소 크기, 금지 사용 예시는 디자이너가 채운다.
상징색
쓰는 법
O와인은 누를 곳 하나에만 씁니다.
X화면을 와인으로 덮으면 강조가 사라집니다.
Foundation/색
- 디자인
- 초안
- 안드로이드
- 연결됨
- iOS
- 대기
테마 색, 필기 도구 색, 상태 색 세 묶음입니다. 화면 코드에 색을 직접 적지 않고 이 이름만 씁니다. 칩을 누르면 색 값이 복사됩니다.
테마
필기 도구
형광펜은 진하기 22%로 겹쳐 칠합니다.
상태
생성기가 이 블록도 코드로 내보내게 고치면 두 앱이 한 번에 따라온다.
읽히는지 확인
가나다 Aa 123본문 글자 / 화면 바탕16.3 · AAA
가나다 Aa 123흰 글자 / 와인9.2 · AAA
가나다 Aa 123와인 글자 / 카드 바탕9.1 · AAA
가나다 Aa 123맞았을 때 / 카드 바탕5.2 · AA
가나다 Aa 123틀렸을 때 / 카드 바탕5.3 · AA
4.5 이상이면 본문 글자로 써도 됩니다(AA). 3 이상은 큰 글자에만 씁니다.
Foundation/여백
- 디자인
- 초안
- 앱 연결
- 대기
여백은 4의 배수만 쓴다. 눈대중 숫자를 화면에 직접 적지 않는다.
단계
spacing.xs
4
아이콘과 글자 사이
spacing.sm
8
같은 덩어리 안
spacing.md
12
카드 안쪽 위아래
spacing.lg
16
카드 안쪽 기본
spacing.xl
24
카드끼리
spacing.xxl
32
화면 좌우 여백
spacing.xxxl
48
spacing.section
64
화면 안 큰 단락 사이
카드 안에서
lg 16
미적분 3단원
sm 8
치환적분 문제 12개 중 9개를 풀었습니다.
Foundation/글자
- 디자인
- 초안
- 앱 연결
- 대기
글자 단계. size는 글자 크기, lineHeight는 줄 간격, weight는 굵기(400 보통 · 500 중간 · 600 약간굵게 · 700 굵게). 한글 본문은 Noto Sans KR, 손글씨 느낌 표시는 Jua. 수식은 KaTeX가 따로 그린다.
단계
display34 / 42 · 700
손글씨를 읽는 순간 풀이가 살아납니다
title28 / 36 · 700
손글씨를 읽는 순간 풀이가 살아납니다
heading22 / 30 · 600
손글씨를 읽는 순간 풀이가 살아납니다
subheading18 / 26 · 500
손글씨를 읽는 순간 풀이가 살아납니다
body16 / 26 · 400
손글씨를 읽는 순간 풀이가 살아납니다
bodyStrong16 / 26 · 600
손글씨를 읽는 순간 풀이가 살아납니다
caption14 / 20 · 400
손글씨를 읽는 순간 풀이가 살아납니다
label12 / 16 · 500
손글씨를 읽는 순간 풀이가 살아납니다
question21 / 32 · 700
손글씨를 읽는 순간 풀이가 살아납니다
종이 위에 놓이는 문제 본문. 지금 화면이 쓰고 있는 값이다.
종이 위에서
함수 f(x) = x³ − 3x 의 극댓값을 구하시오.
Foundation/모서리
- 디자인
- 초안
- 앱 연결
- 대기
모서리 둥글기. 작은 부품일수록 작게.
단계
sm8칩
md14버튼
lg20카드
xl28시트
pill완전 둥글게동그란 버튼
Foundation/그림자
- 디자인
- 초안
- 앱 연결
- 대기
떠 있는 정도. y는 아래로 내린 거리, blur는 번짐, alpha는 그림자 진하기.
단계
flaty 0 · blur 0 · 0%종이 위
cardy 2 · blur 8 · 8%일반 카드
raisedy 6 · blur 18 · 12%누를 수 있는 카드
overlayy 14 · blur 40 · 18%시트
Foundation/움직임
- 디자인
- 초안
- 앱 연결
- 대기
움직임의 길이(밀리초)와 가속 곡선.
길이
motion.instant90ms
motion.fast160ms
motion.base240ms
motion.slow360ms
보기 쉽게 네 배 느리게 보여줍니다. 실제 길이는 왼쪽 숫자입니다.
가속 곡선
easeStandardcubic-bezier(0.2, 0, 0, 1)
easeEmphasizedcubic-bezier(0.2, 0, 0, 1.2)
원칙필기 중에는 애니메이션을 넣지 않는다. 펜이 밀리는 느낌이 나면 안 된다.
Product/종이와 펜
- 디자인
- 초안
- 앱 연결
- 일부
학생이 글씨를 쓰는 종이. 이 앱의 핵심 무대라 따로 둔다.
줄 종이
줄 간격 32. 검은 펜, 빨간펜 첨삭, 형광펜을 실제 값으로 그렸습니다.
펜 굵기
paper.lineGap32종이 줄 간격
paper.penWidth1~100.5 단위로 조절, 기본 2.5
paper.zoom1x~3x두 손가락으로 확대
Product/화면 골격
- 디자인
- 초안
- 앱 연결
- 일부
화면 골격. 태블릿이 기준이고 좁은 화면은 위아래로 접힌다. splitInkRatio는 풀이 화면에서 왼쪽 필기 영역이 차지하는 비율이다. 넓은 화면은 좌우 4대6, 좁은 화면은 위아래로 바뀐다.
풀이 화면
화면 폭이 900보다 좁으면 위아래로 접힙니다.
layout.screenPadding32화면 좌우 여백
layout.cardGap24카드 사이
layout.twoColumnMinWidth900이보다 좁으면 위아래로 접힌다
layout.contentMaxWidth1400본문이 더 넓어지지 않는 한계
Components/버튼
- 디자인
- 초안
- 코드
- 대기
primarysecondaryghostdanger
- 바탕 (Container)
- 글자 (Label) · typography.bodyStrong
height52
paddingX24
radiusradius.md = 14
texttypography.bodyStrong
variantsprimary, secondary, ghost, danger
남은 칸누를 때·비활성·로딩 상태의 색과 크기
Components/카드
- 디자인
- 초안
- 코드
- 대기
종류
구조
- 바탕 · radius.lg · elevation.card
- 제목 · typography.bodyStrong
- 보조 문구 · typography.caption
토큰
radiusradius.lg = 20
paddingspacing.xl = 24
borderwine.cardBorder = #E4DAC7
elevationelevation.card
variantsplain, feature, selectable
남은 칸카드 크기를 다르게 섞는 규칙. 지금은 전부 같은 크기라 밋밋하다.
Components/칩
- 디자인
- 비어있음
- 코드
- 대기
과목·단원 같은 짧은 꼬리표
채울 것
- 종류 (variants)
- 크기 (small · medium · large)
- 상태 (기본 · 누름 · 비활성)
- 쓰는 곳과 쓰지 않는 곳
Components/배지
- 디자인
- 비어있음
- 코드
- 대기
새 항목·개수 표시
채울 것
- 종류 (variants)
- 크기 (small · medium · large)
- 상태 (기본 · 누름 · 비활성)
- 쓰는 곳과 쓰지 않는 곳
Components/입력칸
- 디자인
- 비어있음
- 코드
- 대기
검색·답안 타이핑 입력칸
채울 것
- 종류 (variants)
- 크기 (small · medium · large)
- 상태 (기본 · 누름 · 비활성)
- 쓰는 곳과 쓰지 않는 곳
Components/목록 한 줄
- 디자인
- 비어있음
- 코드
- 대기
과목 목록·기록 목록의 한 줄
채울 것
- 종류 (variants)
- 크기 (small · medium · large)
- 상태 (기본 · 누름 · 비활성)
- 쓰는 곳과 쓰지 않는 곳
Components/탭
- 디자인
- 비어있음
- 코드
- 대기
채울 것
- 종류 (variants)
- 크기 (small · medium · large)
- 상태 (기본 · 누름 · 비활성)
- 쓰는 곳과 쓰지 않는 곳
Components/대화상자
- 디자인
- 비어있음
- 코드
- 대기
전체 지우기 확인 같은 물음
채울 것
- 종류 (variants)
- 크기 (small · medium · large)
- 상태 (기본 · 누름 · 비활성)
- 쓰는 곳과 쓰지 않는 곳
Components/아래 시트
- 디자인
- 비어있음
- 코드
- 대기
아래에서 올라오는 패널
채울 것
- 종류 (variants)
- 크기 (small · medium · large)
- 상태 (기본 · 누름 · 비활성)
- 쓰는 곳과 쓰지 않는 곳
Components/필기 도구줄
- 디자인
- 초안
- 코드
- 대기
펜·지우개·색·굵기 도구 줄
펜·지우개 / 색 세 가지 / 굵기 세 단계. 모양과 간격은 디자이너 확정이 필요합니다.
Components/빈 화면
- 디자인
- 비어있음
- 코드
- 대기
아직 아무것도 없을 때 보여줄 화면
채울 것
- 종류 (variants)
- 크기 (small · medium · large)
- 상태 (기본 · 누름 · 비활성)
- 쓰는 곳과 쓰지 않는 곳
Components/아이콘
- 디자인
- 비어있음
- 코드
- 대기
지금 홈 화면이 시스템 이모지를 그대로 쓰고 있다. 기기마다 다르게 보이고 브랜드가 없다. 자체 아이콘 세트가 필요하다.
크기
토큰