iOS UI 구조화와 사용자 경험 개선기 🚀

iOS 앱의 UI 구조화 작업과 사용자 경험 개선 과정에 대해 정리해보았다. UserPageView 개선 작업을 진행하면서 얻은 인사이트를 공유하고자 한다.

개선 배경 🤔

기존 UserPageView의 복잡한 구조로 인해 코드 관리의 어려움이 있었고, 사용자 경험 측면에서도 개선이 필요했다. 이에 SignUpView의 구조를 참고하여 전체적인 리팩토링을 진행하게 되었다.

개선 과정 및 구현 👨‍💻

1. 기본 구조 설계

전체적인 구조를 다음과 같이 설계하였다:

class UserPageView: UIViewController {
    // MARK: - Properties
    private let userDefaults = UserDefaultsManager.shared
    private let profileImageView = UIImageView()
    private let nameLabel = UILabel()
    private let emailLabel = UILabel()
    private let ticketsSectionLabel = UILabel()
    private let ticketView = UIView()
    private let tableView = UITableView()
    private var bookings: [UserDefaultsManager.BookingInfo] = []
    
    // MARK: - Lifecycle Methods
    override func viewDidLoad() {
        super.viewDidLoad()
        configureUI()
    }
    
    private func configureUI() {
        setupBasic()
        setupComponents()
        setupConstraints()
    }
}

2. 테이블뷰 스와이프 삭제 기능 구현

사용자 경험 개선을 위해 스와이프 삭제 기능을 구현하였다:

func tableView(_ tableView: UITableView, trailingSwipeActionsConfigurationForRowAt indexPath: IndexPath) -> UISwipeActionsConfiguration? {
    let deleteAction = UIContextualAction(style: .destructive, title: "삭제") { [weak self] (action, view, completion) in
        guard let self = self else { return }
        
        let alert = UIAlertController(title: "예매 내역 삭제",
                                    message: "이 예매 내역을 삭제하시겠습니까?",
                                    preferredStyle: .alert)
        
        alert.addAction(UIAlertAction(title: "삭제", style: .destructive) { _ in
            self.bookings.remove(at: indexPath.row)
            tableView.deleteRows(at: [indexPath], with: .fade)
            completion(true)
        })
        
        self.present(alert, animated: true)
    }
    
    return UISwipeActionsConfiguration(actions: [deleteAction])
}

3. 커스텀 테이블뷰 셀 구현

영화 포스터를 포함한 커스텀 테이블뷰 셀을 다음과 같이 구현하였다:

class BookingCell: UITableViewCell {
    static let identifier = "BookingCell"
    
    private let posterImageView: UIImageView = {
        let imageView = UIImageView()
        imageView.contentMode = .scaleAspectFill
        imageView.clipsToBounds = true
        imageView.layer.cornerRadius = 8
        return imageView
    }()
    
    private let titleLabel: UILabel = {
        let label = UILabel()
        label.font = .systemFont(ofSize: 16, weight: .medium)
        return label
    }()
    
    func configure(with booking: UserDefaultsManager.BookingInfo) {
        titleLabel.text = booking.movieTitle
        if let posterPath = booking.posterPath {
            let imageURL = MovieImage.movieImageURL(size: 200, posterPath: posterPath)
            loadImage(from: imageURL)
        }
    }
}

4. 레이아웃 최적화

SnapKit을 활용하여 레이아웃을 최적화하였다:

private func setupConstraints() {
    ticketView.snp.makeConstraints { make in
        make.top.equalTo(ticketsSectionLabel.snp.bottom).offset(15)
        make.leading.trailing.equalToSuperview().inset(20)
        make.bottom.equalTo(view.safeAreaLayoutGuide).offset(-20)
    }
    
    tableView.snp.makeConstraints { make in
        make.edges.equalToSuperview()
    }
}

개선 결과 ✨

1. 코드 구조화

   • 기능별 메서드 분리를 통한 구조 개선
   • 컴포넌트 역할의 명확한 정의
   • 재사용성 향상

2. 사용자 경험 개선

   • 스와이프 삭제 기능 구현
   • 영화 포스터 이미지 표시 기능 추가
   • 직관적인 UI 구성

3. 성능 최적화

   • 테이블뷰 셀 재사용을 통한 메모리 최적화
   • 비동기 이미지 로딩 구현
   • 전반적인 메모리 관리 개선

결론 🌟

이번 개선 작업을 통해 코드 구조화의 중요성을 재확인할 수 있었다. 특히 사용자 경험 측면에서 큰 개선을 이룰 수 있었으며, 향후 유지보수성도 크게 향상되었다. 앞으로도 지속적인 개선을 통해 더 나은 앱을 만들어 나갈 계획이다.

개발 과정에서 겪은 비슷한 경험이나 의견이 있다면 댓글로 공유해주면 좋겠다.

#iOS #Swift #UIKit #리팩토링 #TableView #UX개선