Skip to main content

Carbon Design System - 톺아보기

참고한 디자인 시스템

⚠️ 고려점
1, UI 요소 중에는 사용자의 인터렉션을 블락킹하는 요소와 그렇지 않은 요소가 있다.

  • 모달같은 경우 기존의 작업 플로우를 중단하고 반드시 봐야하는 요소이다.
  • 반면 토스트 메시지 같은 경우 인터렉션을 블락킹하지 않는 요소이며 n초 이후 사라진다.

2, 색상에 따라서 중요도가 달라진다.

  • 로그 메시지를 log level로 구분하듯, 사용자에게 전달하는 메시지의 긴급도에 따라서 색상을 달리하여 전달 가능하다.
  • 빨간색이 가장 크리티컬한 색상을 나타낸다.

3, 아이콘은 사용자에게 무의식적으로 정보를 전달한다.

  • 콘텐츠를 읽기전에 아이콘을 통해 맥락을 더 쉽게 파악할 수 있다. Warning 아이콘은 주의해야 할 내용을 예측하게 만든다.
  • 뱃지도 유사한 역할을 한다. 대상을 빠르게 인지할 수 있도록 도움.

레이어-1:elements​

📌 Color

  • 가독성과 접근성을 고려한 컬러 팔레트를 정의한다.

1, Theme 테마 (색상 카테고리)

  • 디자인된 색상 모음 : eg, gray 50 ~ 900

2, 레이어링 모델 : 깊이감을 표현하기 위해 색상 10씩 번갈아 사용

  • 밝은 테마에서는 레이어가 추가될 때마다 흰색과 회색 10이 번갈아 나타납니다.
  • 어두운 테마에서는 레이어가 추가될 때마다 레이어가 한 단계씩 밝아집니다.

3, 토큰

  • 배경과 텍스트 수준에서 구분(shadcn에서) background, foreground로 구분 한다.
  • 사용 빈도 구분 : primary, secondary, neutral
  • 역할 구분 : $border-strong, $text-placeholder 등

📌 Typo

  • 폰트, 글꼴 크기, 굵기, 행간 요소의 사전 설정 구성이다.

레이어-2:components​

📌 Switch

  • 스위치는 하나의 입력에 대해 빠르게 끄고 켤 수 있다.
  • 구성 : 스위치 + 라벨 ( 왼쪽 정렬의 경우 스위치가 라벨의 왼쪽에 위치 )
  • 토글, 탭, 세그먼트 버튼이 유사하지만 목적이 다르다.
    • 탭의 경우 카테고리의 큰 분류를 네비게이션 하는 용도이다. 즉 상위 개념, 하위 개념의 페이지가 있을 때 하위 페이지를 탐색하는 경우 사용 된다.
      • 탭은 한번에 하나만 선택 가능, Primary Tab, Secondary Tab이 있는 2계층도 가능.
      • Secondary Tab은 디자인을 달리해서 표현해야 한다.
    • 세그먼트 버튼은 Tab과 작동은 유사하지만, 더 하위 계층의 개념으로 사용된다.
      • Single Choice, Multiple Choice 2가지 가능.
      • eg, 모바일/PC 선택지, 에디터에서 폰트 선택지 등

📌 Dropdown
https://carbondesignsystem.com/components/dropdown/usage/

  • 드롭다운은 여러 옵션들 중 하나 혹은 여러개를 선택하도록 유도하는 요소이다.
  • 구성 : 컨테이너 + 라벨 + 드롭다운 아이콘 + 드롭다운 리스트
  • 드롭다운 리스트에서 선택된 옵션은 컨테이너의 라벨로 표시된다.
  • 컨테이너의 경우 특정 너비 이상으로 늘어나지 않도록 max-width를 설정한다.
  • 너비가 줄어들면 컨테이너의 라벨은 텍스트 줄임표가 가능하며, 이때 툴팁으로 전체 텍스트를 확인할 수 있다.
    • 드롭다운 리스트는 말줄임표를 사용하지 않는다.

유사한 컨셉 :

