brunch

매거진 디자인 아티클 번역

라이킷 943 댓글 15

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 신해나 May 01. 2016

체계적으로 UI 디자인 하기

Building design library

이 글의 원문은 Marek Minor 의 How To Be More Organized While Designing UI 입니다.

번역을 허락해준 Marek Minor에게 감사의 마음을 전합니다.

디지털 디자이너로서 4년간 일하고 난 뒤, 정보를 정리하고 분류하는 일에 자연스럽게 매료되었다. 그리고

이는 유저 인터페이스를 디자인하는 데 있어서 체계적으로 접근하도록 이끌었다.

디자인을 체계적으로 정리하는 일은 목표 지향적이면서 개발에서 영감을 얻은 접근이다. 또한 보편적이고 다양한 정보들이 수집되는 형태로 보여진다. 이를 통해 디자이너와 개발자는 서로 연결되어 같은 선상에 놓이게 된다. 원활한 커뮤니케이션은 더 잘 이해할 수 있도록 도와주고, 결과적으로는 더 나은 것을 만들게끔 도와준다.

사실 이러한 접근은 주로 디자인 뒷 단, 즉 우리가 시각 요소들 간의 관계에 대해 생각하며 더 많은 시간을 투자할 수 있는 디자인 마감 단계에서 많이 사용된다. 하지만 프로토타입이나 와이어 프레임을 제작하는 프로젝트 초기에서부터 이 접근 방식을 사용한다면 디자인과 개발 모두에 더 잘 적용될 수 있음을 의미하게 된다.

물론 디자인 프로세스에서 이를 적극 활용하는 것은 이미 흔히 알려진 것이다. 나는 Material Design, SCSS Variables, Macaw, Origami, Atomic design과 다양한 패턴 라이브러리에서 영감을 얻었다.

나의 의도는 순수하다.

큰 규모의 프로젝트를 다루는 동안 구조의 부족으로 인한 귀찮은 디자인 과정 때문에 지쳤었다. 비록 최근 Sketch의 업데이트와 Craft와 같은 플러그인이 어느 정도의 과정을 올바른 길로 인도하고 있지만, 여전히 흠잡을 데가 없다고는 할 수 없다. 그래서 여기 더 좋은 과정을 위한 몇 가지 예시들을 선보이려 한다.

01. 명확한 오버 뷰 갖기

나는 20여 개의 다양한 서체 사이즈와 50가지의 회색들과 함께 내 프로젝트가 끝나는 것을 막기 위해 명확한 오버 뷰를 가지고 싶었다. 그리고 현재 어떤 종류의 둥근 모서리와 서체 크기, 서체 색상, 배경 색을 쓰고 있는지 보고 싶었다.

아 이 정신 없음을 어찌 해야할까?

02. 스타일 묶어서 보기

디자인의 어떤 부분이 스타일 속성의 변화와 관련이 있을까? 나는 어떤 폰트가 특정 케이스에 가장 적합한지 정의하고 싶었다. 가독성을 확보하기 위해 UI에서 Sans-Serif 서체를 사용한다거나 Serif 서체는 큰 사이즈를 사용하는 것 또는 Light와 Dark 두 가지 버전의 타이포그래피 스타일을 갖는 것을 예로 들 수 있다.

어떤 상황에 어떤 폰트를 사용해야할까?

03. 스타일 속성 간 짝을 이루게 하기

나는 16px 크기의 Karla 서체가 문단이건 토막글이든 부가 설명이나 인용문이든 상관없이 항상 1.2px의 Line-Height 값을 가지기를 원했다.

같은 서체 두께와 line-height를 유지하는 것은 쉬운 일이 아니다.

04. 한 번에 수정하기

50개 이상의 아트 보드들과 함께하고 있던 중, 작은 수정을 하고 싶었다 하지만 이를 위해 전체를 확인해볼 수 는 없는 노릇이었다. Header 한 곳에서 서체를 수정하면 모든 Header에서 일괄적으로 반영되는 모습이 보고 싶었다.

난 그저 Header의 서체만 바꾸고 싶었을 뿐이었는데...

나는 메인, 서브, 딤 서체의 색상을 다르게 사용하는 것과 같은 행동을 매 프로젝트마다 반복하고 있다는 것을 알아차렸다. 또한 내가 만든 어떠한 시각적 계층구조도 컨트롤하고 있지 않다는 것을 알아차렸다. 이 것이 바로 내가 만든 수정사항들을 최대한으로 자동화하려고 한 이유이다.

기본적인 원칙.

01. 모든 것은 오브젝트다.

모든 레이아웃은 오브젝트들로 구성된다 - Header, Footer, Button과 Dropdown, Link 까지. 우리는 이러한 오브젝트들을 각각 분리된 것으로 생각할 수도 있고 이것들 자체를 디자인할 수 있다.

02. 모든 것들의 속성

모든 오브젝트들은 본연의 속성을 가진다. 모든 헤드라인은 그것의 색상과 크기, Line-height를 갖게 되고 모든 버튼은 특정 크기와 배경 색상 또는 서체를 가진다. 이것이 바로 코드가 작동하는 방식이다. 왜 이런 사고방식을 디자인하는 동안 사용하지 않는가?

