미리보기

상태 관리 최적화를 통한 사용자 경험 및 성능 개선

Situation

• 온보딩과 첫 태스크 이후 프로덕트와 코드 품질에 대한 여러 문제를 인지했습니다. 불안정한 상태 관리, API 중복 호출과 반복적인 실패로 Lighthouse 점수는 측정 불가 상태였고, 이로 인해 발생하는 5초 이상의 긴 로딩과 리렌더링으로 사용자의 경험이 저해되고 있었습니다.

• 빠르게 PMF를 찾는 것이 중요한 초기 스타트업의 상황상 유지보수만을 위해 많은 시간을 투자할 수 없었습니다.

Task

• 팀원들에게 기술 부채의 위험성과 유지보수의 필요성에 대해 설득해야 했습니다.

• 기존 코드의 문제점을 신속하게 파악하고, 문제 해결에 효과적인 솔루션을 적용해야 했습니다.

Action

• 문제점과 원인, 개선 방안을 한 장의 문서로 요약해 팀원들을 설득했습니다.

• React Query의 캐싱 기능을 활용해 불필요한 네트워크 요청을 최소화했고, Error Boundary와 함께 선언적인 에러 처리를 적용했습니다.

Result

• 서버 상태와 클라이언트 상태를 분리하여 상태 관리의 복잡도를 낮췄고, 가독성과 유지보수성을 향상시켰습니다.

• Lighthouse 성능 점수를 95점으로 개선하였고, 기존 고객들로부터 사용성에 대한 긍정적인 피드백을 받았습니다.

재무 현황 기능 개발

Situation

• 현금주의를 기반으로 회사의 월별 매출 및 지출 현황, 거래금액 상위 고객사 등을 한눈에 확인할 수 있는 대시보드에 대한 요구가 있었습니다.
  *현금주의: 매출(또는 지출)을 거래의 발생 시점이 아닌 실제 현금이 수취(또는 지급)된 시점으로 인식

• 비용적인 문제로 계좌 조회 API의 사용량이 제한적인 상황이었습니다.

Task

• 많은 양의 거래내역 데이터를 효율적으로 집계할 수 있어야 했습니다.

• 페이지 로딩까지 긴 응답 시간이 소요될 것으로 예상되어 응답 속도를 최적화할 필요가 있었습니다.

Action

• 매번 모든 거래내역을 집계하는 대신 월별로 집계된 값을 별도의 테이블에 저장하여 빠른 조회가 가능하도록 구현했습니다. 집계 테이블은 배치 작업으로 일정 주기마다 업데이트되고, 필요에 따라 수동으로 업데이트할 수 있게 설계했습니다.

• 집계 테이블의 조회 성능을 극대화하기 위해 조건식에 사용되는 회사 식별자, 연도, 월 컬럼에 복합 인덱스를 설정했습니다.

• React의 lazy와 Suspense를 사용한 지연 로딩과 코드 분할을 적용하여 초기 로딩 속도를 최적화했습니다. 또한, 콘텐츠 로딩 중 사용자 경험을 개선하기 위해 스켈레톤 UI를 적용했습니다.

Result

• 배치 작업 기반의 계좌 조회 및 집계 데이터 업데이트로 비용을 최소화했습니다.

• 회사의 재무 상황을 빠르게 확인할 수 있는 대시보드를 구현했습니다.

기타

• 고객사별로 매출 관련 문서를 관리하고, PDF로 추출 및 전송할 수 있는 기능을 개발했습니다.

• 백엔드 프레임워크 및 인프라 마이그레이션 작업을 수행했습니다.

프로토타입 기반의 사업 제안 및 협약 체결

Situation

• 운영 중이던 동아리가 학부 학회에서 중앙동아리로 승격함에 따라, 활동 보고서 제출 등 운영 관련 업무가 추가로 늘어난 상황이었습니다.

• 교내 동아리에 대한 정보를 한눈에 확인할 수 있는 방법이 없어, 많은 학생들이 아쉬움을 느끼고 있었습니다.

Task

• 동아리원 모집부터 운영까지 한 곳에서 효율적으로 관리할 수 있는 서비스를 개발하고 싶었습니다.

• 안정적인 서비스 운영을 위해서는 유관 부서의 협조와 비용 지원이 필요했습니다.

Action

• 기획부터 프로토타입까지 5일 만에 완성하여 총동아리연합회에게 업무 협약을 제안했고, 추가적인 요구사항에 대해 논의했습니다.

Result

• 업무 협약을 체결하여 교내 공식 서비스로 채택되었고, 사용자 대상 만족도 설문조사에서 5점 만점에 4.15점의 높은 평가를 받았습니다.

• 교내 SW 경진대회에서 우수상을 수상했고, 현재까지 누적 사용자 수 1만 5천 명을 달성했습니다.

기타 기능 개발

• 학생용 페이지와 관리자용 페이지를 명확히 구분하기 위해 Next.js의 미들웨어를 활용하여 서브 도메인을 구성했습니다.

• Tailwind CSS를 사용해 디자인 리소스가 부족한 상황에서 효율적으로 UI를 구현했습니다.

• 전체 동아리의 개수가 40여 개로 데이터의 양이 적은 편이고 차후에도 개수에 큰 변화가 없을 것이라고 판단하여, 프론트엔드 레벨에서의 검색을 구현했습니다. 디바운싱과 filter 메서드를 활용해 검색 결과가 동적으로 반응하게 구현했습니다.

• 회장 및 운영진

  • 동아리 내 주요 의사결정 및 운영 계획 수립

  • 홈페이지, SNS 콘텐츠 디자인 및 개발

• 웹, 서버 파트 멘토링

  • 커리큘럼 수립 및 학습 세션 진행

• React 공식문서 Quick Start 페이지 한글 번역

• PR: Translate: Quick Start #617

• IT 커뮤니티(연합동아리)
• React 파트