[스파르타코딩클럽] Figma 활용법 (2) 강의 후기

 

 

 

 

1. 모달 컴포넌트와 UI 요소 (5주차)

 

💡 모달

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

 

- 일반적으로 레이어팝업에서 사용되나, 팝업=모달은 아니다. 모달은 속성이며 UI를 분류하는 기준 중 하나이다.

- 모달의 종류로는 팝업, 토스트, 바텀시트, 다이얼로그, 사이드 바 등이 있다.

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

 

 

- 라이트 박스

: 모달 UI를 사용할 때 일반적으로 '뒤에 가려진 화면은 사용할 수 없다'는 걸 보여주기 위해 반투명한 층을 만든다. 이 때 이 반투명한 층을 라이트박스라고 부른다.

좌 라이트박스 O, 우 라이트박스 X

 

라이트 박스는 스크림, 딤드, 딤레이어, 오버레이 등으로 불린다.

 

모달 UI를 사용할 때 반드시 존재해야만 하는 것은 아니지만 사용자가 봐야 하는 중요한 부분을 발견하기 힘들다보니 조작을 잘못하거나 다른 부분을 누를 가능성을 줄이기 위해 권장되는 사항이다.

 

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

 

 

 

- 다이얼로그 컴포넌트

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

 

다이얼로그는 대화 그 자체라는 뜻이다. 사용자가 어떤 선택을 해야 할 때, 제품은 다이얼로그의 형태로 어떻게 할 건지 물어보고 사용자는 선택지를 버튼 형태로 답변한다.

 

다이얼로그는 컨테이너, 헤더, 액션의 구조로 구성된다. 이때 헤더에는 제목, 부제목, 그리고 썸네일 이미지나 아이콘, 닫기 버튼이 들어갈 수도 있다. 액션에는 버튼이 여러 개 들어갈 수 있다.

 

 

* 다이얼로그와 얼럿(Aleart)

좌 다이얼로그, 우 얼럿

선택해야 하는 상황에는 다이얼로그, 경고를 표시할 땐 얼럿을 사용한다. 즉, 라이트 박스를 누를 경우 다이얼로그는 닫힐 수 있으나 얼럿은 닫히지 않는다. 헷갈릴 수 있으니 얼럿은 토스트(스낵바)를 사용하자.

 

 

 

 

 

- 컨트롤 컴포넌트

: 사용자가 선택지를 특정할 수 있도록 하는 요소

 

다른 UI에 비해 크기가 작아 최소 크기 범위를 늘려야 한다. ( 최소 1cm x 1cm / 44x44px )

컨트롤 요소는 대부분 라벨과 같이 쓰인다. 이때, 라벨을 눌러도 컨트롤 요소가 작동하게 하는 것이 일반적이다.

 

그렇기 때문에 라벨, 컨트롤 컴포넌트 사이의 간격을 충분히 줘야 한다.

 

또, 컨트롤 요소와 라벨의 높이값은 같아야 한다.

 

 

 

* 체크박스와 라디오 컴포넌트

 

- 체크박스는 선택지를 여러 개 선택하는 중복 선택이 가능하며, 아무 것도 선택하지 않는 것도 가능하다.

- 라디오 컴포넌트는 여러 개 중에 한 개의 선택지만 단일 선택이 가능하며, 아무 것도 선택하지 않는 것은 불가능하다.

 

 

 

 

 

 

 

2. 다양한 환경에서의 UI 차이와 정보구조도, 플로우차트, 와이어프레임까지 (6주차)

 

 

- 웹과 앱 환경에서의 UI 차이

 

UI에 차이가 있다는 것은 목적에 차이가 있는 것이고, 목적에 차이가 있다면 UX에서도 차이가 생긴다.

 

 

 

- OS 별 차이

웹은 비교적 자유롭지만, 앱의 경우 반드시 앱스토어나 플레이스토어 같은 앱 마켓에 등록해야 사람들이 설치하고 사용할 수 있다. 따라서 앱 마켓에서 제시하는 앱 심사 가이드라인을 따라야한다. 만일 가이드라인에 맞지 않는 부분이 있다면 심사에서 거절당할 수 있다.

 

 

* 애플 앱 심사 지침 : https://developer.apple.com/kr/app-store/review/guidelines/#sign-in-with-apple

앱 심사 지침 - Apple Developer

 

 

 

- 정보구조도(IA)와 플로우차트

정보구조도와 플로우차트는 회사마다 만드는 방법이 다 다르고, 개발자-디자이너-기획자 간 이해도를 동일하게 맞춰준다. 

 

 

둘은 유사해보이나 개념과 목적에 큰 차이가 있다. 제품을 하나의 건물에 비유한다면 정보구조도는 층별 안내도, 플로우차트는 오시는 길이라고 할 수 있다.

 

 

플로우차트는 국제 표준 규칙이 존재한다.

출처 : https://devdesigner.tistory.com/64, 모바일 UI/UX 디자인 실무 (이영주 지음, 한빛미디어)

 

 

