본문으로 건너뛰기
TDSMoring 디자인 시스템

컴포넌트

공통 UI 키트의 컴포넌트 82개 문서를 분류별로 모았다. 각 카드의 그림은 실제 컴포넌트를 그린 것이다. 서비스 색 선택기로 색을 바꿔 볼 수 있다.

이 페이지의 목차

모든 컴포넌트 페이지는 같은 순서다: 미리보기, 언제 쓰는가, 종류, 크기, 상태, 사용 방법, 치수와 토큰, 접근성, 잘한 예와 잘못한 예. 화면 하나에서만 쓰는 컴포넌트는 화면 전용 컴포넌트에 목록으로 모았다.

버튼8

누르면 동작을 시작하는 컴포넌트

  • PrimaryButton서비스 주색 그라데이션으로 채운 알약 모양 버튼이다.
  • SecondaryButton테두리만 있거나 옅은 주색으로 채운 알약 모양 버튼이다.
  • AmberButton주의 색(amber)으로 채운 알약 모양 버튼이다.
  • SmallButton목록 행 안에 놓는 작은 사각형 버튼이다.
  • TextButton글자만 있는 가장 가벼운 버튼이다.
  • CircleButton화살표가 들어 있는 둥근 주색 버튼이다.
  • IconButton아이콘 하나만 있는 투명한 둥근 버튼이다.
  • PressableReact Native의 Pressable에 Android 눌림 물결(ripple)을 더한 기본 눌림 영역이다.

입력과 선택12

값을 적거나 고르는 컴포넌트

  • Field글자를 입력하는 칸이다.
  • PillTabs알약 모양의 탭 모음이다.
  • Chip짧은 글자를 담는 작은 알약 표지다.
  • OptionRow퀴즈 보기 한 줄이다.
  • ChoiceCard카드 모양의 선택지다.
  • ChoiceNumber숫자가 들어간 얇은 동그라미다.
  • FilterPill"과목 전체 ▾"처럼 이름과 지금 값을 보여 주고, 누르면 선택 목록을 여는 알약 버튼이다.
  • SettingsSwitch켜고 끄는 스위치다.
  • RangeSlider손잡이 두 개로 정수 범위(시작~끝)를 고르는 슬라이더다.
  • Calendar한 달 달력에서 여러 날짜를 고르는 컴포넌트다.
  • TimeSheet아래에서 올라오는 시트에서 시각을 고른다.
  • RadioMark선택 목록 행의 끝에 놓는 동그란 라디오 표시다.

화면 안에서 위치를 바꾸거나 보여 주는 컴포넌트

  • TabBarMordy 앱 맨 아래의 탭 줄이다.
  • PageDots지금이 몇 번째 단계인지 알려 주는 작은 점 줄이다.
  • WeekStrip월요일부터 일요일까지 7일을 한 줄로 보여 주는 주간 표시다.
  • Timeline세로 선으로 단계를 이어 보여 주는 타임라인이다.
  • BackHeader화면 위쪽의 뒤로 가기 줄이다.
  • TitleHeader탭의 첫 화면 위쪽에 놓는 큰 제목 줄이다.

면과 목록9

내용을 담는 면, 헤더, 목록 행

  • Screen모든 화면의 바탕이다.
  • Card옅은 주색 틴트(card)를 깐 둥근 상자다.
  • Panel회색 바탕(canvas) 위에 놓는 흰 패널이다.Panel, PanelHead, PanelLink
  • SectionTitle화면 안의 한 묶음(섹션)을 시작하는 제목 줄이다.
  • WellRow패널 안의 목록 한 줄이다.WellRow, RowIcon
  • SettingsGroup설정 화면의 목록이다.SettingsGroup, SettingsCard, SettingsIcon, SettingsRow
  • SwipeRow행을 왼쪽으로 밀면 뒤에서 행동 하나(삭제 등)가 나타나고, 끝까지 밀면 그 행동이 실행되는 행이다.
  • Gap · HScrollGap은 세로 빈 간격이고, HScroll은 가로로 밀어 보는 줄이다.Gap, HScroll
  • ThemeProvider · ThemeFade화면 모드(시스템·라이트·다크)와 글자 크기 설정을 앱 전체에 적용하는 도구다.ThemeProvider, ThemeFade

알림과 안내9

상태, 결과, 확인을 알리는 컴포넌트

  • Notice화면 안에 끼워 넣는 한 줄 안내 상자다.
  • FeedbackCard문제를 채점한 뒤 결과("정답!", "오답")와 해설을 보여 주는 카드다.
  • EmptyState보여 줄 내용이 없을 때의 안내다.
  • Skeleton내용이 불러와지기 전에 그 자리를 채우는 깜빡이는 막대다.
  • Sheet화면 아래에서 올라오는 시트다.
  • OptionSheet시트 안에서 목록 중 하나를 고르는 컴포넌트다.
  • dialog화면 가운데 뜨는 확인 대화상자와 아래에서 올라오는 메뉴를 함수 호출 하나로 여는 도구다.DialogHost, DialogCard
  • toast화면 아래에 잠깐 떴다 사라지는 짧은 확인 메시지다.
  • AiMark생성형 AI가 만든 결과임을 알리는 표시다.

