보다 현대적인 UI/UX를 적용하기

해당 포스트는..

부스터스의 자동화 시스템 ‘부스타’를 사용자에게 더 나은 UI와 UX로 편리하고 친숙하게 다가갈수 있도록 개선한 노력의 과정을 담은 포스트입니다. 단순 데이터 대시보드를 넘어 다양한 기능으로 고도화되고 있는 부스타의 UI/UX를 어떻게 사용자 중심적으로 구현했는지에 대한 고민과 그 결과를 적용한 과정들을 공유합니다.

‘부스타’가 새 단장할 시간이 왔다.

“‘부스타’를 보면 데이터가 너무 많아서 어디부터 봐야 할지 모르겠어요.”

“이건 왜 이렇게 배치되어 있나요? 좀 더 시각적으로 예쁜 시스템이 되면 좋겠어요.”


제가 입사하고 ‘부스타’를 처음 마주했을 때 느꼈던 생각은 화면이 너무 딱딱하다는 것이었습니다. 매출, 실적, KPI 등의 다양한 데이터를 테이블 형태로 보여주고 있었는데, 이렇게 데이터만 나열하는 테이블 형태는 사용자 입장에서 보았을 때 가독성이 좋지 않았던 것 같습니다. 데이터를 더 쉽게 이해하고 분석할 수 있도록 대시보드를 고도화하면서, 사용자가 원하는 데이터를 더 쉽게 찾고 파악할 수 있도록 개선할 필요성을 느꼈습니다.

‘부스타’가 제공하는 다양한 기능 중 하나는 데이터 대시보드 기능입니다. 일반적으로 대시보드는 한 화면에 다양한 정보를 중앙집중적으로 관리하고 찾을 수 있도록 하는 인터페이스를 말합니다. 간단히 말해, 다양한 지표와 KPI를 한눈에 볼 수 있게끔 하는 것인데요. 다양한 정보를 다양한 사용자들에게 제공해 주는 대시보드 시스템을 개발/구성할 때는 어떤 것들을 고려해야 할까요?

그렇다면 혹시 전주의적 속성 이라는 말은 들어보셨나요? 전주의적 속성은 디자인 규칙 중 하나인데, 어떤 것을 보자마자 뇌에서 바로 알아차릴 수 있도록 강조하기 위한 시각적 속성을 말합니다. 저는 이 전주의적 속성들이 모두 갖춰진 대시보드가 좋은 대시보드라고 생각해요. 여기에 초점을 맞춰 개발한다면 사용자는 보다 빠르게 대시보드를 해석할 수 있게 될 테니까요.

전주의적 속성의 가장 큰 핵심은 구성 요소들의 적절한 활용입니다. 통일성과 단순함을 기반으로 시각적으로 빠르게 필요한 데이터를 볼 수 있도록 UI/UX를 개발해야 합니다. 우리가 개발하는 ‘부스타’는 대시보드의 성격을 넘어 자동화 시스템의 성격도 가지고 있습니다. 복잡성이 늘어남에 따라 통일성과 단순함이 위배된다면 산만한 디자인의 시스템이 될 것입니다. 그래서 더 늦기 전에 ‘부스타’만의 디자인을 갖춰야 할 시점이라고 생각했습니다.

현대 UI/UX에서의 다양한 디자인 트렌드

그렇다면 구체적으로 부스타를 어떻게 바꾸면 좋을까요? 먼저 UI/UX를 구성하는 디자인 트렌드에 대해 공부해보았습니다. 디자인 트렌드는 사용자 경험(UX)과 사용자 인터페이스(UI)의 발전을 이끌어왔으며, 각각의 디자인 스타일은 고유한 특징과 장단점을 가지고 있습니다. 아래는 최근의 주요 디자인 트렌드인 뉴모피즘, 플랫 디자인, 머티리얼 디자인에 대한 간략한 설명입니다.

뉴모피즘 (Neumorphism)
뉴모피즘은 최근 디자인 커뮤니티에서 주목받고 있는 트렌드로, 스큐어모피즘과 플랫 디자인의 중간 지점을 찾아내고자 하는 시도로 시작되었습니다. 뉴모피즘은 주로 그림자와 음영을 사용하여 UI 요소를 부드럽고 매끈하게 표현합니다. 버튼이나 카드가 마치 물리적으로 돌출된 듯한 느낌을 주며, 배경과 UI 요소 간의 대비가 낮아 접근성이 낮다는 평가를 받고 있으며, 시각적으로 명확한 구분이 필요합니다. 따라서 흰색 배경을 사용하는 것이 일반적이지만, 배경 색상에 대한 제약이 있어 다양한 색상을 활용한 디자인이 필요할 수 있습니다.

