UI/UX

2024년 UI·UX 디자이너가 꼭 챙겨야 할 웹사이트 및 툴

디지털 인사이트가 선정한 UI·UX 디자인 툴과 참고 사이트 8선

2024년 1월 5일

마침내 2024년 청룡의 해가 됐습니다. 어찌 보면 그냥 매년 뜨던 해가 떴을 뿐이고, 달력을 한 장 넘겼을 뿐인데도 한 해가 넘어가는 기분은 매번 참 오묘합니다. 이런 기분 때문일까요? 매년 많은 사람이 새해가 되면 새해 소원 기원과 함께 새로운 다짐을 합니다.

그리고 이런 새해 다짐 중에서는 특히 이직이나 취직이 많은데요. 새해를 기념해 새로운 출발이나 각오를 하는 것은 좋지만 이러한 각오에는 자신의 역량 파악과 꾸준한 노력, 준비가 동반돼야 합니다.

디지털 인사이트가 2024년을 기념해 새해 UI·UX 디자인 역량을 기르고자 하는 모든 분을 위해 참고하면 좋을 유용한 웹사이트와 디자인 툴을 소개합니다.

UI·UX 참고용 웹사이트

세상에서는 수많은 디자이너가 존재하는 만큼 디자인을 배우고 실력을 높이는 방법에는 다양한 방식이 있습니다. 하지만 거의 모든 디자이너가 초보 디자이너 및 지망생에게 꼭 하는 조언은 바로 ‘가능한 많은 디자인을 봐라’입니다.

‘모방은 창조의 어머니’라는 말이 있듯이, 디자이너에게 있어서는 좋은 디자인을 많이 보고, 왜 해당 디자인을 많은 사람이 고평가 하는지 분석하는 것이 가장 중요합니다. 특히나 사용자의 편의성과 만족도를 높이기 위해 제품 서비스를 설계하는 UIUX 디자이너의 경우 이러한 조사 및 연구가 필수적입니다.

다음은 UI·UX 디자인에 도움이 웹사이트 목록입니다. 다양한 웹사이트를 활용해 디자인 영감을 얻고, 트렌드를 파악해 UI·UX 디자인 실력을 향상시켜 보세요.

UI·UX 디자인에서 가장 경계해야 할 것은 그저 심미적으로 아름답기만 한 디자인입니다. 좋은 UI·UX 디자인은 아름답기만 한 것이 아니라 사용하기도 편해야 하며 때문에 UI·UX 디자인 레퍼런스를 조사할 때에는 거의 모든 화면과 모든 구성의 배치와 작동 원리를 확인해야 합니다.

이때 추천되는 웹사이트가 바로 ‘모빈(Mobbin)’입니다. 모빈은 실제 출시된 앱 제품의 모든 구성 화면을 제품별로 정리해 놓은 웹사이트인데요. 카테고리, 플랫폼, 스타일 등으로 디자인 필터링까지 가능해 덕분에 원하는 스타일의 제품 및 서비스의 일정한 톤을 찾기 좋은 웹사이트입니다.

위의 모빈이 주로 해외 앱의 디자인을 확인할 수 있다면, ‘디자이너스(Designus)’는 국내에서 출시된 웹·앱·스토어의 디자인을 확인할 수 있는 웹사이트입니다. 다양한 국내 정식 출시 제품 서비스의 디자인 레퍼런스가 올라오며, 모빈처럼 디자인 카테고리 필터링 기능도 지원합니다.

또한 디자이너스의 경우 한국 웹사이트고, UI·UX 디자인에 대한 의견을 나눌 수 있는 ‘토픽’이 주기적으로 올라오는 만큼, 투표 및 댓글을 달아 국내 디자이너들과 디자인에 관련한 생각을 나눌 수도 있습니다.

모빈이 실제 출시된 제품을 모아둔 웹사이트라면 ‘드리블(Dribbble)’은 자신의 디자인과 포트폴리오를 공유하는 디자이너 소셜 네트워킹 웹사이트입니다. 웹사이트의 주요 목적이 작품 및 의견 공유인 만큼 정식 제품으로 출시되지 않은 여러 디자이너의 독특한 디자인을 자주 접할 수 있습니다.

디자이너가 아닌 일반인들에게도 유명한 비핸스, 핀터레스트와 다르게 국내에서는 그렇게 유명하지 않지만, 해외에서는 채용 플랫폼으로 활용될 정도로 중요한 역할을 맡고 있습니다.

