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

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

꾸이 6개월 전

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

 

📖 강의 요약

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의 슬롯, 아이콘 등을 조정하여 만들어둔 컴포넌트셋

 

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는 시간관계상 진행하지 못했다.

  • 슬롯 컴포넌트를 알게 된게 이번주 작업 중 제일 재밌었던 부분이다. 이 컴포넌트를 다른 컴포넌트에서는 어떻게 활용하는지 더 알아보고 싶다.

  • 캐러셀 컴포넌트는 바탕 이미지에 따라 제작법이 많이 달라질 것 같아서 이 부분도 더 알고싶다.

     

  • 네비게이션 컴포넌트를 만드는게 가장 힘들었다. 만드는 과정이 힘들진 않았는데 고려해야 할 요소가 많아서 조금 질렸다.

🌼 회고

  • 잘 한 점

    • 어떻게든 미션을 따라가려고 노력했다!

  • 아쉬운 점

    • 시간관리를 잘 못해서 공부한 내용을 잘 정리하지 못했다. 그래도 발자국을 작성하면서 정리된 부분들이 많다.

  • 보완할 점

    • 필기를 열심히 하기..

  • 다음주 계획

    • 미션 잘 따라가기

댓글을 작성해보세요.

채널톡 아이콘