인터페이스 아이콘 디자인 정리법 심화 편
혼자서도 잘해요 주니어 성장일지
시각적 무게감을 활용한 아이콘디자인 방법은 알지만 그럼 어떻게 아이콘을 디자인해야 되나요?
들어가기 앞서, 앞서 정의했던, 시각적 무게감을 활용한 아이콘 디자인 공식 글에서 “픽셀에만 의존하지 말고 시각적 무게감을 확인하며 제작하는 것이 좋은 방법인 건가요?”라는 질문이 있어서, 아티클의 후속으로 정리한 ISTJ만의 인터페이스 아이콘 디자인 정리법에 대해 작성하려 합니다.
궁금하신 분들은 하단에 링크를 임베드할 테니, 이전의 글을 읽어보셔도 좋습니다!
대부분의 인터페이스 아이콘들은 일반적으로 직사각형, 원, 삼각형, 정사각형과 같은 기본 프레임의 형태로 디자인될 수 있습니다. 앞서 작성한 아티클에서는 블러를 통해 시각적 무게감을 체크할 수 있다고 정의했습니다.
다시 한번 정리하면 정사각형의 아이콘은 삼각형이나 길쭉한 아이콘보다 더 작습니다. 아이콘이 작을수록 필요한 공간이 줄어들며, 아이콘의 가장자리가 선명하거나 세부적인 부분이 작을수록 더 많은 아트보드 공간을 차지해야 합니다. 이를 쉽게 보는 방법이 블러를 통한 방법이었죠!
대부분 아이콘을 작업하실 때 그리드를 그려서 많이들 작업하실 겁니다. 하지만 그리드의 역할은 아이콘의 사이즈를 제한하는 것이 아니라 아이콘을 제작하는 것을 돕는 역할을 하는 수준입니다. 튀어나온 요소가 있는 아이콘이 시각적으로 더 나은 경우 당연히 튀어나오게 디자인해야 합니다.
정확한 픽셀 그리드의 활용법
보다 정확한 무게감의 아이콘을 제작하기에 앞서 4가지를 염두에 두고 디자인을 제작해야 됩니다.
Key shape - 무게감
Storke - 굵기
Radius - 모서리
Angle - 기울기
Key shape
key shape 이전 글에서도 언급했던 아이콘들의 시각적 무게감입니다. 일반적으로 사각형, 원, 여러 형태의 직사각형을 기본으로 스케치합니다.
Storke
stroke의 값은 1픽셀 또는 1픽셀과 2픽셀의 사이값으로 디자인하는 것이 기본입니다.(요즘은 대체로 2픽셀을 최솟값으로 많이 디자인합니다)
만약 2픽셀을 기본값으로 지정해서 디자인하면 outline을 중앙정렬로 해도 일반적으로 충분한 두께와 선명한 실루엣을 디자인할 수 있습니다.(그래도 outline이나 inline으로 디자인하는 것이 key shape을 맞추기에 편한 부분이 있습니다) 그리고 1픽셀과 2픽셀의 사이값으로 디자인하게 된다면, storke를 outline으로 할지, inline으로 할지 하나의 방향성을 설정 후 작업하는 것을 권장합니다.
storke를 inline으로 할지 outline으로 할지 한 가지의 방향을 정해서 통일화해주어야 합니다.
Radius
Radius는 대체로 0~2 사이에서 자유롭게 사용하는 것을 권장합니다. 각 아이콘마다 개별적으로 체크해서 지정해 놓은 범위 내에서 개별적으로 어울리는 Radius값으로 디자인해야 됩니다.
Angle
Angle은 대체로 45도를 기본으로 사용하고 있습니다. 하지만 필요에 따라서 35도도 많이 활용되는 편입니다.
협업은 혼자 하기 어려운 문제를 함께 해결하기 위해 공동의 목표를 세우고 달성해 가는 과정이다
위 글을 읽기 앞서 이전글을 참고해주시면 좋을듯 합니다 :)
디자인시스템을 만들기 앞서 아이콘 역시 가이드에 따라 통일된 디자인을 가지는 게 좋습니다.
