'사진 온실' 모바일 웹 리뷰

​

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

사진관에서 사진을 찍으면

원하는 대로 못 찍는 경우나, 몸이 굳어서

부자연스러운 자세로 찍는 경우가 허다하실 겁니다.

그래서인지 셀프 사진을

찍는 사람들이 부쩍 증가하고 있습니다.

​

오늘 준비한 리뷰는

셀프 사진관인 '사진온실'입니다.

 

---

페이지 전환

화면은 꽉 채운 풀페이지로 구성되어있으며,

페이지 스크롤 시 이벤트가 적용되어있어

절반을 나누어 왼쪽은 아래로 fade out 되고

오른쪽은 위로 fade out되어서

독특한 애니메이션 구조를 가지고 있습니다.

약간의 딜레이가 있어 불편한 감이 있지만,

참신한 페이지 구성으로 보입니다.

​

​

스크롤을 넘기면 페이지 내에

contents들이 나타나는 효과가 있습니다.

자연스럽게 스크롤을 넘길 때마다

fade up 되어서 나타납니다.

( gif라 자연스러워 보이지 않네요 )

​

​

---

반응형 처리

​

​

모바일 웹을 리뷰하는 만큼

반응형은 어떻게 구성되어있는지 확인해보려고 합니다.

각각의 버전마다 도형의 위치가 변환되고,

사진의 크기 또한 규격이 변경됨을 알 수 있습니다.

다만 아쉬운 점은 모바일 사이즈가 되면

자연스러운 fade up의 높이 값이 달라져서인지

스크롤을 조금 더 내려야 fade out이 되는 것을 확인할 수 있었습니다.

​

 

---

모바일 최적화

전체적으로는 웹 반응형 형태를 띠고 있지만,

예약 부분은 조금 아쉽게도

모바일에 최적화된 상태의 레이아웃으로

되어 있었습니다.

max-width : 458px인 것만 봐도

모바일에 맞추어 디자인했다는 것을 알 수 있습니다.

​

---

날짜 탭 메뉴

날짜 선택 메뉴를 보면

pc 버전의 메뉴 선택과

mobile 버전의 메뉴 선택이 다른 것을 알 수 있습니다.

디자인적인 구성으로 보면 pc 쪽이

간결하고 어울리는 모습을 볼 수 있습니다.

mobile의 border-radius를 조금만

줄이면 좋았을 것 같습니다.

​

---

햄버거 메뉴

 

햄버거는 자연스러운

애니메이션 효과를 주기 위해서

Gsap를 사용해서 transform 매트릭스를

사용하였습니다.

대메뉴 소메뉴가 나오는 형태뿐만 아니라

햄버거 버튼이 나오고 닫기 버튼이 나오는

동작들에도 적용되어있어,

좀 더 다채로운 느낌을 줍니다.

​

​

​

​

 

---

마치면서

​

색상의 통일성과 따뜻하고 무게감 있는

색상을 사용하여 전체적으로 안정적인 느낌을 주었습니다.

심플한 디자인을 유지하면서

다양한 효과를 보여주려는

노력이 돋보이는 사이트였다고 생각이 듭니다.

​

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

​