소플 고도화 1차

개요

대한상공회의소는 141년의 전통을 지닌 종합 경제단체로, 기업과 지역 경제를 지원하는 다양한 활동을 이어오고 있습니다. 소통 플랫폼 ‘소플’은 AI 요약, 토론 커뮤니티, 맞춤형 콘텐츠, 실시간 소통과 펀딩 기능을 통해 사회와 기업이 연결되는 경제 참여 공간을 제공합니다. 1차 고도화 프로젝트에서는 소플에 AI 기능을 적극 도입하면서 AI 검색, AI 글쓰기 페이지를 새로 구축합니다.

진행 방식

고도화를 위한 운영 및 일부 구축 프로젝트이며, React.js 환경에서 작업을 진행하였습니다. 스타일 처리로는 styled-component 를 사용하였으며, Redux 로 중앙데이터 관리를 진행하였습니다. 디자인 수급은 figma 로 이루어졌으며 기획은 sk cns, 디자인은 더즈인터랙티브에서 작업을 하였습니다. 백엔드 3명, 프론트엔드 3명의 구성원으로 협업을 진행하였습니다.

주요 작업 내용

• 1. AI 검색

  • 조건부 화면 UI 구현

    • - 대한상의 뉴스 / 경제뉴스에 따른 자료 및 소플AI / 일반(Gpt-o) AI 별 선택에 따라 검색 로직 분리
    • - 검색중 / 검색 중지 / 비로그인 시 리다이렉트 등 여러 상황별 예외처리 (스켈레톤 처리 등) 대응

  • 검색 결과 화면 개발

    • - 키워드 검색 / 페이지 별 검색 별도 기능 구현
    • - 중복 요청에 의한 데이터 불일치 이슈에서 AbortController 를 활용하여 요청 응답 일관성 유지
    • - 주석번호에 따른 출처자료 리스트 생성

• 2. AI 글쓰기

  • 기존의 일반 글쓰기와 더불어 AI 기반의 글 등록/수정 기능 구현

  • 뉴스 자료 데이터를 연동하여 선택한 뉴스 데이터 기반으로 AI 글을 생성할 수 있도록 구현

    • - AI 기반으로 글 생성시 질문도 자동으로 추가되도록 설정하여 사용자 경험 개선

  • 그 외 투표 생성 기능, 질문 작성지 추가 기능, 해시태그 기능 구현

  • 이전 단계로 이동시 작성하던 데이터는 모두 초기화될 수 있다는 내용의 팝업을 생성해 사용자의 작업 내용 손실 방지

• 3. 경제 뉴스룸 리뉴얼

  • 랜덤 색상으로 AI 요약 배너 슬라이드 구현

  • 뉴스별 탭으로 리스트 구현, 최신순 인기순 정렬 기능

  • 뉴스 제목 및 내용 검색 기능 구현

  • 뉴스 AI 요약 연동 및 좋아요/싫어요 기능, 뉴스 공감 기능, 이전글/다음글 기능 구현

💫 Trouble shooting

• 검색 탭 전환 시 이전 API 요청으로 인한 데이터 덮어쓰기 이슈

  문제: 검색 페이지에서 탭을 빠르게 전환할 때 이전 API 요청이 완료되면서 최신 탭의 데이터가 덮어씌워져 사용자가 선택한 탭과 실제 표시되는 데이터가 일치하지 않는 이슈가 발생

  해결: AbortController 를 활용한 API 요청 취소 메커니즘을 구현하여 이전 요청을 중단하고 최신 요청만 완료되도록 구현하여 데이터 일관성과 사용자 경험을 크게 향상 Blog

• 패널회원 가입 리다이렉트 오류 (운영건)

  문제: 패널회원 가입 과정에서 본인인증 완료 후 리다이렉트 URL을 설정했는데, 내부 데이터 요청 시 _next/data 경로가 포함되어 조건문이 제대로 동작하지 않아 루트 경로로 잘못 리다이렉트되는 이슈가 발생

  해결: context.resolvedUrl 을 사용하여 사용자측 실제 요청 URL을 추출하도록 수정 → 내부 데이터 원본 경로와 사용자 요청 경로를 정확히 구분하여 본인인증 후 패널 가입 페이지로 올바르게 리다이렉트되도록 구현 Blog

• 좋아요/싫어요 기능 혹은 공감 기능에서의 UI 오류

  문제: 뉴스 페이지의 AI 요약 좋아요/싫어요 기능 및 뉴스 공감 기능에서 사용자가 버튼을 클릭했을 때, 서버 응답을 기다리는 동안 UI가 즉시 변경되지 않는 문제가 발생하여 사용자들이 한 번 더 클릭해보거나, 기능이 제대로 작동하지 않는것으로 여김

  해결: Optimistic UI Update 패턴을 활용하여 서버 응답 대기없이 즉시 결과를 보여주는 방식으로 개선, 요청과 동시에 프론트단에서 setState 처리로 바로 기능이 작동하는 것처럼 보이게 만듦 → 사용자 경험을 크게 향상