형태소 분석 API로 CS 퀴즈앱 만들기

프로젝트 개요

배포 주소 | Github
프로젝트명: 형태소 분석기를 활용한 "다짜고짜 CS문제 풀기"
프로젝트 진행 기간 : - 2023.02.28 ~ 2023.03.04 (5일 간)
프로젝트 인원 : 1 명 (개인 프로젝트)
주요 기술 스택: Next.js 13, Redux Toolkit

프로젝트 소개

본 프로젝트는 ETRI의 형태소 분석 OPEN API를 이용하여 자동으로 객관식 퀴즈를 생성하고, 풀이할 수 있는 Web Application 입니다.

• Next.js의 API Route를 이용하여 서버리스로 개발되었습니다.
• next-pwa 라이브러리를 이용하여 PWA로 배포하였습니다.

프로젝트 데모

랜딩 페이지

앱의 실행을 준비하는 페이지입니다.
모바일 웹에서 접속시 PWA 설치 소개 문구가 함께 노출됩니다.

퀴즈 페이지

문제를 푸는 페이지입니다.
다섯 문제를 맞히면 결과창이 뜹니다.
문제의 보기를 Bottom Slide 형식의 UI로 구성하여 문제를 푸는데에 방해되지 않도록 디자인하였습닏.

마이 페이지

지금까지 자신이 푼 문제와 정답, 점수를 확인하며 복습할 수 있습니다.
랜딩 페이지에서 자신이 푼 문제를 초기화할 수 있습니다.

회고 (4L)

좋았던 점 (Liked)

1. 모바일 최적화 : 모바일 환경에 최적화된 UI, UX를 구성해본 경험이 적었는데, 본 프로젝트는 기획단계에서부터 모바일을 중점에 두고 개발해볼 수 있어 좋았습니다.
2. PWA 배포 : 개발된 어플리케이션을 PWA로 배포해보고, Native App 처럼 작동하는 UI, UX를 확인할 수 있어 즐거웠습니다.
3. Next.js API Route 활용 : 서버리스로 기획하고 설계하면서 Next.js의 API Route를 활용해보았습니다. 그 과정이 차질없이 진행되어 만족스러웠습니다.

배운 점 (Learnt)

1. PWA 설정 : PWA를 설정하고 배포하면 서비스 워커와 PWA에 대해 이해하는 계기가 되었습니다.
2. API 설계 : 하나의 API만을 사용하는 어플리케이션이지만, 이 과정에서 Node js에서 표준적인 API 패턴에 대해 이해하고, File System으로 파일을 저장하고 조작하는 방법에 대해 익힐 수 있었습니다.

부족한 점 (Lacked)

1. 부실한 디자인 : 본 프로젝트는 한 주 동안의 토이프로젝트로 진행하였습니다. 이 과정에서 원하는 수준으로 미려하게 디자인 하지 못한 점이 아쉽습니다.
2. PWA 오프라인 캐싱 : 현재 배포된 버전은 랜딩 페이지에서 서버로부터 문제를 받아옵니다. 해당 과정을 Service Worker로 설정하여 오프라인에서 작동하도록 구현하지 못한 점이 아쉽습니다.

바라는 점 (Longed for)

1. 나만의 디자인 시스템 만들기 : 금번 프로젝트에서는 Button의 종류에 대한 스토리북만 제작하였습니다. 추후 기회가 된다면 보다 다양한 요소에 대한 디자인 시스템을 만들고 구현하고 싶습니다.
2. PWA 고도화 : 금번 프로젝트에서는 외부 라이브러리로 Service Worker를 자동 생성하였고, 오프라인 캐싱 기능도 빠져 있습니다. 추후 더 학습하여 세세한 부분까지 서비스 워커를 설정하여 PWA의 성능을 최대한 활용할 수 있기를 바랍니다.
3. Product 완성하기 : 금번 프로젝트에서는 형태소 분석기의 성능을 시험해보고, 이를 이용한 모바일 사용자 경험을 구현하는데에 초점을 맞춘 일종의 프로토타입입니다. 추후 더 구체적인 기획과 개발 계획으로 사용자들이 직접 문제를 생성하고, 공유할 수 있는 Product로 발전시킬 수 있기를 바랍니다.