[피그마 강의] 5주차: 프로토타입, 프로토타이핑, 스크롤 컨테이너, 오버플로우, 트리거, 액션, 핸드오프 이해하기

 

5-6) 프로토타입과 프로토타이핑

 

프로토타입이란?

• 원래의 뜻은 시제품이며, 디지털 제품에선 실제 제품을 만들지 않고 아이디어를 테스트해볼 수 있는 것을 뜻한다. 
• 구현하는 정도에 따라 낮은 단계와 높은 단계로 나눌 수 있다. 
  • Lo-fi(Low-fidelity): 낮은 단계의 프로토타입으로, 전체적인 흐름을 빠르게 맞춰 볼 수 있는 수준
    와이어프레임도 이에 해당한다. 
  • Hi-fi(High-fidelity): 높은 단계의 프로토타입으로, 실제 제품과 거의 같거나 유사한 수준으로 만듦
• 프로토타입을 만들거나 프로토타입을 사용해 테스트하는 것을 프로토타이핑(Prototyp-ing)이라고 한다. 

 

프로토타입을 만드는 이유

• 실제 제품을 만들지 않고 아이디어를 검증해볼 수 있다. 
• 팀 구성원들과 시각적인 결과물로 소통할 수 있다. 
• 부족하거나 놓친 부분을 확인할 수 있다. 

 

피그마의 프로토타입 기능

• 프로토타입은 피그마의 고유 기능은 아니다. 
• 프로토타이핑이 가능한 디자인 툴: 프로토파이, 프레이머 등
• 장점: 직관적이고, 빠르게 만들 수 있다. 
  단점: 실제 제품처럼 동작하는 걸 만들기 어렵고, 효율성을 떨어뜨린다. (Blue Spaghetti.... )

💡아직은 너무 복잡하게 연결하지 말고, 화면의 흐름 정도만 만든다고 생각하기!

 

 

피그마 프로토타입의 구성

• 우측 디자인 패널의 프로토타입을 누르면 모드가 변경된다. 
• 프레임을 이동할 수 있지만, 내용을 수정하거나 편집하려면 다시 디자인 모드로 전환해야 한다. 

출처: 체계적으로 배우는 피그마 기초 완전 정복 (5)

• 프로토타입은 3가지 구성요소로 이루어진다. 
  • 핫스팟: 프로토타입의 시작 지점, 핫스팟을 누른 채 종착점에 끌어다 놓으면 선으로 연결된다. 핫스팟은 프레임의 상하좌우 모서리 각 중앙 지점에서 끌어올 수 있다. 
  • 커넥션: 화면을 서로 이어주는 연결선, 핫스팟에서 종착점으로 방향이 정해져 있다. 
  • 종착점: 도착하는 지점, 핫스팟과 커넥션으로 이어져 있다. 

 

피그마 프로토타입 모드

• 피그마에서는 2가지 방식으로 프로토타입을 실행해볼 수 있다. 
  • 프리뷰 모드 Preview Mode: 디자인하는 중간에 작업 중인 화면과 흐름을 빠르게 확인하고 논의할 때 사용. 프로토타입 모드가 아니라 디자인 중에도 바로 실행해 볼 수 있음
  • 프레젠테이션 모드 Presentation Mode: 프로토타입을 공유할 때 사용하거나 프레젠테이션 형태로 만들 수 있음

 

프로토타입 실행하는 방법

• 프리뷰 모드 실행하기
  • 확인하고 싶은 프레임 선택 -> shift + space 
• 프레젠테이션 모드 실행하기
  • 확인하고 싶은 프레임 선택 -> 우측 패널 위 재생 아이콘

 

5-7) 스크롤 컨테이너와 오버플로우

 

오버플로우란?

• 디자인하다 보면 프레임 밖으로 컨텐츠가 넘어가는 경우가 있다. 이때, 프레임 밖으로 컨텐츠가 넘어가는 것을 오버플로우라고 한다. 
• 프레임에 오버플로우가 발생하면, 프레임 밖으로 넘어간 콘텐츠를 스크롤로 보여줄 수 있다. 즉, 스크롤이 되게 하려면 프레임보다 콘텐츠가 더 길어서 넘쳐야 한다.

