[8/14~8/20] 사이 간단한 SNS 어플리케이션을 만드는 프로젝트를 진행 배운 점을 정리해보고자 한다.

📌 ScrollView와 TableView에 대한 생각의 전환

내가 맡은 부분은 프로필 화면이었고 개인의 프로필 정보가 나오는 동시에 아래쪽에 tableView를 이용해서 자신이 쓴 일기를 확인할 수 있어야 했다.

tableView는 ScrollView의 자식이기 때문에 Scroll이 가능하지만 화면 아래쪽만 스크롤이 되는 것이 사용성에 좋지 않을 것 같았다.

처음에는ScrollView안에 다른 View들을 넣고 거기에 TableView도 넣는 방식으로 했으나, 잘 되지 않았다. 이를 해결하기 위해서 하루 동안 찾아보고 이리저리 시도하며 끙끙 앓다가 튜터님을 결국 찾아갔는데, 튜터님은 새로운 관점을 제시해주셨다!!

화면 전체를 tableView로 사용, cell이외의 내용들은 다른 cell을 이용하거나 tableView의 Header를 사용해보시는게 좋을 것 같습니다!

그 순간 머리가 깨지는 느낌(?)이었다. 결국 tableView를 이용해서 완성하는데 성공했고 스토리보드로 header를 간단하게 만들어서 빠르게 완성할 수 있었다. 더 중요하다고 생각되는 부분은 iOS 개발에 나의 생각보다 tableView가 더 다양하게 자주 사용된다는 것을 알게된 것!

// viewDidLoad
override func viewDidLoad() {
	super.viewDidLoad()
        
    // 테이블뷰에 HeaderFooterView 등록
    myDiaryTable.register(UITableViewHeaderFooterView.self, forHeaderFooterViewReuseIdentifier: "customHeader")
        
    // subview 관계
    view.addSubview(myDiaryTable)
    myDiaryTable.addSubview(profileBox)
    profileBox.addSubview(profileCard)
    profileCard.addSubview(profileImg)
        
    // tableView의 delegate와 dataSource
    myDiaryTable.delegate = self
    myDiaryTable.dataSource = self
        
    // profile 정보 load
    loadProfile()
}

📌 layer 개념

1. CAlayer와 UIView의 차이점

CAlayer의 CA -> Core Animation의 약자

(1) CAlayer 등장의 배경

어플리케이션 작동 시 부드러운 작동을 위해 최소 초당 60프레임 필요
➡️ OpenGL의 탄생 - 그래픽 하드웨어에 가장 빠르게 엑세스

하지만 요구 기능이 많아지고 그에 따라 코드의 양이 방대해지니 이보다 좀 더 적은 코드로 구현할 수 있는 것이 필요했음

➡️ Core Graphics의 탄생 - CGColor, CGRect 등

이것을 더 사용성이 좋게 단순화 한 것이

➡️ CAlayer

그리고 CAlayer에 있는 고급 그래픽 기능들을 개발하며 모두 이용하지는 않기 때문에 이를 더 간소화 한 것이

➡️ UIKit - 사용은 간편하지만 기능이 제한되어 있다는 단점도 있음

(2) UIView와 CAlayer 구조의 상관관계

UIView를 이용해서 쉽게 그리고 간편하게 화면을 그릴 수 있다. UIView가 레이아웃 터치 이벤트 등 많은 작업을 처리하는데 사실은 View의 sublayer로 있는 CAlayer 타입의 property인 Core Animation에 시각적 행위들을 위임한다.

• UIView는 하나의 sublayer인 root CAlayer만을 갖고 있다.
  UIView에 subview를 넣게 되면 UIView 안으로 직접 들어가는 것이 아니라 root CAlayer 안으로 들어가게 된다.

• 하나의 root CAlayer는 여러개의 sublayer를 만들어서 가질 수 있고 이를 이용해서 다양한 그래픽 작업들을 처리할 수 있다.

💁🏻‍♀️ 사용법
별건 아니지만 이번 프로젝트에서 UI를 통일시켜야 해서 layer를 이용해서 같은 코드를 여러번 써야했다. 때문에 method를 만들고 UIView를 파라미터로 받아서 원하는 layout을 그릴 수 있게 코드를 작성해봤다!!

func viewLayout(_ view: UIView) {
    // 테두리 둥글게
    view.layer.cornerRadius = 30
        
    // 그림자 방향 이동 width ➡️, height ⬇️
    view.layer.shadowOffset = CGSize(width: 0, height: 0)
        
    // 그림자의 투명한 정도, 1이 가장 불투명, 0은 투명
    view.layer.shadowOpacity = 0.3
        
    // 그림자가 퍼지는 정도
    view.layer.shadowRadius = 10
}

// 사용 시

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = myDiaryTable.dequeueReusableCell(withIdentifier: "cell", for: indexPath) as! MyDiaryTableViewCell
        
    // ... 중략
        
    // cell card 인스턴스 생성 및 view layout
    let card = cell.cellCard!
    viewLayout(card)
    viewLayout(cell.postImage)
    viewLayout(cell)

    return cell
}

➡️ 참고 자료 및 출처 : https://babbab2.tistory.com/53