📌 Tab

  • 페이지 수준의 카테고리 네비게이션을 위한 요소이다. 상위 카테고리와 하위 카테고리가 존재하는 경우 카테고리 분류를 위해서 사용한다.
  • 반드시 1개만 선택 가능
  • 상태 : default, hover, selected, disabled

📌 Segement

  • 탭과 유사하게 작동하지만, 더 하위 계층의 개념으로 사용된다. 2개 이상 옵션을 선택에 사용.

📌 Badge

  • 시각적 요소를 활용하며, 대상의 특징을 빠르게 인지시켜줌.
  • New Badge : 신규 기능 나타냄.
  • eg, 무료 배달, 30분 이내 배달, 할인 등

📌 Chip

  • 칩은 정보의 선택 혹은 필터링에 사용 된다.
  • 뱃지 처럼 짧은 키워드를 사용한다. 하지만 뱃지와 달리 액션이 가능한 요소이다.
  • 필터링의 경우 예, Table 필터링 요소를 테이블 상단 영역에 칩으로 표기, 선택 및 삭제 가능
  • 선택의 경우 예, 100개의 선택지를 쭉 나열해서 원하는것만 쏙쏙 멀티 선택 및 해제
  • 토글 버튼과 유사하지만 칩은 라벨이 변경되지 않는다.
    • 또한 칩은 동적으로 n개 늘어나지만, 토글버튼은 레이아웃이 고정되어 있다.

📌 Loading

  • 사용자의 작업을 진행하고 있음을 표기하는 요소이다.
  • 로딩 타입 : 로딩 없이 진행 (아주 짧게 완료되는 경우 로딩 표기가 독이된다.), 스켈렉톤 UI 로딩, 스피너 표기, progress bar 표기

📌 Indicators

  • 숫자, 점을 사용하여 총 콘텐츠의 수를 표기한다.
  • 예, 캐러쉘의 현재 페이지와 총 페이지 수를 Dot 으로 표기한다.

⚠️ 개발 고려점

  • 컴포넌트의 상태에 따른 CSS variant 및 기능 정의가 선행되어야 한다.
    • 상태 : 기본, hover, disabled, selected, loading, error 고려
    • 반응형 컨테이너 : 늘어나는 경우, 줄어드는 경우
    • 반응형 라벨 : 라벨의 오버플로우
      • 1, 말줄임표 사용, 툴팁으로 전체 텍스트를 표기.
      • 2, 개행으로 표기

레이어-3:patterns​

📌 Message Box : 사용자가 확인해야 할 콘텐츠를 안내한다.

  • 진행 중인 작업을 방해하지 않고 적절한 색상과 쉬운 워딩으로 메시지를 전달해야 한다.
  • 토스트, 툴팁과 달리 인라인 배치 이다. 시간이 지나도 사라지지 않으며, 필요시 닫기 버튼을 제공 할 수 있다.
  • 구성 : 컨테이너 영역, 아이콘 + 타이틀, 서브타이틀
  • 중요한 알림의 경우 red 계열의 색상과 warn 아이콘 등 색상을 달리한다.
  • 서브타이틀이 많은 경우 접기/펼치기 아이콘 제공
  • 색상별 메시지 예시
    • gray : 중요도가 낮고, 부가적인 설명
    • teal, yellow : 서비스나 기능 혜택을 표시 및 유도할 때
    • green : 조건 달성, 성공된 정보를 표기
    • orange : 주의해야 할 내용, 심각성이 낮은 오류 전달
    • red : 오류, 실패 등 서비스 정상적으로 이용 불가능 한 경우

