사투리가 서툴러유
지역어 학습 서비스 프로젝트
2024.07.08 ~ 2024.08.16 (7주)
사용 기술
담당 역할
회원 데이터 API 통신 아키텍처 설계 및 관리자 페이지 UI/UX 설계
프로젝트 개요
목표
- •사투리를 배우고 싶은 사람은 사투리를, 표준어를 배우고 싶은 사람은 표준어를 학습할 수 있는 지역어 학습 서비스입니다.
배경
- •드라마나 유튜브 등을 통해 사투리가 하나의 컨텐츠로 자리 잡으며, 사투리에 대한 관심이 높아지며 사투리 사용을 더 자연스럽게 하고 싶은 사람들을 위해 제공해주는 서비스입니다.
주요 기능
학습
- •주어진 제시 음성과 사용자가 녹음한 음성을 비교 분석하여 파형 유사도, 발음 정확도 제공
게임
- •웹소켓을 이용한 다른 사용자와 사투리 관련 스피드 퀴즈 제공
사용 기술
기술 스택
선택 이유
Next.js
SSR(Server Side Rendering) 기술을 통해 사용자들에게 보다 빠른 서비스를 제공하려고 했습니다.
TypeScript
개발 측면에서 유지 보수성과 협업에 좋은 TypeScript 활용를 활용했습니다.
Tailwind
별도로 CSS 파일 작성이 아닌 Tailwind를 통해 CSS를 보다 쉽고 빠르게 적용하기 위해 사용했습니다.
구현 사항
- •학습 및 게임을 통해 경험치를 획득, 획득한 경험치에 따라 사용자의 티어(브론즈 ~ 다이아)를 나타나게 했습니다.
- •사용자의 프로필 페이지를 통해 사용자 정보, 티어, 최근 진행한 학습 문제, 주간 스트릭, 연간 스트릭을 제공하여 사용자에게 학습 및 게임에 대한 참여도 증가를 위한 UI를 제공했습니다.
온보딩 페이지
프로필 페이지
관리자 페이지
문제 해결 사례
문제
사용자 티어, 스트릭, 학습 기록 등의 데이터를 여러 페이지에서 동시에 사용해야 했지만, 각 컴포넌트마다 개별적으로 API 호출 로직을 작성하면서 동일한 요청이 반복되는 문제가 발생했습니다. 실제로 한 페이지 진입 시 최대 6~8개의 중복 API 호출이 발생했고, 데이터 로딩 지연으로 초기 렌더링 시간이 평균 2초 이상 소요되는 등 성능 저하와 코드 유지보수 어려움이 발생했습니다.
해결 방안
React의 컴포넌트 기반 구조를 활용해 사용자 데이터 요청 로직을 Custom Hook으로 분리했습니다. 공통 Hook에서 API 호출, 로딩 상태, 에러 처리를 통합 관리하도록 설계하여 Header, 학습 페이지, 게임 페이지, 프로필 페이지 등 여러 컴포넌트에서 동일한 데이터를 재사용할 수 있도록 개선했습니다. 이를 통해 데이터 요청 흐름을 단일화하고, 불필요한 중복 호출을 방지하도록 구조를 리팩토링했습니다.
결과
중복 API 호출을 페이지당 평균 6~8회에서 2~3회 수준으로 약 60% 이상 줄였으며, 초기 렌더링 시간도 약 2초 → 0.8초 수준으로 단축되었습니다. 또한 사용자 프로필 페이지에 주간 스트릭 달성 여부를 시각적으로 표시하는 캘린더형 UI를 추가해 학습 패턴을 직관적으로 확인할 수 있도록 했고, 관련 로직을 공통 Hook으로 관리하면서 코드량도 약 30% 이상 감소해 유지보수성이 개선되었습니다.
프로젝트 성과
성과
- •Custom Hook 도입 후, API 호출 중복이 약 40% 감소했고, 주요 페이지 렌더링 속도도 향상됐습니다. 코드 측면에서도 유지보수성과 가독성이 좋아져 이후 기능 추가 시 훨씬 수월하게 대응할 수 있었습니다.
결과
- •사용자들에게 깔끔한 UI와 사용자의 데이터 변화를 동적으로 지속해서 제공해주었습니다.
프로젝트 회고
아쉬웠던 점
- •웹소켓을 활용한 실시간 채팅과 관련된 개발에 참여하지 못해서 다양한 경험을 못해보지 못한 것이 아쉬웠습니다.
개선 방안
- •제가 맡은 일을 빠르게 처리하여 추가적으로 배워보고 싶은 일에 대해 좀 더 열심히 참여하고 성장해야겠다는 생각이 들었습니다.
새롭게 배운 것
- •많은 API를 통신할 때는 비동기적으로 처리하여 성능을 높이고, 토큰을 이용해 사용자들의 정보를 통신할 수 있게 됐습니다.
깨달은 점
- •복잡한 코드는 components나 custom hook으로 따로 정리하여 클린코드를 지향해야하는 것을 깨달았습니다.