03. 라이브러리

여기 진짜 재미가 있다. 우리는 다양한 속성들 (예를 들어 서체 크기, 회색 톤, 모서리 둥글기, 헤드라인 서체와 같은)에 관한 작은 견본 블록을 만들어 볼 수 있다. 이 견본 블록들이 모여서 큰 시각적 체계를 볼 수 있는 라이브러리를 형성하게 된다.

기본 블럭

이때 속성 별로 카테고리를 만들 수 있다. 이 것들은 라이브러리와 디자인 오브젝트 사이에서 중개인 역할을 하게 되고, 이러한 속성들을 SCSS의 방식과 같이 각종 케이스에 적용하여 사용하면 된다.

04. 준비되어 있기

우리는 모든 형태 (메인 용, 서브 용, 면 타입 또는 라인 타입 버튼)와 상태 별로 (disable, normal, hover) 디자인을 하게 된다. 이것들을 정리해두는 것은 약간의 노력을 필요로 하는데 그리 많은 시간을 요구하지는 않는다. 미리 해두면 곧 우리는 스스로에게 고맙게 느낄 것이다.

오브젝트의 상태 별 케이스를 디자인 해두기

어떻게 활용해야 할까?

기본적인 접근은 재료들을 정리하는 것과 그들 간의 관계에 대해 생각하는 것이다. 그다음 단계는 시스템을 서포트할 수 있도록 우리의 툴들을 개선하고 쪼개는 것, 그래서 우리의 생산성을 높이는 것이다.

예를 들어, Sketch에서는 SCSS와 같이 스타일 수정사항이 일괄 반영될 수 없다. 이게 바로 모든 조합에 대응하여 스타일 시스템을 만들어줘야 하는 이유이다.

SASS / SCSS란? https://opentutorials.org/course/470/2488

사용하는 모든 조합에 대응하여 스타일 시스템 구축하기

단지 리스트 아이템 문구의 사이즈를 수정하기 위해서 특정 한 아이템만 바꾸고 싶었음에도 불구하고, 불가피하게 해당 텍스트 서식을 사용하고 있는 모든 오브젝트를 수정해야 했다. 'S-Size'의 서체를 사용하는 모든 오브젝트를 말이다.

프로젝트 안의 시각적 관계를 확인할 수 있고 유지, 보수할 수 있는 (Mindnode와 같은) node base의 에디터를 상상해보자. SCSS 파일을 읽을 수 있고, 스케치와 연동이 되어 공유된 스타일이 업데이트되는 것 말이다.

노드 기반의 에디터는 시각적 체계를 유지보수하는 데 도움을 준다.

사용 예시.

01. 서체

위 이미지를 보면 산세리프 서체는 UI와 헤드라인에 사용되고 있고, 콘텐츠가 긴 문장인 경우 또는 좀 더 감각적인 디자인이 필요한 상황에서 세리프 서체를 사용하도록 정의되어 있다.

02. 서체 사이즈와 Line Heights

위 예시에서 Line Heights는 특정 폰트의 특정 사이즈와 연결된다. (예를 들어 : 모든 12px의 Karla 폰트는 라인 하이트 1.8을 갖는 반면 14px 일 경우 Line Height는 1.75가 된다.) 우리는 이것들을 개별적으로 생각할 수 있는데, 결과적으로는 연결되어 있다. 큰 서체는 더 크게 보이기 때문에 작은 Line Height를 필요로 한다는 것을 기억하자. 또한 텍스트가 한 줄일 경우, 여러 줄일 경우 이야기가 달라지기 때문에 상황에 맞춰 적절하게 패딩 값을 설정해주어야 한다.

03. 색상

앞서 이야기 한대로, 타입의 컬러를 선택할 때 항상 메인과 서브 그리고 딤된 레이블의 컬러까지 전체 프로젝트 안에서 연속성을 필요로 한다는 것을 알아차렸다. 사용할 색상에 음영을 넣어 기본 색상 팔레트를 만들자. 라이트, 다크 버전 인터페이스의 디테일을 잡기 위해서 이것들이 필요할 것이다.

왜 이렇게 해야 할까.

01. 유지 보수하기 쉽다.

시스템을 만드는 것은 프로젝트를 진행하는 데 있어서 우리에게 더 많은 컨트롤 권한을 준다. 스타일 가이드는 우리가 빠르게 수정할 수 있도록 만드는 오버뷰의 역할을 하게 된다. 이는 백지에서 시작하는 것보다 훨씬 빠르며, 프로젝트에서 오래간 손을 뗐다가 다시 시작해야 할 때 또는 다른 디자이너에게 넘겨줘야 할 때 요긴하다.

02. 일관성을 갖도록 한다.

기본 오브젝트와 파라미터를 사용하는 것은 적은 스타일의 디자인 요소를 사용하도록 한다. 라이브러리에서 1차적으로 사용해보고 잘 어울리지 않으면, 새로운 오브젝트를 만들면 된다. 이것들은 일관성을 가지게 해주며 거의 비슷한 여러 개의 텍스트 서식을 사용하는 일을 막아준다.