Upgrade to Pro — share decks privately, control downloads, hide ads and more …

변화하는 UI/UX 디자인: 문제 인식과 새로운 방향 - 김수진

Lablup Inc.
November 28, 2023
41

변화하는 UI/UX 디자인: 문제 인식과 새로운 방향 - 김수진

Lablup Conf 2023

Lablup Inc.

November 28, 2023
Tweet

More Decks by Lablup Inc.

Transcript

  1. 들어가기 전에 § Lablup Inc. Make AI Accessible – 오픈소스

    머신러닝 클러스터 플랫폼 Backend.AI 개발 – https://www.backend.ai § Backend.AI WebUI – 웹 또는 앱 형태의 GUI 클라이언트 – Backend.AI 서버에 접속하여 연산 자원을 활용 – 자신의 환경을 관리할 수 있는 편리한 그래픽 인터페이스 제공 – https://cloud.backend.ai § 세션 런처 – 컨테이너 기반의 연산 세션 생성 컴포넌트
  2. 그러나 세션 타입 실행 환경 이미지 버전 이미지 이름 세션

    이름 사전 오픈 포트 세션 소유자 설정 마운트 폴더 경로 대체이름 자원 그룹 자원 할당 사용자 설정 자원 클러스터 모드 클러스터 크기 고성능 컴퓨팅 최적화 🤯
  3. 페이지도 나누자! § Carousel – 현재 UI – 입력을 나눠서

    할 수 있음 – 특정 입력을 위해 클릭 수 증가
  4. 페이지도 나누자! § Carousel – 현재 UI – 입력을 나눠서

    할 수 있음 – 특정 입력을 위해 클릭 수 증가 § Tab – 특정 입력을 위해 불필요한 클릭 수 감소 – 입력해야 하는 게 많아 보임
  5. 페이지도 나누자! § Carousel – 현재 UI – 입력을 나눠서

    할 수 있음 – 특정 입력을 위해 클릭 수 증가 § Tab – 특정 입력을 위해 불필요한 클릭 수 감소 – 입력해야 하는 게 많아 보임 § Step – Tab과 유사 – 앞 단계에서 필수 항목 배치 자동 값 설정 입력해야 하는 게 적어 보임 – 모바일에서 Step을 나타내기 어려움
  6. 페이지도 나누자! § Carousel – 현재 UI – 입력을 나눠서

    할 수 있음 – 특정 입력을 위해 클릭 수 증가 § Tab – 특정 입력을 위해 불필요한 클릭 수 감소 – 입력해야 하는 게 많아 보임 § Step – Tab과 유사 – 앞 단계에서 필수 항목 배치 자동 값 설정 입력해야 하는 게 적어 보임 – 모바일에서 Step을 나타내기 어려움
  7. 페이지도 나누자! § Carousel – 현재 UI – 입력을 나눠서

    할 수 있음 – 특정 입력을 위해 클릭 수 증가 § Tab – 특정 입력을 위해 불필요한 클릭 수 감소 – 입력해야 하는 게 많아 보임 ü Step – Tab과 유사 – 앞 단계에서 필수 항목 배치 자동 값 설정 입력해야 하는 게 적어 보임 – 모바일에서 Step을 나타내기 어려움 다른 방법으로 해결해 보자
  8. 모바일 환경에선? § 모바일 환경에서 Step 제거 § 이전, 다음

    버튼, Skip 버튼 § 마지막 페이지에서 각 단계 편집 기능 추가
  9. 정리하면 § 좁은 너비 – 페이지로 변경 § 많은 환경

    설정으로 입력칸 수 증가 – 관련 있는 것끼리 그룹화 – 페이지 나누기 – 자동 완성 § 모바일 대응 – 입력이 불편하지 않도록 반응형 UI 사용 – 링크 활용
  10. 세션 템플릿 § 최근에 생성한 세션 정보 그대로 이용하기 §

    현재 입력중인 세션 생성 정보를 템플릿으로 저장 1 템플릿에서 선택하기 2 현재 정보를 템플릿으로 저장하기
  11. 정리하면 § 좁은 너비 – 페이지로 변경 § 많은 환경

    설정으로 입력칸 수 증가 – 관련 있는 것끼리 그룹화 – 페이지 나누기 – 자동 완성 § 모바일 대응 – 입력이 불편하지 않도록 반응형 UI 사용 – 링크 활용
  12. 정리하면 § 좁은 너비 – 페이지로 변경 § 많은 환경

    설정으로 입력칸 수 증가 – 관련 있는 것끼리 그룹화 – 페이지 나누기 – 자동 완성 § 모바일 대응 – 입력이 불편하지 않도록 반응형 UI 사용 – 링크 활용 § 동적인 데이터 – 새로고침 버튼을 넣어 명시적으로 표현 § 사용자 흐름 고려 – 하이퍼링크 – 세션 템플릿 – 컴포넌트 배치
  13. 마치며 § 가장 적합한 표현 방법을 먼저 고민해야 삽질을 줄일

    수 있다. – 페이지 나누기 Carousel, Tab, Step – 데이터 선택하기 Switch, Radio Button, Select § 사용자 경험을 높이기 위한 노력 – 새로운 기능 추가도 중요하지만, 기존의 기능을 어떻게 더 편하게 쓸 수 있는가를 고민해야 한다.