소프트웨어 문서용 스크린샷 세트 계획 방법

스크린샷이 들어간 문서 세트는 시작하기 쉽지만 유지하기 어렵습니다. 각 이미지는 특정 날짜의 인터페이스를 복사한 것이고, 인터페이스는 계속 바뀝니다. 캡처 전에 계획을 세우면 첫 번째 리디자인 이후에도 세트가 유지되는지가 결정됩니다.

이 글은 세트의 구조를 짜는 방법, 스크린샷 규칙을 정하는 방법, Mac에서 Temposhot으로 스크린샷을 만드는 방법을 다룹니다. 모든 섹션에서 같은 예시를 사용합니다. 예시는 제품 영역 다섯 개를 가진 소규모 청구서 발행 웹 앱이며, 지원 업무를 함께 맡은 기술 문서 작성자 한 명이 운영합니다.

독자가 필요로 하는 질문 목록 작성하기

페이지를 정하기 전에 실제 질문을 수집합니다. 좋은 출처는 지원 티켓, 영업 통화, 온보딩 세션, 내부 채팅 스레드, 현재 문서의 검색어입니다.

각 질문은 독자의 표현으로 적습니다.

• "How do I invite a teammate?"
• "Why is my export blank?"
• "What does the Sync status mean?"
• "Which plan includes audit logs?"

중복 질문은 묶습니다. 정리된 목록이 세트의 범위가 됩니다. 목록에 없는 내용은 나중에 다룹니다.

예시: 티켓에서 질문 목록 만들기

청구서 발행 팀은 최근 90일 동안의 지원 티켓 240건을 내보냈습니다. 제목과 고객의 첫 메시지만 읽는 데 약 2시간이 걸렸습니다. 중복을 합친 뒤 서로 다른 질문은 52개가 남았습니다.

9개 질문은 각각 10회가 넘게 등장했습니다. 이 9개 질문이 전체 티켓의 거의 절반을 차지했으므로 작업 순서의 기준이 되었습니다. 나머지 43개 질문은 청구서, 고객, 결제, 설정, 요금제 순으로 영역별로 정렬한 백로그에 넣었습니다.

독자가 쓰는 표현 기록하기

각 질문 옆에 독자가 쓴 표현을 그대로 기록합니다. 인터페이스 라벨과 달라도 기록합니다. "remove a card"라고 쓰는 고객은 "Payment methods"로 검색하지 않습니다. 페이지 제목에는 제품 라벨을 쓰고, 첫 문장에는 독자의 표현을 반복해 검색에서 두 표현이 모두 잡히도록 합니다.

질문의 맥락도 함께 기록합니다. 요금제, 역할, 기기가 여기에 해당합니다. 계정 소유자가 보낸 "How do I refund an invoice"와 뷰어 역할 사용자가 보낸 같은 질문은 서로 다른 페이지로 이어집니다. 전자는 작업 가이드이고, 후자는 권한 부족을 다루는 문제 해결 페이지입니다.

문서로 해결할 수 없는 질문 제외하기

일부 티켓은 버그나 누락된 기능을 설명합니다. 버그를 설명하는 페이지는 수정 이후에도 남는 임시 해결 방법이 됩니다. 예시에서는 버그 보고 6건을 52개 집계 이전에 병합 과정에서 분리했고, 이를 문서 백로그가 아닌 제품 팀에 전달했습니다.

혼동을 주는 라벨에서 나오는 질문도 있습니다. 10명의 독자가 "Sync"의 의미를 묻는다면 참조 페이지가 도움이 되지만, 더 명확한 라벨이 더 큰 도움이 됩니다. 이런 질문도 제품 팀에 보냅니다. 라벨이 그대로 남을 때만 페이지를 작성합니다.

질문마다 페이지 유형 하나 지정하기

질문마다 필요한 페이지 형태가 다릅니다. 한 페이지에 여러 형태를 섞으면 페이지가 길어지고 훑어보기 어려워집니다.

페이지 유형	답하는 질문	스크린샷
작업 가이드	"X는 어떻게 하나요"	단계마다 하나
참조	"X는 무슨 뜻인가요"	화면마다 주석이 달린 개요 하나
문제 해결	"X는 왜 실패했나요"	오류 상태와 해결 방법
개념	"X는 어떻게 동작하나요"	다이어그램, 스크린샷은 없거나 적음

목록의 모든 질문에 유형을 붙입니다. 대부분의 제품 질문은 작업 가이드가 됩니다.

