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

 

아티클 1편 :

https://toss.tech/article/tds-component-making

이런 것도 컴포넌트로 만들어도 될까?

아티클 2편 :

https://toss.tech/article/toss-design-system

토스 디자이너가 제품에만 집중할 수 있는 방법

 

 

 

---

 

1. 아티클 첫 인상과 후기

 

- 사소하고 작은 기능이라 컴포넌트로 만들기 애매하다고 생각되는 기능을 컴포넌트로 만들어도 되는지에 대한 설명이 나올 것 같다.

→ 사소하고 작은 기능이라기 보단 기존에 사용하던 컴포넌트 대신 디자인 시스템에 새롭게 추가될 컴포넌트를 사용해도 될지, 또 그에 대한 사람들의 반응은 어떤지에 대한 내용이었다.

 

- 토스에서 사용되는 컴포넌트 종류에 대한 이야기일 것 같다.

→ 사용되고 있는 컴포넌트에 대한 이야기는 맞으나 사용성 면에서 좋지 않은 컴포넌트라는 판단 후 교체되는 과정에 대한 아티클이다.

 

 

 

2. 강의 학습 내용 복습

 

- 피츠의 법칙 : 물리적 거리 사용성에 대한 내용에서 피츠의 법칙에 대한 내용을 떠올렸다. 시선이 디바이스 최상단에서 최하단으로 내려가야하는 것도 문제이지만, 시선뿐만아니라 손가락 제스쳐도 함께 내려가야 하기 때문에 사용자가 피로감을 느낄 수 있고 그로 인해 이탈율이 높아질 수 있다.

 

- A/B 테스트 : 두 가지 이상의 버전을 각각 다른 사용자에게 보여주고 성과를 측정하는 실험으로 사용자가 어떻게 반응하고 행동하는지 정보를 얻을 수 있다. 이 아티클에서 A/B테스트를 진행했을 때 바뀐 컴포넌트를 사용하는 사용자가 기존 사용자에 비해 클릭율이 높았기 때문에 메뉴 컴포넌트를 시스템화할 수 있었다.

 

 

 

3. 새롭게 알게된 내용

 

- 보이스오버 기능은 사용자가 화면을 볼 수 없는 경우에도 아이폰을 사용할 수 있도록 도와주는 제스쳐 기반 화면 읽기 도구이다. 보이스 오버 기능의 존재여부는 알고 있었지만 사용해 본적은 없어서 어떻게 사용하는지, 또 UX에 적용하려면 어떻게 해야하는지 찾아봤다. 아티클에서 개발한 UX 가이드라인 5가지 규칙은 이러하다.

1. 메뉴가 열리고 탐색을 시작할 때 메뉴의 바깥은 탐색되지 않아야 한다.
2. 별도의 닫기 버튼이 있거나 투명한 닫기 버튼을 마지막 요소로 바깥에 만들어 닫을 수 있도록 한다.
3. 메뉴를 열면 접근성 초점이 선택된 항목이나 첫 항목으로 맞춰져 있어야 한다.
4. 선택된 항목은 접근성 초점을 보냈을 때 선택된 정보를 읽어야 한다.
5. 선택을 완료하는 등 메뉴가 닫힐 때 접근성 초점을 메뉴를 열었던 버튼으로 보내야 한다.