플랫 디자인 (Flat Design)
플랫 디자인은 직관적이고 간결한 UI를 제공하기 위해 복잡한 그래픽 효과를 배제한 디자인 스타일입니다. 복잡한 텍스처와 그림자를 사용하지 않고, 단순한 색상과 기하학적 형태를 사용하여 깔끔한 디자인을 제공합니다. 그리드 기반 레이아웃을 사용하여 정보의 시각적 계층을 명확히 하고, 사용자에게 쉽게 접근할 수 있도록 합니다. 하지만 과도한 단순화로 인해 사용자 인터페이스의 개성과 표현력이 제한될 수 있습니다. 애플의 초기 디자인이 이 플랫 디자인이었습니다.

머티리얼 디자인 (Material Design)
머티리얼 디자인은 구글에서 발표한 디자인 언어로, 플랫 디자인의 단점을 보완하고 입체감을 추가한 디자인입니다. 빛과 그림자를 활용하여 UI 요소에 깊이와 공간감을 부여하여 입체감을 줍니다. 입체감이 있기 때문에 버튼이나 카드가 실제 물체처럼 느껴지도록 설계됩니다. 또, 다양한 플랫폼에서 유연하게 사용자 경험을 제공하며, 직관적인 인터페이스를 제공합니다. 애니메이션과 시각적 피드백을 적극적으로 사용하여 사용자의 인터랙션에 대한 반응도 즉각적으로 제공할 수 있습니다.

세 가지 트랜드 중 머티리얼 디자인은 직관적이고 일관된 사용자 경험을 제공하고 있다고 느꼈으며, 다양한 플랫폼에서 사용되고 있는 만큼 친근한 느낌을 받았습니다. ‘부스타’가 사용자에게 더 친숙하고 편리하게 다가가려면 머티리얼 디자인이 적합하다고 판단했습니다. 다만, 머티리얼의 단점인 시각적 복잡성과 과도한 디테일을 우리만의 기준에 맞게 일관성 있게 개선하여 사용하면 더 좋을 것 같다고 생각했습니다.

대시보드에 현대적인 UI/UX를 입혀보자.

“대시보드가 그냥 정확한 데이터만 보이면 되는 거 아니야?”라고 생각하시는 분들도 많을 텐데요, 디자인 트렌드를 공부하고 대시보드에 적용해야 하는 이유는 사용자 경험을 극대화하고 데이터 분석 및 의사결정 과정을 효율적으로 지원하기 위해서입니다. 이렇게 의도한 대로 대시보드가 잘 만들어진다면, 정확한 데이터를 편하게 볼 수 있게 되고 여기서 아낀 시간을 창의적인 영역을 고민하는 데에 쏟을 수 있게 됩니다. 머티리얼 디자인을 통해 보다 현대적인 UI/UX를 가진 대시보드를 개발한다면 얻을 수 있는 구체적인 기대 효과를 적어보았습니다.

1. 직관적인 데이터 시각화
   현대적인 UI/UX는 데이터를 시각적으로 쉽게 이해할 수 있게 디자인하여 사용자가 복잡한 정보를 빠르게 파악할 수 있도록 합하여 사용자의 이해도가 증대됩니다. 직관적인 데이터 시각화는 사용자가 데이터를 더 잘 이해하고 신속하게 의사결정을 내릴 수 있도록 도와줍니다.

2. 사용자 친화성
   현대적인 디자인은 사용자가 대시보드를 사용하면서 느끼는 불편함을 최소화하고 긍정적인 경험을 제공하는 데 초점을 맞추어 사용자의 경험 즉, UX가 향상됩니다. 직관적이고 일관된 디자인은 사용자가 대시보드를 쉽게 배우고 사용할 수 있게 하여 생산성을 높입니다.

3. 커스터마이제이션
   현대적인 UI/UX는 사용자가 자신의 필요에 맞게 대시보드를 커스터마이즈할 수 있는 기능을 제공합니다. 이는 사용자가 가장 중요하다고 생각하는 정보를 중심으로 대시보드를 구성할 수 있게 합니다. 이런 개인화된 경험이 쌓이다보면 서비스와 개발자의 경험고리가 더 단단해지지 않을까요? 사용자마다 다른 요구를 충족시키기 위해 다양한 위젯, 차트, 그래프 등을 제공하여 대시보드를 유연하게 구성할 수 있습니다.

