본문으로 건너뛰기

Muse

매거진·브랜드 스토리·포트폴리오처럼 읽히는 웹을 위한 에디토리얼 시스템이다. 세리프와 넉넉한 여백, 절제된 장식으로 글과 이미지를 주인공으로 둔다.

액션

버튼

주요 동작을 절제된 잉크 톤으로 실행한다.

토글 버튼

한 옵션의 켜짐과 꺼짐을 눌림 위치와 색면으로 표시한다.

아이콘 버튼

라벨 대신 아이콘을 쓰는 액션에 필수 접근성 이름을 연결한다.

다이얼로그

현재 지면의 맥락을 유지한 채 메모와 폼을 겹쳐 보여준다.

확인 다이얼로그

결과가 큰 작업 전에 짧은 설명과 확인 액션을 표시한다.

입력

텍스트 입력

한 줄 정보를 조용한 지면형 필드로 받는다.

텍스트 영역

긴 문장을 읽고 쓰기 좋은 호흡으로 받아들인다.

셀렉트

짧고 고정된 선택지를 익숙한 네이티브 흐름으로 고른다.

검색 입력

검색어 입력과 지우기 동작을 하나의 절제된 입력 블록에 둔다.

검색형 드롭다운

긴 선택 목록을 검색하고 키보드로 이동해 값을 고른다.

생성형 드롭다운

기존 값을 고르거나 같은 영역에서 새 값을 만든다.

선택

월 1회 발송

폼 필드

라벨과 안내, 오류를 하나의 편집 리듬으로 묶는다.

선택

체크박스

서로 독립적인 여러 조건을 함께 선택한다.

라디오

단일 선택의 가장 작은 네이티브 단위를 제공한다.

라디오 그룹

서로 배타적인 선택지를 하나의 의미 있는 집합으로 묶는다.

스위치

즉시 반영되는 설정의 켜짐과 꺼짐을 나타낸다.

필터와 짧은 선택값을 얇은 라벨 조각으로 전환한다.

세그먼트 컨트롤

한 영역의 표시 방식을 서로 배타적인 버튼 묶음으로 바꾼다.

What happens next?
The story moves to review.
Can I undo it?
A reviewer can return it.
아코디언

긴 설명을 제목별로 접고 펼쳐 한 화면의 길이를 줄인다.

내비게이션

First panel

관련 패널을 키보드와 클릭으로 전환한다.

브레드크럼

현재 위치까지의 상위 경로를 링크 목록으로 표시한다.

페이지네이션

긴 목록의 현재 페이지와 이전, 다음 이동을 표시한다.

상태

Editor's note

발행 전에 인용 출처를 검토한다.
알림 배너

지속적인 메시지를 편집 지면의 주석처럼 표시한다.

Published
뱃지

발행 상태와 짧은 분류를 작은 잉크 라벨로 표시한다.

스켈레톤

콘텐츠를 불러오는 동안 텍스트와 이미지의 자리를 표시한다.

스피너

짧은 처리 중 상태를 작은 회전 표시로 알린다.

Story72%
진행 막대

작업 완료 비율을 얇은 트랙과 채움으로 표시한다.

미터

정해진 범위 안의 현재 측정값을 라벨과 함께 표시한다.

토스트

작업 결과를 화면 오른쪽 위에 일정 시간 표시한다.

표시

M
아바타

사람과 편집 주체를 이니셜 또는 이미지로 식별한다.

MN+1
아바타 그룹

여러 참여자를 겹친 원형 식별자와 초과 인원으로 압축한다.

Field Notes

Issue 04

A short record from the editorial desk.

카드

제목, 설명과 본문을 하나의 편집 지면으로 구성한다.

Readers

24.8K

+8%

스탯 카드

독자 수처럼 중요한 단일 지표와 변화량을 함께 표시한다.

편집자 노트
툴팁

짧은 풀이를 본문을 어지럽히지 않고 곁들인다.

K
키보드 키

단축키와 키 입력을 물리 키 모양으로 표시한다.

레이아웃

Editorial block
박스

관련 내용을 종이색 면과 얇은 잉크선 안에 묶는다.

EssayNotes
스택

라벨과 컨트롤을 한 축에 일관된 간격으로 배치한다.

그리드

카드와 이미지 영역을 일정한 열과 간격에 배치한다.


Next
구분선

콘텐츠 묶음 사이를 1px 선과 선택적 라벨로 나눈다.

패턴

Nothing here

The next story appears here.

빈 상태

콘텐츠가 없는 이유와 다음 액션을 한 블록에서 안내한다.

NameStatus
StoryReady
SignalLive
테이블

읽기 중심 데이터를 시맨틱 표와 얇은 셀 경계로 구성한다.

ID
Name
Status
A-01
Story
Ready
A-02
Signal
Live
데이터 그리드

폭이 큰 업무 데이터를 고정 열과 스크롤 영역에 배치한다.

날짜 구분선

피드와 일정 목록에서 날짜별 콘텐츠 경계를 표시한다.

Status
Ready
Owner
Nova
설명 목록

용어와 값을 한 쌍씩 정렬해 상세 정보를 읽기 쉽게 만든다.

N

Nova

Story team

84K

Reach

+12%

92%

Rate

데이터 스탯 카드

한 대상의 이름과 여러 지표를 하나의 편집형 카드에 담는다.

R

Relay

제공: Orbit

Sends story signals.

연동 카드

외부 서비스 설명과 연결 상태 액션을 함께 표시한다.

Story review

14:00
NM
이벤트 카드

일정 제목, 시간과 참여자를 한 카드로 묶는다.

데이터 시각화

선 차트

시간에 따른 여러 값의 변화를 얇은 선으로 비교한다.

막대 차트

범주별 크기를 얇은 막대와 명시적 경계로 비교한다.

도넛 차트

전체에서 각 항목이 차지하는 비율을 원형 분포로 표시한다.

스파크라인

작은 카드 안에서 최근 값의 방향만 빠르게 표시한다.

게이지

단일 완료 비율을 반원과 큰 숫자로 표시한다.

히트맵

행과 열이 만나는 값의 밀도를 한 색의 농도로 표시한다.

분포 막대

부분과 전체의 비율을 한 줄 누적 막대로 비교한다.

레이더 차트

여러 지표의 균형을 다각형으로 비교한다.

방사형 막대

여러 비율을 크기가 다른 동심원에 배치한다.

워터폴 차트

증가와 감소가 최종 합계에 미치는 영향을 단계별로 표시한다.

롤리팝 차트

범주별 값을 가는 선과 네모난 점으로 비교한다.