💡결론: 오버플로우가 되지 않으면 스크롤이 생기지 않는다. 

 

 

스크롤 컨테이너란?

• 오버플로우가 생긴 프레임을 스크롤로 만들어주는 기본적인 프로토타입 기능이다. 
• 스크롤을 만드려면 실제로 스크롤되어야 하는 콘텐츠와 스크롤 속성을 적용할 컨테이가 있어야 한다. 

출처: 체계적으로 배우는 피그마 기초 완전 정복 (5)

• 스크롤 방식
  
  • No scrolling: 스크롤 하지 않음. 기본 값
  • Horizontal: 내부의 콘텐츠들이 가로로 넘칠 때, 가로 방향으로 스크롤 가능 
  • Vertical: 내부의 콘텐츠들이 세로로 넘칠 때, 세로 방향으로 스크롤 가능
  • Both directions: 가로 및 세로 방향으로 모두 스크롤 가능

 

스크롤 컨테이너 만들기

• 메인 화면 선택 -> 프로토타입 모드로 변환
• 스크롤 방식을 Vertical 세로를 선택
• 프리뷰 실행해보기

 

5-8) 화면 디자인 연결하기

 

트리거와 액션

• 플로우의 구성요소
  • 프로토타입의 흐름 하나하나는 플로우라고 한다. (핫스팟을 드래그-> 종착점과 잇기 = 커넥션이 만들어지고 자동으로 플로우 패널이 열린다.)

출처: 체계적으로 배우는 피그마 기초 완전 정복 (5)

• • 플로우는 트리거와 애니메이션, 액션으로 구성된다. 
    • 트리거: 액션을 시작하는 조건이나 이유, 계기. 사건이 발생했다는 뜻에서 이벤트라고 부를 수 있음
    • 액션: 트리거로 인해 만들어지는 결과
    • 애니메이션: 트리거를 통해 액션을 실행할 때, 어떻게 실행할 건지를 뜻함. 즉, 인터랙션 형태를 정하게 됨

💡 프로토타입을 설계할 땐 ‘~하면, ~하게 ~한다’ 라는 문장으로 기억하면 조금 더 쉽다!
      예) 버튼을 누르면(트리거), 색상이 천천히(애니메이션) 바뀐다(액션)

 

 

트리거 종류

• 트리거는 프로토타입의 플로우를 실행하는 조건이다.
• 어떤 이벤트(사건)가 발생하면 실행할 건지를 설정한다. 
• 피그마 프로토타입 트리거는 현재 10가지가 있다. 
  • On click
  • On drag
  • While hovering
  • While pressing
  • Key/Gamedpad
  • Mouse enter
  • Mouse leave
  • Mouse down: 누른 순간 실행
  • Mouse up: 눌렀다 떼면 실행
  • After delay

 

액션 종류

• 액션은 프로토타입의 플로우의 목적지이자 트리거로 인해 만들어지는 결과이다. 
• 어떤 이벤트가 발생하면 어떻게 되는지를 설정한다. 
• 피그마 프로토타입 액션은 현재 11가지가 있다. 
  • Navigate to
  • Change to
  • Back
  • Set variable
  • Set variable mode
  • Conditional
  • Scrollto
  • Open link
  • Open oeverlay
  • Swap oeverlay
  • Close oeverlay

 

프로토타입 애니메이션

• 트리거는 시작하는 조건, 액션은 실행하는 내용이다. 
• 애니메이션은 액션을 어떻게 실행할지를 결정한다. 
  • 예시: 버튼을 누르면, 다음 화면이 넘어간다. -> 버튼을 누르면, 천천히 오른쪽에서 왼쪽으로 화면이 밀려 들어온다. 
  • 화면의 전환을 어떻게 처리할 건지도 정할 수 있다. 
  • 피그마 애니메이션 종류
  • Instant: 별다른 애니메이션 없음
  • Dissolve: 흐릿해지면서 바뀜
  • Smart animate
  • Move in/out: 현재 화면 위에 다음 화면을 덮거나 벗겨지는 식
  • Push: 현재 화면을 밀면서 등장
  • Slide in/out: 밀면서 사라짐

 

