SnapKit을 활용한 iOS 계산기 UI 구성

---

📌 오늘의 목표

• UILabel로 수식을 출력하는 영역 구성
• UIStackView를 사용해 계산기 버튼을 4x4 그리드로 배치
• SnapKit을 활용한 오토레이아웃 제약 설정 연습

---

✅ 구현 내용 요약

1. 상단 수식 표시 영역 (UILabel)

• .textAlignment = .right, .font = .boldSystemFont(ofSize: 60) 등으로 계산기 스타일 강조
• SnapKit을 사용하여 상단 여백 및 좌우 간격 설정

make.top.equalToSuperview().offset(200)
make.leading.trailing.equalToSuperview().inset(30)

2. 🔘 버튼 구성 (UIButton)

• 버튼 텍스트는 2차원 배열 buttonRows에 저장
• map 함수를 이용해 각 텍스트를 UIButton으로 변환
• 버튼 스타일:
  • 배경색: 어두운 회색 (UIColor(red: 58/255, green: 58/255, blue: 58/255, alpha: 1.0))
  • 텍스트 색상: 흰색
  • 글꼴: .boldSystemFont(ofSize: 30)
  • 모서리 둥글게: cornerRadius = 40
• 크기 제약은 SnapKit으로 지정:

button.snp.makeConstraints { make in
    make.size.equalTo(CGSize(width: 80, height: 80))
}

3. 📐 StackView 활용

• makeHorizontalStackView() 함수를 통해 각 버튼 행(row)을 수평 UIStackView로 구성
• 4개의 수평 스택을 다시 verticalStackView에 수직으로 쌓는 방식
• UIStackView의 재사용성과 자동 정렬 기능 덕분에 코드가 간결해짐

🔧 스택뷰 설정

stackView.axis = .vertical
stackView.spacing = 10
stackView.distribution = .fillEqually

• 전체 버튼 영역은 SnapKit을 사용해 다음과 같이 배치:

verticalStackView.snp.makeConstraints { make in
    make.top.equalTo(formulaLabel.snp.bottom).offset(60)
    make.centerX.equalToSuperview()
    make.width.equalTo(350)
}

• 각 수평 스택뷰도 버튼 높이를 지정하여 정사각형 배치 유도:

stackView.snp.makeConstraints { make in
    make.height.equalTo(80)
}

---

🛠 트러블슈팅: 버튼이 겹치거나 사이즈 깨짐 현상

❓ 문제 상황

• 버튼이 겹치거나 의도한 위치에서 밀리는 현상이 발생

• 각 버튼에 고정 크기(80x80)를 지정했으나, StackView의 자동 배치와 충돌

💡 원인 분석

• StackView의 .fillEqually는 내부 뷰의 크기 지정보다 균등 분배를 우선

• 각 버튼에 make.size.equalTo(...)를 지정하면 StackView가 레이아웃 계산 시 충돌 가능성 발생

✅ 해결 방법

// 버튼 고정 크기 삭제
// 대신 StackView와 spacing, inset을 통해 자연스럽게 레이아웃 유도
button.snp.makeConstraints { make in
    make.width.height.greaterThanOrEqualTo(0) // 또는 생략
}

🔁 리팩토링 예시

// 버튼 고정 크기 삭제
// 대신 StackView와 spacing, inset을 통해 자연스럽게 레이아웃 유도
button.snp.makeConstraints { make in
    make.width.height.greaterThanOrEqualTo(0) // 또는 생략
}

---

✍️ 느낀 점

• UIStackView는 반복 UI 구성에 매우 강력하며, map + 배열 + StackView 구조는 코드의 간결성과 재사용성을 모두 만족시킴

• SnapKit 덕분에 오토레이아웃 코드 작성이 직관적이지만,
  StackView 내부 요소들과 직접 제약을 동시에 줄 경우 우선순위 충돌을 유의해야 함

• 실습을 통해 "StackView가 모든 걸 관리하게 하고, 내부 요소는 가급적 가볍게" 라는 레이아웃 전략의 필요성을 체감함

• 다음 단계로는 버튼 클릭 이벤트를 연산 로직에 연결하고,
  각 버튼의 역할(AC, =, 연산자 등)을 구분하여 기능을 구현할 계획