Storyboard 컨벤션

Storyboard 작성 컨벤션(초안, 협의 필요)

개요

혼자 익숙한대로 쓰다가 문득 기준에 대한 필요가 느껴져서 쓰게 된 문서로,

Storyboard에서 할 수 있는 많은 것들 중에서 code base로 디자인 할 것과 storyboard base로 디자인 할 것을 구분하는 컨벤션에 관한 문서가 되겠습니다.

합의가 필요한 부분

컨벤션이 필요한 부분은 다음과 같습니다.

Autolayout

• constraint

UI

• font, backgroundColor ...

Table(Collection) cell 설정

• cell register

화면 전환

• present, show, prepareForSegue ...

+) cell 스토리보드에서 분리

• cell을 xib 파일로 따로 관리하기(스토리보드에서 따로 안 만들고)

가능한 기준

위정척사파 (사용)

constraint 설정 외에는 무조건 다 코드로

// Example
@IBOutlet weak var stateWrapperView: UIView! {
    didSet {
        stateWrapperView.backgroundColor = .white
        stateWrapperView.layer.cornerRadius = 12
    }
}
@IBOutlet weak var titleLabel: UILabel! {
    didSet {
        titleLabel.font = MorningBearFontFamily.Pretendard.bold.font(size: 24)
    }
}
@IBOutlet weak var subTitleLabel: UILabel! {
    didSet {
        subTitleLabel.font = MorningBearFontFamily.Pretendard.regular.font(size: 16)
        subTitleLabel.textColor = MorningBearAsset.Colors.secondaryText.color
    }
}

• font, color 모두 didSet 이용해서 코드로
• 설정이 눈에 바로 보여서 좋음, 코드 재사용하기 좋음
• outlet 설정하고 하나하나 다 코드 적어주는 게 조금 귀찮음, 뷰 잘못 관리하면 메모리 터질 수도 있음(계속 반복 실행돼서)

논의된 것들

온건개화파

UI만 storyboard로

• 눈에 보이는 UI만 스토리보드로 구현하고 segue같은 화면 전환은 코드베이스로
• 스토리보드에서 포토샵 쓰듯이 설정할 수 있음, 눈으로 바로바로 확인 가능
• (나는) 자동완성이 안돼서 일일히 클릭하는게 귀찮음

급진개화파

UI, 화면전환 전부 다 storyboard로

• 그냥 다 스토리보드에서 해결함
• 스토리보드에서 앱 플로우도 가시적으로 확인 가능
• 코드 보고 파악하는게 불가능함, 몇몇 케이스의 경우 결국 코드베이스로 해야함(cell prepareForReuse같은 거)