[Swift｜NBC] 팀프로젝트(1) Oripresso; 카페 주문 앱

팀명 : 오리궁뎅2조

프로젝트 참여자 : 신승현(팀장), 박현렬, 박충건, 이시안, 김유림

 

 

1. 프로젝트 개요

---

• 프로젝트명 : Oripresso
• 설명 : 음료 및 디저트를 비대면으로 주문할 수 있는 애플리케이션
  • 메인페이지 : 원하는 메뉴를 탭하여 장바구니에 담습니다.
  • 주문 내역 페이지 : 담은 메뉴의 수량을 조절하고, 주문 또는 취소합니다.
• 프로젝트 일정 : 24/04/01 ~ 24/04/05 (5일)
• 프로젝트 결과물
  • 깃헙: GitHub - NBCampArchive/Oripresso
  • 유튜브: [내일배움캠프] 오리궁뎅2조 - Oripresso

 

 

2. 역할 분담

---

 

 

 

3. 프로젝트 운영 방식 및 룰

---

[피그마 활용]

1. 아이디어 공유 및 구체화

→ Layout이나 제약조건을 쉽게 맞출 수 있음

 

 

2. 이미지 관리

→ 피그마에서는 UI나 사진 파일을 .svg 형식으로 쉽게 export 가능 (svg: 웹 진화적 벡터 파일)

*이미지 파일 형식 별 화질과 기능 차이 ⇒ 팀원 이시안님 블로그(링크)

 

 

[git 활용]

1. 코딩 컨벤션 적용

• 1. 네이밍 규칙:
     • 클래스, 구조체, 열거형 이름은 UpperCamelCase를 사용합니다.
     • 함수, 변수, 상수 이름은 lowerCamelCase를 사용합니다.
     • 약어는 모두 대문자로 표기합니다. (예: URL, ID)
  2. 들여쓰기 및 공백:
     • 들여쓰기는 공백 4칸을 사용합니다.
     • 콜론(:) 앞에는 공백을 없애고, 콜론 뒤에는 공백을 추가합니다.
     • 연산자 앞뒤로 공백을 추가합니다.
     • 쉼표(,) 뒤에는 공백을 추가합니다.
     • if let 구문이 길 경우에는 줄바꿈하고 한 칸 들여씁니다.
     • 빈 줄에는 공백이 포함되지 않도록 합니다.
  3. 줄 길이 제한:
     • 한 줄의 길이는 80자 또는 100자를 넘지 않도록 합니다.
     • 긴 줄은 적절한 위치에서 줄바꿈하고 들여쓰기를 사용합니다.
  4. Import
     • 모듈 임포트는 알파벳 순으로 정렬합니다. 내장 프레임워크를 먼저 임포트하고, 빈 줄로 구분하여 서드파티 프레임워크를 임포트합니다.
  5. 주석:
     • 코드의 의도와 목적을 명확히 설명하는 주석을 작성합니다.
     • ///를 사용해서 문서화에 사용되는 주석을 남깁니다.
     • // MARK: -를 사용해서 연관된 코드를 구분짓습니다.
  6. 브레이스 스타일:
     • 여는 중괄호({)는 같은 줄에 위치시키고, 닫는 중괄호(})는 새로운 줄에 위치시킵니다.
     • 조건문과 반복문에서 중괄호는 항상 사용합니다.
  7. 그 외 규칙:
     • guard 문을 사용하여 옵셔널 바인딩과 조건 검사를 수행합니다.
     • 타입 추론을 활용하되, 명시적으로 타입을 지정해야 할 때는 지정합니다.
     • 프로토콜 채택 시 extension을 사용하여 관련 메서드를 그룹화합니다.
     • 필요 이상으로 복잡한 코드는 피하고, 간결하고 이해하기 쉽게 작성합니다.

1.  

 

2.  이슈 생성, 커밋 컨벤션 -> 관련된 기능을 묶어서 관리 가능

[커밋 컨벤션]

• 방식 : [Prefix] #이슈번호 - 내용작성
  예시 : [Setting] #1 - 프로젝트 폴더링
• prefix 구분

[Feat]: 새로운 기능 구현
[Design]: just 화면. 레이아웃 조정
[Fix]: 버그, 오류 해결, 코드 수정
[Add]: Feat 이외의 부수적인 코드 추가, 라이브러리 추가, 새로운 View 생성
[Del]: 쓸모없는 코드, 주석 삭제
[Refactor]: 전면 수정이 있을 때 사용합니다
[Remove]: 파일 삭제
[Chore]: 그 이외의 잡일/ 버전 코드 수정, 패키지 구조 변경, 파일 이동, 파일이름 변경
[Docs]: README나 WIKI 등의 문서 개정
[Comment]: 필요한 주석 추가 및 변경
[Setting]: 프로젝트 세팅
[Merge]: 머지

 

