[활용 사례](https://openscreenshot.app/ko/use-cases/)

# 도움말 문서와 튜토리얼용 스크린샷을 만드는 방법

튜토리얼 스크린샷의 크기를 맞추고, 단계에 번호를 매기고, 올바른 컨트롤을 강조하고, 각 파일을 문서 폴더에 저장하세요.

작성자 [OpenScreenShot](https://github.com/pghqdev/OpenScreenShot)

도움말 문서와 튜토리얼에는 화면마다 같은 방식으로 캡처하고, 동작에 번호를 매기고, 모든 이미지를 같은 너비로 내보내세요. 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** 패널([문서](https://openscreenshot.app/ko/docs/#annotate)에서도 같은 이름이에요)은 스크린샷 주위에 여백, 모서리 반경, 그림자, 배경을 넣어요. 프레임은 모든 내보내기와 클립보드에 함께 들어가요. 프리셋 하나를 골라 문서의 모든 이미지에 쓰세요.

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

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

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

## 제한 사항

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

[내보내기 레퍼런스](https://openscreenshot.app/ko/docs/#export)와 [설정 레퍼런스](https://openscreenshot.app/ko/docs/#settings)에서 모든 옵션을 볼 수 있어요. 게시물용 이미지를 준비하려면 [소셜 미디어에 스크린샷 공유하기](https://openscreenshot.app/ko/use-cases/social-media/)를 참고하세요.

## 더 알아보기

[문서 읽기](https://openscreenshot.app/ko/docs/), [모든 가이드 보기](https://openscreenshot.app/ko/blog/), 또는 [캡처 관련 도움 받기](https://openscreenshot.app/ko/support/).

---

Canonical page: https://openscreenshot.app/ko/use-cases/documentation/