[프로젝트 회고] 사용자 친화적인 설문조사 '폼폼폼'

'폼폼폼' 발표 영상 바로가기
사용자 친화적인 설문조사 '폼폼폼' 페이지 바로가기
GitHub 바로가기

목차
01. 프로젝트 시작
02. 프로젝트 방향성
03. 개발조건
04. 코드 설명
05. 마치며

🏁 01. 프로젝트 시작

프로젝트를 하기위해 가장 먼저 고민한 부분은 현재 필요한 것은 무엇인가였습니다. 단순히 기술만을 나열한 프로젝트가 아닌, 진짜 필요한 것을 만드는 프로젝트를 하고 싶었습니다.

여러가지를 고민하고 있는 찰나, 요즘 자주 접하는 설문조사를 좀 다르게 제작하면 어떨까라는 생각이 들게 되었습니다. 현재 상용화된 설문조사는 문서와 같이 딱딱한 형식, 작은 글씨로 인한 불편한 가독성, 작은 버튼으로 인한 불편한 사용성 등의 문제가 있었습니다. 이런 부분을 개선하여 친근하게 그리고 편리하게 사용할 수 있는 플랫폼을 제작한다면, 좋은 프로젝트가 될 수 있을 것이라 생각했습니다.

👥 02. 프로젝트 방향성

• 저희 프로젝트는 편리함이 핵심 키워드였습니다. 따라서 이를 중심으로 기능들을 기획하였습니다.
  • 폼 제작시 미리보기 기능
  • 한눈에 보기 쉬운 통계 페이지
  • 폼 응답시 큰 버튼과 반응 유도 애니메이션
  • 사용적 측면에서 편리한 무한 스크롤 기능
• 추가로 설문조사는 지루하다는 인식을 타파하고자 재미를 키워드로 잡고 추가 기능등을 기획하였습니다.
  • 선물하기 기능
  • 실시간 설문 응답자 조회 기능

🖥️ 03. 개발조건

• React Framework를 사용
• Styled Component 사용
• Redux toolkit 사용
• Apex-charts 라이브러리 사용
• Amazon S3, Cloud Frount를 통한 배포
• 아키텍처
  

⚙️ 04. 코드 설명

1) 파일 구조
파일 구조를 components / constants / core / layout / pages / redux / shared / styles 로 구분하였습니다.
component 폴더는 페이지별로 1차 분리, 기능별로 2차 분리하여, 기능과 screen으로 3차 분리하여, 기능 위주로 폴더가 분리 될 수 있도록 구성하였습니다.

2) 주요 기능 설명
a. 설문을 제작할 땐 미리보기로 모바일 유저들의 사용성 체크

모바일 유저들을 타겟으로 사용성을 체크하며, 깔끔하게 제작할 수 있습니다.
설문의 특성에 따라 제작할 수 있도록, 총 9가지의 폼을 구성하였습니다.

b. 좀 더 많은 참여자를 원할 땐 선물하기 기능으로 관심 UP!

선물하기 기능, 실시간 참여자 확인 기능을 통해 그저 재미없는 설문을 즐겁게 참여할 수 있도록 하였습니다.

c. 설문 타입 맞춤 한눈에 볼 수 있는 통계 자료

설문 제작자에게 각 폼에 따라 다양한 통계 타입을 제공합니다.
선택 기간에 응답된 설문들의 통계 조회가 가능하며, 엑셀로 데이터를 받아 볼 수 있습니다.

3) 구현 포인트
a. 사용성 향상

설문조사는 지루하고 재미없다는 인식과 어떻게 보면 특성을 가지고 있음
이에 조금은 편안하고 즐겁게 할 수 있도록 구현하고자 하였고,
따라서 사용성 향상을 최대 목표로 기능 제작

• Redux-toolkit 활용, 설문 조사 제작 시 다양한 컴포넌트에 전역 데이터가 반영되도록 구현

  • context API와 리코일, 리덕스 툴킷을 비교 후, 리덕스 툴킷 선택
    • 기존 리덕스에서 사용성 및 보일러 플레이트 보완
    • 복잡한 데이터 흐름 파악 용이
  • 설문 제작 시 미리보기 기능 (우측)
  • 설문 제작 리스트 기능 (좌측)
    

• Apex-charts 라이브러리 활용, 인터렉티브한 통계 페이지 구현

  • Apex-charts, material-ui, 리액트 부트스트랩, flexchart등 비교
  • 다양한 형식, 눈을 끌 수 있는 애니메이션, 한눈에 볼 수 있는 깔끔한 UI의 Apex-chart 선택

• React-intersection-observer 활용, 무한 스크롤 기능 구현

  • 페이지네이션보다는 클릭없이 스크롤로 데이터를 가져올 수 있는 사용성의 측면에서 선택
  • window 객체에 Scroll 이벤트를 연결하는 것과 intersection-observer 비교
  • window 객체에 Scroll 이벤트를 연결하는 것은 스크롤을 진행하는 순간마다 이벤트가 호출되어 메인 스레드 성능이 좋지 못하고, 최적화 작업이 동반되기 때문에 Intersection-observer 선택

• SSE 활용, 실시간 응답자 수 현황 기능 구현

💌 05. 마치며

사용성을 깊이 있게 고민해 볼 수 있었던 프로젝트였습니다.
단순히 기능 제작을 목적으로 구현하는 것이 아닌, 이 부분에서 불편함이 있지 않을까? 이 부분을 이렇게 하면 좀더 편리하지 않을 까? 라는 생각을 바탕으로 구현 했다는 점이 무척 유익했고, 좋은 경험이었다고 생각합니다.