왓챠피디아는 콘텐츠의 허브를 지향하며 영화, TV, 책, 웹툰의 정보를 제공하고 사용자들이 직접 평가한 데이터를 기반으로 작품을 추천해주는 서비스이다. 서비스 초기에는 웹에서만 이용 가능했지만 현재는 앱으로도 이용이 가능하다. 상세페이지는 모바일에 더욱 적합한 형태이지만 랜딩페이지만큼은 웹도 깔끔하기에 금일의 프로덕트로 선정했다.
우리가 웹페이지를 접속했을 때 보이는 화면은 HTML과 CSS으로 이루어져 있다. HTML은 쉽게 말해서 웹페이지의 뼈대를 CSS는 이를 더욱 보기 좋게 꾸며주는 역할을 한다. 이외에도 사용자의 편의성을 높여주기 위하여 상호작용 기능을 구현할 수 있도록 돕는 Javascript라는 언어가 있다. 이 세 가지를 이해한다면 우리가 매번 이용하던 웹페이지가 어떻게 구성되어 있는지 이해할 수 있다.
| 왓챠피디아 랜딩페이지의 뼈대
웹페이지의 뼈대를 담당하는 HTML은 Hypertext Markup Language라는 뜻으로 익스플로러, 크롬과 같은 브라우저가 페이지의 구조를 이해할 수 있도록 알려주는 마크업 언어이다. 특정 웹페이지에서 마우스를 우클릭하여 나타나는 바로가기 메뉴의 가장 아래 '검사'를 클릭하면 해당 웹페이지가 어떻게 구성되어 있는지 확인할 수 있는 개발자 도구로 진입할 수 있다. 또는 브라우저의 '더보기-도구 더보기-개발자 도구'를 통해서도 이용 가능하다.
보통의 HTML 문서는 위와 같이 <head> 태그와 <body> 태그로 이루어져 있다. <head> 태그 내부에는 페이지의 전체적인 스타일을 담은 css나 상호작용을 할 수 있도록 돕는 Javascript와 같이 웹페이지가 알아야할 정보들이 담겨 있다. <body> 태그 내부에는 사용자가 웹페이지를 접속했을 때 직접 보는 콘텐츠들이 담겨져 있다.
개발자 도구에서 <head> 태그를 제거하여 랜딩 페이지의 스타일 시트를 벗겨낸 모습이다. 웹페이지가 HTML로만 이루어졌다면 어땠을까?라는 호기심을 해결해주고, CSS의 감사함을 깨달을 수 있는 효과적인 방법이다.
| 왓챠피디아 랜딩페이지의 외형
HTML로 작성된 문서를 더욱 보기 좋게 만들어주는 것이 스타일을 담당하는 CSS(Cascading Style sheet)이다. 텍스트의 크기나 색, 형태와 같은 것들은 HTML로도 충분히 설정 가능하지만 매번 따로 설정하는 것보다는 CSS라는 스타일 시트로 보다 편하게 적용할 수 있다.
특히 왓챠피디아와 같은 정보성 콘텐츠를 일관된 디자인으로 작성할 때는 CSS를 각 콘텐츠에 동시에 적용하는 것이 간편하다. 텍스트뿐 아니라 특정 이미지 또는 콘텐츠의 크기, 위치, 색 등 눈에 보이는 모든 부분을 담당하는 것이 CSS이다.
왓챠피디아의 메인 페이지에서는 각 컬렉션마다 대표 작품들 7-8개씩을 보여주는데 이를 한 번에 확인하기에는 제약이 있기 때문에 위와 같이 버튼을 클릭하였을 때 다음 콘텐츠가 보이게 했다. 위 이미지에서 버튼 위에 마우스 포인터가 올라갔을 때 색이 변경되어 사용자들로 하여금 클릭할 수 있는 버튼이라는 것을 알려주는 mousehover가 이용되었음을 확인할 수 있다.
| 왓챠피디아 랜딩페이지의 근육
Javascript는 웹페이지 내 사용자의 움직임에 따라 상호작용할 수 있도록 돕는, 일종의 근육 역할을 한다. 줌-인&아웃, 스크롤과 같이 간단한 것부터 아주 복잡한 인터렉션까지 Javascript만 있으면 다 해결할 수 있다.
왓챠피디아는 정보성 콘텐츠로 이루어진 서비스이기 때문에 인터렉션 페이지의 정수로 불리는 애플과 같이 현란한 인터렉션은 찾을 수 없지만 곳곳에서 기본적인 Javascript가 동작하며 사용자의 편의성을 개선하고 있음을 확인할 수 있다.
다량의 정보를 제공하기에는 한정된 화면이라는 제약이라는 존재하기 때문에 위와 같이 버튼을 클릭하여 콘텐츠가 좌우로 움직일 수 있게 하여 사용자들이 더욱 많은 콘텐츠를 하나의 페이지에서 확인할 수 있게 했다.
참고자료
왓챠피디아 | https://pedia.watcha.com/ko-KR/?domain=movie
'📝 PM > daily' 카테고리의 다른 글
| 코드스테이츠 PMB 11 | API와 친해지기(실패) (0) | 2022.04.27 |
|---|---|
| 코드스테이츠 PMB 11 | 앱이라고 다 똑같은 게 아니다 (0) | 2022.04.26 |
| 코드스테이츠 PMB 11 | I am... Db (딱) (0) | 2022.04.22 |
| 코드스테이츠 PMB 11 | 푸딘코의 현재 위치는? (0) | 2022.04.20 |
| 코드스테이츠 PMB 11 | 티스토리와 엄벙뗑 GA (0) | 2022.04.19 |
