[내배캠,2주차]UX/UI디자인툴 - 피그마 프로토타이핑 작업 (기본/심화)

✳️ UX/UI 입문 강의 4차 요약정리

• 디자인툴에는 ①인터페이스 디자인 툴(피그마, 스케치(MacOS기반), XD), ②그래픽 디자인 툴(포토샵, 일러스트레이터), ③3D 그래픽 디자인 툴(블렌더, 시네마4D), ④모션 그래픽 디자인 툴(프리미어, 애프터이펙트)가 있다.

  • 비트맵과 벡터 방식
    • 비트맵 방식은 픽셀이 모여 만들어진 이미지를 비트맵 이미지라고 한다. 벡터보다 정교하게 이미지 표현이 가능하다는 장점과 픽셀이 많으면 용량이 커지고 이미지 크기를 편집하면 원본 이미지의 픽셀 수가 변해 손상이 생기는 단점이 있다.
    • 벡터 방식은 그래픽을 수학적인 함수 공식으로 표현한 것으로 이미지를 줄이거나 키워도 손상이 생기지 않는다는 점과 좌표가 적힌 텍스트 파일로 저장하기 때문에 용량이 매우 적다는 장점이 있고 섬세한 작업이 어려우며 복잡한 이미지를 벡터로 만들면 용량이 매우 커질 수 있고 사용하는 곳에 따라 호환성에 문제가 생길 수 있다는 단점이 있다.

• 인터페이스 디자인 툴의 공통기능은 벡터기반, Lo-fi 프로토타이핑, dev mode를 통한 그래픽이 있다. 이 중 인터페이스 디자인 툴의 최강자인 피그마는 클라우드 기반, 멀티 플랫폼 지원 등 인터넷이 가능한 곳에서 언제든지, 함께 작업이 가능하다.

• 프로토타이핑 툴은 테스트 및 공유용도로 사용하며 화면의 움직임이나 인터랙션을 구현할 수 있도록 도와주는 툴이다. 대표적으로 ①피그마, ②프로토파이, ③프레이머가 있다. 프로토타입이 중요한 이유는 서로 소통하는 인터랙션 과정에서 생기는 UX경험을 테스트하기 위해 제품을 사용하면서 반응을 주고 받는 것이다.

  • ①은 디자인과 동시에 프로토타입으로 만들 수 있지만 복잡한 애니메이션 구현은 어려워 단순한 동작을 시연할 때 사용하기 좋다. ②은 코딩없이 실제 제품과 비슷한 Hi-fi수준의 포로토타입을 만들 수 있고 다양한 애니메이션과 인터랙션을 구현하고 싶은 경우 사용하기 좋다. ③은 코드기반으로 Hi-fi수준의 프로토타입을 구현할 수 있고 디자인/프로토타입/코드까지 작업할 수 있으며 재사용성과 CMS기능이 있어 실제 제품으로 배포까지 가능하다.

✳️ 프로토타이핑 작업 - 1. 기본버전

• 장바구니 페이지에서 '햄버거 메뉴'를 클릭하면 '전체메뉴'로 이동
  ➡︎ 클릭 시 연결한 프레임으로 이동
  
  
• 전체메뉴 페이지에서 '닫기' 버튼을 클릭하면 '이전 페이지'로 이동
  ➡︎ 클릭 시 'Back(직전에 왔던 화면을 기억하고 그 화면으로 보내줌)'
  
  
• 장바구니 페이지에서 '콘텐츠'를 클릭하면 '상세페이지'로 이동
  ➡︎ 클릭 시 연결한 프레임으로 이동
  
  
• 상페페이지에서 '뒤로가기'버튼을 클릭하면 '이전 페이지'로 이동
  ➡︎ 클릭 시 'Back(직전에 왔던 화면을 기억하고 그 화면으로 보내줌)'

✳️ 프로토타이핑 작업 - 2. 심화버전

• 장바구니 페이지에서 '햄버거 메뉴'를 클릭하면 '전체메뉴'로 이동
  ➡︎ 클릭 시 연결한 프레임으로 Dissolve(500ms)효과를 나타내며 이동(흐린화면으로 진해지면서 노출)
  
  
• 전체메뉴 페이지에서 '닫기' 버튼을 클릭하면 '이전 페이지'로 이동
  ➡︎ 클릭 시 'Back(직전에 왔던 화면을 기억하고 그 화면으로 보내줌)', 위와 효과 동일하게 나타남
  
  
• 장바구니 페이지에서 '콘텐츠'를 클릭하면 '상세페이지'로 이동
  ➡︎ 클릭 시 연결한 프레임으로 Move in ↑(새로운 화면이 밀어 들어오며 노출)효과를 나타내며 이동
  
  
• 상페페이지에서 '뒤로가기'버튼을 클릭하면 '이전 페이지'로 이동
  ➡︎ 클릭 시 'Back(직전에 왔던 화면을 기억하고 그 화면으로 보내줌)', 위와 효과 동일하게 나타남