스크린샷에 순서 번호 매기기

화살표 네 개로 순서를 설명할 수는 없습니다. 번호를 어디에 놓고, 한 장에 몇 개까지 담고, 하나를 지웠을 때 무엇이 어긋나는지.

동료에게 “여기 눌러서 저기 들어간 다음 저장하면 돼”를 설명해야 할 때, 사람들은 대개 화살표를 네 개 그립니다. 그리고 받은 쪽은 어느 화살표부터 봐야 하는지 알 수 없습니다. 화살표는 위치를 가리키는 도구이고, 순서를 실어 나를 수 없기 때문입니다.

순서를 실어 나르는 표시는 번호뿐입니다. 1, 2, 3이 붙는 순간 읽는 사람은 어디부터 시작해서 어디로 가는지를 그림을 보기 전에 압니다. 이 글은 그 번호를 어디에 어떻게 놓아야 실제로 읽히는지에 대한 것입니다.

왜 번호가 화살표보다 나은가

• 화살표 네 개는 네 개의 위치를 말할 뿐 순서를 말하지 않습니다. 읽는 사람이 왼쪽 위부터 읽을 것이라고 가정하고 있는데, 화면 구조가 그렇지 않은 경우가 많습니다.
• 번호는 이미지 밖의 글과 연결됩니다. 본문에 “2번을 누르면 다른 창이 뜹니다”라고 쓸 수 있습니다. 화살표에는 부를 이름이 없습니다.
• 번호는 작습니다. 화살표 네 개는 화면의 절반을 덮지만 번호 네 개는 각각 동그라미 하나입니다. 가리키려던 화면이 그대로 보입니다.
• 번호는 나중에 고칠 수 있습니다. 순서가 바뀌면 번호만 다시 매기면 되지만, 화살표는 다시 그려야 합니다.

화살표를 완전히 버리라는 뜻은 아닙니다. 순서가 없는 이미지 — “이 버튼입니다” 한 마디로 끝나는 이미지 — 에는 화살표 하나가 번호보다 낫습니다. 기준은 이렇습니다. 말하려는 것이 “어디”면 화살표, “어떤 순서”면 번호.

번호를 놓는 자리

1. 가리키려는 요소 위가 아니라 옆에 놓습니다. 버튼 위에 번호를 얹으면 버튼에 뭐라고 쓰여 있었는지 못 보게 됩니다. 왼쪽 위 모서리에 반쯤 걸치는 위치가 대체로 잘 맞습니다.
2. 한 이미지 안에서 놓는 방향을 통일합니다. 어떤 것은 왼쪽, 어떤 것은 오른쪽에 있으면 읽는 사람이 매번 어디를 볼지 결정해야 합니다.
3. 배경과 대비되는 색을 씁니다. 붉은 계열 버튼 위에 붉은 번호를 놓으면 확대해야 보입니다. 테두리나 그림자를 넣으면 어떤 배경에서도 떠 보입니다.
4. 번호는 이미지에 대해 일정한 크기로 만듭니다. 4K 모니터 캡처와 휴대폰 캡처에 같은 픽셀 크기를 쓰면 한쪽은 점이 되고 다른 쪽은 화면을 덮습니다.
5. 가릴 것을 먼저 가리고 번호를 놓습니다. 순서를 반대로 하면 번호를 옮겼을 때 아래에 숨어 있던 이름이 드러납니다.

한 장에 몇 개까지 담나

실용적인 상한은 다섯입니다. 그보다 많아지면 읽는 사람은 그림에서 번호를 찾는 일에 시간을 쓰기 시작하고, 그 시점에 이미지는 설명이 아니라 숨은그림찾기가 됩니다.

흔한 오해가 하나 있습니다. “한 장에 다 담으면 스크롤이 줄어서 좋다”는 것. 실제로는 반대인 경우가 많습니다. 단계마다 화면이 바뀌는 작업이라면 한 장에 담을 수도 없습니다. 첫 화면에 3번 버튼이 아직 없기 때문입니다. 한 장에 여러 번호를 담는 것은 화면이 바뀌지 않고 같은 화면 안에서 여러 곳을 순서대로 다루는 경우에만 맞습니다.

