사용 시나리오 및 설명

1. 홈화면 (화면 비율 100%)

• 홈 화면에서 스크롤 했을 때 나타나는 화면

  • vercel이 커버 가능한 분야들을 설명하고 있습니다.
  • 깃 또는 CLI에서 배포할 수 있는 점을 포함한 장점을 설명하고 있습니다.

  

• footer에 도달하기 전 배포 템플릿을 선택할 수 있도록 하여 바로 서비스를 이용할 수 있습니다.

  

• footer입니다.

  • 좌측 삼각형 버튼을 이용해 페이지 최상단으로 이동합니다.
  • vercel의 깃헙과 X 링크를 아이콘으로 두었습니다.
  • 최초 홈 화면에서 보았던 네비게이션의 메뉴들이 센터를 차지하고 있습니다.
  • 우측 아이콘들을 이용해 테마를 변경할 수 있습니다. (시스템, 라이트, 다크)

  <aside> ✅ 각 요소들에 호버링 할 때 툴팁이 보입니다.

  </aside>

  

2. 회원가입 화면

• 홈 화면 우측 sign up 버튼을 통해 회원가입 화면으로 넘어갑니다.

• 개인적인 계정(Hobby)인지, 상업적인 계정(Pro)인지 구분합니다.

  • Hobby 또는 Pro 선택 시 각각 가입자의 이름 또는 팀 이름을 기입하도록 되어 있습니다.
    • 이때, 영어로만 입력이 받아집니다.

• vercel과 연동 가능한 서비스의 계정으로 회원가입이 가능합니다.
  • Continue with Email로 가입 시 인증 번호를 받는 형식인 듯합니다.

• 세 개 버튼 중 하나를 누르면 연동을 위한 팝업창이 뜹니다.
  • 이메일로 진행할 경우 따로 팝업창은 뜨지 않았습니다.
• permission을 받기 전까지 버튼들은 비활성화 상태를 보이며, 로딩 중 아이콘이 표시됩니다.
  • 이 상태에서 해당 버튼들에 호버링 했을 때, 커서가 not-allowed 상태로 바뀝니다.

• 위 팝업창에서 스크롤을 하고 Authorize Vercel이라는 버튼을 누르면 리다이렉팅 되면서 아래 화면이 뜨며, 회원가입을 마치게 됩니다.