9. 피그마로 아이콘 만들기 A to Z

1. 좋은 아이콘을 만드는 원칙

 

아이콘은 사용자에게 직관적으로 의미를 전달해주는 역할을 한다.

=> 사용자에게 큰 도움이 되는 중요한 역할을 한다!

 

-> 예시로 뒤로 가기 버튼을 보자면, 화살표의 유무가 큰 차이를 가져온다는 점을 알 수 있다.

 

디자이너는 프로토타입 MVP를 만들기 위해서 UI 디자인을 할 때 아이콘을 사용자에게 의미 전달이 잘 되고 쉽게 사용될 수 있도록 만들어야 한다.

 

아이콘 제작 원칙

 

1. 명확한 의미 전달

방법 1)  사용자 테스트

-> 사용자에게 이것이 의미 전달이 잘 되는지 파악해보아야 한다.

#이것은 아이콘뿐만 아니라, 디자인에서도 항상 엄두해두어야하는 부분이다.

방법 2) 업계에서 활용되는 디자인 참고하기

-> 안드로이드와 아이폰은 스마트폰 시장에서 영향력이 절대적이다.

=> 사용자들은 그들이 제공하는 아이콘과 사용자 경험에 익숙해져있다.

#참고하기 좋은 레퍼런스: Material Design, iOS Guideline

 

2. 일관된 스타일

-> 라인 스타일일지, 채워지는 스타일로 갈 것인지 등에 대한 일관성, 사이즈에 대한 일관성 등 일관성이 유지되어야 좋은 아이콘이라고 할 수 있다.

=> 아이콘 일관성이 떨어지면 사용자에게 시인성 부분에서 일관성이 떨어지고 이런 부분은 사용자가 오류를 범하게 할 수 있다.

 

피그마로 아이콘 만들기

-> Shape, Boolean, Pen 이 세가지 기능을 다음 챕터에서 다뤄보도록 하자!

 

---

2. Boolean 기능 활용하기

 

Union Selection

  ->  두 개의 오브젝트를 통합시킨다.

Subtract Selection

  -> 두 오브젝트 중 한 오브젝트를 오려낸다.

  -> 위에 있는 레이어가 아래에 있는 레이어를 잘라준다.

Intersect Selection

  -> 두 오브젝트의 공유된 영역만을 남겨둔다.

Exclude Selection

  -> 두 오브젝트의 공유된 영역을 지운다.

 

응용

 

---

3. 펜 툴로 라인 그리기

 

-> 라인이 끝나는 지점을 원형으로 마무리 하는 법

=> Advanced Stroke / Cap 을 Round 로 설정한다.

 

응용

 

---

4. Keyline 이해하기

 

-> Bad의 예시를 보면, 두 도형 모두 20x20 px으로 동일한 사이즈이지만, 원형은 각 모서리 부분이 비어있기 때문에 우측의 사각형이 좀 더 커보이는 것을 알 수 있다.

=> 즉, 사용자가 두 도형을 일관된 사이즈라고 느끼게 하기 위해서는 아이콘에 따라 사이즈 조정이 필요하다.

=> 이런 사이즈 조정을 위한 가이드라인으로 Keyline을 만들어주는 것이다.

 

-> 빨간 선이 Keyline이다.

=> Keyline에 맞춰 도형 사이즈를 조절하여 일관성을 느끼게 한다.

 

Keyline 제작

 

---

5. 아이콘 만들기

 

-> 미리 만들어둔 KeyLine 위에 예제 아이콘을 따라 만들어본다.

---

6. 해상도를 고려한 아이콘 Export하기

 

팀원들에게 아이콘을 전달해주기 위해 Export를 해야한다.

 

1. Export할 프레임 선택

2. 우측 패널의 Export 선택

-> Export 전에 프레임의 Fill은 지워야한다. (배경 투명을 위함)

3. 파일 형색 선택

 -> PNG : 투명한 부분을 투명하게 처리

 -> JPG : 투명한 부분을 하얗게 처리

 -> SVG : 벡터 파일로 전달 (원본 사이즈로만 저장할 수 있다)

4. Export

 -> 가장 많이 사용하는 PNG로 Export 해본다.

 => 원본 사이즈, 2배수로 2가지 파일이 저장된다.

 

펜툴로 만든 아이콘의 문제점

: SVG 파일의 크기를 조절할 경우 아이콘이 변한다 (선이 얇아진다)

-> 해결방법 : 아이콘 우측 클릭 후 outline stroke 기능 사용

=> 아이콘이 더이상 stroke 가 아니라, fill 로써 존재하게된다.