질문사항
피그마에서 도형이나 프레임에 그림자(Shadow) 효과를 적용했을 때, 개발자에게 어떤 방식으로 전달해야 하나요? 그림자 값을 이미지 소스와 별도로 전달하는 것이 일반적인가요?
답변
피그마에서 도형이나 프레임에 그림자(Shadow) 효과를 적용했을 때, 개발자에게는 일반적으로 그림자 값을 코드 형태로 전달합니다. 그림자 효과를 이미지 소스로 따로 뽑아서 전달하는 경우는 매우 드뭅니다.
전달 방식:
Figma Dev Mode 활용 (권장): 개발자는 Figma의 Dev Mode에서 그림자 효과가 적용된 요소를 선택하면, 해당 그림자에 대한 CSS, iOS, Android 코드 스니펫을 자동으로 확인할 수 있습니다. 예시 (CSS): `box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);` 이 방식이 가장 효율적이고 정확합니다.디자인 시스템 문서화: 디자인 시스템을 구축했다면, 그림자 스타일(예: `Shadow/Small`, `Shadow/Medium`)을 정의하고, 각 스타일에 대한 상세 값(x, y, blur, spread, color)을 문서화하여 개발자가 참조할 수 있도록 합니다.직접 소통: 복잡하거나 비표준적인 그림자 효과의 경우, 개발자와 직접 소통하여 구현 방식을 논의하는 것이 좋습니다.그림자 효과를 이미지로 전달하는 경우 (예외적):
매우 복잡하거나, CSS/네이티브 코드로 구현하기 어려운 특수한 그래픽 효과의 일부로 그림자가 포함된 경우에만 이미지로 전달될 수 있습니다. 하지만 일반적인 UI 요소의 그림자는 코드로 구현하는 것이 성능과 유지보수 측면에서 훨씬 유리합니다.