[UXUI 내일배움캠프] TIL #16

 

💭 2024. 3. 12 오늘의 일기

 

 

오늘 한 일

- 3강 수강

- 디자인 아티클 분석

- 디자인 스터디

- 개인 면담

- 특강

 

 

 

---

 

 

피그마 활용 강의를 모두 들었다.

아직 마지막 주차 숙제를 하지 않아서 완강이라고 할 수는 없지만... 내일이면 전부 마무리될 것 같다.

그리고 저번주에 진행한 2차 개인과제(11번가) 개인 피드백을 받았다!

 

너무나도 부족한 실력과 퀄리티인데도 좋게 피드백해주셔서 다행이다.

조금 뜨끔했던 부분은 보완하면 좋을점... 사실 귀찮아서 전체 화면까지 도출해야할까?라는 생각이 있었다.

강의를 전부 들으면 나머지 수,목,금요일 정도는 여유가 있을 것 같아

그 때 과제도 조금 손보고 복습도 하고 해야할 듯하다.

 

 

 

디자인 아티클 스터디

 

어제와 같이 오늘도 토스 테크 스터디를 진행했다. 오늘 스터디에서 진행한 아티클은 인터랙션과 관련된 내용이다.

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

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

 

 

 

 

 

---

 

 

 

오늘은 날씨가 안좋아서인지 힘이 없다.

힘내서 내일도 달려야지.