iOS UIKit으로 책 검색 앱 만들기 📚

UIKit을 사용하여 책 검색 앱을 구현한 과정을 정리하였다. TabBarController를 기반으로 검색 화면과 북마크 화면을 구현하고, SnapKit을 활용하여 UI를 구성하였다.

개발 환경 🛠

• Xcode 16.1
• iOS 18.0+
• SnapKit

주요 기능 📱

1. 탭바를 통한 화면 전환 (검색/북마크)
2. 책 검색 기능 구현
3. 최근 본 책 필터링 기능
4. 책 상세 정보 보기
5. 북마크 기능

전체 코드 구조 💻

├── ViewController (TabBarController)
├── BookSearchViewController
│   ├── SearchBar
│   ├── Color Filters
│   └── BookListTableView
├── BookDetailViewController
├── BookmarkViewController
└── BookSearchCell

구현 내용 📝

1. TabBarController 구현

class ViewController: UITabBarController {
    private func setupTabBar() {
        // 첫 번째 탭 - 검색 화면
        let searchVC = BookSearchViewController()
        let searchNav = UINavigationController(rootViewController: searchVC)
        searchNav.tabBarItem = UITabBarItem(
            title: "검색",
            image: UIImage(systemName: "magnifyingglass"),
            selectedImage: UIImage(systemName: "magnifyingglass.fill")
        )
        
        // 두 번째 탭 - 북마크 화면
        let bookmarkVC = BookmarkViewController()
        let bookmarkNav = UINavigationController(rootViewController: bookmarkVC)
        bookmarkNav.tabBarItem = UITabBarItem(
            title: "저장된 책",
            image: UIImage(systemName: "bookmark"),
            selectedImage: UIImage(systemName: "bookmark.fill")
        )
        
        self.viewControllers = [searchNav, bookmarkNav]
        self.tabBar.tintColor = .systemBlue
        self.tabBar.backgroundColor = .white
    }
}

2. 검색 화면 구현

class BookSearchViewController: UIViewController {
    // UI 컴포넌트 설정
    private let searchBar: UISearchBar = {
        let searchBar = UISearchBar()
        searchBar.placeholder = "검색할 책 제목을 입력해주세요"
        return searchBar
    }()
    
    // 컬러 필터 설정
    private func setupComponents() {
        [redFilterView, orangeFilterView, yellowFilterView, greenFilterView].forEach {
            $0.layer.cornerRadius = 15
            filterContainerView.addSubview($0)
        }
    }
    
    // SnapKit을 활용한 레이아웃 설정
    private func setupConstraints() {
        searchBar.snp.makeConstraints { make in
            make.top.equalTo(view.safeAreaLayoutGuide).offset(10)
            make.leading.trailing.equalToSuperview().inset(20)
            make.height.equalTo(44)
        }
        // ... 기타 제약조건
    }
}

3. 테이블뷰 셀 구현

class BookSearchCell: UITableViewCell {
    private let titleLabel: UILabel = {
        let label = UILabel()
        label.font = .systemFont(ofSize: 16)
        return label
    }()
    
    private let priceLabel: UILabel = {
        let label = UILabel()
        label.font = .systemFont(ofSize: 14)
        label.textColor = .gray
        return label
    }()
    
    func configure(title: String, price: String) {
        titleLabel.text = title
        priceLabel.text = price
    }
}

추가 구현 예정 사항 🎯

1. 서치바 외곽 선 제거

   • 서치바 스타일 및 배경 설정 수정
   • 내부 텍스트필드 커스터마이징

2. 최근 본 책 원형 크기 조정

   • filterSize 값 수정
   • 컬러 필터 뷰 크기 및 간격 재조정

3. 상단 여백 최적화

   • 상단 레이아웃 마진 값 조정
   • 컴포넌트 간 간격 개선

4. 텍스트 크기 조정

   • 레이블 폰트 사이즈 개선
   • 텍스트 스타일 일관성 확보

개선 방향 🔍

• 코드 모듈화 및 재사용성 향상
• UI/UX 최적화 작업
• 데이터 관리 로직 보강
• 애니메이션 효과 개선

참고 자료 📚

• Apple Developer Documentation - UIKit
• SnapKit Documentation
• Human Interface Guidelines

업데이트 내역 🔄

• 2024.12.26: 초기 버전 구현
• 향후 개선사항 적용 예정