🖥 UI 디자인 가이드 만들기 #3._Icon svg화

Posting : 08.22.2022
Designer : 김세원
#designsystem #UX/UI #Icon #svg

아이콘 svg 이용기

아이콘을 svg화 하면서 겪은 우여곡절

아이콘을 svg 로 이용하고, 개발자와 함께 아이콘 시스템을 적용하면서 크게 네이밍과 컴포넌트 카테고리가 크게 바뀌게 되었다. 그러면서 Property값 중 자연스럽게 수정과 삭제 되는 것들이 있었다.

svg 를 이용하게 되면서 가장 크게 바뀐 것들은 아래와 같다.

01. 맨 처음 바뀐 것 : 네이밍, Property

필자의 아이콘 네이밍 시스템은 피그마에서 아이콘 컴포넌트를 다루는 방식과 동일하게 가져간다. 그렇기에 아이콘의 Property 값 네이밍에 반영이 되어 변경된 것이라고 보면 된다.

AS-IS

TO-BE

direction-property → shape 수정

기존 suffix 부분을 보게 되면 direction-property 와 status, color 가 존재한다. 아래의 To-be 와 비교를 해보면 direction-property는 shape 으로 워딩을 변경했다. 이유는 형태가 바뀌게 된 이유와 연결이 되기도 한다. 아이콘에는 fill 값으로 채워진 형태가 있고, stroke 형태로 이루어진 게 있다. 이는 탭이나 메뉴를 클릭할 시, 클릭의 interaction에 따라 사용되는 다른 형태이다. 기존의 워딩은 이런 형태까지 다 포괄하기에는 애매했다. 그래서 단순히 arrow의 방향 뿐 아니라 다양한 아이콘의 형태를 아우를 수 있는 shape 으로 이름을 변경했다.

Property 값 중 color값, status 값 삭제

svg확장자를 이용하게 되면서, 개발자가 직접 코드 상에서 currentcolor 값에서 직접 색상을 변경할 수 있기 때문에 굳이 컬러 variants 들을 만들 필요가 없어졌다.

Status 값 삭제의 부분은 아래 형태 분리에서 설명하겠다.

02. 형태 변경 (Icon과 Butcon, Controller으로 분리)

형태 변경

아이콘에서 기존에 background가 존재하는 형태가 있었다. 이는 컴포넌트 안에서 사용되어 버튼처럼 쓰이고, status 값이 interaction에 따라 변화되는 아이였다. 그러다보니 포함되어있는 컴포넌트에서의 status 값마다 계속해서 추가해줘야 했다.

Butcon 분류

자동으로 상태값이 들어가게되는 버튼들은 따로 Butcon으로 분류하였다.

butcon으로 분리

Controller 분리

소리의 on/off 와 체크 모두 명확한 구분이 없어서 controller 로 따로 구분짓지 않고 Icon 내에서 주먹구구 식으로 관리를 했었다. 이번에 분리를 하면서 on/off 가 명확한 것들은 controller로 구분지었다.

Controller component

개발자에게 보낼 때 유의할 점

svg아이콘은 레이어 압축이 아닌 코드로 아이콘의 시각적인 정보를 표현한다. 그렇기 때문에 복잡하며 복잡할 수록 아이콘이 깨지거나 색상 변경이 되지 않거나 할 수 있다. 그래서 최대한 stroke를 outline stroke화와 flatten처리 하여 깨질 염려가 없도록 한다. 그리고 이렇게 하면 개발자가 fill 이라는 속성에서 한 번에 색상을 변경할 수 있어 좋다.

필자는 디자이너 관리용 page 와 개발자 export 용 페이지를 figma내에서 따로 분리했다. 그래서 디자이너들도 아이콘 수정관리를 할 수 있고, 개발자도 관리하기 쉽도록 하였다.

[디자이너 관리용]

[개발자의 export용]

아쉬웠던 점

아이콘이 애초에 작은 사이즈에서 자유자재의 사이즈에 다 대응할 수 있도록 섬세하게 만들어지지 못해서 사이즈별로 따로 아이콘들을 관리해야된다는 점이 아쉬웠다. 이렇게 될 경우 관리해야될 리소스와 메모리가 많이 들어가기 때문이다.다음에 아이콘을 전반적으로 프로덕트의 브랜드 일관성에 맞도록 일괄적으로 작업해봐야겠다. 그렇게 될 경우, 아이콘의 네이밍 Property 가 더욱 명확해질 수 있고, 관리해야될 리소스도 적어질 수 있을 것 같다.

참고자료

'SVG'를 사용하는 이유!

SVG 아이콘 사용하기 - 주노준호 블로그

svg 아이콘 사용시 유의사항(with vue, css)

피그마로 SVG export했는데 리소스가 이상하다고?

클레온의 UI 디자인 가이드 관련 글

• 💻 UI 디자인 가이드 만들기 #1._Icon naming
• 🖥 UI 디자인 가이드 만들기 #2._Color
• 🖥 UI 디자인 가이드 만들기 #3._Icon svg화