디자인 시스템 제작기 (1)
01. 아이콘은 그냥 그리기만 하면 되는 거 아니었어요?
디자인 시스템이라는 제목에 첫 시작이 아이콘이라는 게 사실 저도 조금 어색하게 느껴지는 것 같아요. 하지만 실제로 제가 처음으로 담당했던 업무가 아이콘을 그리는 것부터 시작했으니, 한번 기억을 더듬어보면서 글을 써나가 보겠습니다.
00. 무작정 그려보기
회사에 입사를 하고 처음 시작했던 일은 피그마 파일을 둘러보고, 어떤 식으로 디자인되어 있는지를 살펴보는 일이었어요. 그러다가 아이콘 몇 개를 추가로 제작해야 하는 소규모 프로젝트가 있었고, 그 업무를 제가 담당하게 됐습니다. 이때는 사실 그려져 있는 아이콘을 보면서 대충 그래픽적으로 비슷하게 그리는 것에 집중했던 것 같습니다.
무작정 그려보던 아이콘 습작들...그러다 보니 디자이너가 더 들어왔을 때에 사소한 부분들이 다르게 그려지는 상황이 생기더라고요. 그래서 우선 이 부분부터 바로 잡고자 했습니다. 우선 저는 비전공자였기 때문에 아이콘을 그리는 과정이 조금 힘들었어요. 그래픽 분야라고 생각을 했었고, 간단하게 라인 아이콘 정도는 그려봤지만 업무에서 다양한 카테고리를 그린 적은 없었거든요. 우선 아이콘 디자인 가이드는 디자인 시스템이 공개된 브랜드 사이트들을 참고했고, 그래픽 요소는 Flat Icon에서 Icon Pack이나 검색을 통해서 레퍼런스들을 참고했어요.
01. 구조를 맞춰보자.
아이콘을 그리기 전 무작정 백지에 그리는 게 아니라, 밑바탕을 깔아 두고 그 위에서 그리는 것이 통일성에 좋은 방법이라는 것을 알게 되었습니다. 물론 이러한 바탕을 100% 지키기엔 무리가 있을 수 있지만 회사의 그래픽 스타일이 라인보다는 면의 형태로 이루어져 있었기 때문에 조금 더 수월했다고 생각해요.
기본적인 아이콘 제작 가이드라인Keyline 내부에서 활용할 수 있는 최대 면적은 총 4가지로 구분하고, 각각의 영역을 포함하여 제작했습니다. 이렇게 할 경우 아이콘의 형태가 4가지의 구성에서 크게 벗어나는 일은 없었던 것 같아요. 물론 다음에 정한 규칙들이 조금 더 느슨하게 정의되어 있어서 여유로운 그래픽 표현이 가능했던 것 같습니다.
02. 아이콘의 타입과 스타일
앞에서 말씀드렸던 것과 같이 저희 회사는 그래픽 타입이 면으로 표현하는 경우가 많았습니다. 그렇기 때문에 라인 형태가 활용된 기본 아이콘과 면의 형태가 사용된 그래픽 아이콘들이 서로 적절하게 섞여있고, 잘 어우러져야 하는 느낌을 가져야 했어요.
그렇기 때문에 디자인 가이드에서 엄청나게 빡빡한 정의를 내릴 수 없었고, 가이드 문서상으로 "Line으로 표현하기에 적합한 경우를 제외하고 대부분의 형태를 Fill로 표현합니다. 다만 아이콘으로 표현하고자 하는 정보의 맥락과 상황에 맞게 선택하여 사용할 수 있도록 엄격하게 제한하지 않습니다."라고 정의를 내렸죠.
또한 저희 회사의 아이콘은 기본 구성 방식을 다음과 같이 정의 내렸어요.
1) 아이콘의 구성이 라인으로만 사용된 경우
2) 면으로 구성되었지만 라인 형태의 요소가 추가될 경우
3) 면으로 구성되었지만 면끼리의 간격이 필요한 경우
4) 아이콘은 면 형태이지만 내부가 라인 형태로 뚫린 경우
5) 아이콘은 면 형태이지만 내부가 다양한 형태로 뚫린 경우
위 다섯 가지를 기본으로 하되, 각 상황(시각보정 및 균일한 디자인 등)에 유동적으로 활용할 수 있도록 크기별로 각각 규정합니다. 특히 저희는 라인 형태와 면의 형태를 최대한 비슷한 느낌으로 표현해야 이질적인 느낌이 최소화되었는데 이를 위해 몇 가지를 더 신경 써서 정의했습니다.
아이콘 제작 시 라인 형태의 다양한 조건 및 요소들해당 요소들 중 우리의 톤에 적합한 기준들을 설정하고 이에 맞게 제작을 하려고 노력했습니다. 또한 라인 아이콘을 제작할 경우 기본 굵기와 엔드 포인트를 동일하게 규정하고, 최종 속성값을 면의 형태로 변환해서 이질감을 최소화했습니다.
위의 사진은 다양한 속성값을 보여주기 위해 가져온 것으로 각자의 디자인 기준에 맞게 탐색하고 적용하시면 될 것 같아요. 굳이 지정하지 않아도 상관은 없지만, 저희가 최종 속성값을 면의 형태로 변환한 이유는 아이콘의 사이즈별로 굵기 표현을 동일하게 변화시켜 주기 위함이 컸습니다.
03. 전체 통일감을 위한 세부 조정
아이콘을 모아놨을 때 뒤죽박죽인 느낌을 최소화하기 위해 제가 했던 정리는 우선 면과 라인 형태의 이질감을 최소화하는 것이었고, 이번에 규정하려고 하는 것은 바로 보더값과 앵글값입니다. 아이콘은 무수히 많이 늘어날 수 있기에 세부적인 규정들이 빡빡하게 정의되어 있다면 유연함이 떨어진다고 생각해요. 그렇기 때문에 최대한 여유 있는 정의를 해야 한다고 생각했습니다.
그중 아주 세세하면서도 규칙을 여유롭게 정의할 수 있는 두 가지 요소를 우선적으로 정의했습니다. 면을 활용하는 아이콘에서는 둥근 정도를 각 요소별로 적용할 수 있도록 범위를 지정해 주었고, 라인을 활용하는 아이콘에서 주로 적용되는 앵글값 또한 범위를 지정해 주어, 다양하지만 규칙성을 느낄 수 있도록 했습니다.
사실 이러한 세세한 규칙은 추후에 적용하면 되는 것이고, 가장 중요한 점은 그래픽으로 표현할 때 다른 아이콘들과 톤 앤 매너가 맞아야 한다는 점입니다. 다만, 톤 앤 매너는 현재 (제 실력 부족...으로 인하여) 추상적인 부분들을 어떻게 규칙화하여 정의를 내릴지 감이 오지 않기에 여러 시안을 제작한 뒤에 최대한 느낌이 비슷한 것으로 조율하여 선정하고 있습니다.
04. 이름 짓기와 색상 규정
이제 남은 것은 네이밍 규칙과 개발에 넘길 정리를 하는 것입니다. 네이밍의 규칙은 세부적으로 들어갔을 때 카멜 케이스 / 케밥 케이스 / 파스칼 케이스 / 스네이크 케이스로 나뉘게 됩니다. 프로그래밍에서 변수 값이나 이름을 지을 때 공백이 아닌 다른 방식으로 표현을 해야 하는데, 개발단에서 위 4가지가 대표적으로 사용하는 예입니다.
카멜 케이스는 첫 단어는 소문자, 구분되는 단어는 대문자로 시작하고 단어 사이는 붙이는 규칙을 가진 것으로 "brunchIcon"으로 표현합니다.
케밥 케이스의 경우 관통하는 막대기를 생각하면 되는데 모든 단어가 소문자로 이루어지고 이를 관통하는 막대기가 있는 것으로 "brunch-icon"으로 표현합니다.
파스칼 케이스는 카멜과 비슷하지만 시작을 대문자로 표현하는 것으로 예시로 "BrunchIcon" 으로 표현할 수 있습니다.
스네이크 케이스의 경우 케밥과 비슷하지만 관통되는 막대기가 아닌 언더바(_)를 활용하는 것으로 "brunch_icon"으로 표현합니다.
저는 기존 회사 내 개발자들이 활용하고 있던 케밥 케이스를 그대로 차용하는 것으로 정했으며, 명칭 규칙보다는 이름을 짓는 방법(어떠한 기준으로 이름을 지을 것인지, 규칙은 있을지 등)에 집중하여 논의했습니다.
회사에서 정의 내린 아이콘의 네이밍 규칙은 다음과 같습니다. "추가로 들어올 작업자, 현재 작업 중인 작업자 모두를 위하여 아이콘 이름은 직관성을 가지며 형태를 기준으로 작성"하며 (다만 이 부분은 추후 아이콘들이 대거 제작되면서 여러 가지 문제가 발생하여 수정에 관한 논의 중입니다...), 네이밍은 케밥 케이스를 사용하여 각 구분 공간을 대시(-)로 대체하고, 모든 단어를 소문자로 사용하여 결합합니다.
마지막으로 컬러 규정이 있는데, 이 부분은 의외로(?) 간단합니다. 모든 아이콘에는 유동적으로 컬러를 적용할 수 있으며, 고정 색상을 가지는 아이콘에는 항상 -color과 같은 태그를 붙이고, 기본 아이콘의 컬러는 #000000이다 등과 같은 규칙을 세워 전달하는 것입니다.
이러한 컬러 규정이 없다면, 그리고 컬러를 구분해서 묶어주는 과정이 없다면, 개발상에서 컬러를 임의로 변경하고, 적용하는 것에 번거로움이 있기에 항상 디자인 문서상에서도 정의가 필요합니다. 또한 기본 컬러가 적용되어 있는 다른 회사의 ci등과 같은 요소는 따로 분리하여 전달하고 있습니다. 컬러적용을 하지 않아도 되는 아이콘으로 구분을 해주는 것이죠.
05. 마무리
아이콘에 대한 글은 이렇게 마무리가 되었습니다. 아이콘을 어떻게 그리는지에 대한 내용이 없는 이유는 디자이너마다 각자의 방법이 있을 것이기 때문에 제외를 했어요. 또한 저는 그래픽적인 내용을 담기보다 디자인 시스템에서 아이콘의 가이드를 어떻게 잡았는지를 이야기하고 싶어서 일부러 빼기도 했습니다. 사실 아이콘 사이즈 별 제작에 대해서 이야기하고 싶은 부분이 있었지만 이 부분은 사람마다, 또 팀이 어떻게 관리를 하는지에 따라 다양하게 적용될 수 있을 것 같아서 이야기를 하지 못했어요.
아무래도 전공자분들이 저보다 더 아이콘을 그래픽으로 표현하실 때 철저하게 가이드를 만드실 것이라 생각합니다. 저는 그러므로 많이 배워야 할 것 같아요. 하지만 늘 혼나면서, 고쳐가면서, 배워가면서 성장하는 주니어 디자이너가 아니겠습니까? 하하... 그러니 잘못된 부분은 언제든 부드럽게 지적해 주시면 감사하겠습니다.
사담이지만, 얼른 회사의 디자인 시스템 작업이 마무리되고, 좋은 아웃풋으로 디자인 시스템이 공개되면 좋을 것 같아요. 디자인 시스템에 능통하신 분이나 경험이 풍부한 시니어가 없는 상황에서 잡아가려니 많이 조심스럽고 힘들고 또 자신감도 떨어지지만, 언제나 열심히 하는 포동포동이 되겠습니다.
다음 편은 타이포그래피로 돌아오겠습니다. 읽어주셔서 감사합니다.
