WIL) 뚝딱뚝딱 UI 만들기🔧 모달 이해하고 다이얼로그 만들기
지난주에 만든 버튼과 텍스트필드 옆에 체크박스와 라디오 컴포넌트를 추가했다!
이번주는 모달에 대한 개념을 이해하고 다양한 컴포넌트 실습을 했다.
모달 알아보기! 전에 팝업 먼저 짚고 가자면 👉 팝업이란? 화면 위에 새로운 화면을 띄우는 것이다.
💡일반적으로 부르는 팝업과 실제 UI 관점의 팝업에는 차이가 있다.
• 윈도우 팝업: 새로운 윈도우(브라우저 창)을 띄워주는 방식
• 레이어 팝업: 코드로 만든 컴포넌트를 보여주는 방식 (레이어를 하나 더 띄우는 개념)
모달은 사용자가 행동을 취하기 전까지 딤처리된 화면을 조작할 수 없다.
모달은 UI를 분류하는 기준 중 하나로, 일반적으로 레이어 팝업을 가르킨다.
알림 설정 뒤로 어둡게 처리된 부분을 조작할 수 없다면, 모달이다.
* 현업에서 레이어 팝업과 모달을 같은 뜻으로 혼용하는 경우가 있다.
용어를 섞어 사용하더라도 차이를 정확히 알아야 가이드라인을 만들 수 있다.
❖ 다이얼로그 컴포넌트 만들기!
다이얼로그는 사용자의 의사를 묻고 답을 얻을 때 사용하는 기능으로, 선택과 선택에 대한 확인을 한다.
컨테이너 컴포넌트이면서 동시에 모달 속성을 지닌다.
🗃️ 다이얼로그의 구조
- 컨테이너: 다이얼로그 내 요소들을 감싸는 프레임
- 헤더: 다이얼로그의 제목, 부가설명 등이 들어간 제목
*썸네일이나 아이콘, 닫기 버튼 등이 들어갈 수 있음. - 액션: 다이얼로그의 버튼 영역
*기능에 따라 버튼의 개수 조절 가능
🗃️ 다이얼로그 설계시 유의점
- 선택지 유형에 따라 조작법이 달라진다.
1) 사용자가 A or B 선택해야하는 상황 👉 다이얼로그로 지칭
2) 사용자에게 경고 or 확인 등을 표시해야하는 상황 👉 얼럿으로 지칭 - 사용자가 반드시 확인해야 하는 정보가 아니라면 다이얼로그와 얼럿을 지양하자.
다이얼로그는 사용자를 방해하는 요소이므로,
매우 중요한 시점에 쓰거나 반드시 받아야 하는 정보에만 사용해야 한다.
텍스트 필드 활용해 로그인 페이지를 만들고,모달까지 제작해보기!
가상의 OTT 서비스 홈 화면과 컨텐츠 상세 정보 화면 와이어프레임을 잡아봤다!
이번주는 UI의 기능과 목적을 스터디하고 페이지에 맞게 적용해보는 스터디를 통해 구체적인 실습을 했다.
다음주도 열심히 달려보자!🏃♂️🏃♂️