[내일배움캠프 15일차(3)] 피그마 활용 심화 수강

이번 주 계속 달려서 그런가

연휴가 있어서 그런가

집중력이 박살 난 금요일이다,,

다음 주부턴 정신 차리고 하자!!

 

 

 

<피그마 활용 심화 3주차>

수업 목표

1️⃣ 복잡한 UI 컴포넌트 구조를 파악하고 체계적으로 설계하는 법을 배운다.

2️⃣ 다양한 UI 심화 개념을 배우고 피그마 기능으로 표현하는 법을 배운다.

 

 

 

 

 

배리언츠와 프로퍼티 활용

버튼 컴포넌트 스택 (Stack)

1️⃣ 스택(Stack)의 뜻

버튼을 상하나 좌우로 2개 이상을 같이 사용하는 경우를 스택(Stack;쌓다)이라고 부른다.

 

 

2️⃣ 피그마에서 버튼 스택을 만들면 좋은 점

버튼 컴포넌트는 다양한 UI 형태로 사용하는 요소이다.

특히 좌우 또는 상하로 2개씩 배치하는 경우가 많은데,

매번 버튼을 하나씩 넣는 것은 번거로운 일이 될 수 있다.

따라서 2개씩 묶인 버튼 인스턴스를 하나의 합성 컴포넌트로 활용하는 게 스택이다.

💡 스택은 UI 명칭보다는, 2개의 버튼을 동시에 배치하기 위한 피그마 스킬이라 할 수 있다.

버튼 컴포넌트 독 (Dock)

1️⃣ 독(Dock)의 뜻

실제로 가장 많이 사용되는 버튼 컴포넌트의 형태이다.

버튼 컴포넌트는 단일 요소로 사용하는 경우도 있지만,

대부분의 경우 화면의 하단에 고정된 독(Dock) 형태로 사용된다.

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

매우 빠르게 디자인을 진행할 수 있다.

 

💡 실무에서는 기기 하단의 인디케이터 요소까지 고려해서 만들어 두는 편이다.

 

 

 

 

 

포지션(Position)

포지션(Position)은 화면 상에서 요소가 위치하는 방식이다.

UI 요소는 화면 안에 다른 요소들과 상대적인 관계를 가지면서 위치한다.

1️⃣ 스태틱(Static)

가장 기본값으로, 요소에 아무런 속성값을 주지 않은 그대로의 상태이다.

피그마에서는 일반 프레임에 요소를 배치하면 된다.

스태틱 속성은 프레임 안에서 자유롭게 움직일 수 있다.

2️⃣ 픽스드(Fixed)

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

픽스드 속성을 가진 요소는 스크롤, 다른 요소에 구애받지 않는다.

피그마에서는 프로토타입에서 설정할 수 있다.

 

피그마에서는 Fixed 속성으로 따로 구분된다.

 

3️⃣ 앱솔루트(Absolute)

픽스드와 같지만, 요소가 고정되는 요소를 감싼 상위 컨테이너를 기준으로 한다.

스태틱과의 다른 점은, 상위 컨테이너가 반드시 오토레이아웃이어야 한다.

오토레이아웃이 아닌 일반 프레임 안에서는 앱솔루트 포지션을 사용할 수 없다.

앱솔루트 포지션이 적용된 프레임은 오토레이아웃 안에서는 위치를 자유롭게 움직일 수 있다.

피그마에서 앱솔루트 포지션은 오토레이아웃 포지션 안에서 요소 위치를 고정할 때 사용한다.

피그마에서는 디자인 패널에서 설정할 수 있고,

앱솔루트 포지션이 적용된 요소는 테두리에 다른 표시가 생긴다.

 

4️⃣ 스티키(Sticky)

스티키 포지션은 픽스드와 스태틱을 전환하며 적용되는 속성이다.

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

스크롤과 관련 있기 때문에 프로토타입 패널에서 설정할 수 있다.

 

 

 

 

 

 

오버레이와 모달

인터넷이나 앱을 쓰다 보면 정말 많은 화면들을 보게 된다.

웹사이트의 경우 쓱의 경우처럼 새로운 인터넷 창을 띄워주는 경우도 있다.

화면 위에 새로운 화면을 띄우는 걸 일반적으로 팝업이라고 부른다.

 

 

팝업의 유형

1) 윈도우 팝업

쓱 처럼 새로운 윈도우(브라우저 창)을 띄워주는 방식이다.

일반적으로 팝업이라고 부르는 건 이 방식을 이야기한다.

윈도우 팝업은 점점 사용하지 않는 추세이다.

 

