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

개발자aws님, 우선 질문 주셔서 감사합니다.

아이콘을 작게 만들어야 하는 이유를 강의에서 기초 이론까지 다루지 못하다 보니, 그 부분이 다소 납득되지 않으셨던 것 같습니다.

아이콘 디자인은 보통 아래와 같이 키 라인(Key Line) 을 기본 템플릿으로 삼아 그 안에서 작업을 진행합니다. 이때 좌우 패딩 여백을 2px 정도 두는 경우가 많습니다.

즉, 전체 크기가 24px이라 해도 실제 디자인은 내부 20px 영역에서 이루어지게 되죠. 이렇게 하면 기본적으로 텍스트와 비율이 잘 맞습니다.

다만 제 강의에서는 직접 아이콘을 제작하기보다는 기존에 만들어진 아이콘(FeatherIcon)을 활용합니다. 그런데 이런 아이콘들은 대체로 패딩을 고려하지 않고 꽉 채워져 있습니다. 그래서 이를 가져온 후 양쪽에 2px 여백을 추가하는 튜닝 작업이 필요합니다. 그리고 그 작업을 강의에서 진행을 합니다.

그렇다면, 이렇게 수정한 아이콘을 개발 단계로 넘길 때는 어떻게 해야 할까요?

1. 아이콘 패키지 활용 시:

   일부 개발자분들은 아이콘 NPM 패키지를 가지고 와서 그대로 사용하시기도 합니다. 이 경우 아이콘은 꽉 채워진 형태로 들어가게 됩니다. 따라서 아이콘 컴포넌트를 따로 제작하여 2px 여백을 반영하기도 하고, 반대로 그냥 꽉 채워진 상태로 두기도 합니다.

2. 튜닝한 아이콘 직접 내보내기:

   새롭게 조정한 아이콘을 내보내는 방법도 있습니다. 다만 이 경우 SVG를 바로 내보내면 currentColor 속성이 적용되지 않아 색상 변경이 어려울 수 있습니다. 이런 상황에서는 별도의 플러그인(svg Export)을 사용하여 문제를 해결할 수 있습니다. 이경우 monochrome으로 설정하시고 내보냈을 때, currentcolor로 색상을 쉽게 조절할 수 있습니다.

https://www.figma.com/community/plugin/814345141907543603

닉네임에 “개발자”라는 단어가 포함되어 있어 조금 더 깊이 설명을 드렸습니다.

도움이 되셨길 바랍니다.

감사합니다.

볼드 드림.

안녕하세요, 인프런 AI 인턴입니다. 개발자aws님!

아이콘 사이즈 조정 시 플러그인을 사용하는 이유와 그 과정에 대해 설명해 드리겠습니다.

1. 아이콘 크기 조정 이유:

   • 디자인 작업에서 아이콘은 화면 해상도에 맞게 최적화되어야 합니다. 작은 화면이나 특정 디자인 요소 내부에 배치될 때, 아이콘이 너무 크거나 작지 않도록 크기를 조정하는 것이 중요합니다.
     
   • 특히, 아이콘의 크기가 UI의 일관성과 사용자의 시각적 만족도에 직접적인 영향을 미치기 때문에 적절한 크기로 조정하는 것이 필수적입니다.
     

2. FrameAll 플러그인의 활용:

   • 해당 플러그인은 여러 개의 아이콘을 한 번에 선택하여 각 아이콘의 사이즈를 균일하게 조정할 수 있게 도와줍니다.
     
   • 이는 수동으로 각각의 아이콘 크기를 조정하는 번거로움을 줄이고, 정확한 비율로 아이콘이 조정되도록 해 작업 효율성을 높이는 데 큰 장점이 있습니다.
     

유사한 질문과 답변을 포함한 예제를 참조하실 수 있는 링크를 제공합니다.

• 아이콘 등록 방법-아이콘 색상 변환 - 이 게시물에서는 아이콘 등록 시 축소 조정 방법과 색상 변환에 대한 해결책을 찾을 수 있습니다.
  

궁금증이 해결되셨기를 바라며, 추가적으로 궁금한 사항이 있으면 언제든지 질문해 주세요. 곧 지식공유자께서 더 자세한 답변을 주실 것입니다.

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