Skip to content

iOS 요구사항 분석

Jump to bottom
Delma edited this page Apr 20, 2020 · 2 revisions

화면 구성

  • 모든 아이폰 사이즈에 대응해서 잘리는 내용이 없이 나와야 한다.
    • 아이폰 5s, 6, 7, 8 계열, 6+, 7+, 8+계열과 X, X Max, 11, 11 Pro, 11 Pro Max 등 모두 정상적으로 화면이 나오는지 확인한다.

로그인 화면

  • GitHub 로그인 되도록 화면 구성

메인 메뉴 화면

  • 전체 화면 구성은 테이블뷰 형태로 보인다.

  • 최상단 내비게이션바는 표시하지 않는다.메인화면은 3가지로 섹션으로 구성. (섹션 표시 순서는 항상 동일해야 한다.)

    • 든든한 반찬 (main)
    • 국.찌개 (soup)
    • 밑반찬 (side)

  • 각 섹션은 해당 섹션 전용 제목을 표시한다. 섹션 헤더를 터치하면 섹션에 포함된 상품 개수를 표시한다.

  • 제품 정보는 타이틀 제목, 상세 설명, 메뉴 가격, 이벤트 배지, 메뉴 이미지 등을 포함한다. (3페이지 참조)

  • 이벤트 배지는 항목이 고정되지 않는다.

  • 리스트의 항목을 선택하면 제품 상세 화면으로 이동한다.(4페이지 참조)이동 방식은 내비게이션 방식이다.

상품 정보 셀

  • 타이틀 제목

  • 상세 설명

  • 메뉴 가격

    • 가격정보는 할인전 가격이 있으면 함께 표시해야 한다.

    • 할인이 아닐 경우, 정상 가격만 표시한다.

  • 이벤트 배지

    • 여러 종류의 이벤트 배지가 존재할 수 있다.

    • 클라이언트에는 이벤트 종류를 구분하지 않는다.

  • 메뉴 이미지

    • URL에 있는 이미지를 표시한다.

메뉴 상세

  • 상세페이지의 내용은 메인 페이지에서 선택한 상품에 대해 서버에서 상세 데이터를 받아와 표시한다. 이전 화면으로 되돌아 갈 수 있다.
  • 화면 상단에는 스크롤뷰를 사용하여, 미리보기 이미지들을 Page 방식으로 표시한다. 좌우로 스크롤하면 상단 이미지를 변경할 수 있다.
  • 제품 이미지 바로 상세한 제품의 정보를 표시한다.
  • 제품 정보 아래에는 제품 설명 이미지를 세로로 이어서 붙인다. 위아래로 스크롤하면 설명 이미지를 확인할 수 있다.
  • 주문하기 버튼을 누르면 해당 상품에 대한 주문을 요청하고, 주문이 성공하면 이전 화면으로 되돌아 간다.만약 재고가 부족하거나 주문이 불가능한 상품인 경우는 에러 코드에 맞는 안내 화면을 표시해야 한다.


기능 명세

메인 화면 구성

  • 스토리보드 ViewController에 TableView를 추가하고 Safe Area에 가득 채우도록 frame을 설정한다.
  • 테이블뷰에 새로운 프로토타입 Cell을 추가하고, Custom 스타일로 지정하고 다음과 같이 디자인한다. img
  • 서버와 합의하여 통신에서 주고받을 JSON 데이터 포멧을 정한다.
  • 서로 협의한 JSON 포멧으로 Mock-up data를 만든다.
  • Mock-up data를 사용하여 Cell 표시에 적용해본다.
    • JSONDecoder를 활용한다.
    • Cell에 표시할 데이터는 Table View Data Source가 관리한다.
  • UITableViewDataSource 프로토콜 구현 부분에서 cell을 위에서 만든 DataSource 모델 객체에 접근해서 테이블뷰를 표시한다.
  • 메인 화면의 Table View Cell을 Content View를 기준으로 하위 뷰들에 오토레이아웃을 적용한다.
    • 다양한 기기 종류에 대응할 수 있으며, 기기를 가로로 눕혔을 때도 문제 없도록 제약을 설정한다.
    • 설명 레이블은 텍스트가 길어지면 wrap(끝에 ...을 붙여 표현)한다.
    • 이벤트가 없을 경우, 이벤트는 표시하지 않는다.
  • 반찬의 종류에 따라 섹션을 구분한다
    • main, soup, side
  • 스토리보드 ViewController에 Cell에 Section Header로 사용할 Custom Cell을 추가한다.
    • 헤더 내부의 요소는 오토레이아웃을 적용하여 모든 기기와 상황에 대응할 수 있도록 한다.
    • 총 섹션은 3개로 구분해서 헤더에 다음과 같이 표시한다.
    • main => 메인반찬 / 한그릇 뚝딱 메인 요리
    • soup => 국.찌개 / 김이 모락모락 국.찌개
    • side => 밑반찬 / 언제 먹어도 든든한 밑반찬

