[UIKit] 버튼이 투명색이라서 그림자가 생기지 않는 문제!

해당 글과 관련된 Pull Request를 올려둡니다. 왜냐면!! 굉장히 자세하게 리뷰해놧기 때문~~ 가서 어떻게 개발했는지, 전체 코드를 살펴보실 수 있습니다. 후후 😇

https://github.com/DeveloperAcademy-POSTECH/MacC-Team-EarthValley80/pull/117

[FEAT] 공통으로 사용되는 GotoSomewhereButton의 UI를 변경했습니다. by deslog · Pull Request #117 · DeveloperAca

 

🟣 내가 만들어야 할 버튼

내가 만들어야할 버튼은, 아래처럼 둥글고 이쁘고 그림자진 버튼이다.

Design by. 안은지

해당 버튼을 만들기 위해서, 기존에 만들어둔 버튼을 수정해야했다. 기존버튼은 그냥 검정색이었고, 내가 추가로 개발해야하는 것은, '기사 공유하기'버튼은 약간 투명색을 띈 배경색을 갖는것이랑, 버튼들의 shadow를 설정하는것!

넹,, 버튼에 shadow를 넣어주어야했습니다. 버튼에 shadow를 넣으면서 만난 문제는, 바로 '기사 공유하기'버튼이 투명하기 때문에 그림자가 생기지 않는다는 점이었습니다. (상당히 물리같더라고요... 버튼이 투명하기때문에 그림자가 생기지 않다고라고라고라,,,)
이것을 해결하기 위해서,,, 수단과 방법을 가리지않고 여러가지로 도전해봤는데,, 그 과정을 여기다가 작성합니다.

 

🟣 버튼을 투명색으로 만들면, 그림자가 생기지 않는다.

🙌🏻 그림자를 준 방법

self.layer.shadowOpacity = 0.4
self.layer.shadowRadius = 20
self.layer.shadowOffset = CGSize(width: 4, height: 10)
self.layer.shadowColor = UIColor.evyBlack1.cgColor

 

1️⃣ 버튼의 색상에 alpha값을 넣어서 투명하게 만들어주자.

• 버튼이 흰색이라 잘보이게 하기 위해서 빨간배경을 넣었다.
• 다읽었어요 / 기사 공유하기 글자 말고 배경색을 투명하게 만들었다.

// hex를 넣어서 UIColor를 변경하는 extension을 만들어두어서 이렇게 작성함.

UIColor(hex: "#FFFFFF", alpha: 0.14)

이렇게 하니까, 배경은 투명색이 되었는데 정작 위에서 작성해준 그림자가 생기지 않는다. (비교를 위해 아래 두가지의 사진을 넣어본다.)

 

2️⃣ 버튼의 자체의 layer opacity를 조절해보자.

그림자는 무조건 생겨야하니까, 버튼의 색상은 white로 해주고, button자체의 opacity를 조절해보자.

self.backgroundColor = .evyWhite
self.layer.opacity = 0.14

이럴수가…. 버튼에 stroke 추가해준것도 전부다 연해졌고, 글씨도,, ,이미지도,, 전부 연해졌다. 그니까 해당 코드는 button을 이루는 layer 전부에 opacity를 주는 것이기 때문에, 이렇게 될 수밖에 없다. …

그래서 나는, 버튼은 white로 그대로 주되, 아래의 방법을 사용했다.

• 참고자료 - https://blog.goodgods.com/605

 

3️⃣ copy(alpha: )를 이용해보자

• 버튼의 백그라운드에 alpha값을 주는데, copy 안에다가 넣어주었다.

button.layer.backgroundColor = (UIColor.white.cgColor).copy(alpha: 0.14)

이렇게 하면, opacity를 줬을때처럼 글자와 stroke까지 모두 투명해지지 않고 딱 배경색에만 alpha값이 들어가게 된다.

근데,, 아직 그림자는 안들어간다. 이렇게 배경색은 주면 될거 같다.

---

 

그럼 그림자는 도대체 왜 안생길까? 이렇게 생각을 하던 와중, 보라색 세모를 발견했다. 아니 보라색 전구잖아!?

두개의 버튼에서 모두 발생했고, 에러는 다음과 같았다

