[UXUI 심화 3주차] UI 디자인 심화

🔎 오버레이와 모달

1️⃣  배리언츠와 프로퍼티 스택

▶ 스택_Stack : 버튼을 상하좌우로 2개 이상을 쌓아 사용하는 경우

• 2개씩 묶인 버튼 인스턴스를 하나의 합성 컴포넌트로 활용한다

▶ 독_Dock : 대부분의 경우 버튼은 화면의 하단에 고정된 독 형태로 사용

• 실무에서는 기기 하단의 인디케이터 요소까지 고려하여 만들어둔다

2️⃣ 포지션

※ 포지션은 개발에서 사용하는 개념으로 디자인 및 레이아웃 코드에서 사용
※ 스태틱, 픽스드, 앱솔루트, 스티키 4가지 속성을 사용가능하다

▶ 스태틱_Static

• 요소에 아무런 속성값을 주지 않은 그대로의 상태
• 피그마는 일반 프레임에 요소를 배치한 상태

▶ 픽스드_Fixed

• 화면 전체를 기준으로 요소를 그 위치에 고정
• 피그마의 프로토타입에서 나오는 개념

▶ 앱솔루트_Absolute

• 픽스드와 같지만 요소의 고정 위치는 요소의 상위 컨테이너를 기준
• 상위 컨테이너가 반드시 오토레이아웃이어야 한다
• 오토레이아웃 포지션 안에서 요소 위치를 고정할 때 사용한다

▶ 스티키_Sticky

• 스티키 포지션은 픽스드와 스태틱을 전환하며 적용하는 속성
• 프로토타입에서 적용가능

 

3️⃣ 오버레이와 모달

🔎 모달과 팝업
팝업: 화면 위에 새로운 화면은 띄우는 것
모달: 사용자가 행동을 취하기 전까지 뒤에 가려진 화면을 조작할 수 없는 것

▶ 윈도우 팝업

• 사용자의 흐름을 방해하여 불편하다
• 광고, 악성코드를 차단하기 위해 점점 사용하지 않는 추새

▶ 레이어 팝업

• 코드로 작성된 컴포넌트를 띄워주는 방식

▶ 오버레이와 라이트박스
오버레이: UI가 화면 위에 중첩될 때, 오버레이 속성을 가졌다고 한다
라이트박스: 모달UI를 사용할 때 뒤에 깔려지는 반투명한 층

▶ 오버레이와 모달, 라이트박스의 관계

 

4️⃣ 다이얼로그 컴포넌트

※ 컴포넌트의 종류 중 컨테이너에 해당
※ 오버레이-모달 속성
※ 사용자에게 중요한 선택을 받고, 사용자의 선택을 확인하는 컴포넌트
※ 헤더와 액션으로 나누어져 있다

▶ 헤더_Header

• 다이얼로그의 제목, 부제목이 들어간다
• 썸네일 이미지나 아이콘, 닫기 버튼 등이 들어갈 수 있다

▶ 액션_Action

• 다이얼로그의 버튼 부분

▶ 다이얼로그 설계시 유의할 점

• 사용자가 A 또는 B를 선택해야 하는 상황과, 사용자에게 경고 또는 확인 등을 표시할 때가 다르다
• 전자의 경우를 다이얼로그, 후자의 경우 얼럿_Alert이나 팝업이라 부른다
• 다이얼로그는 사용자 흐름에서 필수로 거쳐야 할 때 사용
• 만약 반드시 확인해야 하는 정보가 아니라면 다이얼로그나 얼럿을 피해야한다