D-Day 76

carminchameleon·2020년 4월 12일
0

HangOutWithReact

목록 보기
11/12

1. 모달 완성

Crew modal

Total Winner 부분을 만들었을 때 디자인을 대략적으로만 해놓은 상태에서 레이아웃을 만들었다. 막상 CSS로 만들어 보니 내가 생각한 느낌과 달라서 수정을 엄청나게 많이 했었다. 왜 목업 디자인을 만들어 놓고 작업을 해야 하는지를 깨닫게 된 과정이었다. 그래서 모달 부분을 만들 때에는 피그마로 미리 디자인을 했다. 처음 보드의 모달을 만들려고 했을 때, 게임에서 유저를 클릭 했을 때 그 유저의 전적이나 레벨을 요약해주는 창처럼 만들려고 했다.

실제 구현한 창


뱃지는 두가지의 버전으로 디자인을 해 놓았다. 하나는 세 가지 종류의 뱃지만 있을 경우, 그 이상의 뱃지가 있을 경우. 만약 벳지가 세개 이상이라면 위의 디자인처럼 뱃지를 조금 더 작은 크기로 하고, 창의 크기를 지나가면 overflow hidden으로 해서 스크롤을 만들 예정이다. 현재 리워드 시스템에서는 뱃지의 종류가 세가지라서 우선은 첫번째 버전으로 구현했다.

리워드 시스템에서 레벨은 벳지를 얼마나 가지고 있느냐에 따라서 달라지기 때문에 뱃지를 가지고 있을 경우에는 투명도가 없고, 뱃지가 없을 때는 투명도가 있게 해서 살짝만 보이게 했다.

Store modal

크루 모달을 만들고 나니 스토어 모달이 너무 애매해졌다. 왜냐하면 스토어 부분은 레벨과 뱃지를 보여주지 않기 때문이다. 그래서 피그마에서 고피자의 상점 일러스트를 급 제작해서 넣어주었다.

스토어 로고를 넣고 보니 기존의 winner store 부분이 너무 비어 있는 느낌이 들어서 수정해 보았다.

2. Time 부분


기존에는 스크롤 부분을 없앴었다. 노트북 사용자는 패드로 넘길 수 있지만 데스크탑 사용자는 넘기기 힘들 것 같아서 스크롤을 추가했다. 최단 시간, 평균시간 버튼의 위치와 디자인도 수정했다.

3. Count 부분

퍼센트를 표현하는 부분이 원래는 막대 그래프 안에 있었는데, 숫자 퍼센트가 적을 경우에는 글자가 막대로 부터 튀어 나와서 아래로 옮겼다.

4.Refresh 버튼

리더보드이기 때문에 기준 시간을 보여주고 리로드 버튼을 만들었다.

profile
나는야 코린이 하지만 무럭무럭 자라고 있죠

0개의 댓글