작성 전에 스크린샷 수 세기

페이지 유형으로 페이지마다 들어갈 이미지 수를 예측할 수 있습니다. 이 값에 페이지 수를 곱하면 리디자인 때마다 갱신해야 하는 이미지 수가 나옵니다. 캡처 도구를 열기 전에 이 수를 파악해 두는 것이 좋습니다.

예시에서는 52개 질문 중 31개가 평균 7단계의 작업 가이드가 되었습니다. 12개는 이미지 2장씩을 쓰는 문제 해결 페이지가 되었고, 6개는 주석 개요 1장씩을 쓰는 참조 페이지가 되었습니다. 3개는 스크린샷이 없는 개념 페이지가 되었습니다.

247장의 이미지가 이 세트의 실제 유지 관리 부담입니다. 제품 영역 하나를 리디자인하면서 이 중 5분의 1이 바뀌면 약 50장을 교체해야 하며, 이는 하루에서 이틀의 작업입니다. 이 수를 알고 있으면 아래의 스크린샷 정책을 설명하기 쉬워집니다.

여러 유형이 섞인 질문 나누기

일부 질문은 두 가지 유형을 동시에 담습니다. "내보내기 결과가 비어 있는 이유와 해결 방법은 무엇인가요?"는 작업 가이드로 연결되는 문제 해결 페이지입니다. 문제 해결 페이지에는 오류와 원인을 적고, 전체 절차는 작업 가이드로 링크합니다.

스크린샷 정책 정하기

스크린샷의 형태를 한 번 정하고 문서로 기록합니다. 일관된 세트는 유지 관리되는 것처럼 보이고, 갱신 속도도 빨라집니다.

• Window size: 모든 캡처에 고정된 창 크기를 사용함. Temposhot Action Capture의 Specific Window 대상은 한 번의 실행 동안 같은 창을 유지함.
• Theme and language: 라이트 또는 다크 테마 중 하나, 인터페이스 언어 하나를 사용함.
• Data: 샘플 계정과 자리표시자 이름만 사용함.
• Crop: 바탕화면 전체가 아니라 창이나 패널만 자름. Framing의 Focus on action을 Balanced 또는 Close로 설정함.
• Marks: 이미지마다 클릭 마커나 화살표 하나만 사용하고, 강조 색은 하나로 통일함.
• Format: 인터페이스 텍스트에는 PNG를, 사이트 파일 크기를 줄여야 하면 WebP를 사용함.

스크린샷이 필요 없는 경우도 함께 정합니다. 예를 들어 필드가 하나뿐인 설정, 라벨이 본문에 이미 있는 단계, 릴리스마다 바뀌는 화면이 여기에 해당합니다.

정책을 캡처 설정으로 옮기기

작성한 정책은 캡처 설정과 일치할 때만 효과가 있습니다. Action Capture를 한 번 설정하면 값이 Mac에 저장되어 이후 모든 실행에 적용됩니다. 예시 팀은 작업 가이드 31개 모두에 아래 설정을 사용했습니다.

Specific Window는 한 번의 실행 동안 하나의 브라우저 창을 대상으로 유지하므로, 모든 단계의 픽셀 너비가 같아집니다. Include toolbar in captures를 끄지 않으면 떠 있는 툴바가 문서 이미지에 나타납니다. 비밀번호 관리자처럼 두 번째 창을 사용하는 작업이 아니라면 Capture outside clicks는 꺼 둡니다.

페이지 유형별 프레이밍 수준 정하기

프레이밍은 원본 이미지를 바꾸지 않으므로, 정책에서 수준을 지정하되 예외를 허용할 수 있습니다. 작업 가이드는 기본값으로 Balanced(레벨 3)를 사용했습니다. 독자가 컨트롤을 찾을 수 있을 만큼 페이지가 남습니다. 긴 설정 목록의 토글처럼 작은 컨트롤은 Close(레벨 4)로 바꿨습니다.

참조 개요에는 프레이밍을 적용하지 않았습니다. 모든 영역에 이름을 붙이는 것이 목적이므로, 번호가 붙은 라벨과 함께 창 전체를 보여 줍니다. Step Numbers는 Pro 기능입니다. 무료 플랜에서는 같은 결과를 얻으려면 Text 라벨을 직접 배치해야 합니다.

캡처하지 않을 경우 정하기

