소플 고도화 2차

개요

대한상공회의소는 141년의 전통을 지닌 종합 경제단체로, 기업과 지역 경제를 지원하는 다양한 활동을 이어오고 있습니다. 소통 플랫폼 ‘소플’은 AI 요약, 토론 커뮤니티, 맞춤형 콘텐츠, 실시간 소통과 펀딩 기능을 통해 사회와 기업이 연결되는 경제 참여 공간을 제공합니다. 소플 1차 고도화 이후로 AI 를 기반으로 한 전반적인 시스템 개편을 위해 2차 이후로 새롭게 사이트를 구축을 시작하였습니다.

진행 방식

구축 프로젝트이며, React.js 기반으로만 만들어졌던 이전 1차 소플을 SEO 기능 및 여러 편리한 내장 기능 처리를 위해 Next.js 환경으로 구현하였습니다. styled-component 의 지원중단을 계기로 대체 스타일 라이브러리로 emotion 을 사용하였으며, Redux 로 중앙데이터 관리를 진행하였습니다. 디자인 수급은 figma 로 이루어졌으며 기획은 sk cns 에서, 디자인은 더즈인터랙티브에서 작업을 하였습니다. 백엔드 3명, 프론트엔드 3명의 구성원으로 협업을 진행하였습니다.

주요 작업 내용

• 1. 메인

  • 조건별 화면 UI 구현

    • - 맞춤추천/카테고리 조건부로 화면을 적용 (맞춤추천의 경우 사용자의 성향에 따라, 카테고리의 경우 탭에 따라 컨텐츠가 달라짐)
    • - 상위 배너 개발 → 페이지 별로 배너 베리에이션 구현
    • - 카드 배너를 통해 여러 컨텐츠마다 베리에이션 적용 (소플뉴스룸 - AI 요약, 오늘의 지식 - 투표 등…)
    • - 메인피드 베리에이션 적용
    • - 다수 데이터 요청을 병렬로 처리하여 데이터 로딩 시간 단축

  • 공통 슬라이드 구현

    • - 커뮤니티, 교양이연구소, 기업에 바란다 등 다양한 컨텐츠마다 공통 슬라이드를 적용하여 구현

  • 사용자 기능 구현

    • - 사용자 알림배너에서 클릭시 읽음 표시 처리, ‘전체 읽음’ 기능 구현 및 인피니트 스크롤링 적용
    • - 유저 프로필 리스트 및 상세 구현

• 2. 소플 뉴스룸

  • 대한상의뉴스, 정책뉴스, 경영법률상담 별 목록/상세 컨텐츠 화면 및 컴포넌트 구현

  • 탭기능, 검색, 최신순 정렬 등의 기능으로 뉴스를 카테고리 별로 찾아볼 수 있도록 구현

  • 현재글/이전글/다음글 표시로 사용자 경험 강화

• 3. 기업에 바란다

  • 기업 제안 글쓰기 등록 폼 개발

  • 모든 제안 / 내 제안, 기업 매칭 상황별 탭 기능 구현

  • 상세 페이지 → 제안 공감 및 공유하기 기능 구현

  • 제안 공감 건수에 따라 Progress Bar 형태로 구현

• 4. 소플 서베이

  • 목록 화면에서 서베이 목록, 결과 발표 목록 구현

    • - 버튼 문구 3가지를 랜덤으로 배치

  • 상세페이지 내 서베이/소플 컨텐츠에 따라 분류

    • - 서베이 → 서베이독 투표 Iframe 으로 컨텐츠 구현
    • - 소플 → 소플 투표 컨텐츠 구현

  • 패널회원전용 컨텐츠일 경우 화면 구현

    • - 네이버 ID 연동 구현
    • - 패널회원이 아닐 시 Blur 처리, 패널회원가입 유도 기능 구현

• 5. 오늘의 지식

  • OX / 찬반 투표 기능을 구현

  • 정답 여부 및 동일 의견 비율을 팝업으로 시각화하여 직관적인 데이터 제공 경험을 강화

💫 Trouble shooting

• 데이터의 양이 많아 바인딩 속도가 지연되는 이슈

  문제: 메인페이지에서는 여러 페이지들(커뮤니티, 교양이연구소 등)의 컨텐츠의 양이 많다 보니 순차적으로 데이터 요청을 보내게 되면 그만큼 시간 지연 발생

  해결: Promise.all 을 사용하여 여러 개의 api 요청을 병렬로 처리하여 전체 로딩 시간을 단축

• Redux useSelector 배열 반환으로 인한 불필요한 리렌더링

  문제: useSelector 에서 배열을 반환할 때, 매번 새로운 배열 참조가 생성되어 같은 데이터를 가져와도 불필요하게 컴포넌트가 리렌더링됨

  해결: createSelector 를 활용하여 메모이제이션을 적용 → 입력 값이 동일하면 캐싱된 기존 배열을 반환하도록 구현하여 불필요한 리렌더링을 방지함, 에러 메시지가 사라져 컴포넌트가 원활히 렌더링됨 Blog

• 디자인 가이드의 공통 컴포넌트에 따른 개발 단계 혼선

  문제: 공통 컴포넌트의 베리에이션이 굉장히 복잡하고 여러 페이지들에서 컴포넌트가 중복 사용되는 일이 발생하여 컴포넌트를 중복으로 구현해버리거나 구두로 컴포넌트 사용법을 공유하면서 불편함 초래

  해결: Storybook 을 활용하여 개발자들 사이에서 아이콘, 입력폼 등 공통 컴포넌트를 사용법과 함께 공유할 수 있도록 함 → 작업이 겹치는 혼선이 사라져 개발 효율이 증대

• 백엔드 개발자와의 api 에러에 대한 소통 혼선

  문제: 백엔드 API 연동 작업을 진행하는 도중 어떠한 에러가 발생할 때 프론트엔드와 백엔드 간의 책임 소재가 불분명하여, 크로스체크 및 디버깅 과정에서 불필요한 시간을 소모하며 개발 일정이 지연되는 문제가 발생

  해결: PostMan 을 활용하여 API 엔드포인트별로 테스트 환경을 구축 → 프론트와 백엔드 중 어떤 쪽의 문제인지 쉽게 파악이 가능해 협업 시 개발 시간 단축