웹 프로젝트9 [#2 Teachable Machine 적용] 인공지능을 적용해 웹 서비스 구현 과정 이번 해커톤에서 가장 공들인 Teachable Machine을 이용한 웹 서비스 구현 작업에 대해 이야기 해보려한다. 해커톤에서는 웹 개발 그리고 인공지능 외부 API 개발로 나누어 역할분담하여 작업하는 방식으로 진행했다. 그리고 나중에 웹으로 모든 서비스를 합치는 과정에서 팀원 모두가 각각의 서비스를 모두 살펴보고 수정해보는 과정으로 개발 로직을 이해하고 인공지능 그리고 외부 API가 어떻게 웹 서비스로 합쳐질 수 있고, 적용할 수 있는지 이해 할 수 있도록 했다. 어쩌다보니 Teachable Machine의 training 작업과 이 모델을 이용한 세종 챌린지 웹 서비스를 주로 담당해 이번 해커톤에 임했게 되었다. 오픈 소스인 Teachable Machine을 사용해 본 적은 있어도 직접 웹 서비스에.. 2021. 12. 31. [#1 구성] Sejong_Maps 서비스 구성 정해진 시간 안에 개발해야 했던 해커톤 대회!! 그래서 더더욱 본격적인 개발에 앞써 어떤 서비스를 구현할 것인가에 대해 팀원끼리 의논하는 시간을 먼저 가졌다. 이번 해커톤에서우리가 추구했던 목표부터 명확히 설정하고 본격적인 구성에 대해 논의했다. 1. 인공지능을 이용한 서비스 구현 2. 웹으로 시각화 3. 외부 API 이용 아직 인공지능 모델을 직접 구축하고 구현하는 것에는 한계가 있어, 비교적 쉽게 인공지능 모델을 구축할 수 있는 Teachable Machine을 이용해, 사진을 업로드 하면 그곳이 어디인지 나타내주는 서비스와 대학교의 지리를 익힐 수 있게 만든 챌린지 서비스를 구현하기로 했다. 그리고 웹으로 위의 인공지능을 사용한 서비스와 카카오 지도 API를 사용한 길찾기 서비스를 더불어 시각화를 .. 2021. 12. 31. [#0 요약] Sejong_Maps 개발 기록 sejong_maps 세종대학교 21학번 신입생과 20학번 미개봉 중고를 위한 세종대학교 캠퍼스 안내 웹사이트, sejong maps! 기획의도 20, 21학번으로 구성되어 있는 팀이고, 비대면 수업이기 때문에 학교에 익숙하지 않음을 크게 느끼고 있다. 그래서 우리가 알면 좋을 것들, 필요한 정보들을 웹으로 구현해보려고 기획했다. 개발 목표 및 메인 컨텐츠 이 웹서비스의 주 대상은 학교가 낯선 20, 21학번 더 나아가 22학번들을 위한 안내 서비스로서, 메인 컨텐츠는 '여긴 어디?', '지도 보기', '세종 챌린지'이다. Teachable Machine을 활용하여 학교 건물 이미지 모델을 만들어서 카메라로 교내 건물의 사진을 업로드하면 그 건물의 명칭과 용도에 대한 설명을 알려줌으로서 건물의 위치를 모.. 2021. 11. 15. [#3-1. Develop ] 박람회 플랫폼 개발 작업 (index & login) 앞서 개발을 위한 로직, 창 안에서의 컨텐츠 배치 등등의 세부 디자인 까지 기획했다. 이 모든 것은 개발을 좀 더 효율적으로 빠르고 체계적으로 하기 위한 준비 과정이라고 할 수 있다!! develop 과정은 세 명이 협업하여 약 일주일 정도가 걸렸다. index page를 develop 하면서 가장 신경 썼던 부분은 배경에 깔리는 짧은 길이의 video였다. 꽉찬 화면으로, 무한 루프를 돌며 끊임없이 재생되도록 video 태그를 사용하여 코딩했다. video source 또한 적절한 길이의 무료 오픈소스 video를 다운 받아 사용했다. 정보를 받기 전의 login page는 저렇게 생겼다. 정보를 받기 위해 밑줄을 클릭하면, 아래와 같이 밑줄이 파란색으로 그려지는 것을 볼 수 있다. 또 정보를 입력한 .. 2021. 11. 14. [#2 Contents] 박람회 플랫폼 세부 디자인 웹의 흐름 로직을 잘 세워 보았으니, 이제는 창 별 세부 디자인을 세울 것이다. 세부 디자인을 세우면서 꼭 포함될 필수적인 부분이 있다!! 1. 어떤 요소가 들어가야 하는지 2. 어디에 요소가 위치할지 3. 어떤 기능이 적용될지 등등... !! 이렇게 크게 큰 툴을 세우고, CSS로 구현할 대략적인 디자인을 기획했다. - 필수 요소 1) Welcome message + Fair Title 2) Enter Button 3) background img - 필수 기능 1) Moving Background -> 현장감 있게 2) Enter Button -> 클릭시 login.html 로 이동 - 세부 디자인 - 필수 요소 1) Welcome + Fair Title 2) Information form (이름, 신.. 2021. 11. 14. [#1. Logic] 박람회 플랫폼 개발 로직 본격 개발에 앞써, 창은 어떤 순서로 사용자에게 보여져야 하는지를 구체적으로 설계하는 과정인 개발 로직부터 세웠다. 로직을 설계함으로써 박람회 플랫폼의 흐름을 정확히 파악할 수 있고, 더 나아가 개발할 때의 역할 분담도 수월하기 때문에 필수적인 과정이다. 팀원들과의 논의 과정은 화이트보드 형식의 협업 툴인 피그마를 사용했다. # 로직세우는 순서 html 창 구상 -> 링크 연결 설계-> 흐름 점검 및 보수 # html 창 구상 - index.html 박람회 방문자들을 반기는 창 - login.html 이름과 신분의 정보를 얻을 로그인 창 - name-tag.html splash로 방문자의 이름과 신분을 띄우는 창 실제 박람회의 이름표를 모티브로 디자인 - main.html 전시회의 컨텐츠가 전부 담긴 창.. 2021. 11. 10. 이전 1 2 다음
