EZDG
공공데이터를 쉽게 조회할 수 있는 오픈소스 라이브러리
2024.10.14 ~ 2024.11.19 (6주)
사용 기술
담당 역할
라이브러리 사용법과 데이터 종류가 나와있는 가이드라인 페이지 구현
프로젝트 개요
목표
- •개발이 익숙하지 않은 사람, 개발이 능숙하지만 공공데이터 조회를 위해 반복코드 작성이 번거로운 사람들이 더 간편하게 공공데이터를 조회할 수 있도록 도와주는 라이브러리입니다.
배경
- •공공데이터를 활용한 서비스는 계속해서 증가 중
- •개발이 익숙하지 않은 사람은 공공 데이터 활용을 위한 코드 작성이 어려움
- •개발자는 파일 데이터와 OpenAPI를 사용하기 위해 호출 코드를 반복 작성해야 함
- •간편하게 공공 데이터 포탈이 제공하는 데이터를 가져올 수 있게 돕는 라이브러리를 기획
주요 기능
코드 자동 생성 (FREEMARKER)
- •DTO 클래스 자동 생성
- •API 연동 코드 템플릿 제공
- •커스텀 코드 생성 템플릿 지원
- •다양한 프레임워크 지원
자동 배포 시스템
- •GitLab Package Registry 연동
- •CI/CD 파이프라인 자동화
- •버전 관리 및 릴리즈 자동화
- •배포 로그 및 모니터링
동적 웹 크롤링 (Selenium)
- •실시간 데이터 수집
- •자동 데이터 업데이트
- •페이지네이션 자동 처리
- •에러 복구 메커니즘
사용 기술
기술 스택
선택 이유
NextJS
공공데이터를 제공해야하는 라이브러리 특성상 사용자 입장에서 지연이 없는 SSR 방식 구현을 위해 사용했습니다.
Shadcn.ui
2023년 Star를 가장 많이 받은 CSS 툴인 Shadn.ui의 사용 경험을 위해 사용했습니다.
Algolia
사용 데이터를 간편하게 관리하고, 검색도 쉽게 가능하게 하기 위해 사용했습니다.
구현 사항
- •라이브러리에서 제공하는 데이터의 필드명세와 메서드 목록, 라이브러리 사용 가이드라인 제공 페이지 구현했습니다.
메인 페이지
검색 기능
설치 가이드
문제 해결 사례
문제
공공데이터 라이브러리에서 제공하는 데이터는 약 200개 이상의 필드로 구성된 대용량 JSON(평균 1.5MB 이상)이었고, 이를 한 번에 렌더링하면서 페이지 초기 로딩 시간이 평균 5초 이상 소요되었습니다. 또한 수백 개의 DOM 요소가 동시에 생성되면서 검색 및 스크롤 탐색 과정에서 브라우저 프리징이 발생해 사용자 경험이 크게 저하되는 문제가 있었습니다.
해결 방안
데이터 구조와 사용자 사용 패턴을 분석한 결과, 초기 화면에서는 핵심 필드(약 10~15개)만 표시하고 상세 정보는 사용자가 클릭했을 때 비동기로 가져오는 지연 로딩(Lazy Loading) 구조를 설계했습니다. React의 useEffect와 IntersectionObserver를 활용해 스크롤 위치에 따라 필요한 컴포넌트만 렌더링하도록 구현했으며, API 호출 시점을 사용자 인터랙션 기준으로 분리해 불필요한 데이터 fetch를 줄였습니다.
결과
초기 로딩 시 전달되는 데이터 크기를 약 1.5MB → 300KB 수준으로 줄여 페이지 로딩 시간을 평균 5초 → 0.9초로 약 80% 이상 단축했습니다. 또한 한 번에 생성되던 DOM 요소 수를 약 70% 이상 줄이면서 브라우저 프리징 현상이 사라졌고, API 호출 횟수도 약 40% 감소해 서버 부하까지 함께 개선할 수 있었습니다.
프로젝트 성과
성과
- •Next.js와 shadcn.ui, algolia 검색 엔진의 사용을 통해 컴포넌트 재사용성 증가
- •일관된 디자인 시스템 구축
- •SSR 구현
- •SEO 향상
- •초기 로딩 시간 감소
결과
- •사용자가 원하는 데이터를 적절하게 제공해줄 수 있었음
프로젝트 회고
아쉬웠던 점
- •원래는 가이드라인 홈페이지를 빠르게 끝내고 npm을 통해 javascript용 라이브러리를 개발하려고 했는데 개발하지 못한게 아쉬웠습니다.
개선 방안
- •대신 Java로 작성하는 백엔드 라이브러리 서버의 완전한 자동화를 이뤄내서 백엔드 서버 구축에 시간 단축을 보여줬습니다.
새롭게 배운 것
- •algolia 검색 엔진 활용 경험을 얻었습니다.
- •Next.js의 구조를 더 깊이 이해했습니다.
깨달은 점
- •사용자에게 적절한 정보와 체감 로딩 시간 감소를 언제나 신경써가며 프론트엔드 개발에 신경을 써야겠다고 생각했습니다.