[ 2020.07 제작 ]
기술 스택
Html, Css, Vanila Javascript
계기
대학생 2학년이 되기 전, 코로나 판데믹이 일어나면서 아르바이트와 개강 사이의 대략 2주간의 시간이 붕 뜨게 되었다. 항상 전공 수업만 따라가고 외부/개인 프로젝트는 진행해 본 적이 없어 이제 뭔가 해볼때가 되지 않았나? 라는 생각이 들 때, 친구가 올해 함께 교내 프로그래밍 동아리와 미래창조과학부에서 주관하는 한이음 ICT 멘토링에 참가하지 않겠냐는 제안을 주었고 수락하게 되었다.
한이음 프로젝트에서 회의를 통해 제안받게 된 파트는 웹 FE 부분이었고, 사실상 React를 이용하여 구현해야만 했는데 기본적인 웹 프론트엔드적 지식이 없어 평소 좋아하는 가수의 팬페이지 제작을 해보며 기본적인 레이아웃, 디자인, 구현까지 전부 해보며 전반적인 웹 프론트엔드의 구동에 대해 공부하기로 하였다.
겸사겸사 좋아하는 락스타에게 내가 하는 일도 보여주고 싶었다!
기술적 고충
무지함
: 사실상 웹페이지를 만드는 것 자체를 해 본 적이 없었다. 그래서 각종 블로그, 기술 문서, 유튜브를 찾아 독학하여야했다. div를 이용하여 레이아웃을 나누는 것 부터 css를 이용한 스타일링, 동적 변화를 주기 위한 javascript까지 전부!
애니메이션
: 처음에는 Html과 Css (이걸 기술이라고 해야할지는 모르겠지만) 만을 사용하여 웹 페이지를 구성하였는데 나도 번쩍번쩍 우리가 평소에 사용하는 웹서비스처럼 만들고싶었고, jQuery나 각종 라이브러리를 이해하기엔 기초가 부족했다. 그래서 Vanila Javascript를 공부하여 간단하지만 mobile화면에도 이렇게 나름? responsive한 화면을 구현해보았다. (반응형 웹)
Why?
- 정적인 페이지와 동적인 페이지의 차이
- 왜 반응형 웹을 사용하였는가? 반응형 웹은 무엇인가?
개선할 사항
- 항상 시작되는 메인 페이지의 이름은 index.html로 시작한다. 수정할 것.
처음 구현을 시작하였을 때는 이런 기본적인 사항도 전혀 모르고 있었다...
발전 - 연계 프로젝트
- 해당 프로젝트에서 제작한 ui/ux 디자인을 재사용하여 2021년도 웹 프로그래밍 중간 과제와 기말과제인 웹 스트리밍 서비스(연계)를 수행하였다.
추후 웹 스트리밍 서비스 글 작성하고 보충하기
