아이콘, 픽셀퍼펙트를 꼭 지켜야 하나요?
Window와 Mac에서의 아이콘 렌더링 차이에 관해
✅ 이 글은 아이콘 작업 시, 많이 들어보셨을 Pixel-Perfect에 대한 내용을 다룹니다.
✅ 이 글은 '아이콘 작업할 때에 픽셀퍼펙트를 준수하며 그려야하는가?'에 대한 고찰입니다.
Prologue
디자인과에 입학하고 쭉 맥북을 써온 나로써는 높은 해상도는 당연했으며, 아이콘은 늘 선명하게 렌더링 되었다. 그 결과일까, 픽셀퍼펙트에 대해서는 그렇게 큰 체감을 하진 못했다. 하지만 프로젝트를 여러차례 겪다보니 window와 mac의 차이를 알게 되었고 픽셀퍼펙트(pixel-perfect)라는 개념을 배우게 되었다.
그러나, 픽셀퍼펙트를 최우선으로 고려하다보면 아이콘 자체의 형태감이나 볼륨감 등 다른 요소를 포기해야만 하는 상황을 마주치게 된다. 당시 경험이 없던 나는 자체적으로 빠른 의사결정을 내리지 못했고 업무지연 경험을 겪게 되었다.
이 글은 당시를 회고하며 Lesson&Learn을 위해 기록하는 것으로, 그때 경험한 일들과 리서치를 통해 배운 내용을 서술한다.
[서론] : 시계아이콘을 그리며 느꼈던 당황스러움
'시계 아이콘.. 어떻게 그리세요?'프로젝트에서 어느 한 도메인에 사용될 Icon Set을 만들어야 했다. 그리고 이 이야기는 시계 아이콘을 그리며 겪은 어려움으로부터 시작했다. '시계 아이콘이 왜?'라고 할 수 있다. 사실 이미 많이 정형화 된 아이콘이기도 하며 형태적으로도 단순하기에 신경써서 만들 아이콘도 아니다. 그러나, 당시의 나에겐 많은 고민과 갈등을 안겨주기에 충분한 아이콘이었다.
'어떻게 그리시겠어요? A? 아니면 B?'당시에 시계 아이콘을 그리며 고민했던 지점을 A/B 시안으로 시각화했다.
A. Icon Set을 그려야 하기 때문에, 주변 아이콘들과 동일한 크기감으로 그려야 한다.
B. window화면에 올라갈 아이콘이기 때문에 픽셀퍼펙트를 준수해야 한다.
A타입은 LiveArea를 고려해 그려졌기 때문에 함께 발행될 주변 아이콘들과 동등한 크기감과 무게감을 가질 수 있다. 따라서 시각적 균형감을 줄 수 있다. 단, 시계바늘이 그리드에 걸리며 window상에서 흐려보일 수 있다.
B타입은 픽셀퍼펙트를 고려하였기 때문에 window상에서도 선명한 아이콘 퀄리티를 제공하여 가독성을 높일 수 있으나, 주변 아이콘들과의 조합에서 (크기감 등) 다소 언밸런스 할 수 있다.
이 기준을 고려하면 시계 아이콘은 A타입일까 아님 B타입일까?
지금에서야, 위와 같은 선택에는 정답이 따로 없으며 디자이너 본인의 판단 하에 결정짓고 다음 업무로 넘어가는 편이 좋다는걸 안다. 하지만 그 때는 잘 모르던 상황이었기에 나름의 공부를 해보고자 타 서비스들을 살펴보았었다.
[본론.1] : 타 서비스들을 리서치해보자(카카오맵)
카카오맵(PC,window)에서 발견한 시계 아이콘의 캡쳐화면
오른쪽이 카카오맵(PC,window) 시계 아이콘이며, 왼쪽이 이를 따라그린 것이다.PC화면의 카카오맵 시계 아이콘을 그대로 따라그려봤다.
그려보며 형태적으로 분석한 결과, 앞서 고민했던 A타입과 B타입의 좋은점은 모두 차용한 새로운 C타입의 아이콘임을 확인했다.
1. 겉 테두리 원형은 14px이라는 짝수로 그려져서 주변 아이콘들과의 크기감을 맞췄다.
2. 시계바늘 세로선은 완벽한 중앙이 아니더라도 (픽셀퍼펙트를 고려하여) 왼쪽으로 살짝 옮겨 그렸다.
그리고, 리서치에서는 다음을 배웠다.
1. 앞서 고려하였던 시각적 통일성과 픽셀퍼펙트 모두, 아이콘을 그릴 때 고려해야 할 주요한 요소이다.
2. 따라서, 디자이너는 언제나 픽셀퍼펙트를 고려하며 최적화된 아이콘을 그리려고 해야한다.
[본론.2] : 하지만 정말로 픽셀퍼펙트를 지킬 수 없는 아이콘이면?
그럼에도 픽셀퍼펙트를 지키기 힘든 상황에서는 억지로 짜맞추기 보단 포기하는 것도 방법이다.
트위터의 아이콘(svg)을 리서치했다. 1.5px의 stroke라인을 가지며 픽셀 퍼펙트는 거의 준수되지 않았다.많은 유저들이 이미 사용중인 'Twitter'의 아이콘을 발췌하여 픽셀퍼펙트를 분석하였다. 기본 24*24사이즈의 svg 아이콘이며 상당수의 아이콘은 픽셀퍼펙트를 준수하지 못했다. 준수하지 않은 이유로는 여러 가설을 생각할 수 있지만, 결과적으로는 픽셀퍼펙트를 준수해야할 만큼 임팩트 있는 업무는 아니라는 결론이다.
리서치에서는 다음을 배웠다.
1. 픽셀퍼펙트를 준수하지 못할 복잡한 아이콘이라면 형태를 우선시한다.
2. 형태를 우선시 했다는건 복잡하더라도 아이콘의 메타포를 우선시 했다는 뜻이며 이는, 아이콘의 의미를 유저에게 직관적으로 전달하려는 목적이 더 크다는 것을 의미한다.
3. 트위터 뿐만 아니라 많은 기업에서 픽셀퍼펙트를 지키지않은 아이콘을 런칭한 사실을 조사했고, 이를 역추적하면 픽셀퍼펙트는 공수대비 임팩트가 높은 작업은 아니라는 가설을 세울 수도 있다.
4. 따라서, 픽셀퍼펙트는 디자이너가 꼭 지켜야하는 절대규칙은 아니다.
[결론] : 그래서 픽셀퍼펙트 지켜? 말어?
리서치와 업무경험을 바탕으로 아이콘 작업 시 픽셀퍼펙트에 대한 생각의 흐름을 아래와 같이 정의할 수 있었다.
1순위. 최대한 픽셀퍼펙트를 지키면서 모든 아이콘을 그리되
2순위. 픽셀퍼펙트를 지키기 힘든 상황이라면, 맥락에 따라 취사선택을 할 것
3순위. 픽셀퍼펙트를 지키기 힘든(사실상 불가능한) 예외케이스에는 고려하지 말 것
1순위 : 최대한 픽셀퍼펙트를 지키면서 모든 아이콘을 그릴 것
해가 갈 수록 모바일기기의 해상도는 너무나 좋아져서 사실상 픽셀퍼펙트를 준수하지 않더라도 클리어한 아이콘 렌더링 퍼포먼스를 보여준다. 하지만, 예기치 못한 상황(ex. Mobile first로 진행되었으나 내부 상황에 따라 PC화면도 제작할 경우)은 늘 있고, 이 경우 PC용 Mobile용 아이콘을 나눠 그리는 것은 시간대비 임팩트가 적다. (아이콘1,2개면 몰라도 100개 이상이라면 기하급수적으로 작업량이 불어나게 된다.)
따라서, 픽셀퍼펙트도 필수 요소로써 인식하고 이를 준수하여 작업하여야 할 것이다.
2순위 : 픽셀퍼펙트를 지키기 힘든 상황이라면, 맥락에 따라 취사선택을 할 것
픽셀퍼펙트를 지키기 힘든 상황은 여러가지겠지만, 아이콘의 형태적 난이도에 따른 이슈가 일반적일 것이다.
그럴 때에는 해당 아이콘이 PC화면에 올라갈 것인지, Mobile화면에 올라갈 것인지를 판단해서 결정하면 좋을 것 같다.
모바일화면에 올라간다면 픽셀퍼펙트의 우선순위를 낮추고
PC화면에 올라갈 것이라면 아이콘이 엉망이 되지 않는 선까지 픽셀퍼펙트를 준수하고자 한다.
3순위 : 픽셀퍼펙트를 지키기 힘든(사실상 불가능한) 예외케이스에는 고려하지 말 것
시스템아이콘(ic_search, chevron, plus 등)과 달리 형태적으로 단순하지도 않고 보다 복잡하고 디테일한 형태의 아이콘은 사실상 픽셀에 딱 맞춰서 그릴 수는 없다. 수많은 복잡한 아이콘을 그릴 기회가 있었고 리서치도 해봤지만 이 경우, 대부분의 아이콘은 이를 준수하지 못했다. 따라서, 픽셀퍼펙트에 대한 대안을 발견할 수 없는 아이콘이라면 업무일정을 고려하여 어느정도 내려두고 가야하지 않을까 싶다.
일을 했던 초기에는 적어도 나에게 픽셀퍼펙트란, 지키지 못하면 세상이 무너질 것만 같은 중요한 규칙이었다. 왜냐하면 모든 강의와 아티클들에서 픽셀퍼펙트는 꽤 중요한 규칙으로 다뤄지기 때문이다. 그러나, 리서치를 할 때마다 픽셀퍼펙트를 지키지 못한 아이콘이 너무나도 많다는걸 알게되었다. 업무 자체에서도 픽셀퍼펙트를 지키지 못해서 구성원들이 머리를 싸매고 한숨을 쉬지도 않았으며 크리티컬한 이슈는 아니었다. 픽셀퍼펙트는 '지키면 너무 좋지만, 아니어도 괜찮은' 레벨의 준수사항으로 인식하게 된 계기였다.
아이콘은 서비스의 인상을 결정하는 그래픽 요소 중 하나이며, 이 요소가 흐려지는 것은 서비스 퀄리티와도 명백히 관련되어 있다. 하지만 유저의 니즈와 사용성의 본질이라는 또 다른 중요한 관점에서는 상대적으로 우선순위가 낮다는 것이 디자이너로서의 현재 나의 결론이다.
