iOS에서 모서리가 둥근 TableView 만드는 방법

iOS에서 둥근 모서리 TableView 만들기

테이블뷰(Table View)는 iOS 애플리케이션을 구성하는 가장 중요하고 기본적인 요소 중 하나로, 모든 iOS 개발자라면 반드시 익숙해져야 하는 UI 컴포넌트입니다.

실제로 앱스토어에서 볼 수 있는 거의 모든 앱이 테이블뷰를 활용하고 있습니다.

iOS의 테이블뷰는 세로로 스크롤되는 단일 열의 콘텐츠를 행(row) 단위로 나누어 표시하며, 각 행에는 앱 콘텐츠의 한 조각이 담깁니다. 예를 들어 연락처 앱은 각 연락처의 이름을 별도의 행으로 보여주고, 설정 앱의 메인 화면은 사용 가능한 설정 그룹들을 목록 형태로 표시합니다.

테이블뷰에 대해 더 자세히 알고 싶다면 Apple 공식 문서(UITableView Documentation)를 참고하세요.

이 글에서는 모서리가 둥근(rounded corner) 테이블뷰를 만드는 방법을 단계별로 살펴보겠습니다. 그럼 바로 시작해 보겠습니다.

1단계: 프로젝트 생성

Xcode를 실행한 후 New Project → Single View Application을 선택하고, 프로젝트 이름을 "TableViewWithRoundedCorner"로 지정합니다.

2단계: UITableView 추가

Main.storyboard를 열고 아래 이미지와 같이 UITableView를 추가합니다.

3단계: IBOutlet 연결

ViewController.swift 파일에서 Main.storyboard의 테이블뷰를 @IBOutlet으로 연결하고 이름을 tableView로 지정합니다.

4단계: delegate 및 dataSource 설정

ViewController.swift의 viewDidLoad() 메서드 안에서 테이블뷰의 delegate와 dataSource를 아래와 같이 설정합니다.

@IBOutlet var tableView: UITableView!
override func viewDidLoad() {
    super.viewDidLoad()
    tableView.delegate = self
    tableView.dataSource = self
}

5단계: 셀 구성하기

Main.storyboard에서 ViewController의 배경색을 변경하고, 프로토타입 셀(prototype cell)을 추가한 뒤 셀 내부에 레이블(Label)을 배치합니다.

이제 UITableViewCell을 상속하는 새로운 테이블뷰 셀 클래스 파일을 하나 생성하여 프로젝트에 추가합니다.

ViewController.swift를 열어 UITableViewDataSource와 UITableViewDelegate 프로토콜을 채택하고, 필요한 델리게이트 메서드를 아래와 같이 구현합니다.

extension ViewController: UITableViewDataSource, UITableViewDelegate {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 2
    }
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell: UITableViewCell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath) as! TableViewCell
        return cell
    }
    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        return 80
    }
}

6단계: 둥근 모서리 적용

프로젝트를 실행하면 테이블뷰가 정상적으로 표시되지만, 아직 모서리가 둥글지 않습니다. 둥근 모서리를 적용하려면 viewDidLoad() 메서드에 아래 코드를 추가합니다.

tableView.layer.cornerRadius = 10 // 코너 반경 설정
tableView.layer.backgroundColor = UIColor.cyan.cgColor

팁: 셀이 둥근 모서리 영역 밖으로 삐져나오는 경우에는 tableView.clipsToBounds = true 또는 tableView.layer.masksToBounds = true를 함께 설정하면 깔끔하게 해결할 수 있습니다.

전체 코드

import UIKit
class ViewController: UIViewController {
    @IBOutlet var tableView: UITableView!
    override func viewDidLoad() {
        super.viewDidLoad()
        tableView.delegate = self
        tableView.dataSource = self
        tableView.layer.cornerRadius = 10 // 코너 반경 설정
        tableView.layer.backgroundColor = UIColor.cyan.cgColor
    }
}
extension ViewController: UITableViewDataSource, UITableViewDelegate {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 2
    }
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell: UITableViewCell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath) as! TableViewCell
        return cell
    }
    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        return 80
    }
}