(섬네일=손찬호 디자이너 bbt0808@ditoday.com)

좋은 서비스 하면 무엇이 떠오르나요? 성능? 콘텐츠? 고객소통? 요즘은 여기에 한 가지가 더 붙습니다. 바로 UI∙UX죠. 이제는 아무리 성능이 좋아도 이용하기 불편하면 소비자는 미련 없이 떠납니다. 쓸만한 서비스는 너무나 많거든요.

특히 웹에서 바로 이용하는 SaaS 플랫폼은 직관적이면서도 빠릿한 UI∙UX가 필수라고 합니다. 이에 사용자 친화적인 디자인을 내세운 SaaS 플랫폼을 몇 가지를 살펴봤습니다. 브랜드의 UI∙UX 철학이 각 기능에 어떻게 녹아들었을까요.

노코드 웹사이트 솔루션, 아임웹

아임웹은 노코드 기반의 웹사이트 및 쇼핑몰 구축 솔루션을 운영합니다. 이 회사의 UI∙UX 철학은 명확하죠. “Simple is the best!”

아임웹 고객은 대부분 1인 셀러나 소상공인입니다. 마케팅이나 디자인에 할애할 수 있는 시간적 여유가 많지 않죠. 따라서 아임웹은 고객이 쉽고 편리하게 서비스를 이용할 수 있도록 심플한 UI∙UX에 초점을 맞췄습니다.

1) 디자인 모드

아임웹 디자인 모드

아임웹의 핵심은 코딩을 몰라도 사이트를 만들 수 있다는 점입니다. 때문에 실제 작업 페이지인 디자인 모드는 직관성과 효율성을 최우선으로 고려했습니다. 불필요한 요소를 최소화해 중요한 내용을 빠르게 파악할 수 있도록 했고요. 반응형 웹사이트 구축 서비스를 적용해 디스플레이 환경에 맞춰 레이아웃과 콘텐츠가 자동으로 변화하도록 했습니다.

또 작업 화면과 실제 구현 화면을 일치시켰습니다. 아임웹에서는 디자인 모드를 통해 실제 화면과 매우 유사한 화면에서 디자인 작업이 이뤄집니다. 코딩 방식으로 사이트를 구현할 때는 ‘미리보기’를 통해 작업 내용이 제대로 구현됐는지 매번 확인해야 했는데 이 같은 번거로움을 없앤 거죠.

2) 12-그리드 시스템

12-그리드 시스템

아임웹은 그리드 시스템을 도입했습니다. 그리드는 ‘격자무늬’ 또는 ‘격자판’을 의미하는데요. 페이지 콘텐츠를 논리적이고 일관성 있는 질서와 구조로 디자인할 수 있도록 돕는 그래픽 시스템입니다. 사용자가 격자 선에 맞춰 디자인에 규칙을 부여할 수 있기 때문에 페이지를 더 쉽고 깔끔하게 제작할 수 있습니다.

그리드 시스템은 그리드 개수에 따라 8, 12, 16 등 형식이 다양한데, 아임웹에서 제공하는 12-그리드 시스템은 반응형 웹 디자인에 최적인 형태입니다. 사용자는 텍스트, 이미지, 버튼과 같은 요소를 12분의 1 칸 단위로 제어할 수 있습니다. 기존과 달리 픽셀(pixel) 단위로 세밀하게 조정할 필요가 없어 이용자는 콘텐츠 제작에 집중할 수 있습니다.

3) 오른쪽 마우스 버튼 지원

오른쪽 마우스 버튼 지원

다른 웹 기반 서비스와 달리 아임웹은 오른쪽 마우스 버튼 기능을 지원합니다. 위젯 추가나 이미지 수정을 오른쪽 마우스 버튼으로 할 수 있죠. 그 덕에 작업 화면을 닫지 않아도, 사용자가 보고 있는 화면에서 여러 가지 기능을 이용할 수 있습니다.

4) 텍스트 최소화

텍스트 최소화

메뉴 이미지도 깔끔합니다. 메뉴 관리나 위젯 추가, 섹션 추가 등의 버튼을 아이콘으로 구현해 텍스트 노출을 최소화 했습니다. 텍스트는 작업에 방해되지 않도록 아이콘에 마우스를 올릴 때만 나타납니다. 각종 디자인 요소 아이콘도 이해하기 쉬운 일관된 UI로 제공합니다.

