Meta Ops

클라우드 인프라 UX/UI 디자인 및 설계

이 프로젝트는 클라우드 인프라 환경의 복잡성을 해결하고 개발자 사용성을 최적화하는 데 중점을 두었습니다.

사용자가 직관적으로 시스템을 이해하고, 목표를 효율적으로 달성할 수 있도록 UX/UI를 디자인하고 설계했습니다.

Project 기간 : 23.03~ 24.08

프로젝트 참여 과정

Service & User Research > Brand Guideline & Design System > User Experience & User Interface >UX writing >Prototype > QA

초기 리서치 및 기술적 제약 파악: 오픈소스 기반의 클라우드 컴퓨팅 솔루션에 대한 광범위한 리서치를 진행했습니다. 이를 통해 시스템의 기술적 한계와 비즈니스 요구사항을 정확히 파악했습니다.
문제 정의 및 와이어프레임 제작: 리서치 결과를 바탕으로 사용자가 겪을 수 있는 핵심적인 문제들을 정의했습니다. 이 문제를 해결하기 위한 구조를 와이어프레임으로 구체화했습니다.
개발자 협업 및 프로토타입 개발: 개발팀과 긴밀하게 소통하며 기술적 구현 가능성을 검토했습니다. 논의를 거쳐 사용자 경험을 실제로 테스트할 수 있는 프로토타입을 제작했습니다.
결과: 기획 및 디자인 과정을 100% 완료했습니다. 모니터링 및 빌링 대시보드는 실제 데이터 연동이 불가능하여 QA 과정에서 제외되었으나, 핵심 기능인 가상 인스턴스 생성 프로세스와 **관리자 페이지(Admin Panel)**의 사용자 흐름은 성공적으로 설계되었습니다.

Brand Design

프라이머리 컬러 시스템을 바탕으로 logo design 과 아이콘 디자인을 제작했습니다.

아이콘은 다크컬러 모드에도 사용가능할 수 있는 점, 향후 서비스가 늘어날 경우를 고려하여 SOLID , LINE 2가지 형태로 작업하였습니다.

Color Primary

MetaOps Logo

Service Icon

Design System

디자인 시스템과 토큰 네이밍 도입으로 컴포넌트 재사용률 100%로 달성했으며 타이포그라피,그리드 레이아웃, 모달, 버튼, 피드백, 로딩과 같은 컴포넌트 요소를 디자인 시스템 가이드 및 토큰 네이밍을 포함하여 제작하였습니다.

예) color.brand.primary, spacing.16, radius.lg, font.body.md

Colors

Color library

Button

Button guide

Message

Feedback guide

Layout

Grid and Column

Typography

Tocken 적용

서비스 기획/디자인 범위

1. 회원가입

2. 로그인 및 비밀번호 변경

3. 회원정보 수정 (기업,개인)

4. 네트워크 생성

5. 템플릿 생성

6. 모니터링 대시보드 , 디테일 뷰

7. 그라파나 대시보드

8. 홈 대시보드

9. 빌링 대시보드, 디테일뷰

10. 즐겨찾기 및 GNB,LNB 메뉴

디자인 핵심 원칙 및 전략

사용자 경험을 극대화하기 위해 다음과 같은 UX 디자인 원칙들을 적용했습니다.

힉의 법칙 (Hick's Law) 적용: 클라우드 인프라를 사용하는 개발자는 복잡한 단계를 싫어합니다. 따라서 선택의 수를 최소화하여 사용자의 의사결정 시간을 단축하는 데 집중했습니다. 사용자 플로우를 단순화하고, 필수적인 기능에 쉽게 접근할 수 있도록 UI를 설계했습니다.
폰 레스토프 효과 (Von Restorff Effect) & 테슬러의 법칙 (Tesler's Law) 활용: 사용자가 긴급하게 확인해야 할 **핵심 정보(critical information)**를 시각적으로 강조했습니다. 또한 시스템 내의 모든 복잡성은 완전히 제거할 수 없다는 점을 인지하고, 사용자가 꼭 알아야 할 정보를 효과적으로 위계화하여 제공했습니다. 이를 통해 사용자는 중요한 알림이나 오류를 즉시 식별하고 대응할 수 있습니다.
UX 휴리스틱(Usability Heuristics) 기반 개선:
시스템 상태의 가시성: 사용자가 현재 시스템 상태를 명확히 알 수 있도록 직관적인 피드백을 제공했습니다.
에러 방지 및 복구: 발생 가능한 오류를 사전에 예측하고, 사용자에게 오류를 방지할 수 있는 가이드를 제공했습니다. 오류가 발생했을 경우에도 쉽게 인식하고 수정할 수 있도록 명확한 메시지와 솔루션을 제시했습니다.
도움말 및 문서화: 클라우드 인프라에 익숙하지 않은 사용자를 위해 상세한 도움말과 가이드를 제공하여, 시스템에 대한 이해를 높일 수 있도록 지원했습니다.