🐔 꼬끼오스크 프로젝트 회고

아무튼 샤라웃 받은 꼬끼오스크 회고


레지고!!!!!!!! 난 🐔꼬끼오스크 깃허브😘

이번 프로젝트는 키오스크 앱을 만들고 주어진 필수 구현을 끝까지 진행하는 것을 목표로 잡고 진행했다. 사용자들이 매장에 직접 방문하지 않고도 편리하게 메뉴를 주문할 수 있도록 도와주는 앱을 구현하려고 노력했다. 나는 장바구니 기능과 관련하여 사용자가 직관적으로 상품을 추가하거나 수량을 변경하는 경험을 제공하는 데 중점을 두었다.

🎨 역할과 기여

나는 장바구니 파트를 UIView, UIStackView, UITableView 등을 활용하여 구현해보았다. 수량 조절, 상품 추가 및 삭제 기능을 포함한 장바구니 UI를 담당하며 사용자 인터페이스를 구성할 수 있었다. 이 외에도 팀과 함께 README 작성 등 문서화에 도움을 주고자 노력했으며, Git 컨벤션과 머지 전략에 대해 의견을 많이 더했다.

🌟 성장의 순간

나는 필수 기능 구현을 마치고 README 문서 작성에 참여하여 프로젝트의 문서화를 체계적으로 진행했다. 오랜만에 문서화 작업을 하며 내가 놓쳤던 부분들을 다듬을 수 있는 좋은 계기가 되었다고 생각한다.
또 Git에 대해 더 깊이 공부하며 팀원들과의 협업을 원활하게 만들기 위해 노력했다. 팀원들과 같이 Git에 대해 함께 배우며 성장하는 모습을 볼 수 있었고, 이를 통해 팀 전체의 역량이 상승한 것이 느껴져 정말 뿌듯했다.

😮‍💨 아쉬운 점

아쉬운 점으로는 역시 아직 내 실력에 대해 부족함을 느끼는 것. 배운 내용에서 벗어난, 자유로운 프로젝트였기에 방향 설정이 어렵게 느껴졌다. 그래서인지 대부분 팀원들에게 의존하는 상황이 많았다.

📖 배운 점

이번 프로젝트를 통해 팀플레이의 중요성을 크게 배웠다. 팀원들이 각자 자신의 역할을 충실히 수행하면서, 부족한 부분을 서로 보완해 나가는 과정을 통해 좋은 협업이 무엇인지 느낄 수 있었다. 혼자만의 작업이 아니라 협력과 조율을 통해 성과를 만들어가는 것이 팀플레이의 본질임을 체감했고, 그로 인해 내가 팀원들로부터 많은 배움을 얻을 수 있었다. 팀원들 각자가 맡은 역할을 열심히 수행하며 도움을 주는 모습을 보면서 정말 존경스러웠다. 물론 매일 방문해주시는 튜터님의 도움과 조언도 잊을 수 없다.

🤗 협업의 의미

회사에서 주로 혼자 일하던 나는 이번 팀 프로젝트가 오랜만의 협업이었다. 각자의 의견을 나누고 최적의 해결책을 찾아가는 과정에서 많은 재미와 의미를 느낄 수 있었다. 특히 페어 프로그래밍을 통해 함께 문제를 해결하며 얻은 재미가 컸고, 팀원과 교류하며 많은 것을 배울 수 있었다. 문제 해결을 위해 함께 아이디어를 공유하고 개선점을 찾아가는 과정이 큰 에너지를 주었고, 이를 통해 협업의 순수한 즐거움을 다시금 깨달았다.

🚀 앞으로의 도전

다음 프로젝트에서는 사용자 경험에 더 신경 쓰고 싶다. 필수 기능 구현에 집중하느라 UX를 충분히 고려하지 못한 점이 아쉬웠는데, 이제는 사용자 관점에서 좀 더 편리하고 직관적인 인터페이스를 제공하기 위해 깊이 고민해보는 시간이 충분했으면 좋겠다. 또한, 팀원들에게 더 많은 기술적 도움을 줄 수 있는 사람이 되기 위해 지속적인 학습과 주도적인 문제 해결에 도전하고 싶다.

🌿 성장 이야기

