Swift: 아이폰 다이어리 앱 개발일지 (1주차)

지난주 일요일에 맥북을 구매했다. Swift를 공부해서 실제로 앱을 개발해 보고 싶었기 때문이다.

예전에 자잘 자잘 한 프로그램을 만들어보긴 했지만.. 사실 무언갈 개발했다고 하기에 민망할 정도로 정말 간단한 내용이었다.

지금까지 만들어본 건 윈도우 기본 출력창에서 플레이 할 수 있는 간단한 게임과 자바로 만든 계산기, 대학 과제로 만든 슈팅게임이 다였다.

이번엔 뭔가 제대로 개발해 보고 싶었다. 직접 개발하고, UI도 만들어보고, 최종적으로 내가 만든 시스템을 런칭해보고 싶었다.

iOS 앱을 선택한 이유는 내가 아이폰을 사용하기도 하고, 무엇보다 새로운 환경에서 개발해 보고 싶어서 iOS 개발을 해보자고 마음을 먹었다. (사실 맥북을 사고 싶었다.)

그래서 뭘 만들고 싶은지 스스로 고민하던 도중.. 일기장을 만들어보고 싶어졌다.

이미 앱스토어에 많은 다이어리 앱이 있었지만.. 뭐 어때! 경험하고 공부한다는 마음가짐으로 만들기로 했다.

첫 주 차는 개발이 굉장히 더뎠다. UI를 공부해 본 적도 없고, 무엇보다 SwiftUI의 선언형 프로그래밍에 전혀 익숙지 않았다.

Swift 특유의 클로져 구문도 적응하기 힘들었다.

월요일

어디서부터 어떻게 개발해야 할지 몰라서 방황했다. 일기장을 만들어 보고 싶긴 한데, 두루뭉술 생각하다 보니 내가 정확히 무엇을 만들고 싶은지

먼저 정해야겠다고 생각했다.

위와 같이 내가 머릿속에 그리던 앱을 실제로 그려가며 전체적인 흐름을 만들었다.

기본적으로 날짜를 볼 수 있는 캘린더와, 실제로 일기를 쓸 수 있는 뷰를 만드는 것을 큰 틀로 잡고 코드를 짜려고 마음먹었다.

캘린더 뷰에서 날짜를 고르면, 해당 날짜의 일기 뷰를 불러오게끔 만들고 싶었기에 우선 캘린더 뷰를 만들기 시작했다.

결론적으로.. 월요일은 아무것도 만들지 못했다 ㅎ

VStack과 HStack이 어떻게 작동하는지 구글링하면서 공부했고, 라이브러리에서 Calendar에 대해 공부했다.

화요일

이제 진짜 만들어보자! 마음먹고 근무지로 출근했다. 월요일에 Calendar 라이브러리에 대해 알았으니, 캘린더 뷰에 어떤 데이터가 필요한지 감이 잡혔다.

다행이라 해야 하나.. 일단 출근하고 점심시간까지

1) 이전 / 다음 달로 넘길 수 있는 버튼

2) 이번 달 / 올해 연도 텍스트

까지 만들었다. 1) 같은 경우 세부적인 이벤트는 구현하지 못했지만, 우선 버튼을 만들어 놨다.

문제는 여기서부터 당일 저녁까지 진전이 없었다.. 어떻게 하면 날짜를 7일 간격으로 표시하고, 해당 달의 첫 번째 날 전까지를 공백으로 채울지 감이 안 잡혔다. 그래서 우선 패딩, 프레임, 컬러 등 Text와 VHStack에 대해서 자세히 공부했다.

수요일

도저히 감이 안 잡혀서 유튜브에서 코드를 카피했다.

내가 가장 궁금했던 점이 첫 번째 날까지의 공백을 어떻게 채우는가였는데, 위 유튜버는 우선적으로 View 모델을 생성하고, 거기에 이번 달의 첫 번째 날 전까지 empty 한 값을 넣어서 공백을 만들고 있었다. 그리고 Lazy Vgrid라는 기능을 사용해서 7일 간격으로 뷰를 짜놓았다.

신세계를 경험한 느낌이다.. 카피한 코드를 온전히 이해하고 내 것으로 만들기 위해 남은 시간을 코드를 파악하는데 할애했다.

목차 Grid에 대해 알아보도록 합시다. Lazy V(H)Grid List와 Grid의 차이 Grid는 List와 친척이라고 생각하시면 됩니다. 일단 Grid 와 List의 차이를 간단하게 그림으로 보겠습니다. LazyV(H)Stack과의 차이는 다음 게시물에서 다루겠습니다, List List는 일반적으로 Vertical Direction 으로 목록을 나타내 준다고 보시면 됩니다. 가장 많이 사용되는 View 라고 생각하시면 됩니다. Grid Grid는 horizontal Direction으로 사진을 배열하여 화면을 구성하기 좋습니...

seons-dev.tistory.com

우선 해당 문서를 통해 Lazy Grid에 대해 자세히 공부했고, 코드에 주석을 달아가며 공부했다.

그리고 property unwrapping 과 State, Binding, 그리고 mutate에 대해 공부하면서, 객체와 구조체 사이가 어떻게 영향을 주고받는지 공부했다.

무엇보다 compactMap 함수.. 이해하는데 엄청 시간을 들였다.

목요일

오늘도 대부분의 시간을 코드를 해석하는데 할애했다. 도저히 이해가 안 되는 부분들은 GPT를 통해 해결했고, 슬 코드를 손보기 시작했다.

추후에 기능이 추가될 수도 있고.. 실제 View와 View Model을 분간하기 위해서, 코드를 다듬고 분리시키는데 시간을 많이 썼다.

금요일

어느 정도 코드를 분리하고, 정리하다 보니 이제 각 모델들과 뷰의 기능이 뭔지 파악이 되었다.

오늘은 추가적으로 주말 날짜에 색을 넣고, 뷰의 프레임들을 정리하였다.

짠 !

일단 이번 주는 이정도만 만들어 놓았고.. 다음 주는 실제 일기장 화면을 만들고, 일기를 저장하는 데이터 베이스를 만들어서 캘린더 뷰의 각 날짜에 일기를 섰는지 안 썼는지 판단하는 이미지를 구현하는 것이 목표다.