이미지 및 사진 · 브라우저 이미지 및 그림 편집기
개발자가 조치를 취할 수 있도록 버그 신고 스크린샷에 주석을 추가하는 방법
· 그것이 중요한 이유
이미지 편집 캔버스 브라우저 처리 중
명확한 상자, 하나의 화살표 및 짧은 캡션이 포함된 스크린샷은 일련의 질문을 저장합니다. 베어 스크린샷이 그들을 초대합니다. 이 게시물에서는 작은 주석 규칙을 설정하고 이를 브라우저 편집기에 적용하는 방법을 보여줍니다.
세 가지 명확한 질문을 생성한 스크린샷 — '첨부된 내용 참조'가 버그 보고서가 아닌 이유
유용한 버그 스크린샷은 독자가 질문하기 전에 첫 번째 질문에 답합니다. '첨부 참조'라는 라벨이 붙은 베어 캡처를 통해 개발자는 결함, 영향을 받은 컨트롤 및 예상 결과를 검색할 수 있습니다. 편집자의 작은 시각적 어휘는 이러한 모호성을 줄이는 데 충분합니다. 관련 영역을 자르고, 문제 주위에 직사각형을 그리고, 주의를 집중시키기 위해 선을 사용하고, 간결한 캡션을 추가합니다.
이미지를 전체 보고서가 아닌 증거로 취급하십시오. 텍스트는 즉시 픽셀이 되므로 내보내기 전에 캡션을 작성하고 스캔할 수 있을 만큼 짧게 유지하세요. 캡처된 프레임이 표시되지 않는 상호 작용이나 상태를 설명할 수 있는 표시가 없기 때문에 재현 단계, 로그 및 예상 동작은 여전히 이미지 옆에 속합니다.
이미지당 하나의 문제 — 관련 영역으로 잘라내어 독자가 결함을 가장 먼저 보게 됩니다.
이미지당 하나의 문제는 독자에게 깔끔한 시각적 목표를 제공합니다. 필요한 컨텍스트를 설정하지 않는 한 관련 없는 패널, 브라우저 크롬 및 인접 컨트롤을 잘라냅니다. 촘촘하게 자르면 결함이 가장 먼저 눈에 띄게 되고, 약간 더 넓은 프레임을 사용하면 깨진 컨트롤과 주변 레이아웃 간의 관계를 보존할 수 있습니다.
보고서에서 문제를 재현하는 데 필요한 단서를 실수로 제거하지 않도록 내보내기 전에 자르기를 원본과 비교하십시오. 고대비 표시는 밝은 인터페이스 영역과 어두운 인터페이스 영역 모두에서 눈에 띄어야 하며 스크린샷은 단계, 로그 및 예상 동작을 대체하기보다는 보완해야 합니다.
의미가 있는 모양: 상자, 화살표, 캡션 — 각 표시의 내용과 사용 시기에 대한 최소한의 규칙
각 마크는 하나의 작업을 수행해야 합니다. 직사각형은 영향을 받은 컨트롤이나 영역을 분리하고, 선은 간격이나 정렬이 잘못된 곳을 가리키며, 캡션은 예상과 실제 차이를 설명합니다. 이 편집기는 직사각형, 선 및 텍스트 표시를 제공합니다. 화살표 기본 요소가 없으므로 일반 선을 모호하게 읽을 수 있는 경우 캡션에 방향을 설명합니다.
독자가 장식 선택을 해독할 필요가 없도록 팀 전체에서 규칙을 안정적으로 유지하십시오. 텍스트는 배치 시 이미지로 래스터화되며 별도의 개체로 다시 편집할 수 없으므로 내보내기 전에 문구와 위치를 확인할 필요가 있습니다. 이미지는 보고서의 행동 세부정보를 대체하는 것이 아니라 뒷받침하는 증거로 남아 있습니다.
의미가 있는 모양: 직사각형, 선 및 캡션; 이 편집기에는 화살표 도구가 없습니다
색상과 무게는 장식이 아닌 커뮤니케이션 선택입니다. 얇은 빨간색 선은 어두운 인터페이스에서 사라지거나 이미지가 축소된 후 읽기 어려워질 수 있습니다. 명확한 대비가 있는 색상을 선택하고, 내보낼 수 있을 만큼 직사각형에 충분한 너비를 제공하고, 식별하려는 UI 세부 사항 바로 위에 선을 배치하지 마십시오.
개발자가 이슈 트래커에서 실제로 보는 크기로 완성된 이미지를 확인하세요. 대비는 밝은 영역과 어두운 영역 모두에서 유지되어야 하며 캡션은 결함을 덮지 않고도 읽을 수 있어야 합니다. 지원 보고서에는 여전히 재현 단계와 로그가 필요합니다. 시각적 강조는 증거를 지적할 수 있지만 누락된 행동을 제공할 수는 없습니다.
예상 대 실제 — 이미지 자체에 무슨 일이 일어났어야 하는지 설명하는 짧은 캡션 추가
예상 대 실제 표현은 강조된 결함을 소액 청구로 전환합니다. "예상: 버튼이 입력에 맞춰 정렬됨, 실제: 버튼이 12 px 낮게 위치함"은 컬러 상자만 보는 것보다 독자에게 더 많은 방향을 제공합니다. 내보낸 이미지는 추측성 진단 단락이 되기보다는 눈에 보이는 불일치를 명확히 해야 하므로 해당 캡션을 사실에 근거하고 간결하게 유지하세요.
컨트롤이나 간격을 가리지 않고 표시된 영역 근처에 텍스트를 배치합니다. 편집기는 배치 시 텍스트를 래스터화하므로 나중에 텍스트 개체를 편집할 것으로 예상하는 대신 내보내기 전에 문구와 위치를 수정하십시오. 재생산 단계와 로그는 하나의 정적 프레임에서 설정할 수 없는 세부 정보를 전달해야 합니다.
작동 예: 잘못 정렬된 버튼 — 자르기, 요소 상자 넣기, 간격에 대한 화살표, 예상 위치가 있는 캡션
잘못 정렬된 버튼을 작업 예로 들겠습니다. 버튼과 인접한 정렬 참조를 표시할 수 있을 만큼 촘촘하게 자르고 컨트롤 주위에 직사각형을 그린 다음 선을 사용하여 보이는 간격을 가리킵니다. 편집기에는 화살표 도구가 없기 때문에 선으로 위치를 식별하고 버튼이 있어야 할 위치에 짧은 캡션 상태를 표시합니다.
"예상: 필드 정렬, 실제: 아래로 이동"과 같은 캡션은 원인을 진단하는 척하지 않고 시각적 비교를 명시적으로 만듭니다. 획 대비와 텍스트 배치를 검사한 다음 표시된 래스터를 내보냅니다. 스크린샷이 전체 보고서가 아닌 하나의 강력한 증거로 남을 수 있도록 티켓에 재현 경로, 브라우저 세부 정보 및 로그를 추가하세요.
작동 예: 상자, 가리키는 선 및 캡션으로 표시된 잘못 정렬된 버튼
표시된 스크린샷에는 일련의 클릭, 타이밍 경쟁, 콘솔 예외, 네트워크 응답 또는 다시 로드 후에만 나타나는 상태가 표시될 수 없습니다. 동작이 중요한 경우 화면 녹화를 대체하지 않으며 재생 단계나 로그를 대신할 수 없습니다. 이미지는 사건 전체를 담는 척하는 것이 아니라 수사 범위를 좁혀야 합니다.
티켓에 해당 경계가 보이도록 유지하세요. 작물과 함께 환경, 예상 결과, 실제 결과, 단계 및 관련 진단을 포함합니다. 직사각형, 선 및 텍스트 표시를 통해 시각적 결함을 더 쉽게 찾을 수 있으며, 보고서의 나머지 부분에서는 결함을 다시 발생시키는 방법과 스크린샷에서 확인할 수 없는 사항에 대해 설명합니다.
요점: 더 적은 표시, 더 명확한 보고서 — 브라우저 이미지 및 그리기 편집기의 자르기, 주석 및 그리기 도구가 후속 조치가 필요 없는 스크린샷을 생성하는 방법
일반적으로 표시가 적을수록 보고서가 더 명확해집니다. 결함 부분을 자르고, 직사각형 하나를 그리고, 방향이 중요한 선을 사용하고, 예상과 실제 차이를 나타내는 짧은 캡션을 추가합니다. 브라우저 이미지 및 드로잉 편집기는 화살표 프리미티브나 완전한 버그 보고 시스템을 요구하지 않고도 자르기, 선, 모양 및 텍스트 기능을 래스터 편집으로 제공합니다.
보는 사람이 예상하는 크기로 대비, 배치, 문구를 확인한 후에만 내보냅니다. 그런 다음 이미지를 재현 단계, 로그 및 환경 세부 정보와 연결합니다. 구현된 도구는 중요한 픽셀을 명확하게 만들 수 있습니다. 개발자가 결함을 재현하고 수정할 수 있도록 하는 행동 증거의 필요성을 제거할 수는 없습니다.