블로그

스크린샷에서 색상과 간격을 측정하는 방법

게시 2026년 10월 25일 · 색상 선택기, 간격, 디자인, 스크린샷

디자인 도구 없이 스크린샷에서 HEX 색상 값과 1px 테두리, 요소 사이의 정확한 간격을 확인하세요. 돋보기와 색상 선택기, 선택 영역 크기로 측정합니다.

스크린샷이 유일한 근거일 때가 많습니다. 고객이 보낸 버그 리포트, 경쟁사 UI, 시안과 다르게 나간 디자인 같은 것들이죠. 스크린샷에서 정확한 색과 거리를 읽는 것은 작은 기술인데, InSnap은 이미지가 있는 캡처 오버레이에 그 도구를 배치합니다.

포인터 아래 색상 선택하기

InSnap의 설정 › 스크린샷에서 색상 선택기를 켠 뒤 캡처하세요. 멈춰 있는 이미지 위를 움직이면 색상 패널에 포인터 아래의 값이 표시됩니다.

• Shift 를 누르면 RGB와 HEX가 전환됩니다.
• C 를 누르면 현재 값을 클립보드에 복사합니다.
• 색상은 실시간 화면이 아니라 멈춰 있는 스크린샷에서 가져오므로, 아래에서 동영상이나 애니메이션이 재생 중이어도 값이 바뀌지 않습니다.

이 점은 디자인 QA에서 중요합니다. 측정하는 픽셀은 캡처된 픽셀이고, 그것이 바로 파일에 담긴 내용이기 때문입니다.

돋보기로 픽셀 하나 읽기

돋보기는 포인터 주변을 확대한 격자로 보여 주며 가운데 픽셀을 표시합니다. 질문이 "이 영역은 무슨 색인가"가 아니라 "이 정확한 픽셀에서 무슨 일이 일어나는가"일 때 쓰세요.

• 1px 테두리 인가, 그림자인가?
• 구분선은 1픽셀 인가, 2픽셀인가?
• 아이콘이 텍스트 기준선에 정렬 되어 있는가?
• 모서리 반경이 네 모서리 모두 균일 한가?

보통 배율에서는 이런 세부 사항이 안티앨리어싱에 묻혀 사라집니다. 픽셀 격자가 이것을 셀 수 있게 해 줍니다.

선택 영역으로 간격 측정하기

자 도구는 없지만 선택 영역이 곧 자입니다. 측정하려는 간격을 가로질러 상자를 드래그하고 크기 표시를 읽으세요.

1. 캡처를 시작하고 한 요소의 가장자리에서 다음 요소의 가장자리까지 드래그합니다.
2. 크기 표시에서 너비나 높이를 읽습니다. 물리 픽셀 단위로 표시되며, 그것이 파일에 담긴 값입니다.
3. Esc를 눌러 취소하거나, 이미지도 필요하면 선택 영역을 복사합니다.

실용적인 참고 두 가지:

• 요소 전체가 아니라 간격을 측정하세요. 한 버튼의 왼쪽 가장자리에서 다음 버튼의 왼쪽 가장자리까지 선택하면 피치가 나옵니다. 순수한 간격이 필요하면 버튼 너비를 빼세요.
• 디스플레이 배율을 고려하세요. Retina 화면에서 물리 픽셀 20은 10포인트입니다. 디자인 시안이 포인트 단위라면 배율로 나누세요. 스크린샷은 항상 픽셀 단위입니다.

짧은 디자인 QA 체크리스트

스크린샷만으로 부족할 때

픽셀은 무엇이 렌더링되었는지는 알려 주지만 왜 그런지는 알려 주지 않습니다. 색이 이상해 보이면 버그를 올리기 전에 디스플레이 프로필과 앱 테마를 확인하세요. 간격이 이상하면 페이지 확대/축소 배율을 확인하세요. 브라우저 확대 90%에서 찍은 스크린샷은 CSS와 맞지 않는 크기를 보고합니다.

비교하려면 두 상태를 따로 캡처해 둘 다 고정하세요. 고정 창은 앱 위에 떠 있으므로 시안과 구현을 오가며 위치를 잃지 않을 수 있습니다.

자주 묻는 질문

색상 값을 바로 복사할 수 있나요?

네. 색상 선택기를 켜고 픽셀 위로 마우스를 옮긴 뒤 Shift로 RGB나 HEX를 고르고 C를 누르세요. 값이 클립보드로 복사되어 티켓이나 디자인 파일에 바로 붙여 넣을 수 있습니다.

픽셀이 아니라 포인트로 간격을 재려면?

선택 영역 크기를 물리 픽셀로 읽고 디스플레이 배율로 나누세요. Retina 디스플레이는 2, 일반 디스플레이는 1이며, 스케일 모드에서는 시스템 디스플레이 설정에 표시된 값을 씁니다.

색상 선택기는 실시간 화면을 읽나요, 스크린샷을 읽나요?

스크린샷을 읽습니다. 단축키를 누르는 순간 캡처가 멈추고 선택기가 그 픽셀을 샘플링하므로, 저장하거나 공유하는 파일과 값이 일치합니다.

블로그의 다른 글