[UX/UI 디자인 입문]피그마 아이콘에 대하여

[UI_UX]/[디자이너 한발자국]

디자인정복 2025. 4. 23. 21:34

내일배움캠프 8일 차입니당~

오늘도 여러 가지를 배웠지만 그중에 하나인 아이콘을 다뤄 보려고 합니다!

본격적으로 아이콘을 만들어보기 전에 먼저 피그마에서 만들 간단한 아이콘에 대해서

정의해볼게요.

아이콘은 남녀노소, 동서양을 막론하여 제한 없이 누구나 일관된 의미를 전달할 수 있습니다.

또한 브랜드의 아이덴티티를 나타내기도 합니다. 예를 들어 맥도널드의 브랜드 이미지를 떠올리면

'M' 자의 아이콘을 떠올리게 되어 브랜드의 성격, 이미지, 의미를 반영한 아이콘은

사용자의 기억에 오래도록 남아 있게 됩니다.

무수히 많은 아이콘에는 일반적으로 사용하는 다양한 스타일이 있습니다.

outlined, filled, colored, image와 같은 스타일이 있으며 일관된 스타일을 적용하는 것이

사용자의 인지 시간을 단축시킬 수 있습니다.

각자의 아이콘 스타일마다 다른 이점이 있으며 오늘 만들어본 아이콘은 outlined 아이콘을

만들어 보겠습니다.

방금도 말했듯이 아이콘을 만들 땐 일관성이 중요합니다.

outlined 아이콘을 만들 때 stroke 두께에 따라서 아이콘의 분위기도 달라지기 때문에

스트로크 굵기도 일관된 스타일로 만들어야 합니다.

사용자가 모바일로 아이콘을 볼 경우 그 크기가 매우 작아집니다.

그리고 아이콘의 모양이 디테일할수록 어떤 사용자의 경우 그 아이콘의 기능이

무엇인지 인지하지 못할 경우가 생길 수 있죠.

왼쪽의 시계 아이콘이 디테일하게 표현이 되어 완성도가 높아 보일 수 있지만 모바일 화면에서는

작아지기 때문에 단순화하는 것이 더 좋은 아이콘이 됩니다.

아이콘을 만들기 위해서는 일관성이 중요하다고 했습니다.

통일성 있는 아이콘을 만들기 위해서는 아이콘의 크기도 똑같이 만들어 주는 것이 좋습니다.

아이콘을 본격적으로 그리기 전에 레이아웃 영역부터 그려주면 좋은데요.

일반적인 아이콘 사이즈는 24x24 사이즈를 사용합니다.

특히 아이콘은 여러 파일 또는 툴에 자주 이동이 될 수 있기 때문에 24 사이즈의 레이아웃을 잡았다면

24 사이즈를 넘지 않아야 합니다.

피그마에서 아이콘을 만들기 전에 24x24 프레임을 만들어 주었습니다.

그리고 20x20의 라이브영역의 프레임도 만들어 주었습니다.

사진에 있는 각 프레임을 표시한 수치 영역은 이렇습니다.

1) 트림 영역 : 아이콘 실제 사이즈

2) 라이브 영역 : 패딩 영역을 제외한 실질적 작업 영역

3) 패딩 : 트림 영역 안쪽으로 상하좌우 2만큼의 영역

아이콘은 라이브 영역 안에서 작업을 해주되 트림 영역 밖으로 확장되지 않도록 주의해야 합니다.