⚠️ The layer is using dynamic shadows which are expensive to render.

그림자는 주변의 위치?를 계산해서 내보내야하기 때문에 렌더링 비용이 많이든다고 한다. shadowPath로 바꿔보는게 어떻냐? 라고 경고를 준 것이다.

• 참고 - https://jwonylee.tistory.com/entry/view-shadow

 

🙌🏻 shadowPath가 뭐지?

보통 그림자를 구현할때는 CALayer에 있는 5가지 속성으로 구현한다고 한다.

• shadowColor: 그림자색 지정 (디폴트 검정색)
• shadowOpacity: 그림자 투명도 지정(0 ~ 1)
• shadowRadius: 그림자의 블러 정도 지정 (0일때 선같이 진한 그림자 높을 수록 퍼지는 효과)
• shadowOffset: 그림자의 위치(기본 0,0 -> 부모의 위치를 따라감)
• shadowPath: 그림자의 모양을 커스텀 가능 (디폴트 nil)

나도 현재, 위에 네가지 속성을 활용해서 그림자를 넣어두었지만, 보라색 에러가 뜬것! shadowPath는 그림자의 커스텀이 가능해서, 기본적으로 shawdow를 넣으면

그림 출처; https://nsios.tistory.com/157

이렇게 뷰 아래에 갈리는 그림자가 되는데, 이것말고 입체적인 그림자, 밑과 위에 생기는 그림자 등 다양한 그림자의 형태를 shadowPath로 만들 수 있다. 자세한 것은 아래 블로그를 참고해보자. 굉장히!!! 잘 설명되어있다. 굿굿

• 참고 - https://nsios.tistory.com/157

 

🙌🏻  shadowPath로 custom 그림자를 만들자.

그냥 버튼 자체의 그림자를 custom 해서 넣어주는 방식이다. 나는 버튼 전체의 크기만큼 그림자를 생성했어야 하므로, 버튼의 크기를 계산해서 그림자를 생성해주었다.

let buttonWidth = self.calculateButtonWidth(with: buttonTitle) + 10
let renderRect = CGRect(origin: .zero, size: CGSize(width: buttonWidth, height: Size.buttonHeigth))
self.layer.shadowPath = UIBezierPath(ovalIn: renderRect).cgPath

// width 계산하는 코드 , height는 고정값이 있음! -> Size.buttonHeigth
private func calculateButtonWidth(with buttonTitle: String) -> CGFloat {
    let label = UILabel()
    label.text = buttonTitle
    label.font = .font(.bold, ofSize: 16)
    label.sizeToFit()
    return label.frame.width + 28 + 44
}

이렇게 작성했다. 버튼이 어떻게 생기든, shadowPath는 그냥 그림자를 생성해주는 코드였다.

 

이렇게 , 버튼 아래에 그림자가 생겼다!!

✅ 잠깐, 배경이 투명이든 아니든 그냥 그림자를 생성해주는거면, 위에서 copy(alpha: ) 를 적용해주지 않고, 그냥 버튼 배경자체를 UIColor(hex: “#FFFFF”, alpha: 0.14)로 적용해도 되지 않을까? 하는 의문이 생겼다. 바로 적용해보자…

 

역시!!!

copy를 사용하면, CGColor를 UIColor로 변경해주는 과정이 필요하고, 그 과정에서 optional unwrapping이 필요했기 때문에 찝찝했는데, 그냥 UIColor에 alpha값을 조절해준 것을 사용하는게 더 효율적이고 안전하다고 판단했다. 그리고, 무엇보다 보라색 전구를 없애주는 shadowPath를 사용했으니, render하는데도 부담이 안되고!!

 

최종 결과물 짜잔 🎉

 

 

아,, 버튼이 정말,, 나를 애먹인다. 지난번에도 버튼이랑 전쟁치루느라 힘들었는데 ㅋㅋㅋㅋ
오늘은 shadow랑 열심히 놀아본 하루였다. ,,, 여기 내부에서도 알아볼 개념이 무수히 많지만,,, 이렇게 다양한 방식으로 투명도를줄 수 있다라는 점을 배워간다. 화이팅!! 🐻