[📓아티클] 토스 A부터 Z까지 파악하기 (2)

 

오늘의 아티클 :

https://toss.tech/article/interaction

인터랙션, 꼭 넣어야 해요?

 

---

1. 아티클 첫 인상과 후기

 

- 토스에서 사용하고 있는 인터랙션 종류와 제작기에 대한 이야기가 나올 것이다.

→ 토스에서 사용되는 인터랙션이 어떻게 개발되었는지, 또 개발 라이브러리인 랠리에 대한 자세한 설명이 나온다.

 

- 인터랙션이 UX를 구성하는 데 있어 어떤 기능을 할까?

→ 지표를 개선하고 화면 이탈율을 줄인다.

→ 유저에게 명확한 피드백을 줄 수 있고, 어떤 행동을 해야되는지 더 직관적으로 보여주고, 화면 안에서 어떤 일이 일어나고 있는지 쉽게 전달할 수 있다.

→ 인터랙션은 유저에게 더 명확한 피드백을 줄 수 있고, 유저가 어떤 행동을 해야 되는지 더 직관적으로 보여줄 수도 있고, 화면 안에서 어떤 일이 일어나고 있는지 쉽게 전달할 수 있다.

 

- 토스의 인터랙션에 큰 변동사항이 있나보다.

→ 앱 초창기 동적인 화면이 없던 시절부터 인터랙션 팀이 꾸려진 후 근본적인 원인 2가지를 찾아 해결하고 좋은 인터랙션의 대표적인 예시가 될 수 있었던 이유 등을 소개하는 아티클이다.

 

- 토스에서 인터랙션을 활발하게 사용하게 된 이유와 과정에 대한 이야기일 것이다.

→ 그저 예뻐지게 하는 도구이고, 개발 공수가 너무 많이 든다는 이유로 개발 순위에서 밀려난 인터랙션을 인식 개선과 자체 개발 라이브러리 ‘랠리’를 제작하는 등 여러 노력을 통해 활발하게 사용하게 되었다.

 

 

 

2. 강의 내용 복습

 

- easing 값

: 피그마 프로토타입에서 사용되는 애니메이션 중 하나. 이 움직임을 함수화하면 아래 사진과 같다. 피그마의 프로토타입 기능은 이렇게까지 상세하진 않지만 전문적인 앱 인터랙션에 사용되는 easing값을 이해하기 위해 그래프를 알아둘 필요가 있다.

 

 

 

 

3. 새로 알게된 내용

 

- 하이파이 프로토타입 툴 ProtoPie

: 로우파이 프로토타입만 가능한 피그마에 비해 복잡한 멀티스크린 애니메이션과 인터랙션을 적용할 수 있는 Hi-fi 프로토타입 툴이다. 스마트폰이나 태블릿, 컴퓨터 뿐만아니라 TV, 키오스크, 스마트 워치 등의 디스플레이에서도 테스트할 수 있다는 장점이 있다. 피그마나 스케치, XD와 같은 디자인 툴과도 원활하게 연결되며 인터랙션 레코딩 기능을 이용해 개발이 필요한 인터랙션 사양을 개발자들과 손쉽게 공유할 수 있다.

프로토파이에서 구현 가능한 다양한 디스플레이

 

 

 

 

 

4. 아티클과 유사한 실제 사례

- 에이닷의 온보딩 화면

 

사용자가 앱을 설치한 후 가장 먼저 만나게 될 온보딩 화면을 컨텐츠의 가장 큰 특징이자 장점을 인터렉션을 통해 잘 보이도록 구성하였다. 또 사용자가 화면을 옆으로 넘기지 않아도 자동으로 스와이핑 되도록 구성하여 사용자의 흥미와 사용성 둘 다 사로잡았다.

 

 

 

+ 팀원분이 공유해주신 자료

https://www.invisionapp.com/inside-design/amazing-interaction-design/

10 Amazing Interaction Design Examples

디자인 인터랙션에 참고가 될 것 같다.