UX/UI 부트캠프 14일차 TIL

2025.02.11

배리언츠, 프로퍼티, 포지션, 오버레이, 모달, 다이얼로그 컴포넌트

---

하루 계획

---

디자인카타

• 저는 B를 선택했습니다.
• A는 다양한 메뉴들을 홈 화면 안에 배치해서 사람들이 다른 기능들을 이용하도록 하였는데요, 중고거래 앱 같은 경우에는 좋은 가격대의 제품이나 인기 있는 물건들은 빠르게 팔릴 수도 있기 때문에 최근에 나온 매물이 보이는 것이 다른 메뉴들을 보여주는 것 보다 더 중요하다고 생각해서 A의 UI가 아쉽게 느껴졌습니다. 또한 찜 버튼이 사진 안에 배치되어 있는데 이미지에 따라 잘 안보일 수도 있겠다는 생각이 들었습니다.
• B는 하단 네비게이션 바에 다른 메뉴들을 넣어서 사용자가 핵심 기능에 집중할 수 있도록 한다고 생각합니다. 또한 B는 글의 제목이나 정보들이 잘리지 않고 온전히 보여서 굳이 눌러보지 않아도 된다는 점이 편리하다고 생각했습니다. 그리고 중고거래 같은 경우에는 수량이 한정되어 있는 경우가 많은데 찜 기능을 통해 몇 명이 관심이 있는 지 아는 것이 구매하는데 영향을 주는 중요한 정보라고 생각했는데요, A보다 B가 찜 버튼도 더 눈에 띄는 곳에 있어서 사용자 입장에서 사용했을 때 더 편하다고 생각했습니다.

---

 

2주차 과제

숙제 1 : 주요 화면 비교하고 이유 찾기

1) 각 메인 화면에서 서로 유사한 부분 찾아보기

각 서비스의 메인 화면에서 유사한 부분을 찾고, 서로 다른 서비스애서 유사한 디자인이 왜 생겨나는지 설명해 주세요.

 

2) 각 메인 화면에서 차별화된 영역을 찾아 비교하기

서로 다른 부분을 찾고, 그 부분을 왜 다르게 했을지 사용자의 핵심 행동을 유도한다는 관점에서 설명해 주세요.

 

나는 올리브영, 쿠팡, 마켓컬리, 아이디어스, 지그재그를 선택하여 분석하였다.

숙제 2 : 클론 디자인

다음 서비스 중 하나를 골라 클론 디자인해보고, 스타일가이드를 찾아 정리해주세요.

---

1. 배리언츠와 프로퍼티 활용

버튼 컴포넌트 스택 (Stack)

버튼은 가장 많이 사용하는 UI 요소로, 버튼을 상하나 좌우로 2개 이상 사용하는 경우가 있다.

그런 경우를 스택이라고 한다. 주로 팝업이나 일반적인 화면에서 볼 수 있다.

매번 버튼을 하나씩 넣는 것은 번거롭기에 2개씩 묶인 버튼 인스턴트를 하나의 합성 컴포넌트로 이용한다.

 

버튼 컴포넌트 독 (Dock)

버튼 컴포넌트는 단일 요소로 사용하기도 하지만, 화면 하단에 고정된 독 형태로도 사용된다.

여백 요소까지 고려해서 하단에 고정되는 버튼 컴포넌트 형태를 만들어두면 편하다.

 

2. 포지션

실제 개발에서 사용하는 개념으로, 디자인 및 레이아웃을 위한 코드에서 사용한다.

스태틱, 픽스드, 앱솔루트, 스티키 등 4가지 속성을 피그마에서 사용할 수 있다.

사용하는 방법에 따라 UI디자인의 완성도에 큰 영향을 주기에 중요하다.

 

1) 스태틱

가장 기본 값으로 아무 속성이 없는 상태를 말함

 

2) 픽스드

화면 전체를 기준으로 요소를 그 위치에 고정한다.

스크롤이나 다른 요소의 영향을 받지 않으며, 피그마 프로토타입에서 설정할 수 있다.

 

3) 앱솔루트

픽스드와 다르게 화면 전체가 아닌 요소를 감싼 상위 컨테이너를 기준으로 고정된다.

상위 컨테이너는 무조건 오토레이아웃이어야 한다.

 

4) 스티키

스크롤 안에서는 스태틱이다가 스크롤을 넘어가면 화면 상단에 고정된다.

프로토타입 패널에서 설정할 수 있다.

 

3. 오버레이와 모달

1) 팝업

화면 위에 새로운 화면을 띄우는 것을 말한다.

 

윈도우 팝업

윈도우 팝업은 브라우저 창을 띄워주는 방식이다.

요즘은 안전성 문제와 사용자의 불편함 때문에 사용하지 않는 추세이다.

 

레이어 팝업

코드로 만든 컴포넌트를 보여주는 레이어 팝업으로 나뉜다.

새로운 창이 아닌 컴포넌트로 만든 레이어를 하나 더 보여준다.

 

2) 모달

사용자가 행동을 취하기 전까지 뒤에 가려진 화면을 이용할 수 없는 것을 말한다.

팝업, 토스트, 바텀시트, 다이얼로그, 사이드바 등 다양하게 이용된다.

 

오버레이와 라이트 박스

모달과 함께 자주 이용된다.

UI가 화면 위에 중첩될 때를 이야기한다.

 

모달을 사용할 때 뒤에 가려진 화면은 이용할 수 없다는 것을 나타내기 위해 반투명한 층(라이트박스)을 쌓는다.

라이트 박스를 누르면 사용자가 취소하거나 뒤로 가려고 하는 것으로 간주한다.

 

모달 사용 시 

모달은 사용자가 원래 쓰던 화면을 잠구고, 원하는 행동을 하기 전까지는 풀어주지 않는다.

이러한 행동은 사용자에게 불편함을 줄 수도 있기에 중요하거나 꼭 확인해야 되는 내용에만 사용한다.

 

4. 다이얼로그 컴포넌트

오버레이-모달 속성을 가진 컴포넌트이다.

사용자에게 중요한 선택을 하게 하고, 확인하게 한다.

 

다이얼로그는 

컨테이너 안에 제목, 부가설명, 썸네일 이미지나 아이콘 닫기 버튼 등이 들어간 헤더와

버튼 부분을 뜻하는 액션으로 구성되어 있다.

 

사용자가 선택해야 되는 상황에서는 다이얼로그라고 부르며

라이트 박스를 누르면 취소나 닫기를 누른 것 같은 효과가 적용된다.

사용자에게 경고나 확인을 표시할 때는 얼럿이나 팝업이라고 부른다.

얼럿의 경우에은 중요한 내용이기에 사용자가 직접 취소버튼을 눌러야 닫아진다.

---

회고

오늘 하루는 과제를 하느라 바빴던 하루였다. 2주차 과제를 다 끝내는 것이 목표였는데 생각보다 시간이 오래걸려서 다 마치지 못하였다. 

오늘은 어제에 비해 집중을 잘 하긴 했지만 집중한 만큼의 결과가 나오지 못한 것 같아서 아쉬웠다. 내일은 오전에 4주차 강의를 듣고

2주차 과제를 다 마치는 것이 목표이다. 오후에는 3주차 과제를 진행하거나, 3주차 강의를 다시 복습할 생각이다.