미리보기

[간단 소개]

• SLR은 부산공유대학 소속 대학들의 수업을 모아, 수도권 대학 집중으로 인한 부산 지역의 위기감을 해소하기 위해 개발된 수업 리뷰 플랫폼입니다.

[깃허브]

• https://github.com/solp721/SLR

[기술 스택]

- Next.js | JavaScript | Zustand | Styled-Components

[기여 내용]

• SSR을 활용해 초기 페이지 로딩 속도와 SEO를 개선했으며 사용자 인터랙션이 필요한 경우에는 CSR을 적용하여, 부드러운 전환을 통해 UX를 최적화했습니다.

• Axios Instance를 사용해 API 호출 로직을 모듈화하고 중복 코드를 최소화했습니다.

• 사용자가 작성한 수업리뷰에 대한 키워드를 Chart.js를 통해 시각화하여 사용자가 리뷰의 주요 내용을 한눈에 파악할 수 있도록 구성했습니다.

• Atomic Design 패턴을 바탕으로 컴포넌트를 기능별로 분리 및 구조화 하였습니다.

• Styled-Components로 UI 컴포넌트를 구성해 학생과 교수의 유형에 따라 각각 다른 스타일을 동적으로 적용했습니다.

• Zustand-persist를 사용해 사용자의 로그인 상태 및 헤더의 로그인 모달 상태를 전역 관리하였습니다.

[이슈 및 해결과정]

1. 욕설 필터링 지연 문제

   • 욕설 필터링 서버에서 평균 8초 이상의 통신 지연이 발생하여, 클라이언트 측에 1차 욕설 필터링 리스트를 구축했습니다. 사용자가 리뷰 작성 시 리스트와 대조해 명백한 욕설이 포함된 댓글은 서버에 전송되지 않고 즉시 차단되도록 설계하여, 서버 성능에 의존하지 않으면서도 1초 이내에 필터링을 완료했습니다.

[간단 소개]

• 터틀런은 전국 700만 경계선 지능인을 위해 서울에만 존재하는 평생 교육 프로그램을 전국적으로 확산하기 위한 GPT-4 기반 평생학습 애플리케이션입니다.

[깃허브]

• https://github.com/ubsal-net/turtle-learn-front

[기술 스택]

- React-Native | JavaScript | Recoil

[기여 내용]

• React Native를 사용해 터틀런의 전반적인 앱 구조를 설계하고 구현했습니다. 특히 사용자가 첫 진입 시 앱의 기능과 주요 요소를 쉽게 이해할 수 있도록 온보딩 페이지를 구성하여 사용자 경험을 향상시켰습니다.

• 사용자가 로그인하면 Recoil로 사용자 정보를 저장하고, 진로 탐색 버튼 클릭 시 useEffect로 첫 API 호출을 통해 AI 서버에 params로 정보를 전달했습니다. 이를 통해 AI가 첫 대화를 시작하도록 설정했으며, 이후 백엔드에서 생성한 uuid로 사용자 세션을 식별했고, 대화 종료 시 해당 세션을 삭제하는 API를 호출해 리소스를 효율적으로 관리했습니다.

• 사용자 친화적인 채팅 UI를 구현하여 진로 탐색 AI와의 대화 경험을 자연스럽게 제공했습니다. FlatList와 useEffect를 활용해 대화가 발생할 때마다 자동으로 스크롤이 이동하도록 구성하여, 사용자가 지속적인 상호작용을 손쉽게 이어갈 수 있도록 했습니다.

[이슈 및 해결과정]

1. UI 비율 불일치 문제:

   • 기기별 화면 비율 차이로 UI가 불일치하는 문제가 발생하여, Dimensions API를 사용해 다양한 스마트폰 디바이스에서도 일관된 디자인이 제공되도록 구현했습니다. 이를 통해 화면 비율에 관계없이 UI 요소가 안정적으로 표시되도록 최적화했습니다.

[간단 소개]

• Angsook은 페르소나 기반 대화 시뮬레이션 시스템으로, 사용자 간 대화 시뮬레이션을 통해 자신의 대화 방식을 인식하고 분석하여 갈등을 줄이고 관계 개선을 돕는 것을 목표로 합니다.

[깃허브]

• https://github.com/solp721/Persona_Chatbot

[기술 스택]

- React , JavaScript , Flask , Python , Rasa , GPT-3.5-Turbo

[기여 내용]

• 시스템의 구성도와 아키텍처 설계부터 시작하여, Flask로 백엔드와 React로 프론트엔드를 구축하여 프로젝트의 기반을 마련했습니다.

• Rasa는 공감형 대화 데이터를 학습해 상황에 맞는 응답을 제공하도록 하고, GPT-3.5-Turbo는 페르소나 데이터로 파인튜닝하여 한국적 특성에 맞춘 대화 흐름을 설정했습니다. Rasa가 초기 대화 흐름을 제어하고, 복잡한 응답이 필요할 때는 GPT-3.5-Turbo가 응답을 생성하도록 결합하여 자연스러운 대화 경험을 제공했습니다.

• Web Speech API를 통해 음성 입력 기능을 추가하고, useEffect와 useRef를 사용해 대화가 발생할 때마다 자동으로 스크롤이 이동하도록 구현하여 부드러운 대화 흐름을 유지했습니다. 대화 종료 시 대화 기록을 AI서버에 전송하여 사용자의 대화 습관에 대한 피드백을 제공했습니다.

[이슈 및 해결과정]

1. 모델 할루시네이션 문제

   • 학습된 모델에서 할루시네이션이 발생하여, 이를 해결하기 위해 대화 데이터를 프롬프트와 응답으로 분리하여 학습하도록 했습니다. 이로써 모델이 상황을 더 정확히 인식하게 되었으며, 불필요한 정보가 메모리에 남지 않도록 메모리 최적화를 통해 학습 성능을 향상시켰습니다.

2. 대화 일관성 유지 문제

   • 사용자와 AI 간의 대화를 chat_history 배열로 기록하여 서버에 전송함으로써 AI가 대화의 맥락을 이해하고 일관된 응답을 제공하도록 했습니다. 각 메시지를 role과 content로 구성해, AI가 이전 대화 맥락을 유지하며 적절한 응답을 할 수 있도록 설계했습니다.