영상
영상스크립트
좋아요, 바로 시작해서 이 페이지를 완료해 봅시다. 가입 버튼에서, 워크플로를 다시 편집하면 이메일 확인을 위해 이메일을 보내야 하는 옵션으로 돌아올 것이라고 했습니다. 이것은 Bubble이 우리를 위해 처리하는 것입니다. 백그라운드에서 일어나는 일은 자동화된 이메일이 링크와 함께 전송되는 것입니다. 그 후 사용자는 그 링크를 클릭하고 특정 페이지로 이동하게 됩니다. 이 단계에 서 Bubble은 이 사람이 실제 사람일 가능성이 크다고 판단합니다. 왜냐하면 그 이메일이 사용자의 메일함에 도착했고 그 특정 링크를 클릭했기 때문입니다. 이해되셨죠?
그래서 이 박스를 체크할 건데, 페이지가 필요합니다. 그래서 새 페이지를 만들 겁니다. 이 페이지는 이메일 확인이라고 불릴 것입니다. 이를 생성하고, 선택합시다. 이제 이 페이지를 디자인하거나 추가로 작업하지 않을 겁니다. 우리가 실제로 사용자 등록을 할 때 다시 돌아오겠습니다.
다음으로 하고 싶은 것은 반응형 디자인입니다. 그러니 반응형 탭으로 넘어갑시다. 매우 간단할 겁니다. 반응형 탭에서, 1,200 브레이크포인트를 클릭해 주세요. 그런 후 이 그룹 컬럼을 더블 클릭합니다. 레이아웃 탭에서, 숨길 때 축소를 먼저 선택해주세요. 특정 폭에서 이것을 숨길 것입니다. 조건들을 설정하여 이 컬럼을 숨기는 조건을 만들겠습니다. 조건 탭에서, 다른 조건을 정의할 것입니다. 1번 섹션에서처럼 페이지 폭 조건을 사용합니다. ‘page’를 입력하여 현재 페이지 폭, 작음 기호를 불러오고, 768을 선택합니다. 주어진 옵션을 선택한 후, 드롭다운에서 768 이하일 때 이 컬럼을 숨기도록 선택하겠습니다. 그러면 Flexbox가 이 특정 컬럼에서 발생해야 할 일을 정리할 것입니다. 모바일 폰에서는 전체 폭으로 확장되어 중앙에 잘 위치할 겁니다.
좋아요, 이제 이 브레이크포인트들을 클릭하겠습니다. 같이 봅시다. 우리가 쉽게 고칠 수 있는 작은 문제가 있을 것입니다. 만약 992를 클릭하고 여러분도 그렇게 한다면, 디자인이 여전히 훌륭해 보입니다. 렌더링이 잘 되고, 패딩이 전혀 설정되지 않았지만 여기 약간의 패딩이 있습니다. 하지만 이제 768을 선택한다면, 여기서 문제가 발생하고 있습니다. 이 그룹 컨테이너에 좌우 패딩을 제공해야 합니다. 그룹 컨테이너를 더블 클릭하여 속성 편집기를 불러옵니다. 그리고 레이아웃 탭에서, 맨 아래로 스크롤하여 좌우 패딩을 16과 16으로 설정합시다. 왜 16과 16일까요? 모바일 폰 폭으로 내려왔고 더 많은 공간이 필요하기 때문입니다. 좌우에 많은 패딩을 남기고 싶지 않습니다. 그리고 이제 핸들을 조금 아래로 내리면 375까지 어떻게 되는지 볼 수 있습니다. 깔끔하고 가장자리까지, 사용하기 쉽습니다.
자, 여러분, 짧은 수업이었습니다. 가입 페이지는 이제 완료되었습니다. 일단 완료되었습니다. 가입 워크플로에 대해 계속 작업해야 합니다. 하지만 그 전에 로그인 페이지를 설정하고 싶습니다. 디자인 관점에서는 거의 완료되었습니다. 한두 가지 변경해야 할 부분이 있고, 비밀번호 재설정 팝업도 추가해야 합니다. 그런 다음 다시 논리로 들어가 사용자를 등록하고 계속 구축하겠습니다. 다음 수업에서 뵙겠습니다.