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