본문 바로가기

분류 전체보기100

<2021 해커톤~> #4. Sejong maps: 세부 컨텐츠 (2) 1. 서론 마지막 세부 컨텐츠는 방명록이다. nodejs와 db를 활용하면 만들 수 있겠지만, 아직 그 부분까진 공부할 시간이 없었기에 오픈 소스를 활용하게 되었다. 2. '롤링페이퍼' 그래서 '롤링페이퍼'라는 오픈 소스를 활용해 개발하게 되었다. https://rollingpaper.site 롤링페이퍼, 우리가 만들어가는 이야기 커다란 종이를 혼자 굴릴 수 있나요? 친구들과 함께 굴려서 우리만의 롤링페이퍼를 만드세요! rollingpaper.site 위 코드를 보면 매우 간편하게 만들 수 있음을 확인할 수 있다. 그래서 이 코드의 결과물을 보면 아래 사진과 같다. 3. 마무리 오픈소스의 편리함은 매우 대단하다. 하지만 이를 쓰면서 직접 만들지 못하는 아쉬움이 있었다. 조금 더 공부해서 방명록 기능을 만.. 2021. 11. 9.
<2021 해커톤~> #3. Sejong maps: 세부 컨텐츠 (1) 1. 서론 세부 컨텐츠는 네비게이션 바를 만들어 거기에 추가하기로 했다. 학교 관련한 정보들을 제공해주는 컨텐츠를 만들기로 하였고, '세종 오는 길', '세종 꿀팁'으로 나누어서 제작했다. 2. 네비게이션 바 모든 페이지에 네비게이션을 고정시켰고, 각 구성별로 세부 컨텐츠를 넣었다. css 구성은 대부분 index-nav이지만 나는 findmap페이지(지도보기)에 nav를 고칠 일이 있어서 저렇게 썼지만, 사실 둘이 차이점이 거의 없다. 다른 팀원이 쓰냐 내가 쓰냐의 차이점과, 길이를 줄일 대 min-width의 영향 차이 정도이다. 이를 통해 min-width를 다시 배워볼 수 있는 시간이었다. 3. 세종 오는 길 앞서 #2에서 말한 지도 API를 써서 지도를 보여주었고, 지하철, 버스를 설명해주는 칸.. 2021. 11. 7.
<2021 해커톤~> #2. Sejong maps: 메인 컨텐츠 (2) 1. 서론 이번에 쓰는 메인 컨텐츠는 카카오의 맵 API를 활용해 '지도 보기' 라는 컨텐츠를 만들었다. '지도 보기'는 위에서 볼 수 있는 지도와 건물에 마커를 표시하여 위치를 나타낼 수 있는 기능과 도로를 표시했고, 로드뷰를 통해 학교를 둘러볼 수 있는 기능을 추가했습니다. 2. Kakao 지도 Web API https://apis.map.kakao.com/ 위 링크를 통해 순서대로 따라하면 web api를 얻을 수 있습니다. https://apis.map.kakao.com/web/sample/ 위 링크에서 많은 예제들이 있고, 이를 활용해서 다양한 기능을 만들 수 있습니다. 코드들은 예제 부분을 많이 참고하여 썼기에 따로 올리지 않겠습니다. 3. '지도 보기' 저런 구성으로 되어있고, 지도에 있는 .. 2021. 11. 7.
<2021 해커톤~> #1. Sejong maps: 메인 컨텐츠 (1) 1. 서론 여기서 쓸 내용들은 앞서 #0 에서 썼지만, 다시 말하자면 '티쳐블 머신과 이를 활용한 컨텐츠'이다. 아직 인공지능의 ㅇ자도 모르는 우리가 쓸 수 있는 인공지능이라곤 티쳐블 머신 뿐이다. 그래서 티쳐블 머신의 이미지 학습을 활용해서 건물 사진이 어디 건물인지 알려주는 컨텐츠를 만들기로 했다. 내 나름대로 쓴 코드들이 전문가나 좀 했던 사람들이 봤을 땐 "아 이게 아닌데..." 싶은 코드들도 있을 것이다. 넓은 마음으로 이해해 주길 바라고, 저런 걸 만들었구나~의 과정을 봐줬으면 좋겠다. 2. 티처블 머신 사용 과정 과정들을 일일이 설명하면서 블로그를 쓰게되면 나는 작가를 하는 것이 맞다. 그래서 간단하게만 글로 쓰겠다. 1) 데이터 모으기 학교 건물들마다 100장씩 정도 찍었다. 학생들이 많이.. 2021. 11. 6.
728x90

티스토리툴바