[강의] 피그마 - UI 디자인 환경, 컴포넌트, 화면, 프로토타입, 애니메이션, 핸드오프

 

아 근데 뭔가 UI디자인으로 확 가니까 오히려 SQL 강의 듣는 거 보다 더 재미없는 느낌..🤔

 

 

 

 

디자인 시스템이 필요한 이유

• 사용자 경험의 품질을 안정적으로 높이기 위해
  반복되는 UI를 표준화하면 실수와 편차가 줄어들고, 사용자에게 일관된 경험을 제공할 수 있습니다.
• 디자인·개발 효율을 극대화하기 위해
  매번 새로 고민하고 만들 필요 없이 검증된 UI를 재사용함으로써, 문제 정의와 개선이라는 더 본질적인 작업에 시간을 쓸 수 있습니다.
• 팀 간 공통 언어를 만들기 위해
  디자이너와 개발자가 동일한 UI 개념과 사용 방식을 공유하면, 커뮤니케이션 비용이 줄고 협업 속도가 빨라집니다.

즉, 단순히 UI를 재사용하는 것이 목적이 아니라,
사람이 바뀌어도, 속도가 빨라져도, 품질이 흔들리지 않는 프로덕트 제작 구조를 만드는 것이 궁극적인 목적

 

UI키트는 재료 목록만 있는 상태
디자인 시스템은 재료 목록과 다듬는 방법, 조리법까지 상세하게 나와 있는 요리책
정리하자면, 디자인 시스템은 UI 자체뿐만 아니라 UI의 규격과 스펙, 사용 사례, 주의 사항 등이 총망라된 종합적인 제품 가이드라인

- 서로 합이 잘 맞고, 또 팀 인원이 적다면 오히려 완벽한 문서를 갖추는 게 비효율적일 수 있어요.
- 그럴 때는 UI키트 수준만 유지한 채 빠르게 만드는 게 더 효율적일 수 있어요

 

---

 

UI 디자인

 

 

• 액션

Button - Shopify Polaris

 

 

 

• 버튼

https://m3.material.io/components/text-fields/guidelines

 

 

 

 

• 인포메이션

https://m3.material.io/components/snackbar/guidelines

 

 

 

• 컨테이너

https://m3.material.io/components/cards/guidelines

 

 

 

 

• 네비게이션

https://m3.material.io/components/navigation-bar/guidelines

 

 

 

 

• 컨트롤 

https://m3.material.io/components/checkbox/guidelines

 

 

 

• 컨트롤이 인풋이 될 때도 있음. 이름이 아니라 어떤 목적을 가지는지를 알면 됨.
• 모든 UI 디자인에 이름이 있는 게 아님. 굳이 UI의 이름을 몰라도 개발자에게 이렇게 이렇게 하고 싶다 말 해도 된다.

 

---

 

 

 

 

 

오 여기 버튼 안에 입력되는 텍스트는 '텍스트' 라고 부르는 게 아니라 (텍스트는 사용자가 입력하는 무언가를 텍스트라고 하기 때문에)

버튼 내의 저 글자는 버튼 '레이블(라벨)' 이라고 한다고 함!

 

 

---

 

 

버튼 컴포넌트

 

 

 

버튼 만들기

 버튼의 라벨이 될 글자 작성

→ shift+A 로 오토레이아웃 해주기

→ 스타일 적용 (폰트, 배경색, 라벨색) - 이전에 만든 텍스트스타일, 컬러스타일을 활용함 

→ 상하좌우 패딩 적용

→ 필요한 경우 곡률 적용

→ 우측 패널 상단 프레임 이름 옆 클릭 또는 마우스 우측 클릭 후 Create component

→ 버튼으로 이름 바꿔주기

 

 

이 버튼 하나 만드는 데도 다 뭔가 규칙이 있었군..!

 

 

---

 

 

 

 

 

텍스트 필드 컴포넌트

텍스트 필드 및 양식 디자인 잘 하기 (1)

 

 

 

---

 

컨트롤 요소

체크박스

라디오

 

 

라디오 vs 체크박스 뭐가 좋을까?

[미디클] 라디오 vs 체크박스 뭐가 좋을까? EP.1

 

 

---

 

 

UI의 기능주의적 관점

• 분명히 버튼마다 모양도, 색상도 다른데 우리는 같은 버튼으로 인식해요.
• 우리는 버튼의 생김새가 아니라 버튼이 하는 일을 기준으로 생각하기 때문이에요.
• 회사와 팀마다 디자인은 모두 다 다를 거예요. 어딘가는 끝을 둥글게 하고, 어딘가는 끝을 각지게 하거나 테두리 선을 넣습니다.
• 이때, 만약 생김새로만 UI를 구분하면 조금이라도 다르게 생긴 UI가 나오는 순간 그때까지 알고 있던 기준점이 모두 사라져요.
• 따라서 UI를 비교하고 공부하실 때는 형태가 아니라 반드시 UI의 목적, UI의 기능에 초점을 두고 공부해야 합니다!

 

 

---

 

화면 

 

 

 

빈약한 화면이지만 ㅎㅎㅎ 그동안 실습하며 만들었던 컴포넌트로 화면을 구성할 수 있었다!

실습하면서 만드는 게 지루했는데 그걸 이렇게 써 먹는 거였다니;;;

 

 

호오.. 이렇게 뿌듯할 수가.

그동안 포토샵/PPT로 눈대중(?) 야매(?) 로 만들던 게 이렇게 딱딱 제 자리에 들어가다니 신기하다.

이걸 알았으면 덜 지루했을까..?😂 아니면 몰랐기에 더 뿌듯한 걸까?😂

 

---

프로토타입 

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

https://typefully.com/ridd_design/how-to-prototype-more-efficiently-using-0pOgfxA

 

• ▲ 개발로 3일 걸릴 거 프로토타입 만드는 데 7일 걸릴 수 있음.
  프로토타입만을 위한 툴이 아니기 때문에 화면의 흐름 정도만 만든다고 생각해야함

 

---

 

핸드오프

 

 

• 이런 플러그인도 있지만 실제로 전달해야하는 중요한 내용은 빠져있을 수 있고, (나의 성장에도 방해가 될 수 있고)
  반복/노가다성 작업에 활용해서 얼른 끝내버리고, 개발자와는 더 생산성 있는 이야기를 많이 하는 것이 좋다.  

 

디자인 핸드오프에서 지켜야 할 3가지

디자인 핸드오프에서 지켜야 할 3가지 | 요즘IT

 

 

 

---

 

*프레젠테이션 상태에서 링크로만 공유할 수 있음 (발표 자료 이렇게..?!)