비핸스가 프로젝트 작업 전체 과정을 업로드했다면 드리블은 ‘섬네일’이라고 부르는 한 장짜리 이미지로 구성되어 있으며, 앞서 말한 비핸스, 핀터레스트와 다르게 UI·UX 디자인 작업물이 많은 것이 특징입니다.

UI·UX 디자인에 있어서는 색상은 사용자의 제품 및 서비스 사용 경험에 큰 영향을 주는 요소입니다. 때문에 디자인을 진행하려면 디자인 형태뿐만 아니라 색상에 대한 공부도 필요한 법입니다. 하지만 사람이 포토샵도 아니고 모든 색상값을 외우고 다닐 순 없죠. 그럴 때 참조할 수 있는 컬러 팔레트 웹사이트가 바로 ‘팔레트메이커(Palettemaker)’입니다.

단순히 마음에 드는 색 조합이나 궁금한 색상이 어느 색상인지 알려주는 다른 팔레트 웹사이트와는 다르게 팔레트 메이커는 선택한 색상 조합을 디자인 예시 콘텐츠에 적용해 색상 조합이 실제 디자인에서 어떻게 작용할 지 미리 보기가 가능합니다.

예시 콘텐츠도 웹·모바일 페이지·앱·로고 등 다양한 만큼 여러 작업에 활용이 가능하며, 원하는 색상을 찾았다면 색상 조합 팔레트를 이미지, 복사, 코드 등 여러 방식으로 다운로드할 수도 있습니다.

디자인 툴

UI·UX 디자이너를 지망하고 있거나, UI·UX 디자인의 원리 원칙을 배워나가고 있다면 UI·UX 디자인 이론 공부도 좋지만, 많은 디자인 툴을 접하고 연습해, 자신이 능숙하게 다룰 수 있는 디자인 툴의 범위를 넓히는 것도 필요합니다.

이에 몇 가지 UI·UX 디자인 툴을 소개합니다. 모름지기 디자이너에게 있어서 가장 훌륭한 툴은 자신의 손에 맞는 툴입니다. 다양한 툴을 사용해보고 자신에게 맞는 툴을 찾아보세요.

2024년 현재 UI·UX 업계에서 가장 많이 사용하는 디자인 툴을 뽑으라고 한다면 열에 아홉은 피그마를 말할 겁니다. 실제로 많은 UI·UX 디자이너가 신입이 배우면 좋은 디자인 툴로 피그마를 추천할 정도로 피그마는 현재 UI·UX 디자인 업계에서 가장 보편적으로 사용되는 디자인 툴입니다.

이런 피그마는 프로젝트 팀원과 협업하기에 최적화된 웹 기반 UI·UX 디자인 툴인데요. UI·UX 디자인에 특화된 편집 기능과 사용자 친화적인 인터페이스, 플러그인을 통한 높은 확장성 같은 기능적인 면도 뛰어나지만 피그마의 진짜 강점은 ‘편의성’에 있습니다.

피그마는 자체적으로 협업 기능을 지원해 실시간으로 팀원과 함께 같은 작업물을 온라인으로 동시에 다중 편집하는 것이 가능합니다. 게다가 웹 기반 방식을 사용하는 만큼 높은 사양의 데스크톱 PC를 요구하지 않아 사실상 인터넷만 된다면 어디서든 작업 할 수 있는 등 편리한 협업성과 접근성을 갖추고 있습니다.

추가로 팀 단위가 아닌 개인이 단독으로 사용할 시에는 사실상 무료로 사용할 수 있다는 것 또한 장점 중 하나인데요. 실제로 UI·UX 업계 전문 설문조사 기관 UX 툴즈의 최신 통계 자료에 따르면 작년 2023년 전 세계 UI·UX 개발자 2500명 중 90%가 피그마를 주력 디자인 툴로 사용하고 있다고 답했습니다.

앞서 말했듯이 2024년 현재 업계에서 가장 많이 사용되고 있는 것은 피그마이지만, 그렇다고 모든 디자이너가 피그마만 사용하는 것은 아닙니다. 요즘에는 피그마에 밀려 사용자 수가 예전만 못하지만, ‘스케치’도 대표적인 툴입니다.

스케치는 보헤미안 코딩이라는 네덜란드 회사에서 2010년 UI 디자이너를 위한 빠르고 가벼운 디자인 툴을 만들자는 취지 하에 개발한 디자인 툴입니다. 스케치는 1세대 UI·UX 디자인 툴 중 하나로 본격적인 UI·UX 디자인 툴의 포문을 열었다고 평가 받을 정도로 업계 작업에 큰 영향을 주었으며, 여전히 활용하는 디자이너도 적지 않은데요.

