What is a pixel-perfect design

 

1. What is design?

구글의 Material Design Guide, 애플의 Human Interface Guide에 이은 모바일 디자인 가이드의 고도화로 인해, 디자인 작업의 일정 부분이 시스템화 되어가고 있습니다.

일일이 검토하고 수작업해야 했던 여백 조정, 픽셀 맞추기 등의 디자인 작업을 시스템화하여, 작업자는 시스템에 따라 빠르게 ‘제작’을 하면 되는 것이지요. 이것은 디자이너의 작업 시간 및 멘탈 리소스를 줄여줍니다. 디자이너의 수작업을 줄여주면, 여유 시간이 생기게 됩니다. 디자이너의 역할이 이쁜 것을 만드는 사람에서 ‘설계를 담당하는 사람'으로 확대되는 발판이 되었죠. 디자인 시스템은 뿐만 아니라, 전체 디지털 프로덕트의 통일성을 부여한다는 점에서도 이점을 갖고 있습니다.

물론 디자인 시스템을 갖추지 못한 회사는 그래픽 디자인의 완결성을 갖추기 위한 별도의 리소스, 인력이 꼭 필요합니다. 그래서 대게 UX기획과 GUI 디자인을 분리합니다.

UX 기획은 와이어프레임을 통해 시각적 정보 구조과 사용자 동선을 디자인합니다. UX기획자가 뼈대를 설계한다면, GUI디자이너 그 뼈대 위를 살을 붙입니다. 와이어프레임을 위에 UI를 그리는데, 이때 대비와 구분, 부피감 등을 조절하여 필요한 화면을 조형합니다.

흔히 프로덕트 디자이너라고 하는 직군의 경우는 UX설계, 그래픽 디자인을 한 명이 진행합니다.

설계자=메이커이기 때문에, 설계의 의도를 디자인으로 바로 반영할 수 있다는 점에서 이점이 있지만, 1) 회사 내 디자인 시스템이 갖춰져 있거나 2) 작업해야 하는 화면의 수가 많지 않고, 3) 동선이 복잡하지 않은 단순한 앱의 경우에 업무 진행이 가능하다고 할 수 있습니다. 그렇지 않을 경우에 UX설계나, 그래픽 디자인 둘 중의 퀄리티가 떨어질 위험이 높기 때문입니다.

 

 

2. What is a pixel-perfect design?

디자인의 정의가 확대되고, 변화함에도 불구하고, 통상 회사에서 디자이너라는 직군에게 갖는 기대감이라는 것은 ‘시각적 조형의 완성도를 책임지는 사람’ 이라는 생각 또한 듭니다.

'시각적 조형의 완성도'란 한마디로 정의하기도 어렵고, 이것을 판단하고 디벨롭 하는 것이야 말로 디자이너 고유의 역량이라는 생각을 합니다. 보기에 예쁜 것일 수도 있고 독창적인 크리에이티브가 돋보이는 것일 수도 있겠지요. 완성도라는 단어에 집중한다면 디스플레이(모바일 폰)의 상태에 맞게 프로덕트가 잘 표현되는가를 책임지는 것이 디자이너의 역할이 될 수 있습니다.

 

그래서 여기서 언급하고 싶은 것이 pixel-perfect design입니다.

 

A pixel-perfect design is one that provides the sharpest, cleanest, and representing the design without blurring. it's known as perfect sharp had resolution images.

 

2-1) 아이콘 파일 - svg 로 퍼블리싱 하기

2-2) pixel에 소수값 없도록 정리하기

2-3) 일러스트레이터, sketch 로 전환할 때 픽셀 값 무너지는 것 계산하기

 

위의 세가지 방법 등으로, 픽셀을 섬세하게 마무리하는 것이 요구됩니다. 디지털 프로덕트 안에서, 픽셀의 섬세한 마무리는 주니어 디자이너와 시니어를 판가름하는 부분이기도 합니다. 디테일을 대하는 태도가 프로와 아마추어의 차이인 것처럼 말이죠.