피그마 이해하기 (5)

 피그마 이해하기 

1. 히어로 섹션
2. 앱 바 컴포넌트
3. 리스트 컴포넌트
4. 프로토타입
5. 오버플로우 & 스크롤 컨테이너
6. 프로토타입의 구성
7. 플로우
8. 핸드오프

 

 

 

 히어로 섹션 

▶ 히어로 섹션
     : 메인 화면의 가장 상단 영역(중요한 메세지를 전달하는 영역)

다양한 앱들의 히어로 섹션

 

 

 

 앱 바 컴포넌트 

▶ 앱 바 컴포넌트

     : 컴포넌트의 종류 중 네비게이션에 해당하는 컴포넌트

• 앱 화면 상단에 고정되어 현재 화면의 이름을 알려주면서, 이전 화면으로 돌아갈 수 있도록 함
• 현재 화면에서 할 수 있는 보조 기능을 제공하는 경우도 있음
• In 머티리얼 디자인 → 앱 바(App Bar)
  In ios → 네비게이션 바(Nevigation Bar)
  * 디자인 시스템마다 부르는 이름이 모두 다름

▶ 앱 바 컴포넌트의 구조

앱 바 컴포넌트 구조

• 타이틀 : 현재 화면의 제목을 보여주는 텍스트 부분
• 힌트 텍스트 : 현재 화면에 보조적으로 필요한 정보를 적어줌
• 리딩 엘리먼트 : (일반적으로) 뒤로가기 또는 닫기 아이콘을 사용하는 영역
• 트레일링 엘리먼트 : 설정이나 더보기 등 현재 화면과 관련된 보조 기능들을 제공할 수 있는 영역

 

 

 

 리스트 컴포넌트 

▶ 리스트 컴포넌트

     : 컴포넌트의 종류 중 컨테이너에 해당하는 컴포넌트
       동일한 형태의 정보 덩어리를 반복적인 패턴으로 보여줄 때 사용

       ex) 상품 목록, 가게 메뉴 등

 

▶ 리스트 컴포넌트의 구조

리스트 컴포넌트 구조

• 라벨/레이블 : 리스트의 제목이자 리스트의 이름
• 디스크립션 : 리스트의 보조 설명
• 리딩 엘리먼트 : 리스트 앞쪽에 있는 엘리먼트 → 아이콘이나 프로필 이미지 등
• 트레일링 엘리먼트 : 텍스트보다 뒷쪽에 있는 엘리먼트

 

 

 

 프로토타입 

▶ 프로토타입

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

1. Lo-fi (Low-fidelity)
   : 낮은 단계의 프로토타입, 전체적인 흐름을 빠르게 맞춰볼 수 있는 수준
2. Hi-fi (High-fidelity)
   : 높은 단계의 프로토타입, 실제 제품과 거의 같거나 유사한 수준

• 프로토타입을 만들거나 이를 사용해 테스트하는 것을 프로토타이핑이라고 함

 

 

 

 오버플로우 & 스크롤 컨테이너 

▶ 오버플로우
     : 프레임 밖으로 컨텐츠가 넘어가는 것
      (프레임 밖으로 넘어간 컨텐츠는 스크롤로 보여줄 수 있음)

       → 스크롤이 되게 하려면 프레임보다 컨텐츠가 더 길어서 넘쳐야 함!!

           (= 오버플로우가 되지 않으면 스크롤은 생성 X)

 

▶ 스크롤 컨테이너

     : 오버플로우가 생긴 프레임을 스크롤로 만들어주는 기본적인 프로토타입 기능

• 실제로 스크롤 되어야하는 컨텐츠
• 스크롤 속성을 적용할 컨테이너
  
  → 이 두 가지가 반드시 필요함

 

 

 

 프로토타입의 구성 

▶ 프로토타입 구성

1. 핫스팟 : 사용자의 인터렉션이 시작되는 위치
2. 커넥션 : 화면을 서로 이어주는 연결선 
3. 데스티네이션 : 종착점

 

 

 

 플로우 

▶ 플로우

     : 프로토타입의 흐름 하나하나

1. 트리거
2. 애니메이션
3. 액션

 

▶ 트리거

     : 사용자의 행동이나 조건에 따라 인터랙션을 시작하게 만드는 계기

