UI 디자인 툴 Top 3 비교하기 - 스케치, XD, 피그마 - UIUX 디자이너라면 꼭 알아야할 UI 디자인 툴 트렌드 (ui 디자인 툴킷 TOP 10)
Ssinsu2024. 12. 15. 19:57
반응형
SMALL
UI 디자인 툴 Top 3 비교하기 - 스케치, XD, 피그마
UI 디자인 툴 삼대장!
#Sketch#AdobeXD#Figma
왼쪽부터 스케치, XD, 피그마 로고
스물일곱 번째 <주간 인프런> 은 UX/UI 디자인에 대해 다룹니다. 특히 이번에는 UI 디자인 툴에 대해 살펴볼 거예요. 우리가 액정 너머로 보고 있는 화면을 설계하고, 서비스에 맞는 일정한 톤을 고민하고, 우리의 경험과 행동을 이끄는 UI 디자인! 디자이너들이 UI를 디자인할 때 가장 애용하는 세 가지 툴, 스케치(Sketch)와 피그마(Figma) 그리고 XD를 비교해 봅니다.
이밖에 UI 디자인 툴을 따로 쓰는 이유가 있을지, 디자이너가 아닌 직군에서 UI 툴을 활용할 수도 있을지에 대해서도 짧게 이야기하려고 해요. UI 디자인이 궁금했지만 뭐가 뭔지 낯설었던 분들께 이번 <주간 인프런> 이 작게나마 길잡이가 될 수 있기를 바랍니다! 💌
잠깐, UX/UI가 뭘까요? 🤔
UX(User eXperience) - 사용자 경험 사용자 관점에서 이뤄지는 서비스에 대한 경험을 말합니다. 무엇을 필요로 하고, 겪게 되고, 그 과정에서 어떤 감정을 느끼고 행동하는지가 모두 UX예요.
UI(User Interface) - 사용자 인터페이스 사용자가 서비스 안에서 마주 보는(인터페이스) 요소를 말합니다. 서비스 내에 배치할 수 있는 여러 요소를 활용해 서비스의 특정한 기능을 구성하고 UX를 이끌어내는 역할을 하죠. 특히 버튼, 아이콘, 폰트, 컬러, 레이아웃 등 그래픽 요소를 활용한 인터페이스를 GUI(Graphic User Interface)라고 해요.
(<주간 인프런> #27에서는 편의상 GUI 디자인 툴을 ‘UI 디자인 툴’로 부르고 있어요. 참고 부탁드려요!)
포토샵은 이제 안녕, 전용 UI 디자인 툴이 필요한 이유
본격적으로 UI 디자인 툴에 대한 이야기를 하기에 앞서 질문 한 가지! 여러분은 ‘디자이너’ 하면 가장 먼저 어떤 툴을 떠올리시나요? 여러 가지를 꼽을 수 있겠지만, 뭐니뭐니해도 가장 대중적인 디자인 툴이라면 단연 포토샵(Photoshop)이겠죠. 전문 디자이너부터 개인 사용자까지 이미지 편집 및 2D 그래픽 디자인 작업에 포토샵을 사용하니까요. 디자인 입문을 위한 툴로도 가장 먼저 꼽히는 툴이기도 하고요.
UI 디자인 분야도 예외는 아니죠. 오랫동안 많은 디자이너들이 UI를 디자인하는 데 포토샵을 애용해 왔어요. 불과 몇 년 전까지만 해도 디자이너가 포토샵과 일러스트레이터를 이용해 웹 인터페이스를 디자인하는 경우가 종종 있었습니다. 하지만 이제는 UI 디자인에 포토샵을 주로 쓰는 디자이너를 찾아보기 어려운데요.
그렇다면 이런 질문을 해볼 수 있겠죠. 도대체 왜, 이제까지 쓰던 포토샵을 두고 다른 UI 디자인 툴로 넘어간 걸까요? 대답은 간단합니다. 바로 UI를 그리는 데 포토샵이 충분히 적합하지 않기 때문이에요.
비트맵 대 벡터
우선 포토샵은 비트맵(Bitmap) 방식의 툴입니다. 사각형의 픽셀(pixel) 단위로 이루어진 그래픽 형식을 따르죠. 때문에 이미지가 커지면 그만큼 들어가야 하는 픽셀의 수도 따라 많아집니다. 크고 복잡한 이미지를 편집하게 되면 PC가 작업을 처리하는 데 부담이 갈 수밖에 없어요.(작업이 느려지면 업무 효율은 물론 정신건강에도 해롭고요😥)
포토샵은 비트맵 방식, 일러스트레이터는 벡터 방식의 그래픽 툴입니다. 벡터 방식은 이미지의 정보를 수학적인 공식으로 저장하기 때문에 이미지를 아무리 키워도 깨지지 않고, 용량도 가볍죠.
이뿐만이 아닌데요. 포토샵은 2D 그래픽 디자인 영역에 두루 쓰이는 프로그램답게 기능이 무척 많습니다. 그런데 기능이 ‘너무’ 많다는 점이 오히려 문제가 될 수 있어요. 이미지를 왜곡해서 특이한 효과를 만들어내거나, 색을 보정하거나, 3차원처럼 보이는 개체를 만든다거나… 온갖 기능을 제공하는 만큼 강력한 툴이지만, 정작 UI를 그리는 데 이 모든 기능을 쓰지는 않죠. 포토(Photo)샵이라는 이름처럼 이미지 편집을 중심으로 만들어진 툴이다보니 UI 디자인 작업에 딱 맞는 환경을 제공해주지는 않습니다. 벡터 방식의 디자인 툴로 널리 쓰이는 일러스트레이터(Illustrator)도 쓰지 않을 기능이 너무 많기는 마찬가지고요.
포토샵의 경우 권장 사양이 RAM 8GB 이상입니다. 프로그램 자체 용량도 상당히 무겁고요.
한편, 스마트폰이나 태블릿 PC 등 웹 환경이 모바일 디바이스로 넘어온 것도 전용 UI 디자인 툴의 등장을 부추겼습니다. 하나의 애플리케이션이라도 기기에 따라 해상도가 달라지는 만큼 다양한 해상도에 맞는 UI가 필요하기 때문이죠.
하나의 애플리케이션이라도 디바이스에 따라 해상도에 맞는 여러 UI를 요구해요.
그렇다면 포토샵에서 다양한 기기에 대응하는 UI 디자인 작업이 불가능할까요? 그렇지는 않습니다. CC 2015 버전부터 포토샵은 대지(artboard, 아트보드) 기능을 도입했는데요. 하나의 포토샵 파일 안에서 각기 다른 작업을 할 수 있게끔 여러 개의 작업창을 만들고 편집할 수 있는 기능인데요. 특히 같은 디자인 요소를 쓴 이미지를 다양한 매체와 해상도에 맞춰 여러 가지 버전으로 만들 때 활용할 수 있어요.
대지를 이용하면 하나의 PSD 파일 안에서 일관된 디자인 이미지를 규격만 달리해 여러 장 만들기 편리해요.
문제는 대지가 많아지다보면 포토샵이 금방 버벅인다는 점인데요, 프로그램 자체도 무거운데 소화해야 할 작업창까지 많아지면 일반적인 사양의 PC로는 감당하기 어렵기 때문이죠. 때문에 대지를 지원하더라도 포토샵을 UI 디자인에 활용하기에는 무리가 있고요.
벡터 방식의 일러스트레이터는 사정이 조금 낫습니다. 그렇지만 포토샵만큼은 아니더라도 프로그램 자체가 무거운 편인데다, UI 디자인만을 위해 만든 툴이 아니다보니 실제 작업에서는 여러모로 불편한 점이 많은데요. 작업을 위해 그리드(작업 영역을 구분하기 위한 선)를 나누거나, 하나의 앱에서 반복되는 특정한 디자인 속성을 불러오거나, 디자인이 실제로 어떻게 동작하는지를 간단히 알아볼 수 있는 프로토타이핑*을 하는 데는 어려움이 따르죠.
프로토타이핑(Prototyping)?
프로덕트 개발 과정 초기에 시스템의 모형(Prototype)을 간단히 만든 뒤 실제로 사용해보게끔 하고, 요구사항을 받아 즉각적으로 기능을 수정, 보완하고 개선시켜나가는 방식을 뜻합니다.
여기에 개발 환경의 대세가 변한 것도 한몫했어요. 개발 업계에서는 일명 워터폴(Waterfall)이라고 하는 프로젝트 관리 방법론이 오랫동안 주류로 여겨졌는데요. 말 그대로 폭포수가 쏟아지듯 위에서 아래로(Top-Down) 작업을 밟아 나가는 방식으로 프로젝트를 진행합니다. 한 단계가 완전히 끝나기 전까지는 그 다음 단계의 업무를 하지 않고 순차적으로 개발이 이루어지죠. 하나의 프로젝트를 끝내기 위해 각 단계를 순차적으로 진행하는 만큼 서비스를 배포하는 주기도 그만큼 길고, 업데이트 역시 정기적으로 이루어지죠.
하지만 2000년대 초부터는 실리콘밸리를 중심으로 워터폴에 대항한 애자일(Agile) 프로세스가 자리를 잡기 시작합니다. 애자일이란 ‘민첩한’ 작업을 지향하며 짧은 단위의 업무 프로세스를 빠르게 반복하는 개발 방법론이에요. 워터폴이 하나의 프로젝트를 단계별로 오랫동안 준비해서 내놓는다면, 애자일은 프로젝트를 최대한 빠르게 만들어 내놓은 다음 사용자의 피드백을 토대로 버그나 보완점을 바로바로 수정하는 데 집중하죠. 디자인 중심으로 사고하는 ‘디자인 씽킹(Design Thinking)’, 5일 안에 문제를 설정하고 프로토타입을 만들어 신속하게 테스트하는 ‘디자인 스프린트(Design Sprint)’, 사용자들이 원하는 것에 대한 가설을 세우고 이를 검증하는 ‘린 UX(Lean UX)’ 같은 여러 가지 방법론 역시 애자일과 흐름을 같이합니다.
스크럼(Scrum)은 애자일 프로세스의 대표적인 프로젝트 관리 방법론 중 하나입니다.
애자일의 핵심은 바로 ‘사용자(User)’인데요, 사용자의 입장에서 문제를 발견하고, 문제를 해결하고 성과를 달성하기 위한 가설을 세우기 때문입니다. 가설에 따라 프로젝트를 빠르게 진행하고 나면 곧바로 사용자의 피드백을 받아 보완하고요. 모든 과정이 사용자를 중심에 두고 진행되는 만큼 사용자 경험, 즉 UX의 중요성이 강조됩니다. 자연히 화면을 설계함으로써 사용자로부터 원하는 행동을 이끌어내기 위한 UI 역시 중요할 수밖에 없죠.
훌륭한 UX를 이끌어내기 위해서는 그에 맞는 UI 디자인이 필요하죠.
기획 - 개발 - 디자인이 프로덕트별로 작은 단위를 이루어 빠르게 협업하고, 프로토타입까지 만들어 테스트까지 마치기 위해서는 이를 위한 여건이 따라줘야 해요. 포토샵처럼 무겁고, UI 디자인에 최적화되어 있지 않은 툴로는 역부족이겠죠.
오늘날 UI 디자인 툴은 이러한 조건을 모두 갖춰야 해요.
이런 여러 불편을 해소하기 위해 2010년대 들어 스케치(Sketch)를 필두로 UI 디자인 전용 툴이 등장하기 시작했습니다. 더 빠르고 효율적으로 UI를 디자인하는 일이 그만큼 중요하다는 뜻이죠. 이제 UI 디자이너들은 아이콘/심볼 혹은 로고 등 필요한 디자인 요소를 만들거나, UI 디자인이 아닌 다른 디자인 작업을 할 때 외에는 포토샵과 일러스트레이터를 쓰는 빈도가 크게 줄어들었어요. 바꿔 말하면, UI 디자이너들이 작업마다 특화된 툴을 골라 쓸 여건이 마련된 셈이에요!
스케치 vs. 어도비 XD vs. 피그마
2010년대 들어 부쩍 떠오르기 시작한 UI 디자인 툴, 그중에서도 디자이너들은 어떤 툴을 사용하고 있을까요? 2021년 현재는 세 가지 툴이 대표적입니다. 바로 스케치(Sketch), XD, 그리고 피그마(Figma)죠.
스케치(Sketch)
2010년, 네덜란드의 보헤미안 코딩(Bohemian Coding)에서 출시한 스케치는 위의 세 툴 중 가장 먼저 등장했습니다. 오늘날 UI 디자인 툴의 시대를 열었다고 해도 과언이 아닐 만큼 업계에 혁신을 가져왔죠.
스케치는 출시된 지 2년만인 2012년, 애플(Apple)의 "디자인 어워드"를 수상하기도 했어요. ⓒApple
그렇다면 스케치가 왜 혁신적일까요? 오늘날 UI 디자인 툴의 기본 조건을 두루 갖춘 최초의 툴이기 때문입니다. 이를테면 컴퓨터에 부하가 적은 벡터(Vector) 기반의 그래픽 툴일 것, 하나의 작업창 안에 여러 개의 대지(artboard)를 늘어놓고 다양한 화면을 디자인할 수 있을 것(와이어프레임*을 그릴 수 있을 것), 그밖에 UI 디자인 작업에 특화된 기능을 지원할 것… ‘UI 디자인을 하는 데 반드시 필요한’ 여러 조건을 스케치가 처음으로 제시한 셈이죠. 이외에도 스타일 및 심벌 기능을 통해 UI에 필요한 디자인 일관성을 유지하고, 특정 리소스를 쉽고 편리하게 관리할 수 있게끔 만들어져 있고요.
와이어프레임(Wireframe)?
화면의 레이아웃을 어떻게 구성할지를 스케치하는 작업을 말합니다. 말 그대로 선(Wire)으로 틀(Frame)을 짜는 작업으로, 본격적으로 프로덕트를 개발하기 전 UX를 고려해 만드는 일종의 디자인 도면이에요.
스케치는 오래된 만큼 업계에서도 가장 대중적으로 자리잡은 툴입니다. 툴 자체에 내장된 기능 외에도 강력하게 기능을 보완해 주는 외부 확장 플러그인과 프로그램이 다양하게 갖춰져 있죠. 대표적으로 UI 디자인을 실제 애플리케이션으로 구현할 수 있도록 개발자 등 팀원들에게 디자인 속성값, 리소스 등의 가이드라인을 공유해주는 Zeplin(제플린)이 있어요. 업데이트 역시 자주, 안정적으로 지원한다는 점 역시 인기 요인이고요. 국내에서 UI 디자이너를 채용할 때도 스케치(Sketch) 사용 여부를 많이 물을 만큼 높은 수요를 자랑해요.
스케치에서 활용할 수 있는 플러그인 중 가장 잘 알려진 제플린(Zeplin)은 개발자와의 협업을 위한 GUI 가이드 프로그램입니다. 이스탄불, 런던, 샌프란시스코에 사무실을 두고 있어요.
단점이라면 macOS 전용 툴이기 때문에 Windows, Linux 등 다른 운영체제에서는 사용할 수 없다는 점입니다. 맥 유저가 많은 디자인 업계 특성상 치명적인 문제점은 아니지만, 만약 그외 운영체제를 사용하는 디자이너라면 쓸 수 없겠죠.
비용 역시 상황에 따라서는 부담이 될 수 있는데요. 연도별 하나의 버전에 대한 구독제로 연 99달러의 비용이 들어갑니다. (팀의 경우, 편집자 1명당 월 9달러) 다른 툴에 비해 특별히 비싼 가격은 아니고 학생이라면 50%를 더 할인해주지만, 만약 여러 유료 플러그인을 사용한다면 금액적인 부분도 함께 고려해봐야겠죠.
이밖에 후발 주자인 피그마나 XD에 비해 단순한 수준의 프로토타이핑 기능만 지원한다는 점 역시 스케치를 사용하던 디자이너들이 다른 툴에 눈을 돌리는 이유로 꼽히고 있어요.
XD(eXperience Design)
디자인 업계에서 어도비(Adobe)의 위상을 생각해 볼 때, UI 디자인에 있어서 포토샵과 일러스트레이터가 철지난 툴이 된 건 무척 심상치 않은 상황이었습니다. 그동안 확보하고 있던 유저의 상당수를 스케치에 내준 셈이니까요. 2014년 기준 보헤미안 코딩의 상근 직원이 고작 14명 뿐(!)이었다는 사실은 그야말로 충격적이고요.
하지만 가만히 있을 어도비가 아니죠. 2015년, 어도비 맥스(MAX) 컨퍼런스에서 UI 디자인 툴이 개발 중이라는 소식이 처음 공개됐어요. 이듬해인 2016년 3월, macOS용 “Adobe Experience Design(어도비 익스피리언스 디자인) CC”의 베타(프리뷰) 버전이 어도비 유저들을 대상으로 출시됐죠. 같은 해 12월에는 Windows 10용이 공개됐고요. 마침내 2017년 맥스 컨퍼런스에서 어도비는 XD의 베타 버전을 종료하고 정식 1.0 버전을 릴리즈한다고 발표했습니다. 피그마에 비해서도 출시가 늦었다는 걸 생각해 보면, 그야말로 오랜 세월을 거쳐 칼을 갈고 나온 툴이죠.
XD는 2015년 개발 당시, ‘프로젝트 코멧(Project Comet)’이라는 가칭으로 발표되었어요. (바로가기)
XD는 세 툴 중 가장 후발 주자이지만 무서운 성장 속도를 보여주고 있습니다. 특히 올인원 툴을 내세운 만큼 강력한 기능을 자랑하죠. 별도 플러그인 없이도 어느 정도 프로토타입을 만들어볼 수 있다는 점이 대표적입니다. 이밖에 간단한 수준의 애니메이션을 구현할 수도 있고, 간단하게 공유 링크를 생성함으로써 피드백을 주고받는 등 XD 하나로 UI 디자인에 필요한 작업을 간편하게 해결할 수 있어요.
하지만 무엇보다도 ‘디자인 공룡’ 어도비 사의 프로그램이라는 점이 XD의 가장 강력한 무기죠. 2D 그래픽 디자이너라면 누구나 친숙할 포토샵 및 일러스트레이터와 단축키부터 인터페이스까지 상당히 닮았습니다. 기존에 쓰던 클라우드 환경 등을 활용할 수도 있고요. 더욱이 한국어를 공식 지원하고, Windows 환경에서도 쓸 수 있다는 점 또한 매력적입니다. UI 디자인 툴을 배우고 싶었지만 맥 유저가 아니어서 아쉬워하던 사람들에게는 희소식이죠.
단일 앱 월 11,000원이라는 금액은 부담스러울 수 있지만, 이미 어도비의 모든 앱을 구독하고 있다면 추가 비용을 지불할 필요가 없다는 사실도 눈길을 끌죠. 개인 사용자용 스타터 플랜은 무료고요! (바로가기)
피그마(Figma)
피그마는 UI 디자인 툴계의 후발 주자로 혜성처럼 등장한 툴이에요. 2015년 12월 프리뷰 공개를 거쳐 약 반 년 만인 2016년 9월에 정식 출시됐습니다. 출시 이후 수년간 자리를 굳건히 지켜오던 스케치, 압도적인 시장 점유율의 어도비를 등에 업은 XD 사이에서 급부상하며 디자이너들의 관심을 모으고 있죠. 2020년, uxtools.co에서 디자이너들을 대상으로 실시한 설문에서는 ‘2020년 가장 기대되는 UI 디자인 툴’ 1위에 꼽히기도 했고요.
Building Figma was messy (트윗 타래 보러가기)
피그마는 여러 번의 피봇팅을 거쳐 착수된 프로젝트입니다. 위 트윗 타래에는 피그마 팀이 어떻게 현재까지 오기 되었는지가 정리되어 있어요. 본래 구상했던 사업 모델은 드론 관련 아이템이었다는 점이 재미있네요! (출처: Journal(usejournal.com) 공동 창립자 겸 마케터 @SamDeBrule 계정)
그렇다면 피그마가 이렇게 주목받는 이유가 있을까요? 바로 다른 UI 디자인 툴에 비해 ‘협업’을 강조함으로써 차별화를 이끌어냈기 때문입니다. 공식 페이지에서도 ‘Collaborative interface(공동의 인터페이스)’ 내지 ‘Where teams design together(팀이 함께 디자인하는 곳)’ 등의 문구를 통해 협업을 위한 디자인 툴이라는 점을 내세우고 있죠.
“협업은 어렵죠. 우리는 [그런 협업을] 더 쉽게 만들어 줍니다.” ⓒFigma (바로가기)
우선 피그마는 웹 브라우저 기반의 툴입니다. 스케치나 XD와 달리, 별도의 데스크톱 애플리케이션을 비롯해 어떤 것도 설치할 필요가 없어요. 네이티브 데스크톱 앱을 제공하기는 하지만 필수는 아닙니다. 인터넷만 된다면 크롬(Google Chrome), 파이어폭스(Mozilla Firefox) 등에서 피그마 페이지에 접속한 다음 로그인만 하면 끝이죠. 운영체제나 디바이스 같은 사양의 제약이 파격적으로 줄어듭니다. 모든 리소스를 클라우드에 저장하기 때문에 별도의 저장 공간을 요구하지도 않아요. 때문에 누구나 링크 한 줄이면 언제, 어디서든 디자인을 확인할 수 있죠.
여러 사람이 동시에 아트보드를 편집할 수 있다는 것 또한 장점으로 꼽혀요. 디자이너 여러 명이 함께 작업하는 프로젝트에서, 한 사람이 작업을 모두 마칠 때까지 손놓고 기다릴 필요가 없다는 뜻이죠. 작업은 실시간으로 자동 저장되며, 여러 사람이 하나의 구글 문서(Google Docs)에 접속할 때처럼 서로 어떤 영역에서 무엇을 하는지를 표시해주기 때문에 작업이 겹칠 우려도 적습니다. 아트보드 위에 곧바로 코멘트를 남길 수도 있어 자잘한 피드백을 훨씬 간편하게 진행할 수 있고요. 프로젝트 파일을 몇 개씩 만들 필요 없이 히스토리를 통해 버전 관리를 할 수 있죠.
하나의 프로덕트를 만드는 데는 디자이너뿐만 아니라 PM, PO 등의 기획자, 개발자까지 여러 직군이 함께하기 마련인데요, 피그마의 실시간 협업은 이러한 프로덕트 개발 과정을 더욱 매끄럽게 만들어 줍니다.
무료 스타터 플랜만으로도 대부분의 기능을 쓸 수 있다는 점도 피그마의 인기 요인이었어요. 하지만 오는 4월 21일부터는 하나의 팀 스페이스에서 협업할 수 있는 파일의 수를 3개로 제한한다고 합니다. 상용 프로페셔널 플랜의 경우 편집자 1명당 월 12달러로 이용할 수 있고요. (바로가기)
장점이 있으면 단점도 있죠. 웹 기반의 툴이니만큼 인터넷 연결이 불가능하거나, 피그마 서버가 다운되면 작업을 전혀 진행할 수 없어요. 보안 관련 위험성도 무시할 수 없구요. 한글을 입력하면 텍스트가 먹히거나 밀리는 등 자잘한 버그도 있기 때문에 스케치나 XD에 비해서는 불안정하다고 보는 입장이 많죠. 그럼에도 탁월한 협업 효율을 자랑한다는 점 때문에 나날이 사용자가 늘고 있습니다.
또 어떤 UI 디자인 툴이 있을까요?
UI 디자인을 하는 데 스케치, XD, 피그마 외의 툴을 쓰는 곳도 많습니다.
스케치, XD, 피그마 외에도 다양한 툴이 UI 디자인에 사용되고 있어요. 먼저 2018년에 공개된 인비전 스튜디오(InVision Studio)를 꼽을 수 있고, 코딩을 통해 하이파이(Hi-Fi) 프로토타이핑까지 할 수 있는 프레이머(Framer)나 다양한 라이브러리를 기반으로 한 여러 맞춤형 요소를 통해 실물에 가까운 프로토타입을 만들 수 있는 UXPin(UX핀), 일러스트레이터에 대항한 벡터 그래픽 디자인 프로그램 어피니티 디자이너(Uffinity Designer) 등 다양한 소프트웨어를 선택할 수 있습니다. 물론 포토샵과 일러스트레이터를 사용해 UI를 디자인하는 팀도 여전히 있습니다.
다만 UI 디자인 중에서도 화면 요소를 세밀하게 배치하고 구성하는 로파이(Lo-Fi) 프로토타이핑 자체에 초점을 맞춘다면 스케치, XD 그리고 피그마가 가장 널리 쓰이죠.
하이파이(Hi-Fi) vs. 로파이(Lo-Fi)?
각각 High Fidelity, Low Fidelity의 약자입니다. 로파이 프로토타입은 간단하고 기술적으로 복잡하지 않은 수준의 프로토타입으로, 아이디어 및 컨셉을 화면에 구현하는 데 초점을 맞춰요. 일반적으로 GUI 디자인이라 하면 로파이 디자인에 해당하죠. 한편 하이파이 프로토타입은 최종적으로 개발될 프로덕트와 흡사할 만큼 기능적인 수준의 프로토타입으로, 개발자와 소통을 하기 위해 정교한 인터랙션까지 고려해서 제작돼요.
스케치, XD, 피그마를 사용해 레이아웃을 구성하고, 요소를 배치하는 디자인 작업은 일반적으로 로파이 프로토타이핑에 해당하는 영역입니다.
2021년 현재 최신 트렌드는?
디자이너 대상의 UXtools 설문 결과, 피그마가 다양한 영역에서 1위로 뽑혔어요. ⓒUXtools (바로가기)
2020년 12월, 해마다 디자인 툴 관련 설문을 진행하는 UXtools 설문 결과가 새로 발표됐습니다. 약 4,100명의 디자이너가 참여한 이번 설문에서 UI 디자인 툴 부문의 최강자는 단연 피그마였죠. UI 디자인에 사용하는 툴이 무엇이냐는 질문에 무려 66%가 피그마를 사용한다고 응답했어요. 2019년에는 37%였던 데 비하면 놀라운 성장인데요. UXtools는 코로나19로 인해 원격 환경에서의 협업이 중요해지면서 이런 경향이 나타난 것 같다고 분석했습니다.
그외에도 유저 플로우 구성, 프로토타이핑, 핸드오프(Handoff), 디자인 시스템, 버전 관리, 앞으로 사용해보고 싶은 툴 등 다양한 영역에서 피그마가 다관왕을 차지했어요.
기획자의 경우 UI 디자인 툴을 쓰기도 하고, UX 기획에 특화된 툴을 선택하기도 합니다.
하나의 프로덕트를 완성하는 데는 UI 디자이너뿐만 아니라 기획자의 역할도 중요해요. 이에 따라 프로덕트 매니저(PM)나 프로덕트 오너(PO) 역시도 기획 단계에서 UI를 설계하며 디자이너, 개발자와 공유하곤 합니다. 간단한 수준의 와이어프레임(Wireframe)을 그리는 작업이라고 볼 수 있죠.
때문에 기획자가 사용하는 디자인 툴 역시 디자이너들이 사용하는 툴만큼이나 다양한데요. 전통적으로는 파워포인트(PowerPoint)를 사용해 와이어프레임 내지 UI 기획서를 만드는 경우가 많았습니다. 다만 문서 편집을 위한 툴이다보니 시각적으로 UI의 뼈대를 세우는 데는 한계가 있었죠. 때문에 스케치, XD, 피그마 등의 UI 디자인 툴을 통해 간단한 수준의 UI 설계를 진행하기도 해요.
물론 세세한 그래픽 조정에 특화된 디자인 툴 대신 기획에 초점을 맞춘 툴 역시 인기를 끌고 있어요. 마치 화이트보드에 메모지를 붙이고 그림을 그리듯 UX 브레인스토밍 및 실시간 협업을 할 수 있게 해주는 커뮤니케이션 툴 미로(Miro), 카카오에서 제공하는 무료 프로토타이핑 툴인 카카오 오븐(Oven), 스토리보드 제작에 맞는 UI 목업 구현 등에 특화된 프로토타이핑 툴 액슈어(Axure RP), 파워포인트를 UI 설계에 맞게 쓸 수 있도록 해주는 목업 디자인 플러그인 파워목업(Power Mockup) 등이 대표적입니다.
인프런은 어떤 UI 디자인 툴을 사용하나요?
인프런은 작년 여름부터 피그마를 사용하고 있습니다. 여러 명의 디자이너가 하나의 프로덕트를 동시에 작업할 수도 있고, 디자이너 외 직군에서도 따로 프로그램을 설치할 필요 없이 디자인을 쉽게 확인할 수 있어요.
인프런 디자인 파트에서는 2020년 상반기까지 UI 디자인 작업에 스케치(Sketch)를 사용해 왔어요. 스케치로 UI를 디자인한 뒤 제플린(Zeplin)을 통해 개발자에게 디자인을 전달하는 방식으로 작업을 진행했죠. 그러다 지난해 여름부터는 스케치 대신 피그마(Figma)를 도입했는데요, 여러 명의 디자이너가 함께 작업할 수 있을 뿐만 아니라, 디자이너가 아닌 운영 직군의 팀원들도 피그마 링크를 공유받아 작업이 어떻게 진행되고 있는지를 더욱 간편하게 확인할 수 있어요. 지금은 계속 피그마+제플린 조합으로 프로덕트 디자인을 하고 있습니다.
개발자에게 작업물(디자인 뷰)를 공유할 땐 제플린을 활용해요.
끝내며
UI 디자인 툴 삼대장, 어떠셨나요? 세 가지 툴 모두 개성과 장단점이 다르다보니 각자 속한 조직이나 프로젝트의 특성과 여건에 맞게 툴을 선택하고, 정해진 툴에 적응하는 것이 무엇보다 중요합니다. 그렇지만 엎치락뒤치락 치열하게 경쟁하고 있는 UI 디자인 툴 중에서 과연 어떤 툴이 최후의 승자가 될지도 무척 궁금하네요!
지금, 여러분의 팀에서 사용하는 UI 디자인 툴은 무엇인가요? 추천하는 툴이나 배우고 싶은 툴이 있나요? 댓글로 마음껏 이야기해주세요. 😊
UIUX 디자이너라면 꼭 알아야할 UI 디자인 툴 트렌드 (ui 디자인 툴킷 TOP 10)
제로베이스 UIUX 디자인 스쿨
어떤 일을 할 때는 그에 맞는 도구를 사용하듯, 효율적으로 디자인 작업을 위해 알맞은 디자인 툴을 사용하는 것이 중요해요. 이번 시간엔 UI 디자인 툴이 탄생한 배경과 UIUX 디자이너들이 실제로 사용하는 UI 디자인 툴과 UI 디자인 트렌드 대해서 배워 볼게요. UI 디자인 시대가 열리면서 어도비가 제패해오던 디자인 툴 시장에 새로운 UI 디자인 툴이 지각변동을 일으키게 되는데요, 그 이야기를 지금 바로 만나보세요!
UI (User interface)는 사람이 컴퓨터와 편하게 상호작용할 수 있도록 더 쉽고 빠르게 인지할 수 있는 방향으로 발전해왔어요. GUI(Graphic User Interface)는 아이콘이나 그림과 같은 그래픽 요소를 배치해놓고, 마우스 같은 포인팅 장치를 이용해 상호작용 하는 것인데, 시기에 따라 변화한 UI 디자인 툴의 활용 범위를 알아볼게요.
(1) 스마트폰 도입 전
스마트폰이 도입되기 이전의 데스크톱 환경의 인터랙션은 바로 이렇게 하이퍼링크를 마우스 조작으로 사용하는, 다소 정적인 인터페이스하에 놓여 있었어요. 따라서 어도비(Adobe)의 대표적인 비트맵 프로그램인 포토샵(Photoshop)으로 UI를 디자인하는 것이 당연하게 여겨져 왔죠.
Adobe Photoshop 2023
(2) 웹 2.0 시대
웹 2.0 시대를 지나게 되면서 인터넷의 정보화는 가속화 되었습니다. 그에 따라 많은 사람들이 다양한 디자인 컬렉션을 포토샵으로 구현해 ‘UI 디자인 패키지’라는 이름으로 사용하게 되었어요. 나름대로 가장 많이 쓰이는 버튼이나 입력 박스 같은 UI 디자인 요소에 일관성을 갖추고, 패턴 라이브러리를 구축하기 시작한 거죠. 이러한 방식으로 재사용 가능한 UI 디자인 요소들로 구성된 룩앤 필 (Look and feel : 마케팅, 브랜딩, 상표화와 같은 분야에서 쓰이는 용어로 사용자의 제품 체험과 겉모양, 인터페이스의 주된 기능을 나타낸다.) 을 보여주는 방식으로 UI 디자인 툴이 활용되었죠.
IOS의 UI 요소
(3) 스마트폰의 일상화
스마트폰이 일상화되고 나서는 더이상 정적인 인터페이스로는 설명할 수 없는 UI 디자인에 갈증이 생기기 시작했어요. 와이어프레임(wire frame) 작업이 과거에는 낮은 충실도(low fidelity)로 구현하는 핸드 드로잉 정도였다면, 최근에는 UI 툴을 이용해 높은 충실도(high fidelity)로 와이어프레임을 작성한 후 플로우를 추가하고 시안 작업으로 진행되는 것이 일반적인 추세가 되었죠. 기술이 발달하면서 디바이스도 고도화 되었고, 다양한 인터랙션의 프로토타입을 동적으로 구현하는데 점차 한계가 생기기 시작했어요.
낮은 충실도의 와이어프레임
높은 충실도의 와이어프레임
또 프로젝트의 범위가 커질수록 수많은 분야의 사람들과 협업을 하게 되었구요. 각 분야의 사람들이 정해진 프로젝트 지침을 잘 이행하고 프로젝트 내용을 정확하게 공유하기 위해 ‘디자인 시스템’이 탄생하게 됐죠.
특히 마우스 포인터에서 손가락 터치 제스처로의 전환하면서 더 다양한 인터랙션을 요구하게 되었고, 이에 따라 비트맵 프로그램인 포토샵은 동적인 프로토타입에 대한 한계와 psd 파일의 지나치게 큰 용량으로 인해 디자이너들은 좀 더 라이트하면서도 액티브한 UI 디자인 툴을 찾지 않을 수가 없게 되었습니다.
최종 시안
터치 제스처 전환에 따른 다양한 인터랙션을 확인해보세요!
(1) 슬라이더 (Slider)
(2) 탭 (Tab)
(3) 스와이프 (Swipe)
전세계 UI 디자이너들은 어떤 툴을 사용하고 있을까요?
Uxtools의 올해의 UI 디자인 툴 서베이 (2022)
2022년 가장 많이 사용된 UI디자인 툴은 그래프에서 보는 바와 같이 피그마(Figma)가 응답자 4,260명 중 3,105명으로 압도인 1위를 차지하고 있어요. Adobe XD(263명)과 Sketch(241명)은 1위와는 비교할 수 없을 정도의 격차로 2위와 3위를 차지하고 있는 걸 볼 수 있습니다. 어도비의 포토샵과 일러스트레이터는 주로 사용하는 UI 디자인 툴이라기 보다는 보조로 사용하는 UI 디자인 툴로서 4위와 5위를 차지하고 있다고 이해할 수 있어요.
UI 디자인 툴 TOP 10의 특징을 한 눈에 정리해봤어요!
1위에서 10위까지 UI툴의 대표 기능 및 무료 가능 여부
UI 디자인 툴 TOP 10 비교
UIUX 디자이너가 사용하는 툴은 무엇이 있을까요?
UI UX 디자인 분야는 다양한 분야와의 협업을 기본으로 하기 때문에 표준화된 툴을 사용하는 것이 중요해요. 2022년 디자이너가 사용한 다양한 툴킷(Toolkit)을 살펴보면 우리가 상상한 것 보다 훨씬 더 다양한 분야에서 많은 종류의 툴을 사용하고 있음을 알 수 있어요.
uxtools의 디자이너 툴킷 (2022)
앞서 확인했듯이 UI 디자인의 대표적인 툴은 뭐니 뭐니해도 피그마죠. 피그마는 UI디자인 영역에서 압도적인 비율로 디자이너들의 사랑을 받고 있으며 앞으로도 다른 툴이 피그마를 뛰어 넘기는 쉽지 않을 것으로 보여져요.
왜냐하면 피그마는 UI 디자인 뿐만 아니라 프로토타이핑 툴과 디자인 시스템 툴에서도 압도적인 우위를 차지하고 있거든요! 특히 프로토타이핑은 UI 디자인에서 뗄래야 뗄 수 없는 기능으로 UI 디자인 툴의 순위에도 영향을 미칠 정도로 중요해요. UI 디자인 툴에 있어 프로토타이핑 기능이 얼마나 충실히 구현되는지가 UI 디자인 툴의 경쟁력을 결정한다고 볼 수 있죠.
그런 의미에서 고급 프로토타이핑 부문에서의 1위는 프로토파이가 차지하고 있으니 차세대 UI 디자인 툴로 프로토파이 역시 눈여겨 볼 필요가 있겠죠?
UIUX 디자인을 할 때 꼭 알아야할 UI 디자인 툴은 무엇일까요?
피그마 (Figma)
(1) 피그마 (Figma)
2016년 9월에 출시되어 ‘협업’을 차별점으로 강조해온 피그마를 소개할게요! 2010년부터 UI 디자인 툴을 선도해온 스케치를 사용해봤다면 피그마에 적응하는 시간은 그리 오래 걸리지 않을 거예요. 그만큼 인터페이스, 심볼관리, 이미지 추출(export)과 같은 주요 기능 방식이 비슷하거든요.
우선 피그마는 웹 브라우저 기반의 툴로 다른 UI 디자인 툴과는 달리 별도의 데스크톱 애플리케이션을 설치할 필요가 없다는 강점을 가지고 있어요. 물론 네이티브 데스크톱 앱을 별도로 제공하기는 하지만 필수로 설치할 필요는 없어요. 인터넷이 되는 곳이라면, 브라우저 접속만으로 피그마를 사용할 수 있다는 뜻이죠!
피그마 클라우드에 모든 리소스가 저장되기 때문에 별도의 저장 공간도 필요 없고, 링크 한 줄이면 어디서든 디자인을 공유하고 확인할 수 있어요. 또 여러 사람이 하나의 프로젝트에서 동시에 아트보드를 편집할 수도 있고, 서로 어떤 영역에서 무엇을 하는지 바로 바로 코멘트를 남길 수 도 있죠. 프로젝트 파일은 히스토리를 통해 버전 관리까지 가능하구요!
👀 이렇게 좋은 툴을 무료로?
이렇게 유용한 피그마의 가장 큰 장점 중 하나는 이런 기능들을 개인이 ‘무료’로 사용할 수 있다는 점이에요. 물론 제한 없이 사용하기 위해서는 유료 결제가 필요한 부분도 있지만, 무료 버전에서도 충분히 제한 없이 사용이 가능하니 부담 없이 사용해보세요!
피그마 인터페이스
피그마를 처음 접하는 사용자라면 피그마의 커뮤니티에서 제공하는 훌륭한 디자인 소스들을 구경하느라 하루종일 커뮤니티에 머무르게 될 지도 몰라요. 인터내셔널 규격 사이즈의 컴포넌트들이나 아이콘과 같은 소스들은 물론이고, 다양한 아이디어를 얻을 수 있는 인터페이스 디자인도 무궁무진하게 접할 수 있거든요.
피그마 커뮤니티
그 밖에도 스케치나 XD 사용자가 개발자에게 디자인 작업을 넘길 때 사용하는 제플린을 별로도 사용하지 않아도 된다는 것과 토큰의 구현은 피그마가 UI 디자인 툴 중에서 압도적인 1위로 올라서게 된 이유가 아닐까요?
즉, 인터넷 기반의 피그마는 하나의 툴로 UI 디자인, 프로토타이핑, 핸드오프까지 모두 해결해주는 강력한 툴로 굳건히 자리매김하고 있으며 2022년 Adobe에 인수되어 앞으로도 그 인기는 계속 이어져 나갈 것으로 예상됩니다.
어도비 XD
(2) 어도비XD (AdobeXD)
와이어프레임은 물론 인터랙티브한 프로토타입까지 가능한 XD는 벡터와 래스터 아트웍을 그리거나 재사용하는 것이 가능해요. 스케치의 후발 주자인 XD가 스케치를 뛰어 넘어 UI 디자인 툴 2위의 자리까지 올라 올 수 있었던 것은 ‘어도비’라는 헤리티지와 함께 1년이 넘는 기간 동안 어도비가 XD 프로그램을 무료로 배포한 영향도 무시할 수는 없었을 거라고 봅니다.
또 스케치는 맥에서만 사용할 수 있는 반면 맥 버전과 함께 윈도우 버전을 제공한 것도 XD가 빠르게 성장할 수 있는 계기가 되었을 거예요. 기존 UI 디자인 툴은 어도비사의 포토샵이나 일러스트레이터의 영향을 받지 않을 수 없기 때문에 같은 어도비 제품군의 XD가 포토샵이나 일러스트레이터와 쉽게 호환되며 어도비 제품의 같은 단축키를 공유하므로 타 UI 툴에 비해 전환율이 좋다는 점도 하나의 강점으로 여겨졌죠.
어도비 XD 인터페이스
👀 UI 디자인 툴이 이렇게 쉽다구요?
XD를 사용하다보면, 누구나 쉽게 배울 수 있는 간단한 인터페이스에 쉽고 가벼운 툴임에도 복잡한 하이 피델리티(High-Fidelity) 와이어프레임과 복잡한 인터랙션이 가능하다는 점에 또 한번 놀라게 될텐데요. 심볼(Symbol)의 에셋 라이브러리 등록을 통해 손 쉽게 관리할 수 있다는 점도 큰 장점이에요. 더블 클릭만으로 복제한 컴포넌트를 수정할 수 있는 컴포넌트 관리의 유연함 또한 XD가 UIUX 디자이너들의 사랑을 받는 이유 중 하나죠.
또 XD에서는 피그마와 마찬가지로 다양한 플러그인을 사용할 수 있어요. 플러그인을 사용하면, 몇 번의 클릭 만으로도 손쉽게 인터넷 상의 이미지를 불러올 수 있고, Lorem Ipsum 텍스트로 와이어프레임을 구현할 수도 있죠.
XD는 현재 유료 툴이지만 다른 어도비 툴도 함께 사용하는 디자이너라면 체감상 무료 툴로 느끼는 분들이 많을 거예요. 만약 개인이 어도비 XD만 사용 한다면 월 1만 1천원의 구독료가 있습니다.
스케치(Sketch)
(3) 스케치 (Sketch)
스케치는 2019년 전까지만 해도 지금의 피그마와 같은 인기를 누리는 UI 디자인 툴로 기억돼요. 무료 버전이 없고, 가장 큰 단점이라고 생각되는 맥에서만 사용할 수 있는 UI 디자인 툴임에도 불구하고 많은 UI 디자이너들은 스케치를 기꺼이 사용했죠.
2010년에 출시된 벡터 기반의 툴인 스케치는, 아트보드를 생성할 때 1배수를 사용하면 상위배수를 자동으로 커버하면서 포토샵을 사용하던 디자이너들을 놀라게 했습니다. 일러스트레이터와 같이 한 페이지 안에서 여러 개의 아트보드를 배치해 UI 디자인 작업에 특화된 와이어프레임 제작을 가능하게 했구요.
iOS나 머티리얼 가이드의 리소스를 불러와 스타일이나 심볼을 제작할 때 디자인의 일관성을 유지할 수 있게 하고 그 덕분에 리소스를 쉽고 편리하게 관리할 수 있었어요. 또 라이브러리 기능으로 팀 전체가 심볼을 공유해 협업 하면서 한번에 모든 심볼을 업데이트 할 수도 있죠.
👀 한 때는 전성기였던 UI 디자인 툴의 하락세
스케치는 월 $9 또는 연간 $99로 지불 방식을 선택할 수 있는데요. 추가로 유료 플러그인을 사용 해야된다는 점이 위에 툴들에 비해 경쟁력을 잃어가는 이유 중 하나로 볼 수 있어요. 잦은 업데이트는 스케치의 장점이었으나 최근에는 업데이트마다 소프트웨어가 무거워지면서 특히 파일을 열거나 동기화 시키는데 긴 시간이 소요된다는 단점이 되어가고 있다고 해요.
또 아이콘이나 텍스트 박스의 픽셀 퍼펙트로 인한 소수점 발생과 원인을 알 수 없는 폰트의 깨짐 문제, 그리고 행간과 자간의 자동 수정 문제 등은 오랫동안 UI 디자인 툴의 지존 자리를 지키던 스케치의 인기 하락 원인으로 꼽히고 있습니다.
프로토파이 (protopie)
(4) 프로토파이 (protopie)
2022년 기준 UX Tools의 조사에서 가장 주목하고 싶은 툴은 피그마 보다도 프로토파이를 꼽고 싶은데요! 이제 UI 디자인에 있어 인터랙션의 영역은 사용자 경험과 맞물려 새로운 서비스가 출시 될 때 가장 기대가 되는 영역이기도 하거든요.
그런 의미에서 고급 프로토타이핑 분야 1위에 자리 잡고 있는 프로토파이는 홈페이지가 영문으로 되어 있어 해외 기업이라 생각하기 쉽지만 놀랍게도 국내 스타트업의 디자인 툴이에요.
프로토파이 내에서의 인터페이스 디자인도 가능하지만 피그마, XD, 스케치 파일과 호환이 가능해 프로토파이 안에서 각 요소를 다시 만들지 않아도 되구요. 프로토파이의 가장 큰 장점은 피그마, XD, 스케치에서 구현하기 어려운 다양한 변수와 센서의 사용이에요.
👀 지금 프로토파이를 주목해야 하는 이유!
변수를 사용하여 프로토타입 전체에 데이터를 저장할 수 있으며 변수는 트리거 및 응답에서 변경할 수 있다. 프로토파이는 가속도계, 근접도, 3D 터치와 같은 센서를 사용할 수 있는 유일한 프로토타이핑 도구예요. 모바일 뿐만 아니라 코딩 없이도 데스크톱, TV, 자동차 대시보드 화면 등 다양한 환경에서 테스트가 가능해요.
프로토파이 역시 팀이 공유하는 저장 공간에 프로토타입을 저장할 수 있어요. 언제든 재사용할 수 있는 컴포넌트 라이브러리로 협업을 용이하게 할 수 있도록 지원하죠. 맥과 윈도우 모드를 지원하고 있고, iOS 및 안드로이드 기기에서 IP주소를 사용하거나 USB를 연결하는 것만으로도 미리보기가 가능해요. 즉 테스트가 필요한 기기에서 직접 프로토타입을 시연하는 것이 가능한 매우 편리한 기능을 갖고 있죠.
UI 디자인 툴로 구현할 수 있는 UI 디자인 트렌드를 알아볼까요?
(1) 플랫 디자인 (Flat Design)
플랫 디자인은 입체적이고 복잡한 그래픽 요소를 배제하고 단순한 구성과 컬러를 통해 사용자가 직관적으로 인식 할 수 있게 하는 2차원적인 평면 방식의 디자인을 뜻해요. 그리드 기반으로 규칙적인 레이아웃을 갖고 있는 플랫 디자인은 사용자들이 점차 스마트폰에 익숙해진 이후 빠르게 콘텐츠에 집중할 필요가 생기면서 탄생하게 되었죠.
윈도우 8 데스크톱 시작 화면
사각형의 메트로 디자인으로 구성한 마이크로 소프트 윈도우 8의 시작화면은 대표적인 플랫 UI 디자인의 사례라고 할 수 있어요. 그레이디언트를 배제한 간결한 색의 사용과 장식 요소의 배제하여 사용하여 콘텐츠에 더욱 집중할 수 있도록 간결하고 심플한 디자인을 보여주고 있죠. 이러한 플랫 디자인은 2013년 아이폰의 iOS7에 이르러 인기가 정점을 맞게 되었는데요.
iOS 아이콘의 스큐어모피즘 디자인과 플랫 디자인
iOS7과 이전의 아이콘을 비교해보면 반사광이나 그레이디언트와 같은 요소가 거의 제거된 것이 보이시나요?
하지만 iOS의 아이콘은 한 번에 변화한 것이 아니라, 조금씩 진화해가면서 사용자가 변화의 과정에 익숙해지도록 사용자를 배려하고 있음을 알 수 있어요. 플랫 디자인은 짧은 기간 동안 엄청난 이슈를 불러오며 모바일 뿐 만 아니라 웹에서도 플랫 디자인을 적용하여 단 기간에 수 많은 서비스들이 플랫 디자인을 지향하게 되었습니다.
iOS 아이콘의 변화
👀 완벽해 보였던 플랫 디자인의 이면
하지만 모든 요소가 평면이기 때문에 요소에 담긴 중요 기능을 사용자가 바로 알기 어렵다는 단점이 공존했죠. 클릭이 가능한 영역의 구분도 모호하며 그림자와 깊이감의 부족으로 인해 직관적으로 형태를 알아보기 어려웠고, 지나친 단순화로 사용자가 중요한 기능을 놓치거나 서비스를 이해하지 못하고 지나치게 된다는 단점이 부각되기 시작했습니다.
그리드 기반의 콘텐츠 분할, 산세리프 서체, 유사한 컬러 등의 디자인 원칙은 플랫 디자인을 개성있고 세련되게 만드는 요인이였지만, 시간이 지날수록 수 많은 서비스들이 플랫 디자인을 채택함으로써 점차 개성이 사라지고 유사한 디자인의 스타일이 양산되었죠. 이를 보완하기 위해 그레이디언트나 블러 처리를 통해 요소간의 우선 순위를 표현하기 시작하였는데 이를 플랫 2.0 또는 딥 플랫이라고 합니다.
최근의 iOS는 사실 딥 플랫 방식 보다는 머티리얼 디자인의 그림자 재질을 이용하는 방식에 더 가까우며 머티리얼 디자인도 이러한 점 때문에 iOS를 위한 가이드 지침을 별도로 제공하고 있다. 휴먼 인터레이스 가이드라인을 살펴보면 애플의 iOS디자인으로 대표되는 플랫디자인의 변화된 유형과 사용 가이드를 확인할 수 있습니다.
(2) 머터리얼 디자인 (Flat Design)
플랫 디자인으로 대표되는 것이 애플의 iOS였다면 머티리얼 디자인으로 대표되는 것은 안드로이드라 할 수 있어요. 안드로이드를 운영체제로 사용하는 제조사는 우리나라의 삼성을 비롯해 전 세계적으로 셀 수 없을 만큼의 다양한 제조사와 디바이스가 존재하는데요.
각 제조사는 아이덴티티를 유지하면서도 커스텀이 가능하도록 하는 것이 중요했죠. 이런 상황에 적합한 디자인 기준을 만들기 위해 안드로이드의 롤리팝 버전부터 구글에서는 머티리얼 디자인 가이드 지침을 제공하게 된 거예요.
머티리얼 디자인의 재질과 그림자
머티리얼 디자인은 물질의 질감이나 광원효과, 그림자 효과 등을 통해 디자인에 깊이감을 더한 것으로, 디자인보다는 단순하고 편리한 기술 개발에 주력했던 구글이 ‘디자인 중심’으로 전환한 동시에 발표했어요. 머티리얼 디자인은 플랫 디자인과 비슷해 보이지만 평면만 추구하는 플랫 디자인과 달리 종이 두께 높낮이를 표면에 적용해 그림자를 만들고 질감을 표현하고 있어요.
x, y 및 z 축이 있는 3D 공간
머티리얼 디자인은 3차원의 Z축을 이용해 표면의 높낮이를 구현하고 요소 간의 우선 순위를 그림자를 통해 나타내어 정보 구조를 표현하고 구분하고 있어요. 그 결과 사용자는 디자이너의 의도대로 서비스를 이용할 수 있게 되었습니다. 플랫 디자인의 장점인 단순함을 유지하면서 시각적 다양성을 추가해 사용성을 끌어올린 디자인이라고 말할 수 있죠.
(3) 글래스모피즘 (Glassmorphism)
최근 1~2년 사이 가장 주목받고 있는 디자인 스타일 중 하나인 글래스모피즘은 윈도우 11을 발표로 시각적 계층과 화면의 깊이를 표현하는데 훌륭하다는 평가를 받고 있어요.
글래스모피즘은 반투명 유리 재질을 사용하여 요소 간의 시각적 계층을 표현하는데 탁월한 그래픽 스타일이나 아직 디자인 랭귀지 자체로서 자리를 잡지는 않았어요. 마이크로 소프트의 플루언트 디자인 가이드에서는 아크릴 머티리얼(Acrylic Material)로, 휴먼 인터페이스 가이드라인에서는 반투명 재질(Translucency Material)로 표현되고 있지만 이름만 다를 뿐 모두 글래스모피즘 스타일을 의미해요.
글래스모피즘
👀 글래스모피즘 예쁘기만 한 게 아니에요
글래스모피즘은 반투명 유리 재질의 도형을 글자 위에 떠 있는 것처럼 보이도록 해서 시각적으로 계층을 구분할 수 있어요. 마치 공간에 떠 있는 듯한 3차원적 시각 효과를 표현하는 것이죠. 배경이 흐리거나 단색인 경우 반투명 재질을 제대로 표현하기 어렵기 때문에 다른 어떤 디자인들보다도 화려한 배경을 사용하는 특징을 가지고 있어요.
또 각 오브젝트의 투명도 값을 다르게 주어 계층을 표현하고, 배경에 가까운 요소는 높은 흐림 효과를 적용하며,반대로 배경에 먼 요소는 흐림 효과를 낮게 줍니다. 또 테두리로 명확한 경계를 구분하면서 두 가지 요소가 겹쳐 있을 때 명확한 테두리는 콘텐츠 간의 경계를 구분하는데 큰 도움이 됩니다.
UI 디자인 툴 어떤 걸 배우면 좋을까요?
UI 디자인 툴이 다양하다보니, 새롭게 UIUX 디자인 분야에 진입하려는 분들이라면 누구나 한 가지 이상의 툴 정도는 기본으로 사용할 필요가 있겠죠? 그 중에서도 동료와의 협업을 위해서 어떤 툴을 사용할 지 결정하는 것이 중요할텐데요. 위의 설문에서 확인 했듯이 ‘피그마가 대세니까 피그마를 해야겠다!’고 결심한 분들 도 있을거예요. 하지만 UIUX 디자이너로 입사한 회사가 아직 스케치에서 피그마로 옮겨가지 못한 상황에 처해 있을 지도 모르죠.
물론 설문에 따르면 2023년에도 여전히 피그마는 타의 추종을 불허할 것으로 예상됩니다. 더구나 피그마는 어도비에 흡수되기도 했고요. 결국, UIUX 디자이너가 되고 싶은 분들이라면 피그마를 기본으로 배워두고 서브 UI 디자인 툴로는 무엇을 배워둘지 미리 고민해 볼 필요가 있다고 봐요. 과연 여러분의 선택은? 디자인은 늘 그러하듯이 툴에 있어서도 정답은 없어요. 우리는 늘 시장의 변화를 잘 지켜보고 트렌드를 캐치하는 능력이 중요합니다.
UIUX 디자인 툴이 이렇게 다양하다니! UIUX 디자이너를 꿈꾸는 분들이라면, 각 UI 디자인 툴의 특징을 살펴보며 UI 디자인 트렌드를 놓치지 마세요! UIUX 디자이너로 빠르게 취업하고 싶다면 4개월만에 피그마, XD, 스케치, 프로토파이 모두를 배워볼 수 있는 UIUX 디자인 스쿨에서 시작하는 것도 잊지 마시구요!
