SNS 아이콘 크기 정하는 법｜동그랗게 잘려도 무너지지 않는 이미지 만드는 법

아이콘은 “정사각형으로 만들어 원으로 잘린다”

대부분의 SNS는 올린 이미지를 정사각형으로 잘라낸 뒤, 표시할 때 원형으로 마스킹합니다. 즉 만들 때는 정사각형, 보이는 것은 원이라는 2단 구조입니다. 이것을 모르고 사각형 모서리까지 디자인하면 공개하는 순간 정보가 사라집니다.

• 정사각형이 아닌 이미지를 올리면 가운데를 기준으로 정사각형으로 잘린다(긴 변의 양 끝이 떨어진다)
• 표시할 때 원으로 마스킹되어 정사각형의 네 모서리가 또 떨어진다
• 목록이나 댓글란에서는 수십 px 정도까지 축소되어 가는 선이나 작은 글자는 뭉개진다

이 3단계를 거쳐도 남는 것만이 실제로 사람 눈에 들어가는 아이콘입니다. 거꾸로 말하면 가운데에 크게 요소 하나만 두면 어떤 SNS에서도 무너지지 않습니다.

크기는 “큼직한 정사각형 한 장”이면 된다

SNS별 권장 크기는 사양 변경으로 바뀌지만, 공통점은 “올린 이미지는 각 서비스 쪽에서 축소된다”는 점입니다. 축소는 깨끗하게 되는 반면 확대는 반드시 흐려집니다. 따라서 실제 표시 크기보다 큰 정사각형을 한 장 준비해 두면 충분합니다.

원으로 잘려도 남는 “안전 영역” 잡는 법

정사각형 이미지에 내접하는 원을 그리면 네 모서리는 반드시 떨어집니다. 원 안에 확실히 들어가는 정사각형은 원래 한 변의 약 70%입니다. 디자인할 때는 이 가운데 70% 정사각형을 안전 영역으로 생각합니다.

1. 1

   캔버스를 정사각형으로 만든다

   800×800px 등 정사각형으로 작업을 시작합니다. 직사각형으로 만들어 나중에 자르면 의도하지 않은 위치에서 잘립니다.

2. 2

   가운데 70%에 주인공을 넣는다

   800px라면 가운데 560px 사방이 안전 영역입니다. 얼굴이라면 눈부터 입까지, 로고라면 마크 전체를 이 범위에 넣습니다.

3. 3

   네 모서리는 배경색만 둔다

   네 모서리는 원형 마스크로 사라진다는 전제입니다. 장식을 두어도 상관없지만 사라져도 의미가 바뀌지 않는 것만 둡니다.

4. 4

   축소해서 확인한다

   완성하면 화면에서 48px 정도까지 줄여서 봅니다. 이 크기에서 무엇이 그려져 있는지 모르겠다면 요소가 너무 많은 것입니다.

글자를 넣는다면 최대 2~4자까지로 합니다. 48px로 축소된 아이콘에서 읽을 수 있는 것은 그 정도가 한계입니다. 이름을 전부 넣고 싶을 때는 아이콘이 아니라 헤더 이미지나 프로필 카드의 역할입니다.

가진 소재로 아이콘을 준비하는 순서

찍은 사진, 그린 일러스트, 도트 그림 어느 것이든 흐름은 같습니다. “정사각형으로 만든다 → 주인공을 가운데로 모은다 → 형식을 정리한다”의 3단계입니다.

1. 1

   소재를 정사각형으로 잘라낸다

   사진이라면 스마트폰 기본 사진 앱으로도 정사각형 트리밍을 할 수 있습니다. 이때 상하좌우에 여백을 조금 남겨 두면 원형 마스크로 답답한 인상이 되지 않습니다.

2. 2

   선이 또렷한 그림을 쓸 때는 도트로 만든다

   도트 아트 도구라면 16×16이나 32×32 그리드로 모양을 정할 수 있습니다. 도트로 만든 그림은 윤곽이 분명해서 작게 표시되어도 무엇인지 알아보기 쉽다는 것이 장점입니다.

