인프런 커뮤니티 질문&답변

질문 주셔서 감사합니다. 아이콘을 관리하는 방법은 정말 다양합니다. 다른 디자인 시스템들을 찾아보셔도, 팀마다 방식이 전부 제각각일 거예요.

그래서 강의에서 나온 방법을 “정답”이라고 생각하기보다는, 기본 개념과 원리를 이해한 뒤 지금 환경에 맞게 개선해 나가는 방식으로 접근하시면 좋습니다.

제가 지금 수강생 분께서 일하시는 회사에서 아이콘이 어떻게 구성되어 있는지, 또 개발 쪽에서 어떤 방식으로 관리하는지는 정확히 알 수 없지만, 일반적으로는 두 가지 방향이 있습니다.

1) 아이콘을 사이즈별로 따로 관리하는 방식

아이콘을 16px, 20px, 24px처럼 사이즈별로 별도 파일/컴포넌트로 관리하는 시스템도 있습니다.

개인적으로는 관리 비용이 커져서 선호하진 않지만, 만약 사이즈가 작아질수록 픽셀 단위로 더 정교하게 굵기나 디테일을 조정해야 한다면(예: 16px에서 선이 뭉개지는 문제), 이 방식이 더 안전할 수 있습니다.

그런 경우에는 사이즈별 아이콘을 따로 만드는 게 맞는 선택입니다.

2) 강의에서 제안한 방식(더미 아이콘 + 기준 아이콘)

강의에서 제안한 방식은, 예를 들어 기준 아이콘을 24px로 만든다고 가정했을 때:

• 더미 아이콘(여러 사이즈용)을 먼저 만들고

• 실제 개별 아이콘은 24px 기준으로 제작한 뒤

• 더미 아이콘 안에서 실제 아이콘을 “교체”하는 방식입니다.

   

이 방식이 잘 동작하려면, 개별 아이콘이 아래처럼 정의되어 있어야 합니다:

• Constraints가 상/하/좌/우 Scale

• 내부가 면(Shape) 으로 되어 있음

• 레이어 이름이 동일하게 유지됨

   

이 조건이 맞으면, 더미 아이콘에서 개별 아이콘으로 교체해도 더미 아이콘의 사이즈에 맞춰 자연스럽게 리사이즈됩니다.

3) 이 개념을 응용하면: 아이콘 컴포넌트 + 사이즈 Variant

같은 원리를 활용해서:

• 아이콘을 하나의 아이콘 컴포넌트로 만들고

• 16/20/24/32 같은 사이즈 Variant를 만든 다음

• 내부 더미 아이콘만 교체해도

  결과물을 동일하게 만들 수 있습니다.

다만 2번째, 3번째 방식의 한계도 있습니다. 이 방법의 한계는 “선 두께”처럼 단순 배수 확대가 항상 정답이 아닐 때 생깁니다.

예를 들어, 24px에서 stroke가 1.5px이면 48px로 키웠을 때 자동으로 3px처럼 “배수”로 늘어날 수 있는데, 만약 내가 48px에서는 3px이 아니라 4px로 조정하고 싶다면, 이 자동 스케일 방식만으로는 해결이 어렵습니다. 그럴 때는 결국 앞에서 말한 것처럼 사이즈별로 아이콘을 따로 만들어 관리(첫번째 방식)해야 더 정확하게 컨트롤할 수 있습니다.

궁금하시면 더 질문 주세요.

개념적인 설명은 이해했는데, 실제로 Figma에서 어떻게 구성해야 하는지 아직 감이 잘 잡히지 않아 질문드립니다.

가능하시다면 아이콘 컴포넌트를 어떤 순서로 만들고, 관리하는지 등 단계별로 설명해주실 수 있을까요?

안녕하세요, 인프런 AI 인턴입니다. wlsgks406님.

피그마에서 아이콘 사이즈를 설정하는 방식에 대한 질문에 대해 관련된 정보를 제공드리겠습니다. 디자인 시스템에서는 아이콘의 표준화와 효율적인 관리를 위해 몇 가지 접근 방식을 사용할 수 있습니다.

주제 요약

아이콘을 개별적으로 각각 다른 사이즈로 컴포넌트화하는 방법과 모든 아이콘을 하나의 규칙으로 관리하는 방법 중 어느 것을 선택해야 하는지에 대한 고민이군요.

아이콘 관리 방법

1. 각기 다른 컴포넌트로 관리하기:

   • 장점: 개별 아이콘이 각 사이즈별로 명확하게 관리되며, 모든 상태를 구체적으로 설정하고 커스터마이징하기 쉬움.
     
   • 단점: 모든 아이콘마다 동일한 작업을 반복해야 하므로 관리 및 초기 설정이 번거로울 수 있음.
     

2. 하나의 규칙으로 관리하기:

   • 장점: 공통 규칙을 설정하므로 유지관리의 효율성이 높아지고, 변경사항 적용이 간단해짐.
     
   • 단점: 각 아이콘의 특수한 요구에 따라 유연성이 떨어질 수 있음.
     

권장 설정 방식

디자인 시스템 관점에서, 크기나 스타일의 유연성보다 통일성과 효율성이 강조될 경우 전체 아이콘을 하나의 컴포넌트로 묶고, 사이즈별로 벡터 크기를 조절하는 방식이 많이 사용됩니다. 이렇게 하면 아이콘의 기본 크기와 스타일 가이드를 통해 모든 팀이 쉽게 접근하고 사용할 수 있습니다. 그리고 필요한 경우 특정 아이콘의 크기를 수정하여 개별적으로 관리할 수도 있습니다.

관련 질문과 답변

• 텍스트 상자 placeholder의 icon과 텍스트 배열 관련: 이 답변에서는 텍스트 필드 내 아이콘 배치와 크기 조절에 대한 유용한 팁을 제공합니다.
  
• 베릴어블, 아이콘에 궁금한점이있습니다 ㅎㅎ: 아이콘 크기 조정에 관련된 다양한 이슈와 해결책을 다루고 있습니다.
  

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.