이미지마다 나중에 갱신할 항목이 생기므로, 정책에는 스크린샷을 넣지 않는 경우도 나열해야 합니다. 예시 팀은 라벨이 붙은 필드에 값을 입력하는 것만 필요한 단계의 이미지를 생략했습니다. 3초 후에 사라지는 확인 토스트도 생략하고, 메시지는 텍스트로 설명했습니다.

다섯 가지 중 어느 것도 해당하지 않으면 그 단계는 텍스트로만 작성합니다. 예시에서는 이 규칙으로 캡처를 시작하기 전에 작업 가이드 이미지 217장 중 38장을 제거했습니다.

모든 캡처에 샘플 계정 하나 준비하기

계정마다 이름, 합계, 날짜가 다른 스크린샷은 독자가 바로 알아챕니다. 예시 팀은 고객 3명, 청구서 12건, 결제 수단 2개를 가진 샘플 워크스페이스를 하나 만들고, 모든 이름을 자리표시자로 두었습니다. 모든 가이드가 이 워크스페이스에서 시작하므로 모든 페이지에 같은 고객 이름이 나타납니다.

각 실행 전에 샘플 데이터를 초기화합니다. 다른 가이드가 청구서를 하나 삭제한 뒤에 기록한 가이드는 12건 대신 11건을 보여 주고, 다음 갱신 때 이미지가 맞지 않게 됩니다. 다른 작성자가 같은 절차를 반복할 수 있도록 초기화 단계를 정책 문서 맨 위에 적습니다.

실행 전에 브라우저 창 크기를 한 가지로 맞추고, 그 크기를 유지합니다. Temposhot은 창을 현재 크기 그대로 캡처하며 창 크기를 조정하지 않습니다. 정책에 "browser window at 1440 points wide, zoom 100 percent" 같은 메모를 적어 두면 다른 날 찍은 캡처도 같은 배율로 맞춰집니다.

교체를 위한 이미지 이름과 저장 방식 정하기

모든 이미지는 언젠가 교체됩니다. 한 화면의 이미지를 빠르게 찾을 수 있도록 파일 이름을 정합니다.

area-task-step.png 형식의 이름을 쓰면 영역과 작업 순으로 정렬됩니다. 예를 들어 billing-change-plan-03.png처럼 씁니다. 가이드마다 폴더를 하나씩 두고, 각 가이드의 Temposhot Document를 저장합니다. 그러면 편집 후 다시 내보낼 수 있습니다.

Temposhot의 이미지 내보내기는 파일 이름에 페이지 제목을 사용합니다. 내보내기 전에 제목을 설정하거나, 내보낸 뒤 문서 저장소에서 파일 이름을 바꿉니다. ZIP 패키지에는 렌더링된 PNG 페이지와 함께 document.json이 들어 있습니다. 문서 시스템으로 가져오는 과정을 스크립트로 작성한다면 이 파일이 유용합니다.

예시 세트의 폴더 구조

제품 영역마다 폴더를 하나 두고, 그 안에 가이드마다 폴더를 하나씩 둡니다. 내보낸 이미지는 그 이미지를 사용하는 페이지 옆에 위치합니다. 그래서 가이드를 바꾸는 풀 리퀘스트에서 어떤 이미지가 바뀌었는지도 함께 보입니다.

페이지 제목과 파일 이름 맞추기

Temposhot은 페이지 제목을 기준으로 이미지 파일 이름을 정합니다. 따라서 Click "Change plan" 같은 제목은 정렬하기 어려운 파일 이름을 만듭니다. 방법은 두 가지입니다. 페이지 제목을 독자에게 보일 최종 문구로 고친 뒤 스크립트로 저장소의 파일 이름을 바꾸거나, ZIP 패키지를 내보내고 document.json의 페이지 순서로 파일 이름을 정합니다.

어느 방법을 택하든 파일 이름의 단계 번호는 페이지의 단계 번호와 일치해야 합니다. 4단계를 삭제하면 그 뒤에 오는 파일 번호를 같은 커밋에서 다시 매깁니다.

원본 Document 저장하기

내보낸 이미지는 그 이미지를 기록한 Mac의 Document에서 나옵니다. Document는 해당 Mac의 Documents 라이브러리(Command+4)에 있으며, Temposhot은 이를 동기화하지 않습니다. 각 Document 이름을 가이드 폴더 이름과 같게 정합니다(예: billing-change-plan). 그러면 라이브러리에서 검색하여 어떤 이미지의 원본인지 찾을 수 있습니다.

넓은 둘러보기 전에 작업 가이드 만들기

