#group #LGresearch #AI #web | 🗓️ | Jun 2023 - Jun 2024 | | --- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | 팀 | Jiwon, Gwangho, Seungho, Youjee, Gunhee | | 담당 | - Jiwon: 프로젝트 매니지먼트, 서비스 기획, QA<br>- Gwangho: 백엔드 개발, 프롬프트 엔지니어, QA<br>- Seungho: 서비스 기획<br>- **Youjee: 서비스 기획, 디자인 리드, UX, 프로토타입, GUI, QA**<br>- Sinae: GUI, 디자인 시스템<br>- Gunhee: 프론트엔드 개발 | | 소개 | LG AI 연구팀과 협업하여, 그들의 AI 기술을 활용해 전문가용 웹 플랫폼을 제작했다. 마지막 버전3을 포함하여 총 3차례 개발이 진행되었다. |  ##### _사용자의 질문을 예측하고 답변을 보고서로 저장하는 AI 플랫폼._ 이 플랫폼은 LG 리서치와 우리 팀의 협업으로 제작되었다. 질문과 관련된 문서를 활용해 근거 기반의 답변을 생성함으로써 AI 환각(hallucination)을 최소화하도록 설계된 전문가용 대화형 AI 플랫폼이다. 프로젝트는 두 단계로 진행되었다. 첫 번째 단계에서는 AI와의 대화를 기반으로 답변을 생성하는 데 초점을 맞췄다. 그리고 오른쪽에는 프롬프트와 관련된 레퍼런스가 표시된다. 사용자가 직접 사용해본 후 피드백을 모았는데, 원하는 정보를 얻기 위해 여러 번 질문해야 해야하는 불편함이 있었다. 사용자들은 더 적은 질문으로 다양한 정보를 얻길 원했다. 따라서 두 번째 단계에서는 답변을 더 **문서 중심적**으로 설계하여, 차트, 뉴스, 서브에이전트 답변과 같은 정보를 추가 질문 없이도 얻을 수 있도록 했다.  이 플랫폼은 LG 연구원과 전문가를 대상으로 하므로, LG 브랜딩을 고려하면서도 디자인 콘셉트는 심플하게 유지했다. AI의 신뢰성과 전문성을 디자인에 반영하고자 했다. ## Interface  ###### 사이드 메뉴 > 사용자가 질문한 답변들이 문서화되기 때문에, 비슷한 카테고리에 따라 폴더로 정리할 필요가 있다는 점을 발견했다. 단순히 질문을 리스트로 쌓아두는 대신, 사용자가 폴더를 만들고 커스터마이즈할 수 있는 기능을 추가했다. > 메인 에이전트 [[#^1e712d]] 가 폴더에 추가되면 서브 페이지[[#^b1cba7]]도 함께 포함된다. 그러나 서브 페이지만 추가될 경우에는 폴더 안에 단독으로 남는다. <br>  ###### 쿼리 입력 > 데이터베이스에 저장된 Lair ID는 "@"를 사용해 검색할 수 있다 (예: @Tesla). <br>   ###### 결과 상태 > 사용자 질문과 답변의 상태(성공, 로딩, 실패)가 표시된다. 이 상태 값을 포함시킨 이유는, 답변마다 생성되는 데 걸리는 시간이 조금씩 다르기 때문이다 (예: 서브에이전트 답변, 차트, 레퍼런스). 답변이 아직 생성 중인지, 완료되었는지를 사용자에게 알려주는 메커니즘이 필요했다. 사용자가 답변에 만족하지 못할 경우 'Retry' 버튼을 통해 새 답변을 생성할 수 있다. <br>  > 결과 화면에서 쿼리를 수정할 수 있으며, 그 후 새 보고서가 생성된다. <br>  ###### 서브 에이전트 콘텐츠 ^b1cba7 > 각 콘텐츠는 페이지로 정리되며, 포함된 레퍼런스는 태그로 표시되어 사용자가 미리 볼 수 있다. 메인 에이전트 페이지와 달리, 서브 에이전트는 싱글 뎁스 페이지로 구성된다. 중요도가 낮아짐에 따라 화면 아래쪽에 재배치된다. <br> ###### 프롬프트에 대한 응답 (메인 에이전트) ^1e712d > 사용자 프롬프트에 대한 응답: 사용자가 질문했을 때 답변을 먼저 보고 싶어 한다는 점을 발견하여, 결론을 상단에 배치하기로 했다. 따라서 사용자 질문에 대한 최종 답변이 맨 위에 위치하고, 이를 뒷받침하는 레퍼런스는 아래에 배치된다.   > 레퍼런스는 메인 답변의 근거 역할을 하며, 차트와 외부 링크는 쿼리 입력 영역으로 드래그 앤 드롭할 수 있다. 이를 통해 사용자는 모든 정보를 다 읽지 않고도 내용을 이해하거나 차트 분석을 요청할 수 있다. 또한 메인 에이전트 페이지의 모든 텍스트는 편집이 가능하여, 추가 콘텐츠를 통합하고 저장하거나 보고서로 만들기 용이하다. <br>  > 차트를 클릭하면 다이얼로그에서 자세히 볼 수 있으며, 차트와 관련된 레퍼런스가 하단에 표시된다. <br> #### Dark mode     ##### Design System  --- 개발을 포함해 1년 동안 버전 1.0과 2.0을 작업했으며, 개발자와 팀 간의 활발한 커뮤니케이션이 있었다. 이미 진행 중인 기술 개발로 인해 일부 기능 구현에 제약이 있었지만, 버전 3.0 출시가 기대된다.