[제로베이스 UI/UX 파트타임 스쿨] 14주차 - (토) 스크린디자인 - 튜토리얼

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

오늘은 튜토리얼에 대한 실습을 진행하였다. 튜토리얼은 서비스에 대한 가이드를 처음에 보여주는 화면으로 회원가입 후 자동으로 실행되는 온보딩이다. 때문에 화면 안에 스마트폰 모양이 들어가고 그 안에 서비스가 어떻게 진행되는지 화면이 나타난다. 이 안에서 화면을 또 다시 보여주기 때문에 가장 확실하게 전달하고 싶은 내용들만 보여주는 것이 사용자의 이탈을 막는다.

---

오늘의 강의 내용

1. 튜토리얼

투토리얼은 화면안의 화면, 그리고 화면을 설명하는 텍스트와 그에대한 설명이 들어간다. 그리고 튜토리얼을 보고 싶지 않은 사용자가 있으므로 이를 고려하여 건너뛰기 혹은 시작하기라는 버튼이 반드시 존재해야한다. 튜토리얼이 너무 길어지면 사용자는 지루해하고 시작도 전에 지치기 때문에 핵심적인 부분만 전달하는 것이 좋다.  또한 튜토리얼이 몇 개 정도 제공되는지 바 혹은 점 형태의 진행 정도 컴포넌트가 있어야 한다. 예를 들어 튜토리얼이 4개가 있으면 점을 4개 찍고 그 중에 지금이 몇번째인지 확인할 수 있도록 점의 색을 바꿔준다든지의 UI가 필요하다.

---

Sketch에서의 실습을 계속 진행하고 있지만, 화면을 만드는 것에 대한 의미를 두기 보단, 앱에서 화면들을 어떻게 구성하고 인터렉션은 어떤 방식을 사용하는지에 대해서 주목하고 있다. 사실 앞서 배운 두가지 툴인 Figma와 XD를 다루는데에 집중하는 것이 더 필요해보이고 다음으로는 화면을 많이 보고 내 눈높이를 높이는 것이 중요할 것이다. 많은 툴을 다루는 것 보다 한 두가지의 툴을 확실하게 잘 다룰줄 알고 그 안에서 더 나은 화면을 만드는 방법에 대해서 전문성을 가지는 것이 더 좋은 방법이라고 생각한다.

 

이번 튜토리얼 화면에서는 특이하게 앱 화면이 세로로 스크롤을 통해 많은 콘텐츠를 보여주는 서비스를 보았는데, 탭이 없고 세로로만 스크롤 되는 화면이라서 신기하다고 느꼈다. 화면의 구성을 바꾸는 시도가 담긴 서비스들은 언제나 나에게 재미를 가져다주는 것 같다. 앞으로 UIUX를 계속할 때에도 화면의 구성에 대해서 깊이 고민해보고 여러가지 시도를 해보고 싶다.

 

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