Chrome DevTools로 사용자 플로우 녹화, 재생, 측정

1. 소개

Recorder 패널을 사용하여 사용자 플로우를 녹화, 재생, 측정합니다.

아래 동영상에서 새로운 Recorder 패널(기능 미리보기)을 살펴보세요.

학습할 내용

  • 사용자 플로우 녹화
  • 사용자 플로우 재생
  • 사용자 플로우 수정
  • 사용자 플로우 측정

필요한 항목

  • 작동하는 컴퓨터와 안정적인 Wi-Fi
  • Chrome 101 이상

2. Recorder 패널 열기

다음 단계에 따라 Recorder 패널을 엽니다.

  1. DevTools를 엽니다.
  2. 옵션 더보기 > 도구 더보기 > Recorder를 클릭합니다. 메뉴의 Recorder 또는 명령어 메뉴를 사용하여 Recorder 패널을 엽니다. 명령어 메뉴의 Show Recorder 명령어

3. 시작

커피 주문을 위한 데모 페이지를 사용하겠습니다. 결제는 쇼핑 웹사이트에서 공통적인 사용자 플로우입니다.

다음 섹션에서 Recorder 패널을 사용해 아래의 결제 흐름을 녹화, 재생, 측정하는 방법을 안내합니다.

  1. 장바구니에 커피를 추가합니다.
  2. 장바구니에 커피를 하나 더 추가합니다.
  3. 장바구니 페이지로 이동합니다.
  4. 장바구니에서 커피를 하나 삭제합니다.
  5. 결제 절차를 시작합니다.
  6. 결제 세부정보를 입력합니다.
  7. 결제합니다.

4. 사용자 플로우 녹화

  1. 데모 페이지를 엽니다. 시작하려면 Start new recording(새 녹화 시작) 버튼을 클릭합니다.
  2. Recording name(녹화 항목 이름) 입력란에 '커피 결제'를 입력합니다. 새 녹화 시작
  3. Start a new recording(새 녹화 시작) 버튼을 클릭합니다. 녹화가 시작됩니다. 패널에 녹화 중임을 나타내는 Recording...(녹화 중)이 표시됩니다. 녹화 중
  4. Cappuccino(카푸치노)를 클릭하여 장바구니에 추가합니다.
  5. Americano(아메리카노)를 클릭하여 장바구니에 추가합니다. Recorder에는 지금까지 실행한 단계가 표시됩니다. Recorder 패널의 단계
  6. 장바구니 페이지로 이동합니다.
  7. 장바구니에서 Americano(아메리카노)를 삭제합니다.
  8. Total: $19.00(합계: 19달러) 버튼을 클릭하여 결제 절차를 시작합니다.
  9. 결제 세부정보 양식에서 Name(이름) 및 Email(이메일) 입력란을 작성하고 I would like to receive order updates and promotional messages(주문 업데이트 및 프로모션 메시지를 수신하겠습니다) 체크박스를 선택합니다. 결제 세부정보 양식
  10. Submit(제출) 버튼을 클릭하여 결제 절차를 완료합니다.
  11. Recorder 패널에서 End recording(녹화 종료) 버튼을 클릭하여 녹화를 종료합니다.

5. 사용자 플로우 재생

사용자 플로우를 녹화한 후 Replay(재생) 버튼을 클릭하여 재생할 수 있습니다.

페이지에서 사용자 플로우가 재생됩니다. Recorder 패널에 재생 진행 단계도 표시됩니다.

Replay settings(재생 설정)를 구성하여 네트워크 연결이 느린 경우를 시뮬레이션할 수 있습니다. 예를 들어 Replay settings(재생 설정)를 펼치고 Network(네트워크) 드롭다운에서 Slow 3G(느린 3G)를 선택합니다. 재생 설정

각 단계의 시간 제한을 더 길게 설정할 수도 있습니다.

앞으로 더 많은 설정이 지원될 수 있습니다. 원하는 재생 설정을 알려 주세요.

6. 사용자 플로우 측정

Measure performance(성능 측정) 버튼을 클릭하여 사용자 플로우의 성능을 측정할 수 있습니다. 예를 들어 결제는 쇼핑 웹사이트에서 중요한 사용자 플로우입니다. Recorder 패널을 사용하여 결제 흐름을 한 번 녹화한 후 정기적으로 측정할 수 있습니다.

Measure performance(성능 측정) 버튼을 클릭하면 먼저 사용자 플로우 재생이 트리거되고 Performance(성능) 패널에서 성능 트레이스가 열립니다.

Performance(성능) 패널을 사용하여 페이지의 런타임 성능을 분석하는 방법을 알아보세요. Performance(성능) 패널에서 Web Vitals(웹 바이탈) 체크박스를 사용 설정하여 Web Vitals(웹 바이탈) 측정항목을 확인하고 사용자 탐색 환경을 개선할 기회를 파악할 수 있습니다.

