좋은 인터랙션은 설명하기 어렵지만 느껴진다

개발을 처음 시작했을 때는 기능 구현이 전부라고 생각했다.

버튼을 누르면 동작해야 하고,

API가 정상적으로 호출되어야 하고,

요구사항에 적혀 있는 기능이 모두 구현되면 끝이라고 생각했다.

하지만 서비스를 오래 만들다 보니 신기한 경험을 하게 됐다.

기능은 똑같은데 어떤 서비스는 좋아 보이고,

어떤 서비스는 어딘가 어색하게 느껴졌다.

처음에는 이유를 설명하기 어려웠다.

그런데 프론트엔드 개발을 오래 할수록 그 차이는 대부분 인터랙션에서 나온다는 것을 알게 됐다.

사용자는 기능보다 경험을 기억한다

예를 들어 회원가입 버튼이 있다고 생각해보자.

버튼을 누르면 회원가입이 된다.

기능적으로는 충분하다.

하지만 사용자는 단순히 결과만 경험하지 않는다.

클릭했을 때 반응이 있는지,

로딩 상태가 자연스러운지,

실패했을 때 무엇을 해야 하는지,

성공했을 때 안심할 수 있는지,

이런 과정 전체를 경험한다.

그래서 같은 기능이라도 느낌이 달라진다.

작은 차이가 큰 차이를 만든다

예전에는 로딩 상태를 크게 신경 쓰지 않았다.

if (isLoading) {
  return <div>Loading...</div>;
}

기능적으로 문제는 없다.

하지만 사용자는 화면이 갑자기 바뀌는 것을 좋아하지 않는다.

그래서 점점 Skeleton UI를 사용하게 됐다.

if (isLoading) {
  return <UserCardSkeleton />;
}

데이터는 아직 없지만 사용자는 어떤 내용이 들어올지 예상할 수 있다.

실제로 속도가 빨라진 것은 아니지만 더 빠르게 느껴진다.

프론트엔드에서 중요한 것은 실제 속도뿐 아니라 체감 속도라는 것을 많이 느꼈다.

애니메이션은 화려함보다 맥락이다

한때는 애니메이션을 많이 넣는 것이 좋은 UX라고 생각했다.

하지만 지금은 생각이 조금 다르다.

좋은 애니메이션은 눈에 띄지 않는다.

대신 사용자가 무슨 일이 일어났는지 이해하도록 도와준다.

예를 들어 모달이 열린다고 해보자.

.modal {
  opacity: 0;
  transform: translateY(8px);
  transition: all 0.2s ease;
}

.modal.open {
  opacity: 1;
  transform: translateY(0);
}

200ms 정도의 짧은 애니메이션만 추가해도 사용자는

새 화면이 나타났다

가 아니라

지금 이 위치에서 모달이 열렸다

고 이해하게 된다.

애니메이션은 장식이 아니라 설명 도구에 가깝다.

인터랙션은 신뢰를 만든다

가장 크게 느낀 것은 인터랙션이 사용자의 신뢰와 연결된다는 점이다.

버튼을 눌렀는데 아무 반응이 없다.

사용자는 다시 누른다.

그러다 중복 요청이 발생한다.

반대로 클릭 직후 상태가 바뀐다면

<Button disabled={isSubmitting}>{isSubmitting ? "처리 중..." : "저장"}</Button>

사용자는 기다릴 수 있다.

인터랙션은 사용자를 즐겁게 만드는 기능이 아니라 불안하지 않게 만드는 기능에 더 가깝다고 생각한다.

좋은 인터랙션은 설명하기 어렵다

재미있는 점은 좋은 인터랙션은 설명하기 어렵다는 것이다.

대부분의 사용자는

이 서비스의 인터랙션이 훌륭하네요.

라고 말하지 않는다.

대신

사용하기 편하다.

라고 말한다.

반대로 인터랙션이 어색하면 바로 느낀다.

버튼이 늦게 눌린다.

화면이 갑자기 바뀐다.

스크롤 위치가 튄다.

모달이 이상하게 열린다.

좋은 인터랙션은 존재감이 적고,

나쁜 인터랙션은 바로 티가 난다.

프론트엔드 개발자의 역할

예전에는 프론트엔드 개발자의 역할이 기능 구현이라고 생각했다.

지금은 조금 다르게 생각한다.

프론트엔드는 사용자가 제품을 경험하는 마지막 레이어다.

백엔드가 아무리 좋아도,

아키텍처가 아무리 좋아도,

사용자가 만나는 것은 결국 화면이다.

그래서 프론트엔드 개발자는 기능을 만드는 사람이면서 동시에 경험을 설계하는 사람이라고 생각한다.

마무리

좋은 인터랙션은 설명하기 어렵다.

하지만 사용자는 분명히 느낀다.

페이지가 자연스럽게 전환되고,

클릭에 즉시 반응하고,

로딩이 예상 가능하고,

실수를 예방할 수 있을 때

사용자는 서비스를 더 편하게 사용한다.

돌아보면 내가 좋아하는 서비스들도 특별한 기능 때문이 아니라 이런 작은 경험들이 잘 만들어져 있었다.

그래서 요즘은 새로운 기능을 만들 때도

이 기능이 동작하는가?

보다

사용자는 이 경험을 어떻게 느낄까?

를 먼저 생각하려고 한다.

좋은 프론트엔드는 결국 기능이 아니라 경험을 만드는 일에 더 가깝다고 생각한다.