이번 프로젝트를 진행하면서 특히 UIKit과 관련된 다양한 요소들을 더 깊이 이해하고, 사용자 인터페이스(UI)를 구현하는 방식에 대해 많은 성장을 이뤘?다고 생각한다.

1. UIStackView와 UITableView 활용 능력 +1

   // UITableView와 UIStackView를 활용한 장바구니 UI 구성
   let cartTableView = UITableView()
   let headerStackView = UIStackView()
   
   // StackView와 TableView를 뷰에 추가
   view.addSubview(headerStackView)
   view.addSubview(cartTableView)
   
   headerStackView.axis = .horizontal
   headerStackView.distribution = .fillEqually
   
   // 제약조건 설정
   headerStackView.snp.makeConstraints { make in
       make.top.equalToSuperview().offset(16)
       make.leading.trailing.equalToSuperview().inset(16)
       make.height.equalTo(50)
   }
   
   cartTableView.snp.makeConstraints { make in
       make.top.equalTo(headerStackView.snp.bottom).offset(16)
       make.leading.trailing.bottom.equalToSuperview().inset(10)
   }

   UIStackView와 UITableView를 사용해 유동적인 UI 구성 요소를 만들면서, 다양한 상황에 따라 레이아웃을 어떻게 조절할 수 있는지 배울 수 있었다. 특히 장바구니 화면에서 상품을 실시간으로 조절할 수 있는 기능을 구현하면서, UITableView와 데이터를 효과적으로 연결하는 방법을 경험할 수 있었다.

2. 코드의 재사용성과 구조화된 설계의 중요성 이해

   // 재사용 가능한 CartTableViewCell
   class CartTableViewCell: UITableViewCell {
       private let menuLabel = UILabel()
       private let decreaseQuantityButton = UIButton()
       private let increaseQuantityButton = UIButton()
       private let quantityLabel = UILabel()
   
       override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
           super.init(style: style, reuseIdentifier: reuseIdentifier)
           setUpCell()
       }
   
       required init?(coder: NSCoder) {
           fatalError("init(coder:) has not been implemented")
       }
   
       private func setUpCell() {
           // UI 요소 추가 및 레이아웃 설정
           let stackView = UIStackView(arrangedSubviews: [decreaseQuantityButton, quantityLabel, increaseQuantityButton])
           stackView.axis = .horizontal
           stackView.spacing = 8
   
           contentView.addSubview(menuLabel)
           contentView.addSubview(stackView)
   
           menuLabel.snp.makeConstraints { make in
               make.leading.top.equalToSuperview().offset(16)
           }
   
           stackView.snp.makeConstraints { make in
               make.trailing.top.equalToSuperview().offset(16)
           }
       }
   
       func configure(with menu: String, quantity: Int) {
           menuLabel.text = menu
           quantityLabel.text = "\(quantity)"
       }
   }

   각 UI 요소를 별도의 커스텀 뷰나 셀로 분리하고 이를 재사용하는 방식을 통해 코드의 재사용성을 높였다.(?) 예를 들어, CartTableViewCell을 활용해 장바구니 내 상품의 정보를 반복적으로 표현하면서 반복되는 코드를 줄일 수 있었고, 셀 내부의 버튼을 활용해 사용자 액션을 처리하는 로직을 효율적으로 작성할 수 있었다. 이 과정에서 코드의 재사용성과 구조화된 설계의 중요성을 더욱 깊이 이해하게 되었다.

