Elevation

고도(Elevation)는 UI 요소 사이의 깊이와 층을 눈으로 보여 주는 원칙이다.

원칙제목 링크 복사

0 · 바닥bg-layer-basement

1 · 기본bg-layer-default

2 · 시트 · 메뉴 시트 · 서랍z-modal

3 · 경고창z-alert

물리적인 세계의 높낮이를 빌려, 무엇이 무엇 위에 놓였는지 보여 준다. 사용자는 층을 보고 지금 다루는 것이 화면인지, 화면을 잠시 덮은 것인지를 안다.

쌓임 맥락 — Global · Local제목 링크 복사

층은 Global 과 Local 두 가지로 나눠 정한다.

• Global — 화면 전체의 구조적 층. 제품 화면 자체와, 그 위를 덮는 시트 · 경고창 같은 컨테이너다.
• Local — 한 층 안에서 콘텐츠끼리의 깊이. 늘 자기가 속한 Global 층 위에 놓인다.

Global 층제목 링크 복사

0 · 바닥bg-layer-basement

1 · 기본bg-layer-default

2 · 시트z-modal

3 · 경고창z-alert

• 0 · 바닥 — 화면 맨 아래의 배경. 스크롤되는 모든 콘텐츠 뒤에 깔려 가장 깊은 곳이 된다.
• 1 · 기본 — 페이지의 기본 짜임. 카드 · 목록 · 입력칸 같은 콘텐츠 덩어리와 상단 내비게이션이 여기 있다.
• 2 · 시트 — 화면을 덮으며 새 쌓임 맥락을 만든다. 시트는 그 자체로 새 Global 층이 되어, 그 위의 목록은 시트를 바닥으로 한 Local 콘텐츠가 된다.
• 3 · 경고창 — 가장 급한 정보를 다루는 맨 위의 모달이다. 사용자의 즉각적이고 온전한 주의를 요구하므로, 이미 열린 시트를 포함해 모든 요소보다 위에 온다.

화면 바탕제목 링크 복사

띠 화면 — 구역홈 · 자산 · 통계 · 예산 · 카드 상세

띠 화면 — 묶음설정 · 전체 · 캘린더 · 알림

흰 화면가계부 거래

폰 화면(Desk 앱 · 768 미만 웹)의 바닥은 늘 0 층 bg-layer-basement 다. 셸이 바닥을 칠하고, 화면은 그 위에 1 층(bg-layer-default)을 화면 종류대로 놓는다.

• 띠 화면 — 화면 폭 흰 띠를 쌓고, 띠 사이는 바닥이 보이는 틈으로 가른다(Divider 의 "강함"). 띠는 모서리 · 테두리 · 그림자가 없다. 틈은 띠 사이에만 있다 — 첫 띠는 머리 바로 아래에 붙고, 마지막 띠 아래에도 틈을 두지 않는다.
• 셸 밖 화면(로그인 · 스플래시 · 해지 완료 · 업데이트 게이트) — 회색 바닥 없이 흰 면 하나다.
• 흰 화면 — 화면 전체가 흰 층 하나이고, 묶음 · 구역은 목록 제목 · 구역 제목 · 여백으로 가른다.

어느 화면을 어느 모양으로 나눌지는 화면 이관 때 화면마다 비교 페이지로 고르고, 지금 그리는 화면의 이름은 Layout 의 "화면 바탕" 한 곳에 적는다. 상황 → 고를 것 표는 Layout 의 "화면을 나누는 법" 이다.

구역 띠 안의 머리 · 여백은 카드 안과 같은 값이다. 순자산도 폰에서는 모서리 없는 화면 폭 띠다. 데스크톱(768 이상)은 이 규칙 밖이다 — 같은 구역을 회색 바닥 위 Card 로 쌓는다.