4. 효율적인 정보 구조 제공
   현대적인 UI/UX는 정보의 논리적인 배치를 통해 사용자가 필요한 정보를 쉽게 찾을 수 있게 합니다. 이는 사용자의 탐색 시간을 줄이고 업무 효율성을 높입니다. 직관적인 네비게이션 구조는 사용자가 대시보드 내에서 쉽게 이동하고 필요한 데이터를 빠르게 접근할 수 있도록 합니다.

현대적인 UI/UX로 위 사항을 제공해 준다면, 우리의 대시보드는 단순한 데이터 표시 도구를 넘어 사용자에게 가치를 제공하고 업무 성과를 향상시키는 중요한 도구로 활용될 수 있을 것입니다.

이왕 적용하는 거 우리만의 것을 만들어 잘 적용하기로 했어요.

‘부스타’라는 시스템은 이미 저희 회사에서 전사적으로 사용하고, 협력 업체들까지도 사용하고 있는 시스템이라 한 번에 모든 것을 바꾸어 버리는 것은 오히려 사용자의 경험을 해칠 수 있었습니다. 개발자에게 업데이트가 자랑하고 싶은 존재라면, 사용자에게 업데이트는 적응해야 하는 존재이기도 하니까요. 그래서 하나하나 차근차근 기본 요소들부터 적용하고 보완해 나가고 있습니다.

우선 머티리얼 디자인에서 가장 상징적인 입체감과 깊이감으로 카드나 모달 등에 적용해서 사용자가 인터페이스의 계층 구조를 자연스럽게 이해할 수 있도록 하였습니다. 그리고 저희 회사의 상징인 오렌지 색으로 중간중간 포인트 컬러를 주고, 폰트 크기, 굵기 등을 일관된 기준으로 설정하여 통일성을 주었습니다. 전체적인 폰트를 크게 한 번 바꾸었었는데, 데이터가 가장 한 번에 많이 보이는 테이블이 보기 쉬워졌다는 말을 많이 해주셔서 좋았습니다. 또, 그리드 시스템을 사용해서 레이아웃을 정렬되고 일관된 구조로 유지할 수 있게끔 하고 카드 레이아웃도 통일성 있게 작업했습니다.

올해 초에 제가 가장 신경 썼던 부분은 반응형이었습니다. 반응형 작업이 많이 되어 있지 않아서 그것들을 하나하나 잡는 데에 집중했던 기억이 있는데, 아직 성에 차지 않아서 모바일 버전을 만들어 보고 싶다는 생각이 큽니다.

이것과 더불어 앞으로 제가 ‘부스타’에 더 중점적으로 작업하고 싶은 부분은 개인화와 마이크로 인터랙션입니다. 개인화는 UI/UX 디자인에서 점점 더 커지는 추세이며, 2024년에도 계속 발전할 겁니다. 사용자는 자신의 선호도와 요구 사항에 맞는 맞춤형 경험을 기대하는 것이 커져가게 되고, 이것이 지켜지지 않으면 서비스 이탈자가 생길 것입니다. 반대로 이것이 잘 지켜진다면 사용자는 해당 서비스가 ‘나를 위한 것’이라고 느끼게 되고 “단방향이 아닌 양방향 소통을 하고 있다”라고 생각하게 될 것입니다.

개인화와 더불어 같은 맥락에서 마이크로 인터랙션 또한 자잘한 액션들이나 애니메이션 효과를 통해 사용자가 데이터 로딩을 기다리는 시간에도 지루하지 않게, 지금 어떤 일이 화면에서 일어나고 있는지 즉각적인 피드백을 제공할 것이라고 생각합니다. 이런 것들이 모여 사용자의 UX를 점점 향상시켜 나가는 것이 목표이고, 이게 제 일이라고 생각해요.

글을 마무리하며

저는 어느 정도의 UI/UX 실력은 요즘 프론트엔드 개발자의 필수 덕목이라고 생각하는데요. 사용자와 화면 사이에서 코딩이라는 도구를 통해 커뮤니케이션을 잘하는 프론트엔드 개발자가 되고 싶습니다. 사용자의 경험을 올리면서 개발자의 경험도 같이 올릴 수 있게 앞으로도 ‘부스타’를 예쁘게 만들어 나가 볼게요. 😉