[이스트소프트 부트캠프] 2차 프로젝트 - 3월 14일

데일리 스크럼

어제 한 일

• 하이파이 디자인
• 기획 명세서 검토

오늘 할 일

• Xcode 디자인 시스템 정리
• 하이파이 디자인
• 뷰 개발

트러블 슈팅

디자인 시스템 적용

내가 참여한 디자인 시스템 파트는 두가지로 색상(Color)과 폰트(Font)다. 지난 프로젝트에서는 팀원분께서 작업 해주셨는데 이번엔 나도 참여하기로 했다.

 

색상은 Hex코드를 UIColor로 바꾸는 Extension을 추가하고 기존에 설정해 둔 색상 값을 반환하는 것으로 마무리했다. 사소한 트러블로 피그마에서 작업 할때는 6가지 색상을 10가지 변화를 준 상태여서, 팀원분과 상의해 실제로 사용된 색상을 조사해서 해당 색상만 넣기로 하였다.

 

폰트는 여러 방식을 채용한뒤 수정해 우리에게 맞는 방식으로 변경했다. 1차 프로젝트에선 폰트만 설정했는데 이번에는 Lineheight도 설정해 주기로 했다. 그래서 처음으로 AttributedString도 사용해봤다. 처음엔 enum으로 폰트 케이스를 나누고 해당 enum의 연산 프로퍼티로 Lienheight와 font를 반환하니 사용하니 코드가 길이도 길어지고 사용하는데 있어 불편했다.

label.attributedText = DesignSystemFont.Title.attributedString(for: "텍스트 내용", color: DesignSystemColor.Gray00.value)

그래서 나온 의견이 1. Enum의 이름을 줄이자! 2. 매개변수 접근 방식을 바꿨으면 좋겠다 였다.

최종적으로 확정된 코드는 아래와 같은 방식으로 함수 내부에서는 기존의 코드를 살리는 방식으로 접근하고 외부에서는 간단한 매개변수 형태로 편하게 작업할 수 있었다.

func RLAttributedString(text: String, font: RLFont, color: UIColor = .black, align: NSTextAlignment = .left) -> NSAttributedString

label.attributedText = .RLAttributedString(text: "운동 시작하기",font: .ButtonBig, color: .Gray900, align: .center)

CAGradientLayer 적용

홈뷰에 그라데이션이 들어간 원의 형태로 지도를 보여주기 위해 CAGradientLayer를 적용하기로 했다.

 

 현재까지 완성한 화면은 오른쪽으로 원을 조금 키우고 나머지 배경을 검은색으로 처리해주면 될 듯하다.

 

CAGradientLayer를 적용하면서 가장 어려웠던 부분은 뷰가 내가 생각한 만큼 변화되지 않는 부분이다. 어떤 때는 뷰가 너무 어두워 보이고 어떤 때는 뷰가 너무 밝고... 또 어떤 때는 갑자기 그라데이션이 사라지고 뷰 전체가 검게된 적도 있었다!

(코드에서 설정해주는 값의 여러개가 되다보니 여기 수정 저기 수정 하면서 먼가를 놓친게 아닐까 싶다)

 

그래서 레이어를 처음부터 그려보는 과정을 여러번 거치면서 값을 하나씩 바꿔보면서 현재의 모습으로 만들 수 있었다. 이후는 탭바 스타일을 지정해주고 맵킷의 나머지 부분을 검은색 배경으로 만들어주면 완성될 듯 하다

 

추가로 현재 레이어를 그릴때 맵킷의 프레임을 받아오는데 이때 오토레이아웃이 바로 적용되지않아서 값이 제대로 나오지 않아view.layoutIfNeeded()를 호출해서 프레임을 받아오는데 이 부분은 팀원들의 의견을 받던지 다른 방법으로 바꾸던지 할 듯하다

 

layoutIfNeeded 함수에 대해서는 좀 더 찾아봐야할 듯 하다.

(현재까진 레이아웃을 그릴때 다른 레이아웃의 형태가 필요하다면 현재까지의 레이아웃을 뷰에 그리고 다시 진행한다라는 의미로 이해하고 있다)