'유성구 문화관광' 모바일 웹 리뷰

​

​

​

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

오늘은 관공서 사이트를 가져와봤는데요!

다양한 형태의 애니메이션이

돋보이는 페이지라 한번 리뷰해보려 합니다!

​

https://www.yuseong.go.kr/tour/

 

 

 

​

​

---

반응형

​

다양한 사이즈에서 반응형이 작동하는 것으로 보아

width값에 따라 깨짐 없이 표현하려고 했던 것으로 보입니다.

반응형 사이즈가 많으면 디테일이 살아나지만,

그만큼 관리하기 어려워지는 단점이 있죠.

​

---

대메뉴

​

대메뉴를 hover 했을 때,

3depth의 구성을 볼 수 있는데,

depth가 바로 아래로 나열되는 형식이 아니라

목록처럼 구성하여, 시각적으로 각 메뉴의 정보를

한눈에 볼 수 있도록 제작했다는 점이 돋보입니다.

​

​

​

---

햄버거 메뉴

​

​

햄버거 버튼은 pc와 mobile상에서 둘 다 노출이 되지만,

노출되는 방식이 서로 다릅니다.

pc 사이즈에서는 햄버거 버튼을 눌렀을 때,

사이트 맵 페이지로 넘어가고

mobile 사이즈에서는 햄버거 버튼을 눌렀을 때,

사이드 메뉴가 노출되면서 depth 3까지 보일 수 있도록 되어있습니다.

개인적으로는 사이드메뉴 디자인의 통일이 아쉽다는 생각이 듭니다.

​

​

---

slide-active

​

auto-play로 되어있지 않지만,

페이지를 넘기면 지도에 강조(위치표시)가 변경되는

형태의 방식을 취하고 있습니다.

---

애니메이션

​

​

홈페이지에서 눈에 띄었던 것들 중 하나가

애니메이션 효과인데, 자칫 딱딱하기 쉬운 관공서 사이트에서

이런 포인트를 삽입해서 완화하려는 노력이 보였습니다.

​

scroll-event를 이용한 애니메이션인데,

그 위치에 도달하면, 구멍 도형에서 사람과 말풍선이 위로

올라오는 애니메이션이 삽입되어있습니다.

​

그 하단에도

​

빌딩의 반짝이는 효과를 주기 위해 같은 위치에

번갈아가면서 이미지가 나오게 하는 애니메이션 효과

​

사람이 뛰는 모습을 표현하기 위해서

그림자는 밑에 고정시키고

사람만 위아래로 움직일 수 있도록 하는 애니메이션 효과

​

물이 흔들리는 모습을 표현하기 위해서

물결이 양옆으로 움직이는 애니메이션 효과

​

등 사이트의 생기를 불어 넣기 위한 효과들이 눈에 띄었습니다.

 

​

​

---

top 버튼

​

top 버튼에도 애니메이션 효과가 있는데,

클릭 후, 로켓모양 top 버튼이 올라가고,

몇 초 뒤에 상단으로 올라가는 모습을 볼 수 있습니다.

(top 버튼에 기다림이 있는 것이 치명적인 단점으로 느껴지긴 합니다.)

 

---

section 구성

​

위에서 언급한 반응형과 연결되는

부분이라고 생각이 드는데,

width 값에 따라 section 구성을 잘했다고 느꼈습니다.

​

(관공서의 사이트는 explorer 환경에 사용할 수 있게 되어 있어야 하는 것으로 알고 있습니다.)

explorer 사용성에 맞지 않는 flex를 사용하지 않고,

float 방법을 사용한 것으로 보입니다.

​

이제 explorer는 서비스를 종료했기 때문에

flex를 사용해도 되겠지만,

flex, float 둘 다 장단점이 있어

자신에게 맞는 style을 사용하면 될 것 같습니다.

​

​

​

​

​

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