팀프로젝트1 [주문 앱 만들기(1) - 디자인 비하인드, CustomFont]

⎮ 팀 프로젝트 시작

     팀 프로젝트를 시작하면서 주제를 받았고, 내용은 다음과 같다.

- 키오스크, 모바일 주문 앱 UI 프로젝트
스타벅스, 맥딜리버리 등 키오스크, 주변에서 많이 사용하고 계실텐데요!

 이번 프로젝트에서는 여러분이 직접 **키오스크와 모바일 주문 앱의 UI와 기능**을 설계하고 구현하며,
개발자로서 사용자 경험(UX)을 기술적으로 풀어내는 과정을 경험을 하게 됩니다!

 앱은 단순히 화면을 보여주는 도구가 아닙니다.
사용자가 원하는 작업을 빠르고 정확하게 처리할 수 있도록, 기술과 UX가 완벽하게 조화를 이루는 구조를 만드는 것이 핵심입니다. View를 구성하거나 Constraint를 설정할 때 단순히 화면을 구현하는 데서 그치지 말고,
"왜 이렇게 해야 하는가?"라는 질문을 통해 명확한 개발 의도를 담은 화면을 만들어 봅시다!

 

     앱 주제: 굿즈를 판매하는 모바일 주문 앱

 

⎮ 디자인 비하인드

    굿즈를 판매하는 모바일 주문앱에 대한 이름을 정하다가,

   '주문'하는 것에 대한 언어유희를 하고 싶었다.

    키오스크, 오더 중에 어떤 것으로 언어유희를 할 수 있을까 고민해보다가

    오덕후라는 말이 생각이 났다.

   "무언가에 열정적으로 몰입하거나 좋아하는 사람"을 오덕후라고 하는데,

   이 오덕후의 발음을 이용해서 오더ㅋ라는 네이밍을 하게 되었다.

 

   기존의 로고 디자인은 다음과 같다.

 

   5duck이라는게, 뭔가 5마리의 오리를 뜻하는 것 같아서 귀엽기는 하지만,

  브랜드의 정체성을 담지는 못한다고 생각이 들어서 이걸 다음과 같이 디벨롭했다.

원래 맨 좌측의 도장처럼 만들고 싶었는데 디자인이 잘 안됐다....

 

    오덬이라는 의미와, ㅋ을 오더하는 이중적인 의미로

   혹자의 즐거움('ㅋ')이 다 모여있는 굿즈샵에서 즐거움을 주문한다는 의미를 담았다.

 

 

⎮ S.A. 작성

    - 와이어 프레임

 

   와이어 프레임에서 디벨롭한 디자인은 아래와 같다.

 

    - 디자인 디벨롭

   [필수 구현]
    1. 메인 페이지
        - 키오스크 화면을 보여주는 페이지 구성
        - 키오스크 화면 자체가 하나의 ViewController
        - 아래의 각 부분을 UI 컴포넌트로 잘 분리하기

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

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

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

      5. 취소하기 / 결제하기 버튼 화면
          - 주문 메뉴 전체를 취소하는 취소하기 버튼 구현
          - 주문 메뉴 전체를 결제하는 결제하기 버튼 구현

       6. 에러 처리 화면(협의 미션)
           - ex. 수량이 0개 이하가 되지 않도록 또는 최대 10개 등 선택 가능한 수량 제한 설정
              * 제한된 설정값 외 등록을 할 경우 버튼 비활성화 또는 Alert 띄우기
            - ex. 결제 시 주문 내역이 비어있는 경우 결제 버튼 사용 제한
              * 결제 버튼 비활성화 또는 "주문할 메뉴가 없습니다. 메뉴를 선택해주세요" Alert 띄우기
             - ex. 사용자가 '취소하기' 버튼을 실수로 눌렀을 때
              * 주문 내역을 모두 삭제하시겠습니까? Alert 띄우기

 

   우리 팀은 상기 필수 구현사항을 전부 확인하고, 필수 구현 먼저 구현하고나서

  불필요한 기능(MVP의 관점으로 봤을 때 불필요한 기능)들은 도전과제로 빼기로 했다.

   ex) 버튼이 클릭되면 tintColor가 바뀌는 것

 

   우리 팀에서 선정한 도전 과제는 다음과 같다.

 [도전 과제]
   1. 페이징 기능
       - 최대로 표현할 수 있는 메뉴 수가 넘었을 때 좌우로 이전, 다음 버튼을 만들어서
         한 페이지당 표현할 수 있는 메뉴의 개수를 맞추기
          * 빨간 점 등으로 구분하여 현재 페이지는 빨간 점, 다른 페이지는 회색 점으로 그리기

   2. 부가 기능 추가
        ex. 오늘의 제일 잘 팔린 메뉴 보기
        ex. 직원 호출 -> Alert창 띄우기

    3. 다크 모드 구현
        - 라이트 모드 <-> 다크 모드 전환이 가능하도록 Color를 설정
        - Appearance 설정에 대해 알아보기
        - System Color를 활용하거나, Color Assets를 활용하여 커스텀 컬러 설정 시에도 다크 모드 대응 가능

     4. 런치 뷰 화면 구현
        - 어플 초기 실행 시 뜨는 View 구현

     5. Alert 또는 모달을 띄워서 상품 상세 정보 보여주기
         - 상품의 길이(cm) 또는 제품 원료 보여주기

     6. 공유하기 기능
         - 상품의 상세 정보 구현이 완료될 시 공유 버튼을 추가하여 다른 사용자에게 상품 내용(이미지) 공유

      7. BM - Tag 추가 기능(ex. MD 추천)
         - MD 추천 Tag를 만들어서 셀러에게 판매하여 수익 모델로 삼고, 셀러는 판매량을 높일 수 있게

       8. 결제하기 버튼 클릭 시 배송지, 이름, 연락처 등을 받는 등 현실감 있게 구현
           - 실제 결제하는 로직처럼 구현해보기

 

   우리 팀에게 위 도전과제는 정말 '도전' 과제이므로,

  필수 구현을 다 마치고 시간이 가용하다면 도전하고자 한다.

  이렇게 필수 구현 사항을 걸러내는 것도 납기일을 맞추기 위한 개발자의 훈련이라고 생각한다.

⎮ Swift에서 Custom Font 사용하기

    Swift에서 System Font만 줄곧 사용해오다가, 팀프로젝트를 하면서 Custom Font를 적용할 수 있다는 사실을 알게 됐다.

   이번에는 Custom Font를 적용해보기로 했다.

   Custom Font를 처음 적용해보는거라서 적용이 안되는 오류를 발견했고, 이를 기록해두었다.

  https://uddt.tistory.com/204

Swift | Custom Font 적용이 안되는 오류 해결하기

 

    본격적인 코드 작성은 내일부터 진행될 예정이다.

 

⎮ UISegmentedControl 준비하기

    나는 이번 과제에서 상단 Bar 임무를 부여받았다.(우리 조는 쿨해서 사다리 돌려버림)

UISegmentedControl

     UISegmentedControl은 위의 그림처럼 각각의 버튼이 있고,

    해당 버튼을 누르면 다음의 뷰로 이동하는 방식인데,

    다음 포스팅에서 이것을 자세히 공부하고 기록할 예정이다.