디자인 시스템 실무! 아이콘과 이미지 활용법

안녕하세요, 게으른 사부작이입니다!

 

오늘은 디자인 시스템에서 빠질 수 없는 요소, 바로 아이콘과 이미지 활용법에 대해 이야기해보려고 해요. 아이콘과 이미지는 UI에서 정보를 빠르게 전달하고, 디자인을 더 돋보이게 하는 데 큰 역할을 하죠. 하지만 잘못 사용하면 오히려 디자인이 망가지기 쉽더라고요. 저도 시행착오를 겪으면서 배운 게 많아서, 오늘 그 경험을 공유해 볼게요. 그럼 저와 함께 아이콘과 이미지를 효과적으로 활용하는 법을 알아볼까요?

 

ChatGPT 생성 이미지

아이콘이 너무 커서 망한 디자인을 본 적이 있어요

제가 처음 앱 UI를 만들 때의 일이에요. "좋아요" 버튼에 하트 아이콘을 넣으려고 무료 아이콘을 다운로드하여서 추가했는데, 아이콘이 너무 커서 버튼이 터질 것 같았어요. 심지어 다른 화면에서는 "설정" 아이콘이 너무 작아서 잘 안 보이더라고요. 결국 UI가 어수선해 보이고, 사용자 입장에서도 "이게 뭐지?" 하며 혼란스러울 것 같았죠. 그때 깨달았어요. 아이콘과 이미지는 단순히 예쁘기만 해선 안 되고, 크기와 스타일을 체계적으로 관리해야 한다는 걸요. 여러분도 아이콘이나 이미지 때문에 디자인에서 고생한 적 있나요? 저는 그 이후로 아이콘과 이미지를 제대로 활용하는 법을 배우게 됐어요.

아이콘 스타일 통일: 선 vs 채움

아이콘을 활용할 때 가장 중요한 건 스타일의 통일성이에요. 아이콘 스타일은 크게 선(Line) 스타일과 채움(Filled) 스타일로 나뉘어요. 선 스타일은 얇은 선으로만 이루어진 아이콘이고, 채움 스타일은 내부가 색으로 채워진 아이콘이에요. 예를 들어, "좋아요" 하트 아이콘을 선 스타일로 할지, 채움 스타일로 할지 정하는 거죠.

디자인 시스템에서는 한 가지 스타일을 선택해서 통일하는 게 중요해요. 예를 들어, 제가 만든 앱 UI에서는 모든 아이콘을 선 스타일로 통일했어요. "좋아요" 하트, "설정" 톱니바퀴, "검색" 돋보기까지 모두 선 스타일로 맞추니까 UI가 훨씬 깔끔해 보이더라고요. 반면, 선 스타일과 채움 스타일을 섞으면 한 화면에서 어지럽게 보일 수 있어요. 제가 본 쇼핑 앱은 메인 화면에서 선 스타일 아이콘을, 결제 화면에서 채움 스타일 아이콘을 써서 통일감이 없었어요. 이런 실수를 피하려면 디자인 시스템 초기에 아이콘 스타일을 정해놓는 게 좋아요.

아이콘 크기도 통일해야 해요. 일반적으로 아이콘은 24px x 24px 또는 32px x 32px로 설정하는 경우가 많아요. 너무 크면 UI를 압도하고, 너무 작으면 잘 안 보이니까 적당한 크기를 찾는 게 중요하죠. 저는 Figma에서 아이콘 크기를 미리 설정해 놓고, 모든 화면에서 똑같이 적용했어요. 이렇게 하면 일관성이 유지돼서 사용자 경험이 훨씬 좋아져요.

이미지 크기와 비율 가이드라인

다음으로 이미지 활용법을 알아볼게요. 이미지는 UI에서 시각적 매력을 더해주지만, 크기와 비율을 잘못 관리하면 디자인이 망가지기 쉬워요. 디자인 시스템에서는 이미지의 크기와 비율을 미리 정해놓는 가이드라인이 필요해요.

