1. 스타일 가이드 (폰트, 컬러)
1) 폰트
UI는 Interface 즉, 사용자에게 보이는 얼굴을 디자인하는 것이기 때문에 스타일 가이드는 UI의 핵심이자 기본이라고 할 수 있다. 폰트는 서비스의 목소리 같은 역할이기 때문에 제품의 성향을 지속적으로 드러내는 일이라 마케팅과 UX 부서에서 리서치한 시장 상황을 체크해 가며 여러 가지 테스트 거치게 된다. 신뢰감을 주어야 하는 디지털 제품 판매 서비스 인지, 혹은 어린아이들을 대상으로 하는 귀여움이 강조되어야 하는 서비스인지 등등에 따라 폰트 디자인이 달라진다. 큰 규모의 회사라면 회사 자체에서 폰트를 제작해서 사용하는 경우도 있지만, 대부분의 디자인 작업은 폰트 제작까지 대규모로 직접 할 수 없는 경우가 많기에 상업적으로 이용이 가능한 폰트들을 찾아서 활용하는 것이 중요하다. 무료 혹은 유료 폰트마다 상업적으로 이용 가능한 범위도 다르고, 저작권 표기를 반드시 해주어야 한다는 조건이 있거나 혹은 폰트를 변형하는 것이 불가능한 경우도 있기 때문에 꼼꼼히 살펴보고 사용해야 한다. 학생 때 애용했던 Halvetica 폰트도 무료로는 상업적 이용이 불가능하다는 사실을 알고 매우 충격을 받았던 기억이 있다. 그러고 나서 폰트가 1개인지 2개 이상 사용하는지에 따라 폰트마다 사용 방법을 규정해 주어야 한다. 어떤 폰트는 제목에만 활용하고, 어떤 폰트는 팝업 창에만 사용하고 등등. 폰트 사이즈도 정해 주어야 한다. Heading, Sub title, Body 1-3, Caption 어떤 사이즈를 사용해야 하는지 예시도 간단하게 보여주며 제작해 준다.
2) 컬러
컬러를 선정할 때에도 폰트 고르는 것과 같이 타깃 시장에 맞춰서 컬러들이 일관성 있게 보여야 한다. 제품의 정체성을 드러낼 수 있는 시그니쳐 컬러를 정하고, 배경과 글씨와 같이 가장 많이 쓰이는 영역은 블랙과 화이트를 기본으로 결정하는 경우가 많다. 로고에서 사용하는 컬러를 참고해서 컬러 팔레트를 만들기도 한다. 그리고 추가적으로 특정 상황 (알림, 오류 상태 표시 등)도 고려해서 컬러 팔레트를 완성하면 된다. 그리고 몇 년 전부터는 라이트 모드, 다크 모드도 지원이 되어야 하기에 각 설정에 맞게 보이는 컬러 팔레트도 다르게 가이드를 주어야 한다. 그리고 컬러 팔레트 서류를 만들 때에는 반드시 Hex code 번호를 잊지 말고 넣어줘야 한다. 인쇄용으로 사용할 경우를 대비하여 RGB 모드 일 때와 CMYK 모드 두 가지도 따로 첨부해주면 제작 시 편리해진다.
2. 아이콘 디자인
홈화면, 검색하기, 카메라 등 universal 하게 사용되는 아이콘들이 있지만 앱 서비스에 맞게 새로 제작하는 경우도 많다. 아이콘을 다운로드하여서 사용한다면 폰트처럼 유료와 무료 사용으로 나뉘고 상업적 사용 가능 여부도 반드시 확인해야 한다. UI 디자인은 UX 디자인보다 조금 더 창작을 하는 영역에 가깝다 보니 저작권에 대한 법적인 사항에 영향을 받는다. 저작권법을 평소에 꼼꼼히 살펴보아야 하는 것이 UI 디자이너의 업무라고도 할 수 있겠다. 대부분 검색을 하면 자세히 나오지만 가끔 헷갈리게 저작권을 적어 둔 경우도 있으니 제작자에게 직접 이메일을 보내서 답변을 얻는 것이 가장 정확하다.
3. 그리드, 레이아웃 디자인
와이어프레임으로 정해진 기능들을 실제 사용자가 보는 화면으로 제작하는 것이다. Low fidelity에서 시작해서 High fidelity 작업으로 진행되는 경우가 많다. 처음 단계에서는 UX 디자이너와 협업하면서 버튼 위치나 화면 구성이 맞는지 확인을 하고 이후에 전문적인 디자인 툴을 사용해서 화면 디자인을 해주면 업무가 효율적으로 진행될 수 있다. 레이아웃 디자인을 할 때에는 아주 세밀하게 작업을 해야 한다. 가장 먼저 어떤 화면 사이즈를 기준으로 하게 되는지를 정해야 한다. 최근에는 폴더블 폰까지 나오면서 화면 사이즈가 굉장히 많아졌다. 물론 비율로 따지면 3~4가지 정도로 줄일 수는 있겠지만 출시 예정일 기준 가장 보편적인 스마트폰 혹은 모니터 사이즈로 진행하는 것이 안전하다. 가능하다면 여러 가지 사이즈 별 화면 구성도 반응형으로 만들어 두어도 좋다. 그다음 화면의 마진과 간격을 정해주어야 한다. 화면 가장 상단에는 날짜와 상태 표기가 들어가기 때문에 기본 마진을 고정 값으로 주어야 한다. 그다음에 회사 및 제품의 로고가 어디에 놓이는지, 메뉴는 어디에 둘 것인지 등 기본적으로 고정될 메뉴와 이미지들을 디자인한다. 앞서 스타일 가이드 안에 있던 폰트와 아이콘의 모두 가이드에 맞추어서 제작한다.
4. 피드백 (UX 디자이너, 개발자, 고객 테스트)
개인적으로는 가장 중요하다고 강조하고 싶은 부분이다. 사용성을 높이는 제품으로 제작이 되고 있는지 UX 디자이너들과 확인을 해야한다. 그리고 개발을 진행할 때 문제점은 없는 디자인일지, 개발에서 시간이 너무 많이 걸리는 부분은 없는지 체크하며 수정해야 한다. 또한 서비스 제작을 전혀 모르는 일반 고객들을 초대해서 테스트해 봤을 때 헤매는 부분은 없는지 등등 끊임없이 확인하는 작업을 거쳐야 한다. 이러한 사소한 피드백 내용을 놓치지 않고 반영해야 마지막 실제 제품을 출시할 때는 더 수월하게 진행할 수 있다.
댓글