[240102] Today I Learned

YoungHyun Kim·2024년 1월 2일

TIL iOS swift

TIL ✍️

목록 보기

29/68

내일배움캠프 iOS 앱개발 기초 프로젝트

SPARTABUCKS KIOSK

메인페이지, 상단 메뉴 카테고리 바, 메뉴화면, 주문 내역 화면, 취소/결제하기 버튼 등 5개의 기능으로 구성되며 하나의 ViewController에서 구동되는 키오스크를 제작하는 프로젝트

1. 필수 구현 기능 및 와이어프레임 구성

와이어프레임의 구성과 최대한 비슷한 초기 UI 모습을 찾아서 첨부한다. 이런 식으로 버튼의 구성, 위치, 메뉴 표현은 어떤 식으로 할 지, 어떤 버튼을 눌렀을 때 어떤 작동이 수행되어야 하는지 여러 주제에 대해 의견을 공유했다.
우리 팀은 와이어프레임 제작까지 끝마치고 앱 제작 경험이 있는 팀원 분께서 바로 와이어프레임과 구성이 동일한 UI 컴포넌트들을 적절하게 배치한 후, 원격 레포를 사용해서 팀원들에게 파일을 배포했다.

2. 역할 분배

1의 과정에서 와이어프레임 및 UI 초기 세팅까지, 메인 페이지를 구현하는 과제를 마무리했다고 볼 수 있다. 우리 팀은 4명으로 구성되었기 때문에, 사다리타기 게임을 통해서 각각 상단 카테고리 바, 메뉴화면, 주문내역 화면, 취소/결제 버튼 4개의 기능을 나누어 개발을 시작했다. 그 중에 내가 맡은 부분은 상단 메뉴 카테고리 바로, 어떤 작업을 진행했는지 설명해보겠다.

카테고리 바는 UISegmentedControl 컴포넌트로 구성했다.
UISegmentedControl은 요소를 선택할 시, UISegmentedControl.selectedSegmentIndex 값이 변하기 때문에 이를 조건으로 사용하는 switch-case 구문을 구성해서 메뉴 화면에 출력할 데이터를 선택했다.
UICollectionView 로 구성될 메뉴 화면에 UICollectionViewCell이 출력될 것이고, 이 셀들을 그리는 데 사용될 데이터를 미리 Menu 구조체의 타입 프로퍼티로 선언해두었다. 이 데이터를 UISegmentedControl.selectedSegmentIndex 값에 따라 미리 선언해 둔 빈 배열 collectionsToDisplay 에 저장해주었다.
선택이 진행될 때 마다(selectionValueChanged 함수가 호출될 때 마다) UICollectionView를 그리는데 사용될 데이터를 바꾸었으니, 다시 로드해줄 수 있도록 UICollectionView.reloadData() 메소드를 호출해주었다.

lazy var collectionsToDisplay: [Menu] = Menu.espresso

@IBAction func selectionValueChanged(_ sender: Any) {
        switch CategorySelection.selectedSegmentIndex {
        case 1:
            collectionsToDisplay = Menu.coldBrew
        case 2:
            collectionsToDisplay = Menu.frappucchino
        case 3:
            collectionsToDisplay = Menu.blended
        default:
            collectionsToDisplay = Menu.espresso
        }
        MenuCollectionView.reloadData()
    }

3. 작업된 데이터 병합(Github branch strategy)?

개인마다 작업 속도에 편차가 무조건 있기 마련이니... 서로 작업한 데이터를 github 상에서 병합하는데는 아래와 같은 프로세스를 적용했다.

1. main 브랜치에서 파생된 dev 브랜치를 생성하고 이를 default 브랜치로 설정한다.
2. 팀원 모두가 dev 브랜치에서 자신이 개발할 기능에 대해 작업할 브랜치(이하 feature 브랜치)를 생성한다.
3. 팀원 중 한 명의 작업이 끝나서 원격 dev 브랜치에 PR을 요청한다.
4. origin dev 브랜치에 merge 된 후, 모든 팀원은 로컬 dev 브랜치를 최신 상태로 유지한다. (local dev_branch >> git pull origin dev)
5. 작업 중인 로컬 feature 브랜치에서 rebase 작업을 진행한다. (feature_branch >> git rebase dev)

위와 같은 작업을 지속적으로 반복한 결과, 지난 번 콘솔 창 키오스크 작업 때 겪었던 충돌(conflict)보다 훨씬 그 빈도가 적어졌다. 뿌듯...