이미지 모서리 · 테두리 미리보기 (둥글기 · 테두리 · 그림자 합성)

%와 px 중 무엇을 쓸 것인가

둥글기를 %로 주면 짧은 변을 기준으로 계산합니다. 정사각형 이미지에 50%를 주면 완전한 원이 되고, 12% 정도면 앱 아이콘처럼 살짝 둥근 사각형이 됩니다. %의 장점은 이미지 크기를 바꿔도 모양이 유지된다는 점입니다. 400px에서 50%였다면 800px에서도 50%가 같은 원입니다. 반대로 px는 크기와 무관하게 고정된 값이라, 여러 장을 같은 두께로 맞추거나 캡처 이미지에 8px·16px처럼 특정 값을 반복해 쓸 때 편합니다. 정사각형이 아닌 이미지에 50%를 주면 원이 아니라 타원이 되는데, 이것은 CSS의 border-radius: 50%와 같은 동작입니다.

원형 프로필 사진을 만드는 순서

사람 얼굴 사진은 대개 세로가 길어서 그대로 원으로 자르면 턱이나 이마가 잘립니다. 순서는 이렇습니다. 먼저 얼굴이 가운데 오도록 사진을 잘라 두고(비율 크롭 도구에서 1:1로 자르면 됩니다), 그 결과를 여기 넣어 정사각형 크롭을 켠 뒤 둥글기를 50%로 둡니다. 테두리를 흰색 6~10px 정도 주면 어두운 배경 위에서도 사진 가장자리가 분명해지고, 그림자를 세로 8px·번짐 20px·농도 25% 정도로 옅게 넣으면 카드 위에 얹힌 것처럼 보입니다. 프로필 이미지는 서비스마다 200~800px을 권하므로 출력 한 변은 400px 전후면 충분합니다.

PNG로만 저장하는 이유

모서리를 둥글게 만들면 네 귀퉁이가 비게 됩니다. 이 빈 곳은 흰색이 아니라 "아무것도 없는" 투명이어야 어떤 배경 위에 올려도 자연스럽습니다. JPEG는 투명을 저장할 수 없어서 귀퉁이가 검정이나 흰색으로 채워지므로, 이 도구는 결과를 항상 PNG로 굽습니다. 사진이 들어간 PNG는 같은 그림의 JPEG보다 용량이 몇 배 큽니다. 웹에 올릴 이미지라면 CSS로 둥글게 처리하고 사진은 JPEG로 두는 편이 용량 면에서 유리합니다. 결과 아래에 CSS를 같이 보여 주는 것도 그래서입니다.

그림자 값 읽는 법

그림자는 가로 이동·세로 이동·번짐·색·농도 다섯 값으로 정해집니다. 가로 0, 세로 양수는 빛이 위에서 내려오는 자연스러운 그림자이고, 세로를 0으로 두고 번짐만 크게 주면 물체 주변이 고르게 어두워지는 발광 반대 효과가 됩니다. 번짐은 그림자의 흐림 정도로, 값이 클수록 넓고 옅게 퍼집니다. 농도는 25% 안팎이 문서용으로 무난하고 50%를 넘기면 인쇄물에서 지저분해 보입니다. 이 다섯 값은 CSS의 box-shadow 순서와 그대로 대응하므로, 결과의 CSS를 복사해 웹에서도 같은 모양을 낼 수 있습니다.

자주 묻는 질문