[내일배움캠프] iOS 개발 종합반 6주차 - 키오스크 앱 만들기

 

 

 

키오스크 앱 만들기

 

 

 

 

이번에 드디어 정식으로 팀 프로젝트를 진행하게 되었는데, 주제를 듣자마자 나도 팀원들도 타 팀과 다른 차별화된 아이디어로 앱을 만들어보고 싶었다. 그래서 채택한 게 애플 스토어였는데 발표회를 하며 보니 우리와 같은 아이디어로 구현한 팀이 한 팀 있었다. 그래도 흥미로웠던 게, 아이디어만 같을 뿐 여러 방면으로 많이 달라서 굉장히 흥미롭고 오히려 그 차이를 보니 재미있었다. 

 

 

 

 

 

UI 프로토타입

 

 

 

 

 

 

 

📱 앱 시연 화면

 

 

Lanch Screen 

이 화면은 발표 직전에 급하게 만들게 된 화면인데, 움직이는 화면으로 하고 싶었으나 시간이 부족했다. 이 부분을 놓치다니, 우리 팀 반성해... 그래도 예쁘게 잘 나온 것 같아서 만족스럽다!

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Main Screen 

메인 화면은 Top, Middle, Bottom으로 화면을 분할하여 세명의 팀원들이 각각 도맡아 구현하였다.

 

Top에 경우 대분류로 각 기기의 종류를, 소분류에는 대분류에 해당하는 기기의 기종을 나타내어 연결했다.

 

Middle에 경우 팀 에이스를 맡고 계신(ㅎ) 분이 데이터 연결과 함께 맡아주셨다. 이 부분에 경우 Top에서 선택된 아이템에 맞게 해당되는 제품들을 나열하였는데, 이때 우리 팀에서 가장 큰 문제가 발생했다. 처음 구현이 Table View로 진행되어 있었는데 마지막쯤 세부적인 디자인을 수정을 하다 튜터님께 질문을 할 일이 생겼었다. 그때 이 부분은 Table View 가 아닌 Collection View로 구현하는 게 좋을 것 같다는 조언을 듣게 되었고 담당하고 있던 팀원분이 급하게 수정작업에 들어간 게 바로 금요일 오후쯤...이었다. 그래도 잘 마무리되어 예쁘게 구현되었다. 

 

마지막으로 Bottom 부분은 팀장님이 구현하셨는데, 상세페이지에서 선택된 아이템들을 모아 주문내역으로 보여주도록 했고, 이때 상품의 수량 변경과 장바구니 담기 취소, 전체 결제 등의 기능이 구현되어 있다. 

 

 

 

 

 

 

Detail Screen 

 

제품의 상세페이지의 경우 내가(Wood) 구현하게 되었는데, 상품의 색상 선택 시 제품 사진 배경색상이 변경되고, 수량 변경 및 장바구니 담기 기능을 구현하였다. 이때 선택된 색상과 수량은 배열을 수정하여 Main Screen으로 전달되도록 하였다. 

 

이때도 사실 작은 문제가 발생했었다. 다름 아니라, 시작할 때는 Main Screen과 storyboard를 함께 공유하고 있었는데 이럴 경우 github 병합 시 충돌이 있을 거라는 정보를 입수하자마자 곧장 파일 분리를 진행하였다. 그런데 파일을 나눠 구현해 본 적은 또 처음이라... 스토리 보드끼리의 연결부터 많은 것을 배우고 진땀을 빼게 된 일이었다. 그래도 재밌었다. (•ω•`)ﾉ... 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

최종 결과