사진 확대했더니, 왜 네모가 보여?

친구가 보낸 작은 사진에서 간판 글씨를 읽으려 했습니다. 손가락으로 쭉 벌렸습니다. 한 번 더 벌렸습니다.

글씨가 또렷해지는 대신, 테두리가 계단처럼 커졌습니다. 좀 더 확대하면 읽히겠지 했는데 이제는 네모만 잘 보입니다.

크게 보는 것과 원래 없던 세부가 생기는 것은 다른 일입니다. 사진 안에 무엇이 들어 있는지부터 보면, 이 네모도 조금 이해됩니다.

사진 안에는 작은 색 정보가 줄지어 있습니다

JPEG나 PNG 같은 래스터 이미지는 가로·세로로 배열된 픽셀 격자로 표현됩니다.^[1] 여기서 이미지 픽셀은 사진을 이루는 작은 색 정보의 단위라고 생각하면 됩니다.

가로 800, 세로 600픽셀인 이미지는 한 장 기준으로 800×600개의 위치에 색 정보를 담는 셈입니다. 이 가로·세로 픽셀 수와 화면에 얼마나 크게 펼쳐 보일지는 구분해야 합니다.

같은 16칸을 넓게 펼쳤더니 각 칸의 모양은 잘 보입니다. 하지만 칸 사이에 새로운 풍경이 기록된 것은 아닙니다. 사진을 크게 표시하는 것만으로 촬영 당시의 세부가 더 생기지는 않습니다.

어떤 사진은 네모보다 흐릿하게 보이던데요

확대할 때 늘 네모가 또렷해지는 것은 아닙니다. 앱이나 브라우저는 주변 색을 이용해 사이를 부드럽게 채우는 보간 방식으로 표시할 수도 있습니다. 반대로 색 경계를 뚜렷하게 유지하는 확대 방식도 있습니다.^[2]

그래서 같은 작은 이미지라도 확대하는 방식에 따라 계단처럼 보이거나 흐릿해질 수 있습니다. 부드럽게 보인다고 원본에 없던 글자의 획까지 정확히 알아낸 것은 아닙니다.

이미지를 더 많은 픽셀 수로 다시 저장하는 작업도 있습니다. 하지만 픽셀 수를 늘렸다는 것만으로 잃어버린 원본 세부까지 정확히 복원했다고 할 수는 없습니다. 어떤 처리를 했는지와 원본에 남은 정보가 중요합니다.

로고는 크게 해도 괜찮은 경우가 있던데요

일부 로고나 아이콘은 색 격자 대신 선과 곡선, 위치 같은 형태를 그리는 규칙으로 표현합니다. 이런 방식을 벡터 그래픽이라고 합니다. SVG는 이런 도형을 표현할 수 있는 형식입니다.^[3]

도형을 그리는 규칙이 있으니 다른 크기에 맞춰 다시 그릴 수 있습니다. 작은 격자를 그대로 넓히는 것과는 다른 점입니다. 다만 SVG 안에도 래스터 이미지를 넣을 수 있어서, SVG라는 이름만으로 모든 부분이 아무리 커져도 선명하다고 보장할 수는 없습니다.^[3]

작은 사진의 확장자만 .svg로 바꾼다고 사진이 벡터 도형으로 바뀌지도 않습니다. 실제 형식 변환과 파일 이름 변경은 29편에서 구분했던 것처럼 다른 작업입니다.

‘픽셀’이라는 말도 어디의 픽셀인지 보기

이미지 파일의 픽셀 수, 웹에서 크기를 정하는 CSS의 px, 디스플레이의 물리 픽셀은 같은 대상을 세는 말이 아닙니다. 화면 배율과 기기에 따라 CSS의 1px을 그리는 데 여러 물리 픽셀이 쓰일 수 있습니다.^[4] 벡터도 화면에 표시될 때는 그 화면의 픽셀로 그려집니다.

따라서 사진 파일의 가로·세로 숫자만 보고 이 화면에서 정확히 몇 센티미터로 보일지 정할 수는 없습니다. 파일 용량인 MB도 가로·세로 픽셀 수와 같은 단위가 아닙니다.

크게 쓸 사진이라면, 먼저 원본부터

• 미리보기나 캡처 대신 원본 파일이 있는지, 파일 정보의 가로·세로 픽셀 수가 얼마인지 확인합니다.
• 실제로 쓸 크기로 놓고 글자와 테두리를 봅니다. 작은 미리보기에서 괜찮았다고 큰 화면에서도 같지는 않습니다.
• 로고라면 벡터 원본이 있는지 확인합니다. 사진의 확장자만 바꾸거나 확대 숫자만 키워 해결됐다고 생각하지 않습니다.

사진은 커졌는데 정보까지 커진 것은 아니었습니다. 확대하기 전에 원본에 얼마나 담겨 있는지 보는 편이 더 빠른 답일 때가 있습니다.