AWS 아이콘이 블로그에서 흐릿하게 보이는 문제는 다음과 같은 원인들이 있습니다:
🔍 흐릿해지는 원인
1. Figma 내보내기 설정 문제 (해상도)
Figma에서 JPEG/PNG 내보내기 시 @1x(default) 로 내보내면 해상도가 낮아져 흐릿하게 보일 수 있습니다.
특히 블로그에서 큰 크기로 표시될 경우, 저해상도 이미지를 확대하면서 픽셀이 깨지거나 흐릿해지는 현상이 생깁니다.
✅ 해결 방법: Figma에서 내보낼 때 @2x 또는 @3x로 설정해서 내보내세요.
Figma Export 설정에서
+버튼 →PNG선택 →2x,3x로 변경.
2. 이미지 크기와 블로그 표시 크기 불일치
예: 200x200px 이미지를 블로그에서
width="400px"로 표시하면 2배 확대되며 흐릿해집니다.Retina(고해상도) 디스플레이에서는 더더욱 문제가 됩니다.
✅ 해결 방법:
이미지 원본 해상도를 표시되는 크기보다 크게 내보내야 선명하게 보입니다.
예: 블로그에서 400px로 표시할 거면 최소 800px로 내보내기 (
@2x).
✅ AWS 공식 아이콘 다운로드 경로
AWS는 자체적으로 아이콘 및 로고들을 다운로드할 수 있도록 제공합니다:
🔗 공식 AWS 아이콘 리소스
AWS Architecture Icons
👉 https://aws.amazon.com/architecture/icons/제공 포맷:
SVG (벡터) → 무한 확대 가능, 웹용으로 가장 적합
PNG (고해상도)
PPTX, EPS 등도 제공
범위:
각 서비스별 아이콘 (예: EC2, S3, Lambda, DynamoDB 등)
리소스 아이콘, 그룹 아이콘, 일반 컴퓨팅 요소 등
✅ 추천 사용법
가능한 경우 SVG 사용: 가장 선명하고 유연함.
PNG를 써야 한다면:
Figma → PNG @2x 이상으로 내보내기.
블로그에서 실제 표시되는 크기보다 큰 해상도로 내보내기