도움말 문서와 튜토리얼에는 화면마다 같은 방식으로 캡처하고, 동작에 번호를 매기고, 모든 이미지를 같은 너비로 내보내세요. OpenScreenShot에서는 내보내기 대화상자의 배율에서 정확한 픽셀 너비를 정하고, 동작마다 단계 번호 배지를 넣고, Spotlight로 독자에게 올바른 컨트롤을 가리키세요. Docs/{title} 같은 파일 이름 템플릿은 각 이미지를 다운로드 폴더 안의 폴더에 저장해요.

튜토리얼 스크린샷을 만드는 단계

  1. 문서 안의 모든 캡처에서 브라우저 창을 같은 크기로 맞추세요. 매번 같은 테마와 확대/축소 수준을 쓰세요.
  2. 화면을 캡처하세요. 오른쪽 클릭 메뉴의 선택 영역이나 요소 캡처를 쓰면 해당 단계와 관련된 인터페이스 부분만 이미지에 담겨요.
  3. 편집기에서 독자가 사용할 순서대로 각 컨트롤에 단계 번호(S)를 넣으세요.
  4. 화면에 다른 콘텐츠가 많으면 중요한 영역 위에 Spotlight(O)를 넣으세요.
  5. 샘플 고객 데이터, 실제 이메일 주소, API 키는 단색 채우기를 쓴 블러(B)로 덮으세요.
  6. 원한다면 상단 바에서 Beautify를 열어 여백, 둥근 모서리, 그림자를 넣으세요.
  7. 이미지 저장을 클릭하세요. 내보내기 대화상자에서 PNG를 고르고, 배율에 페이지 너비를 입력하고, 파일 이름을 확인한 뒤 내보내기를 클릭하세요.

모든 이미지를 같은 크기로 유지하기

한 문서 안의 스크린샷 크기가 단계마다 바뀌면 독자가 알아차려요. 배율에서 25, 50, 100, 200%를 고르거나 정확한 픽셀 너비를 입력하세요. 너비를 고정하면 문서 안의 모든 이미지가 문서 사이트의 콘텐츠 열에 맞춰져요.

내보내기 대화상자에서 이 설정 기억하기를 켜면 형식과 품질이 새 기본값으로 유지돼요. 너비는 이 기본값에 포함되지 않으므로 내보낼 때마다 다시 입력하세요. Chrome의 캔버스 한도를 넘는 너비는 거부되므로, 확장 프로그램이 빈 파일을 쓰는 일은 없어요.

PNG는 무손실이라 인터페이스 텍스트가 선명하게 유지돼요. 문서 플랫폼이 파일 크기를 제한할 때만 JPEG나 WebP를 쓰세요.

순서가 유지되는 단계 번호

단계 번호 배지는 자동으로 숫자가 올라가요. 첫 클릭에 1, 다음 클릭에 2가 놓여요. 배지를 지우면 나머지 배지의 번호가 다시 매겨지므로, 뒤의 번호를 일일이 고치지 않고 단계를 뺄 수 있어요. 이미지의 번호를 문서의 번호 목록과 맞추세요.

1–8 키의 8색 팔레트를 사용하세요. 편집기는 색상, 선 굵기, 글꼴 크기를 세션이 바뀌어도 기억하므로, 한 문서의 스크린샷이 같은 스타일을 유지해요.

강조와 프레임

Spotlight는 하나 이상의 영역을 밝게 두고 나머지를 어둡게 해요. 컷아웃은 사각형, 둥근 사각형, 타원 중에서 고를 수 있어요. 긴 설정 페이지라면 Cut 도구(X)로 독자에게 필요 없는 가로 띠를 잘라낼 수 있고, 적용하기 전에 실시간 미리보기를 볼 수 있어요.

Beautify 패널(문서에서도 같은 이름이에요)은 스크린샷 주위에 여백, 모서리 반경, 그림자, 배경을 넣어요. 프레임은 모든 내보내기와 클립보드에 함께 들어가요. 프리셋 하나를 골라 문서의 모든 이미지에 쓰세요.

이미지 이름 짓기와 정리하기

팝업이나 툴바 아이콘의 오른쪽 클릭 메뉴에서 설정을 연 뒤 파일 이름 템플릿을 편집하세요. 토큰을 클릭해 {date}, {time}, {title}, {domain}, {w}, {h}를 넣고 실시간 미리보기를 확인하세요.

/를 넣으면 다운로드 폴더 안의 폴더에 저장돼요. 예를 들어 Docs/{title}은 각 이미지를 페이지 제목으로 이름 지어 Docs 폴더에 저장해요. {title} 토큰은 파일 이름에 쓸 수 없는 문자를 바꾸므로, 페이지 제목에 /가 있어도 폴더가 하나 더 생기지 않아요. 내보내기 대화상자는 저장하기 전에 파일 이름을 보여 주고, 거기서 편집할 수 있어요.

제한 사항

인터페이스 스크린샷은 제품이 바뀌면 오래된 내용이 돼요. 파일 이름에 페이지 제목이나 URL을 넣어 두면 오래된 이미지를 찾아 바꿀 수 있어요. 브라우저 스크린샷은 페이지 콘텐츠만 보여 줘요. 주소 표시줄이나 브라우저 툴바는 들어가지 않아요.

내보내기 레퍼런스와 설정 레퍼런스에서 모든 옵션을 볼 수 있어요. 게시물용 이미지를 준비하려면 소셜 미디어에 스크린샷 공유하기를 참고하세요.