-Today's Learning Content-

• 프로젝트 개발 회의

---

1. 무슨 앱을 만들까?

팀 프로젝트 주제

키오스크, 모바일 주문 앱 UI 프로젝트
스타벅스, 맥딜리버리 등 키오스크, 주변에서 많이 사용하고 계실텐데요!
이번 프로젝트에서는 여러분이 직접 키오스크와 모바일 주문 앱의 UI와 기능을 설계하고 구현하며, 개발자로서 사용자 경험(UX)을 기술적으로 풀어내는 과정을 경험을 하게 됩니다!
앱은 단순히 화면을 보여주는 도구가 아닙니다. 사용자가 원하는 작업을 빠르고 정확하게 처리할 수 있도록, 기술과 UX가 완벽하게 조화를 이루는 구조를 만드는 것이 핵심입니다. View를 구성하거나 Constraint를 설정할 때 단순히 화면을 구현하는 데서 그치지 말고, "왜 이렇게 해야 하는가?"라는 질문을 통해 명확한 개발 의도를 담은 화면을 만들어 봅시다!

1) 구현 과제

필수 구현

• 메인 페이지

  • 키오스크 화면을 보여주는 페이지 구성
  • 키오스크 화면 자체가 하나의 ViewController
    • 아래의 각 부분을 UI 컴포넌트로 잘 분리하기

• 상단 메뉴 카테고리 바

  • 메뉴 카테고리(ex. 추천메뉴, 햄버거, 디저트/치킨 등)를 정의하고 메뉴 구성
  • UISegmentedControl , UIStackView , UICollectionView 등을 활용하여 화면을 구성

• 메뉴 화면

  • 특정 메뉴 카테고리 클릭 시, 메뉴 카테고리에 해당하는 메뉴들을 표시
  • UICollectionView 등을 활용하여 화면을 구성

• 주문 내역 화면

  • 총 주문 메뉴 개수를 “총 주문내역 X개” 로 표시해주세요
  • 주문한 메뉴들이 표시될 수 있도록 구성해주세요
    • 각 메뉴를 표시하면서 각 메뉴 옆에 +, -버튼을 만들어서 해당 메뉴의 수량을 조정
  • UITableView 등을 활용하여 화면을 구성해보세요

• 취소하기 / 결제하기 버튼 화면

  • 주문 메뉴 전체를 취소하는 취소하기 버튼을 구현
  • 주문 메뉴 전체를 결제하는 결제하기 버튼을 구현

도전 구현

• 부가 기능 추가
  • ex. 돋보기 와 같은 부가적인 기능 구현
  • ex. 오늘의 제일 잘 팔린 메뉴 보기
  • ex. 직원호출 → alert창 띄우기
• 다크 모드 구현
  • 다크 모드 기능을 위 “부가 기능 추가”의 기능으로 추가
  • 라이트 모드 ↔ 다크 모드 전환이 가능하도록 Color를 설정
  • Appearance 설정에 대해 알아봅니다.
  • System Color를 활용하거나, Color Assets를 활용하여 커스텀 컬러 설정 시에도 다크 모드 대응
• 페이징 기능
  • 최대로 표현할수 있는 메뉴 수가 넘었을 때 좌우로 이전 , 다음 버튼을 만들어서 한 페이지당 표현할수 있는 메뉴의 개수를 맞춰주세요.
    • 하단에 빨간 점을 보실 수 있는데, 현재 페이지는 빨간 점, 다른 페이지는 회색 점으로 그려주세요.

2) 프로젝트명 정하기

프로젝트명은 팀원 5명이 각각 아이디어를 내고 아이디어를 낸 이유를 발표한 후 투표를 통해 결정했다.
투표 결과, 4명이나 같은 아이디어를 선택했는데, iMacDonald 라는 이름이었다.
선정 이유는, 햄버거 키오스크라는 주제와 걸맞고, iOS 개발자라는 아이덴티티와 결합되어 정감가고 좋은 이름이라고 생각했기 때문이다.

그리고 앱 아이콘과 이름을 디자인까지 완성하였다.

앱 아이콘	타이틀 디자인

3) 레퍼런스 모으기

주제는 햄버거 키오스크로 정했으니 이제 UI를 디자인 할 차례였다.
팀원들과 회의를 통해 프로젝트명도 iMacDonald인 만큼 애플스러운 디자인으로 만들자고 하였다.

때문에 초반에는 화이트 색상 기반에 포인트컬러를 파란색으로 하려고 했으나, 음식과 관련된 앱인데 색이 너무 식욕을 돋구지 못하는 것 같다는 이유로 반려되고, 음식의 이미지에 맞게 따뜻한 컬러로 변경하게 되었다.

그리고 라이트모드와 다크모드에서 각각 지원하는 컬러를 정해 컬러팔레트를 결정하였다.

그리고 UI 디자인에 대한 레퍼런스를 모아 최적의 UI를 선정하는 과정을 거쳤다.

그리고 최종 선정된 UI는 아래와 같다.

4) GitHub 연결하기

UI 디자인을 하는데까지 시간을 무척 소모한 탓에 GitHub에 대한 설정은 저녁시간이 되어서야 가능했다.
우리는 브랜치 전략과 커밋 컨벤션 등을 우선 설정했다.

커밋 컨벤션

Git Flow

브랜치 전략

1. main 브랜치에 프로젝트 기본 세팅

   1. README 작성
   2. .gitignore 파일 작성
   3. 프로젝트 파일 생성(Xcode)
   4. 코드베이스 기본 세팅(스토리보드 삭제, info 설정 등)
   5. 프로젝트 Asset 추가(이미지, 컬러세트 등)
   6. 프로젝트 디렉토리 분리(각 역할 별로 분리)

2. dev 브랜치 생성(main 브랜치를 기준으로)

   1. 메인 브랜치에 만들어진 내용을 복제
   2. 작업 브랜치(Default)를 dev 브랜치로 설정

3. 팀원별 원격 브랜치 분리

   1. dev 브랜치를 기준으로 원격 브랜치를 분리
   2. 세부적인 작업 내용은 로컬 브랜치로 분리

4. 모든 작업 완료 후 test 브랜치를 생성

   1. dev 브랜치의 내용을 test 브랜치로 복제
   2. test 브랜치에서 프로젝트 버그 확인 및 수정
   3. 필요에 따라 hotFix 브랜치를 생성하여 운영

5. 완성된 프로젝트를 main에 전달

   1. test 브랜치에서 버그 등을 수정 후 최종 완성된 프로젝트를 main 브랜치에 전달
   2. 불필요한 브랜치 삭제
   3. README 수정

그리고 GitHub에서 organization을 만들어 프로젝트 레포지토리를 생성했다.
그리고 브랜치 전략을 세운 것처럼 main에서 README, gitignore 등을 작성하는 등 기본 세팅을 마친 후 dev 브랜치를 만들어 복제하고 팀원별로 원격 브랜치를 나누어 만들었다.

그리고 push 테스트를 진행하며 문제가 없는지, Conflicts이 발생하지는 않는지 확인하며 프로젝트 개발을 시작하기 위한 초석 마련을 마무리할 수 있었다.

---

-Today's Lesson Review-

오늘은 프로젝트를 시작하여 UI/UX 디자인, 브랜치 전략, 코드 컨벤션 등을 정하는 시간을 가졌다.
코드는 하나도 안 썼는데도 무척이나 체력 소모가 큰 하루였다...
내일부터는 본격적으로 코드 개발을 시작하게 되기 때문에 기대를 하고있다.