피그마 신규 이펙트, glass effect 써보기
홈화면 리뉴얼 근데 이제 글라스 효과를 곁들인
glass effect가 적용된 카드 UI피그마에 신규 이펙트가 업데이트되었다.
이거 어디 써먹을 데 없을까?
피그마에 신규 이펙트가 업데이트되었다.(꽤 오래전에) 새로운 이펙트를 써보고 싶어 드릉드릉하던 찰나에 마침 딱 적당한 곳이 떠올랐다. 개편을 앞두고 있는 베리챗의 홈화면이다. 글래스 이펙트 특성상 모션과 더해졌을 때 효과가 극대화 되는데, 홈화면배경의 영상이 시너지를 내줄 것 처럼 보였기 때문이다.
한 눈에
재화를 관리하기
(좌) 기존 화면 / (우) 개선안메인화면의 주요 목적은 다음과 같다.
1. 보유 자산 확인
2. 자산을 모으기 위한 액션 유도
3. 지면 광고 게시
4. 자산의 사용
그중에서도 최상단에 위치한 메인패널은 보유 자산을 한눈에 확인하고, 베리 생태계의 핵심이 되는 액션(모아서 한 번에 수확하거나 이미 획득한 가챠를 오픈하는 등)을 할 수 있다.
기존의 화면은 보유 자산과 액션 가능한 자산을 구분하기가 어려워 보였다. 그래서 두 그룹을 쉽게 구분할 수 있도록 박스로 묶고, 액션이 가능한 자산은 버튼을 좀 더 명확하게 그려주었다.
지면 광고 & 미션 보드
메인 패널의 아래쪽에는 지면광고와 미션 보드가 위치하고 있다. 미션 보드의 카드는 더 어울리는 그래픽으로 대체하고 버튼 텍스트를 좀 더 간략하게 표시했다. 또한 새로운 광고지면의 도입을 위해 미션보드 바로 아래에 배너를 추가했다. 배너를 클릭하면 오퍼월 페이지로 이동한다. 오퍼월 페이지에는 메인화면에 게시된 미션 외의 다양한 미션을 통해 재화를 획득할 수 있다.
(좌) 기존 화면 / (우) 개선안버튼 위계 설정하기
가장 아래쪽에는 코인이나 크레딧으로 쇼핑할 수 있는 카드리스트가 표시된다. 기존에는 카드의 버튼이 상단에 있는 미션 버튼과 동일했다. 상단 버튼의 주목도를 높이기 위해 상대적으로 카드의 버튼이 눈에 덜 들어오도록 밸런스를 조절했다.
(좌) 기존 화면 / (우) 개선안사실 별로 쓸 말이 없는데, 새로 생긴 글라스 이펙트를 써보고 싶어서 정리했다.
끝.