2) 레이어 팝업

현재 화면에서 코드로 만든 컴포넌트를 보여주는 방식이다.

대부분의 서비스는 이 방식으로 팝업을 보여주고 있다.

 

모달

모달은 사용자가 행동을 취하기 전까지 뒤에 가려진 화면을 조작할 수 없는 것을 뜻한다.

모달(Modal)이라는 건 UI의 이름이 아니라, UI를 분류하는 기준 중 하나이다.

로그인 화면에서 뒤에 가려진 부분을 조작할 수 없다면, 로그인 화면은 모달이다.

팝업, 토스트, 바텀시트, 다이얼로그, 사이드바 등 많은 UI들이 모달로 사용되고 있다.

 

 

오버레이와 라이트박스

1) 오버레이의 개념

오버레이는 모달과 함께 자주 사용되는 개념이다.

UI가 화면 위에 중첩될 때, 오버레이 속성을 가졌다고 한다.

우리가 흔히 보는 요소들 중에도 오버레이 속성을 가진 것들이 많다.

 

2) 라이트박스의 개념

모달 UI를 사용할 때는 일반적으로 ‘뒤에 가려진 화면은 사용할 수 없다’

는 걸 보여주기 위해 반투명한 층을 만들어 준다.

이 반투명한 층을 라이트박스(Lightbox)라고 부른다.

 

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

 

💡 '사용자를 방해하면서라도 반드시 확인해야 하는 부분이거나, 또는 그만큼 중요한 선택이 필요한 시점’에 사용해야 하는 것이 모달이다.

 

 

 

 

다이얼로그 컴포넌트

컴포넌트의 종류 중 컨테이너에 해당하는 컴포넌트이다.

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

다이얼로그는 사용자에게 중요한 선택을 받고, 사용자가 선택한 행동을 확인하는 컴포넌트이다.

 

 

 

 

 

 

<피그마 활용 심화 4주차>

수업 목표

1️⃣ 프로토타이핑을 통해 디자인에 활용할 수 있는 피그마 인터랙션을 만들 수 있다.

2️⃣ 실제 서비스들의 인터랙션을 피그마에서 유사하게 구현해 보며 원리를 이해할 수 있다.

 

 

 

 

 

컴포넌트 인터랙션

UI들은 우리 행동에 따라 적합한 시각적 피드백을 제공해 준다.

예) 버튼을 누르고 있을 때는 색상이 변하거나 버튼이 실제로 눌린 것 같은 효과를 보여준다.

피그마에서 프로토타입을 사용해서 UI의 시각적 피드백을 인터랙션으로 구현해 줄 수 있다.

또한 UI의 상태가 달라지는 경우를 일일이 추가 화면으로 만들지 않아도 되기 때문에,

시간과 비용을 절약할 수 있다.

 

 

 

 

 

오버레이 프로토타입

다이얼로그처럼 오버레이 속성을 가진 UI들은 프로토타입에서 오버레이를 활용해 만들 수 있다.

프로토타입 대신 다이얼로그가 보이는 화면 디자인 자체가 필요한 경우도 있기 때문에

프로토타입으로 만들 건지, 화면 디자인으로만 둘 건지는 상황에 맞게 선택해도 괜찮다.

 

 

 

 

 

드래그 프로토타입

드래그하는 방향에 따라 프레임 전환이 발생하는 독특한 기능이다.

하나의 프레임에 드래그라는 동일한 트리거로 여러 프레임을 적용할 수 있다.

즉, 드래그 방향에 따라 다른 화면이 나오도록 만들 수 있다.

이미지 슬라이드 같은 캐러셀이나 회전 등의 인터랙션을 만들 때 유용하게 사용할 수 있다.

 

 

 

 

 

 

 

 

 

 

 

이번 주를 돌아보며,,

과제 과제 과제 과제밖에 생각이 안 나네,, 과제하면서 입맛도 없어지고 맨날 야근하다 보니 살이 저절로 빠졌다 이건 쫌 개이득 처음에 섹션, 모듈 분석하고 스타일 분석할 때 진짜 돌아버리는 줄 알았다 하 진짜 어떻게 하는 건지 몰라서 내 맘대로 했는데 이게 맞나 싶어서 몇 번 갈아엎고 그렇다고 결과물이 좋나? 그것도 아니다 그냥 눈물만 주륵이었다ㅜ 과제할 때 힘을 다 쏟아서 그런지 과제 끝나고 나니 조금 해이해진 것 같다,, 연휴 끝나면 다시 기강 잡자