체계적으로 UI만들기(1)

디자이너로 일을 시작한지 어언 2년, 지금까지 디자인을 하면서 체계를 가지고 제작을 하지 못한 부분이 항상 마음에 걸려왔다.

사람들에게 보여지는 디자인의 뒷부분을 체계를 갖고 구축하는것은 생각보다 시간과 노력이 많이 걸리는 부분이다.

체계라는 것은 디자이너를 위한 디자인 이면서 개발자(android 또는 ios)와 원활한 협업을 위한 선택적인 부분이다.

먼저, 체계없이 디자인을 제작할때 생기는 문제는 다음과 같다.

1. 수십여가지 이상의 색상코드(컬러)생성

즉흥적으로 디자인을 하다보면 나도 모르게 ColorPicker를 찍어 사용하는 색상이 많아진다.

이런 경우가 쌓이다보면, 프로젝트 끝날무렵에 수십여가지의 비슷한 색상을 만날 수 있다.

ex) GrayColor 20여가지 또는 BlackColor 20여가지 등…

같은계열의 여러컬러 추출

2. 다양한 좌우 여백

보통의 경우 Grid 또는 Layout을 선작업 후 디자인을 한다. 하지만, 규칙을 정해놓지 않고 일을 하면 새로운 화면을 만들때마다 좌우 여백크기가 달라진다.

예를 들어, 이전에는 8dp를 사용했지만, 현재는 10 혹은 20dp를 사용하여 각 화면마다 마치 다른사람이 제작한 듯한 dp들을 만나볼 수 있다.

왼쪽(10dp) / 가운데(20dp) / 오른쪽(24dp)

3. 중복

개발자(andorid 또는 ios)에게 넘기는 아이콘의 이미지는 같지만 이름이 다양하게 추출될 수도 있고, 이름은 같지만 아이콘이 다른 경우가 발생할 수 있다. 이런경우는 개발이 진행되는 과정 중에 디자인팀과 개발팀이 체크하는 단계가 생기기 때문에 서로 불필요한 시간이 소비된다.

위(이름은 같지만 아이콘이 다른 경우) / 아래(아이콘은 같지만 이름이 다른 경우)

4. 재활용 되지 않은 요소

정해진 규칙없이 제작하다보면 다양한 스타일이 나오기도 한다.

1) 팝업 텍스트 정렬 또는 크기가 다름

왼쪽(가운데정렬, 가로288) / 오른쪽(왼쪽정렬, 가로296)

2) 리스트스타일 폰트 크기 또는 높이가 다름

왼쪽(높이60dp, 글씨15sp) / 오른쪽(높이56dp, 글씨16sp)

위 문제점들을 해결하기 위해 Sketch Symbol을 활용하여 새프로젝트에서 사용될 CashWalk UI Kit을 제작하고 있는 단계이다.

다음에 소개될 글은 [체계적으로 UI만들기(2)] 로 제작되는 과정일부를 공개할 예정이다.