아주 쉽게 스크린샷에 번호 넣기｜클릭만 하면 1·2·3 자동 표시
안녕하세요. 초보전산쟁이입니다.
전산 업무를 하다 보면 스크린샷으로 사용 방법을 설명해야 할 일이 정말 많습니다.
프로그램 설정 방법을 안내하거나 오류가 발생한 위치를 알려줄 때도 그렇고,
간단한 업무 매뉴얼을 만들 때도 화면 캡처 이미지를 자주 사용하게 됩니다.
그런데 스크린샷만 보내놓고
“오른쪽 위 버튼을 눌러주세요.”,
“그 아래 메뉴로 들어가세요.”
라고 설명하면 생각보다 상대방이 위치를 잘 못 찾는 경우가 많습니다.
그래서 보통 이미지에
1번, 2번, 3번
식으로 번호를 붙여서 설명하게 되는데요.
문제는 번호 몇 개 넣으려고 이미지 편집 프로그램까지 실행하는 게 은근히 귀찮다는 점입니다.
그래서 이번에는 이미지를 불러온 뒤
원하는 위치를 클릭하는 것만으로 번호표를 자동으로 넣을 수 있는 도구를 만들어봤습니다.
스크린샷 번호표 도구는?
스크린샷이나 이미지 파일을 불러온 뒤
설명하고 싶은 위치를 클릭하면
1 → 2 → 3 → 4
순서대로 번호표가 자동으로 생성되는 도구입니다.
번호만 넣는 것이 아니라 각 번호에 대한 설명도 함께 입력할 수 있고,
작업이 끝난 결과물을 PNG 파일로 저장하거나 클립보드에 바로 복사할 수도 있습니다.
- PNG, JPG, WebP 이미지 불러오기
- 캡처 이미지 바로 붙여넣기
- 클릭한 위치에 번호 자동 생성
- 번호표 위치 이동
- 번호별 설명 입력
- 번호표 크기 및 디자인 변경
- PNG 이미지 저장
- 결과 이미지 클립보드 복사
1. 스크린샷 불러오기
먼저 번호를 표시할 이미지를 불러옵니다.
지원하는 이미지 형식은
PNG, JPG, WebP입니다.
파일을 직접 선택하거나 드래그해서 넣을 수 있고,
윈도우에서 캡처한 이미지라면 별도로 파일을 저장할 필요 없이
Ctrl + V로 바로 붙여넣을 수도 있습니다.
개인적으로는 이 방식이 가장 편합니다.
화면 캡처 → Ctrl + V → 번호 표시
순서로 바로 작업할 수 있기 때문입니다.
2. 원하는 위치를 클릭하면 번호가 자동으로 생성됩니다
이미지를 불러왔다면 사용 방법은 아주 간단합니다.
설명하고 싶은 위치를 마우스로 클릭하면 됩니다.
첫 번째로 클릭한 곳에는 1번,
두 번째로 클릭한 곳에는 2번,
그다음은 3번으로 번호가 자동으로 올라갑니다.
별도로 번호를 입력하거나 이미지 편집 프로그램에서 원을 그리고 숫자를 넣을 필요가 없습니다.
번호를 잘못된 위치에 찍었다면 다시 만들 필요도 없습니다.
생성된 번호표를 마우스로 끌어서 원하는 위치로 이동할 수 있습니다.
3. 번호표 크기와 디자인 변경
이미지 크기에 따라 번호표가 너무 크거나 작게 보일 수 있습니다.
그래서 번호표의
크기, 색상, 표시 모양을 직접 변경할 수 있도록 만들었습니다.
단순히 순서만 알려주고 싶다면 기본 원형 번호표를 사용하면 되고,
정확한 버튼 위치를 가리켜야 한다면 화살표 형태의 표시를 활용할 수도 있습니다.
4. 번호마다 설명 입력하기
스크린샷에 번호만 넣으면 다시 별도로 설명을 작성해야 하는 경우가 있습니다.
이 도구에서는 각 번호에 대한 설명도 함께 입력할 수 있습니다.
예를 들어 아래처럼 사용할 수 있습니다.
- 1번 : 설정 메뉴 클릭
- 2번 : 계정 메뉴 선택
- 3번 : 변경할 항목 선택
또한 저장할 이미지 아래쪽에 설명 목록을 함께 넣도록 설정할 수도 있습니다.
이 기능을 사용하면
번호가 표시된 스크린샷 + 번호별 설명을
이미지 한 장으로 만들 수 있어서
업무 매뉴얼이나 사용자 안내 이미지를 만들 때 꽤 편리합니다.
5. 잘못 만들었다면 되돌리기
작업하다가 번호를 잘못 추가했다면 되돌리기 기능을 사용할 수 있습니다.
처음부터 다시 만들고 싶다면
모두 지우기 기능으로 생성된 번호를 한 번에 삭제할 수도 있습니다.
번호 순서를 다시 정리해야 한다면
번호 다시 줄세우기 기능도 사용할 수 있습니다.
6. PNG 저장 또는 결과 이미지 바로 복사
번호와 설명 입력이 끝났다면 결과물을
PNG 파일로 저장할 수 있습니다.
파일로 저장하지 않고 바로 메일이나 메신저에 붙여넣고 싶다면
결과 이미지 복사 기능을 사용하면 됩니다.
예를 들어 업무 메일을 작성하고 있다면
스크린샷 작업 완료 → 결과 이미지 복사 → 메일에서 Ctrl + V
이렇게 사용하면 별도로 이미지 파일을 저장하고 다시 첨부하는 과정도 줄일 수 있습니다.
이미지는 서버로 전송되지 않습니다
업무용 화면이나 프로그램 화면을 캡처해서 사용하는 경우가 있기 때문에
이미지 처리 방식도 신경 썼습니다.
이 도구에 불러온 이미지는 서버에 업로드해서 처리하는 방식이 아니라
사용자의 웹 브라우저 안에서 처리됩니다.
다만 회사 내부 기밀자료나 개인정보 등
외부 웹페이지에서 열면 안 되는 자료는
각 회사의 보안정책에 맞게 사용하는 것을 권장합니다.
이럴 때 사용하면 편합니다
- 프로그램 사용 방법을 사용자에게 설명할 때
- 오류 화면에서 확인해야 할 위치를 표시할 때
- 업무용 메일에 화면 설명을 첨부할 때
- 간단한 업무 매뉴얼을 만들 때
- 블로그에서 프로그램 사용 방법을 설명할 때
- 고객이나 직원에게 순서대로 클릭할 위치를 안내할 때
마무리
사실 엄청 복잡한 기능이 들어간 도구는 아닙니다.
저도 업무를 하면서
“스크린샷에 번호 몇 개 넣으려고 이미지 편집 프로그램까지 켜야 하나?”
라는 생각이 들어서 만든 기능입니다.
전산 담당자처럼 프로그램 사용 방법이나 오류 화면을 자주 설명해야 한다면
생각보다 쓸 일이 꽤 있을 것 같습니다.
이미지를 불러오고,
원하는 위치를 클릭한 뒤,
번호와 설명만 입력하면 됩니다.
스크린샷에 번호 넣는 작업을 최대한 간단하게 하고 싶다면 한번 사용해보세요.