이미지 주석 도구

이미지 주석은 특정 영역에 주의를 끌거나 추가 정보를 전달하기 위해 이미지에 시각적 표시(화살표, 사각형, 원, 텍스트 라벨, 강조 표시, 흐림)를 추가하는 과정입니다. 일반적인 사용 사례로는 소프트웨어 튜토리얼(화살표와 라벨로 버튼 및 메뉴 항목 강조), 디자인 피드백(문제를 원으로 표시하고 코멘트 추가), 버그 리포트(재현 단계가 포함된 스크린샷 주석), 프라이버시 편집(얼굴, 번호판 또는 민감한 텍스트 흐리게)이 있습니다.

기술적 구현은 Canvas API의 2D 드로잉 컨텍스트를 사용합니다. 사각형은 strokeRect()와 fillRect()로 그려집니다. 원과 화살표는 arc()와 lineTo()에 stroke()를 사용합니다. 텍스트는 fillText()와 strokeText()로 렌더링됩니다. 강조 표시는 반투명 채우기 색상을 사용합니다. 흐림은 선택한 영역을 축소된 해상도로 그린 다음 다시 확대하거나, 잘린 영역에 CSS filter: blur()를 적용하여 달성됩니다. 각 주석은 배열의 객체로 저장되어 실행 취소/다시 실행 및 재렌더링이 가능합니다.

프라이버시 편집의 경우, 흐림은 일부 시각적 맥락을 보존하면서(텍스트나 얼굴이 있다는 것을 알 수 있음) 내용을 읽을 수 없게 만들기 때문에 단색 덮개보다 좋습니다. 그러나 흐림은 암호학적으로 안전하지 않습니다. 정교한 알고리즘은 때때로 흐려진 텍스트를 복구할 수 있습니다. 진정으로 민감한 정보(비밀번호, 주민등록번호)의 경우 흐림 대신 검은 사각형을 사용하세요. 흐림 강도(반경)는 복구를 방지하기 위해 최소 10-15 픽셀이어야 합니다.

다양한 유형의 주석에 일관된 색상을 사용하세요: 오류나 문제는 빨강, 올바른 항목은 초록, 정보는 파랑, 강조는 노랑. 주석은 최소한으로 유지하세요. 이미지에 표시가 너무 많으면 시각적 노이즈가 발생하고 명확성이 떨어집니다. 넓은 영역을 원으로 표시하는 대신 화살표로 특정 요소를 가리키세요. 시청자가 순서를 따를 수 있도록 각 주석에 번호나 짧은 텍스트를 라벨로 지정하세요.

튜토리얼을 만들 때 단계 순서대로 스크린샷에 주석을 답니다. 단계별 지침에는 콜아웃 박스(관련 영역을 가리키는 화살표가 있는 색상 배경의 텍스트)를 사용하세요. 텍스트와 날카로운 선 주위의 압축 아티팩트를 방지하기 위해 주석이 달린 이미지를 PNG(JPEG가 아닌)로 내보내세요. 주석이 달린 이미지가 고DPI 화면에 표시되는 경우, 선명한 텍스트와 선을 위해 2배 해상도로 렌더링하고 CSS로 축소하세요.