스크롤 캡처 이음새에 생기는 줄, 원인과 해결
이어붙인 캡처에 수백 픽셀마다 정확히 일정한 간격으로 어두운 띠가 보인다면, 원인은 이어붙이는 계산이 아니라 조각마다 이미 박혀 있는 그림자입니다.
이음새인지 내용인지부터 확인
고치기 전에 완성된 이미지에서 세 가지를 봅니다.
- 간격. 띠와 띠 사이 거리를 재 보세요. 한 화면 높이와 같으면 이음새입니다. 들쭉날쭉하면 문서 내용입니다. 예를 들어 문서 뷰어의 쪽 사이 띠는 결함이 아닙니다.
- 폭. 이음새 자국은 본문 바깥 회색 여백까지 포함해 끝에서 끝까지 이어집니다. 진짜 내용은 내용이 끝나는 데서 끝납니다.
- 이미지 맨 위와 맨 아래. 첫 몇 줄과 마지막 몇 줄도 이웃보다 어둡다면, 그 그림자는 캡처 영역의 가장자리에 붙어 있는 것입니다. 그게 바로 조각 두 개가 만나는 자리에서 띠가 두 배로 진해지는 원인입니다.
흔한 원인
스크롤 상자들은 위아래 가장자리에 뭔가를 그려 둡니다. 안쪽 그림자(inset box-shadow), 스크롤 페이드 그라데이션, 얇은 테두리 같은 것들입니다. 몇 픽셀이라 화면에서는 눈에 잘 안 띕니다. 그런데 조각 하나하나가 그 상자를 찍은 사진이니, 모든 조각에 그게 들어갑니다.
조각을 딱 맞대어 붙이면 앞 조각의 어두운 아래끝과 뒤 조각의 어두운 위끝이 바로 맞닿아, 결과물의 띠는 화면에서 보이던 것보다 두 배로 진해집니다. 실제로 재 본 캡처에서는 이음새 양쪽 행이 배경 224 위에서 224, 193, 157 · 157, 193, 224였습니다. 좌우 폭 전체에 걸친 대칭 골이, 정확히 조각 높이 간격으로 반복됐습니다.
해결 — 겹쳐 찍고 한가운데에서 끊기
한 화면보다 조금 적게 스크롤해 조각이 서로 겹치게 찍고, 가장자리가 아니라 겹침의 한가운데에서 잇습니다. 각 조각은 속만 내놓게 되므로 양쪽 그림자가 다 버려집니다. 우리가 재 본 그림자 기준으로 24px 겹침이면 충분하고, 조각 수는 몇 % 늘어납니다.
이 방법은 그 사이트의 CSS를 몰라도 통한다는 점이 중요합니다. 그림자는 box-shadow일 수도, 가상 요소 오버레이일 수도, 배경 그라데이션일 수도 있는데, 페이지 밖에서 이 셋을 다 확실히 끄는 방법은 없습니다.
ScrollStudio는 이걸 자동으로 합니다. 켤 설정은 없습니다. 같이 딸려 오는 두 가지도 있습니다. 상자의 안쪽만 찍어 테두리와 스크롤막대를 아예 넣지 않는 것, 그리고 각 조각의 원본 높이를 목적지 높이에서 되돌려 구해 반올림 차이로 이음새마다 0.x픽셀씩 재표본화되지 않게 하는 것입니다.
이걸로도 안 없어지는 것
이미지 전체의 첫 몇 줄과 마지막 몇 줄에는 여전히 상자의 그림자가 남습니다. 거기가 캡처 영역의 진짜 끝이고, 그 그림자는 실제 내용 위에 덮여 있기 때문입니다. 지우면 그 내용이 사라지므로 남겨 둡니다.
가이드
무료, 계정 필요 없음, 서버로 전송하지 않습니다.