• 크기 관리: 예를 들어, 앱에서 프로필 사진을 원형으로 표시할 때, 모든 사진이 48px x 48px로 통일되도록 설정하는 거예요. 제가 처음엔 사진 크기를 제각각으로 설정해서 어떤 프로필은 너무 크고, 어떤 프로필은 너무 작아서 어색했어요. 크기를 통일하니까 훨씬 깔끔해 보이더라고요. 일반적으로 썸네일은 100px x 100px, 배너 이미지는 1200px x 400px 정도로 설정하는 경우가 많아요.
• 비율 관리: 이미지의 가로세로 비율도 중요해요. 예를 들어, 배너 이미지는 3:1 비율(가로가 세로의 3배), 카드 이미지는 4:3 비율로 설정하면 균형이 좋아요. 제가 본 블로그 앱은 썸네일 비율이 제각각이라 한 화면에서 이미지가 들쑥날쑥해 보였어요. 비율을 통일하니까 UI가 훨씬 정돈된 느낌이 들더라고요.

이미지를 사용할 때는 압축도 신경 써야 해요. 고해상도 이미지를 그대로 쓰면 앱 로딩 속도가 느려질 수 있거든요. 저는 TinyPNG 같은 무료 툴을 써서 이미지 파일 크기를 줄였더니 로딩 속도가 빨라졌어요. 이런 작은 팁들이 사용자 경험을 크게 개선해 줘요.

무료 아이콘 사이트 추천: Flaticon

아이콘을 직접 그리는 게 어렵다면, 무료 아이콘 사이트를 활용하는 걸 추천드려요. 제가 가장 좋아하는 사이트는 Flaticon이에요. Flaticon은 수십만 개의 무료 아이콘을 제공하고, 선 스타일, 채움 스타일, 컬러까지 선택할 수 있어서 정말 편리해요. 예를 들어, "좋아요" 하트 아이콘을 검색하면 다양한 스타일이 나오는데, 제가 원하는 선 스타일로 다운로드하여서 바로 썼어요.

Flaticon에서 아이콘을 다운로드할 때는 PNG나 SVG 포맷으로 받는 걸 추천드려요. SVG는 벡터 파일이라 크기를 조절해도 깨지지 않아서 UI 작업에 딱이죠. 다만, 무료 버전은 사용 시 출처를 표기해야 하니까, Flaticon 사이트에서 제공하는 크레디트 링크를 꼭 넣어주세요. 저는 Flaticon 덕분에 아이콘 작업 시간이 절반으로 줄었어요. 다른 추천 사이트로는 Icons8과 The Noun Project도 있으니, 한 번 둘러보세요!

실무 팁: 일관성과 접근성 고려하기

아이콘과 이미지를 활용할 때 몇 가지 실무 팁을 더 드릴게요. 먼저, 일관성을 유지하는 게 중요해요. 예를 들어, 모든 아이콘을 24px로 통일하고, 스타일도 선 스타일로 맞추는 거예요. 또, 접근성도 고려해야 해요. 색맹 사용자를 위해 아이콘에 색상만 의존하지 말고, 텍스트 라벨을 함께 제공하는 게 좋아요. 예를 들어, "삭제" 아이콘 옆에 "삭제"라는 텍스트를 추가하면 더 직관적이죠.

이제 토큰으로 한 단계 업그레이드 해볼게요!

아이콘과 이미지 활용법을 알아보니, 작은 요소 하나도 체계적으로 관리해야 디자인이 깔끔해진다는 걸 알게 됐어요. 스타일과 크기를 통일하고, 무료 리소스를 활용하면 초보자도 멋진 UI를 만들 수 있죠. 이제 아이콘과 이미지도 정리됐으니, 다음 포스트에서는 디자인 시스템을 한 단계 업그레이드할 수 있는 디자인 토큰에 대해 알아볼게요. 여러분은 어떤 아이콘을 써보셨나요? 저는 Flaticon에서 다운로드한 하트 아이콘이 제일 마음에 들더라고요. 댓글로 여러분의 경험도 공유해 주세요!