[ 항해99 실전프로젝트 ] 프로젝트 튜토리얼 만들기

실제 웹을 다른 사람이 사용해보니, 어떠한 기능들이 있는 지 몰라 그냥 넘어가는 경우가 대다수 였다.

실제로 힘들게 구현을 해놓고는 기능을 사용하지 않는 모습을 보니, 너무 마음이 아팠다.

그래서, 첫 회원가입 후 로그인 시 사용방법을 알려주는 모달을 만들기로 하였다.

 

 

 

튜토리얼 예시

위와 같은 튜토리얼을 만들어보고 싶었다. 순서대로 각 기능들을 설명해주는 말풍선이 생기고, 배경을 클릭하면 다음 말풍선이 뜨는 방식이다. 어떻게 구현할 지 생각해보았다.

 

 

 

 

 

생각생각

• z-index를 활용하여, 하나씩 벗겨내는 형식으로 구현해보자.
• 조건문은 어떻게 짜야되지?

 

 

 

 

생각보다 그냥 간단한 로직이라서, 바로 결과물로 보여주자.

 

 

튜토리얼 결과물

 

튜토리얼 완료 시, 보상과 좀 더 다양하게 설명 말풍선을 꾸며볼 필요가 있는 것 같다.

 

 

 

 

 

기존 회원가입 시, 디폴트값으로 tutorial이 false값으로 유저DB에 저장이 되어,
첫 회원가입 후 로그인 시 튜토리얼이 진행되게끔 구현하였다.

 

 

 

 

 

 

튜토리얼이 들어가니 이제야 실전프로젝트라는 느낌이 오는 것 같기도??