개발 리뷰 -10- 메인 페이지 개발

#1 스크롤 이벤트

메인 페이지는 스크롤 이벤트를 중심으로 돌아가도록 설계했다.

다만 웹보다는 게임 UI 느낌이 나도록 하기 위해 스크롤을 제거했다.

::-webkit-scrollbar {
  display: none; /* 크롬, 사파리, 오페라 등 웹킷 엔진 */
}

다음과 같은 코드로 제거시, 프로젝트의 모든 부분에서 스크롤이 사라지게 된다.

그것이 웹의 디자인 형식에서 벗어나서 게임 UI에 가까워지기 때문에 팀원과 지우도록 합의했다.

 

그러나 당연하게도 전체 스크롤에서 현재 어디 쯤인지 정보를 얻는 방법은 필요하니, 새로운 디자인의 스크롤을 필요한 곳에서 만들어 쓰기로 했는데, 메인에서는 header에 다음과 같이 스크롤 정보를 넣었다.

 

또 스크롤을 내리면 튜토리얼 화면이 오른쪽으로 넘어가도록 디자인을 설계하여 구현하였다.