체계적으로 UI만들기(1)를 이어서 제작 과정 일부 공개
우리는 Sketch로 UI제작을 하고 있다. Sketch만으로 제작할 수 없는 그래픽 요소는 Photoshop, Illustration, Aftereffect 등을 활용하고 있다.
각각의 서비스는 대략 20여개의 화면이 추출된다. 그때마다 사용하는 요소는 중복인 경우가 일반적이다.
이때, 중복으로 사용하는 소스는 Symbols로 대체 할 수 있다. 심볼의 장점은 다음과 같다.
- 여러 화면의 요소를 하나씩 수정하지 않아도 된다.
- 사이즈만 같다면, (A_심볼)은 (B_심볼)로 변경할 수 있다.
- 리소스 관리하기 편하다.
- 심볼이 가이드가 될 수 있다.
1. Color
서비스에서 사용하는 컬러를 Symbols 지정 후 최소한의 컬러로 최대한의 효과를 낸다.
컬러는 보통 각각의 컬러마다 사용하는 곳이 고정되어있기 때문에 심볼로 지정해 놓으면 추후에 변경해야할 때 번거로움을 줄여줄 수 있다.
*위 17가지의 컬러는 캐시워크에서 사용중인 컬러이다. 아이콘, 텍스트, 버튼, 그라데이션 등이 포함되어있다.
2. Text
텍스트를 심볼화 하는 이유는 다음과 같다.
- size, color, character, line, paragraph를 통일 시킬 수 있다.
- 텍스트 가이드(최대글자수, 좌우마진 등…)를 제작하기 편리하다.
- 텍스트 사용 혼동을 막을 수 있다.
처음에는 “굳이 텍스트를 심볼로 만들 필요가 있나?” 라는 생각이 있었다.
하지만, 실무에서 활용해보았을때 혼동이 생기는 것을 방지할 수있다. 그리고 가이드(최대글자수, 좌우마진 등…)제작시 기준을 세우는데 유용했다.
3. Icon
서비스에 필요한 Icon은 대부분 심볼로 만드는 것이 추후에 디자인팀 뿐만 아니라 개발팀에서도 리소스 관리측면에서 좋다.
우리는 아이콘 리소스 사이즈를 고정하여 사용하는데 가이드 사이즈가 리소스 사이즈보다 작은 경우는 개발팀에서 조절하여 사용한다.
아이콘 사이즈를 고정하면 좋은점은 다음과 같다.
- 같은 디자인이지만, 다양한 사이즈가 리소스로 빠지는 것을 방지
- 디자인 리소스 관리측면(이름, 리소스용량 등)에서 좋다
4. System symbols
System ui란, 서비스 내에서 보편적으로 사용하는 UI요소(stusts bar, action bar, tab bar, popup등)를 뜻한다.
많이 사용하는 시스템요소를 심볼로 제작하면 추후에 재활용 또는 수정 하였을때 편리하다.
스케치는 심볼을 근거하여 서비스를 시각적으로 또는 체계적으로 제작할 수 있는 가장 훌륭한 툴이다.
우리는 앞으로 부족했던 체계를 갖추어 다른 팀(기획, 개발팀 등)과 협업을 하며 서로에게 불필요한 시간 소모하는 일을 없애기 위해 노력할 것이다.