📌 Modal

  • 모달은 화면 가운데 창을 띄워서 정보를 안내하거나 상호작용 한다.
  • 가운데에 오버레이로 배치되므로 주목도가 높고 작업이 완료되거나 고객이 닫기전까지는 유지된다.
  • 구성 : 컨테이너, 아이콘 + 헤더 + 닫기, 콘텐츠 영역, 버튼 영역
  • 콘텐츠 영역이 길어지면 스크롤을 제공 해야한다.
  • 모달이 여러개 나오는 경우 스택형으로 관리해야 한다.
  • 팝업과의 차이점 : 모달의 경우 기존의 페이지에서 새로운 레이어를 올리며 부모와 자식관계에 있다.
    • 하지만 팝업의 경우 기존 페이지와 독립적이며 별도의 윈도우를 통해 생성된다. 브라우저의 옵션을 통해 열리지 않도록 설정 가능.
    • 팝업의 예) 이벤트, 사과문, 안내문 등 메인 서비스와 분리된 내용을 표시.
  • bottom sheet, side sheet : 하단이나 측면에서 슬라이드 되어 나타나는 UI 콘텐츠 이다.
    • 바텀시트는 하단에서 나오므로 모바일 환경에서 모달/팝업의 대안으로 적절하다.
    • 사이드 시트는 보조 콘텐츠를 표시하는 컴포넌트이며, 기본 콘텐츠와 상호작용하며 계속 표기 가능.

개발에서 고려사항

  • 팝업에서 오늘 다시 보지 않기를 클릭하면 스누징 정보는 쿠키나 로컬스토리지, 레디스를 활용 할 수 있다.
  • 중요한 작업이 진행중 이며 취소가 불가능한 경우 오버레이 클릭 닫기를 막아야 한다. 
// popup의 예시  
  window.open(
    'https://example.com',
    'popupWindow',
    `width=${width},height=${height},left=${left},top=${top}`
  );

📌 Tooltip/Popover

  • 툴팁은 말풍선 형태로 추가 설명이 필요한 요소에 부착된다.
  • 팝오버의 경우 다른 컴포넌트의 조합으로 CTA를 포함 할 수 있다.
  • 구성 : Tail (클릭한 요소의 지점) + Container + Body
  • 툴팁은 가로사이즈를 화면의 4분할 이내 들어오도록 권장, 너무 큰 경우 popover 모달로 변경
  • 팝오버 타입의 경우 click 액션으로 툴팁이 고정될 수 있다.
  • 온보딩 용도의 툴팁으로 사용하는 경우 닫기 버턴을 만들고 스누징로직을 로컬 스토리지에 저장 가능

📌 Toast

  • 액션에 대한 피드백을 유저에게 전달하는 요소이며, 일시적으로 오버레이로 노출된다.
  • 사용자의 추가 작업이 필요하지 않는 낮은 우선순위의 정보성 콘텐츠를 담는다.
  • 유저가 반드시 확인해야 하는 중요한 알림이나 액션이 필요한 경우 모달, 메세지 박스를 통해 전달한다.
  • 구성 : 컨테이너 + 아이콘 + 메시지
  • 메시지는 간결하게 한 줄로 만든다.

📌 Table

  • 구성 : 테이블의 타이틀 헤더 영역 + 테이블 + 페이지 네이션 ( pagination, 무한 스크롤, see more 버튼 )
  • 기술적 고려 사항 : 테이블에 많은 요구사항을 직접 구현해도 좋지만, react-table 혹은 AG Grid를 잘 쓰는것도 필요하다.

📌 Breadcrumb

  • 구성 : 페이지 링크 + 화살표 + 현재 페이지
  • 현재 페이지를 제외한 나머지 요소들은 페이지 계층을 시각화 하며, 링크를 클릭하면 해당 페이지로 이동한다.
  • 깊이가 깊은 경우라면 중간 페이지 링크를 축약된 텍스트로 표시 및 드롭다운으로 펼쳐서 확인 가능하다.

📌 Progress step

  • 사용자가 따라야 할 단계를 시각적으로 표현, 진행 상태의 뒤로 돌아가기 가능.
  • 각 단계의 상태 ( 애러, 클릭커블 )을 명시하여 전달 해야 함.
  • 페이지 수준에서 진행상태를 표기하면 스티키 UI로 고정하는것이 좋다.

📌 Navigation bar

  • 보통 Global Navigation bar(상단 위치), Left Navigation bar(좌측 위치)가 있다.
  • 페이지의 탐색을 제공하는 수단이다. 현재 위치를 나타내고, 다른 페이지로 이동할 수 있는 링크를 제공.