[예시]

 

 

 

3. 프로젝트 보드 사용 -> 작업 중인 내용 관리

 

4. 마일스톤 사용 -> 완료 시점 관리

 

 

 

5. PR Template 활용

 

6. Pull Request 규칙

: 팀원 1명 이상 approve 했을 때 merge 하기

 

 

4. 와이어프레임 및 시연

---

 

 

 

 

5. 개발 상세

---

1) Model-View-Controller 패턴

 

• Model: 데이터 구조 정의
• View: 데이터를 보여주는 UI 정의
• Controller: 사용자 입력을 받아 Model과 상호작용하고, 사용자에게 해당 View를 제공

 

 

 

 

 

 

 

 

 

2) 데이터 구조

☕️ 판매 메뉴 데이터

JSON을 struct로 만들어 사용

• JSON 활용 이유 
  • ViewController에서 메뉴를 전부 선언해서 관리하는게 지저분해보임
  • 수정하지 않을 데이터라서 JSON으로 관리해도 괜찮겠다고 생각
  • 메뉴가 4가지 카테고리로 나뉘는데, JSON에서 카테고리별로 정리하면 카테고리별로 파일 관리를 안 해도 됨
• 데이터 구조 [더보기]

<JSON>

 

<Swift Struct>

 

 

☕️ 주문 내역 데이터

• Swift에서 struct 생성
• 메인화면에서 클릭

struct SelectedMenu {
    let name: String
    let price: Int
    var quantity: Int
}

 

 

3) 페이지별 기능

👉 온보딩 화면

• CollectionView 로 멤버 정보와 광고 관리

 

 

👉 메인 화면

• segementController로 단일 tableview로 여러 category 관리
• TableView cell 다중선택 가능하도록 하여 선택 메뉴 관리
• 장바구니 버튼 클릭 시 주문내역뷰로 이동하기

 

 

👉 주문 내역

• tableView
• +, - 버튼 클릭 시
  • 해당 메뉴의 수량과 가격 변경
  • 총 수량과 금액 변경
• 주문취소 버튼 클릭 시
  • selectedMenu 배열 초기화
  • 메인화면으로 돌아가기
• 왼쪽으로 스와이프 시
  • 메뉴 삭제

 

 

4) 기타

• 스토리보드 분리 → 깃 협업 시 충돌 위험 줄임
• Navigation의 경우, pushViewController 사용
• Snapkit, Then 라이브러리 사용 → 제약조건을 간편하게 코드화
• UIFont 활용하여 폰트 적용

 

 

6. 어려웠던 점 & 해결한 내용

---

• 깃 사용 경험이 많은 팀원분께서 협업 초반에 깃 사용 방법을 자세히 설명해주신 덕분에 원활하게 협업을 진행할 수 있었습니다.
• Storyboard 충돌 시 xml 형식이라 보기 어려웠음, 팀원 분들과 자주 소통해서 수정한 내용을 재점검 후 conflict를 해결했다.
• segmentControl의 디자인을 커스텀화 할 때, 원하는 형식으로 바꾸기 힘들었는데 StackOverFlow에서 열심히 검색해서 해결방법을 찾았다.
• 주문내역 뷰에서 데이터를 수정한 후 메인 메뉴로 돌아가는 경우, 수정된 데이터를 두 뷰 모두에 적용하는 것에 어려움을 겪었는데, viewWillAppear, viewWillDisappear를 적절히 활용하여 문제를 해결했습니다.

 

 

7. 소감

첫 팀 프로젝트에서 좋은 팀원분들을 만나 새롭고 다양한 경험을 해보고 많이 배울 수 있었습니다.

피그마로 이미지를 export하면 svg 형식으로 다운받을 수 있다는 것,

스토리보드에서 편집한 내용은 충돌 발생 시 해결하기 어렵다는 것,

템플릿에 맞춰 PR(Pull Request)하면 변동사항을 빠르게 파악할 수 있는 것 등 새롭게 배운 것이 많습니다.

 

또한, 마감 직전에 앱의 오류를 발견하고 해결한 일은 스릴넘치고 재미있었지만,

앞으로 진행할 프로젝트는 미리미리 꼼꼼히 체크해야겠다고 생각했습니다.

 

이번 팀원들을 언젠가 꼭 다시 만나고 싶습니다:D