3. 3

   형식과 용량을 정리한다

   이미지 형식 변환 도구로 PNG·JPEG·WebP를 서로 변환할 수 있습니다. JPEG와 WebP는 화질 슬라이더로 용량을 조정할 수 있습니다. 여기서는 형식과 화질만 변환하고 크기는 바뀌지 않습니다. 정사각형으로 잘라 800×800px로 맞추는 것까지 하려면 이미지 크기 조정·크기 계산의 “SNS 아이콘” 프리셋을 쓸 수 있습니다. 내보낸 미리보기에 원형 마스크와 가운데 70% 안전 영역을 겹쳐 확인할 수 있습니다.

4. 4

   올리고 실제 기기에서 확인한다

   게시물 목록, 댓글란, 다크 모드 3곳에서 보이는 모습을 확인합니다. 특히 다크 모드는 흰 배경 아이콘이 붕 떠 보이기 쉬운 곳입니다.

PNG·JPEG·WebP 중 무엇을 고를까

망설여지면 PNG로 문제없습니다. 아이콘은 이미지로서 작아서 용량이 문제가 되는 경우가 거의 없기 때문입니다. 업로드할 때 “지원하지 않는 형식입니다”라고 나올 때만 PNG나 JPEG로 변환해 다시 올립니다.

공개 전 체크리스트

• 정사각형인가(가로세로 px가 같은가)
• 가운데 70% 범위에 주인공이 들어가 있는가
• 48px 정도로 줄여도 무엇인지 알 수 있는가
• 배경이 너무 연해서 흰 배경·검은 배경에 녹아들지 않는가
• 남의 작품이나 브랜드 로고를 무단으로 쓰고 있지 않은가
• 같은 이미지를 여러 SNS에서 쓴다면 어디서든 같은 인상으로 보이는가

아이콘은 게시물보다 먼저 눈에 들어오는 요소입니다. 공들인 디자인보다 작아도 한눈에 “그 사람이다”라고 알 수 있는 쪽이 효과가 있습니다. 한번 정하면 당분간 바꾸지 않는 편이 알아보기 쉬워집니다.

자주 묻는 질문

아이콘은 몇 px로 만드는 것이 정답인가요?

800×800px 안팎의 정사각형으로 만들어 두면 주요 SNS의 권장 크기를 웃돌아 축소만으로 끝납니다. 각 서비스의 권장값은 400×400px 안팎인 경우가 많고, 그보다 작은 이미지를 올리면 확대되어 흐려집니다. 정확한 상한이나 권장값은 바뀔 수 있으므로 필요하면 각 서비스의 도움말에서 확인하세요.

올렸더니 얼굴이 잘려 버립니다.

직사각형 이미지는 가운데를 기준으로 정사각형으로 잘리고, 다시 원형으로 마스킹되기 때문입니다. 미리 정사각형으로 트리밍하고 얼굴이 가운데 70% 범위에 들어가도록 여백을 더하세요. 전신 사진을 아이콘으로 하면 얼굴이 너무 작아지므로 가슴 위를 기준으로 잘라냅니다.

아이콘이 흐려지는 것은 왜인가요?

표시 크기보다 작은 이미지를 올려 확대되고 있거나, 한 번 압축된 이미지를 다시 저장해 열화된 것 중 하나입니다. 원본 데이터로 다시 만들어 큼직한 정사각형으로 내보내세요. 도트 그림은 확대 배율이 정수가 아니면 윤곽이 번지므로 2배·4배 같은 정수배로 내보냅니다.

여러 SNS에서 같은 아이콘을 써도 되나요?

같게 하는 편이 알아보기 쉬워집니다. 정사각형 이미지 한 장을 준비해 각 서비스에 올리면 잘라내기는 각 서비스 쪽에서 이루어집니다. 다만 서비스에 따라 원형과 둥근 모서리 중 어느 것으로 마스킹하는지가 다르므로, 네 모서리에 정보를 두지 않는 방식으로 만들어 두면 어느 쪽이든 무너지지 않습니다.