데이터 표시8

글자, 아이콘, 이미지, 진행률 같은 값을 보여 주는 컴포넌트

  • AppText앱의 모든 글자를 그리는 컴포넌트다.
  • PaperType안쪽의 모든 글자를 시험지 서체(Noto Serif KR)로 바꾸는 감싸개다.
  • SubjectIcon과목을 나타내는 둥근 아이콘 타일이다.SubjectIcon, SubjectGlyph
  • Avatar사용자의 사진, 또는 닉네임 첫 글자를 브랜드 그라데이션 원 위에 보여 준다.Avatar, NameLine
  • BrandMarkMordy의 심벌(웃는 얼굴이 복습 화살표로 이어지는 모양)을 브랜드 타일 위에 그린 이미지다.
  • ProgressRing진행률을 둥근 고리로 보여 준다.ProgressRing, AnimatedRing
  • ProgressBar진행률을 가로 막대로 보여 준다.
  • SegmentedProgress문제 하나에 칸 하나씩, 푼 문제만큼 칸이 채워지는 진행 막대다.

차트6

숫자를 그림으로 보여 주는 컴포넌트

  • DonutChart전체를 여러 부분으로 나눠 보여 주는 도넛 차트다.
  • Sparkline정답률 같은 작은 추이를 보여 주는 선 그림이다.
  • HourBars값 축이 있는 막대 차트다.
  • AreaLine누적 값을 선과 옅은 면으로 보여 주는 차트다.
  • CalendarHeat한 달 달력에서 날마다 공부한 시간을 색의 진하기(5단계)로 보여 주는 차트다.
  • ScoreBars과목별 예상 점수(0~100)를 막대로 보여 준다.

학습 콘텐츠8

문제, 개념, 수식, 그림을 그리는 컴포넌트

  • MathText수식이 섞인 글을 그린다.
  • Blocks문제 본문, 보기, 해설을 이루는 블록(문단, 보기 상자, 수식, 표, 그래프, 그림)을 위에서 아래로 그린다.Blocks, RichText
  • ConceptBody개념의 요약 문장과 핵심 포인트 목록을 그린다.
  • ChartBlock문제와 해설 안의 그래프(선, 막대, 점)를 그린다.
  • DiagramBlock선, 도형, 글자, 회로 부품(저항, 전지, 전구, 스위치), 스프링 같은 기본 모양으로 만든 도식을 그린다.
  • ImageBlock문제에 쓰인 원본 자료의 한 영역을 오려 보여 준다.
  • SourceCrop문제가 나온 원본 자료의 근거 부분을 보여 준다.
  • ZoomableImage페이지 이미지를 두 손가락으로 1배에서 4배까지 확대하고, 확대한 동안에만 끌어서 움직이며, 두 번 눌러 확대·축소하는 이미지다.

Calendar 앱16

Mordy Calendar 앱이 쓰는 컴포넌트

  • CheckCircle할 일을 완료로 바꾸는 동그란 체크 표시다.
  • DayStrip한 주 7일을 한 줄로 보여 주고 날짜를 골라 이동하는 주간 줄이다.
  • TabBar (Calendar)Mordy Calendar 앱의 탭 줄이다.
  • ScreenHeaderCalendar 앱의 전체 화면 위쪽 줄이다.ScreenHeader, HeaderAction
  • MonthView한 달을 화면 가득 보여 주는 달력이다.
  • TimeGrid주·일 보기의 24시간 시간표다.
  • ItemRow오늘과 할 일 목록의 한 줄이다.
  • PlanRowMordy가 만든 학습 계획 한 줄이다.
  • DdayChip시험까지 남은 날을 "D-24"처럼 보여 주는 칩이다.
  • MordyTag"Mordy"라고 적힌 작은 표지다.
  • SubjectMark · CategoryDot · GroupAvatar일정 줄과 칩에 붙는 작은 표식 세 가지다.SubjectMark, CategoryDot, GroupAvatar
  • ColorRow과목 팔레트 8색을 동그란 점으로 늘어놓고 하나를 고르는 컴포넌트다.
  • PlannerPreview환영·설정 화면에서 플래너가 어떤 모양인지 보여 주는 작은 그림이다.
  • QuickAddHost할 일, 일정, 시험을 한 줄로 빠르게 추가하는 시트다.
  • DateSheetHost · PlanSheetHost · MissedSheet · CategorySheetHostCalendar 앱의 시트 네 가지다.DateSheetHost, PlanSheetHost, MissedSheet, CategorySheetHost
  • ExamForm시험을 만드는 양식이다.