[#1 구성] Sejong_Maps 서비스 구성

정해진 시간 안에 개발해야 했던 해커톤 대회!!

그래서 더더욱 본격적인 개발에 앞써 어떤 서비스를 구현할 것인가에 대해 팀원끼리 의논하는 시간을 먼저 가졌다.

이번 해커톤에서우리가 추구했던 목표부터 명확히 설정하고 본격적인 구성에 대해 논의했다. 

1. 인공지능을 이용한 서비스 구현

2. 웹으로 시각화

3. 외부 API 이용

 

아직 인공지능 모델을 직접 구축하고 구현하는 것에는 한계가 있어, 비교적 쉽게 인공지능 모델을 구축할 수 있는

Teachable Machine을 이용해,

사진을 업로드 하면 그곳이 어디인지 나타내주는 서비스와

대학교의 지리를 익힐 수 있게 만든 챌린지 서비스를 구현하기로 했다.

그리고 웹으로 위의 인공지능을 사용한 서비스와 카카오 지도 API를 사용한 길찾기 서비스를 더불어 시각화를 하자는 목표를 세웠다. 해커톤 당시에는 실제로 아래와 같이 figma 협업 툴을 이용해 계획을 세웠다.

(확실히 시간이 촉박했던 터라 figma가 보기좋게 딱 깔끔하게 마무리 하진 못했지만,

나름 들어가야 할 내용은 다 넣으려고 노력했다 ㅎ)

 

아래는 figma 링크~!

https://www.figma.com/file/5DvO69N6MxCTseljEDjzIV/sejong_maps?node-id=0%3A1

서비스 구상 계획 (by. figma)

디자인도 ppt를 사용해 대략적으로 구상하고, 학교의 상징 색을 추출해 참고하기로 하고 추후 CSS를 적용했다.

초기 디자인 구상

사용한 색상 코드 (crimson red와 warm gray색을 메인으로 적용)

그리하여!

결과적으로 아래와 같은 홈화면의 웹 서비스가 탄생했다. 

 

최종적으로 구현한 서비스는 아래와 같다. 

- 홈화면 + nav bar

- 여긴 어디?

- 세종 꿀팁

- 세종 챌린지

- 찾아오는 길

- 길찾기 

- 방명록 

- 개발자들

 

확실히 개발하면 할수록 욕심이 많아지고 개선점도 많아져서 웹 서비스쪽에서 기능이 좀 늘어났다.

구상할 때는 막막한 감이 있었지만, 하다보니까 어느샌가 웃으면서 또 팀원들이랑 티키타카하며 행복한 개발ing을 했다.

다음글은 본격적으로 이번 웹 서비스에서 내가 가장 공들인 Teachable Machine을 이용한 인공지능 적용에 대한 전반적인 흐름과 세부적인 내용을 정리해 볼 것이다! 

 

p.s. 은근 crimson red 색 맘에 든다 ㅎㅎ