스타트업에서 아이콘을 제작하기 전 고려한 세 가지

저의 아이콘 가이드라인 구축 과정을 공유합니다!

안녕하세요! BX 디자이너 손하영입니다.

현재 저는 푸망에서 브랜딩을 맡고 있습니다.

최근에 앱을 런칭하게 되어 아이콘 가이드라인에 대한 필요를 느낄 때 즈음,

때마침 플랫폼팀에게 아이콘 가이드라인을 만들어달라는 요청이 들어왔습니다.

"ㅇㅋ 그거 필요하다고 생각했음" 이라고 말하며 호기롭게  피그마를 켰으나..

뭐부터 해야하지?..!

라며 시작부터 위기에 봉착해버리고 말았죠.

간결하고, 명확하게..는 알겠는데

어떻게 가이드라인을 회사의 방향에 맡게 설정할 수 있을까? 고민하고 있었던 제가 

이 문제를 풀게 된 과정을 공유할게요.

제목과 같이 아이콘을 제작하기 전 고려한 세 가지는 다음과 같습니다.

첫 번째, 아이콘이 사용되고 있는 환경

두 번째, 아이콘의 일관성

세 번째, 브랜드 에센스.

각 순서별로 자세한 설명을 해볼게요.

---

첫 번째, 아이콘이 사용되고 있는 환경

모바일에서 아이콘을 보았을 때 어떻게 보이는지 뿐만 아니라 플랫폼을 개발하는 개발자의 환경도 고려해야합니다. 그래서 두 가지 방면의 환경을 고려하여 기존에 쓰이고 있었던 아이콘들을 살펴보았을 때, 가장 집중하여 개선한 것은 아이콘 네이밍과 그리드 시스템이였어요. 그 중 제일 시급해보였던 아이콘 네이밍 개선을 가장 먼저 실행하였습니다.

아이콘 네이밍

기존 아이콘의 이름

겉보기엔 간결하고 깔끔해보입니다.

하지만 디자이너와 개발자의 인원이 많지 않은 경우, 혹은 서비스의 규모가 작은 경우엔 큰 문제가 없을지라도 점차 규모가 확장되었을 때 아이콘의 네임이 중복된다던지 가이드라인에 의해 굵기가 지정되었을 경우 사이즈 표기도 해야하는 경우가 생기기에 이름은 되도록이면 명확하게 표현하는 것이 좋습니다.

다만, 네이밍 컨벤션을 지정하기 전 꼭! 개발팀과 상의 후 지정하는 것이 필요합니다. 

접두사 접미사를 사용하여 세포 분열같은 상세표기를 했을 경우 회사의 규모에 따라, 혹은 개발 환경에 따라 오히려 비효율적일 수 있습니다. 이와 같은 내부 가이드라인을 규정할 때 가장 중요한 것은 사용성입니다.

개발팀과 함께 어떻게 아이콘을 사용하고 있었는지, 어떻게 사용해야 가장 편리할지, 어떤 규칙성이 명확할지의논하는 것을 추천드립니다.

(사실 저도 먼저 정한 후에 피드백을 들었거든요...ㅎ눈물)

바뀐 네이밍 컨벤션

asset name을 아이콘의 특징을 직관적으로 묘사한 이름으로 지정하는 규칙과, asset name과 size는 필수로 들어가되, 그 외의 부가적 요소는 필요에 따라 생략, 추가하는 것으로 정하게 되었습니다.

변경된 아이콘 네임

따라서 기존의 아이콘 이름은 다음과 같이 변경하였습니다.

Pixel Grid System

푸망에선 대부분 아이콘을 SVG로 추출하여 사용하고 있지만, Png로 추출하여 사용되는 경우도 있을 수 있기 때문에 아이콘이 깨지는 현상(안티앨리어싱)을 고려해야했습니다. Pixel Grid System은 아이콘에 일관성을 더해주기도 합니다.

안티앨리어싱이란?

