TIL_4W2D~3D_배리언츠와 프로퍼티의 활용

디자인 카타
오늘의 토픽 - 스마트 티비 구성 화면, 어떤 것을 선호하시나요?
선택 B안

스마트 티비를 구성할 때 모든 OTT가 구독되어 있는 것이 아닌 본인이 구독한 OTT만 사용할 수 있는 경우가 여전히 많은 편이여서 구독한 OTT 빠르게 누르려면 B의 구성이어야 가능함

영상을 골랐을 때 OTT가 구독되어 있지 않으면 영상 시청을 할 수 없는 경험을 실제로 하였기 때문에 그러한 불편함이 발생할 수 있음
다만, 요즘 전체 OTT와 비슷하게 이용하는 구독제도가 나와서 전체 OTT를 다 이용할 수 있다는 가정하에는 A안이 더 좋아보임

디자인 카타
오늘의 토픽 - 아이폰 사파리(Safari) 탭, 무엇을 더 선호하시나요?
선택 A안

현재 사파리의 기본 설정이 탭 막대로 되어있어 친숙하며 사파리와 구글, 네이버 모두 하단에 위치해 있거나 상단 하단으로 나뉘는 경우를 볼 수 있는데 하단의 경우가 많아 익숙한게 더 편해보임

B안의 경우 공유버튼이나 이전 그 밖의 버튼이 존재하지 않아 화면간 이동을 어떻게 해야 할 지 모르겠다고 느낄 수 있음

버튼 컴포넌트 스택(Stack)
버튼 컴포넌트 중 가장 많이 사용하는 UI요소 중 하나
그만큼 여러 상황에서 다양한 형태로 사용
버튼을 상하나 좌우로 2개 이상을 같이 사용하는 경우의 수도 있는데, 그런 경우를 스택(Stack)라고 함

피그마에서 버튼 스택을 만들면 좋은 점
버튼 컴포넌트는 다양한 UI 형태로 사용하는 요소
특히 좌우 또는 상하로 2개씩 배치하는 경우가 많은데, 이런 경우마다 매번 버튼을 하나씩 넣는 것은 번거로운 일이 될 수 있으며
따라서 2개씩 묶인 버튼 인스턴스를 하나의 합성 컴포넌트로 활용하는 게 스택

버튼 컴포넌트 독(Dock)
실제로 가장 많이 사용되는 버튼 컴포넌트의 형태
버튼 컴포넌트는 단일 요소로 사용하는 경우도 있지만, 대부분 화면 하단에 고정된 독 형태로 사용
여백 요소 고려해 하단에 고정하는 버튼 컴포넌트 형태를 만들어두면 매우 빠르게 디자인 진행 가능

포지션은 실제 개발에서 사용하는 개념으로, 디자인 및 레이아웃을 위한 코드에서 사용함
피그마에서는 이 포지션을 다룰 수 있는 기능을 곳곳에 배치해 둠
스테틱, 픽스트, 앱솔루트, 스티키 등 4가지 속성을 사용할 수 있음

포지션이 중요한 이유
포지션은 화면 상에서 요소가 위치하는 방식
UI 요소는 화면 안에 다른 요소들과 상대적인 관계를 가지며 위치

포지션 속성 이해하기
스태틱
스태틱 속성은 가장 기본값, 요소에 아무런 속성값을 주지 않은 그대로의 상태
피그마에서 일반 프레임에 요소 배치
스태틱 속성은 프레임안에서 자유롭게 움직일 수 있음

픽스드
픽스드 속성은 화면 전체를 기준으로 요소를 그 위치에 고정
픽스드 속성을 가진 요소는 스크롤, 다른 요소에 구애를 받지 않음
피그마에서는 프로토타입에서 설정 가능
피그마에서는 Fixed 속성으로 따로 구분

