iOS14 위젯 적용기 #2 — DayStamp

첫번째 오늘의 명언에 이은 두번째 DayStamp 위젯 적용기를 시작해보겠습니다.

DayStamp

DayStamp 는 습관을 관리하는 앱입니다. DayStamp 의 홈 스크린 위젯은 사용자가 추가한 습관을 위젯에서 쉽게 입력할 수 있게 해줍니다.

홈 스크린 위젯의 화면 구성을 실제로 적용하면서 구성했던 부분 예상치 못했던 문제등등을 하나씩 살펴보겠습니다.

먼저, 최종완성된 화면은 아래와 같습니다. 각각은 사용자가 위젯에 설정한 습관들이며 이미 실행한 습관은 회색으로 처리됩니다.

구성

DayStamp 의 홈스크린 위젯은 크게 두가지 화면으로 구성됩니다. 두 가지의 화면이 있고 각각의 화면은 라이트모드 / 다크모드를 지원합니다.

• 등록한 습관이 없을경우 (라이트모드 / 다크모드 지원)
• 등록한 습관이 있을경우 (라이트모드 / 다크모드 지원)

또한 실제 코드상의 구조는 아래와 같습니다. 아래의 구체적인 내용들은 뒤에 천천히 살펴보도록 하겠습니다.

• WidgetView
• WidgetView.Empty
• WidgetView.Item
• WidgetView.Row

WidgetView.Empty

먼저 데이타가 없을 경우의 뷰 구성입니다.

데이터가 없을 경우 화면. 미리보기

SwiftUI 코드

특이점은 기존의 이미지로 사용하던 로고 부분을 SwiftUI 의 Square 를 이용하여 직접 제작하였습니다. Spacer 의 경우 frame 을 이용하여 값을 지정하면 특정 값만큼 여백을 줄 수 있습니다.

공통으로 사용하는 컬러값들은 SwiftUI 의 Color 를 extension 을 이용하면 좀 더 편리하게 사용할 수 있습니다.

마지막으로, 위젯 전체를 누르면 위젯 설정하는 화면으로 이동하게 적용하였습니다.

위젯 화면 구성

이제 본격적으로 위젯 화면의 구성에 대해 알아보도록 하겠습니다.

WidgetView.Item

WidgetView.Item 코드의 일부

위젯을 구성하는 가장 작은 단위입니다. Item 뷰의 크기를 작성하는데는 세가지 문제가 있었습니다.

첫번째는, 습관을 완료했을 경우 취소선이 글자수만큼 폭이 되도록 적용하는 것이었습니다. 해당 이슈는 각각의 구성요소를 fixedSize, frame 함수를 이용하여 해결하였습니다.

두번째는, 글자가 길어졌을 경우 말줄임 처리되게 하는 부분이었습니다. SwiftUI 의 경우 자식의 크기에 따라 부모의 크기가 결정됩니다. 따라서 습관명이 길어지면 화면이 깨지는 문제가 발생했습니다. 이를 해결 하기 위해서 GeometryReader 를 사용였습니다.

세번째는, 링크영역입니다. 위에서 자식의 크기에 따라 부모의 영역이 결정된다고 했었는데, 그렇다 보니 링크영역이 텍스트 크기만큼만 지정되는 문제가 있었습니다. 하단의 링크영역 이라고 표시되어 있는 부분이 바로 링크 영역을 박스 크기 전체로 지정하기 위한 처리부분입니다.

WidgetView.Row

WidgetView.Row 코드의 일부

위에서 언급한 WidgetView.Row 2개와 Spacer 를 이용하여 한 줄을 만드는 뷰입니다. WidgetSpacer 는 공통적으로 사용하는 Spacer 를 가지고 있는 별도의 뷰입니다.

WidgetsEntryView

실제 위젯을 생성할 때 참고하는 뷰입니다.

WidgetsEntryView

activities 의 유무에 따라 분기 처리가 되고 있으며, 만약 활동이 있을 경우 ForEach 문을 이용하여 WidgetView.Row 를 생성하여 한줄씩 그려줍니다.

적용후기

SwiftUI 는 뚝딱뚝딱 개발하는 재미가 있다.

기존의 코드 베이스 개발 혹은 스토리 보드와 Xib 기반의 개발보다는 훨씬 재미가 있었습니다. 각각의 컴포넌트를 작성하면 미리보기에 바로 반영이 되고 각각의 컴포넌트를 생성하면서 개발을 하면 마치 레고 블럭을 쌓을때의 그런 느낌을 받았습니다.

화면 구성을 생각하여 View 를 잘게 쪼개자.

위젯을 제작할 때, 한 화면을 구성하는 단위를 Item, Row, Empty 로 잘개 쪼개었습니다.

SwiftUI 로 화면을 구성하고 그 내용이 조금 복잡해질 수록 자연스럽게 각각의 구성요소를 별도의 컴포넌트로 쪼갤수 밖에 없었습니다. 그 이유는 다음과 같습니다.

첫째, 계층구조가 깊어질수록 코드의 중첩도 길어진다. SwiftUI 를 이용하여 화면을 구성하면 뷰의 깊이에 따라 코드의 중첩도 깊어집니다. 코드의 중첩이 길어지면 그만큼 가독성이 떨어지기 떄문에 각 부분을 별도로 쪼개는게 가독성과 유지보수 측면에서 훨씬 좋았습니다.

둘째, 각 컴포넌트별로 미리보기가 가능해진다. 앞서 WidgetView.Empty 의 경우 별도로 제작을 하여 전체 뷰를 사용하지 않더라도 부분적인 미리보기가 가능해졌습니다. 훨씬 작고 가벼운 코드로 빠르게 확인할 수 있는 장점이 있습니다.

이상 실제로 홈 스크린 위젯을 적용하면서 개발했던 방법과 개인적으로 느낀점에 대해 소개해보았습니다.

혹시 잘못된 내용이나 궁금한 내용이 있으면 댓글로 알려주세요. 감사합니다 :)

[embed]‎DayStamp - 습관 기록 앱 ‎"하루에 한번, 좋은 습관" 물 1리터 마시기, 30분 영어 공부하기, 아침에 일어나서 스트레칭 하기. 작지만 나를 바꾸는 습관들입니다. "참 잘했어요" 도장을 받는 기분으로 달력에 표시해보세요. 도장이 늘어갈때…apps.apple.com