> 비트맵 이미지를 저해상도에서 사용하게 될 시 깨져보이는 계단 현상. 이를 최소화 하기 위한 방법이 Pixel Grid. 그리드에 맞춰 제작하면 비교적 깔끔한 아이콘을 제작할 수 있다!

푸망의 Pixel Grid System은 아래와 같습니다.

Trim area   

가장 일반적으로 쓰이는 아이콘의 크기는 24x24px이고, 이를 기준으로 아이콘 패밀리를 만들어요.

Padding Area   

2px을 여유로 두고 제작하는 이유는 아이콘을 꽉 차게 제작하여 추출시 끝단이 잘려보일 수 있기 때문이에요.

Live Area   

그래서 Padding area를 제외한 영역 20x20px이 실질적 작업 영역입니다.

Grid Base   

Key shape나 angle의 가이드가 되어주는 Grid에요.

하지만, 시각적 보정이 필요한 경우가 당연히 존재하기에 절대적인 기준은 아니에요. (삼각형을 중앙정렬 하였을 경우 왼쪽으로 치우쳐져 보이는 것, 원형과 네모가 있을 때 네모가 더 커보이는 것 처럼) 상황에 맞게 몇 px 정도는 클 수 있고 작을 수 있어야 합니다. 시각적 보정이 필요한 상황일경우 되도록이면 최소 0.5px을 기준으로 제작하는 것을 추천드립니다.

두 번째, 아이콘의 일관성

아이콘이 일관성을 가지면 학습된 사용자들은 아이콘 인지 시간이 더 단축될 것입니다. 사용되고 있는 아이콘들이 일관성을 가지기 위해 고려한 것들은 다음과 같습니다.

Key Shape

원형이나 세로로 긴 형태와 같은 아이콘들이 같은 비율을 통해 제작될 수 있도록 만든 것이 Key Shape입니다. 하단의 이미지와 같이 Key Shape에 맞춰 작도하면 됩니다. Square 비율의 경우 18x18px로 Key Shape를 정의했는데요. 20x20px로 제작하게 될 경우 다른 비율의 아이콘보다 비교적 더 커보이게 되어 시각적 보정을 위해 18px로 고정하였습니다.

Key Shape

Stroke

이외에도 일관성을 고려해야하는 상황은 존재합니다. 아이콘은 단독으로 사용되는 경우 이외에도 버튼의 폰트와 함께 쓰이는 경우가 많습니다. 푸망에선 pretendard와 브랜드 영문폰트 galano gratesque를 함께 사용하고 있으며, 이 두 가지 메인 폰트와도 일체감을 가질 필요가 있었어요. 아이콘이 폰트보다 너무 두꺼우면 뭉쳐보여 가독성이 떨어질테고, 너무 얇으면 완성도가 떨어져보입니다. 이에 대한 예시 이미지를 볼게요.

출처: 쿠팡

폰트와 아이콘간 간격도 간격이지만 라인 굵기가 달라 로드가 덜 된 듯 불안정해보입니다.

폰트와 아이콘의 균형을 맞춘다면 더욱 안정적인 버튼의 형태가 완성될 것입니다.

현재 푸망에서 주로 아이콘과 함께 쓰이고 있는 버튼의 폰트 종류는 다음과 같습니다.

Body1 (Pretendard, bold, 16px)

Body3 (Pretendard, Bold, 14px)

Caption (Pretendard, Bold, 12px)

우리의 눈은 주로 세로 획을 기준으로 두께를 인지합니다. 각 폰트의 세로 획을 재보았을 때   

Body1 (2px)

Body3 (1.7px)

caption (1.5 px)

라는 기준이 생깁니다. 앞서 말했듯 pixel grid에 의하면 최소 0.5는 맞추어야 합니다.

따라서 24x24px 아이콘의 경우엔 1.5px의 굵기를 부여하고, body1과 함께 쓰이는 아이콘의 크기는 42px이니 이 경우엔 2px의 굵기로 제작하는 것으로 정의하였습니다.

Angle