의존성 관리

  • Cocoapod 를 설치한다. 설치 가이드
  • https://github.com/devxoul/Toaster 저장소에 있는 Toaster 패키지를 cocoapod 으로 설치한다.
  • pod으로 설치한 Toaster 모듈을 import 하고 섹션 제목 영역을 터치하면 섹션 제목과 함께 상품 개수를 toast 형태로 표시한다.

서버 통신 기능

  • 로그인 이후 사용자 정보를 저장하고 담당하는 모델 객체를 구현한다.
  • 서버의 JSON 데이터를 받아오는 모델 객체를 만든다.
    • HTTP 프로토콜 GET 요청으로 서버의 API에서 메인반찬 JSON 데이터를 받는다.
    • HTTP 프로토콜 GET 요청으로 서버의 API에서 국.찌게 JSON 데이터를 받는다.
    • HTTP 프로토콜 GET 요청으로 서버의 API에서 밑반찬 JSON 데이터를 받는다.
    • 모든 데이터를 한 꺼번에 받는 게 아니라, 각각 요청하고 구분해서 응답을 받도록 구현한다.
  • HTTP 요청은 URLSession 관련 프레임워크를 활용한다.
  • 응답으로 받은 JSON 데이터를 사용하여 테이블뷰에 보여준다.
  • 모델 객체는 응답이 도착하면 섹션별로 데이터를 갱신하고 각각 Notification을 보내서 테이블뷰의 해당 섹션만 업데이트한다.
  • 상세 화면에 대한 요청은 상품을 골라서 화면이 표시하기 직전에 요청해야 한다.

이미지 다운로드

  • 3개의 JSON 데이터를 모두 받고 나면 JSON 데이터에 포함된 이미지 URL을 분리해서 Image 파일들을 다운로드 받는다.
    • 이미지 파일들을 병렬처리해서 한꺼번에 여러개를 다운로드하도록 구성한다.
    • (선택1) GCD Queue 활용
    • (선택2)Download Task 활용
    • (선택3) Operation Queue 활용
  • 다운로드가 완료되면 Application Support 디렉토리 중에 Cache 디렉토리에 URL에 있는 파일명으로 저장한다.
  • 셀을 표기할 때 이미 다운로드된 이미지가 있으면 표시하고, 새로운 파일이 다운로드 완료되면 해당 이미지를 테이블뷰 셀에 뒤늦게(lazy) 표시한다.
    • 화면에 표시할 때 다운로드를 담당하는 스레드와 화면을 처리하는 스레드를 위한 GCD Queue(혹은 Operation Queue)를 구분해서 처리한다.
    • 이미지를 다 받을때까지 화면이 하얗게 멈춰있지 않도록 만든다.

화면 전환

  • 메뉴 리스트 Table View의 Cell을 선택하면 다음 화면으로 전환하도록 구현한다.
  • 화면 전환은 내비게이션 방식을 사용한다.
  • 필요하다면 메인 뷰 컨트롤러와 상세 화면의 컨트롤러(DetailViewController) 사이에 Delegate 프로토콜을 구현한다.
    • 상세 화면에서 결과를 전달하기 위한 Delegate 프로토콜을 정의한다
    • 프로토콜에는 주문을 완료했을 때 호출할 메소드를 정의한다
    • ViewController에는 프로토콜을 채택하고 필요 메서드를 구현한다
  • 메인 뷰 컨트롤러에서 상세 화면의 컨트롤러(DetailViewController)에 필요한 모델 데이터를 전달한다.
  • 상세 화면을 표시하기 전에 네트워크 담당 모델 객체에서 데이터를 받아서 화면 정보를 채워서 표시한다
    • self.view 커스텀 클래스를 UIScrollView로 지정하고 하위 뷰들은 self.view.contentView 에 추가한다
    • ScrollView ContentSize에 대해 찾아보고, 전체 콘텐츠 높이를 계산해서 스크롤되도록 값을 지정한다
    • 상세화면 상단 ScrollView에 이미지들을 Page 형태로 추가하세요. 좌우로 페이지 넘기듯이 넘어가도록 만든다
    • 상단 ScrollView 아래에는 상품의 상세 설명을 표기한다
      • 오토레이아웃을 활용하여 모든 기기에서 정상적으로 표기될 수 있도록 한다
    • 상품설명 아래부분에는 제품 상세 설명을 위한 이미지들을 세로로 이어서 붙인다
  • [주문하기] 버튼을 누르면 주문을 서버에 요청하며, 주문이 완료되었다는 응답을 받으면 이전 화면으로 돌아간다
Clone this wiki locally