[사이드 프로젝트] 킨더서울 - 서울시 유치원 정보 사이트 기획-디자인-개발 풀스택 제작

킨더서울 - 서울시 유치원 정보 웹사이트

 

Motive

서울시의 유치원 정보를 쉽고 편하게 열람할 수 있는 웹사이트 만들기 프로젝트.

 

원래 개발 스터디 목적으로 시작한 프로젝트였지만 기획을 해가면서 실제 유입되는 사용자들에게 유의미하고 사용성 좋은 사이트로 만들고 싶은 욕심이 생겼다. 그런데 서치를 해보니 이미 교육부에서 운영하는 ‘유치원 알리미’라는 사이트가 있었고 데이터베이스도 훨씬 방대했다.

유치원 알리미 (교육부)

 

 

유치원알리미는 전국 단위로 유치원 검색이 가능하고 어린이집과 유치원 모두 다뤘다. 그래서 데이터면에서 넘사벽이긴 했지만 그만큼 데이터를 조회하는데 다소 느리다는 단점도 발견했다. 그리고 이런저런 다른 정보들도 많이 다루다보니 ‘사용자가 어떤 특정 유치원 정보를 열람하겠다’라고 했을 때 약간은 사용성이 복잡한 면이 있었다.

위치기반으로 유치원 찾기가 있는데 현재 내 위치를 잘 반영하지 못한 점이 아쉬웠음

 

 

Project goal

따라서 이번 프로젝트 사이트를 통해 좀 더 빠르고 직관적으로 서울시 유치원을 열람할 수 있게해서 사용자들에게 좀 더 나은 경험을 제공하는 것을 목표로 잡았다.

 

개인 차원에서는 기획부터 디자인, 개발까지 전체 프로세스를 밟아봄으로써 풀스택 역량 강화를 목표로 했다.

와이어프레임 화면 / 개발 중인 브라우저 화면 캡처

 

개발관련해서는 블로그의 '나의 개발 일지' 카테고리에서 자세히 다뤘다.

 

 

전체 사이트 구조는 홈 화면, 유치원 목록 페이지, 유치원 디테일 페이지 이렇게 3가지로 구성했다.

홈 화면

 

홈 화면에서 유저는 두가지 액션을 할 수 있는데 서울시 25개 구 버튼을 통해 열람하고 싶은 유치원이 속한 구를 선택해서 목록 페이지로 이동할 수 있고, 다른 방법으로는 직접 검색창 검색을 통해서 목록 페이지로 이동할 수 있게 만들었다.

유치원 명으로 바로 검색 할 수 있는 검색 인풋 디자인

 

 

25개 구 버튼의 경우 화면에 텍스트 버튼으로 나열해봤을 때 너무 정적이고 지루해보였다. 뭔가 해결책이 없을까 고민해봤을 때 유치원 사이트인 만큼 귀여운 캐릭터같은걸 25개 구마다 매칭시켜주면 사이트의 톤앤매너도 밝아지고 구버튼마다 개성이 생기면서 유저에게 누르는 재미도 줄 수 있겠다고 판단되었다. 그래서 25개의 캐릭터를 디자인해서 각 구버튼마다 이미지로 넣어보았다.

 

 

유치원 목록 페이지는 구버튼 혹은 직접 검색으로 서치한 유치원들의 목록을 보여주는 페이지로써 간단한 필수 유치원 정보인 유치원 이름, 주소, 전화번호를 담은 카드 디자인 컴포넌트로 채워져있다.

유치원 목록 페이지

 

 

카드는 10개가 넘으면 다음페이지에서 볼 수 있게 페이지네이션 디자인도 넣었다.

페이지네이션 디자인

 

 

 

최종 페이지인 디테일 페이지는 목록 카드를 눌렀을 때 진입하는 페이지로써 해당 유치원의 상세 정보가 표시되는 페이지이다. api로 가져올 수 있는 상세한 정보들을 이 페이지에서 보여준다. 이번엔 유치원 일반정보와 학급수, 유아수 정보를 가져왔고 특히 학급수와 유아수는 좀 더 직관적으로 알 수 있게 그래프로 표현했다. 이후에 프로젝트를 좀 더 보강하는 기회가 생긴다면 추가적인 데이터도 가져올 예정이다. (생각보다 매우 디테일한 유치원 정보 api가 많음)

유치원 디테일 페이지

 

 

디바이스별로도 안정적으로 보일 수 있게 반응형 디자인도 진행하였다.

디바이스별 반응형 디자인

 

 

프로젝트성 사이트이긴 하지만 나름의 브랜딩은 필요하다고 생각되어서 사이트 이름도 지어보았다. 서울시 유치원 정보를 보여주는 사이트이니까 ‘킨더서울(Kinder Seoul)’이라는 이름으로 지었다.

킨더서울 타이틀 이미지

 

 

지금 이 디자인을 진행하기 전에 이미 개발 작업은 진행이 되었는데 테스트를 해봤을 때 페이지 이동이나 조회 속도는 엄청나게 빨랐다. 아직 css작업을 안해서 그럴 수 도 있지만 적어도 데이터는 굉장히 라이트하다는 것!

function directSearchList(searchedKeyword) {

fetch("./json/kinderGeneral.json")

.then((response) => response.json())

.then((data) => {

currentList = data.DATA.filter((item) => item.kindername.includes(searchedKeyword));

if (currentList.length > 0) {

renderPage(currentList, currentPage);

setupPagination(currentList);

} else {

renderNoResults();

}

});

}

검색창으로 서치하는 함수 코드 일부 발췌

 

 

현재 이 글을 쓰는 시점은 개발과 디자인을 마무리한 단계이며 마지막 작업으로 퍼블리싱을 남겨놓은 상태이다. 

마지막 퍼블리싱까지 잘 마무리하여 개인적으로도, 그리고 실 사용자들에게도 유의미한 프로젝트가 될 수 있도록 하겠다.