UI 디자인, 잘 하기 위해 필요한 것
UI 디자인에 이제 막 첫 걸음을 뗀 분들에게
환영합니다! 여러분은 이제 UI디자인의 첫 걸음을 뗐습니다. ‘천 리 길도 한 걸음부터’ 라는 말이 있습니다. 이 말을 조금 나눠서 생각해 볼게요. ‘한 걸음’을 떼는 것도 중요하지만, ‘천 리 길’ 처럼 큰 목표를 명확히 하는 것도 중요할 것 같습니다. 따라서 UI 디자인을 잘 하려면 UI디자인이 무엇인지, UI디자인에서 중요하게 여겨지는 가치는 무엇인지, 관련 툴에는 어떤 것들이 있는지부터 알아보는 것도 좋을 것 같습니다.
UI 디자인이란?
이제 우리는 UI 디자인을 시작하려고 합니다. 먼저 UI(User Interface)디자인이란 무엇일까요? 위키백과에서는 이렇게 표현하고 있습니다.
사용자 인터페이스(영어: user interface, UI)는 사람(사용자)과 사물 또는 시스템, 특히 기계, 컴퓨터 프로그램 등 사이에서 의사소통을 할 수 있도록 일시적 또는 영구적인 접근을 목적으로 만들어진 물리적, 가상적 매개체를 뜻한다.
조금 어렵네요. 쉬운 이해를 위해 상황을 곁들여 보겠습니다. 여러분은 스마트폰으로 전화를 걸기 위해 어떤 행동을 하시나요? 다소간의 차이는 있겠으나 대부분 아래 순서로 진행될 것입니다.
1. 핸드폰을 켠다
2. 잠금화면을 해제한다
3. 홈 화면에서 ‘통화’ 앱을 켠다
4. 통화할 사람의 전화번호를 입력한다
5. ‘통화하기’ 아이콘을 누른다
6. 통화한다
이 과정을 진행하는 중 사용자가 본 모든 아이콘, 숫자패드, 텍스트 등의 그래픽이 모두 UI입니다. 사용자는 스마트폰을 통해 ‘통화’ 라는 목적을 달성하기 위해 무의식적으로 방법을 찾게 되고, 스마트폰은 사용자가 그 목적을 효과적으로 달성할 수 있도록 다양한 형태의 ‘시각 매개체'를 보여주었다고 말할 수 있기 때문입니다.
스마트폰이 없었던 과거에도 UI라는 개념은 다양한 곳에서 쓰여 왔습니다(우리가 입는 티셔츠 4개의 구멍도 UI라고 생각해볼 수 있습니다). 하지만 요즘에는 디지털 환경에 대한 관심과 활용도가 높아짐에 따라, 수많은 UI 사례를 모바일, 데스크탑 등 디지털 환경에서 쉽게 찾아볼 수 있게 되었습니다.
UI디자이너에게 중요한 것은?
컴퓨터 앞에 앉아 실제로 UI를 그려보기 전, 디자이너는 어떤 가치를 염두에 두는 것이 좋을까요? 실무 디자이너의 경험에 기반해 정리해 보았습니다. 한번 읽어보신 후 디자인에 대해 본인이 생각하는 중요한 가치와 비교해 보시는 것도 좋을 것 같습니다.
논리, 효율성
UI 디자인이 시각적인 직무이다 보니 종종 서비스를 예쁘게 만들어주는 직무인 것으로 오해를 사기도 합니다. 물론 디자이너에게 심미성도 중요한 가치 중 하나입니다. 하지만 논리 없는 UI 디자인은 아무리 예쁘더라도 최종적으로 서비스에 반영되기 어렵습니다. 대부분의 경우, 팀이 이루고자 하는 목표를 이해하고 그에 맞게 UI라는 옷을 입혀야 하기 때문입니다. 설령 서비스에 반영되었다고 하더라도 비즈니스에 심각한 타격을 입힐 가능성이 높아집니다. 손님이 음식점에서 햄버거를 시켰는데 콜라가 나온다면, 콜라를 담은 컵이 아무리 예뻐도 클레임을 피할 수 없는 것과 같은 이치입니다. 따라서, 대다수의 경우 UI자체가 돋보이는 것이 아닌 프로젝트의 목표를 이해하고 그것을 잘 달성할 수 있는 UI가 무엇인지 고민해야 합니다.
UI를 효율성의 관점에서 바라보는 것도 중요합니다. 필요할 때마다 같은 UI를 반복적으로 그리는 것은 디자이너에게도 개발자들에게도 비효율적이기 때문입니다. UI가 그려지는 디지털 환경에 대한 이해를 바탕으로 공통 UI 컴포넌트의 구조, 인터랙션 등을 효과적으로 설계한다면, 반복적인 일을 최대한 효율적으로 처리할 수 있게 됩니다. 그 예시로, 최근에는 비즈니스 영역을 막론한 많은 회사에서 ‘디자인 시스템' 이라는 이름으로 UI 에셋을 보다 효율적으로 관리하고 있습니다.
심미성
브랜드와 어울리면서도 깔끔한 UI는 유저에게 만족스러운 서비스 경험을 제공합니다. 하지만 우리는 심미성을 단순히 ‘아름다운 화면을 만든다’ 라는 관점보다 넓게 생각해볼 필요가 있습니다. 브랜드 전략을 이해하고 이에 맞는 형태로 UI의 심미성을 고민하는 것이 중요하기 때문입니다. 화면에 들어갈 아이콘, 일러스트레이션 등을 톤앤매너에 맞게 제작하는 것도, 복잡한 기능을 쓰기 쉽게 정돈하는 것도 이러한 브랜딩의 관점에서 연결지어 생각해볼 수 있습니다. 이렇게 심미성을 고려한 시각 작업물을 만드는 것으로 더 나은 브랜드 경험, 더 높은 브랜드 신뢰도에 기여할 수 있습니다.
툴, 디지털 환경에 대한 이해
디자이너라면 논리적인 디자인, 심미성 있는 디자인을 실제 제품으로 출시하기 위해 실질적으로 어떤 툴을 어떻게 사용하면 좋을지 판단하고 활용할 수 있어야 합니다. 앞으로 중간중간 다룰 피그마 이외에도 어도비 XD, Sketch, Protopie 등 UI디자인에 도움을 주는 다양한 툴이 있습니다. 프로젝트나 조직, 현재 상황 등을 고려해 맞는 툴을 선정하고, 이를 적절히 활용해 자신의 머릿속에 있는 UI를 실제 구현 가능한 상태로 표현해낼 수 있어야 할 것입니다.
디지털 환경에 대한 이해도 중요합니다. 구체적인 예시는 다음과 같습니다.
- jpg, png, vector, pixel 등 디지털 에셋 형태에 대한 이해
- 웹, 데스크톱, 안드로이드, iOS 등 다양한 모바일 환경의 이해
- 실제 구현될 제품에 근접한 프로토타입 제작
디자인 환경에 대한 이해는 요리 재료를 파악하는 것과 비슷합니다. 만들고자 하는 제품의 환경을 이해하고 적절히 활용하는 것으로, 실제 제품 구현의 효율성과 완성도를 높일 수 있기 때문입니다.
툴은 툴일 뿐입니다.
앞으로 ‘피그마' 라는 툴 위주로 UI디자인에 대한 글을 연재할 예정입니다. 그렇지만 디자인 툴은 굉장히 빠르게 변화하고 있습니다. 불과 몇 년 전까지만 해도 UI 디자이너의 주력 툴은 스케치였고, 그 전에는 포토샵이었습니다. 이외에도 Adobe XD, ProtoPie, Framer 등 저마다의 장점을 가진 다른 툴도 존재합니다.
피그마를 써야 하는 이유를 뒤집어 말하면, 다른 방식이 더 효율적일 경우 피그마를 버릴 용기가 필요하다는 이야기도 됩니다. 어떤 기능이 어느 자리에 있는지, 단축키는 무엇인지 등 툴에 대해 구체적으로 알고 있는 것은 분명 디자인 작업 효율을 높여줍니다. 하지만, 프로덕트 디자이너에게 가장 중요한 것은 툴 자체보다는 논리적, 구조적인 생각과 표현 능력이라고 생각합니다. 그렇기 때문에 디자인 툴이 어떻게 변화하는지 주기적으로 체크하고, 필요하면 언제라도 더 좋은 툴로 바꿀 수 있는 마음가짐을 가지는 것이 좋은 것 같습니다. 아래는 피그마 외 알아두면 좋은 디자인 툴입니다.
스케치(Sketch)
스케치 웹사이트 (https://www.sketch.com/)UI 디자인의 전통강자 툴입니다. 강력한 UI 디자인 기능과 다양한 플러그인을 제공합니다. 하지만 MacOS에서만 실행 가능하고, 유료이며, 로컬 클라이언트 기반이라 공유 및 협업을 위해서는 Zeplin, Abstract 등 다른 툴과 함께 사용하게 됩니다.
Adobe XD
어도비 XD 웹사이트 (https://www.adobe.com/kr/products/xd.html)디자인 툴의 대명사, 포토샵을 만든 Adobe 사의 UI 디자인 툴입니다. 강력한 UI 디자인 및 프로토타이핑 기능을 가지고 있으며 애프터이펙트, 포토샵, 일러스트레이터 등의 다른 어도비 툴과 호환성이 좋습니다. 윈도우, MacOS 둘 다 실행 가능합니다. 하지만 컴포넌트 기능이 다른 툴에 비해 충분히 고도화되어있지 않으며, Path 드로잉에 적합하지 않습니다. 클라우드 기반 실시간 협업 기능이 있지만, 제대로 협업 기능을 사용하려면 유료 결제가 필요합니다.
프로토파이(ProtoPie)
프로토파이 웹사이트 (https://www.protopie.io/)UI디자인 각각의 장면만으로는 실제로 어떻게 동작할지 알기 어렵습니다. 일반적으로 프로토타이핑은 실제 개발이 시작되기 전, UI 디자인에 인터랙션을 입혀 실제와 유사하게 동작하게끔 ‘시제품(프로토타입)' 을 만드는 행위를 말합니다. XD, 피그마, 스케치 등 UI 디자인 툴에서도 프로토타이핑이 가능합니다. 하지만 기본적으로 UI디자인에 기능이 집중되어 있다 보니 고도화된 프로토타이핑이 어려운 경우가 생기게 됩니다. UI 디자인 툴에서 디자인을 완료하고, 프로토파이와 같은 프로토타이핑 전용 툴에 디자인 시안을 옮겨 실제와 유사한 플로우를 구현해볼 수 있습니다.
프레이머(Framer)
프레이머 웹사이트 (https://www.framer.com/)프레이머는 요즘 다시 주목받고 있는 디자인 툴로, 코드와 디자인을 더욱 밀접하게 연결할 수 있는 툴입니다. 직접 코딩할 줄 모르더라도 강력한 UI드로잉, 디자인 시스템 관련 기능을 제공하고 있어 활용도가 높고, 코드 친화적인 툴이라는 장점을 활용해 디자인한 페이지를 바로 웹사이트로 만들어주는 서비스를 베타로 서비스하고 있습니다. 더 나아가 디자이너가 UI 개발 로직을 함께 고민한다면, 개발자와 함께 협업해 하나의 컴포넌트를 디자인과 개발에 모두 활용할 수도 있습니다. 한국에서는 금융 서비스 토스의 디자인 시스템 활용 사례가 유명합니다.
지금까지 UI디자인에 대한 간단한 소개, 관련 툴은 무엇이 있는지 알아보았습니다. 소개해 드린 툴 이외에도 다양한 디자인 툴이 있으며, 시간이 지날 수록 더욱 다양해질 수 있습니다. 하지만 여러 툴을 사용할 줄 아는 것보다 중요한 것은, 어떤 툴이 현재 상황에 적절한지 빠르게 파악, 선택해 디자이너로서 적절한 해결책을 제안할 수 있는 역량일 것입니다.
