토스를 통해 알아보는 ux/ui 원리 💸🙌

토스는 어딘가 다르다 .. 왜지 ?

- 계속 찾아오게 되는 ux / ui

• 직관적인 단어 사용

• 친근한 어투 + 이름 불러줌

  : ㅇㅇ님을 위해 준비했어요 (이벤트 광고임), ㅇㅇ님을 위한 서비스 (서비스 랭킹, 이것도 사실상 광고임) → 그렇지만 ..~~ 소속감을 주고 앱에 대한 좋은 경험을 주는 말투임
  

• 로딩, 페이지 전환 시 애니메이션 사용 및 멘트 : 기다리는 동안 지루하지 않음 (도허티 임계값)

- 토스의 이벤트는 왜 참여하게 될까 ? ( UX )

1. 클릭하기 좋은 하단의 위치에 이벤트가 있음

2. 제일 처음 눈길이 가는 상단에 이벤트 배너가 있음 , 배너의 아이콘이 움직임 (클릭 유도)

   : 이렇게 혹해서 들어가면 …. 머무는 시간에 따라 포인트를 지급하는 이벤트가 있는데 이러면 처음에 토스 앱에 들어왔던 목적은 까먹고 계속 머무르게 된다 .. . … 시선이 가는 위치에 시간이 뜸

3. 공유하는 미션, 이벤트 : 한 번씩 토스 이벤트 링크 친구한테 받아본 적 있을 것이다….ㅇ.. !

4. 친근한 대화체
   

---

토스의 ui 에 대해 알아보자

색상 간소화

• 파랑 한가지의 포인트 컬러
  ( 여기어때는 빨강/파랑, 당근은 초록/주황의 포인트가 있었는데 여기는 파랑뿐이다 )

  → 그럼에도 눈이 지루하지 않은 이유는 3D 아이콘의 색이 다양해서인듯 하다 😺👍
  

• 아주 가끔 다른 색을 쓰기도 하는데 .. (대부분 광고를 위함, 또는 업데이트 알림 )

  : 이게 오히려 시선을 끄는 효과가 있다❗ ( 폰 레스토프 효과 )
  

깔끔하고 간결한 디자인

• 기존 은행 앱과 유사한 UI : 제이콥의 법칙
• 시각적 명확성 : 직관적인 아이콘 디자인

• 메인화면의 적은 카테고리
  : 하단 네비게이션 바를 통해 페이지 안에 탭,
  탭 안에 페이지 연결 등으로 연결되도록 하여 복잡하고 넓은 구조를 깔끔하게 정리해뒀다
  .
  .
  .
  (사실상 따로 햄버거 버튼을 안 열어도 웬만한 기능은 하단 네비게이션 바의 네 개의 아이콘을 통해 들어갈 수 있을 것 같다)

• 시각적 계층 구조

  : 컨테이너의 배경색을 다르게 하고 여백을 두어 각 요소를 구분하여 가독성을 높였다
  

• [모든 서비스]의 텍스트 정렬
  

: 제목 - 설명을 space between 느낌으로 정렬한 게 좋다. 눈에 더 잘 들어오는 듯 🥰!!

• 우선순위 강조 : 중요한 작업은 시각적으로 강조하여 사용자에게 우선순위 인식 유도

---

🤗 이건 어떨까 ?

• 가독성 개선
  

- 첫 화면에 볼드 사용 줄이기 ( -> 폰트 크기 변화로 대체 )
- 쉬운 홈 기능 추가하기 ( 우리 은행 앱 참고..😺 )
: 이벤트 내용 숨기고 은행 기능만 바로 사용할 수 있게 하면 어떨지 ~

• 첫 화면 : 우선순위에 맞게 위치 변경
  • 송금은 중요한 업무니까 → 파란색
    결제도 자주 사용하니까 → 바디 부분으로 위치 변경하는것두 좋을듯