한 끗 차이로 퀄리티가 올라가는 프론트앤드 개발자의 기술

한끗차이로 올라가는 프론트앤드개발의 기술

 

프런트 앤드 개발자는 사용자가 편리한 UI/UX를 제공해주는 것도 중요하고

디자이너가 제작해준 디자인을 100% 구현하는 것도 중요하다.

 

개발을 하다 보면 잘 챙기진 않지만 이런 부분을 챙기면

좀 더 퀄리티가 올라가는 사이트를 제공할 수 있는 부분들이 있어서 공유해보고자 한다.

 

---

1️⃣ 에러 화면 구현하기

생각보다 개발에 급급하다 보면 에러 화면에 대한 퍼블리싱은 미룰 때가 있다.

사용자가 에러화면을 만나는 경우는 종종 있다.

 

안좋은 에러 화면의 예시

보통 개발이 급하게 돌아가는 경우 에러 화면을 챙기지 못하면,

프로젝트 내에서 제공하는 기본 에러 화면이 뜨는 경우가 있다.

 

이러한 에러 화면은 사용자에게 정확한 에러 내용을 전달할 수 없을 뿐 아니라

다시 정상적인 화면으로 돌아가는 길을 제공하지 못한다.

에러를 전달해주고 링크를 전달해주는 404페이지가 좋은 에러페이지

좋은 에러 화면에는 사용자에게 정확한 에러 내용을 전달해주고,

다시 정상적인 화면으로 돌아갈 수 있는 버튼을 제공해주자.

위트있는 404 페이지

위트 있는 에러 화면을 제공한다면 사용자에게 더욱 재밌는 사용자 경험을 주는 것도 가능하다.

 

 

2️⃣ Alert 메시지(사용자 알람) 정확하게 제공하기

사용자들은 해당 시스템이 어떠한 로직으로 돌아가는지를 모른다.

만약 사용자 액션으로 심각한 문제가 발생하는 경우라면 반드시 알람메시지로 위험을 안내해야 한다.

 

삭제 시 알람 메시지 제공

예를 들면 삭제를 하면 복구가 안 되는 데이터의 경우 반드시 알람을 제공해서

사용자가 위험을 한번 더 인지할 수 있게 해주어야 한다.

 

혹은 게시판에서 등록, 수정, 로그인 시 로그인 에러가 발생하는 경우 등

사용자의 액션에 결과는 알람 메시지로 정확히 전달해주는 것이 좋다.

 

 

 

3️⃣데이터가 없는 경우에 예외처리 적용하기

오랫동안 서비스된 사이트의 경우 모든 화면에 데이터가 있지만

신규로 오픈되거나, 데이터가 없는 곳에는 반드시 사용자가

데이터가 없는 화면이라는 것을 인지할 수 있는 메시지를 넣어주자.

 

• 등록된 게시물이 없습니다
• 검색 결과가 없습니다. 등 

 

데이터가 하나도 없는 페이지의 경우 해당 구역을 빈칸으로 남겨두는 게 아니라

사용자가에게 데이터가 없음을 인지할 수 있는 메시지를 남겨주어야 오류가 아님을 인지할 수 있다.

 

 

4️⃣ css transition, transform을 이용하기

사용자들은 사이트에서 Action이 일어날만한 곳을 찾아다닙니다.

이러한 경우 마우스 hover가 일어나거나 해당 input에 포커스가 되면 

지금 나의 마우스와 포커스가 어디에 가있는지 보여주는 것이 일반적입니다

 

css:hover, css:focus 등의 기술로 일반적인 상황과 다르게 

action이 일어나면 일반적인 상황과 다른 색상으로 안내를 합니다.

여기서 조금 더 나아가서 transition과 transform 기능을 이용하면

자연스럽게 변화하는 버튼과 animation으로 사용자에게 좀 더 높은 사용자 경험을 줄 수 있다

마우스 hover 시 transition과 transform 적용

css transition이란?
CSS 속성을 변경할 때 애니메이션 속도를 조절하는 방법을 제공합니다.
속성 변경이 즉시 영향을 미치게 하는 대신, 그 속성의 변화가 일정 기간에 걸쳐 일어나도록 할 수 있습니다

css transform이란?
CSS 변형(transform)은 좌표 공간을 변형함으로써 일반적인 문서 흐름을 방해하지 않고 콘텐츠의 형태와 위치를 바꿉니다

transition을 이용한 버튼 hover 효과적용

딱딱하게 깜박이는 효과보다 실제로 누르는 듯한 색상이 자연스럽게 변화하면

좀 더 퀄리티가 높아 보이는 효과를 누릴 수 있다.

 

 

 

5️⃣focus 시 애니메이션 이벤트  발생시키기

정적인 사이트에서 요즘의 웹사이트는 좀 더 동적으로 변화하고 있다.

해당 스크롤을 내릴 때마다 그 섹션에 맞는 애니메이션을 발생시켜보자

 

wow 라이브러리로 만든 애니메이션 효과들

 

좀 더 사용자가 집중할 수 있고, 해당 콘텐츠에 집중할 것이다.

하지만, 너무 많은 이벤트나 애니메이션은 자칫 사이트가 정신없어 보일 수 있기 때문에

적절 이벤트를 가장 집중되는 콘텐츠에 적용시키도록 하자.

 

직접 코딩하기엔 시간이 많이 드는 부분이라서 이미 잘 만들어진 라이브러리를 이용해는 것을 추천한다.

👇애니메이션 css 라이브러리 보러 가기

https://animate.style/

Animate.css | A cross-browser library of CSS animations.

https://github.com/graingert/wow

GitHub - graingert/WOW: Reveal CSS animation as you scroll down a page