반응형 웹 디자인 시 모바일과 PC 환경에서 아이콘 사이즈가 달라질 때, 개발팀에 어떻게 전달해야 하는지 궁금합니다. 같은 아이콘으로 사이즈만 조절하는 것인지, 아니면 각각 다른 아이콘으로 전달해야 하는지 문의드립니다.
답변
반응형 웹 디자인에서 아이콘 사이즈가 달라질 경우, 개발팀과의 협업 방식은 다음과 같습니다:
다양한 사이즈의 아이콘 제공: 브라우저 환경에 따라 해상도가 깨질 수 있으므로, 퍼블리셔나 개발자에게는 8의 배수(또는 4의 배수 등 디자인 시스템에서 정한 기준)를 기준으로 다양한 크기의 아이콘 이미지를 각각 제공하는 것이 일반적입니다. 예를 들어, 16x16, 24x24, 32x32, 64x64, 128x128, 256x256, 512x512 등의 사이즈로 준비할 수 있습니다.
SVG 사용 권장: 아이콘은 벡터 기반의 SVG 형식으로 제공하는 것이 가장 좋습니다. SVG는 해상도에 구애받지 않고 어떤 크기로든 확대/축소해도 깨지지 않으므로, 개발자가 CSS로 사이즈만 조절하여 사용할 수 있어 효율적입니다. 필요한 경우 특정 픽셀 크기의 PNG/WebP 이미지도 함께 제공할 수 있습니다.
컴포넌트 및 변수 활용: Figma에서는 아이콘을 컴포넌트로 만들고, 사이즈를 변수(Variables)로 관리하여 다양한 크기의 아이콘을 쉽게 생성하고 관리할 수 있습니다. Dev Mode를 통해 개발자는 필요한 아이콘의 속성과 크기 정보를 쉽게 확인할 수 있습니다.