기준을 한 줄로 정리하면 이렇습니다. 화면이 바뀌면 이미지를 나누고, 화면이 그대로면 번호를 늘립니다. 이미지를 나눌 때도 번호는 이어서 매기세요. 첫 장이 1과 2, 둘째 장이 3이면 본문과의 연결이 유지됩니다.

중간을 지우면 어긋납니다

안내 이미지를 만드는 과정에서 거의 항상 일어나는 일이 있습니다. 다 만들고 나서 2번이 불필요하다는 것을 알게 되는 것. 2번을 지우면 이미지에는 1, 3, 4가 남습니다.

읽는 사람은 이것을 실수로 읽지 않고 정보로 읽습니다. “2번은 어디 갔지” 하며 그림을 다시 훑습니다. 잘린 것인지, 스크롤해야 나오는지, 자기가 놓친 것인지 확인하려고요. 이 몇 초가 이미지 전체의 신뢰를 깎습니다. 그래서 번호를 지운 뒤에는 반드시 다시 매겨야 하고, 손으로 하면 반드시 언젠가 빠뜨립니다.

Marka는 이 부분을 도구가 처리합니다. 번호 표시 중 하나를 지우면 나머지가 스스로 다시 매겨집니다. 기준은 놓은 순서이고, 어느 표시가 화면상 위에 겹쳐 있는지와는 무관합니다. 겹친 순서를 기준으로 삼으면 번호를 조금 옮겼을 뿐인데 순서가 뒤바뀌는 일이 생기기 때문입니다.

이미지 밖에서 해야 하는 일

번호를 잘 붙인 이미지도 이미지일 뿐입니다. 실제 안내가 되려면 밖에 글이 있어야 합니다.

• 본문에 번호와 같은 순서의 문장을 씁니다. 이미지가 열리지 않는 환경, 이미지를 볼 수 없는 사람, 그리고 나중에 검색으로 이 글을 찾는 사람 모두에게 필요합니다.
• 대체 텍스트에는 “화면 캡처”가 아니라 무엇을 하는 화면인지 씁니다.
• 메뉴 이름이나 버튼 문구는 이미지에만 두지 말고 글에도 그대로 적습니다. 상대가 검색으로 찾을 수 있는 유일한 단서입니다.
• 보내기 전에 캡처 안의 계정 이름, 상단 표시줄, 주소창을 가립니다. 안내 이미지는 사내 위키나 공개 문서로 퍼지는 성질이 있어서, 처음 만들 때 가려 두지 않으면 나중에 회수할 수 없습니다.

Marka에서 만드는 순서

Marka에서 번호 표시는 탭할 때마다 1, 2, 3이 놓이는 도구입니다. 크기는 이미지 짧은 변에 대한 비율이라 휴대폰 캡처와 데스크톱 캡처에서 같은 크기로 보입니다. 문자 도구의 글자 크기는 선 굵기와 일부러 분리되어 있어서, 화살표를 굵게 하면서 설명은 작게 두는 조합이 가능합니다. 번호 표시와 문자, 화살표를 포함한 주석 도구는 Pro이고, 가리기 중 모자이크와 자르기, 내보내기는 무료입니다.

순서는 가리기가 먼저, 번호가 그다음, 자르기가 마지막입니다. 자료에 넣을 이미지라면 마지막에 배경 꾸미기로 여백과 둥근 모서리, 그림자를 더하면 문서 안에서 캡처가 아니라 의도한 그림처럼 보입니다. 배경 꾸미기도 Pro이고, 여백과 모서리와 그림자 모두 이미지에 대한 비율이라 원본 크기가 달라도 결과의 인상이 같습니다.

자주 묻는 질문

관련 글

• 버그 리포트에 넣을 스크린샷 만들기
• 아이폰에서 스크린샷에 주석 다는 법
• SNS에 올릴 스크린샷 자르기

전체 글