배리언츠와 프로퍼티 활용
▪️버튼 컴포넌트 스택(Stack)
버튼을 상하나 좌우로 2개 이상을 같이 사용하는 경우를 스택이라고 한다.
* 2개씩 묶은 버튼 인스턴스를 하나의 합성 컴포넌트로 사용하는 것이 스
▪️버튼 컴포넌트 독(Dock)
- 실제로 가장 많이 사용되는 버튼 컴포넌트의 형태
- 버튼 컴포넌트는 단일 요소로 사용하는 경우도 있지만, 대부분의 경우 화면의 하단에 고정된 독 형태로 사용
- 여백 요소까지 고려해서 하단에 고정되는 버튼 컴포넌트 형태를 만들어두면 매우 빠르게 디자인 진행 가능
포지션
화면 상에서 요소가 위치하는 방식
* 실제 개발에서 사용하는 개념. 디자인 및 레이아웃을 위한 코드에서 사용
포지션 속성
▪️스태틱(Static)
- 스태틱 속성은 가장 기본값. 요소에 아무런 속성값을 주지 않은 그대로의 상태
- 피그마에서는 일반 프레임에 요소를 배치하면 된다.
- 스태틱 속성은 프레임 안에서 자유롭게 움직일 수 있다.
▪️픽스드(Fixed)
- 픽스드 속성은 화면 전체를 기준으로 요소를 그 위치에 고정
- 픽스드 속성을 가진 요소는 스크롤, 다른 요소에 구애받지 않는다.
- 피그마에서는 프로토타입에서 설정 가능
- 피그마에서는 Fixed 속성이 따로 구분
▪️앱솔루트(Absolute)
- 앱솔루트 포지션은 픽스드와 같지만 요소가 고정되는 위치는 화면 전체가 아니라 요소를 감싼 상위 컨테이너를 기준으로 한다.
- 스태틱과 다른 점은 상위 컨테이너가 반드시 오토레이아웃이어야 한다. 일반 프레임 안에서는 앱솔루트 포지션을 사용할 수 없다.
- 앱솔루트 포지션이 적용된 프레임은 오토레이아웃 안에서는 위치를 자유롭게 움직일 수 있다.
- 피그마에서 앱솔루트 포지션은 오토레이아웃 포지션 안에서 요소 위치를 고정할 때 사용하고 있다.
- 피그ㅁ에서는 디자인 패널에서 설정 가능하고 앱솔루트 포지션이 적용된 요서는 테두리에 다른 표시가 생긴다.
▪️스티키(Sticky)
- 스티키 포지션은 픽스드와 스태틱을 전환하며 적용되는 속성
- 스크롤 안에서는 스태틱이다가 스크롤을 넘어가면 화면 상단에 고정된다.
- 스크롤과 관련있기 떄문에 프로토타입 패너에서 설정할 수 있다.
오버레이와 모달
모달과 팝업
▪️팝업
문자 그대로 팝하고 튀어나온다는 뜻. 화면 위에 새로운 화면을 띄우는 것을 일반적으로 팝업이라고 한다.
팝업 유형
▪️윈도우 팝업
- 새로운 윕도우(브라우저 창)을 띄우는 방식
- 일반적으로 팝업이라고 부르는건 이 방식을 이야기 한다.
* 윈도우 팝업은 점점 사용하지 않는 추세
▪️레이어 팝업
- 현재 화면에서 코드로 만든 컴포넌트를 보여주는 방식
- 대부분의 서비스는 이 방식으로 팝업을 보여준다.
* 최근 서비스에서는 레이어 팝업을 적극적으로 사용
▪️모달
- 사용자가 행동을 취하기 전까지 뒤에 가려진 화면을 조작할 수 없는 것
- UI이 이름이 아닌 UI를 분류하는 기준 중 하나
- 로그인 화면에서 뒤에 가려진 부분을 조작할 수 없다면 로그인 화면은 모달이다.
- 팝업, 토스트, 바텀시트, 다이얼로그, 사이드바 등 많은 UI들이 모달로 사용되고있다.
오버레이와 라이트박스
▪️오버레이
- 오버레이는 모달과 함께 자주 사용되는 개념
- UI가 화면 위에 중첩될 때, 오버레이 속성을 가졌다고한다.
* 모달은 필연적으로 오버레이 속성을 가지고 있기 때문에 모달이 오버레이라고 착각할 수 있지만 다른 개념으로 잘 구분해야한다.
▪️라이트박스
모달 UI를 사용할 때는 일반적으로 '뒤에 가려진 화면은 사용할 수 없다'는 걸 보여주기 위해 반투명한 층을 만다는데 이 투명한 층을 라이트박스라고 한다.
= 스크림 딤드, 딤레이어, 오버테이 등으로도 불린다.
▪️오버레이와 모달, 라이트박스의 관계
- 화면에 배치하는 UI들은 오버레이인지 아닌지로 먼저 나눌 수 있다.
- 오버레이는 다시 모달인 것과 모달이 아닌 것으로 나눌 수 있다.
- 모달인 것은 라이트박스를 포함하고 우리가 잘 아는 다이얼로그나바텀시트 등으로 보인다.
- 모달이 아닌 것은 툴팁이나 스낵바, 드롭다운 메뉴처럼 중첩은 되어 있으나 뒤쪽 화면이 가려지지 않는 UI로 보인다.
- 오버레이는 모달의 상위 구분이라고 할 수 있다.
* 라이트박스 사용 시 주의사항
- 라이트박스는 반드시 써야하는 것은 아니다.
- 라이트박스를 누르면 사용자가 취소 또는 뒤로 가려는 것으로 간주
다이얼로그 컴포넌트
- 컴포넌트의 종류 중 컨테이너에 해당하는 컴포넌트
- 오버레이-모달 속성을 가진 컴포넌트
- 다이얼로그는 사용자에게 중요한 선택을 받고 사용자가 선택한 행동을 확인하는 컴포넌트
▪️다이얼로그 구조
* 유의할 점
- 선택지의 유형에 따라 조작법이 달라진다.
- 사용자 흐름에서 필수로 거쳐야 할 때 사용
다음 주에 연휴가 길게 있어서 그런지 오늘은 진짜 최고로 집중이 안 됐다,, 과제 빨리 해야된다는 생각만 하다가 지나간 거 같은 오늘 ⭐
다음 주에는 오늘 집중 못 한 거 배로 집중해봐야겠다. 연휴에도 시간되면 들어와보고 해야겠답,,
'UXUI' 카테고리의 다른 글
| [아티클] 무료 배달에서 구독 경쟁으로? 배민, 쿠팡이츠, 요기요의 마케팅 전략 분석! [배달의민족, 쿠팡, 요기요] (3) | 2025.05.20 |
|---|---|
| 다시 만난 주주 👧🏻 (5) | 2025.05.12 |
| 다 나쁘지만은 않네 ~!!🧔🏻 (4) | 2025.05.01 |
| 첫 개인 과제 끝 🤦🏻♀️ (0) | 2025.04.30 |
| [내일배움캠프] 뛰어간 이번 주 🏃🏻♀️ (0) | 2025.04.26 |