[인프런 워밍업 스터디 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는 시간관계상 진행하지 못했다.
슬롯 컴포넌트를 알게 된게 이번주 작업 중 제일 재밌었던 부분이다. 이 컴포넌트를 다른 컴포넌트에서는 어떻게 활용하는지 더 알아보고 싶다.
캐러셀 컴포넌트는 바탕 이미지에 따라 제작법이 많이 달라질 것 같아서 이 부분도 더 알고싶다.
네비게이션 컴포넌트를 만드는게 가장 힘들었다. 만드는 과정이 힘들진 않았는데 고려해야 할 요소가 많아서 조금 질렸다.
🌼 회고
잘 한 점
어떻게든 미션을 따라가려고 노력했다!
아쉬운 점
시간관리를 잘 못해서 공부한 내용을 잘 정리하지 못했다. 그래도 발자국을 작성하면서 정리된 부분들이 많다.
보완할 점
필기를 열심히 하기..
다음주 계획
미션 잘 따라가기
답변 0