Sparta - 11주차 WIL 2020.02.28

이번 프로젝트는 AI의 비중이 높은 프로젝트였고, 그 기능을 중심으로한 사이트를 만들기로 결정하였다.

백앤드에 대한 이해도가 낮기 때문에 백앤드를 하고 싶었지만, 이번엔 AI의 비중이 높아 솔직히 Python과 자바스크립트에 대한 이해도가 낮은 현재 상태로써는 팀원들과 시간을 맞춰서 진행하기에는 무리가 있었다.

그리고 팀원중에 잘하는 분이 한명 있어서 그분이 백앤드를 맡아야 했고, 이번 사이트는 서버에 기능이 많이 추가되지 않는 단순한 구조의 사이트라서, 프론트에 힘을 많이 쓰고 싶었다. 그래서 역활 분배를 하다보니 실질적으로 프론트 앤드를 맡게 되었다.

첫 페이지가 메인에다가 사이트의 기능이 소개되는 페이지 이기 때문에 스크롤 애니메이션을 넣고 싶었고, 내가 맡아서 하게 되었다.

프론트 페이지는 되게 금방 만들어 낼수 있을줄 알았는데 막상 해보니까 그게 아니었다. 아직 익숙하지 않기 때문에 스타일을 내가 원하는 대로 적용시키기 힘든건 계속 해봐서 알고 있었지만, 애니메이션 효과를 주는게 상당히 오래 걸렸다.

애니매이션이 들어가는 원리가 궁금했기 때문에, 순수 자바스크립트로 만들기로 하였는데, 자바스크립트가 부족하기 때문에 원하는 기능을 바로 찾아서 적용시키는데 시간이 많이 걸렸다.

 

이번 애니메이션의 가장 핵심은 Intersection Observer 이다.

기본적으로 스크롤 효과는 현재 보고있는 화면과 효과를 주고싶은 화면의 거리를 계산해서 하는 방법이 있었고, 더 찾아보니 Intersection Observer 이라는 방법도 찾아 냈는데, 비동기적 방식으로 특정 요소를 사용자가 화면으로 보게될 때, 작동하도록 하는 방식이다.

같은 효과도 여러가지 방법으로 적용할 수 있다는 것도 알았고, 따로 혼자 자바스크립트와 파이썬을 공부할 시간이 필요함을 느꼈다.

 

프론트 앤드도 생각보다 작업량이 많다는 것을 이번에 느꼈고, 프론트앤드를 전문적으로 할게 아니라면 라이브러리를 잘 사용해야겠다 싶었다.

이번에는 페이지 수가 많지 않기 때문에 반응형 페이지도 만들기로 했었다. 미디어 쿼리를 사용해서 모바일 화면도 고려해서 만들었는데, 모바일까지 고려하면서 만드려고 하니 생각해야 하는게 두배로 늘어났다. 그래도 css가 더 정돈되는 느낌은 들어서 css사용이 조금 익숙해지는 느낌 이었다.

장고도 여러번 사용하니까 처음엔 엄청 헷갈리던 구조가 조금씩 파악되기 시작했다.

 

이번에는 기능중심형 사이트이기도 하지만 지난번에 지적받은게 프론트앤드의 스타일 부분이라서 신경을 좀 쓰면서 작업 진행중이다. 그래서 지금은 정작 중요한 기능 부분은 코드리뷰 하면서 다시 공부해야 하고 AWS도 다시 살펴봐야 하지만, 장고를 활용해서 간단한 웹페이지는 만들 수 있지 않을까 싶다.