아이콘 디자인 규칙
웹 디자이너가 필수로 알고있어야 할 디자인 규칙
UI 디자인에서 일관성은 매우 중요한 영역입니다.
일관성 없는 UI는 유저들을 혼란스럽게 하며, 서비스의 브랜딩과 성공 여부에 큰 영향을 미칩니다.
여기서 일관성이란, 인터페이스의 구성요소들이 통일되어있는 상태를 말합니다.
구성요소들은 같은 외양을 가지고 같은 방식으로 작동해야 합니다. 일관성 있는 UI는 사용자들이 서비스를 편리하게 이용하게 하며, 이를 효율화시키면 개발 효율이 빨라진다는 이점도 있습니다.
(디자이너, 개발자, 사용자들의 모든 UX가 사랑스러워진다는 점.)
더컴퍼스의 웹사이트 디자인을 진행하면서, 앞으로 업무의 효율성을 위해 디자인을 할 때 지켜야 할 규칙을 정리해야 할 필요성을 느꼈습니다. 제가 규칙없이 만들어 낸 결과물들을 여러 디자인 가이드를 참고하여 개선하고자 하며(반성도), 앞으로는 이 규칙을 중심으로 현재 서비스 중인 사이트에 적용할 계획을 가지고 있습니다.
아이콘 사이즈와 마진
디바이스 해상도에 따라 아이콘의 픽셀이 어긋나지 않도록 아이콘 크기는 짝수를 사용하기로 하였습니다.
더컴퍼스의 경우 현재 16px, 24px, 36px, 48px의 4가지 크기의 아이콘으로 작업하고 있습니다. 아이콘의 경우 주변 텍스트와 같은 요소에 어울리도록 디자인되어야 하기 때문에, 각각의 마진을 주어 작업합니다.
픽셀 완성도
아이콘은 기본적으로 같은 family라면 굵기, 라운드, 컨셉을 통일시켜야 합니다.
굵기는 정수를 사용해야하며, 아이콘을 왜곡시키지 않기 위해서는 모든 path에 대해 pixel snapping을 하는 것이 좋습니다.
좌 : 정수에 맞게 pixel snap이 된 아이콘 / 우 : 좌표가 소수로 어긋난 아이콘현재 https://www.the-compass.kr의 경우 픽셀 깨짐과 웹 상 state 변경, svg animation의 활용성을 위해 svg를 사용하고 있지만, 추후 png 및 jpeg등을 활용하는 경우를 대비해야 합니다.
시각적 크기
같은 아이콘 family는 시각적으로 일관성이 있어야 합니다.
각각의 아이콘의 무게가 다르기 때문에, 시각적으로 일관성을 주기 위해 일부 아이콘은 다른 아이콘보다 약간 크게 제작될 필요가 있습니다.
아래의 keyline을 기준으로 활용하면 아이콘 간 일관된 시각적 비율을 유지할 수 있습니다.
여러 형태의 아이콘에 적용한 키라인