아래 동영상에서 새로운 Recorder 패널 (미리보기 기능)을 둘러보세요.
이 튜토리얼을 완료하여 Recorder 패널을 사용하여 사용자 플로우를 기록, 재생, 측정하는 방법을 알아보세요.
기록된 사용자 흐름을 공유하고 해당 흐름을 수정하는 방법에 대한 자세한 내용은 Recorder 기능 참조를 확인하세요.
Recorder 패널 열기
- DevTools를 엽니다.
옵션 더보기 > 도구 더보기 > 녹음기를 클릭합니다.
또는 명령 메뉴를 사용하여 Recorder 패널을 엽니다.
소개
이 커피 주문 데모 페이지를 사용하겠습니다. 결제는 쇼핑 웹사이트에서 일반적인 사용자 플로우입니다.
다음 섹션에서는 Recorder 패널을 사용하여 다음 결제 흐름을 녹화, 재생, 감사하는 방법을 설명합니다.
- 장바구니에 커피를 추가합니다.
- 장바구니에 커피를 하나 더 추가합니다.
- 장바구니 페이지로 이동합니다.
- 장바구니에서 커피 하나를 삭제합니다.
- 결제 절차를 시작합니다.
- 결제 세부정보를 입력합니다.
- 결제를 합니다.
사용자 플로우 녹화
- 이 데모 페이지를 엽니다. Start new recording 버튼을 클릭하여 시작합니다.
- Recording name(녹음 이름) 입력란에 '커피 체크아웃'을 입력합니다.
- Start a new recording(새 녹화 시작) 버튼을 클릭합니다. 녹화가 시작됩니다. 패널에 녹화가 진행 중임을 나타내는 Recording...이 표시됩니다.
- 카푸치노를 클릭하여 장바구니에 추가합니다.
- Americano(아메리카노)를 클릭하여 장바구니에 추가합니다. Recorder에는 지금까지 수행한 단계가 표시됩니다.
- 장바구니 페이지로 이동하여 장바구니에서 Americano(아메리카노)를 삭제합니다.
그러나 녹음기는 마우스 오버 이벤트를 자동으로 캡처하지 않으므로 녹화를 완료한 후에는 마우스 오버 단계를 수동으로 추가해야 합니다. 1. Total: $19.00(합계: $19.00) 버튼을 클릭하여 결제 절차를 시작합니다. 1. 결제 세부정보 양식에서 이름 및 이메일 입력란을 작성하고 주문 업데이트 및 프로모션 메시지를 수신하겠습니다 체크박스를 선택합니다. 1. 제출 버튼을 클릭하여 결제 절차를 완료합니다.
1. Recorder 패널에서 End recording 버튼을 클릭하여 녹화를 종료합니다.사용자 플로우 재생
사용자 플로우를 녹화한 후 Replay(재생) 버튼을 클릭하여 재생할 수 있습니다.
페이지에서 사용자 플로우가 재생됩니다. 재생 진행률은 Recorder 패널에도 표시됩니다.
녹화 중에 잘못 클릭했거나 작동하지 않는 경우 사용자 흐름을 디버그할 수 있습니다. 재생 속도를 늦추고 중단점을 설정한 후 단계별로 실행합니다.
느린 네트워크 시뮬레이션
Replay settings(재생 설정)를 구성하여 느린 네트워크 연결을 시뮬레이션할 수 있습니다. 예를 들어 재생 설정을 펼치고 네트워크 드롭다운에서 느린 3G를 선택합니다.
향후 더 많은 설정이 지원될 수 있습니다. 원하는 재생 설정을 알려 주세요.
사용자 플로우 측정
Measure performance(성능 측정) 버튼을 클릭하여 사용자 플로우의 성능을 측정할 수 있습니다. 예를 들어 결제는 쇼핑 웹사이트에서 중요한 사용자 플로우입니다. Recorder 패널을 사용하면 결제 흐름을 한 번 기록하고 정기적으로 측정할 수 있습니다.
Measure performance(성능 측정) 버튼을 클릭하면 먼저 사용자 플로우 재생이 트리거된 다음 Performance(성능) 패널에서 성능 트레이스가 열립니다.
Performance(성능) 패널을 사용하여 페이지의 런타임 성능을 분석하는 방법을 알아보세요. 성능 패널에서 웹 바이탈 체크박스를 사용 설정하여 웹 바이탈 측정항목을 확인하고 사용자 탐색 환경을 개선할 기회를 파악할 수 있습니다.
단계 수정
기록된 워크플로 내에서 단계를 수정하기 위한 기본 옵션을 살펴보겠습니다.
수정 옵션의 전체 목록은 기능 참조의 수정 단계를 참고하세요.
단계 펼치기
각 단계를 펼쳐 작업의 세부정보를 확인하세요. 예를 들어 Click Element "Cappuccino" 단계를 펼칩니다.
위 단계에서는 두 가지 선택기를 보여줍니다. 자세한 내용은 녹음 선택기 이해하기를 참고하세요.
사용자 플로우를 재생할 때 Recorder는 선택기 중 하나를 사용하여 순서대로 요소를 쿼리합니다. 예를 들어 Recorder가 첫 번째 선택기로 요소를 성공적으로 쿼리하면 두 번째 선택기를 건너뛰고 다음 단계로 진행합니다.
단계에서 선택기 추가 및 삭제
선택기를 추가하거나 삭제할 수 있습니다. 예를 들어 이 경우에는 aria/Cappuccino
만으로 충분하기 때문에 selector #2를 삭제해도 됩니다. 선택기 #2 위로 마우스를 가져간 다음 -
를 클릭하여 삭제합니다.
단계에서 선택기 수정
선택기도 수정할 수 있습니다. 예를 들어 카푸치노 대신 모카를 선택하려면 다음과 같이 하세요.
대신 선택기 값을 aria/Mocha로 수정합니다.
또는 Select(선택) 버튼을 클릭한 후 페이지에서 Mocha를 클릭합니다.
이제 흐름을 재생하면 Cappuccino 대신 Mocha가 선택됩니다.
type, target, value 등과 같은 다른 단계 속성을 수정해 봅니다.
단계 추가 및 삭제
단계를 추가하거나 삭제하는 옵션도 있습니다. 단계를 추가하거나 실수로 추가한 단계를 삭제하고자 할 때 유용합니다. 사용자 플로우를 다시 녹화하는 대신에 다음과 같이 편집하기만 하면 됩니다.
수정할 단계를 마우스 오른쪽 버튼으로 클릭하거나 옆에 있는 점 3개로 된 아이콘을 클릭합니다.
단계 삭제를 선택하여 삭제할 수 있습니다. 예를 들어 Mocha 단계 이후의 Scroll 이벤트가 필요하지 않습니다.
페이지에 커피 9잔이 표시될 때까지 기다린 후 단계를 수행하려 한다고 가정해 보겠습니다. Mocha 단계 메뉴에서 Add step before(앞에 단계 추가)를 선택합니다.
Assert Element에서 다음 세부정보로 새 단계를 수정합니다.
- 유형: waitForElement
- 선택기 #1: .cup
- 연산자: == (연산자 추가 버튼 클릭)
- count: 9 (add count 버튼 클릭)
이제 흐름을 다시 재생하여 변경사항을 확인합니다.
다음 단계
축하합니다. 튜토리얼을 완료했습니다.
Recorder와 관련된 더 많은 기능 및 워크플로 (예: 가져오기 및 내보내기)는 Recorder 기능 참조를 확인하세요.