‘킨더서울’ 웹사이트 프로젝트 배포 완료 (서울시 유치원 정보 사이트 프로젝트 ep.8)

약 두 달 전에 시작한 개인 프로젝트인 ‘킨더서울’ 웹사이트를 드디어 오늘 배포하였다. 아직 몇가지 아쉬운 부분이 있지만 그런 부분들은 일단 배포 후 조금씩 다듬어나가보려고한다.

 

https://kinderseoul.netlify.app/

 

첫 배포된 킨더서울

 

 

깃허브에 올라간 파일을 넷틀리파이(netlify)로 연결해서 간단하게 배포를 진행했다. 넷틀리파이는 깃허브 데이터를 그대로 연동 배포 가능해서 굉장히 사용이 편리하다.

깃허브 화면

 

무료로 도메인을 받고 배포까지 할 수 있는 netlify

 

 

 

마지막 작업은 디자인을 css로 옮기는 작업이 대부분이었고 자잘하게 막힌 부분들도 있었지만 큰 어려움 없이 완수할 수 있었다. 사이트는 데스트탑, 태블릿, 모바일 모두 커버할 수 있는 반응형 웹사이트로 구축했다.

 

/* ----------------미디엄 레이아웃 : 태블릿---------------- */

@media (max-width: 1024px) {

h1 {

padding: var(--mid-padding);

padding-top: 74px;

}

main {

padding: var(--mid-padding);

}

.contents-section {

padding-top: 50px;

}

/* 구별 버튼 */

.states-btn-container {

grid-template-columns: repeat(4, 110px);

}

/* 리스트 */

.list-card {

width: 482px;

}

반응형 코드 일부

 

 

디바이스별 반응형을 고려한 디자인

 

 

좋은 Seo를 위해 robots.txt파일을 만들고 사이트맵 파일도 생성, 구글 콘솔에 등록하는 작업과 네이버 서치어드바이저에 등록하는 작업도 진행했다. 부디 서치가 잘 되길 기원하며…

구글 서치 콘솔

 

 

네이버 서치어드바이저 - 웹마스터도구

 

 

전체 페이지 디자인

 

 

이번 프로젝트 역시 개발적으로 배운점들이 너무나 많았던 프로젝트였다. 그중에서도 큰 덩어리들만 꼽아보자면 아래와 같다.

• 웹컴포넌트 개념 공부와 실전 적용
• 페이지 이동시 전페이지 변수 저장해서 이동시키기 (로컬스토리지)
• Filter, includes 등을 이용해서 원하는 데이터만 가져오기
• 페이지네이션 넣어보기
• Chart.js로 그래프 만들기
• CSS에서 컬러나 텍스트 변수화해서 사용

 

또 좋은 아이디어가 생각나면 사이드프로젝트 하나 띄워야겠다.