Performance(성능) 패널

7. 사용자 플로우 수정

사용자 플로우 수정 옵션을 살펴보겠습니다.

DevTools의 Recorder 패널 헤더에 있는 드롭다운 메뉴를 사용하여 수정할 사용자 플로우를 선택할 수 있음

Recorder 패널 상단에는 다음 작업을 위한 옵션이 있습니다.

  1. 새 녹화 추가: + 아이콘을 클릭하여 새 녹화를 추가합니다.
  2. 모든 녹화 항목 보기: 드롭다운에 저장된 녹화 목록이 표시됩니다. [number] recording(s)(녹화 [번호]) 옵션을 선택하여 저장된 녹화 목록을 펼치고 관리합니다. 모든 녹화 항목 보기
  3. 녹화 항목 내보내기: 사용자 플로우를 Puppeteer 스크립트로 내보내 스크립트를 추가로 맞춤설정할 수 있습니다.
  4. 녹화 항목 삭제: 선택한 녹화 항목을 삭제합니다.

옆에 있는 수정 버튼을 클릭하여 녹화 항목의 이름을 수정할 수도 있습니다.

8. 단계 수정

워크플로 내에서 단계를 수정하는 옵션을 살펴보겠습니다.

단계 펼치기

  1. 각 단계를 펼쳐서 작업 세부정보를 확인합니다. 예를 들어 Click Element "Cappuccino" 단계를 펼칩니다. Recorder 패널에서 Cappuccino 요소를 펼치면 type, target, selectors, offsetX, offsetY가 표시됨
  2. 위 단계에서는 두 가지 선택기가 표시됩니다. 자세한 내용은 선택기 우선순위를 참고하세요. 사용자 플로우를 재생할 때 Recorder는 선택기 중 하나를 사용하여 시퀀스에 따라 요소 쿼리를 시도합니다. 예를 들어 Recorder가 첫 번째 선택기로 요소를 성공적으로 쿼리하면 두 번째 선택기를 건너뛰고 다음 단계로 진행합니다.
  3. 선택기를 추가하거나 삭제할 수 있습니다. 예를 들어 여기서는 aria/Cappuccino로 충분하기 때문에 selector #2를 삭제해도 됩니다. 마우스를 selector #2로 가져가서 -를 클릭하면 삭제됩니다. DevTools의 Recorder 패널에 선택기 삭제 옵션이 표시됨
  4. 선택기도 수정할 수 있습니다. 예를 들어 Cappuccino 대신 Mocha를 선택하려면 선택기 값을 대신 aria/Mocha로 수정하면 됩니다. 선택기 수정 또는 Select(선택) 버튼을 클릭하고 페이지에서 Mocha를 클릭합니다.
  5. 이제 플로우를 재생합니다. Cappuccino 대신 Mocha가 선택됩니다.
  6. type, target, value 등 다른 단계 속성을 수정해 봅니다.

단계 추가 및 삭제

단계를 추가하거나 삭제하는 옵션도 있습니다. 단계를 추가하거나 실수로 추가한 단계를 삭제하고자 할 때 유용합니다. 사용자 플로우를 다시 녹화하는 대신 단계를 수정하기만 하면 됩니다. 단계 옆에 있는 점 3개 케밥 메뉴를 클릭하여 메뉴를 엽니다.

DevTools에 표시된 커피 장바구니 UI, 스크롤 이벤트 메뉴가 확장되어 Add step before(이전 단계 추가), Add step after(이후 단계 추가), Remove step(단계 삭제)이라는 세 가지 옵션이 표시됨

  1. 예를 들어 Mocha 단계 이후의 Scroll 이벤트가 필요하지 않습니다. Remove step(단계 삭제)을 선택하여 삭제할 수 있습니다.
  2. 단계를 실행하기 전에 페이지에서 커피 9잔이 표시될 때까지 대기하고자 한다고 가정해 보겠습니다.
  3. Mocha 단계 메뉴에서 Add step before(이전 단계 추가)를 선택합니다. Assert Element라는 새로운 단계가 추가되어 이제 수정할 수 있음
  4. Assert Element에서 다음 세부정보로 새 단계를 수정합니다.
    • type: waitForElement
    • selector #1: .cup
    • operator: ==(Add operator(연산자 추가) 버튼 클릭)
    • count: 9(Add count(개수 추가) 버튼 클릭) 새로운 커피 결제 단계가 앞서 언급한 세부정보로 업데이트됨
  5. 이제 플로우를 재생하면 변경된 사항이 표시됩니다.

9. 수고하셨습니다

수고하셨습니다. 이 Codelab을 완료했습니다.

추가로 알려드리자면 녹화 선택기는 맞춤설정도 가능합니다. 자세한 내용은 Google 개발자 문서를 참고하세요.

이 Codelab은 어땠나요?

별로였습니다. 좋았습니다.