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

Lablup Conf 2023

Transcript

2. 변화하는 UI/UX 디자인: 문제 인식과 새로운 방향 김수진 Software Engineer Lablup Inc.
3. 들어가기 전에 § Lablup Inc. Make AI Accessible – 오픈소스 머신러닝 클러스터 플랫폼 Backend.AI 개발 – https://www.backend.ai § Backend.AI WebUI – 웹 또는 앱 형태의 GUI 클라이언트 – Backend.AI 서버에 접속하여 연산 자원을 활용 – 자신의 환경을 관리할 수 있는 편리한 그래픽 인터페이스 제공 – https://cloud.backend.ai § 세션 런처 – 컨테이너 기반의 연산 세션 생성 컴포넌트
12. 그러나 세션 타입 실행 환경 이미지 버전 이미지 이름 세션 이름 사전 오픈 포트 세션 소유자 설정 마운트 폴더 경로 대체이름 자원 그룹 자원 할당 사용자 설정 자원 클러스터 모드 클러스터 크기 고성능 컴퓨팅 최적화 🤯
13. 너비부터 늘리자
14. 페이지 단위로!
16. 입력을 나눠볼까? 실행 환경 일반 설정 네트워크 설정
19. 그런데 어디까지 내려갈 거니?
20. 기존 세로로 길어지는 문제 여전히 잔재
21. 페이지도 나누자!
22. 페이지도 나누자! § Carousel – 현재 UI – 입력을 나눠서 할 수 있음 – 특정 입력을 위해 클릭 수 증가
23. 페이지도 나누자! § Carousel – 현재 UI – 입력을 나눠서 할 수 있음 – 특정 입력을 위해 클릭 수 증가 § Tab – 특정 입력을 위해 불필요한 클릭 수 감소 – 입력해야 하는 게 많아 보임
24. 페이지도 나누자! § Carousel – 현재 UI – 입력을 나눠서 할 수 있음 – 특정 입력을 위해 클릭 수 증가 § Tab – 특정 입력을 위해 불필요한 클릭 수 감소 – 입력해야 하는 게 많아 보임 § Step – Tab과 유사 – 앞 단계에서 필수 항목 배치 자동 값 설정 입력해야 하는 게 적어 보임 – 모바일에서 Step을 나타내기 어려움
25. 페이지도 나누자! § Carousel – 현재 UI – 입력을 나눠서 할 수 있음 – 특정 입력을 위해 클릭 수 증가 § Tab – 특정 입력을 위해 불필요한 클릭 수 감소 – 입력해야 하는 게 많아 보임 § Step – Tab과 유사 – 앞 단계에서 필수 항목 배치 자동 값 설정 입력해야 하는 게 적어 보임 – 모바일에서 Step을 나타내기 어려움
26. 페이지도 나누자! § Carousel – 현재 UI – 입력을 나눠서 할 수 있음 – 특정 입력을 위해 클릭 수 증가 § Tab – 특정 입력을 위해 불필요한 클릭 수 감소 – 입력해야 하는 게 많아 보임 ü Step – Tab과 유사 – 앞 단계에서 필수 항목 배치 자동 값 설정 입력해야 하는 게 적어 보임 – 모바일에서 Step을 나타내기 어려움 다른 방법으로 해결해 보자
27. 모바일 환경에선? § 모바일 환경에서 Step 제거 § 이전, 다음 버튼, Skip 버튼
28. 모바일 환경에선? § 모바일 환경에서 Step 제거 § 이전, 다음 버튼, Skip 버튼 § 마지막 페이지에서 각 단계 편집 기능 추가
29. 정리하면 § 좁은 너비 – 페이지로 변경 § 많은 환경 설정으로 입력칸 수 증가 – 관련 있는 것끼리 그룹화 – 페이지 나누기 – 자동 완성 § 모바일 대응 – 입력이 불편하지 않도록 반응형 UI 사용 – 링크 활용
30. 화룡점정! 사용성 개선하기
31. 동적인 데이터 § 프로젝트, 자원 그룹에 따라 달라지는 가용 자원량 § 마운트 폴더 리스트 § 자원 프리셋 § …
32. 명시적으로 동적인 요소임을 나타내기 § 동적인 요소는 명시적으로 새로고침 버튼 추가
33. 열심히 눌렀는데 새로고침 했어요🤦
34. 하이퍼링크로 해결👮 § 세션 런처의 입력값을 링크에 반영 – 새로고침 이후에도 입력값 유지
35. 세션 템플릿 § 최근에 생성한 세션 정보 그대로 이용하기 § 현재 입력중인 세션 생성 정보를 템플릿으로 저장 1 템플릿에서 선택하기 2 현재 정보를 템플릿으로 저장하기
36. 사용자 흐름을 고려한 컴포넌트 배치 § 폴더 마운트 어떤 파일이 있더라? 파일 브라우저로 확인
37. 정리하면 § 좁은 너비 – 페이지로 변경 § 많은 환경 설정으로 입력칸 수 증가 – 관련 있는 것끼리 그룹화 – 페이지 나누기 – 자동 완성 § 모바일 대응 – 입력이 불편하지 않도록 반응형 UI 사용 – 링크 활용
38. 정리하면 § 좁은 너비 – 페이지로 변경 § 많은 환경 설정으로 입력칸 수 증가 – 관련 있는 것끼리 그룹화 – 페이지 나누기 – 자동 완성 § 모바일 대응 – 입력이 불편하지 않도록 반응형 UI 사용 – 링크 활용 § 동적인 데이터 – 새로고침 버튼을 넣어 명시적으로 표현 § 사용자 흐름 고려 – 하이퍼링크 – 세션 템플릿 – 컴포넌트 배치
39. 마치며 § 가장 적합한 표현 방법을 먼저 고민해야 삽질을 줄일 수 있다. – 페이지 나누기 Carousel, Tab, Step – 데이터 선택하기 Switch, Radio Button, Select § 사용자 경험을 높이기 위한 노력 – 새로운 기능 추가도 중요하지만, 기존의 기능을 어떻게 더 편하게 쓸 수 있는가를 고민해야 한다.
40. 감사합니다