프로젝트/Smarcle-Fair 박람회 플랫폼 (프로젝트)4 [#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. 이전 1 다음
