CASE STUDY

친절한 유치원 알리미

유치원 검색 플랫폼

웹사이트 클라이언트 친절한 유치원 알리미 HTML CSS JavaScript PHP MySQL Chart.js 조회 284

Overview

프로젝트 개요

전국 유치원 정보를 검색하고 비교할 수 있는 학부모 대상 정보 포털 웹사이트.

Background

흩어진 보육기관 정보, 판단하기 어려운 학부모

아이를 처음 유치원이나 어린이집에 보내는 학부모에게 기관 정보를 찾는 일은 결코 쉽지 않습니다. 설립 유형, 운영 시간, 원아 수, 모집 정원 같은 핵심 정보가 여러 기관에 흩어져 있고, 정작 필요한 지표를 한눈에 비교하기가 어렵습니다.

'친절한 유치원 알리미'는 이러한 정보 격차를 해소하기 위해 출발한 프로젝트로, 전국 유치원과 어린이집 정보를 지역별로 검색하고 데이터 기반으로 비교할 수 있는 정보 포털을 목표로 했습니다. O2O Mate는 정보 구조 설계와 데이터 항목 정의 같은 기획 단계부터 사용자용 검색·시각화 화면과 운영자용 관리자 대시보드 개발까지 전 과정을 풀스택으로 담당했습니다.

Approach

나열이 아니라 '판단'을 돕는 데이터

검색·시각화·운영을 잇는 세 축

지역 기반 검색

유치원/어린이집 구분, 시·도, 구·군, 기관명 4단계 필터로 700건 이상의 결과를 지역·유형별로 빠르게 좁힙니다. 각 결과 카드에 지도 썸네일과 설립 유형·설립일·운영 시간을 요약해 곧바로 후보를 추립니다.

데이터 시각화 상세

숫자로만 존재하던 공공 데이터를 추세로 읽히게 만듭니다. 원아 수 트렌드와 반별 모집정원 트렌드를 Chart.js 라인 차트로 표현해, 학부모가 별도 설명 없이도 규모 변화를 읽도록 했습니다.

운영 관리자 백오피스

인터뷰 신청 접수와 유치원·어린이집 정보를 체계적으로 관리하는 별도 관리자 인터페이스. 기관 관계자를 위한 '원장님' 인증 동선까지 권한 체계를 마련했습니다.

User Side

사용자 화면 — 검색부터 데이터 비교까지

메인 화면은 밝은 교실 이미지를 배경으로 한 히어로 검색창('유치원을 찾아보세요')과 함께, 그 아래에 '전국 유치원 수 트렌드' 차트를 배치해 최근 3년간의 변화를 첫 화면에서부터 데이터로 보여줍니다. 검색 결과 페이지는 4단계 필터와 '734건 중 1–20건' 형태의 페이징으로 방대한 목록을 다룹니다.

'자세히 보기'로 진입하는 상세 화면이 이 서비스의 핵심입니다. 기관 개요 아래에 원아 수 트렌드 라인 차트(예: 2022년 160명 → 2023년 155명 → 2024년 148명)로 규모 변화를 보여주고, 모집정원 트렌드는 만 3세반·4세반·5세반·혼합반·특수반 등 반별로 구분해 다중 라인으로 표현합니다. 일반 회원 로그인과 별도로 '원장님이신가요?' 진입 동선을 두어 기관 관계자가 자기 기관 정보를 관리할 수 있게 했습니다.

친절한 유치원 알리미 메인 화면

밝은 교실 이미지를 배경으로 한 히어로 검색창과, 그 아래 '전국 유치원 수 트렌드' 차트를 배치한 메인 화면

유치원 검색 결과 리스트 화면

유치원/어린이집·시도·구군·기관명 4단계 필터와 '734건 중 1–20건' 페이징 — 각 카드에 지도 썸네일·설립 유형·설립일·운영 시간을 요약

유치원 상세 데이터 시각화 화면

서비스의 핵심 — 원아 수 트렌드 라인 차트와 반별로 나눈 모집정원 트렌드로 규모 변화를 추세로 보여주는 상세 페이지 (Chart.js)

회원 로그인 화면

일반 회원 로그인·회원가입 화면 — 상단에는 기관 관계자를 위한 '원장님이신가요?' 진입 동선을 별도로 마련

Admin

운영 관리자 대시보드

최고관리자용 백오피스는 좌측 아이콘 내비게이션 기반의 별도 인터페이스로 구성했습니다. 메인 대시보드에서는 '인터뷰 신청'을 접수 일시와 '대기중' 상태 배지로 최신순 관리하고, '유치원 관리' 화면에서는 시·도/구·군 필터와 함께 유치원명·주소·원장명·연결 여부·등록일을 표로 관리하며 신규 기관을 직접 등록할 수 있습니다. '어린이집 정보 편집'은 기본정보/인원정보 탭으로 나뉘어 원장명·운영 시간·보육실수·보육실면적·CCTV 설치수·통학차량 운영 여부까지 세밀하게 관리합니다.

운영 백오피스

Design System

관찰된 컬러 팔레트

퍼플 계열 프라이머리와 밝은 배경, 트렌드 차트의 틸 그린이 서비스의 톤을 규정합니다. 아래 스와치는 실제 구축된 화면에서 관찰한 대표 색상입니다.

브랜드 컬러 (화면 관찰 기준)

Primary Purple · 액션/버튼
Deep Purple · 관리자 사이드
Chart Teal · 트렌드 라인
Status Green · 대기중 배지
Ink · 텍스트
Cloud · 배경

Result

정보 접근성과 데이터 신뢰성을 함께

공공 데이터를 사용자가 판단에 활용할 수 있는 '트렌드'로 재가공하는 데이터 시각화 대시보드 개발이 이번 작업의 중심이었습니다. 방대한 공공 보육 데이터를 안정적으로 저장·질의하기 위해 PHP + MySQL 조합을 채택했고, 700건 이상의 검색 결과를 지역·유형별 필터와 페이징으로 빠르게 응답하도록 설계했습니다. 추세 그래프에는 Chart.js를, 검색·필터와 관리자 대시보드는 별도 라이브러리 의존 없이 표준 웹 기술로 구현해 유지보수성과 로딩 성능을 확보했습니다.

그 결과 학부모는 흩어진 정보를 찾아 헤매는 대신 한 화면에서 지역별 기관을 검색하고 원아 수·모집 정원 추이를 비교할 수 있게 되었고, 운영 주체는 인터뷰 신청과 기관 정보를 체계적으로 관리할 수 있는 백오피스를 갖추게 되었습니다.

공유하기 페이스북 트위터

아이디어를 현실로 만들 준비가 되셨나요?

프로젝트를 성공 스토리로 만들어 드리겠습니다.

문의하기