채용 관리 솔루션, 그리팅

두들린은 기업용 채용 관리 솔루션 그리팅을 운영합니다. 이 회사의 UIUX 철학은 “유저에게 필요하지 않은 것은 만들지 않는다(NO NEEDS NO MAKE)”입니다. 불필요한 시각 요소를 제거하고, 신기능 학습에 드는 사용자의 리소스를 최소화하도록 설계했죠.

기업 인사 담당자는 여러 채용 사이트에 접수된 지원자 정보를 그리팅 안에서 한번에 관리할 수 있습니다. 다양한 사이트의 정보를 다루는 만큼, 무엇보다 통일감과 정돈된 UI를 구현하는 데 집중했습니다.

1) 칸반보드

칸반보드

두들린은 채용 단계별로 지원자를 파악하는 칸반보드를 제공합니다. 칸반보드에서 드래그 앤 드롭으로 지원자를 다음 채용 단계로 옮길 수 있습니다. 기능의 직관성에 초점을 맞춘 디자인이죠. 또 행간 구분 라인을 최소화 하고 여백을 확보해, 불필요한 시각 요소를 절제해 통일감을 유지하고, 눈이 편안한 UIUX를 제공합니다.

2) 한 화면에 담기

한눈에 볼 수 있는 연관 내용

연관 내용은 한 화면에서 볼 수 있게 했습니다. 지원자 이력서와 평가 차트를 한 화면에 담아 편리하게 지원자를 평가하도록 했습니다. 원래라면 이력서와 자소서, 평가서를 여러 창에 띄워 두고 번갈아 확인해야 했는데 이 같은 번거로움을 줄인 것이죠.

3) 노코드 기반 시스템

노코드 기반 제작 서비스

채용 사이트 제작은 코딩을 몰라도 가능합니다. 왼쪽 단 레이아웃 부분에 각 칸에 대한 설명이 순서대로 노출돼 어떤 섹션이 추가돼 있는지 한 눈에 확인할 수 있고요. 해당 페이지와 관련된 정보와 선택 기능이 양 옆에 정렬돼 있어 페이지를 이리 저리 옮기거나 추가로 버튼을 클릭하지 않아도 한 눈에 해당 페이지와 관련된 정보를 모두 확인하고, 취사선택할 수 있습니다.

멀티 클라우드 관리 플랫폼, 옵스나우

옵스나우는 멀티 클라우드 관리 플랫폼 전문 기업입니다. 옵스나우의 UIUX 철학은 유용(Utility), 편의(Usability), 친절(Kindness) 세 가지입니다. 중요한 정보를 중심으로 간결하고 일관성 있는 화면 제공하고(유용), 보편타당한 디자인으로 편리하고 유연한 서비스를 제공하며(편의), 사용자가 어려움 없이 제품을 경험할 수 있도록 했죠(친절).

해당 영역을 잘 모르는 비전공자도 쉽게 지표와 내용을 파악할 수 있도록 대부분의 정보를 시각화한 점이 특징입니다. 클라우드 운영 관리 전 영역의 데이터를 통합해 핵심 관리 지표를 지수화했고, 멀티 클라우드 환경의 비용, 자산, 거버넌스, 메모리 사용량, 보안 등을 한 번에 관리할 수 있습니다.

1) 개인 맞춤 대시보드

나만의 대시보드

옵스나우 이용자는 원하는 정보를 위젯으로 구성해 나만의 ‘대시보드’를 만들 수 있습니다. 꼭 필요한 정보만 간단명료하게 볼 수 있도록 선택권을 준 것이죠. 타 CMP(Clould Management Platform)에서는 보기 드문 기능입니다.

2) 직관적인 시각화

정보의 시각화

정보 지표화 및 시각화도 특징입니다. 클라우드 관리에 필요한 정보들을 지수화하고 이를 다시 시각화해 비용·관리·보안 등이 적절하게 이뤄지고 있는지, 문제가 있는 곳은 어느 부분인지 쉽게 파악할 수 있습니다.

자료출처 : 사용자 친화적인 UI∙UX로 사랑 받는 SaaS 플랫폼 - DIGITAL iNSIGHT 디지털 인사이트 (ditoday.com)