프로젝트 중 제일 처음으로 만들었던 로그인 페이지다.
CSS적인 문제로 리뉴얼만 한 3번정도 했었다.
1.gif 문제
먼저 왼쪽 바구니 그림을 gif 넣었는데,
일정 크기 이상의 용량의 gif 그림을 넣으면 이쁘게 들어가질 않았다.
https://giphy.com/
위 사이트를 이용해서 문제를 해결했다.
일정이상 gif를 압축시켜 저용량으로 만들어놓은 것들을 모은 사이트이다.
이 사이트에서 사용한 것들은 부드럽게 그림이 들어갔고, 우리 사이트의 모든 gif는 여기서왔다.
2.gif 업로드 문제
처음에 로그인 페이지를 방문하면 위 그림처럼 오른쪽 흰색폼이 잠깐 왼쪽에 있다가
git가 업로드 되면 오른쪽으로 밀려나면서 자리를 잡았다.
짧은 순간이지만 예상되는 UX가 별로여서 이 부분을 개선하려 했다.
2.1 다운로드로 해결
이 gif는 url을 이용해서 받아왔는데
실제로 다운로드 받아서 우리 클라이언트 파일에 넣어놓는 방법으로 개선하려했다.
전보다는 빠르게 받아오지만 뭉개짐을 막을 순 없었다.
2.2 레이지 로딩을 이용해보자
레이지 로딩을 이용하여 전체적으로 숨겼다가 왼쪽 gif를 받아오면 같이 화면을 보여주는 식으로 개선 하고자 했다.
하지만 데이터를 받아오는 것이 없었기 때문에 실패했다.
그래서 없는 데이터를 억지로 넣어놔서 늦게 받아오는 방식으로 고민해봤지만,
서버를 더 사용한다는 점이 별로였고, 불필요한 로직을 추가 시킨다는 점이 별로여서
레이지 로딩은 더이상 고려하지 않았다.
2.3 용량을 줄여보기
용량을 줄이는 방법을 시도했지만, 화질이 더 깨지고 깔끔한 느낌이 사라져서 아쉬워서 다른 방법을 시도했다.
2.4 Placeholder div 추가
gif를 absolute로 고정하고 그 아래에 흰색 폼을 고정시켜줄 하늘색 div를 넣는 방법으로 시도했다. placeholder로 인해서 화면깨짐이 없었고, UX가 개선되었다.
placeholder를 아래 까는 방식으로 UX를 바로 잡았다.
이외에도 내용이 풍부하지 않아 밋밋한 느낌이 있었는데, 로그인 옆에 아이콘을 붙이는 방법으로 분위기를 개선했다.
- 마무리
UX 경험을 향상 시키기 위해 로딩 화면에 신경을 쓴 것이 뿌듯했다.
이런 디테일들을 챙기면서 좋은 UX를 심어주고 싶다.
