[제로베이스 UI/UX 파트타임 스쿨] 1주차 - (금) 버튼, 캐러셀, 모달창 인터렉션

제로베이스 5일차 학습노트이다.

 

아침에 일어나서 강의부터 듣고 시작하는 일상이 점점 익숙해져 간다! 놓치는 날이 없이 긴장을 풀지 않아야 겠다. 계속해서 프로토타입의 마이크로 인터렉션 기능들을 배우고 있다. 우리가 일상 생활에서 자연스럽게 경험했던 기능들이 이러한 작업을 통해 나왔다는 것이 새삼 신기하다. 그러면서도 이 기능들을 처음에 어떻게 생각해냈을까? 그 부분이 궁금한 것 같다. 특히 캐러셀이나 모달창과 같은 화면 인터렉션은 이미 익숙해져서 쉬워보이지만 처음 이것을 생각하고 구현했을 때는 분명 많은 고민들이 있었을 것이다. 나는 항상 이렇게 처음 어떤 것이 만들어지는 방식에 대해서 궁금한 것 같다.

 

---

오늘의 강의 내용

 

1. 버튼

버튼은 저번 강의에서도 조금 다루었지만, 이번 강의에는 조금 다른 종류의 버튼을 다뤘다. 저번에는 슬라이드 버튼이었고 이번에는 클릭하는 일반 버튼이었다. 특히 일반 버튼에 호버했을 때 어떻게 색 농도변화와 애니매이션을 통해 인터렉션 하는 부분도 넣은 것이 좋았다. 이런 식으로 인터렉션 전과 후의 두가지 상태 만 아닌 중간 상태를 만들어 주는 것이 더 만족스러운 UX라고 생각이 든다.

 

2. 캐러셀

우리가 어플을 다운로드할 때 혹은 멀티태스킹 창에서 가장 많이 보는 화면이다. 어플 내의 여러 화면들이 어떻게 구성되어 있는지 일렬로 쭉 보여주고 그것을 가로 슬라이드 해서 보여주는 기능인데, 화면 드래그 인터렉션 뿐 아니라 아래 페이지 선택 시 다음 페이지로 넘어가게 하는 것이 디테일이었다. 또한 smart animate 기능으로 애니매이션도 자연스럽게 진행되는 기능이 돋보였다.

 

3. 모달창

화면 안의 작은 창이라고 생각하면 된다. 버튼 클릭 혹은 호버했을 때 작은 창이 나타나면서 그 버튼에 대한 설명을 보여주는 기능이다. (꼭 버튼이 아니어도 된다.) 우리가 영어 기사를 읽을 때 모르는 단어를 선택 후 번역 창을 조그맣게 띄어놓는 그러한 기능이라고 생각하면 쉬울 것 같다. 역시 이 모달창이 떴을 때 닫는 버튼이 생겨야 한다는 점, 주변 부가 어두워져야 그 창에 집중이 된다는 점들이 더 나은 UX라는 생각이 들었다.

---

지금 까지 배우는 기능들을 실제 적용하는 예시들을 생각해보는 것도 재미있다. 이러한 예시들의 디테일을 찾아내고 그 디테일들이 또 어떤 새로운 인터렉션에서 적용 가능한지 생각해보는 시간을 많이 가지면 좋을 것 같다.

 

이 글은 제로베이스 UI/UX 파트타임 강의 자료 일부를 발최하여 작성되었습니다.