본문 바로가기

Programming/온라인 전시회

21년도 개인전시회 웹페이지 구축

20-2학기 때 프런트엔드 백엔드에 관한 전반적인 내용을 다루었다.

배운 것을 기반으로 직접 필요한 웹사이트를 만들어보고자 한다.

 

본 포스팅은 계획 초기단계로 개발하다보면 수정될 수 있음을 알려드립니다.

전시회 홈페이지 구축에 대한 간단한 끄적임

초기에는 온라인 전시회를 생각했지만 올해 여름에 서울에서도 비슷하게 열 예정이므로 온라인 전시를 위한 페이지는 제작이 필요 없다.

 

프런트 영역에서 구현해야할 부분은 크게 5페이지로 나타낼 수 있다.

 

1. home 처음 진입시 symbol과 click to start로 main 페이지로 넘어갈 수 있게 만드는 것

2. main 전시회의 포스터 및 기획의도 작가와 모델의 소개, 인스타등 전반적인 정보를 담는 공간

3. visitor's book 웹페이지를 구축해야하는 하는 가장 큰 이유인 온라인 방명록

4. event 학교에서 진행하는 개인 프로필 촬영 이벤트 안내 및 구글 설문지로 이동할 수 있는 링크

5. photo 대표하는 감정 7가지와 색을 알려주는 전시를 관람하는데 도움을 주는 페이지

 

이렇게 다섯가지 페이지를 통해 구축할 예정이다.

 

개발 tool은 spring을 기반으로 제작할 예정이다.

db는 mysql 기반으로 된 db를 사용할 예정이며 아직 결정하지는 않았다.

백엔드는 수업 마지막쯤 했던 mybatis를 이용해 제작할 예정이다.

업로드는 heroku를 통해 업로드를 할 예정이며 이번에는 비용을 내며 서버가 종료되지 않도록 할 예정이다.

(혹시 더 나은 방향이 있다면 그쪽으로 방향을 틀 예정이다)

전체적인 디자인을 사용하고 싶지만 길게 잡아 2주내로 전시회 준비까지 완료해야함으로 bootstrap template을 사용할 예정이다.

여기서 가능하다면 유튜브 생활코딩의 p5js 강의를 듣고 home 페이지에 모션그래픽까지 추가할 예정이다. 

 

포스팅은 지난학기 공부했던 내용을 복습하는 과정과 웹페이지를 제작하면서 필요한 코드들을 그때그때 올릴예정이며

완성한 모든 코드는 github에 올릴예정이다.