[TIL] #25. 피그마로 디자인 & 프로토타이핑

2022.6.28. (화)

1. 오늘의 소감

• Figma! 정말 좋다! 이전에 포토샵, 일러스트레이터, 어도비XD 같은 그래픽툴을 사용해본 적은 있지만 ‘편하다'고 느끼기엔 무리가 있었다. 하지만 피그마는 정말 편하고 직관적으로 잘 만들어졌다는 게 느껴졌다. UI 배치도 사용자가 어떻게 하면 편하게 쓸 수 있는지 생각한 게 보였고, 메뉴 분류가 잘 되어있어서 필요한 기능을 직관적으로 찾을 수 있었다. 새삼 이래서 UI / UX 가 중요한 거구나 싶을 정도. 물론 내가 이전에 그래픽툴을 다뤘던 경험이 있어서 더 편한 걸 수도 있지만, 툴을 배운지 하루도 안되서 툴에 적응한 적은 처음이다! 역시 피그마가 2021년 기준 UI 디자인과 프로토타이핑 툴 분야에서 1등한 이유가 있다… 사용자들의 눈은 정확하다!
• 오늘은 짧은 피그마 튜토리얼 학습 후에, 페어분과 함께 사이트 하나를 클론하는 과제를 수행했다. 우리 페어가 클론한 사이트는 ‘텀블벅’ 모바일 웹 페이지. 처음엔 툴이 익숙치 않아서 한 페이지 만드는 것도 오래걸렸지만, 오기가 생겨서 최대한 똑같이 만들려고 툴을 계속 쓰다보니 꽤 속도가 붙었다. 오랜만에 코딩이 아닌 디자인을 하다보니까 재미있었던 것도 있고🥰.
• 👉 페어님과 같이 만든 피그마 디자인
• 👉 페어님과 같이 만든 피그마 프로토타입

2. 학습한 키워드

• 와이어프레임, 프로토타입, 피그마

3. 키워드를 바탕으로 학습 내용 설명해보기

• 와이어프레임은 제품 기획 단계에서 간략한 선과 도형으로 화면 구조를 설계하는 것이다.
• 와이어프레임은 피델리티(품질 수준)에 따라 3가지로 나뉜다.
  • Lo-Fi 는 손으로 빠르게 그린 수준의 간단한 와이어프레임이다. 빠르게 작성할 수 있고 수정 및 의견 반영이 쉽다는 장점이 있다.
  • Mid-Fi는 Lo-Fi 보다 좀 더 다듬은 수준의 와이어프레임이다. 디자인이 좀 더 된 상태이기 때문에 해당 페이지가 어떻게 작동할 지 예상 가능하다.
  • Hi-Fi는 완성본에 가깝게 만든 와이어프레임이다. 여러 의견을 빨리 반영하여 화면 구조를 설계한다는 와이어프레임의 목적에 맞지 않아 쓰이지 않는다.
• 와이어프레임은 주로 Lo-Fi 와 Mid-Fi를 사용한다.
• 와이어프레임은 정적이다. 화면 구조 설계만 하면 된다. 프로토타이핑 없음!
• 프로토타입은 개발 전 단계에서 사용성 테스트를 할 목적으로 만든 UI 상호작용 시뮬레이션이다. 즉, 상호작용이 가능하므로 실제 제품과 매우 비슷한 형태이다.
• 프로토타입도 피델리티(품질 수준)에 따라 3가지로 나뉜다.
  • Lo-Fi 는 간단한 상호작용과 페이지 이동만 가능한 수준의 프로토타입이다. 유저 플로우 상에서 불필요한 페이지 혹은 기능이 없는지 빠르게 검토가 가능하나, 사용성 테스트에 적합하지 않아 거의 만들지 않는다.
  • Mid-Fi 는 사용성 테스트를 시작할 수 있는 수준의 프로토타입이다. Hi-Fi 보다는 품이 덜 든다.
  • Hi-Fi 는 디자인과 대부분의 주요 상호작용을 구현한 실제 제품과 비슷한 수준의 프로토타입이다. 확실한 사용성 테스트가 가능하다. 실제 개발 전에 UI / UX 를 체크할 수 있어 비용 절감 효과가 있다.
• 프로토타입은 상호작용을 구현하기 때문에 동적이다.
• 와이어프레임과 프로토타입의 차이
  • 와이어프레임은 기획 단계에서 작성하고, 프로토타입은 개발 직전 단계에서 작성한다.
  • 와이어프레임의 목적은 화면 구조 설계이고, 프로토타입의 목적은 UI 상호작용 시뮬레이션을 통한 사용성 테스트다.
  • 따라서 와이어프레임은 정적(화면)이고, 프로토타입은 동적(상호작용)이다.
  • 와이어프레임은 Lo-Fi 와 Mid-Fi 수준으로 많이 작성한다. 빠르게 작성하여 의견을 받고 쉽게 수정할 수 있기 때문이다.
  • 프로토타입은 Mid-Fi 와 Hi-fi 수준으로 많이 작성한다. 화면의 디자인과 UI가 실제 제품과 일치해야 더 정확한 사용성 테스트 결과를 얻을 수 있기 때문이다.
• 피그마에 대한 내용은 따로 자세히 기록해두었으니 생략하고, 피그마의 장점만 정리하겠다.
• 피그마의 장점
  • 실시간 협업 가능
  • 다양한 환경 지원 ← 웹 브라우저 기반 프로그램이다!
  • 자동 저장 & 버전 관리 가능(history)
  • 다양한 무료 폰트 지원 ← 폰트가 없어 깨지는 현상이 없다!
  • 오토 레이아웃 기능 ← 마치 CSS flexbox 처럼 유연한 배치 가능!
  • 프로토타이핑 ← 디자인과 프로토타이핑을 한 번에!
  ⇒ 무엇보다 무료다! 물론 무료 계정일 때 몇 가지 제한 사항이 있지만 다른 툴에 비해 지원 기능이 훌륭하다!