📌
1. 카드 (Card)
2. 다이얼로그(Dialog)
🔗참고 :
https://m3.material.io/components/cards/overview
https://m3.material.io/components/dialogs/overview
카드 (Card)
한가지 주제에 관하여 컨텐츠와 행동을 보여준다.
📐주의
관련된 정보를 스캔하는 것이 쉬워야하며 텍스트와 이미지같은 요소들은 위계 질서를 명확하게 보여주는 방식에 따라 위치되어야한다.
카드들은 격자 혹은 수직 리스트, 캐러셀에 함께 보여질 수 있다.
종류별 특징
그림자를 적용한 Elevated 카드는 Filled 카드보다 배경으로부터 더 분리된 느낌을 주지만 아웃라인 카드보다는 덜하다.
Filled 카드는 배경과 덜 분리되어 보여 elevated 카드와 아웃라인 카드보다 덜 강조된다.
아웃라인 카드는 컨테이너 주위로 시각적으로 분리된 느낌을 주고 다른 타입들의 카드보다 더 강조된다.
구성
- 컨테이너
모든 카드 요소들을 포함한다.
요소들이 차지하는 공간에 따라 사이즈가 결정되고 카드의 올라감은 컨테이너에 의해 표현된다.
필수 요소이며 다른 요소들은 선택적이다.
- 컨텐츠 블록
카드 컨텐츠는 블록으로 구성된다. 중요도에 따라 컨텐츠는 다른 단계의 시각적 강조를 가질 수 있다.
- 분리선 (Dividers)
카드 내에서 공간을 나눌 때 혹은 카드가 확장될 수 있는 영역을 표시하는데 사용된다.
- 미디어
썸네일 : 아바타 혹은 로고와 같은 썸네일을 포함할 수 있다.
이미지 : 사진, 아이콘 등 여러 종류의 그래픽 요소들을 포함한다.
비디오 : 비디오를 포함할 수 있다.
- 텍스트
헤드라인 : 카드의 주제를 알려주기도 한다. ex. 기사 제목, 사진 제목 등
부제목 : 더 작은 텍스트 요소 ex. 기사 부제목, 태그된 위치 등
지지 텍스트 : 본문 ex. 기사 요약, 식당 설명 등
작업
- 중요 작업 영역
확장된 세부 화면을 표시하기 위한 하나의 터치 영역을 가질 수 있다.
-
버튼 : ‘더보기’, ‘장바구니 추가’와 같은 작업을 위한 버튼
-
아이콘 버튼 : ‘저장’, ‘좋아요’ 와 같은 아이콘 버튼
-
선택 컨트롤 : 슬라이더, 체크박스 같은 선택 컨트롤 컴포넌트 포함
-
링크된 텍스트 : 카드의 지지 텍스트 (Supporting text)에 링크를 포함
- 오버플로우 메뉴
관련된 작업들을 포함
일반적으로 우측 상단 혹은 우측 하단에 위치 (세로 점 세개)
카드 컬렉션
다수의 카드들은 목록, 격자 목록, 캐러셀로 그룹이 지어진다.
그룹으로 묶여져서 보이기 위해서는 선택되거나 드래그 되지 않는 이상 같은 평면 상에 있어야한다.
- 분류 (Filter or Sorting)
다수의 카드들을 날짜 혹은 가나다 순서대로 분류될 수 있어야한다.
분류 선택지는 카드 그룹의 밖에 위치해야한다.
- 격자 (Grid)
일반적인 그리드는 mosaic 방식이나 staggered 방식으로 변경이 가능하다.
(격자 무늬의 카드들의 너비와 높이가 모두 같지 않아도 된다 ex. 핀터레스트)
- 세로 목록
- 캐러샐 (Carousel)
수평으로 늘어져 있어 스크롤로 이동할 수 있다.
반응형 레이아웃
서로 다른 화면 크기에 적응하기 위해 카드의 위치나 정렬은 바뀔 수 있다.
카드와 카드 요소들은 레이아웃의 크기에 맞춰 왼쪽, 오른쪽, 중앙 정렬이 가능하다.
인체 공학 (Ergonomics)
큰 사이즈의 화면에 대한 인체 공학적 필요를 충족시키기 위해 컴포넌트를 적용한다.
예를 들어, 작은 사이즈의 화면에서 수평 정렬된 카드는 더 큰 사이즈의 화면에서 더 커진 사이즈에 맞춰 이미지와 텍스트에 더 많은 여백을 주며 수직 정렬된다.
세로 기반 레이아웃 (Column-based layouts)
모바일 레이아웃에서 리스트나 카드와 같은 컴포넌트들은 사용자 경험과 시각적 완성도에 대한 절충 없이 화면 너비에 맞춰 늘어난다.
큰 사이즈를 위한 디자인을 할 때, 컨텐츠를 표현하기 위해 여러개의 세로 열을 사용하는 것이 좋다.
가능하다면 스크린을 넘어 UI 요소들을 늘어놓는 것을 피해야한다.
효과
- 확장
카드는 추가적인 내용을 보여주기 위해 컨테이너 크기를 확장시키는 효과를 사용할 수 있다.
부모 - 자식 트랜지션을 사용하여 꽉찬 화면을 채울 수 있다.
추가 내용을 보이기 위해 카드 내에서 스크롤하지 않는다.
- 내비게이션
화면 사이에서 앞으로 갔다 뒤로 가는 효과를 사용할 수 있다.
비교적 간단한 모션
제스쳐
- 쓸기 / 스와이프 (Swipe)
한 번에 한 개의 카드에서 수행될 수 있으며 카드 내부의 어디에서나 가능하다.
ex. 카드를 닫을 때, 카드의 상태를 변경할 때 (넘기거나 저장)
- 들고 움직이기 (Pick up and move)
사용자가 카드를 움직이고 순서를 바꿀 때 사용
들린 카드는 다른 카드들보다 앞에 와야한다.
- 스크롤링 (Scrolling)
카드의 최대 높이보다 긴 카드 컨텐트는 생략되고 스크롤이 안 되지만 카드의 높이를 확장시키면 (카드를 접었다가 핀다면) 화면에 보여질 수 있다.
카드는 화면의 최대 높이보다 길어질 수 있고 그럴경우 화면 내에서 스크롤 할 수 있다.
데스크탑에서는 카드 내부만큼 확장되고 스크롤 될 수 있게 한다.
키보드
포커스 표시는 카드를 탭했을 때 작업가능한 요소들 주변으로 나타나게 한다.
작업이 불가능한 카드가 있다면 탭이 곧바로 카드 내부의 작업가능한 버튼과 링크에 포커스 되게 한다.
스페이스와 엔터키를 눌렀을 때도 작업이 수행되거나 두번째 작업이 사용가능할 수 있게 한다.
메뉴 내부에서 사용자가 화살표 키를 눌러 메뉴 아이템들을 이동할 수 있도록 하며 스페이스와 엔터키로 아이템을 선택하고 탭을 눌러 나갈 수 있도록 한다.
탭 - 다음 작업가능한 요소로 이동
스페이스, 엔터 - 작업 수행
요소 라벨링
카드의 정보를 담은 컨텐츠들은 스크린 리더를 사용하여 방향을 잡을 때 말로 표현되어야한다. 모든 작업 가능한 요소들은 스크린 리더와 키보드 포커스를 받을 수 있도록 한다.
작업이 불가한 카드 요소라도 순서대로 방향을 잡고 포커스를 받을 수 있다. 또한 포커스 될 때 말로 표현 되어야한다.
헤딩 - 이미지 - 본문 - Primary 버튼 - Secondary 버튼
그 외 참고
작업을 포함하지 않는 카드 컨테이너일 경우 내부에 버튼과 링크를 포함하거나 버튼이나 링크 없이 직접적으로 작업을 가능하게 할 수 있다. 이 경우 행동가능한 요소들을 쌓아두는 것을 방지할 수 있다.
ex. 카드 안에 버튼 / 버튼이 없는 카드 컨테이너 자체를 누르면 이동
접근성 기준을 충족시키기 위해 드래그와 스와이프같은 인터렉션이 될지라도 메뉴에 같은 동작을 할 수 있는 작업을 추가한다.
카드에 커서가 호버됐을 때 상태를 변경하여 사용자가 상호작용할 수 있음을 알게한다. 작업이 불가능한 카드는 호버 상태를 포함하지 않는다.
다이얼로그 (Dialog)
중요한 정보나 결정을 물어볼 때 앱 컨텐츠 앞에 보여지는 모달 창이다.
사용자 흐름에서 중요하고 신속한 작업을 제공한다.
종류로는 화면을 모두 차지하는 전체화면 다이얼로그 (Full-screen dialog)와 비교적 크기가 작은 기본 다이얼로그가 있다.
📐주의
다이얼로그가 등장했을 때 모든 앱 기능을 멈출 수 있고 사용자가 요구되는 작업을 수행할 때까지 남아있는다.
다이얼로그는 의도적으로 방해를 하기때문에 조금만 사용해야하고 사용자의 작업을 방해하는 것 없이 선택지를 제공하는 경우에는 메뉴를 사용한다.
스낵바와 배너도 다이얼로그(중요도 - 상)와 비슷하지만 스낵바는 주로 화면의 하단에 위치하며 자동으로 사라진다.(중요도 - 하)
배너는 주로 화면의 상단에 위치하며 작업을 유도한다. (중요도 - 중)
구성
- 컨테이너와 막 (Container and scrim)
다이얼로그는 다른 화면 요소 위에 등장한다. 때문에 다이얼로그에 집중시키기 위해 다른 화면 요소들을 가리는 막이 뒤에 쳐져 다이얼로그의 중요도를 높여준다.
컨테이너에는 헤드라인, 텍스트, 버튼, 목록 등이 포함된다.
- 헤드라인 (선택)
다이얼로그의 목적은 헤드라인이, 버튼 혹은 작업이 가능한 요소에 의해 알려져야한다.
헤드라인을 사용할 경우 상태나 질문을 가능한 한 짧고 명료하게 나타내어야하고 사과, 추가적인 알람 혹은 모호한 말은 피해야한다.
- 버튼 (라벨 텍스트)
다이얼로그의 작업은 대게 버튼에 의해 표현되고 사용자에게 작업을 유도한다.
버튼은 더 쉽게 상호작용하기 위해 후반(하단) 부분에 위치한다.
다이얼로그의 작업을 취소하는 작업은 항상 사용 가능해야하고 다이얼로그의 작업이 완료되었을 때 확인 버튼이 활성화된다.
ex. 선택 완료 → 확인 버튼 활성화, 선택 x→ 확인 버튼 비활성화
다이얼로그는 최대 두 개의 작업을 포함한다. 하나일 경우 확인 버튼이어야하고 두개일 경우 확인, 무시 버튼
종류별 특징
- 기본 다이얼로그 (Basic dialog)
긴급한 정보, 상세 내용 혹은 작업으로 사용자 행동을 방해한다.
알림, 빠른 선택, 확인 등에 사용
종종 알림, 날짜 선택, 시간 선택, 목록 등 다양한 레이아웃과 컴포넌트 결합을 사용하기도 한다.
- 전체 화면 다이얼로그 (Full-screen dialog)
완료해야하는 일련의 작업들을 포함하며 화면 전체를 채우는 다이얼로그
ex. 이벤트 제목 → 날짜 → 장소 → 시간 선택
모든 작업이 완료되지 않았는데 닫힌다면 기본 다이얼로그를 확인용으로 보이게 할 수 있다.
모바일 기기와 같이 작은 사이즈의 화면에서만 사용
사용자의 선택들을 저장하고 확인하기 위한 버튼은 명료해야한다.
만약 작업의 변화가 없다면 그냥 닫혀도 되지만 변화가 있다면 꼭 사용자에게 변경된 작업을 무시할 것을 확인했는지 물어봐야한다.
반응형 레이아웃
기본 다이얼로그는 일반적으로 중앙에 위치하지만 중간 사이즈의 화면에서는 인체공학적인 경험을 고려하여 화면의 오른쪽에 위치할 수도 있다.
데스크탑 같은 큰 크기의 화면에서는 뒤에 막이 쳐지고 모달창이 떠야한다.
효과
다이얼로그는 사용자의 현재 작업을 멈추는 것에 대한 알림이나 확인 없이 등장한다. 따라서 많이 사용해서는 안 되며 화면에 등장하기 위해 등장, 퇴장 트랜지션을 사용한다.
위치
사용자가 무시하거나 작업을 수행하기 전까지 포커스를 유지한다.
전체 화면 다이얼로그일 경우를 제외하고 화면에 부분적으로 나타나는 다른 요소에 의해 방해되면 안 된다.
스크롤링
대부분의 다이얼로그 컨텐츠는 스크롤링을 피해야한다.
스크롤링이 필요한 경우일지라도, 다이얼로그의 타이틀 부분은 상단에, 버튼은 하단에 고정되어있어야한다.
스크롤이 넘어가도 선택된 내용은 남아있어야하고 다이얼로그의 바깥에서 스크롤이 되면 안 된다.
그 외 참고
키보드로 방향을 찾아갈 수 있어야한다.
(Tab 이동, Shift + Tab 되돌아가기)
다이얼로그의 접근성 라벨은 다이얼로그 제목과 헤드라인과 동일하다.
실습
- 카드
📍만드는 방법
- 카드의 영역을 나눠 영역 안에 포함되어있는 요소들을 생성하고 오토 레이아웃을 적용한다.
- 텍스트 내용을 편하게 변경하기 위해 텍스트 프로퍼티를 적용한다.
- 이미지를 편하게 변경하기 위해 인스턴스 스왑을 적용한다.
- 요소들을 한 번에 선택하여 컴포넌트로 만들어주고 네스티드 인스턴스를 적용한다.
- 다이얼로그
📍만드는 방법
- 카드를 만들 때와 같이 영역을 나눠 필요한 요소들을 생성하고 오토 레이아웃을 적용한다.
- 여백과 너비를 조정하고 텍스트 프로퍼티를 적용한다.
- 각각의 요소들을 한 번에 클릭하여 컴포넌트를 적용하고 네스티드 인스턴스를 적용한다.
