Diki

데이터 용어사전 서비스를 기획하고 SSG 기반 비용 효율적 아키텍처를 설계·개발했습니다.

Period 2024.10 ~ 2025.12 (1년 2개월) Role PM · UI/UX · Frontend Team DXWiki

Next.js TypeScript Tailwind CSS Firebase Redux Vercel Git Github Actions

프로젝트 개요

데이터 용어 학습을 위한 데이터 사전 서비스를 기획하고 비용 효율적 아키텍처 설계 및 개발을 주도했습니다.

주요 활동:

Firestore 비용 문제 해결을 위한 SSG 아키텍처 전환 기획
빌드 시점 JSON 사전 생성 구조 설계
한글 전용 토크나이저 및 5단계 검색 전략 설계
커스텀 마크다운 파서 설계 (수식/표/코드 최적화)
GitHub Actions 기반 자동 배포 파이프라인 구축

성과:

런타임 DB 요청 완전 제거로 월 운영 비용 0원 달성
한글 검색 정확도 대폭 개선 및 검색 누락 최소화
SSG 구조에서도 실시간에 가까운 UX 제공

프로젝트 보기 GitHub 저장소

프로젝트 이미지

프로젝트 회고

하이라이트

각 페이지 접근 시마다 Firestore 요청이 발생해 개발 중에도 무료 티어 한도를 초과

기존에는 layout 파일에서 직접 데이터를 fetching 해서 redux로 전달하는 방식

firebase 무료 사용량(읽기 50,000회/일) 초과

build 시 script 코드 실행

실행될 script 코드(firebase 데이터 중 `terms` 컬렉션 추출)

src/data/terms.json 파일 생성

Task

DB 요청 비용을 제거하면서도 콘텐츠를 안정적으로 제공할 수 있는 아키텍처 필요

Action

빌드 시점에 모든 데이터(terms, profiles)를 JSON으로 사전 생성하는 SSG(Static Site Generation) 구조로 전환

Result

런타임 DB 요청을 완전히 제거하여 월 운영 비용 0원의 아키텍처 구축

SSG 구조에서는 콘텐츠 수정 후 빌드/배포가 완료될 때까지 변경 사항이 사이트에 반영되지 않음

Github Actions 설정 파일

매일 자정 자동 배포

쿠키를 활용한 사용자 변경 사항 반영

Task

정적 구조를 유지하면서 사용자에게 즉각적인 피드백을 제공하는 방법이 필요

Action

쿠키를 활용해 사용자의 변경 사항을 클라이언트에 즉시 반영해 표출
실제 데이터는 일일(매일 00시) 자동 배포로 동기화하는 하이브리드 방식 설계

Result

SSG의 비용 효율성을 유지하면서도 실시간에 가까운 UX 제공

브라우저 기본 검색이나 단순 필터링으로는 한영 혼용 전문 용어 검색 시, 한글 자모 분리 문제와 오타 처리 미흡으로 검색 정확도가 낮음

Diki 검색 화면

토크나이저 구현

섹션별 가중치(boost) 설정

5단계 검색 전략 구현(퍼지 매칭 등)

검색 예시(오탈자)

검색 예시(한영 혼용 전문 용어)

Task

한글 특성을 고려한 유연한 검색 시스템 구축(오타 허용, 부분 매칭, 중요도 기반 결과 정렬 지원)

Action

한글 전용 토크나이저 개발
가중치 기반 다중 필드 검색 시스템 설계
5단계 검색 전략 구현: 정확한 구문, 접두사, 접미사, 퍼지 매칭, 단어별 검색

Result

검색 정확도 향상: 한글 자모 분리 문제 해결로 한글 검색 정확도 대폭 개선
사용자 경험 개선: 오타 허용으로 검색 성공률 증가
검색 누락 최소화: 5단계 검색 전략 + 풀백 메커니즘 구현
유연한 검색: 부분 매칭, 접두사/접미사 검색으로 다양한 검색 패턴 지원
확장 가능한 구조: 필드 추가/수정이 용이한 설정 기반 아키텍처로 유지보수성 확보

기본 마크다운 렌더러는 HTML 일괄 변환 방식이라, 수식($, $$)이 마크다운 문법과 충돌해 깨지고 표는 모바일에서 잘리는 등 기술 문서 품질을 충족하지 못함

Diki 새 포스트 작성 화면(마크다운 문법 가이드 제공)

수식/텍스트 세그먼트 분리(MathJax 컴포넌트 위임)

텍스트 세그먼트 렌더링(정규식 기반)

mobile 화면 미리보기(수식, 표 깨짐 없음)

Task

수식·표·코드·이미지 등 콘텐츠 유형별로 최적화된 렌더링이 가능한 커스텀 마크다운 시스템 구축

Action

직접 마크다운 파싱 로직 구현
콘텐츠를 수식/텍스트 세그먼트로 먼저 분리하여 수식이 마크다운 파싱에 의해 깨지는 문제 해결
수식 세그먼트는 MathJax 컴포넌트로 위임, 텍스트 세그먼트는 정규식 기반으로 표·인용구·리스트·이미지(캡션/에러 폴백)·링크 등을 개별 렌더링