스케치의 가장 큰 장점은 ‘가볍다’ 입니다. 포토샵이 돌아가지 않는 저사양 PC라도 스케치는 구동할 수 있으며, 또한 벡터 기반의 디자인 툴인 만큼 UI 관련 작업을 진행할 때에도 비트맵(Bitmap) 기반 디자인 툴인 포토샵에 비해 해상도와 크기에 제약을 덜 받는 편입니다. 이렇게 가볍고 사용하기 쉽다는 점을 살린 스케치의 아트보드 기능은 과거 출시 당시에 많은 디자이너의 호응을 받았으며, 지금도 여러 UI·UX 디자인 툴로 계승되고 있습니다.

이런 특징 이외에도 10년 넘게 쌓여온 경험은 스케치만의 장점이 됐으며, UI·UX 디자인에 최적화 기능과 수많은 추가 플러그인은 출시된 지 10년 넘게 흐른 지금도 여러 디자이너가 스케치를 사용하는 이유입니다.

이쯤되면 “어도비는 UI·UX 디자인 툴이 없는 건가?” 라는 궁금증이 드는 분도 계실 겁니다. 물론 어도비에도 UI·UX 디자인 툴이 존재합니다. 바로 ‘어도비 XD’입니다. 어도비 XD는 어도비가 스케치를 따라잡기 위해 2016년에 선보인 UI·UX 디자인 툴입니다.

별도의 플러그인이나 외부 프로그램을 사용하지 않더라도 UI·UX 디자인에 필요한 대부분의 기능이 기본으로 포함되어 있다는 올인원 특성도 어도비 XD의 장점 중 하나이지만 어도비 XD의 가장 큰 장점은 ‘익숙함’이라고 볼 수 있습니다.

인터페이스 디자인부터 단축키까지 기존 어도비 디자인 툴과 공유하는 부분이 많기 때문에 기존에 포토샵, 일러스트레이터 등 어도비 디자인 툴을 사용하던 디자이너라면 XD에 정말 쉽게 적응할 수 있습니다.

만약 회사나 팀에서 어도비 포토샵이나 일러스트레이터, 애프터이펙트 등을 포함한 어도비 디자인 툴을 많이 사용한다면 어도비 클라우드 크리에이티브(CC) 구독으로 좀 더 경제적인 소비가 가능하다는 것도 장점 중 하나입니다.

하지만 현재 어도비 XD는 새로운 기능 업데이트를 중단한 상태입니다. 어도비가 피그마를 인수합병하려고 했기 때문에 분야가 겹치는 어도비 XD가 우선순위에서 밀려난 것인데요. 그렇지만 인수합병이 무산되면서 어도비가 다시 XD를 활성화시킬 가능성이 존재합니다.

UI·UX 디자인에 있어서 아이디어를 시각화하고, 기능을 테스트하기 위해서는 ‘프로토타이핑’*이 필수인데요. 때문에 요즘 많은 UI·UX 디자인 툴이 프로토타이핑 기능을 탑재하거나 외부 프로타이핑 플러그인을 지원하지만, 프레이머는 자체적으로 프로토타이핑에 집중하고 있는 디자인 툴입니다.

프레이머는 다른 디자인 툴과 다르게 최종적으로 만들어질 제품이나 서비스와 흡사할 정도로 기능적 완성도가 높고, 개발자의 실제 개발까지 고려한 인터랙션까지 고려한 수준의 하이파이(Hi-Fi) 프로토타이핑이 가능합니다.

프레이머의 또다른 특징 중 하나는 ‘코드 기반의 툴’이라는 점입니다. 이 코드 기반이라는 특징 때문에 프레이머를 사용해 만들어진 프로토타이핑 결과물은 실제 웹사이트와 동일한 코드로 구성돼 있습니다. 그렇기에 개발자는 프로토타이핑 결과물을 기반으로 쉽고 빠르게 개발을 진행할 수 있다는 장점이 있습니다.

이런 장점 때문에 국내 유명 금융 기업 토스가 프레이머를 사용하고 있다는 것은 업계에서 유명한 이야기입니다. 하지만 동시에 이러한 장점을 모두 살리려면 디자이너가 코딩에 대한 지식이 있어야 하기 때문에 다른 디자인 툴과 다르게 비교적 진입장벽이 존재하는 것이 단점입니다.

• UX 디자인
• 웹사이트
• 피그마