'NCPLAY' 모바일 웹 리뷰

​

​

안녕하세요 알씨타운입니다! :)

엔씨소프트(NC)가 최근에 공식 브랜드 미디어

'NC PLAY'를 오픈했습니다.

그 동안 'NC 공식 블로그'였던 곳을

리뉴얼해 PC,MOBILE 반응형 웹페이지를 구성해서

웹분석을 해보고자 합니다~

​

​

​

https://about.ncsoft.com/play

 

---

메인페이지

​

​

메인 최상단에는 동영상이 삽입되어 있습니다.

동영상이 반응형에 따라 크기가 변화되는데

부모 태그를 밖에 감싸고

object-fit : cover를 사용해서 크기가 줄어들거나 크기가 커지면

그 크기에 맞게 cover됨을 알 수 있습니다.

​

​

​

​

scroll 이벤트가 되면 바로 아래로 내려가지 않고

동영상의 크기가 점차 줄어들고,

동영상 뒤 이미지 나타나면서

동영상을 감싸고 있던 배경의 opacity가 약해져서

뒤 이미지가 점차 뚜렷해지는 것을 볼 수 있습니다.

​

▼ gif img를 보면 더 명확하게 확인이 가능합니다. ▼

​

​

​

---

검색

​

​

placeholder 폰트 크기가

조금 아쉽다라는 생각이 들었습니다.

검색창 배경색은 위에서 아래로 투명해지는

#fff 색상의 배경입니다.

​

검색을 하게되면 검색결과를

Tab 형식으로 내용을 분류하여 검색결과를

확인 할 수 있도록 하였습니다.

​

​

​

---

햄버거 메뉴

​

​

햄버거 메뉴도 검색창처럼

같은 형식으로 나타나고

각 메뉴에 hover 시

왼쪽에서 오른쪽으로 밑줄이 노출됩니다.

메뉴의 font-weight에 따라 밑줄의 두께도 다르게 하여

디자인 디테일이 돋보였습니다.

​

​

​

---

메인페이지 - slide

​

​

각 반응형 max-width 값에 따라 slide

크기와 노출 개수가 변환되고 있습니다.

​

​

가장 크게 노출되는 점은 pc버전에서는 slide button으로

오른쪽 / 왼쪽으로 이동할 수 있는 button이 노출되고

mobile 버전에서는 상단에 있던 button이 사라지고

하단에 scrollbar가 생겨서

터치 슬라이드가 가능하도록 되어있습니다.

​

​

---

text-stroke

​

text에도 디자인 효과가 들어가 있는데

보통 font에는 color를 삽입하는데

text에 border를 넣어주는

border-stroke를 사용해서

컬러를 사용하지 않고 흑백의 차이를 잘 사용했다고 생각합니다.

​

그래서 강조되는 부분

(hover, page-active, touch 등)에서

color #000가 삽입되어있습니다.

​

​

​

​

이상 알씨타운이었습니다~~