Backend.AI는 AI 기술을 쉽고 빠르게 사용할 수 있도록 하는 SaaS서비스형 소프트웨어다. 이번 프로젝트를 통해 인하우스 디자이너의 부재로 인한 UI/UX 트렌드 대응 병목현상을 해결하고, 일관된 디자인 시스템을 마련하고자 했다.
래블업 강지현 Sr. 소프트웨어 엔지니어
바이스 버사 디자인 스튜디오 김묘영 대표, 곽보은 디자이너
래블업은 ‘Make AI Accessible’을 모토로 머신러닝 플랫폼과 솔루션을 제공한다. 참여 계기는 래블업 내부의 UI/UX 디자이너 부재로 빠르게 변화하는 AI 환경에 대응하는데 어려움이 있었기 때문이다. 디자인 컨트롤 센터 없이 기능만 추가하다 보니 디자인이 혼재되고, 사용성은 떨어졌다. 또한 최근 해외 고객이 증가하면서 글로벌 스탠다드에 맞는 디자인이 필요했다. 이에 주요 페이지의 목적에 맞도록 디자인을 개선하고, 일관성 있는 디자인 시스템을 구축해 디자이너 부재로 인해 따르는 고민을 최소화하고자 했다.
바이스 버사 디자인 스튜디오는 국내 최초의 인포그래픽 전문 스튜디오로, 다양한 분야의 데이터 분석 및 시각화 경험을 보유하고 있다. 이번 사업의 경우 혁신적인 기술력에도 불구하고 내부 디자이너 부재로 서비스 확장에 어려움을 겪고 있는 래블업을 위해 참여하게 됐다. 신기술 기반 서비스 디자인에 관심이 많았고, 킥오프 미팅을 통해 이번 협업이 양사의 강점을 더욱 증폭시키는 계기가 되리라고 판단했다. 지원사업을 통해 래블업의 기술력과 우리의 디자인 경험을 결합한 윈윈(Win-Win) 사례를 만들고자 했다.
첫 번째 목표는 정보구조도(IA)의 재정의였다. 급변하는 시장 흐름에 맞춰 빠른 개발이 이뤄지다 보니 UI가 다소 복잡해져 직관적인 정보구조도가 절실했다. 두 번째는 디자인 시스템의 정리였다. 래블업은 디자인팀 부재로 자체 디자인 시스템 도입에 어려움을 겪고 있었다. 그동안은 UI 라이브러리에서 제공하는 디자인 시스템을 사용했지만 프로젝트의 규모가 커지면서 사용성이 저하됐다. 따라서 일관적이고 지속 가능한 디자인 시스템을 구축하고, 국제 기준에 맞는 쉬운 UI로 바꾸는 것을 목표로 삼았다.
Backend.AI 서비스 사이트 UI/UX 고도화 프로젝트는 복잡해진 정보구조도를 재정립하고, UI/UX 최적화를 통해 사용자 직관성을 향상시키는 것을 목표로 했다. 특히 해외 진출을 앞두고 내부 디자이너 없이도 빠르고 일관된 서비스 업데이트가 가능하면서도, 글로벌 스탠다드에 부합하는 지속 가능한 디자인 시스템 구축을 최우선 순위로 두었다. 이는 장기적인 서비스 확장성과 효율성을 고려한 전략적 접근이었다.
짧은 기간 내에 모든 메뉴를 수정하기란 불가능했기에 자주 사용하는 메뉴 가운데 개선이 시급한 부분 위주로 수정했다. 진행 과정에서 디자인 기업으로부터 메뉴 구조 개편이 필요하다는 의견을 들었고, 이에 1개의 페이지를 추가해 총 4개의 페이지를 개선하는 쪽으로 협의했다. 일정에 따라 디자인 수정과 동시에 개발을 진행했고, 오프라인 미팅 때마다 협의 사항이 늘어났다. 래블업은 참고 자료를 통해 자세한 내용과 목표를 공유했고, 양사의 노력 끝에 성공적으로 프로젝트를 마무리할 수 있었다
Backend.AI 분석 결과, 예산과 일정의 제약 때문에 전체 서비스를 개선하는 것은 불가능했다. 초기 예상과 달리 메뉴 구조의 개편이 시급했던 상황이라 온라인 미팅 및 오프라인 워크숍을 통해 이와 같은 내용을 공유하고 협의하며 업무 범위를 조정했다. 이 과정에서 일부 내용이 추가 및 변경됐지만 서로 적극적으로 소통한 덕분에 만족스러운 결과를 도출할 수 있었다. 모듈화 컴포넌트와 명확한 디자인 가이드라인 개발로 래블업의 독립적 서비스 업데이트와 확장을 지원했으며, 이는 장기적으로 서비스 발전과 효율성 향상에 크게 기여할 것으로 기대한다
Before/Process
디자인 개선을 통해 제품 경쟁력 상승과 매출 증대를 기대할 수 있게 됐다. 일관성 있는 디자인이 적용된 UI는 사용 편의성 개선뿐만 아니라 차별화된 브랜드 이미지를 구축해 시장점유율을 확대하는데 기여할 것이다. 래블업은 2020년 손익분기 달성 이후 매년 매출 규모 확대를 통해 인정받은 성장성을 배경으로 개선된 UI를 국내외 기술 콘퍼런스, 전시 등에 활용할 것이다. 자체 운영 클라우드에도 동일 UI를 적용해 무료 체험 버전을 제공하고, 성공 사례 연구와 백서 발간을 통해 우수성을 홍보할 계획이다.
이번 컨소시엄을 통해 복잡한 하이퍼 스케일 AI 플랫폼을 사용자 친화적으로 리디자인하고, 향후 업데이트가 용이한 디자인 시스템을 구축하는 성과를 얻었다. 레퍼런스가 거의 없는 서비스의 UI/UX 디자인 시스템을 구축함으로써 얻은 노하우는 앞으로 새로운 프로젝트를 진행할 때 큰 자산이 될 것으로 확신한다. 해당 포트폴리오를 바탕으로 새로운 서비스 UI/UX 디자인에 도전할 계획이며, 디자인 어워드에 출품해 자사의 디자인 역량을 인정받고자 한다.
Backend.AI는 인공지능 기술을 누구나 쉽고 빠르게 사용할 수 있도록 사회 구성원 간의 격차를 메워주는 SaaS 제품입니다. 소규모 AI 모델부터 초거대 언어 모델까지 AI 모델을 효율적으로 구축, 훈련, 제공해 서비스 개발 및 운영에 들어가는 비용과 복잡성을 현저하게 줄여주죠. 주로 국내외 기업과 연구소, 대학 등에서 사용하고 있습니다. 다수의 고객은 폐쇄망과 같은 제한 환경에서의 비용 및 관리 소요 절감을 목표로 하고 있어요. 이번 사업을 통해 인하우스 디자이너 부재로 인한 UI 트렌드 대응 병목현상을 해결하고, 일관성 있는 UI 시스템을 마련하는 것이 목표였습니다
Backend.AI는 다중 사용자 환경에서 여러 개의 연산 노드를 묶어 사용자가 원할 때 필요한 만큼 할당할 수 있기 때문에 연산 자원 사용량을 극대화할 수 있어요. 자원을 효율적으로 관리함에 따라 비용을 절감할 수 있죠. 또한 고객의 클라우드, 온-프레미스, 하이브리드 환경을 비롯해 다양한 AI 가속기, 연산 프레임워크 및 도구를 지원하는 범용성을 지니고 있습니다. 이번 지원사업으로 지속 가능한 디자인 시스템을 구축해 향후 기능을 추가하거나 파생 제품을 개발할 때 활용할 수 있는 시스템을 갖추게 됐습니다.
가장 중요하게 생각한 것은 ‘단순화’입니다. 전문 지식이 없는 일반인도 쉽게 이해하고 사용할 수 있도록 하는 것이 핵심이었죠. 이를 위해 시각적 메타포를 적극 활용해 복잡한 AI 프로세스를 단계별로 시각화하고, 정보를 그룹핑해 직관적인 컬러와 아이콘을 적용했습니다. 전문 용어는 최소화하고, 필요시 툴팁으로 쉬운 설명을 제공해 사용자 경험을 개선하고 접근성을 높였어요.
AI 시장의 급속한 발전으로 사용자의 요구사항이 다양화되고 변화 속도도 가속화하고 있어요. 이에 대응하기 위해 애자일 방법론(Agile Methodology)을 도입해 래블업과 긴밀히 소통하고, 요구사항을 즉시 반영했습니다. 테스트 사이트를 구축해 디자인 변경을 신속하게 점검하는 유연한 접근 방식으로 시장 변화에 민첩하게 대응하면서도 일관된 사용자 경험을 제공할 수 있었죠. 또 오픈 라이브러리 소스를 활용하면서도 Backend.AI만의 고유한 아이덴티티를 구축하고자 했어요. 이는 효율성과 창의성의 균형을 잡는 현대 디자인의 핵심 트렌드를 반영한 부분이기도 합니다
‘신속하고 효과적인 커뮤니케이션’이었어요. 상황에 따라 단계별로 문서 공유, 온라인 미팅, 오프라인 워크숍을 적재적소에 활용해 업무 효율을 높였습니다. 특히 세 차례에 걸쳐 진행한 오프라인 워크숍에서는 초기에 요청한 대로 C 레벨 이상의 결정권자들이 직접 참석해주신 덕분에 즉각적인 피드백 교환이 가능했죠. 이러한 전략적 커뮤니케이션이 제한된 시간 내에 성공적인 결과물을 도출할 수 있었던 접근이라고 생각합니다.
신진아티스트 플랫폼, 서치라이트(SEARCHLIGHT)
Backend.AI 서비스 사이트 UI/UX 고도화
빅데이터 플랫폼 e-Mapp 서비스 화면 UI/UX 개발
책 읽어주는 벤치 시나리오 및 UX 전략 개발
통합 교육 플랫폼 그로우스펙(GrowSpec) UI/UX 개발