모달
합성 컴포넌트 = 컨테이너 컴포넌트
컴포넌트는 파운데이션 요소로 만든다
컴포넌트를 모아서 만들었는데 다시 컴포넌트가 되는 것을 합성 컴포넌트라고 함 (ex 다이얼로그, 리스트, 카드)
모달
팝업 - 팝하고 튀어나온다는 뜻
기존 화면 위에 새로운 화면
광고나 로그인을 유도
윈도우 팝업 - 새로운 브라우저 창을 띄워주는 방식
윈도우 팝업을 사용하지 않는 추세
광고, 악성코드등 방지를 위해 팝업을 차단함
모바일 웹이 등장하면서 불편해짐
레이어 팝업 - 현재 화면 위에 코드로 만든 컴포넌트
모달 - 사용자가 행동을 하기 전까지 뒤에 가려진 화면을 조작할 수 없는 것을 뜻함
투명도를 준 검은색 레이어는 사용자에게 사용할 수 없는 것을 알려주고 로그인 화면에만 집중시켜준다.
모달이라는 것은 UI이름이 아니라 UI를 분류하는 기준 중 하나다.
이 화면은 모달이다. X 이 화면은 모달 속성을 가지고 있다.O
모달의 종류
팝업, 토스트, 바텀시트, 다이얼로그, 사이드바 등
라이트박스UX = 스크림(Scrim; 천 또는 장막), 딤드(Dimmed; 흐려진), 딤레이어(Dim Layer), 오버레이(Overlay)등
뒤에 가려진 화면을 사용할 수 없다고 넣는 반투명 레이어를 라이트박스라고 한다.
사용자에게 모달과 배경을 확실하게 분리해줄 때 사용
라이트박스를 터치하면 모달이 뜨기 전 화면으로 돌아가는 방법이 일반적
뒤로 돌아가면 안되는 경우(뒤로가기하면 작성내용이 삭제되는 경우)라이트박스를 터치해도 꺼지지 않게 해야함
모달 사용시 주의사항
사용자가 원래 사용하던 화면을 잠가버리고 사용자가 뭔가를 행동하기 전까지 풀어주지 않으면 사용자에게 선택을 강요해 사용자의 자연스러운 흐름을 방해하는 셈이다. 이런경우 사용자가 불편할 가능성이 높아지고 이탈할 가능성이 높아진다.
사용자를 방해하면서라도 반드시 확인해야하는 부분이나 중요한 선택이 필요한 시점에 사용하는 것이 모달이다.
다이얼로그 컴포넌트
컨테이너 컴포넌트
모달 속성을 가짐
사용자에게 중요한 선택을 받고 사용자가 선택한 행동을 확인
다이얼로그(dialog) = 대화(conversation)
다이얼로그는 사용자에게 어떤 선택을 할것인지 질문하고 사용자는 버튼을 선택해 답변을 한다. (사용자의 의사를 묻고 답을 얻음)
다이얼 로그의 구조
컨테이너
헤더 - 제목, 부제목, 텍스트 등 이미지나 아이콘, 닫기버튼이 포함된 경우도 있음
액션 - 한개 이상의 버튼 부분
A나 B를 선택하는 경우를 다이얼로그
사용자에게 경고 또는 확인등을 표시할 때는 얼럿
다이얼로그의 경우 라이트박스를 누르면 취소 또는 닫기를 누른것과 같음
얼럿의 경우 사용자가 반드시 알아야하는 서비스 상태(EX 점검중 등) 사용자가 닫기를 눌러 닫게 해야함
다이얼로그는 사용자를 방해하기에 반드시 사용해야하는 경우에만 사용해야함
사용자가 반드시 알아야할 정보가 아니면 토스트를 사용하는 경우가 있음
컨트롤 요소 이해하기
사용자가 원하는 선택지를 선택할 수 있게 하는 요소
컨트롤 컴포넌트 종류
체크박스, 라디오버튼, 토글, 슬라이더
컨트롤 요소는 크기가 작은편이라 터치영역을 늘려줘야한다.
컨트롤 요소의 라벨
컨트롤 요소는 라벨과 같이 쓰임
라벨을 누르면 컨트롤 요소가 작동하게 하는 것이 일반적
컨트롤 요소를 배치할때 간격을 충분히 줘야함
컨트롤요소와 라벨의 행간과 크기를 같게해야 정렬이 쉬워진다.
체크박스 컴포넌트
여러 선택지 중 한개 이상을 선택할 때 사용
일반적으로 사용하는 의사상태
체크됨, 체크되지 않음
여러개를 선택할 수 있음
아무것도 선택하지 않은 상태가 가능
(실무나 최근에는 잘 사용하지 않음)하위항목이 있을 경우 일부만 선택할 수 있음
라디오 컴포넌트
여러 선택지 중 한개만 선택할 때 사용
일반적으로 사용하는 의사상태
선택됨 선택되지 않음
여러개를 동시에 선택할 수 없음
아무것도 선택하지 않은 상태가 불가능
컴포넌트 복습
컴포넌트 - 파운데이션을 조합해서 만듬, 컴포넌트끼리 조합해서 나오는 합성컴포넌트
버튼 컴포넌트 - 사용자의 행동을 실행하는 컴포넌트
텍스트필드 컴포넌트 - 사용자가 문자를 입력할 수 있는 컴포넌트, 유효성 검증
다이얼로그 컴포넌트 - 제품 흐름에서 중요한 선택을 하게 해주는 컴포넌트, 모달속성, 라이트박스와 함께 사용하는 것이 일반적
체크박스와 라디오 컴포넌트