On Click	사용자가 클릭했을 때	버튼을 누르면 페이지 전환
While Hovering	마우스를 올려놓았을 때	툴팁 표시
While Pressing	마우스를 누르고 있을 때	지정한 액션 발
On Drag	드래그했을 때	카드 스와이프
After Delay	일정 시간 후 자동 실행	로딩 후 자동 이동
While Pressing	누르고 있는 동안	누르는 동안 컬러 변화
Key/Gamepad	특정 키 입력 시	키보드 방향키로 이동
Mouse Enter / Leave	마우스가 영역에 들어오거나 나갈 때	메뉴 오픈/닫힘
Mouse Down	마우스가 영역을 누르면	액션 실행
Mouse Up	마우스가 영역을 눌렀다 뗄 때	액션 실행

 

 

▶ 액션

     : 트리거로 인해 만들어지는 결과

액션 명설명사용 조건 / 특이사항

	설명	사용조건 / 특이사항
Navigate to	다른 페이지(프레임)로 이동	일반적인 화면 전환
Change to	컴포넌트의 다른 Variant로 변경	컴포넌트에 트리거 적용되어 있어야 함
Back	직전 화면으로 돌아가기	뒤로가기 버튼에 주로 사용
Set variable	변수를 특정 값으로 설정	-
Set variable mode	변수를 특정 "모드"로 설정	-
Conditional	조건에 따라 실행 분기 (if/else)	-
Scroll to	현재 프레임 내 특정 위치로 스크롤	인페이지 네비게이션 시 유용
Open link	외부 URL 또는 다른 프레임 링크 열기	새 창 또는 현재 탭 선택 가능
Open overlay	현재 화면 위에 팝업/모달 띄우기	라이트박스, 바텀시트 등 UI 구성 시 사용
Swap overlay	기존 Overlay 상태 유지한 채 다른 Overlay로 교체	오버레이 간 전환
Close overlay	현재 띄워진 오버레이 닫기	X 버튼, 확인 버튼 등에 주로 사용

 

 

▶ 애니메이션

     : 트리거를 통해 액션을 실행할 때, 어떻게 실행할 것인지를 의미(인터랙션 형태 지정)

Instant	별도의 애니메이션 없이 즉각실행
Dissolve	천천히 흐릿해지면서 화면전환
Smart animate	이름이 같은 프레임들이 자연스럽게 움직이도록 ex) 페이지 이동 시 하단의 탭은 그대로, 탭의 메뉴만 자연스럽게 전환
Move In / Out	현재 화면 위에 다음 화면을 덮거나 현재 화면이 벗겨지듯 전환
Slide In / Out	현재 화면을 지정한 방향으로 밀어 사라지게 하면서 등장

 

 

▶ 스마트 애니메이트

     : 이름이 같은 요소가 있다면, 화면을 이동할 때 그 요소의 변화를 자연스럽게 만들어주는 기능

        * 피그마 프로토타입에서 가장 중요한 애니메이션 기능

• 반드시 작동하는 요소의 이름이 같아야함
• 프레임의 레이어 구조가 통일되어 있지 않거나, 구조가 다르면 정상적인 작동 X

1. 움직일 요소의 이름이 같은지
2. 레이어 구조가 동일한지

 

▶ 스마트 애니메이트로 조작할 수 있는 속성

1. 크기
2. 위치
3. 투명도
4. 회전
5. 배경색

 

▶ 크기

     : 크기를 다르게 하면 커지게 하거나 작아지게 할 수 있음

크기

 

▶ 위치

     : 위치를 다르게 하면 요소를 자연스럽게 이동시킬 수 있음

위치

 

▶ 투명도

     : 레이어나 색상의 투명도를 다르게 하면 자연스럽게 사라지거나 나타나게 할 수 있음

투명도

 

▶ 회전

     : 요소를 자연스럽게 회전하게 만들 수 있음

회전

 

▶ 배경색

     : 요소의 배경색을 칠하거나 다른 색으로 자연스럽게 변경 가능

배경색

 

 

 

 핸드오프 

▶ 핸드오프

     : '손을 떠나다' 라는 의미, 개발자에게 전달하기 위해 디자인 사양을 정리한 문서

 

▶ 핸드오프 작성 시 지켜야 할 원칙

1. 통일된 구성
2. 최대한 자세하게
3. 쉬운 언어로

▶ 핸드오프의 구성

1. 디자인의 전체적인 구조
2. 각 프레임의 크기 및 길이
3. 각 프레임의 여백 및 간격
4. 사용된 폰트 및 컬러 스타일