iOS 뷰 상단·하단에 테두리 추가하는 방법 (CALayer 활용)

iOS 앱 개발을 하다 보면 특정 뷰(View)의 상단과 하단에 테두리 선을 넣어야 하는 경우가 종종 있습니다. 이번 글에서는 CALayer를 활용해 UIView의 위아래에 테두리를 손쉽게 추가하는 방법을 단계별로 알아보겠습니다.

프로젝트 준비하기

1단계: 새 프로젝트 생성

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

2단계: 스토리보드에 UIView 추가

Main.storyboard 파일을 열고 아래 이미지처럼 UIView를 하나 배치합니다.

3단계: IBOutlet 연결

스토리보드의 뷰와 코드를 연결하기 위해 @IBOutlet을 하나 생성하고 이름을 centerView로 지정합니다.

테두리 추가 메서드 구현

4단계: CALayer로 상단·하단 테두리 만들기

테두리 로직은 별도의 메서드로 분리해 구현하는 것이 코드 관리 측면에서 좋습니다. 원하는 두께만큼의 CALayer 인스턴스 두 개를 생성하고, 각각 뷰의 최상단과 최하단 위치에 프레임을 맞춥니다. 이후 테두리 색상을 지정한 뒤 해당 레이어들을 뷰의 subLayer로 추가하면 됩니다.

addTopAndBottomBorders라는 함수를 만들고 다음 코드를 작성합니다.

func addTopAndBottomBorders() {
    let thickness: CGFloat = 2.0
    let topBorder = CALayer()
    let bottomBorder = CALayer()
    topBorder.frame = CGRect(x: 0.0, y: 0.0, width: self.centerView.frame.size.width, height: thickness)
    topBorder.backgroundColor = UIColor.red.cgColor
    bottomBorder.frame = CGRect(x:0, y: self.centerView.frame.size.height - thickness, width: self.centerView.frame.size.width, height:thickness)
    bottomBorder.backgroundColor = UIColor.red.cgColor
    centerView.layer.addSublayer(topBorder)
    centerView.layer.addSublayer(bottomBorder)
}

위 코드에서는 레이어의 두께(thickness), 위치와 크기(frame), 배경색(backgroundColor)을 각각 설정한 뒤 centerView의 서브레이어로 추가했습니다.

5단계: viewDidAppear에서 호출

ViewController 클래스의 viewDidAppear(_:) 메서드 안에서 앞서 만든 메서드를 호출합니다.

override func viewDidAppear(_ animated: Bool) {
    addTopAndBottomBorders()
}

6단계: 실행 결과 확인

프로젝트를 빌드하고 실행하면 아래 화면과 같이 가운데 뷰의 상단과 하단에 빨간색 테두리가 표시되는 것을 확인할 수 있습니다.

마무리 및 응용 팁

CALayer 방식은 Auto Layout 제약 없이도 간단히 테두리를 그릴 수 있다는 장점이 있습니다. 다만 뷰의 크기가 동적으로 변하는 화면이라면 viewDidLayoutSubviews()에서 프레임을 다시 계산해 주는 것이 좋습니다. 또한 thickness 값과 UIColor를 변경하면 테두리의 두께와 색상을 자유롭게 조절할 수 있으니, 디자인에 맞게 응용해 보시기 바랍니다.