앱솔루트
앱솔루트 포지션은 픽스드와 같지만, 요소가 고정되는 위치는 화면 전체가 아닌 요소를 감싼 상위 컨테이너를 기준
스태틱과 다른 점은, 상위 컨테이너가 반드시 오토레이아웃이어야 함
오토레이아웃이 아닌 일반 프레임 안에서는 앱솔루트 포지션 사용 불가
앱솔루트 포지션이 적용된 프레임은 오토레이아웃 안에서 위치를 자유롭게 움직일 수 있음
피그마에서는 오토레이아웃 포지션 안에 요소 위치 고정 시 사용
피그마에서는 디자인 패널에서 설정 가능하며, 앱솔루트 포지션이 적용된 요소는 테두리에 다른 표시가 생김

스티키
스티키 포지션은 픽스드와 스태틱을 전환하며 적용되는 속성
스크롤 안에서는 스태틱이다가, 스트롤 넘어갈 시 화면 상단에 고정
스크롤과 관련 있기 때문에 프로토타입 패널에서 설정

팝업은
인터넷이나 앱 사용시 정말 많은 화면을 보는데, 그 중 광고, 로그인 유도 등의 화면을 내가 보는 화면 위에 띄어주는 경우
화면 위에 새로운 화면을 띄우는 걸 말함

팝업의 유형
일반적으로 팝업이라고 부르는 것과 실제 UI관점에서 팝업은 차이가 있음
이 팝업은 2가지 유형으로 나눌 수 있음
윈도우 팝업
새로운 윈도우(브라우저 창)을 띄워주는 방식
일반적으로 팝업이라고 부르는 건 이 방식을 말함

레이어 팝업
현재 화면에서 코드로 만든 컴포넌트를 보여주는 방식
대부분 서비스는 이 방식을 팝업으로 보여주고 있음
레이어 팝업은 새로운 창을 띄우는 것이 아니라, 현재 화면에서 컴포넌트로 만든 레이어(층)를 하나 더 보여주는 개념

모달은 사용자가 행동을 취하기 전까지 뒤에 가려진 화면을 조작할 수 없는 것
모달이라는 건 UI 이름이 아닌, UI 분류 기준 중 하나임
로그인 화면에서 뒤에 가려진 부분을 조작할 수 없다면, 로그인 화면은 모달임

모달의 종류
모달은 우리가 앱이나 웹 사용 시 굉장히 많이 발견할 수 있는 UI들임
팝업, 토스트, 바텀시트, 다이얼로그, 사이드바 등 많은 UI들이 모달로 사용되고 있음

오버레이는 모달과 함께 자주 사용되는 개념
UI가 화면 위에 중첩될 때, 오버레이 속성을 가졌다고 함

라이트박스는 스크림, 딤드, 딤레이어, 오버레이 등으로 불림
모달 UI를 사용 시 일반적으로 '뒤에 가려진 화면은 사용할 수 없다'는 걸 보여주기 위해 반투명한 층을 만들어 줌
이 반투명한 측을 라이트박스라고 함

오버레이와 모달, 라이트박스의 관계
화면에 배치하는 UI들이 오버레이인지 아닌지로 먼저 나눌 수 있음
오버레이는 다시 모달인 것과 모달이 아닌 것으로 나눌 수 있으며, 모달인 것은 라이트박스를 포함하고 다이얼로그나 바텀시트 등으로 보임
모달이 아닌 것은 툴팁이나 스낵바, 드롭다운 메뉴처럼 중첩은 되어 있으나 뒤쪽 화면이 가려지지 않는 UI로 보임
즉, 오버레이는 모달의 상위 구분이라고 할 수 있음

라이트박스를 쓸 때 주의사항

라이트박스는 반드시 써야하는 것은 아님
라이트박스는 사용자에게 모달과 배경을 명확히 분리, 집중해야 하는 부분을 안내하기 위한 목적이지, 모달에 반드시 같이 써야 하는 것은 아님
다만 라이트박스가 없을 시 사용자가 봐야 하는 중요한 부분을 발견하기 힘들다보니 조작을 잘못 하거나 다른 부분을 누를 가능성이 증가하기 때문에, 라이트박스는 권장사함

