피그마 프로토타이핑과 디자인 핸드오프 알아보기

[사전캠프_9/11]

• 피그마 5-6.~5-11. 강의 이수

​

​

피그마 5주차 강의 학습 내용

​

​

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

​

• 프로토타입
  • Lo-Fi(Low-fidelity) : 낮은 단계의 프로토타입으로, 전체적인 흐름을 빠르게 맞춰볼 수 있는 수준. 와이어프레임도 낮은 단계의 프로토타입으로 볼 수 있음
  • Hi-Fi(High-fidelity) : 높은 단계의 프로토타입으로, 실제 제품과 거의 같거나 유사한 수준

>> 프로토타입을 만들거나 프로토 타입을 사용해 테스트 하는 것을 프로토타이핑(Prototyp-ing)이라고 함

​

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

​

• 피그마의 프로토타입
  • 장점
    • 화면들을 드래그하여 이어주면 되므로 직관적이다.
    • 빠르게 만들어 기능을 테스트할 수 있다.
  • 단점
    • 프로토타입 전문 툴에 비해 기능이 부족해 실제 제품처럼 동작하는걸 만들기 어렵다.
    • 기능이 제한적이라 정교한 프로토타입을 만드는데 비효율적이다.

​

​

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

​

• 오버플로우(Overflow)
  • 프레임 밖으로 컨텐츠가 넘어가는 것을 오버플로우(Overflow)라고 부름
  • 오버플로우가 발생하면 프레임 밖으로 넘어간 컨텐츠를 스크롤로 보여줄 수 있음
    • 즉, 스크롤이 되게 하려면 프레임보다 컨텐츠가 더 길어서 넘쳐야 한다.(오버플로우가 되어야 스크롤이 된다.)

​

• 스크롤 컨테이너
  • 오버플로우가 생긴 프레임을 스크롤로 만들어주는 기능
  • 스크롤되어야하는 컨텐츠와 스크롤을 적용할 컨테이너가 있어야 한다.
  • 스크롤 방식
    • No scrolling : 스크롤하지 않는 기본 값
    • Horizontal : 가로 방향 스크롤
    • Vertical : 세로 방향 스크롤(일반적)
    • Both directions : 가로, 세로 모두 스크롤

​

​

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

​

• 트리거(Trigger)

• • 프로토타입의 플로우를 실행하는 조건
• 액션(Action)
  • 트리거로 인해 만들어지는 결과
• 애니메이션(Animation)
  • 트리거를 통해 액션이 실행될 때 어떻게 실행되는지

>> ex) 버튼을 누르면(트리거), 색상이 천천히(애니메이션), 바뀐다(액션)

​

• 트리거의 종류
  • On click(tap) : 클릭했을 때 실행
  • On drag : 드래그했을 때 실행
  • While hovering : 커서/마우스가 영역 위에 올라가 있는 동안 계속 액션 실행
  • While pressing : 커서/마우스로 영역을 누르고 있는 동안 계속 액션 실행
  • Key/Gamepad : 특정 키를 눌렀을 때 액션 실행
  • Mouse enter : 커서/마우스가 영역 위에 올라가면 액션 실행
  • Mouse leave : 커서/마우스가 영역을 벗어나면 액션 실행
  • Mouse dowm : 커서/마우스가 영역을 누르면 액션 실행
  • Mouse up : 커서/마우스가 영역을 눌렀다 떼면 액션 실행
  • After delay : 일정 시간이 지난 후에 액션 실행

​

• 액션의 종류
  • Navigate to : 페이지를 이동
  • Change to : 컴포넌트의 다른 배리언츠로 변경(ex. 버튼을 누르면 버튼을 pressed 상태로 바꿔줘)
  • Back : 직전 화면으로 이동
  • Set variable : 변수를 특정 값으로 설정
  • Set variable mode : 변수의 특정 모드로 설정
  • Conditional : 분기점을 만들어 조건에 따라 A 또는 B를 실행하는 액션
  • Scroll to : 현재 프레임의 특정 지점까지 스크롤해서 이동
  • Open link : 특정 URL을 여는 액션(피그마 안의 특정 영역 또는 외부 링크)
  • Open overlay : 현재 프로토타입 화면에 다른 프레임을 위에 겹쳐서 보여줌
  • Swap overlay : 라이트박스를 유지한 채 다른 프레임으로 교체
  • Close overlay : 라이트박스를 닫는 액션

​

• 애니메이션 종류
  • Instant : 별도의 애니메이션 없이 즉각 실행
  • Dissolve : 천천히 흐릿해지며 화면 전환
  • Smart animate : 이름이 같은 프레임들이 자연스럽게 움직이도록 만듬
    • 작동하려면 레이어 이름과 구조가 동일해야 한다.
    • 이름이 같은 요소가 있다면, 화면을 이동할 때 그 요소의 변화를 자연스럽게 만들어 주는 기능
    • 크기 / 위치 / 투명도 / 회전 / 배경색 변화 가능
  • Move in/out : 현재 화면 위에 다음 화면을 덮거나 현재 화면이 벗겨지듯 전환
  • Push : 현재 화면을 지정한 방향으로 밀면서 등장
  • Slide in/out : 현재 화면을 지정한 방향으로 밀어 사라지게 하면서 등장(일반적)

​

​

5-9. 디자인 핸드오프

​

• 핸드오프
  • '손을 떠나다'라는 뜻으로, 개발자에게 전달하기 위해 디자인 사양을 정리한 문서

 

• 핸드오프 작성 시 지켜야할 원칙
  • 통일된 구성
    • 일관된 구성과 목차 순서로 설명
  • 최대한 자세하게
    • 아무것도 모르는 사람이 보더라도 어떤 디자인, 목적인지 이해하기 쉽도록 작성
  • 쉬운 언어로
    • 디자이너만 아는 표현이 아닌 개발자, 기획자도 이해할 수 있는 표현 사용

​

• 핸드오프의 구성
  • 디자인의 전체적인 구조
  • 각 프레임의 크기 및 길이
  • 각 프레임의 여백 및 간격
  • 사용된 폰트 및 컬러 스타일 등

​

• 핸드오프 피그마 플러그인
  • https://www.figma.com/community/plugin/1177722582033208360/designdoc-spectral-measures-annotations-and-handoff
  • 사용하게 되면 자동으로 정보들이 만들어지게 된다.

• • 이렇게 문서까지 필요 없고 간단히 표시를 원한다면 Measure로 원하는 곳을 지정하면 된다.

 

​

​

5-10. 디자인 공유하기

​

페이지를 나눠 정리하여 공유한다.

​

​

[회고]

프로토타이핑을 통해 물리적으로 움직이는 화면을 만들어보니, 실제 앱과 한 걸음 더 가까워진 느낌이었다.

협업을 위해 디자인과 프로토타입을 마친 이후에 실무에서 어떻게 공유하는지와 소통하는 방법도 알게 되었다.

피그마 기초 강의를 끝까지 수강하였는데, 기초이자 계속해서 상기시켜야 할 뼈대같은 내용이라 정리해둔 이 내용들을 계속해서 꺼내볼 것 같다.

이전까지 피그마를 제대로 쓰지 않았다는 생각도 들고 기초 강의를 복습하며 더욱 피그마를 효율적으로 사용할 수 있도록 할 것이다.