사진 주석 달기

사진 주석 작성기가 무엇인가요?

사진에 주석을 다는 방법

1. 1
   사진이나 스크린샷을 드롭하세요

   JPG, PNG 또는 WebP 파일을 업로드 영역으로 드래그하거나 클릭하여 장치에서 선택하세요. 스크린샷, 전화 사진, 제품 사진 — 브라우저가 렌더링할 수 있는 모든 것이 작동합니다.

2. 2
   도구와 색상 선택

   화살표를 사용하여 무언가를 가리키고, 사각형으로 박스화하고, 자유형으로 원을 그리거나 낙서를 하고, 텍스트로 레이블을 추가하세요. 팔레트에서 색상을 선택하거나 사용자 정의 색상 선택기를 열어 어떤 헥스 값도 선택하세요.

3. 3
   이미지에서 클릭하고 드래그

   드래그하여 화살표와 사각형을 그립니다. 자유형으로 드래그하여 낙서를 합니다. 텍스트 도구를 사용하여 먼저 레이블을 입력한 후 사진을 클릭하여 원하는 위치에 배치하세요.

4. 4
   재배치 또는 실행 취소

   선택으로 전환한 후 주석을 드래그하여 이동합니다. 마지막 주석을 제거하려면 실행 취소를 클릭하거나 주석을 클릭하고 삭제를 누르세요. 모두 지우기는 한 번의 단계로 레이어를 지웁니다.

5. 5
   주석이 달린 사진 내보내기

   PNG(무손실, 스크린샷에 권장), JPG(작은, 사진), 또는 WebP(최고의 크기-품질)를 선택한 후 다운로드를 클릭하세요. 주석은 전체 원본 해상도로 내보내기에 적용됩니다.

브라우저 측 주석 작동 방식

1. createImageBitmap()로 원본 이미지를 디코딩합니다 — 네이티브, 라이브러리 없음.
2. 미리보기 크기(긴 쪽 ≤ 900 px)로 화면 캔버스에 사진을 렌더링합니다.
3. 각 주석은 유형화된 객체(종류, 좌표, 색상, 스트로크)로 저장됩니다.
4. 내보내기 시, 원본 해상도의 이미지를 새 캔버스에 먼저 그립니다.
5. ctx.drawImage / strokeRect / 등을 사용하여 모든 주석을 위에 다시 재생합니다.
6. canvas.toBlob(format, quality)로 인코딩하고 다운로드로 제공합니다.

참조: MDN — CanvasRenderingContext2D

일반적인 주석 작업

사진 주석 도구를 사용할 때

• 정확히 고장난 요소를 가리키는 빨간 상자와 화살표가 있는 버그 보고서.
• Figma에 로그인하여 댓글을 남기고 싶지 않은 이해관계자를 위한 디자인 피드백.
• 단일 사진에 대한 단계별 지침(레시피, 수리 가이드, 소프트웨어 안내서).
• 사진에서 특정 기능을 강조하고 싶은 부동산 또는 제품 목록.
• 교실 워크시트 마크업 — 정답을 원으로 표시하고, 화살표를 그리며, 메모를 추가합니다.
• Slack, Discord 또는 이메일에 붙여넣기 전에 스크린샷에 빠른 캡션.
• 독립적인 이미지로 읽을 수 있도록 주석이 필요한 화이트보드 또는 노트북 사진.

관련 도구

자주 묻는 질문