라이트박스를 누르면 사용자가 취소 또는 뒤로 가려는 것으로 간주
라이트박스 누르면 모달을 열기 전으로 다시 되돌려주는 것이 일반적인 방법
다만, 매우 중요한 선택을 해야하는 순간이라 뒤로 돌아갈 수 없거나, 뒤로 돌아가면 지금까지의 진행 상황이 모두 삭제되는 경우라면 라이트박스를 눌러도 꺼지지 않도록 해야 함

모달 사용 시 주의사항
모달은 뒤에 숨겨진 화면 동작을 할 수 있는지가 모달인지 아닌지 판별하는 기준
즉, 사용자가 원래 쓰고 있던 화면을 잠그고, 사용자가 뭔가 행동을 하기 전까지 풀어주지 않음
사용자의 자연스러운 흐름 방해 및 사용자가 최종 목적지까지 가는 시간이나 비용을 증가 시키므로, 모달이 많을 시 사용자가 불편해할 가능성이 매우 높아짐
사용자를 방해하면서라도 반드시 확인해야 하는 부분이나, 그만큼 중요한 선택이 필요한 시점에 사용해야 하는 것이 모달

다이널로그 컴포넌트는 컴포넌트 종류 중 컨테이너에 해당하며, 오버레이-모달 속성을 가진 컴포넌트
다이널로그는 사용자에게 중요한 선택을 받고, 사용자가 선택한 행동을 확인하는 컴포넌트

다이얼로그의 구조

다이널로그 설계에서 유의할 점
선택지의 유형에 따라 조작법이 달라짐
사용자가 A 또는 B를 선택해야 하는 상황과, 사용자에게 경고 또는 확인 등을 표시할 때가 다름
전자의 경우 다이얼로그, 후자의 경우 얼럿(Alert)나 팝업으로 부름
다이얼로그의 경우에는 라이트박스를 누를 시 취소 또는 닫기를 누른 것과 동일한데, 얼럿의 경우 사용자가 반드시 알아야 하는 중요 서비스 상태와 관련 깊기 때문에, 사용자가 반드시 버튼을 눌러 확인하거나 직접 취소를 눌러 닫아야 함

사용자의 흐름에서 필수로 거쳐야 할 때 사용함
다이얼로그는 필연적으로 사용자를 방해함
그만큼 중요 시점에 쓰거나 반드시 받아야 하는 정보만 받아야 함
만약 사용자가 반드시 확인해야 하는 정보가 아닐 시 다이얼로그나 얼럿을 피할 것

다이얼로그 만들기

3주차 숙제
숙제 : 네이버 지도 앱 클론 디자인

컴포넌트 인터랙션
Ui들은 우리 행동에 따라 적합한 시각적 피드백을 제공해 줌
예를 들면, 버튼을 누르고 있을 때는 색상이 변하거나 버튼이 실제로 눌린 것 같은 효과를 보여줌
피그마에서 프로토타입을 사용해서 컴포넌트 자체에 UI의 시각적 피드백을 인터랙션으로 구현해줄 수 있음
또한 UI의 상태가 달라지는 경우를 일일히 추가 화면으로 만들지 않아도 되기 때문에, 시간과 비용 절약

오버레이 프로토타입
다이얼로그처럼 오버레이 속성 가진 UI들은 프로토타입에서 오버레이 활용해 만들 수 있음
프로토타입 대신 다이얼로그가 보이는 화면 디자인 자체가 필요한 경우도 있기 때문에 프로토타입으로 만들건지, 화면 디자인으로만 둘건지는 상황에 맞게 선택해도 괜찮음

드래그 프로토타입
드래그 방향에 따라 프레임 전환이 발생하는 독특한 기능
하나의 프레임에 드래그라는 동일한 트리거로 여러 프레임 적용 가능
즉, 드래그 방향에 따라 다른 화면이 나오도록 만들 수 있음
이미지 슬라이드 같은 캐러셀, 회전 등의 인터랙션을 만들 때 유용