#TIL_16 🍀 피그마 컴포넌트 심화 내용 정리

시간이 너무 잘 간다. 벌써 목요일이라니~

오늘은 피그마 심화 강의 3주차 내용이었던 "피그마 컴포넌트 심화 내용"에 대해 정리해볼 예정이다.

깔끔하게 강의 내용만 작성하고 싶어서 오늘 디자인 카타는 TIL에서 스킵!

---

 1. 컴포넌트 스택과 독 

▸스택 Stack

내일배움캠프 강의 참고 자료

⇢  상하 or 좌우로 2개의 버튼을 동시에 배치하기 위해 사용하는 피그마 스킬

• 버튼 컴포넌트는 여러 상황에서 가장 많이 사용하는 UI 요소 중 하나예요.
• 팝업 등의 요소에서도 볼 수 있고, 일반적인 화면에서도 버튼을 좌우나 상하로 배치한 경우를 볼 수 있어요.

 

▸독 Dock

내일배움캠프 강의 참고 자료

⇢  버튼 컴포넌트를 화면의 하단에 고정된 독(Dock) 형태로 사용

• 실제로 가장 많이 사용되는 버튼 컴포넌트의 형태예요.
• 여백 요소까지 고려해서 하단에 고정되는 버튼 컴포넌트 형태를 만들어두면 매우 빠르게 디자인을 진행할 수 있어요.
• 독 컴포넌트 안에는 버튼을 하나만 사용할 수도 있지만, 우리가 앞서 봤듯이 스택이 들어갈 수도 있어요. 상황에 따라 스택과 단일 버튼을 바꿔가면서 쓸 수 있도록 인스턴스 스왑 속성을 만들어 봐요.

---

 2. 포지션 

⇢  요소의 위치를 고정하거나 스크롤에 따른 위치를 조정할 때 포지션 값을 조정

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

 

▸ 스태틱 Static 

• 스태틱 속성은 가장 기본값으로, 요소에 아무런 속성값을 주지 않은 그대로의 상태예요.
• 피그마에서는 일반 프레임에 요소를 배치하면 돼요.
• 스태틱 속성은 프레임 안에서 자유롭게 움직일 수 있어요.

 

▸ 픽스드 Fixed 

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

 

▸ 앱솔루트 Absolute 

Position 부분에 불이 들어온 모습

• 앱솔루트 포지션은 픽스드와 같지만, 요소가 고정되는 위치는 화면 전체가 아니라 요소를 감싼 상위 컨테이너를 기준으로 해요.
• 스태틱과의 다른 점은, 상위 컨테이너가 반드시 오토레이아웃이어야 해요. 오토레이아웃이 아닌 일반 프레임 안에서는 앱솔루트 포지션을 사용할 수 없어요.
• 앱솔루트 포지션이 적용된 프레임은 오토레이아웃 안에서는 위치를 자유롭게 움직일 수 있어요.
• 피그마에서 앱솔루트 포지션은 오토레이아웃 포지션 안에서 요소 위치를 고정할 때 사용하고 있어요.

 

▸ 스티키 Sticky 

프로토타입 패널에서 설정

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

---

 3. 오버레이와 모달 

▸ 오버레이 Overlay 

⇢  바텀시트, 플로팅 버튼의 메뉴, 드롭다운 메뉴 등 "화면 위에 중첩되는 요소" 모두 오버레이!

• 오버레이는 모달과 함께 자주 사용되는 개념이에요. 하지만 다른 개념이니 잘 구분해야 해요.
• UI가 화면 위에 중첩될 때, 오버레이 속성을 가졌다고 해요.
• 우리가 흔히 보는 요소들 중에도 오버레이 속성을 가진 것들이 많아요.

▸ 모달 Modal

⇢   사용자가 특정 행동을 취하기 전까지 뒤에 가려진 화면을 조작할 수 없는 것

• 모달은 뒤에 숨겨진 화면의 동작을 할 수 있는지가 모달인지 아닌지를 판별하는 기준이에요.
• 사용자가 원래 쓰고 있던 화면을 잠가버리고, 사용자가 뭔가 행동을 하기 전까진 풀어주지 않아요.
• ‘사용자를 방해하면서라도 반드시 확인해야 하는 부분이거나, 또는 그만큼 중요한 선택이 필요한 시점’에 사용해야 하는 것이 모달이에요!

이 화면에서, 우리는 로그인 화면 뒤쪽에 숨겨진 피드 게시물을 누르거나 스크롤 할 수 없어요.

 

▸ 오버레이와 모달의 관계 

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

---

 4. 다이얼로그 

⇢   사용자에게 중요한 선택을 받고, 사용자가 선택한 행동을 확인하는 컴포넌트

• 컴포넌트의 종류 중 컨테이너에 해당하는 컴포넌트예요.
• 오버레이-모달 속성을 가진 컴포넌트예요.
• 선택지의 유형에 따라 조작법이 달라져요.
• 사용자 흐름에서 필수로 거쳐야 할 때 사용해요.

1. 컨테이너 Container

다이얼로그 안에 있는 요소들을 감싸고 있는 프레임을 뜻해요.

 

2. 헤더 Header

다이얼로그의 제목, 부가설명 등이 들어간 제목 부분을 뜻해요.

헤더 부분에는 썸네일 이미지나 아이콘, 닫기 버튼 등이 들어갈 수도 있어요.

 

3. 액션 Action

다이얼로그의 버튼 부분을 뜻해요. 액션 부분에는 버튼이 여러개 들어갈 수도 있어요.

---

🔗 함께 보면 좋은 자료

 

https://wdnote.tistory.com/244

4-3 배리언츠와 컴포넌트 구조화

https://www.qguider.com/d/guides/466/

하루10분 피그마 스크롤 포지션 설정

https://tech.toktokhan.dev/2021/07/21/about-modal/

이거도 모달, 저거도 모달, 이게 모람

https://brunch.co.kr/@4e08fa0c786441b/3

Dialog에 대한 고찰