써니씨!
어제 작업한 데이트피커 모달 뒤에 딤처리 해주시고요.
모바일 화면에서는 브레드크럼은 숨겨도 좋을 것 같아요.
저같은 경우는 4-5년차 때 까지도 '브레드크럼'이라는 단어를 몰라서 얼버부리며 설명하고 했던적이 있습니다.
여러분은 혹시 브레드크럼이 무엇을 뜻하는지 알고 계시나요?
작업을할때에는 그 업계의 용어들을 인지하고 있는것이 소통면에서 굉장히 중요합니다.
예를들어서, 위와같이 얘기했을때에 알아듣지 못하고 있다면 소통은 물론이거니와, 제대로된 작업도 진행할 수없겠죠?
회사는 하나하나 알려주고 수업을 해주는 학교가 아니더라구요...
그렇기 때문에, 아래와 같은 용어들을 미리 파악하고 가는것이 굉장히 중요합니다.
1. 컴포넌 트와 에셋 (Component / Asset)
- 컴포넌트 : 버튼, 텍스트 필드, 메뉴 바 등과 같이 여러 페이지에서 반복적으로 사용될만한 디자인을 요소화 시켜놓은 것을 말합니다.
- 에셋 : 컴포넌트나 아이콘, 컬러, 폰트, 이미지 등 디자인을 구성하는 모든 요소들을 에셋이라고 합니다.
컴포넌트와 에셋을 통해서 디자인 시스템이 만들어지구요,
이를 통해 업무 효율성도 높아지고, 일관성 있는 디자인도 가능하게 되는 것 입니다.
2. 그리드/그리드 시스템 (Grid)
디자인 정렬의 기준이 되는 가이드라인입니다.
3. 헤더 (Header)
앱 또는 웹사이트의 상단에 위치하는 중요한 부분이며,
주로 로고, 메뉴, 검색창, 로그인/로그아웃 버튼, 쇼핑카트 아이콘 등으로 이루어집니다.
4. 푸터 (Footer)
앱 또는 웹사이트의 하단에 위치하는 부분으로,
주로 회사 정보, 고객센터 정보, 패밀리사이트 또는 sns 링크등으로 이루어집니다.
5. 네비게이션 (Navigation)
헤더와 비슷한 역할을 하지만 조금은 다릅니다.
헤더는 로고 및 검색 등 다양한 역할을 수행하지만,
네비게이션은 사용자가 다른 페이지나 섹션으로 이동할 수 있도록 돕는 메뉴 요소라고 보시면됩니다.
헤더 안에 네비게이션을 포함하여 디자인을 진행하기도 합니다.
6. GNB / LNB / SNB / FNB
네비게이션을 조금 더 세분화 한 것으로 보시면 됩니다.
- GNB (Global Navigation Bar) : 최상위 네이게이션이며, 주로 페이지 상단 헤더영역에 위치를 합니다.
- LNB (Local Navigation Bar) : 현재 서비스 영역(local)에 해당되는 메뉴이며, GNB에 마우스 오버시에 나타나거나 화면 좌측에 위치할 때도 있습니다.
- SNB (Side Navigation Bar) : LNB와 비슷한 메뉴로 구성되며, 화면의 왼쪽이나 오른쪽에 위치합니다.
- FNB (Footer Navigation Bar) : 화면 하단의 푸터영역에 위치하며, 사이트맵이나 개인정보 처리방침등의 메뉴로 구성이 됩니다.
7. 탭바 (Tab bar)
앱의 하단에 위치하는 네비게이션입니다.
탭바를 기획하거나 디자인할때에는 4-5개의 메뉴로 구성하는것이 좋으며,
사용자가 자주 사용할것으로 예상되는 핵심 기능으로만 구성을 하는것도 중요합니다.
8. 탭메뉴(Tab Menu)
간단하게 '탭'이라고도 합니다.
한 페이지에 다양한 콘텐츠에 쉽게 접근하고 직관적으로 볼 수 있도록 섹션을 나누어서 메뉴화시켜놓은것입니다.
모바일 뿐만 아니라 웹에서도 많이 사용되는 방식이구요, 위에 있는 탭바또한 이 탭기능을 가지고 있는 요소입니다.
9. 체크박스 (Checkbox) / 라디오 버튼 ( Radio Button)
- 체크박스 : 사용자가 하나 이상의 옵션을 선택(다중 선택)할 수 있도록 하는 요소입니다.
- 라디오 버튼 : 사용자가 한개의 옵션만 선택 할 수 있도록 하는 요소입니다.
체크박스는 하나 이상의 옵션을 선택하거나 아예 선택을 안할수도 있다는 유연성이 있지만,
라디오버튼은 사용자가 반드시 하나의 옵션을 선택해야한다는 특징이 있습니다.
따라서 체크박스는 사용자의 동의 여부를 확인하는 양식이나 다양한 관심사를 선택하는 상황에 적합하며,
라디오버튼은 성별 선택, 설문조사 응답, 결제 방식 선택 등과 같이 단일 선택이 요구되는 상황에 적합합니다.
10.토글 버튼 (Toggle Button)
'스위치'라고도 표현합니다.
2가지 중 1가지를 선택할 때 사용하며, 보통은 On/Off 의 기능으로 사용합니다.
11. 드롭다운/셀렉트박스 (Dropdown List / Selectbox)
드롭다운과 셀렉트박스는 거의 혼용되어서 사용하는 용어이긴합니다.
이 두가지는 여러 옵션 중 하나를 선택할 수 있도록 유도하는 요소로, 한 번에 한 항목만 선택할 수 있다는 공통점이 있습니다.
그러나, 좀 디테일하게 살펴보면 구현방식이나 사용하는 기능에 따라서 차이가 있는데요,
드롭다운은 기능 및 디자인을 다양하게 사용할 수 있다면, 셀렉트박스는 제한이 있습니다.
예를들어, 드롭다운메뉴의 경우 옵션을 선택하는 것 뿐만 아니라 토글버튼을 넣거나 각 버튼에 기능들을 부여하는 등 기능적으로 다양하게 사용이 가능하며, 이미지적으로도 더 다양하게 디자인하여 사용할 수 있습니다.
그러나 셀렉트박스는 옵션 선택의 기능만 존재하며, 이미지적으로 커스텀을 진행할수도있지만 제약이 많아서 디자인에도 어느정도 제한이 있습니다.
그렇기 때문에, 좀 더 명확한 기능 전달을 위해서는 초기 기획시에 이 두가지 용어를 제대로 구분해서 기획을 해두는것이 좋습니다.
(그렇지 않으면, 최종 산출물이 나왔을때에 원하던 방향으로 작업이 안이루어져서 기획자의 탓이 될 수 있습니다 ㅜㅠ)
12. 아코디언 (Accordion)
드롭다운이랑 비슷하지만 굉장히 다른 요소입니다.
드롭다운은 클릭했을때에 팝업처럼 오버레이되어서 뜨는 요소라면, 아코디언은 클릭했을때에 아래에 있던 요소들을 밀어내면서 뜨는 요소입니다.
아코디언의 경우, 사이드메뉴나 FAQ등의 디자인에 많이 사용이됩니다.
13. 타임피커/데이트피커 (Time/Date Picker)
날짜 혹은 시간을 선택할 수 있는 인터페이스 요소입니다.
주로 데이트피커는 달력 모양으로 디자인을 하며, 타임피커의 경우 스크롤 가능한 형태로 디자인을 합니다.
14. 브레드크럼 (Breadcrumb)
웹사이트나 애플리케이션 내에서 현재 위치를 파악하고 이전 단계로 쉽게 돌아갈 수 있도록 도와주는 UI 요소입니다.
이 용어는 '헨젤과 그레텔'이라는 동화에서 유래했으며, 이야기 속에서 두 주인공이 숲 속에서 길을 잃지 않기 위해 빵 부스러기를 뿌려 놓는 장면에서 영감을 받았다고 합니다.
단순한 구조의 홈페이지에서는 브레드크럼을 생략하는 경우가 많습니다. 이는 디자인을 간결하게 유지하고 사용자의 주의를 분산시키지 않기 위함입니다. 반면, 쇼핑몰이나 구조가 복잡한 홈페이지에서는 브레드크럼을 사용하여 사용자가 자신의 위치를 정확하게 파악하고 원하는 정보에 더 쉽게 접근할 수 있도록 하는 것이 바람직합니다.
15. 페이징 (Pagination)
사용자가 데이터나 콘텐츠의 긴 목록을 여러 페이지로 나누어 볼 수 있도록 하는 UI 요소입니다.
페이징을 사용하는 이유는 여러가지가 있는데,
첫 번째는, 데이터를 나누어서 가져오게 되면 많은 양의 데이터를 가져올때보다 로딩시간을 단축 할 수 있습니다. (서버의 과부하를 줄이는데도 도움이 되겠죠?)
두 번째는, 사용자의 편의성 입니다. 페이징을 통해 일단 콘텐츠의 양을 가늠할 수 있으며, 정보관리하기도 더 용이하고, 많은 양의 페이지를 건너뛸 때에도 용이합니다.
16. 슬라이더 or 레인지 슬라이더 (Slider/Range)
사용자가 원하는 값을 선택하거나 조정할 수 있게 하는 요소입니다.
슬라이더는 보통 수평이나 수직 막대 형태로 디자인되며, 이 막대 위를 움직이는 핸들(handle) 또는 노브(knob)를 드래그하여 값을 조절합니다.
이 슬라이더는 사용자가 특정 범위 내에서 값을 선택하거나 조정해야 할 때 유용하며, 정확한 값을 입력해야하는 경우보다는 대략적인 값으로 입력해도 되는 경우에 사용을 합니다.
예를들어서, 지도의 확대 축소 / 볼륨 조절 / 금액 범위 등의 값을 지정할 때 많이 사용합니다.
17.캐러셀 (Carousels )
캐러셀은 여러 콘텐츠(이미지, 텍스트, 비디오 등)를 순환하는 슬라이드쇼 형태의 UI 요소입니다.
18.스와이프 (Swipe)
스와이프는 사용자가 손가락이을 화면 위에서 빠르게 움직이는 제스처입니다.
주로 모바일 디바이스 또는 터치스크린에서 화면 넘기기, 메뉴 열기, 항목 삭제 등 다양한 상호작용을 위해 사용됩니다.
19. 프로그레스바 (Progress Bar)
진행 상태를 시각적으로 표현하는 요소입니다.
수평형태나 원형 또는 스텝형태로도 디자인 되며, 필요에 따라 다양한 형태로 디자인이 됩니다.
파일 다운로드/ 데이터 로딩/ 여러 절차가 있는 화면(회원가입)등에서 많이 사용이 되며,
이를 통해서 사용자가 현재 진행상태도 쉽게 파악하며 막연한 기다림에 대한 불안도 줄여줄 수 있어서 긍정적인 사용자 경험을 제공할 수 있습니다.
20. 툴팁 (Tooltip)
특정 요소 위에 마우스 커서를 올리거나 요소를 클릭 혹은 탭했을 때 나타나는 작은 정보 박스입니다.
툴팁은 특정 요소의 기능이나 사용법에 대한 추가적인 정보 제공이 필요할 때 쓰이며,
너무 많은 정보는 가독성이 떨어지기 때문에, 제공되는 정보들은 최대한 간결하고 명확하게 노출이 되어야합니다.
간혹 요소 옆에 물음표나 느낌표 같은 아이콘을 사용하여, 사용자를 툴팁으로 유도하기도 합니다.
21. 팝업(Popup) / 모달(Modal)
- 팝업은 일반적으로 이벤트 공지, 광고, 인쇄 출력 등과 같은 상황에서 사용됩니다. 이는 별도의 브라우저 창을 열어 특정 내용을 표시하는 방식입니다. 팝업은 사용자의 주 작업 흐름과 분리된 형태로 정보를 제공하거나, 사용자에게 추가 행동을 유도합니다.
- 모달은 사용자의 결정이나 행동을 요구하는 상황에 주로 사용됩니다. 예를 들어, 양식 제출 확인, 중요한 알림, 사용자 선택 요청 등이 이에 해당합니다. 모달은 일반적으로 사용자가 모달 외부와 상호작용할 수 없도록 메인 화면을 어둡게 하여 집중을 요구합니다.
요즘은 팝업의 사용이 줄어들고 있는 추세입니다. 이는 팝업이 사용자 경험을 방해하고, 때때로 광고나 스팸으로 여겨질 수 있기 때문입니다. 대신, 더 많은 디자이너들이 사용자 경험을 방해하지 않으면서 필요한 정보를 제공할 수 있는 모달을 선호합니다.
모달은 기업에 따라 사용하는 명칭이 달라지기도 하는데, '다이어로그','알트'라고 표현하기도 합니다.
'다이어로그'는 사실 다른 개념이 있기는 한데, 모달과 거의 동일한 기능이라 별도로 구분할 필요는 없을 것 같습니다.
22.딤 (Dimmed)
화면의 특정 부분을 어둡게 하거나 불투명도를 낮추어 다른 요소에 비해 덜 주목되게 하는 디자인 기법입니다.
모달창을 띄울때, 콘텐츠 집중도를 위해 많이 사용합니다. 실무에서는 보통 '딤 처리해주세요'라고 말합니다.
23. 토스트팝업 (Toast Popup) / 스낵바 (Snackbar)
잠깐 동안 사용자에게 간단한 메시지나 정보를 전달하는 데 사용되는 요소이며,
화면 하단이나 상단에 일시적으로 나타났다가 사라지는 팝업입니다.
토스트팝업과 스낵바를 혼용하여 부르기도 하지만, 디테일하게보면 토스트팝업은 단순히 피드백만 주며, 스낵바의 경우 별도의 지정된 액션이 가능하다는 점이 다릅니다.
노출 시간은 내용마다 다르지만, 사용자가 토스트 팝업의 내용을 다 읽을 수 있을 정도로는 노출이 되어야합니다.
토스트팝업은 사용자의 작업을 방해하지 않아야하는 요소이기 때문에, 화면의 가장자리 쪽에 위치시키는 것이 좋습니다.
24. 바텀시트(Bottom Sheet)
화면의 하단에서 올라오는 모달이라고 생각하시면 되며, 주 로 모바일환경에 사용 됩니다.
바텀시트는, 드래그나 터치를 통해서 확장하거나 축소할 수 있습니다.
(핸들러, 핸들바 설명하기 영상에서)
25. 다양한 메뉴를 나타내는 아이콘들
https://chaeyeon-chaeyeon.tistory.com/67
UI 메뉴에는 다양한 유형이 있으며, 메뉴 를 나타내는 아이콘별로 이름들이 따로 붙여져있습니다.
- 그리드메뉴(벤토메뉴): 다양한 기능이나 설정에 대한 접근을 제공합니다. 부르는 명칭이 다양한데, 그리드메뉴/벤토메뉴/타일메뉴/모자이크메뉴 등 다양하게 불립니다.
- 햄버거메뉴: 모바일 환경에서 전체 네비게이션 메뉴를 숨기는 데 사용됩니다.
- 도너메뉴(되뇌르메뉴): 특정 기능이나 추가 옵션을 사용자에게 제공합니다. 주로 아래로 갈수록 선이 짧아지는 형태로 활용됩니다. 필터형태에 많이 사용되며, 많이 사용되지는 않는 아이콘입니다.
- 케밥메뉴: 추가 옵션 또는 숨겨진 설정에 대한 접근을 제공합니다.
- 미트볼메뉴: 케밥메뉴와 유사한 기능입니다. 추가 옵션 또는 숨겨진 설정에 대한 접근을 제공합니다.
26. 엠프티 화면 (Empty)
빈 화면. 즉, 아무런 내용이나 이미지가 없는 화면입니다.
엠프티 화면을 구성할때에는, '데이터가 없습니다'라고 단순하게 표현하는 것은 사용자에게 부정적인 경험을 안겨주게 되므로
아래와 같이 현재 상태에 대해 명확하게 설명하고 나아가 추가적인 행동을 유도할 수 있는 버튼을 넣어주는것이 좋습니다.
27. 코치마크 (Coach Marks)
코치마크는 사용자에게 애플리케이션의 특정 기능이나 UI 요소의 사용 방법을 미리 안내하는 화면입니다.
주로 모바일 환경에서 활용되며, 사용자가 해당 화면을 처음 방문했을 때 표시되는 것이 일반적입니다.
이 코치마크는 과도한 정보나 불필요한 안내는 사용자 경험을 저하시킬 수 있기 때문에,
간결하고 쉬워야하며, 기능이나 인터페이스를 사용자가 꼭 알아야하는 화면에 대해서만 이 코치마크를 사용하는 것이 좋습니다.
28. 시스템 컬러 (System Color)
시스템 컬러는 주로 시스템 기능과 관련된 상황에 사용되는 색상들로, 브랜드 컬러와는 직접적인 연관이 없습니다.
물론, 브랜드의 시각적 일관성을 위해 시스템 컬러와 브랜드 컬러의 조화를 고려하는 것이 좋습니다.
시스템 컬러는 일반적으로 네 가지 주요 상황에 대해 아래와 같은 색상 계열을 지정합니다.
이러한 시스템 컬러를 적절히 사용하면, 사용자가 서비스를 이용하는 동안 발생하는 오류, 경고, 정보 및 성공 메시지를 쉽고 빠르게 인식할 수 있어, 사용자 경험을 개선하는 데 큰 도움이 됩니다.
- 오류 (error) : 레드 계열
- 경고 (warning) : 오렌지,옐로우 계열
- 성공 (success) : 그린 계열
- 정보 (information) : 블루 계열
29. 브레이크 포인트 (Breakpoint)
반응형 웹 디자인에서 사용되는 개념으로,
웹페이지 또는 애플리케이션의 레이아웃이 화면 크기나 기기의 종류에 따라 변하는 지점을 나타냅니다.
보통은 웹,태블릿,모바일로 총 3개의 브레이크 포인트를 설정하며, 디자인 상황에 따라서 브레이크 포인트 범위를 더 좁고 다양하게 설정할 수도 있습니다. (아래의 브레이크포인트는 예시 사이즈일뿐, 정해진 규격은 없습니다.)
30. 로더(Loader) / 스피너(Spinner)
로더와 스피너는 사용자 인터페이스 디자인에서 데이터 로딩이나 처리 과정을 시각적으로 나타내는 데 사용되는 요소입니다. 스피너는 로더의 한 종류이며, 회전하는 형태의 아이콘입니다. 이들은 사용자에게 시스템이 아직 작동 중임을 알리고, 작업 완료를 기다리는 동안의 기다림을 시각적으로 표현합니다.
31. 테이블 (Table)
데이터를 구조화해서 표현할 때 사용하는 요소입니다.
행(Row)과 열(Column)으로 구성이 되며, 주로 게시판이나 주문 내역등의 데이터를 목록화 할때에 사용합니다.
32. 카드 디자인 (Card Design)
카드 디자인은 콘텐츠를 사각형 형태로 구분하여 구성하는 인기 있는 디자인 방식입니다. 이 디자인의 초기 기원은 분명하지 않지만, 페이스북과 인스타그램과 같은 소셜 미디어 플랫폼에서 이를 채택하면서 대중화되었습니다. 카드 디자인은 정보 접근성과 가독성을 향상시키는 주요 장점으로 인해 현재도 광범위하게 사용되고 있는 디자인 방식입니다.
33. 텍스트 필드/텍스트 박스 (Text Field )
사용자가 텍스트를 입력하는 영역입니다.
사용자가 문자, 숫자, 또는 기타 특수 문자를 입력할 수 있게 해주며, 다양한 유형의 데이터 입력에 사용됩니다.
짧은 내용을 입력할 때 사용하며, 한 줄로만 작성이 가능합니다.
한 줄 이상의 많은 텍스트를 사용 할 경우에는 텍스트에어리어(Textarea)를 사용합니다.
사실, 실무에서는 이 텍스트박스랑 텍스트에어리어를 혼용해서 말하기도 합니다.
텍스트박스는 인풋박스라고 말하기도 하는데, 이 인풋박스는 사실 넓게보면 검색필드, 셀렉트박스, 체크박스 등이 다 속하는 언어이기때문에 명확한 소통을 위해 '텍스트박스' 혹은 '텍스트필드'라고 표현하는것이 옳습니다.
34. 검색필드(Search Field)
검색 바, 검색 폼, 검색 창, 검색 박스 등 다양하게 불리는데, 그냥 '검색'이나 '서치'라는 단어가 들어가면 이 검색필드라고 생각하시면 됩니다. 이 검색필드는 사용자가 키워드나 내용을 입력해서 원하는 정보를 검색할 수 있도록 도와주는 입력필드입니다.
검색필드는 사용자들이 효율적으로 서비스를 이용할 수 있도록 도와주는 중요 요소이기 때문에,
사용자가 쉽게 찾을 수 있는 곳에 배치가 되어야합니다.
35. 플레이스홀더 (Placeholder)
입력 필드(예: 텍스트박스 또는 텍스트에어리어) 내에 표시되는 가이드 텍스트입니다.
이 텍스트는 사용자가 해당 필드에 어떤 종류의 정보를 입력해야 하는지를 알려주는 역할을 하며, 사용자가 입력을 시작하면 사라집니다.
어떤 경우에는 입력필드에 표시되는 라벨 텍스트를 플레이스 홀더로 대신해서 사용하여 공간 더 효율적으로 사용하기도 합니다.
36. 플로팅 버튼(FAB)
화면의 일정한 위치에 다른 요소 위에 떠 있는 것처럼 고정해놓는 버튼입니다.
사용자의 작업 흐름을 방해하지 못하도록 화면의 사이드에 배치를 하는데, 일반적으로 화면 하단부에 위치를 고정해놓습니다.
37. CTA (Call To Action)
행동 유도 버튼이라고 생각하시면 됩니다.
사용자가 구체적인 행동을 취하도록 만들어주는 메시지나 버튼입니다.
목적이나 상황에따라서 사용되는 형태나 종류가 많이 달라지는데, 보통 우리가 아는 화에서는
회원가입, 구매, 다운로드, 구독하기, 프로모션페이지 이동 등이 이 CTA에 속합니다.
흔히 아는 버튼형태로만 제작되는것은 아니고, 배너디자인형태로도 제작이 진행됩니다.
이 CTA버튼은 디자인도 물론 중요하지만, 텍스트 선택이 가장 중요하다 생각합니다.
예를들어, 가입하기 보다는 "30일 무료 체험하기"등의 문구로 CTA버튼을 구성한다면, 클릭율이 더 높아지겠죠?
CTA는 서비스의 중요한 요소 중 하나로, 다양한 A/B 테스트를 통해 최적의 위치와 디자인을 선택하여 노출시키는 것이 좋은 전략입니다.
38. 스플래쉬 (Splash)
스플래쉬 스크린이라고도 하며, 앱 또는 웹사이트가 시작될 때 잠깐 나타나는 초기 로딩 화면을 말합니다.
이 화면은 주로 로고나 브랜드 이름을 중심으로 디자인되며, 단순한 멈춰있는 이미지보다는 그래픽적인 요소가 포함된 동적인 이미지로 제작하는 것이 사용자에게 더 흥미로운 경험을 제공합니다.
스플래쉬 화면에서 시간을 너무 길게 끄는것은 사용자의 인내심을 시험할 수 있으므로, 일반적으로 3초 이내로 제한하는 것이 바람직합니다.
39. 디폴트 (Default)
기본 값입니다. 아무 것도 하지 않은 상태의 기본값 또는 초기값을 일컫습니다.
이 디폴트값은, 아무렇게나 지정하는것이 아니라 사용자가 자주 사용할 옵션으로 설정을 해두어서, 사용자가 수동으로 선택할 필요를 줄이도록 보다 간편하게 만들어두어야합니다.
40.스켈레톤(Skeleton)
로딩 시간 동안 사용자에게 표시되는 임시 레이아웃입니다.
그저 로딩 스피너로 화면을 대체하는게 아니라, 나타날 콘텐츠에 대한 레이아웃으로 로딩시간을 대체하여 사용자에게 시각적 힌트를 제공하는 것 입니다.
스켈레톤 화면은, 일반적인 로딩바나 로딩 스피너보다 로딩시간이 더 빠르게 느껴지게하는 장점이 있어서
사용자로 하여금 페이지가 완전히 로드되기를 기다리는 동안의 불편함을 줄일 수 있습니다.
(그러나 요즘은 대부분의 서비스들이 로딩시간이 길지 않아, 이 기능을 많이 사용하지 않는 추세입니다.)
41.온보딩(Onboarding)
이며,
그렇기때문에 처음 서비스를 이용하고자 할때 노출됩니다.
온보딩은 간결하고 명확해야하며, 서비스의 첫 인상이기때문에 사용자의 긍정적인 경험을 위해 이미지적으로 즐겁게 만드는것도 중요합니다.
42. 뱃지 (badge)
미확인 알림 수, 새로운 메시지의 수, 상태 표시 등과 같은 간단한 정보를 시각적으로 강조하여 사용자에게 전달하는 요소입니다.
보통 아이콘의 모서리 우측 상단에 위치시키며, 빨간 점으로 간단하게 상태를 표시를 할수도있고, 숫자를 넣어 개수를 노출시킬수도 있습니다.
'UIUX 디자인' 카테고리의 다른 글
| [UXUI디자인] 9년차가 알려주는 진짜 실무 용어 1탄 - UX편ㅣ출근 겁내지 마세요 (0) | 2024.01.14 |
|---|---|
| [UXUI디자인/피그마] empty화면 디자인-무료 소스 제공 (0) | 2023.12.26 |
| [실무 피그마 1강] 피그마 인터페이스 보기 - 현직자는 어떤 툴과 단축키를 사용할까? (0) | 2023.02.20 |
| [실무 피그마 Intro] 포토샵, XD, 스케치보다 피그마인 이유 (0) | 2023.02.20 |
