SwiftUI에서 Figma 그림자 Blur, Spread 반영에 대한 고찰

SwiftUI 와 Figma가 그림자를 렌더링 하는 방식이 다르다는 것은 알고 있었지만

Figma 그림자의 Blur, Spread를 SwiftUI와 UIKit에서는 존재하지 않습니다.

 

 

Figma의 그림자 속성을 보겠습니다.

- Blur: 그림자의 흐림/퍼짐 정도 

- Spread: 그림자의 확산 정도

 

그럼 SwiftUI를 보겠습니다.

- Radius: 그림자 흐림 / 퍼짐 정도

 

그럼 Blur는 Radius로 어느정도 대체 가능하겠지만(완벽하게 같지는 않음)

Spread에 대한 값을 정해주어야합니다.

 

테스트 해보기

현재 저희 팀의 값은 아래와 같이 사용하고 있습니다.

Figma 셋업 환경

Cell

그림자 레이어 1 -> x: 0px y: 1px B: 8px S: 0px
그림자 레이어 2 -> x: 0px y: 3px B: 4px S: 0px 
그림자 레이어 3 ->x: 0px y: 3px B: 3px S: -2px 

 

팝업창

그림자 레이어 1 -> x: 0px y: 3px B: 14px S: 2px

그림자 레이어 2 -> x: 0px y: 8px B: 10px S: 1px

그림자 레이어 3 -> x: 0px y: 5px B: 5px S: -3px

 

 

테스트 계획

 

테스트 1, (아래 중앙 사진)

Spread값 만큼 Radius를 더하기

spread가 확산값이므로 그만큼 Radius를 더해주면 어느정도 보정을 할 수 있다는 생각입니다.

 

테스트 2, (아래 우측 사진)

Spread값이 0이 아닌경우에 x, y값을 Spread만큼 조절해보기

Spread가 퍼지는 정도 이므로 그림자의 위치 Spread만큼 조절할 계획입니다.

테스트 결과

좌측부터  Figma / (첫번째 테스트) shadowRadius: blur + spread / (두번째 테스트) x: x + spread, y:  x: y + spread

 

좌측부터, Figma, 첫번째 테스트, 두번째테스트 입니다.

 

사실 이렇게 보면 Spread가 들어간 View의 그림자를 알 수 없어 Red색상에, opacity를 1을 주어서

명확하게 어떻게 그려지는지 알 수 있도록 했습니다.

 

그 전에 Figma에서 Spread가 어떻게 작동하는지 알아봅시다.

 

Spread -2

Spread +2

 

Spread 값이 작아지면 객체 뒤로 들어가고 커지면 객체 밖으로 나오는 것을 확인 할 수 있습니다.

 

아래는 위에서 보았던 테스트입니다.

그림자색을 빨간색으로 바꾸고 흐림효과를 없애서 Spread가 어떻게 작동하는지 확인해봤습니다.

 

좌측부터  Figma / (첫번째 테스트) shadowRadius: blur + spread / (두번째 테스트) x: x + spread, y:  x: y + spread

팝업은 제외하고 

기준은  Blur 3, Spread -2 입니다.

 

첫번째: Figma 

-2정도의 Spread로 양쪽은 모두 객체뒤로 들어가고 아래만 보이는 것을 알 수 있습니다.

 

두번째: shadow blur + spread 값을 shadow Radius에 반영.

Blur값이 3이므로 shadow radius는 1이 됩니다

 

Figma의 spread 0 값과 비슷하게 보입니다.

 

Figma Color: red Blur: 3, Spread: 0 의 View

 

어느정도 온 것 같습니다.

그림자를 Cell 아래 레이어로 넣으면서 Spread가 양수일때와 음수일때에 따라 나누어 적용하는 방향으로 구현해봐야겠습니다.

그렇게 한다면 완벽하진 않더라도 유사하게 작동하도록 할 수 있을 것 같습니다.

 

 

아쉽게도 아직 해결된 과제는 아닙니다.

보다 더 연구가 되면 2편을 올리도록 하겠습니다.