스마트 애니메이트

• 가장 중요한 것
  • 움직일 요소의 이름이 같은지
  • 레이어 구조가 동일한지
• 스마트 애니메이트로 조작할 수 있는 속성: 크기 , 위치, 투명도, 회전, 배경색
• 스마트 애니메이트 활용하기

 

상세페이지 이동하기

• home 화면 -> 메뉴5 선택
• 메뉴5 핫스팟 드래그 -> detail 화면에 연결
• 트리거: On Tab, 액션 Navigate to, 애니메이션 Smart animate로 적용

 

메뉴 이동 애니메이션 만들기

• favorite 화면의 Bottom tab -> Indicator 안에 Active 프레임 선택 -> 프레임 한 칸 앞으로 가져오기
• setting  화면의 Active 프레임을 두 칸 앞으로 가져오기
• home 화면 핫스팟 드래그 -> favorite 화면에 연결 (smart animate 적용)
• favorite 화면 핫스팟 드래그 -> setting 화면에 연결 (smart animate 적용)

 

리스트 삭제하기

• 홈 화면 하나 더 복사
• 복사한 화면의 아이템2 지우기
• remove 아이콘에 핫스팟 드래스 -> 복사한 화면에 연결 (smart animate 적용)

 

5-9) 디자인 핸드오프

 

• 디자인을 제대로 전달하려면 어떤 의도로 디자인했는지, 구체적인 규격이나 속성은 어떻게 해야 하는지 개발자와 소통하는 문서가 필요하다.

 

핸드오프란?

• 핸드오프는 개발자에게 전달하기 위해 디자인 사양을 정리한 문서이며, 핸드오프를 자세하게 작성해야 내가 의도한 디자인대로 실제 개발이 가능하다. 
• 핸드오프 작성 시 지켜야할 원칙
  • 통일된 구성
  • 퇴대한 자세하게
  • 쉬운 언어로

 

핸드오프의 구성 

• 핸드오프는 실제 개발에 필요한 가이드라인이다 보니, 구성이 어느정도 정해져 있다. 

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

 

핸드오프를 자동으로 만들어주는 플러그인

1. 핸드오프 필요한 디자인 프레임 선택
2. 플러그인 선택
3. Create spec 클릭
4. 시간이 지나면 버튼이 다시 초기화되고, 핸드오프가 완성됨

이런식으로 생성됨

💡 플러그인에 너무 의존하는 것은 지양하기!

 

 

5-10) 디자인 공유하기

 

• 작업을 보기 좋게 정리하고 디자인과 프로토타입을 공유하는 방법

 

디자인 정리하기

• 디자인이 담긴 페이지 이름을 '디자인'으로 변경
• 컴포넌트가 담긴 페이지의 이름을 'UI키트'로 변경
• 페이지 하나 추가 -> 이름을 '표지'로 변경
• 표지 페이지에 1920*1080 사이즈의 프레임 추가 -> '피그마 기초' 적기
• 프레임에 대고 마우스 오른쪽 버튼 -> Set as thumbnail 선택

 

공유하기

• 피그마 파일 링크 공유하기
  : 우측 상단의 Share 누르기 -> copy link 누르기
• 프로토타입 공유하기
  : 디자인 파일 우측 상단에 재생 버튼 누르기 -> share prototype 누르기 -> copy link 눌러서 링크 복사
• 특정 페이지나 프레임 공유하기
  : 공유하려는 페이지 or 프레임 대고 마우스 오른쪽 버튼 클릭 -> copy/paste as 에서 copy link to selection 누르기

 

5주차까지 완주! 남은 건 복습 뿐.......