W7D1 | 네이버 웨일 CSS, HTML, JS | PMB 12기

 

 

 

출처: 네이버 웨일

 

웨일의 정식버전은 2017년에 출시를 하였고 현재 국내 웹 브라우저 시장에서 점유율 4위를 기록했다. 웨일 김효 책임 리더는 모바일 경험을 PC로 자연스럽게 연결시키는 등의 사용성을 제공하고 있다 인터뷰에서 밝혔다. 

 

W6 때, 랜딩페이지 분석을 하는 과제를 진행했었는데 프로덕트 선정 중에 네이버 웨일을 찾았다. 거의 완벽한 랜딩 페이지여서 기억에 많이 남았는데 오늘은 이 페이지를 HTML, CSS, JS로 나누어 분석을 해보겠다. 

 

 

 

 

HTML 

---

HTML이 관여하고 있는 부분은 아래와 같다.

 

 

 HTML은 페이지의 골격을 담당하고 있는데 위의 사진을 보면 딱 이해가 될 것이다. 전체 페이지의 섹션만 간단하게 나눈 것이 위의 사진이고 각 섹션마다의 HTML은 따로 존재한다. 

전체 페이지에 사용된 간단한 섹션: body, article, aside, details, figcaption, figure, header, hgroup, menu, div, nav, section, header, table, tbody, tfoot, thead, tr, th, td, article, aside, audio, video, textarea

 

 

 

일단은 피그마를 이용을 하여 색상을 넣어서 HTML을 표시해보았다. 아마 여기에 사용된 모든 HTML을 내가 표시하지는 않았을 것이다. 하지만 대략적으로는 각 섹션마다 이렇게 표시가 되었다는걸 보여주고자 했다. 이 섹션은 슬라이드로 이루어져 3개의 콘텐츠가 대략 4초마다 움직이는데 그때마다 쓰이는 HTML이 조금씩 바뀐다. 

 

 

CSS 

---

 

이 파일은 네이버 웨일의 common.css이다. 공통적으로 적용되는 스타일을 파일에 넣은 것이라 보면 된다. 모든 css를 하나하나 뜯어볼 수는 없으므로 이 파일을 잡고 설명을 하겠다. 하지만 위의 사진은 가독성이 매우 많이 떨어지므로 common.css 적용 전후 사이즈를 가져와 비교를 해보자. 

 

CSS 전후

 

좌측 사진이 common.css를 적용한 것 우측은 적용하지 않은 것이다. TOP TO BOTTOM 형식으로 보자면, 내비게이션 바 부분이 다른 것을 확인할 수 있다. 좌측은 각 요소간의 간격과 높이가 일정한데, 우측은 그렇지 않고 러프하게 표현이 됐다. 여기에서 쓰인 CSS는 margin, padding, height, font정도이다. 

 

그 외의 나머지 섹션(웨일온, 클린 웹, 인터페이스, footer)에서 쓰인 css로는 hover, margin, padding, font-weight, font-size 등등이 있다. 너무 많아서 다 작성할 수 없었다. 

 

common.css가 없다고 하여 크리티컬 하게 달라지지는 않으나 확실히 디테일한 부분에서의 차이는 존재한다. 

 

 

JS - 자바스크립트

---

JS 전 후

 

자바스크립트의 전후이다. 사실 JS는 잘 몰라서 어떻게 분석을 해야 하나 걱정을 했는데, 다행히 js  기능 끄기가 있어서 이용해보았다.

 

js는 헤더와 footer 부분의 콘텐츠에 먼저 적용이 된 것을 확인할 수 있다. 상단의 네비게이션 박스는 아예 기능을 잃어 박스 역할만 하였다. 미들 부분의 콘텐츠는 원래 슬라이드 형식으로 gif가 끝나면 다음 gif로 넘어갔었는데 js를 제거하니 슬라이드 효과가 사라졌다. 상단의 다운로드 박스는 스크롤 메뉴(유저 스크롤을 따라다님)로 유저가 스크롤을 내리는 이벤트가 발생하면 active가 되었었는데 js를 제거하니 디폴트로 계속해서 화면에 있는 것을 볼 수 있다. 또한 '다운로드' 버튼 기능이 사라졌다. 기대한 것은 모든 버튼의 기능이 사라지는 것이었는데 아니었다. 마지막으로는 스크롤 박스가 없어졌다. 그렇다고 스크롤 기능이 작동을 안 한 것은 아니고 페이지에서 사라졌을 뿐이다. 이건 정말 의외였는데 html으로 만들었거니 했는데 js였다. 

 

페이지에 랜딩 하면 가장 먼저 보이는 저 고래는 gif로 움직이는데 이 부분이 js인가 하는 나의 예상은 아주 처참하게 깨졌다. 찾아보니 css 애니메이션 효과인 것 같다. 

 

 

https://whale.naver.com/ko/?utm_medium=search_pc&utm_source=title&utm_content=smartwhale 

네이버 웨일 브라우저