[인프런 워밍업 스터디 1기 디자인] 3주차 발자국

인프런 워밍업 클럽 미션 중 작성했던 글을 옮겨서 발행합니다. 원문 링크↗ 

주중에 스케줄이 많이 잡혀서 따라잡기 쉽지 않았다. 때문에 다크모드 배리어블은 오늘 밤에 공부할 예정이라, 피드백과 네비게이션 컴포넌트, 그리고 특강에 대해서만 작성한다. 덧붙여 오늘부터는 강의요약을 좀 더 열심히 작성해봤다! 다른 분들의 발자국을 보고 약간 반성해서…ㅎㅎ 그럼 시작한다.

 

📖 강의 요약

6. 피드백(Feedback) 컴포넌트 만들기

피드백 컴포넌트는 사용자에게 행동의 결과를 전달하는 방법을 제공하는 컴포넌트를 말한다. (출처: https://www.geeksforgeeks.org/react-mui-feedback-components/) 강의에서는 Alert, Toast, Skeleton Loader, Loading Spinner, Progress Bar, Modal을 다룬다.

 

Alert

Alert는 화면 상단에 눈에 띄는 메시지를 표시하는 컴포넌트다. 새로운 기능을 홍보하거나 피드백 메시지를 제공하는 데 사용된다. ‘Alert’라는 이름으로 42%, ‘Banner’라는 이름으로 31% 사용되어 강의에서는 Alert라 부른다. (출처: UI Guideline/Alert)

• Anatomy
  • Alert
    • content
      • leadingIcon
      • textContainer
        • title
        • description
• Properties
  • 🔷 Status: brand, neutral, info, warning, success, error
  • 🔷 Style: outline, filled, transparent
  • 👁 Icon
  • 🔹 → Icon (info, warning, success, error 제외)
  • 🔠 Title
  • 👁 Description
  • 🔠 → Description
  • 👁 Close

 

Toast

Toast는 일반적으로 페이지 오른쪽 상단에 떠 있는 상자로 표시되는 컴포넌트다. 토스트는 콘텐츠를 위한 제한된 공간을 제공하므로 콘텐츠가 짧고 간결해야 하며, 사용자 행동에 대한 응답으로 즉각적인 피드백을 제공하거나 앱이 수행했거나 할 프로세스를 사용자에게 알려야 한다. ‘Toast’으로 48%, ‘Notification’으로 22% 사용되므로 강의에서는 Toast를 사용한다. (출처: UI Guideline/Toast)

• Anatomy
  • textContainer
    • title
    • description
  • actionItems
    • icon
    • button
    • button
• Properties
  • 🔷 Type: textonly, text&action, text&longeraction
  • 🔷 Status: neutral, info, error, warning, success, inverse
  • 🔠 Title
  • 👁 Description
  • 🔠 → Description
  • 👁 Action
  • 👁 Close

 

Skeleton Loader

Skeleton은 콘텐츠가 로딩 과정에 있다는 것을 시각적으로 전달하기 위해 UI의 low fidelity 표현을 제공한다. 이름은 ‘Skeleton’으로 38%, ‘Skeleton Loader’으로 31% 사용된다. (출처: UI Guideline/Skeleton)

왜 Skeleton Loader로 쓰셨는지가 또 궁금해서 찾아봤다. ChatGPT 3.5가 말하길, 스켈레톤 로더는 스켈레톤과 유사하지만 애니메이션이 추가된 경우가 많아 로딩 중임을 사용자에게 더 명확하게 알려준다고 한다. 따라서 스켈레톤은 단순히 레이아웃의 자리 표시자임을 강조하고 스켈레톤 로더는 로딩 상태를 더 강조한다고 볼 수 있다. 실제로 ‘스켈레톤’ 용어를 사용하는 Polaris는 정적이고, ‘스켈레톤 로더’ 용어를 사용하는 Thumbprint는 동적이었다. 그리고 강의에서도 애니메이션을 제작한다 😎!

• Anatomy : 도형을 사용할 뿐이라 구조라고 할 것이 없었다. 다만 Linear 사용 값에 신경쓸 필요가 있어보인다!
• Properties
  • 🔷 Type: circle, rect, text
  • 🔷 Progress: 0, 33, 66

 

Loading Spinner

스피너는 처리되고 있는 상태를 나타나는 애니메이션이 있는 원의 윤곽이다. (출처: UI Guideline/Spinner)

• spinnerLoader
  • Properties
    • 🔷 Size: sm-16px, md-24px, lg-32px, xl-48px
    • 🔷 Type: primary, secondary
• spinnerAnimation
  • Properties
    • 🔷 Progress: 0, 25, 50, 75

 

Progress Bar

프로그레스 바는 진행중인 사용자의 과정에 대한 피드백을 제공하기 위한 선형 지표다. (출처: UI Guideline/Progress)

• Anatomy
  • Bar
    • bar
  • progressbarIndicator
    • startingPoint
    • endPoint
• Properties
  • 🔷 Progress: 0, 25, 50, 75, 100

 

Modal & Slot

Modal은 Slot 컴포넌트를 만든 뒤 제작했다. 여기서 Slot 컴포넌트는 잘 몰라서 찾아봤다.

Figma에서 컴포넌트를 구축할 때 일부 컴포넌트는 많은 유연성이 필요하다. 이러한 유연성과 자유를 슬롯을 통해 부여할 수 있다. 사용 방법은 다음과 같다. 컴포넌트 내부에 슬롯 컴포넌트를 배치하고, 이후 디자이너는 필요할 때마다 슬롯을 다른 컴포넌트로 교체한다. (2차 출처: [UI자료] Figma 슬롯 구성 요소: 사용 이유 및 사용 방법, 1차 출처: Figma Slot Components: why and how to use them)

• Slot
  • Anatomy
    • title
      • icon
      • title
    • (option) description
  • Properties
    • 🔷 Size: default, small
    •  
• SlotGroup
  • Anatomy
    • Slot1
    • Slot2
    • Slot3
    • …
    • Slot6
  • Properties
    • 🔷 Direction: horizontal, vertical
    • 🔷 Size: default, small
    • 🔷 Reverse: true, false
    • 🔹 Nested Instances

 

• Modal
  • Anatomy
    • content
      • topContent
        • icon/placeholder
        • textContainer
          • title
          • description
      • slotGroup
      • slotGroup
    • closeIcon
  • Properties
    • 👁 Leading Icon
    • 🔹 → Leading Icon
    • 🔠 Title
    • 👁 Description
    • 🔠 → Description
    • 🔹 Nested Instances
• Modals : 용도에 따라 Modal의 슬롯, 아이콘 등을 조정하여 만들어둔 컴포넌트셋
  • Modals 제작시 참고 → 18 Modals & Popups

 

7. 네비게이션(Navigation) 컴포넌트 만들어보기

내비게이션은 작업을 완료하기 위해 앱의 화면 사이를 이동하는 행위이다. 전용 내비게이션 구성 요소, 콘텐츠에 내비게이션 동작 포함, 플랫폼 어포던스 등 여러 수단을 통해 활성화된다. (출처: M2) Link, Breadcrumbs, Tabs, Bottom Navigation, Pagination, Side Navigation, Header, Carousel을 포함한다.

Link

링크는 탐색 요소로 사용된다. (출처: UI Guideline/Link)

• Anatomy
  • icon
  • Label
  • icon
• Properties
  • 🔷 Type
  • 🔷 Style
  • 🔷 State
  • 🔠 Label
  • 👁 Leading Icon
  • 🔹 → Leading Icon
  • 👁 Trailing Icon
  • 🔹 → Trailing Icon

 

Breadcrumbs

브레드크럼프는 사용자가 레벨 간의 계층 구조를 이해하고 다시 탐색하는 데 도움이 되는 보조 탐색 패턴이다. (출처: UI Guideline/Breadcrumbs)

• Anatomy
  • Link-1
    • icon
    • Label
    • icon
  • Link-2
  • Link-3
  • Link-4
  • current page
• Properties
  • 🔷 Max Level
  • 👁 Level4
  • 👁 Level3
  • 👁 Level2
  • 👁 Level1
  • 🔠 Current Page

 

Tabs

탭은 사용자가 동일한 컨텍스트 내에서 쉽게 탐색할 수 있도록 돕는 컴포넌트다. (출처: UI Guideline/Tabs)

• Tabs
  • Anatomy
    • part-1
    • part-2
    • part-3
    • …
    • part-8
  • Properties
    • 🔷 Items: 8, 7, 6, 5, 4, 3, 2, 1
    • 🔹 Nested Instances
• TabPart
  • Anatomy
    • Icon
    • Label
  • Properties
    • 🔷 Selected: false, true
    • 🔷 State: default, hover, press, focus, disabled
    • 👁 Leading Icon
    • 🔹 → Leading Icon
    • 🔠 Label

 

Bottom Navigation

바텀 네비게이션은 화면 하단에 3~5개의 목적지를 표시하고, 각 목적지는 아이콘과 선택적 텍스트 라벨로 표시된다. (출처: M2)

• navbar
  • Anatomy
    • navbarItem-1
    • navbarItem-2
    • …
    • navbarItem-5
  • Properties
    • 🔷  Type: icons&label, icononly
    • 🔷  Items: 5, 4, 3
    • 🔹 Nested Instances

• navbarItem
  • Anatomy
    • Icon
      • Icon
      • badge
    • Label
  • Properties
    • 🔷 Type: icononly, icon&label
    • 🔷 Selected: false, true
    • 🔷 State: default, hover, focus, press
    • 🔹 Icon : 네비게이션에 필요한 아이콘만 선택
    • 🔠 Label
    • 👁 Badge
    • 🔹 Nested Instances

 

Pagination

페이지네이션은 다음 또는 이전 페이지로 이동하기 위한 제어와 함께 콘텐츠나 데이터를 여러 페이지로 분할하는 데 사용된다. (출처: UI Guideline/pagination)

• pagination
  • Anatomy
    • prev
      • part/paginationControl
      • part/paginationControl
    • page
      • part/paginationPage
      • …
    • next
      • part/paginationControl
      • part/paginationControl
  • Properties
    • 🔹 Nested Instances

• part/paginationPage
  • Properties
    • 🔷  State: default, hover, selected, more
• part/paginationControl
  • Properties
    • 🔷 State: default, hover, active, disabled
    • 🔹 Icon

 

Side Navigation

사이드 네비게이션은 사용자가 제품이나 섹션의 콘텐츠 등 페이지 내 탐색을 도와주는 측면 패널이다. (출처: UI Guideline/sidebar)

• Side Navigation
  • Anatomy
    • Top
      • sidenavMenuGroup
      • sidenavMenuGroup
    • Bottom
      • sidenavMenuGroup
  • Properties
    • 🔷  Type: full, icononly, icon&label

• part/menuItem
  • Anatomy
    • icon
    • textContainer
      • Title
      • Description
    • badge
  • Properties
    • 🔷 Type: full, icononly, icon&label
    • 🔷 Selected: false, true
    • 🔷 State: default, hover, press, focus
    • 🔷 Disabled: false, true
    • 🔠 Title:
    • 👁 Leading Icon
    • 🔹 → Leading Icon
    • 👁 Description
    • 🔹 → Description
    • 👁 Badge
    • 🔹 Nested Instances
• part/heading
  • Anatomy
    • headingText
      • heading
    • divider
  • Properties
    • 🔠 headingText
    • 👁 Divider
• sidenavMenuGroup
  • Anatomy
    • part/heading
    • menuItem-1
    • menuItem-2
    • menuItem-3
    • …
    • menuItem-8
  • Properties
    • 🔷 Type: full, icononly, icon&label
    • 👁 Heading
    • 🔹 Nested Instances

 

Header

헤더는 모든 페이지 상단에 나타나는 요소로 일반적으로 사이트 이름과 기본 탐색을 포함한다. (출처: the component gallery)

• Header
  • Anatomy
    • leadingItem
      • logo
    • navigation
      • navItem …
    • function
      • navItem …
  • Properties
    • 🔹 Nested Instances

• navItem/headerMenuGroup
  • Anatomy
    • part/headerMenuItem …
  • Properties
    • 🔹 Nested Instances

 

• headerMenuItem
  • Anatomy
    • icon
    • textContainer
      • title
      • description
  • Properties
    • 🔷 Selected: false, true
    • 🔷 State: default, hover, press, focus
    • 🔷 Disabled: false, true
    • 🔠 Title
    • 👁 Leading Icon
    • 🔹 → Leading Icon
    • 👁 Description
    • 🔹 → Description
    • 👁 Badge
    • 👁 HorizontalExpand

• navItem
  • Anatomy
    • container
      • label
        • icon
        • label
      • icon
  • Properties
    • 🔷 State: default, hover, focus, selected
    • 🔷 Type: navigation, setting, user, search, more, help, alert
    • 🔷 Sub Menu: false, true
    • 👁 Label
    • 🔠 → Label
    • 👁 Nav Icon
    • 🔹 → Nav Icon
    • 👁 Badge
    • 🔹 Nested Instances

 

Carousel

캐러셀은 관련 콘텐츠 항목 세트를 연속으로 표시하기 위한 컴포넌트다. (출처: UI Guideline/carousel)

• carousel
  • Anatomy
    • parts/imagePlaceholder
    • carouselArrow
    • carouselArrow
    • container
      • subtitle
      • contents
        • carousel Main Title
        • carousel Content
    • carouselIndicator
  • Properties
    • 🔹 Nested Instances

• carouselArrow
  • Properties
    • 🔷 Direction: left, right
    • 🔷 State: default, hover, selected, disabled
    • 🔷 Size: md, lg

• carouselIndicator
  • Anatomy
    • carouselDot1
    • carouselDot2
  • Properties
    • 🔷 Items: 5, 4, 3, 2
    • 🔹 Nested Instances

• carouselDot
  • Properties
    • 🔷 State: default, hover, selected

 

플러그인

Find/Focus : 특정 텍스트가 있는 레이어만 선택할 수 있다.

중간점검 : 특강 및 LIVE QnA : 타이포그래피

이번 특강은 타이포그래피 배리어블 관련 내용이었다.

• primitive, sematic 두 가지 모두 사용해야 한다.
  • primitive: font family, font size, font style, font weight, line height, letter spacing
  • semantic: heading, body
• typeface, font, font family 등 용어의 정의를 정확히 알고 사용할 것(헷갈릴 수 있다)
• 시스템별로 폰트를 지정할 수도 있으나 헤비해질 수 있으므로 고민/논의가 필요하다
• 다른 배리어블과 마찬가지로 스프레드시트에 작성, 정리 후 작업에 들어가야 한다
• 배리어블 적용시 고려사항이 많으므로 잘 정리해야 할 것 같다.

 

🎯 미션

• 미션 9: 피드백 컴포넌트 전체 만들어보고 점검하기
• 미션 10: 네비게이션 컴포넌트 만들어보기
• 미션 11: 네비게이션 컴포넌트 나머지 만들고 마지막 점검하기

미션 12는 시간관계상 진행하지 못했다.

• 슬롯 컴포넌트를 알게 된게 이번주 작업 중 제일 재밌었던 부분이다. 이 컴포넌트를 다른 컴포넌트에서는 어떻게 활용하는지 더 알아보고 싶다.
• 캐러셀 컴포넌트는 바탕 이미지에 따라 제작법이 많이 달라질 것 같아서 이 부분도 더 알고싶다.
•  
• 네비게이션 컴포넌트를 만드는게 가장 힘들었다. 만드는 과정이 힘들진 않았는데 고려해야 할 요소가 많아서 조금 질렸다.

🌼 회고

• 잘 한 점
  • 어떻게든 미션을 따라가려고 노력했다!
• 아쉬운 점
  • 시간관리를 잘 못해서 공부한 내용을 잘 정리하지 못했다. 그래도 발자국을 작성하면서 정리된 부분들이 많다.
• 보완할 점
  • 필기를 열심히 하기..
• 다음주 계획
  • 미션 잘 따라가기