iOS 앱을 개발하다 보면 모서리가 둥근(rounded) 버튼 UI를 접하는 경우가 많습니다. 디자인 시안을 받았는데 버튼이 둥글게 처리되어 있어서 어떻게 구현해야 할지 고민된 적이 있으신가요? 이번 글에서는 iOS에서 버튼의 모서리를 둥글게 만드는 방법을 소개합니다.
구현 방법은 크게 두 가지입니다. 하나는 스토리보드(Storyboard)를 이용하는 방법이고, 다른 하나는 코드(Swift)로 직접 작성하는 방법입니다. 두 가지 방법을 모두 살펴보겠습니다.
방법 1: 스토리보드로 버튼 모서리 둥글게 만들기
1단계 — 프로젝트 생성
Xcode를 실행하고 New Project → Single View Application을 선택한 뒤, 프로젝트 이름을 "RoundedButton"으로 지정합니다.
2단계 — 버튼 추가
Main.storyboard 파일을 열고 화면에 UIButton을 추가합니다.
3단계 — User Defined Runtime Attributes 설정
추가한 버튼을 선택한 후, 오른쪽 Utility 영역(유틸리티 패널)을 엽니다. 그리고 User Defined Runtime Attributes 항목에 아래와 같이 값을 입력합니다.
- Key Path: layer.cornerRadius
- Type: Number
- Value: 원하는 곡률 값 (예: 20)
여기서 입력하는 값에 따라 모서리의 둥근 정도가 달라집니다. 값이 클수록 더 둥글어지고, 값이 작을수록 각진 형태에 가까워지므로 디자인에 맞게 조절하면 됩니다.
방법 2: 코드로 버튼 모서리 둥글게 만들기
두 번째 방법은 프로그래밍 방식으로 모서리를 처리하는 것입니다. 스토리보드에서 버튼을 ViewController.swift로 @IBOutlet으로 연결하고, 이름을 "doButtonRounded"로 지정합니다. 그다음 버튼의 layer.cornerRadius 속성 값을 설정해 주면 됩니다.
아래 코드를 참고하세요.
import UIKit
class ViewController: UIViewController {
@IBOutlet var doButtonRounded: UIButton!
override func viewDidLoad() {
super.viewDidLoad()
doButtonRounded.layer.cornerRadius = 20
}
}viewDidLoad() 메서드 안에서 layer.cornerRadius에 원하는 숫자를 대입하기만 하면 됩니다. 위 예제에서는 20으로 설정했지만, 스토리보드 방식과 마찬가지로 값이 클수록 더 둥근 모양이 됩니다.
마무리
정리하면, iOS에서 버튼 모서리를 둥글게 만드는 핵심은 cornerRadius 속성입니다. 간단한 수정이라면 스토리보드의 Runtime Attributes를 활용하는 것이 편리하고, 여러 버튼에 일관되게 적용하거나 동적으로 변경해야 한다면 코드로 작성하는 것이 효율적입니다. 상황에 맞는 방법을 선택해서 깔끔한 rounded 버튼 UI를 구현해 보세요.