아래 동영상에서 새로운 Recorder 패널 (미리보기 기능)을 둘러보세요.
이 튜토리얼을 완료하여 Recorder 패널을 사용하여 사용자 플로우를 기록, 재생, 측정하는 방법을 알아보세요.
기록된 사용자 흐름을 공유하고 해당 흐름을 수정하는 방법에 대한 자세한 내용은 Recorder 기능 참조를 확인하세요.
Recorder 패널 열기
- DevTools를 엽니다.
옵션 더보기
> 도구 더보기 > 녹음기를 클릭합니다.
또는 명령 메뉴를 사용하여 Recorder 패널을 엽니다.
소개
이 커피 주문 데모 페이지를 사용하겠습니다. 결제는 쇼핑 웹사이트에서 일반적인 사용자 플로우입니다.
다음 섹션에서는 Recorder 패널을 사용하여 다음 결제 흐름을 녹화, 재생, 감사하는 방법을 설명합니다.
- 장바구니에 커피를 추가합니다.
- 장바구니에 커피를 하나 더 추가합니다.
- 장바구니 페이지로 이동합니다.
- 장바구니에서 커피 하나를 삭제합니다.
- 결제 절차를 시작합니다.
- 결제 세부정보를 입력합니다.
- 결제를 합니다.
사용자 플로우 녹화
- 이 데모 페이지를 엽니다. Start new recording 버튼을 클릭하여 시작합니다.
- Recording name(녹음 이름) 입력란에 '커피 체크아웃'을 입력합니다.
자세한 내용은 선택기 이해를 참고하세요.
1. Start a new recording(새 녹화 시작) 버튼을 클릭합니다. 녹화가 시작됩니다. 패널에 녹화가 진행 중임을 나타내는 Recording...이 표시됩니다.
1. 카푸치노를 클릭하여 장바구니에 추가합니다.
1. Americano(아메리카노)를 클릭하여 장바구니에 추가합니다. Recorder에는 지금까지 수행한 단계가 표시됩니다.
1. 장바구니 페이지로 이동하여 장바구니에서 Americano(아메리카노)를 삭제합니다.
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 기능 참조를 확인하세요.