띠 · 흰 화면 위에는 테두리 카드를 두지 않는다 — 흰 위 흰이라 테두리만 남는다. 목록은 바닥에 바로 두지 않는다 — 누른 줄의 바탕이 회색 위에서는 보이지 않는다. 띠 사이 틈은 옅어서(그림 아래 숫자) 띠가 하나로 붙어 보일 수 있다 — 묶음은 목록 제목이, 구역은 머리 글이 가른다. 값은 Layout 의 "화면 바탕" 이 정한다.

페이지 위 페이지제목 링크 복사

카테고리식비

식비

교통

카페

1. 페이지 — Global 1
2. 시트 — Global 2 · 새 쌓임 맥락
3. 시트 안의 목록(Select) — 시트를 바닥으로 한 Local

Global 과 Local 의 구분이 페이지 위에 페이지가 쌓이는 짜임을 만든다. 새로 덮인 층은 곧 새 기준이 되므로, 그 안의 말풍선 · 목록도 그 층을 바닥으로 삼아 제대로 쌓인다. 목록 · 메뉴 · 팝오버는 z-floating, 말풍선 · 툴팁은 z-tooltip 하나씩이라 어느 층에서 열어도 그 층 위에 뜬다.

Local 층제목 링크 복사

＋

1 · 기본 콘텐츠목록 · 탭 · 알림 띠 · 상단 내비게이션 · 층의 표면

＋

2 · 떠 있는 동작플로팅 버튼 · z-sticky

3 · 잠깐 뜨는 알림스낵바 · z-snackbar

목록 · 탭 · 버튼처럼 콘텐츠를 나타내는 요소는 자기가 놓인 표면(Global)의 층을 그대로 물려받는다. 그 안에서 위계와 중요도를 나누려고 1 ~ 3 으로 가른다.

• 1 · 기본 콘텐츠 — 목록 · 알림 띠 · 탭 · 상단 내비게이션처럼 페이지의 뼈대를 이루는 요소.
• 2 · 떠 있는 동작 — 기본 짜임보다 위에 떠 있는 표면. 떠 있는 버튼(Floating Action Button)이 여기 든다.
• 3 · 잠깐 뜨는 알림 — 흐름을 막지 않으면서 바로 확인해야 하는 일시적 알림. 스낵바가 여기 든다.

같은 층 안에서 구분하기제목 링크 복사

상단 바 — 표시 없음

옆 패널 머리 — 선 stroke-neutral-subtle

층이 같아도 그 안에서 쌓이는 순서를 나눌 수 있다. 상단 내비게이션과 목록은 둘 다 Local 1 이지만, 스크롤하면 목록이 내비게이션 아래로 들어가야 한다. 이때 내비게이션의 층을 올리지 않고, 선 · 그림자도 긋지 않는다 — Top Navigation 은 스크롤해도 바와 목록이 한 면이다(SEED Top Navigation 의 "고정된 영역과 스크롤되는 영역을 구분하기 위해 별도의 시각적인 장치를 표시하지 않습니다"). 데스크톱 머리 아래의 선도 긋지 않는다. 한 표면 안에서 머리와 본문이 따로 스크롤되는 대화상자 · Side Panel · Side Navigation 은 그 부품의 규칙대로 본문이 위로 스크롤되면 머리 아래에 얇은 선(stroke-neutral-subtle)을 긋는다. 높낮이 자체는 아래 세 방법으로 드러낸다.

고도를 드러내는 세 가지제목 링크 복사

표면 색배경의 밝기 · 색을 바꾼다 — 스낵바

＋

그림자떠 있는 높이를 그림자로 — 떠 있는 버튼 · 탭 바 · 메뉴

선가장자리에 테두리를 둔다 — 사이드바의 오른쪽 선 · 떠 있는 탭 바의 안쪽 테두리 · 카드의 1px 테두리

표면 색제목 링크 복사

배경색의 밝기나 채도를 바꿔 나타낸다. 스낵바 · 떠 있는 버튼이 대표적이다. 특정 맥락에서는 톤 차이가 아닌 전혀 다른 색을 배경으로 써서 층을 나타내기도 한다. 다크 모드에서는 높은 층일수록 밝다.

