📌 Kids In Company - 사내 어린이집 공정한 추첨 서비스

WEB URL: 키즈인컴퍼니 사이트

데모 영상

FE Project

BE Project

작성자: 김현겸

📌실행 방법(로컬)

FE & BE 로컬환경 실행 방법

📌배포 환경

KIC-쿠버네티스 환경

목차

• 프로젝트 소개
• 핵심 기능
• 실행 방법
• ERD
• 시스템 아키텍처
• 최적화한 사항
• 화면 구성
• 개발 기간
• 팀 & 서비스 소개
• 팀원 소개
• 기술 스택

🍀프로젝트 소개

1️⃣ 서비스 기획 이유

사내 어린이집은 직원들에게 중요한 복지 시설입니다. 하지만 수요가 많아 모든 직원의 자녀가 어린이집을 이용할 수 없는 경우가 발생합니다.

이는 직원들 사이에서 불만을 일으키고, 공정성과 투명성에 대한 문제를 제기하게 만듭니다.

✅ 그래서 저희 Clovider팀은 공정한 가중치 적용하고 이를 바탕으로 당첨 확률 제공하여 공정하고 투명한 서비스를 만들고자 합니다.

2️⃣ 서비스 차별점

1. 공정성 확보: 근속년수, 사내 부부, 다자녀 가정 등 여러 타당한 가중치를 통해 추첨을 진행합니다.

2. 투명성 확보: 신청한 어린이집 모집의 당첨 확률을 공개하여 추첨 과정과 결과를 투명하게 해 신뢰성을 확보합니다.

3. 효율성 향상: 수작업으로 진행되는 추첨 과정은 시간이 많이 소요되고 오류가 발생할 가능성이 높습니다. 이를 자동화하여 효율성을 높입니다.

3️⃣ 서비스 소개

디케이테크인 내부의 공정하고 투명한 사내 어린이집 인원 배정을 위해 어린이집 모집과 추첨을 자동화한 서비스입니다.

🍀핵심 기능

⭐ 사용자

• 1개의 신청서로 여러 개의 사내 어린이집 추첨 통합 신청
• 지원한 추첨 히스토리 조회, 당첨 확률 조회
• 공지사항 조회, 질의응답 작성
• 사내 어린이집 정보 조회

⭐ 관리자

• 관리자 대시보드 조회 (서비스 통계 정보)
• 사내 어린이집 모집 생성 및 신청현황 관리
• 사내 어린이집 추첨 진행 & 결과 관리
• Google SMTP를 통한 사용자 인증 및 추첨 결과 전송
• 공지사항, 질의응답 관리
• 사내 어린이집 정보 관리

🍀ERD

🍀시스템 아키텍처

🍀최적화한 사항

🌕 Frontend

1. 지연로딩

• 번들 사이즈가 큰 Editor에 지연로딩을 적용해 브라우저에 전달되는 JS 크기를 최적화 했습니다.
• unpacked size 3.5MB -> 0MB로 감소할 수 있었습니다.

import dynamic from 'next/dynamic'
const BlockNoteEditor = dynamic(() => import('./BlockNoteEditor'), {
  ssr: false,
  loading: () => <LoadingSpinner />,
})

2. 리렌더링 최적화

• useCallback, useMemo를 적극적으로 활용하여 불필요한 리렌더링을 방지했습니다.
• 성능이 좋지 않은 모바일 환경에서도 쾌적한 UX를 제공할 수 있는 환경을 구축했습니다.

export default function useCreateQuery() {
  const searchParams = useSearchParams()

  const createQueryString = useCallback(
    (name: string, value: string) => {
      const params = new URLSearchParams(searchParams.toString())
      params.set(name, value)

      return params.toString()
    },
    [searchParams],
  )
  return createQueryString
}

3. 트리셰이킹

• package.json에서 아래와 같이 적용하여 트리셰이킹을 적용했습니다.
• 불필요하게 다운로드되는 패키지를 삭제해, 브라우저에 전달되는 번들 사이즈를 25% 감소했습니다.

  "sideEffects": false

4. 폰트최적화

• NextJs를 활용한 최적화를 수행하여, JS 다운로드로 인한 UI blocking 현상을 최소화했습니다.
• display: swap 설정을 통해 유저는 폰트가 다운로드되는 동안 빈화면을 보고있지 않아도 됩니다.
• 웹 성능지표 중 FCP, TTI를 개선했습니다.

const Pretendard = localFont({
  src: './fonts/PretendardVariable.woff2',
  display: 'swap',
  weight: '45 920',
})

5. 애니메이션 최적화

