본문 바로가기

분류 전체보기125

[#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.
[# 0 Prologue ] 박람회 플랫폼 개발 계획 2021년도 여름방학 기간동안 전반적인 HTML, CSS, JS 그리고 github에 대해 공부할 수 있었다. 공부한 내용을 직접 적용하고 더불어 팀 협업 프로젝트에 도전해보고자 박람회 플랫폼을 제작하기로 했다. # 제작 배경 - 코엑스를 방구석에서 즐길 수 있다면 어떨까? - 코로나 상황 속에서도 비대면으로 전시회를 즐기면 어떨까? - 방학동안 열심히 제작한 우리들의 프로젝트를 웹에 동적 효과를 넣어 재미있게 기록 하려면? - 다른 사람들도 우리가 만든 서비스를 이용해 무궁무진한 전시회를 열어보면 좋겠다! # 제작 목적 - 1학년 여름 방학기간 동안 배운 HTML, CSS, JS로 박람회 플랫폼 제작하기 - 협업 툴로 깃헙을 사용해 PR, Fork 등 사용법 마스터하기 - 동아리 활동이었던 python.. 2021. 11. 7.
[2021 10.25 ~] 2학기 중간고사 이후 앞으로의 계획 진짜 폭풍같았던 알차고도 바빴던 여름방학이 지나가고 2학기가 시작되었다. 얼른 학점을 해우고 싶은 마음에 무려 10과목이나 수강신청을 해버렸다.... 하핳 ㅋㅋㅎㅎㅋ 과제, 수업, 퀴즈, 중간고사 등등등 정신없는 시간이 휘리릭 소멸되어 버리고, 드뎌 다시 블로그를 포함해, 하려고 했던 공부를 슬슬 다시 시동을 걸어보려 한다. 1. 박람회 참가 우선, 공부에 앞서 기술동향 그리고 현장감을 좀 얻어보고자 앞으로도 쭉 함께할 팀원들과 여러 박람회에 참가했다. 10.22 AIOT Korea Exhibition 2021 (코엑스) 10.26 2021 ROBOTWORLD 박람회 (킨텍스) 2. 프로젝트 블로그 정리 - 증권뉴스 모아따 (파이썬 프로젝트) - Smarcle-Fair 박람회 플랫폼 (웹 프로젝트) - .. 2021. 10. 25.

티스토리툴바