OpenAI API로 채팅 앱의 UX 개선하기

이 튜토리얼에서는 OpenAI API를 사용하여 채팅 애플리케이션의 사용자 인터페이스 (UI)를 개선하는 방법을 배웁니다. 지금까지의 채팅은 매우 초보적인 수준이었으며, 다양한 조정을 통해 ChatGPT의 UI를 보다 최신의 것으로 최적화할 것입니다. 이 가이드가 끝나면 더욱 매력적인 사용자 경험을 만들 수 있을 것입니다.

주요 학습 내용

• 응답 생성 중 입력 필드를 능동적으로 비활성화합니다.
• 마지막 답글 대신 전체 채팅 기록을 표시합니다.
• 채팅의 레이아웃과 표시 방식 개선.
• 일반적인 버그를 수정하고 일관된 상태 관리를 구현합니다.

단계별 가이드

1. 응답 생성 중 입력 필드 비활성화하기

먼저 API에서 응답을 생성하는 동안 입력 필드와 '보내기' 버튼이 비활성화되어 있는지 확인합니다. 이렇게 하려면 보류 중 플래그에 useState를 사용하여 새 상태를 만듭니다.

사용자가 '보내기'를 클릭하면 보류 중을 true로 설정하고 응답이 수신되면 false로 설정합니다. 이렇게 하면 UI를 제어하고 그에 따라 입력 필드를 사용자 지정할 수 있습니다.

이 단계를 시도하면 응답을 기다리는 동안 입력 필드가 비활성화되고 사용자가 새 메시지를 입력할 수 있도록 이전 입력 필드가 지워지는 것을 확인할 수 있습니다.

2. 채팅 내역의 레이아웃 변경하기

보다 매력적인 레이아웃을 만들려면 ChatGPT와 유사하게 입력 필드 아래에 메시지 내역을 표시해야 합니다. 이렇게 하려면 JSX 코드의 요소 순서를 조정하여 대화 내역이 맨 위에 오도록 해야 합니다.

이렇게 변경한 후에는 메시지를 입력하고 전송하여 레이아웃을 테스트합니다. 이제 입력 필드 위에 내역이 표시되어야 합니다.

3. 플렉스박스를 사용하여 UI를 더 보기 좋게 배열하기

입력 필드와 기록이 잘 정렬되었는지 확인하려면 플렉스박스를 사용해야 합니다. 외부 컨테이너에 디스플레이: 플렉스를 추가하고 플렉스 방향을 열로 설정하여 요소가 세로로 정렬되도록 합니다.

배치할 때 플렉스: 1을 사용하여 메시지 입력 필드와 그라데이션 사이에 충분한 공간이 있는지 확인할 수도 있습니다.

4. 컨테이너의 전체 높이 확보

본문, HTML, 메인 div를 포함한 모든 컨테이너는 전체 높이가 100%여야 합니다. CSS에서 이러한 속성을 설정하여 레이아웃이 올바르게 렌더링되도록 하세요.

이러한 변경 후에도 레이아웃이 원하는 대로 표시되지 않으면 여백을 확인하고 0으로 설정하여 스크롤바가 없는 보기를 보장하세요.

5. 채팅 내역 구현하기

채팅 기록을 구현하려면 메시지에 다른 상태를 추가합니다. 이 상태는 보낸 모든 메시지를 저장합니다. 새 메시지를 보낼 때는 반드시 메시지 상태에 추가해야 합니다.

지도 명령을 사용하여 메시지 배열에서 각 메시지를 적절하게 표시해야 합니다. 이렇게 하면 각 사용자 및 API 메시지를 올바르게 출력할 수 있습니다.

6. 오류 처리 추가

강력한 사용자 환경을 만들려면 사용 중에 발생할 수 있는 오류(예: 서버 오류 503)를 처리해야 합니다. 사용자에게 오류를 알리고 필요한 경우 짧은 대기 시간 후에 요청을 다시 시도하는 오류 처리 루틴을 구현하세요.

7. 메시지 표시 개선

현재 메시지를 쉽게 구분할 수 없습니다. 각 메시지에 사용자가 보낸 것인지 AI가 보낸 것인지를 표시하여 표시하면 도움이 될 것입니다. 사용자 메시지와 AI 메시지를 명확하게 구분할 수 있도록 표시를 사용자 지정하는 방법에 대해 생각해 보세요.

요약

이 튜토리얼에서는 타겟팅 UI 사용자 지정을 통해 OpenAI API로 채팅 애플리케이션의 사용자 경험을 크게 개선하는 방법에 대해 배웠습니다. API 응답 중 입력 필드 비활성화부터 전체 채팅 기록 구현까지, 이 팁은 애플리케이션을 한 단계 더 발전시키는 데 도움이 될 것입니다.