3. 클로저를 사용한 동적 UI 업데이트 경험

   // 클로저를 사용한 버튼 액션 구현
   class CartTableViewCell: UITableViewCell {
       var minusButtonTapped: (() -> Void)?
       var plusButtonTapped: (() -> Void)?
   
       private let decreaseQuantityButton = UIButton()
       private let increaseQuantityButton = UIButton()
   
       override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
           super.init(style: style, reuseIdentifier: reuseIdentifier)
           setUpButtons()
       }
   
       required init?(coder: NSCoder) {
           fatalError("init(coder:) has not been implemented")
       }
   
       private func setUpButtons() {
           decreaseQuantityButton.setTitle("-", for: .normal)
           decreaseQuantityButton.addTarget(self, action: #selector(handleMinusButtonTapped), for: .touchUpInside)
   
           increaseQuantityButton.setTitle("+", for: .normal)
           increaseQuantityButton.addTarget(self, action: #selector(handlePlusButtonTapped), for: .touchUpInside)
   
           contentView.addSubview(decreaseQuantityButton)
           contentView.addSubview(increaseQuantityButton)
   
           // 버튼 레이아웃 설정 (SnapKit 사용 예시)
           decreaseQuantityButton.snp.makeConstraints { make in
               make.leading.equalToSuperview().offset(16)
               make.centerY.equalToSuperview()
           }
   
           increaseQuantityButton.snp.makeConstraints { make in
               make.trailing.equalToSuperview().offset(-16)
               make.centerY.equalToSuperview()
           }
       }
   
       @objc private func handleMinusButtonTapped() {
           minusButtonTapped?()
       }
   
       @objc private func handlePlusButtonTapped() {
           plusButtonTapped?()
       }
   }

   CartTableViewCell에서 수량을 증가시키거나 감소시키기 위해 클로저(minusButtonTapped, plusButtonTapped)를 사용했다. 이 접근 방식을 통해, 버튼이 눌렸을 때 즉각적으로 데이터를 변경하고 이를 UI에 반영하는 실시간 업데이트 기능을 구현할 수 있었다. 특히 클로저를 이용해 부모 뷰와 데이터를 연결하고 조작하면서, 클로저의 강력함과 이에 따른 메모리 관리의 중요성을 배우게 되었다.
   
   팀 리더인 Eric님의 코드 갈라쇼를 1열 직관하여 비로소 이해할 수 있게 된 작업이다.
   
   

4. SnapKit을 통한 직관적인 레이아웃 관리
   SnapKit 라이브러리를 통해 레이아웃을 직관적이고 효율적으로 설정하는 방법을 익혔다. 제약 조건을 코드로 설정하는 것이 어려울 수 있었지만, SnapKit을 활용해 가독성 높은 레이아웃 코드를 작성할 수 있었고, 특히 다양한 기기에서 레이아웃이 일관되게 보이도록 유지할 수 있었다.

5. 데이터 흐름과 상태 관리의 이해

   func updateCartData() {
       tableView.reloadData()
       cartHeaderStackView.updateTotalCount(newCount: cartManager.totalCount)
   }

   장바구니의 상품 수량을 조절하고, 주문 데이터가 변경될 때마다 UI를 업데이트하는 작업을 진행하면서 데이터 흐름과 상태 관리를 체계적으로 이해하는 시간을 가질 수 있었다. 특히 reloadData()를 통해 UITableView의 변경사항을 반영하고, CartHeaderStackView의 라벨을 업데이트하는 과정에서 상태 관리의 중요성과 이를 정확하게 처리하는 방법을 배웠다.

6. 사용자 중심의 UX 고려

   // 장바구니가 비어 있을 때 안내 문구 표시
   if cartManager.orders.isEmpty {
       emptyCartLabel.isHidden = false
   } else {
       emptyCartLabel.isHidden = true
   }

   장바구니가 비어 있을 때 안내 문구를 보여주는 등 사용자 경험(UX)을 고려한 UI를 구성하려고 노력했다. 사용자 입장에서 앱을 보다 쉽게 사용할 수 있도록 UI의 세부적인 부분까지 신경 쓰면서, 사용자 경험을 고려하는 것이 얼마나 중요한지 깨달았다. 다음번엔 좀 더 고민해보고 싶다!

💡 프로젝트 교훈

좋은 팀원을 만나는 것이 얼마나 중요한가.
팀은 내가 선택한 것이 아니라 무작위로 주어진 운명이기에 더 큰 의미로 다가왔다. 특히 좋은 팀원들과 함께라면 어려운 문제도 함께 해결할 수 있다는 점을 체감했다. 이번 프로젝트에서 좋은 팀원들을 만난 것은 제게 큰 행운이었고, 덕분에 프로젝트를 성공적으로 마무리할 수 있었다고 생각한다. 계산해조 팀을 만나게 된 것은 정말 영광이었으며, 앞으로의 협업에서도 큰 밑거름이 될 것이라 확신한다. 🍀