그림자제목 링크 복사

가장 전통적이고 직관적인 방법이다. 빛이 있다고 보고, 얼마나 높이 떠 있는지를 그림자의 크기 · 퍼짐 · 투명도로 나타낸다.

라이트

shadow-s1

shadow-s2

shadow-s3

shadow-s4

다크

shadow-s1

shadow-s2

shadow-s3

shadow-s4

그림자는 다크 모드에서 잘 보이지 않는다. 그래서 화면에서 주목도가 높은 몇 안 되는 요소 — 떠 있는 탭 바 · 떠 있는 버튼 · 메뉴 · 팝오버 — 에만 쓴다. groo 는 1차 수단으로 표면 색 차이를, 그림자는 보조로 쓴다.

선제목 링크 복사

표면의 가장자리에 테두리를 둬 영역을 나누고 높낮이를 암시한다. 사이드바의 오른쪽 선, 떠 있는 탭 바의 안쪽 테두리가 그 예다.

색 — 층 토큰제목 링크 복사

층 토큰은 콘텐츠를 담는 그릇의 표면 색이다. 글자나 아이콘 같은 개별 요소가 아니라 화면의 바탕과 층을 만드는 데에만 쓴다. 다크 모드에서는 높을수록 밝아진다.

bg-layer-basement 와 bg-neutral-weak제목 링크 복사

라이트

bg-layer-basement — 바닥

bg-neutral-weak — 카드 안 채움

다크

bg-layer-basement — 바닥

bg-neutral-weak — 카드 안 채움

두 토큰은 라이트 모드에서 비슷해 보이지만 다크 모드에서 다르게 움직인다.

• bg-layer-basement — 다크에서 가장 낮은 0 층의 바닥색이다. 기본 화면의 배경으로 쓴다.
• bg-neutral-weak — 라이트의 밝기 톤에 맞춰 다크에서도 대응하는 톤으로 보인다. 카드 안의 입력칸 · 칩처럼 배경이 놓인 층에 맞춰 조정돼야 할 때 쓴다.

바닥 위의 채움제목 링크 복사

라이트 · 회색 바닥

지난달 보기neutralWeak 1.00:1

지난달 보기neutralOutline — 테두리

식비bg-neutral-weak 1.00:1

식비bg-neutral-weak-alpha 1.11:1

다크 · 회색 바닥

지난달 보기neutralWeak 1.47:1

지난달 보기neutralOutline — 테두리

식비bg-neutral-weak 1.47:1

식비bg-neutral-weak-alpha 1.47:1

라이트에서 바닥 · 약한 배경(bg-neutral-weak) · 비활성(bg-disabled)은 같은 단계라, 회색 바닥 위에 바로 놓인 채움은 바닥에 묻힌다.

• 약한 배경 · 비활성으로 칠하는 것 — neutralWeak 버튼 · 안내 상자 · 스켈레톤 · 막힌 칸의 바탕 — 은 흰 표면(bg-layer-default · bg-layer-floating) 위에만 둔다.
• 회색 바닥 위에 바로 놓이는 버튼은 neutralOutline 이다. 입력칸은 테두리가 모양을 맡아 바닥 위에서도 보인다.
• 바닥 위에 자주 놓이는 Chip solid 바탕과 Segmented Control 트랙은 투명한 bg-neutral-weak-alpha(누름 bg-neutral-weak-alpha-pressed)로 칠한다 — 놓인 바탕에 섞여 어느 바탕에서나 보인다.

딤제목 링크 복사

모달 · 시트가 페이지 위에 뜰 때 뒤를 어둡게 덮는다.

---

구성과 일부 설명은 당근 SEED Design 의 Foundations 문서(Apache-2.0)를 바탕으로 했다. 값과 그림은 groo 것이다.