작업 가이드는 가장 자주 묻는 질문에 답하며, 검증하기도 가장 쉽습니다. 작업 가이드를 먼저 작성합니다.

1. Action Capture 열기

   Command+3를 누르고 Start Action Capture를 선택한 뒤 Specific Window를 선택합니다.

2. 작업 수행

   작업을 한 번 끝까지 진행합니다. 인식된 클릭마다 클릭 직전의 창이 저장되며, 제목 초안은 Parse clicked elements가 만듭니다.

3. 캡처 종료 및 편집

   Finish capture를 선택합니다. 편집기에서 제목을 다시 쓰고, 페이지 프레이밍을 조정하고, 마크를 추가합니다.

4. 페이지 내보내기

   More export formats를 열고, 문서 사이트용으로 PNG 또는 WebP 페이지를 선택합니다.

제품 둘러보기와 개요 페이지는 나중에 작성합니다. 작업 가이드로 어떤 화면이 가장 중요한지 드러난 뒤에 만드는 것이 순서입니다. 자세한 내용은 Action Capture 가이드와 Documents 내보내기 가이드를 참고합니다.

티켓 양에 따라 첫 묶음 정하기

예시 팀은 첫 주에 가장 많이 질문받은 9개를 캡처했습니다. 가이드 하나에 약 25분이 걸렸습니다. 샘플 계정 초기화에 5분, 기록에 5분, 제목, 프레이밍, 마크 편집에 15분입니다. 가이드 9개에 약 4시간이 걸렸습니다.

초안 제목을 지시문으로 고치기

Parse clicked elements는 컨트롤 이름으로 페이지 제목을 채웁니다(예: Click "Change plan"). 읽을 수 있는 이름이 없는 컨트롤을 클릭하면 Click here가 됩니다. 두 제목 모두 초안입니다. 독자용 제목은 동사로 시작하고, 컨트롤 이름을 굵게 표시하며, 결과가 명확하지 않으면 결과를 덧붙입니다.

초안 제목	수정한 제목
Click "Billing"	사이드바에서 Billing을 엶
Click here	Team 요금제 카드를 선택함
Click "Confirm"	Confirm을 선택해 다음 갱신 시점에 요금제를 변경함

수정한 제목은 내보낼 때 이미지 파일 이름이 됩니다. 제목이 명확하면 독자와 저장소 모두에 도움이 됩니다.

무료 한도와 단계 수 확인하기

무료 플랜은 Action Capture 실행을 5단계 후에 일시 중지하며, 이미 캡처한 단계는 저장된 상태로 남습니다. 예시처럼 7단계인 가이드는 Temposhot Pro가 필요하거나, 실행 두 번을 하나의 Document에 추가해야 합니다. 두 번째 실행은 Pages 패널의 **Capture new images…**로 추가합니다. 열린 Document에 새 프레임이 덧붙습니다.

키보드 단축키로 페이지 편집하기

가이드 하나에 드는 25분 중 대부분은 편집에 쓰입니다. 아래 편집기 키는 문서 페이지에서 가장 많이 쓰는 편집 작업을 다룹니다.

주석은 원본 이미지를 바꾸지 않습니다. 이번 릴리스에서 추가한 사각형은 아래 화면이 여전히 일치하는 한, 리디자인 후에도 단계를 다시 캡처하지 않고 이동하거나 삭제할 수 있습니다.

문서 세트 연결하기

독자가 필요한 페이지에 바로 도착하는 경우는 드뭅니다. 페이지끼리 링크를 걸어, 개념에서 작업으로, 오류에서 해결 방법으로 이동할 수 있게 합니다.

• 각 작업 가이드는 선행 작업과 다음으로 이어질 가능성이 높은 작업에 링크함
• 각 문제 해결 페이지는 해당 문제를 해결하는 작업 가이드에 링크함
• 각 참조 페이지는 해당 화면을 사용하는 작업에 링크함

영역별 짧은 색인 페이지를 두고 목표별로 작업을 나열하면, 검색 대신 둘러보는 독자에게 도움이 됩니다.

질문 하나에서 만드는 링크 구조

예시의 "Why is my export blank" 질문은 페이지 네 개의 체인을 만들었습니다. 이 중 어느 페이지에서 시작해도 한 번의 클릭으로 나머지 세 페이지에 갈 수 있습니다.

고립된 페이지 피하기