• framer-motion은 transform 기반의 애니메이션으로 reflow, repaint를 최소화합니다.
• GPU 가속을 사용하므로, 웹 성능을 저해하지 않고 고사양의 애니메이션을 사용했습니다.

<motion.div
        initial={{ y: 0 }}
        animate={{ y: [0, -20, 0] }}
        transition={{
          duration: 2,
          ease: 'easeInOut',
          repeat: Infinity,
          repeatType: 'loop',
        }}
      >

6. 동시성 렌더링

• useDeferredValue를 사용해 검색어를 입력하는 경우, UI 렌더링보다 검색어 입력이 우선적으로 처리되도록 했습니다.
• ms 명시적으로 사용하지 않는 디바운스를 사용해 불필요한 리렌더링을 최적화했습니다.

  const [searchInput, setSearchInput] = useState<string>('')
  const deferredSearchInput = useDeferredValue(searchInput)

🌑 Backend

1. 컴포넌트 단위 API 개발을 통한 페이지 약 2.3배 최적화

PR #77

2. Scheduler를 통한 서비스 이미지 처리 간 S3 호출 의존성 제거

PR #59

3. Redis 캐싱을 통한 현재 진행 중인 모집 정보, 사용자 정보 조회 속도 개선 및 최적화

#186

4. 비동기 통신을 활용한 관리자 모집 결과 이메일 전송(SMTP) 기능 사용자 경험 개선

PR #49

5. 점진적인 공지사항 조회수 중복 처리 방지 로직 개선 (쿠키 -> redis)

PR #59 PR #141

6. Aws Lambda를 통한 다수 사용자의 가중치 기반 당첨 확률 알고리즘 처리 -> 속도 개선

🌗 Infra

1. Java 애플리케이션 - Gradle JIB 빌드를 통한 빌드 시간 77% 단축

2. Java 애플리케이션 - JRE 이미지 빌드를 통한 보안성 강화 및 이미지 2.5배 경량화

PR #120

3. Github Self-hosted Runner를 통한 Private Workflow 이용 제한 해결

🍀화면 구성

사용자 랜딩 페이지	관리자 대시보드
어린이집 모집 신청 페이지 1	어린이집 모집 신청 페이지 2
모집 신청 내역 페이지	모집 당첨 확률 페이지
관리자 모집 설정 페이지 1	관리자 모집 설정 페이지 2
관리자 신청 관리 페이지	관리자 추첨 관리 페이지
공지사항 페이지	어린이집 정보 페이지

🍀개발 기간

프로젝트 진행기간 : 24.07.01 ~ 08.23

작업 기간	프로세스 단계	작업 내역	산출물
24.07.01 ~ 07.14	서비스 기획	📌 요구사항 도출, 정의, 검토 📌 프로젝트 목표 설정, 서비스 도메인 조사	요구사항 정의서, WBS, 용어 사전
24.07.12 ~ 07.21	설계 단계	📌 UI/UX 설계, 메뉴 구조도, 업무 흐름도 📌 데이터베이스 설계, 테이블 명세서 📌 인터페이스 설계, 시스템 아키텍처 설계 기술 스택 선정	화면 설계서, 메뉴 구조도, 업무 흐름도 ERD, 테이블 명세서, 인터페이스 설계서 시스템 아키텍처, 소프트웨어 구성도
24.07.22 ~ 08.16	구현 단계	📌 공통 컴포넌트 설계 및 코드 개발, UI 설계 및 개발 📌 Request, Response DTO 설계 및 개발 📌 Restful API 개발, Infra 구축	프로젝트 코드, 도커 이미지, 인프라 환경
24.08.11 ~ 08.17	테스트 단계	📌 단위 테스트 📌 브라우저 속도 테스트, Lighthouse 분석 JMeter 성능 테스트	통합 테스트 보고서
24.08.17 ~ 08.23	종료	사용자 및 관리자 화면 데모 영상 테스트 시나리오 작성 📌 프로젝트 회고 진행 📌 종료 보고서 작성 및 발표 준비	회고록, 데모영상 발표자료, 종료 보고서

🍀팀 & 서비스 소개

Team: Clovider	Service: KIC

🍀팀원 소개

BE

No.1	No.2	No.3
김현겸	권민우	정준희
PM, BE	PL, BE	BE
kylo-dev	MINUUUUUUUUUUUU	sungsil0624

No.4	No.5	No.6
정희찬	이주애	김관일
BE, Infra	BE, Infra	BE
anselmo228	leejuae	KIM-KWAN-IL

FE

No.1	No.2	No.3
김성민	공예영	서용준
PL, FE	FE	FE
Collection50	yeyounging	mango0422

🍀기술 스택