- 와이어프레임

: 선(와이어)로 그려진 화면, 로우파이 프로토타입이라고 부를 수 있다.

 

 

 

* 와이어 프레임 규칙 정하기
(1) 표현할 것과 표현하지 않을 것을 고르기

(2) 최대한 단순하게 그리고 텍스트는 실제 사용할 내용으로 넣기

(3) 화면과 화면을 선으로 연결하기

 

** 피그마 플러그인 Simpleflow

 

 

 

 

 

 

 

 

 

3. 프로토타입 (7주차)

 

💡 프로토타입

: 디지털 제품에서 실제 제품을 만들지 않고 아이디어를 테스트해볼 수 있는 것.

 

- 구현하는 정도에 따라 낮은 단계 (Lo-fi) / 높은 단계 (Hi-fi)로 나눌 수 있다.

- 실제 제품을 만들지 않고도 아이디어를 검증해 볼 수 있다.

- 팀 구성원들과 시각적인 결과물로 소통할 수 있다.

- 부족하거나 놓친 부분을 확인할 수 있다.

 

 

 

- 피그마 프로토타입

👍 장점 : 직관적이고 빠르게 만들 수 있다.

👎 단점 : 실제 제품처럼 동작하는 걸 만들기 어렵고, 기능이 제한적이라 만드는 시간이 오래 걸려 효율성이 떨어진다. (블루스파게티...)

 

피그마 프로토타입의 구성은 핫스팟, 커넥션, 종착점으로 나뉜다.

 

(1) 핫스팟 : 프로토타입을 시작하는 지점. 상하좌우 모서리 각 중앙지점에서 끌어올 수 있다.

(2) 커넥션 : 화면을 서로 이어주는 연결선.

(3) 종착점 : 도착하는 지점. 종착점에서 핫스팟을 끌어 다른 화면과도 이을 수 있다.

 

 

 

플로우는 트리거와 애니메이션, 액션으로 구성된다.

 

(1) 트리거 : 액션을 시작하는 조건이나 이유, 계기. 

• On click : 클릭 또는 탭/터치했을 때 액션을 실행해요.
• On drag : 드래그했을 때 액션을 실행해요.
• While hovering : 커서/마우스가 영역 위에 올라가 있는 동안 계속 액션을 실행해요.
• Mouse enter와 Mouse leave를 계속 반복하는 것과 같은 효과예요.
• While pressing : 커서/마우스로 영역을 누르고 있는 동안 계속 액션을 실행해요.
• Mouse down와 Mouse up를 계속 반복하는 것과 같은 효과예요.
• Key/Gamepad : 특정 키를 눌렀을 때 액션을 실행해요.
• Mouse enter : 커서/마우스가 영역 위에 올라가면 액션을 실행해요.
• Mouse leave : 커서/마우스가 영역을 벗어나면 액션을 실행해요.
• Mouse down : 커서/마우스가 영역을 누르면 액션을 실행해요.
• Mouse up : 커서/마우스가 영역을 눌렀다 떼면 액션을 실행해요.
• After delay : 일정 시간이 지난 후에 액션을 실행해요.

 

(2) 액션 : 트리거로 인해 만들어지는 결과.

• Navigate to : 페이지(프레임)를 이동하는 액션이에요.
• Change to : 컴포넌트의 다른 배리언츠로 변경하는 액션이에요. 트리거가 컴포넌트에 적용되어 있을 때만 사용할 수 있어요.
• Back : 직전 화면으로 이동하는 액션이에요. 뒤로가기 버튼에 적용하면 언제든지 이전 화면으로 이동할 수 있어요.
• Set variable : 변수를 특정 값으로 설정하는 액션이에요. 트리거를 실행하면 변수를 원하는 값으로 설정할 수 있어요.
• Conditional : 분기점을 만들어서 조건에 따라 A 또는 B를 실행하는 액션이에요.
• Scroll to : 현재 프레임의 특정 지점까지 스크롤해서 이동하는 액션이에요.
• Open link : 특정 URL을 여는 액션이에요.
• Open overlay : 현재 프로토타입 화면에 라이트박스와 프레임을 보여주는 액션이에요. 다이얼로그나 바텀시트를 프로토타입에서 보여줄 때 자주 사용해요.
• Swap overlay : 라이트박스를 유지한 채 다른 프레임으로 교체하는 액션이에요.
• Close overlay : 라이트박스을 닫는 액션이에요.

 

(3) 애니메이션 : 트리거를 통해 액션을 실행할 때, 어떻게 실행할 건지를 뜻한다. 즉, 인터랙션의 형태.

 

피그마 홈페이지 참고 ↓

https://help.figma.com/hc/en-us/articles/360040522373-Prototype-animations#Dissolve

 

 

 

---

 

피그마 활용 강의도 모두 마무리했다!

머리에 지식이 차곡차곡 쌓이는 느낌이다 :)