아이콘의 기울기 또한 동일하게 적용된다면 시각적으로 하나의 통일된 아이콘으로 보일 것입니다.

이를 위해 기울기와 아이콘이 회전하는 방향을 지정해주었습니다.

Angle

기본적으로 45도의 기울기를 사용하되, 필요에 따라 15도로 세분화하여 작업 할 수 있도록 하였으며, 기울기의 방향은 시각적으로 익숙한 오른쪽 시계방향으로 설정하였습니다.

세 번째, 브랜드 에센스 부여하기

마지막으로 아이콘에 BI를 녹여 어떤 특징을 부여할 것인지 고려해야합니다. 푸망의 이미지는 친근함과 

동시에 나를 데이터로 정량화 해주는 서비스이기 때문에 신뢰감 또한 줄 수 있어야했어요.

그래서 접점을 찾기 위해 이런저런 실험을 했죠.

1px Rounding과 0.5px Rounding 비교하기

1px Rounding과 0.5px Rounding 비교하기

1보다 0.5px이 안정적이고 폰트와 어울리는 느낌이 들어요. 일관성 측면에서 보았을 때도 0.5px이 더 정돈된 느낌이 들죠. 개인적으로 라운딩을 많이 주었을 때 아이콘에 개성이 생겨버려 인지 효과가 더 떨어지는 듯 했어요. 아직은 초기 서비스이기에 서비스에 더 집중할 수 있게 하기위해선 최대한 노멀한 주제넘지 않는 아이콘이였음 했지요. 대신, 라인 캡스는 라운딩을 주어 푸망의 부드러운 이미지를 담았답니다.

저의 과정과는 반대로 브랜드 에센스를 극대화한 예시도 있어요.

PlusX Advance Lab에서 진행한 아이콘 가이드 사례인데요. 모바일 시스템 아이콘을 넘어서서 그래픽으로도 쓰이기 위해 다양한 특징을 가미한 듯 보입니다. 서비스의 규모나 특성상 직관적인 시각적 해석이 필요하여 아이콘의 성격이 확장되었죠. 이 예시 속 아이콘은 조형적인 요소에 더 가까웠으나 푸망은 이미 쓰이고 있는 그래픽 패턴이 있었고 서비스의 규모가 아직까지 크지 않기에 아이콘이 이렇게 활용되는 일은 당장 없다고 생각하였어요. 그래서 저는 현재 회사 서비스의 규모나 사용환경에 맞게 조정하는 것에 집중했습니다.

위와 같은 상황을 고려하여 만든 line 규정입니다. 크기마다 변동되는 사항은 표로 제작하여 작도시 편리성을 높였습니다.

새롭게 태어난 아이콘을 소개합니다!

이전에 사용되었던 아이콘

이전에 사용되었던 아이콘은 정해진 기준이 없었기에 굵기와 라운딩이 제각각이였습니다. 

그래서 통일감도 없어보이고 한 벌의 icon set이라는 느낌이 들지 않았죠.

 

변경된 아이콘

이 후 변경된 아이콘입니다. 이처럼 가이드라인을 준수하여 만들어진 아이콘은 확실히 일관적이고 통일된 모습입니다. 초기 구축 단계에서 사용하고 있는 아이콘 변경이 시급했기에 모든 shape를 처음부터 제작하기보다 필요시 추가 제작하는 것으로 결정하였습니다. size별 제작시 비율대로 줄여버리면 소수점이 나오거나 가이드 규정에 어긋날 수 있으니 직접 작도해야합니다. spoqa의 Design Guidelines에 따르면, 필요에 따라 size가 작을경우 라인을 생략하는 경우도 있으니 참고하세요.

마치며

미학적으로 아름다운 것 뿐만 아니라 사용환경을 고려하여 정의한 과정을 공유해보았습니다.

완벽하진 않지만 스타트업에서 가이드라인을 어떻게 해석했는지에 대한 다른 관점을 보여드리고 싶었어요.

더 좋은 방향이나 조언이 있다면 얼마든지 알려주세요!