그림자가 있는 아이콘을 개발자에게 전달하는 방법은 무엇인가요?

Question

안녕하세요 Export 부분에 궁금한 점이 생겨 질문을 드립니다. Figma에서 Effect를 이용하면 각각의 구성요소에 쉽게 그림자를 넣을 수 있는 것은 이해했습니다. 다만 export시 그림자가 포함되어 사이즈가 커진( 실제 아이콘의 사이즈가 아닌 ) 이미지가 출력됩니다. Q1. 만약 개발자에게 그림자 효과가 들어간 디자인을 제공하고 싶은 경우, Export하는 이미지에 effect는 제거하고 해당 효과는 개발자가 직접 구현하라고 하는 것이 일반적인가요? 아니면, 이펙트가 없는 원본 이미지와 이펙트만 보이는 이미지를 제공해서, 개발자가 두개를 겹치도록 하여 이펙트를 표현하도록 해야되나요? (요약) 그림자와 같은 이펙트가 있는 경우 개발자에게 전달하는 방법이 궁금합니다.

에릭 · Answer

jhjhjh96님 안녕하세요. 질문 감사드립니다. 네, 말씀하신 것처럼 아이콘에 Effect를 넣은 상태에서 출력을 할 경우, 이미지의 사이즈가 더 크게 출력이 됩니다. 저는 이런 경우에 만약 개발자와 커뮤니케이션이 가능할 경우, 먼저 상의를 할 것 같습니다.  개발자 분이 작업을 할 때에 어떤 형식을 선호하는지 물어보고 그에 맞춰서 전달을 할 것 같아요. 개발자 분의 선호도에 따라 아이콘은 Effect없이, Effect는 피그마 Hand-off에서 따로 볼 수 있도록 하는 식으로 전달을 할 수 있고, 함께 합쳐서 (더 커진 사이즈의 이미지를) 전달을 할 수도 있을 것 같아요. 다만, 더 커진 사이즈의 이미지를 전달해야 경우, 이게 Hand-off 파일에도 화면 상에서 커진 사이즈 기준으로 어디에서 얼만큼의 영역을 차지하고 있는지 표현을 해줘야 할 것 같습니다.  예시로 아래와 같이 만들어봤는데요. 사각형의 아이콘은 40x40인데, 이거를 Effect를 적용해서 SVG로 출력을 하고보니 48x48이 되었습니다.  그래서 스크린 (여기서는 iphone 기준으로  frame을 만들었습니다.) 내에 48x48을 차지하도록 아이콘을 Frame에 넣어줬습니다. 또 궁금한 점이 있다면 말씀주세요^^ 감사합니다.