Advancing UI/UX for GenAI and Hybrid AI-김수진, 이종은

Transcript

2. Advancing UI/UX for GenAI and Hybrid AI 김수진, 이종은
3. § Generative artificial intelligence 생성형 인공지능 § 텍스트, 이미지, 비디오 등을 생성할 수 있는 인공지능 시스템 🧐 GenAI
4. 🧐 Hybrid AI § 온디바이스 AI 클라우드 AI § 온디바이스 AI – 인터넷 연결 없이 기기상에서 AI 모델을 구동시킴 § 클라우드 AI – 인터넷에 연결된 상태로 클라우드 상에서 AI 모델을 구동시킴 출처 https://namu.wiki/w/ ED 95 98 EC 9D B4 EB B8 8C EB A6 AC EB 93 9C 20 EC 83 98 EC 9D B4 EC 86 9F EC 95 84 20 EB A6 AC EC 98 A4 EB A0 88 EC 9D B4 EB B9 84
5. GenAI 예시 출처 https://chatgpt.com, https://www.adobe.com/creativecloud/media 1dfb27bf082a3d5500d7c54e1fe13d006b417a6a1.mp4, https://musia.ai/assets/video/one/brandNaming/Overall.mp4 § 텍스트 생성 § 이미지 생성 § 음악 생성
6. GenAI를 활용한 서비스 디자인 § 텍스트 생성 – 챗봇 고객 문의에 대한 답변, 상품 추천 등 – 콘텐츠 작성 뉴스 기사, 블로그 글, 광고 문구 등 자동 생성 – 코딩 프로그래밍 코드 자동 완성, 버그 수정 등 § 이미지 생성 – 디자인 웹사이트, 앱 디자인, 상품 디자인 등 시각적 콘텐츠 생성 – 아트 그림, 사진, 일러스트 등 예술 작품 생성 – 3D 모델링 3D 모델 자동 생성
7. GenAI를 활용한 서비스 디자인 § 음악 생성 – 음악 작곡 다양한 장르의 음악 작곡 – 사운드 디자인 게임, 영화 등에 사용되는 사운드 효과 생성 § 영상 생성 – 애니메이션 2D, 3D 애니메이션 자동 생성 – VR/AR 콘텐츠 가상 현실, 증강 현실 콘텐츠 생성
8. 하이브리드 AI 예시 § 자율주행 자동차 § 스마트폰 § 웨어러블 기기 출처 https://static assets.tesla.com/configurator/compositor?context design studio 2 options MT355, PN01, W38A, IPB2 view STUD FRONT34 model m3 size 1920 bkba opt 2 crop 0,0,0,0 , https://www.apple.com/v/iphone 16 pro/a/images/overview/contrast/iphone 16 pro erqf8e51gl4y xlarge 2x.jpg, https://images.samsung.com/kdp/goods/2024/07/07/b04e527f c63d 410a b52c dca8cd517edf.png? 944 550 PNG
9. Hybrid AI를 활용한 서비스 디자인 § 스마트폰 카메라 – 📱 온디바이스 실시간 얼굴 인식, 피부톤 분석을 통한 뷰티 필터 적용 – ☁ 클라우드 고화질 이미지 생성, 다양한 스타일의 필터 적용, 이미지 검색을 통한 유사 이미지 찾기 § 스마트 스피커 – 📱 온디바이스 음성 인식, 간단한 명령 수행 – ☁ 클라우드 복잡한 질문에 대한 답변, 음악 스트리밍, 스마트 홈 제어
10. Hybrid AI를 활용한 서비스 디자인 § 자율주행 자동차 – 📱 온디바이스 실시간 장애물 인식, 차선 유지 – ☁ 클라우드 HD 지도 업데이트, 교통 정보 분석, 자율주행 알고리즘 개선 § 웨어러블 기기 – 📱 온디바이스 심박수 측정, 수면 패턴 분석 – ☁ 클라우드 건강 데이터 분석을 통한 맞춤형 운동 계획 제공, 의료 데이터와 연동
11. 🔮AI의 추상화 § 의인화 – 채팅 스타일의 LLM Large Language Model – 개인화된 상호작용 출처: https://gemini.google.com/app, https://www.apple.com/siri/
12. 🔮AI의 추상화 § 기능 중심 – 단순한 입력과 출력 출처 https://code.visualstudio.com/assets/docs/copilot/overview/inline chat question example.png, https://code.visualstudio.com/assets/docs/copilot/overview/inline chat convert sort.png
13. 🔮AI의 추상화 § 의인화 – 대화형 UI로 자연스러운 상호작용 – 기존 컨텍스트를 이어가는 장점 § 기능 중심 – 명확한 시작과 끝을 가진 단순 기능 제공 – 사용자의 명확한 요구 해결
14. 🤔 고려해야 할 사항들 § 사용자 경험 UX – 직관적인 인터페이스 – 개인화된 서비스 – 다양한 응답 § 성능 및 효율성 – 정확한 응답 – 빠른 처리 속도
15. UX와 성능을 저해하는 요소들 § 🤯 정확하지 않은 응답 – AI의 신뢰성 저하 § 😵💫 Text 중심의 답변 문제 – 다양성과 표현력의 한계 – 정보 과부하 § 🥱 느린 응답 – 사용자 만족도 감소
16. 🤯 정확하지 않은 응답 일반 기능과 GenAI 기능의 구분 🤖 ✨🪄 🔮
17. 🤯 정확하지 않은 응답 일반 기능과 GenAI 기능의 구분 PURPLE 🔮 창의성, 혁신, 미래 지향적 BLUE BLACK 🧞혁신, 기술, 신뢰성 ⌚전문성, 정확성, 강력함
18. 😵💫 Text 중심의 답변 문제 풍부한 UI 제공 § 단순 마크다운 형식으로 답변이 온다면? – 백문이 불여일견 – 차트나 그래프로 한 번에 보여주면 되는 데이터들 – 언어의 장벽 번역의 정확성, 뉘앙스 차이 – 정보 과부하
19. 🥱 느린 응답 Streaming UI § 사용자 경험을 개선하기 위해 실시간 데이터 스트리밍 활용 § 로딩 시간이 길거나, 데이터가 점진적으로 사용 가능해질 때 유용함 § 사용자는 최종 데이터가 모두 로드되기 전 일부를 볼 수 있음
20. 🥱 느린 응답 Streaming UI 출처 https://images.app.goo.gl/1eV2Q1ckZ94eHygL6, https://images.app.goo.gl/5QXi6B5zcPMjQkdWA, https://images.app.goo.gl/UDBaF4w6Gyc1LbhT6, https://images.app.goo.gl/GePY5ufKkwBJhYZP8, https://images.app.goo.gl/uTAvdyASGit33Yav7
21. 우리가 만들어야 하는 것은? § 정확하지 않을 수 있는 응답 구분 § Text 중심의 답변에서 벗어난 풍부한 UI 제공 § 즉각적인 응답
22. 즉각적이면서도 풍부한 UI를 어떻게 제공할 것인가?
23. 🙋 이종은 § Frontend Lead Developer, Lablup 🧠 § 100 원격 근무자 🌴 § YouTube 코드종 👍 § JavaScript and React ❤
24. 🤔 방법은? 👷 STREAM 👷 GEN UI
25. 오늘의 코너 속의 코너 Stream이 존재하지 않는 것처럼 작성하는 Gen UI Stream
26. Generative UI? 🤔 어떤 UI를 표시할지 누가 결정하는가?
27. LLM의 Text응답 ⌨ Input 🧠 LLM 🖥 Browser Plain text
28. Tool이 결정하는 UI 🤔 모든 요청을 완료해야만 무언가를 보여줄 수 있는가?
29. Tool과 Stream UI
30. 🦄 React Server Component와 Action이 가져온 변화 § 리액트 서버가 클라이언트에게 보낼 수 있는 것? – 서버 컴포넌트의 렌더링 결과 – 클라이언트 컴포넌트의 prop – 서버 함수 Server Action 의 결과 – Promise 그림 출처 https://nextjs.org/learn/dashboard app/streaming STREAM!
31. Vercel AI SDK § AI SDK Core 텍스트 생성, 구조화된 객체 생성, 도구 호출을 위한 LLM 통합 API § AI SDK UI 채팅 및 생성형 사용자 인터페이스를 빠르게 구축할 수 있는 Hook 제공 § AI SDK RSC React 서버 컴포넌트 RSC 를 사용해 생성형 UI를 스트리밍하는 라이브러리
32. Backend.AI WebUI의 LLM Playground
33. Tool과 Streamable Response
34. 😎 래블업이 경품을 추첨하는 방법
35. Tool 1. 오늘 몇명이 참가했나요? 🎉 와우, 믿기지 않네요! 20명의 참가자가…. 2 3 축하 메시지 생성 요청 LLM 1 ⌨ 오늘 몇명이 참가했나요? 참가자 확인 API 요청
36. Tool 2. 당첨자를 뽑아주세요 2 3 참가자 확인 및 당첨자 선정 1 ⌨ 애플워치 당첨자를 1명 뽑아주세요. 🤪 당첨자 힌트! 당첨자 이름의 초성으로 삼행시를 만들어 봤습니다. ㅎ 하얀... 🎉 축하합니다. 홍길동님! 사용자 인터렉션 경품 이름을 이용한 이미지 생성 당첨자 힌트 삼행시 생성 요청 LLM
37. StreamableText
38. Steam UI로 yield 하기 § Generator 함수를 이용해서 UI의 변화를 yield
39. Promise 그대로 보내기 § 서버에서 보낸 API 요청의 Promise를 서버에서 기다리는 것이 아니라 Client로 보내고 Client의 UI에서 핸들링
40. Blocking 대신 Stream § 기본 Text 응답 Text의 Stream으로 Nonblocking 구현 § Tool을 이용한 Gen UI 응답 – Stream의 대상이 Text를 넘어 UI Streaming, Promise까지 클라이언트로 – Server Component를 렌더링 해서 넘기기 – Client Component에게 Prop으로 넘기기 Stream을 세밀하게 조율하면서도 선언적 UI 프로그래밍을 유지할 수 있다!
41. 요약 § Gen AI와 Hybrid AI의 서비스 디자인과 기술적 접근의 중요성 § 효과적인 UI/UX를 위한 최신 React 기술 활용 예시