게시 후 모든 페이지를 나열하고 들어오는 링크 수를 셉니다. 들어오는 링크가 없는 페이지는 검색으로만 도달할 수 있습니다. 예시에서는 52개 페이지 중 4개에 들어오는 링크가 없었고, 각 페이지를 영역 색인에 추가했습니다.

책임자와 검토 기준 정하기

모든 페이지에 책임자를 지정합니다. 보통은 기능을 담당하는 팀입니다. 스크린샷이 맞는 제품 버전도 기록합니다.

달력 알림만 쓰는 것보다 검토 기준을 쓰는 편이 효과적입니다.

• 릴리스로 세트에 포함된 화면이 바뀜
• 라벨이나 메뉴 항목의 이름이 바뀜
• 지원팀이 더 이상 맞지 않는 단계를 보고함
• 다른 기준 없이 고정 주기가 지남(예: 분기 1회)

업데이트 절차는 스크린샷 문서를 최신 상태로 유지하기 글에서 다룹니다.

릴리스 후 이미지 교체하기

릴리스로 화면이 바뀌면 파일 이름으로 영향을 받는 이미지를 쉽게 찾을 수 있습니다. 저장소에서 영역 접두사를 검색하고, 일치하는 Document를 열고, 바뀐 단계만 다시 실행합니다.

캡처로 만든 새 페이지는 선택한 페이지 뒤에 삽입됩니다. 바뀐 단계 앞의 페이지를 선택하고 캡처를 실행하면, 새 페이지가 올바른 위치에 놓입니다.

제품 영역별로 책임 나누기

한 명의 작성자가 릴리스마다 52개 페이지를 모두 검토할 수는 없습니다. 예시 팀은 영역마다 담당 엔지니어를 지정하고, 작성자는 편집자 역할을 맡았습니다. 담당자는 릴리스 티켓에 바뀐 화면을 표시하고, 작성자가 이미지를 교체합니다.

각 페이지에 제품 버전 기록하기

페이지 메타데이터나 마지막 줄에 제품 버전을 추가합니다. 예: "Screenshots match version 4.2". 지원팀이 불일치를 보고하면, 버전을 보고 책임자가 페이지가 얼마나 뒤처졌는지 알 수 있습니다. 두 릴리스보다 많이 뒤처진 페이지는 검토 대기열의 맨 위로 올립니다.

자주 묻는 질문

소프트웨어 문서 페이지에는 스크린샷이 몇 장 있어야 하나요?

작업 가이드에서는 단계마다 한 장이고, 그 밖의 페이지에서는 가능한 한 적게 넣습니다. 이미지마다 나중에 갱신할 항목이 생기므로, 독자의 수고를 줄이는 경우에만 추가합니다.

문서 스크린샷에 전체 화면을 보여 줘야 하나요?

드뭅니다. 창이나 패널만 자릅니다. 전체 화면 이미지에는 관련 없는 앱이 나타나고, 인터페이스 텍스트가 작아집니다.

시각 문서란 무엇인가요?

텍스트와 함께 스크린샷, 다이어그램, 동영상을 사용하는 문서입니다. 용어집의 시각 문서 항목을 참고합니다.

문서 사이트에는 어떤 이미지 형식을 써야 하나요?

PNG 페이지는 인터페이스 텍스트를 선명하게 유지합니다. WebP 페이지는 파일 크기가 더 작으며, Mac에 WebP 인코더가 있을 때만 More export formats에 나타납니다. Image Compressor를 사용하면 업로드 전에 PNG 파일을 더 줄일 수 있습니다.

리디자인 후 스크린샷 갱신에는 얼마나 걸리나요?

바뀐 화면을 보여 주는 이미지 수에 따라 다릅니다. 예시에서는 한 영역의 리디자인으로 247장 중 약 50장이 영향을 받았습니다. 저장된 Document에서 바뀐 단계만 다시 실행하는 데 하루에서 이틀이 걸렸습니다. 같은 가이드를 처음부터 다시 만드는 데는 약 일주일이 걸렸습니다.

여러 작성자가 Temposhot Document 하나를 공유할 수 있나요?

아니요. Document는 만든 Mac에 저장됩니다. 내보낸 파일은 문서 저장소를 통해 공유하고, 각 가이드의 원본 Document는 담당자의 Mac에 보관합니다.

클릭을 명확한 단계별 가이드로 바꾸기

Action Capture는 일관된 창 크기와 제목 초안으로 작업 가이드를 한 번의 과정으로 기록합니다. Temposhot 다운로드를 받고, 목록에서 가장 많이 묻는 질문부터 시작합니다.