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