# 우리뭐먹지 디자인 회의

## Reference
- notion : https://www.notion.so/999d00b905e04fa9a2aaef6c6cc4b15a
- figma : https://www.figma.com/file/c5SLMn7VqX75hMMIPOS7GR/Eat?node-id=0%3A1
- google sheet (메뉴 DB) : https://docs.google.com/spreadsheets/d/1iYE7jHOpe_znodZOrg_1Y79_6pmGNC5TpkhEP2yIJFc/edit#gid=1512389382
- google drive (이미지) : https://drive.google.com/drive/folders/1a1Nmm7dFUGFvWjTfCYd8Im9Ofv2yxk4Z
- hackMD : https://hackmd.io/8Q1oFRlzTPu6eYgujnI3DQ

## 컨셉 (ppt 페이지 기준)
- 5/25

## 1차 시안
- 6/7 (화)
[1차 시안 URL](https://xd.adobe.com/view/71a80cee-eaf4-4499-a984-4c5f20ae79eb-24fb/screen/d45349e2-d24e-46f8-a494-e4e3c8220c11ㅓ)

- 전반적으로 `iOS 네이티브 앱` (HIG 문서를 반영)이 아니라 `하이브리드앱 / 웹`의 UX로 구성되어 있다는 인상을 받았어요.
참고하셨던 따릉이, 서브웨이, 킥고잉 등의 앱을 봤을 때, 최소한의 기능이 들어있고, 대부분 스타트업 규모라서 아마 iOS 개발자가 따로 있는게 아니라, 플러터 등으로 하이브리드 개발을 했던 것 같아요.
- 윤또가 짚어주신 부분을 저희도 처음 고민해보게 됐는데, 우리뭐먹지는 (게임/라이프사이클이 아니라) [음식 및 음료 카테고리](https://developer.apple.com/kr/app-store/categories/)로 분류되게 되고, `망고플레이트`, `마켓컬리` 등이 이에 속하더라구요. 그래서 위 어플과 유명한 커머스앱 `29cm`, 게임처럼 몰입도가 있는 앱인 `나이키런`을 참고하려고 해요.
- 아래 내용을 쓰다보니 HIG 문서 내용이 꽤 strict해서 (= 애플이 이미 디자인을 답정너처럼 정해놓았다는 의미) 기존 figma의 큰 틀을 유지할 수 밖에 없겠다는 생각도 들었어요.
iOS 네이티브 앱이고, iOS 사용자 기준으로 동일한 UX를 만드는 것을 애플에서 강조하고 있어요.
[ ] Modal 및 Navigation의 차이점
*예를 들어 서브웨이앱에서 햄버거버튼 (좌측 상단 메뉴탭)을 누르면, Modal로 목록이 나오고, 해당 목록 (ex. 메뉴소개>샌드위치)을 탭하면 화면이 바뀌는데, HIG의 UX와는 이질적이게 느껴져요.
Hierarchy가 있는 데이터는 Navigation으로 띄어야하는데, Modal 방식으로 보이는 것이 어색한 것 같습니다.

### 1. 설정 화면
- 시안 화면

보라색으로 표시한 `햄버거 버튼`은 보통 웹에서 좌측 상단에 많이 사용하고 있어요. iOS의 경우 톱니바퀴 아이콘으로 탭바 버튼이나 우측 상단에 위치하구요.
- 탭바 버튼 : 대부분의 커머스앱 (`마켓컬리`, `29cm`, `무신사` 등)에서는 설정 탭이 있거나, 마이페이지 탭 내부의 톱니바퀴 아이콘을 통해 설정 창을 띄우고 있어요.
- 우측 상단 : `캐시워크`

그리고 `닫기 버튼` 보다는 이전화면으로 돌아가는 `Back 버튼 (좌측 화살표 아이콘)`을 자주 사용하고 있어요.

#### 일반적인 iOS의 NavigationBar 구현
HIG 문서에 따르면 보통 BackButton이 좌측 상단에 위치해있고 추가적인 기능(설정, 추가, 검색 버튼 등)은 보통 오른쪽에 위치해있어요.
- HIG 문서 이미지
- 예상 구현화면

### 2. 메뉴 구성
일반 커머스앱처럼 복잡도가 높지 않아서 서브웨이앱 처럼 `탭바`를 `버튼`으로 변경하셨다고 하셨고, 취지는 잘 이해했어요.
그런데 탭바를 쓰면 향후 기능 추가에 유연하게 대응할 수 있고, 현재 실행중인 버튼을 직관적으로 확인 가능하다 등 기존 iOS 사용자에게 친숙하고 유용한 기능이 많아서 탭바를 빼기는 어려울 것 같아요.
다음 회의때 자세히 말씀드리려고 하는데, 게임 특성상 팀원들이 게임진행하는 시점에 시간차가 있을 수 있어요. 그래서 현재 figma를 보시면
미니게임 진행 도중에 앱을 종료하거나, 게임제출 후 게임을 재시작하거나, 함께메뉴결정 게임을 대기하면서 다른 탭으로 이동할 수 있는 등 시나리오가 다양해야 해서 보기보다 로직이 복잡해요. 그래서 탭바가 꼭 필요합니다.
(나이키런앱의 달리기 화면이나 게임 앱의 게임진행화면 처럼 특수한 화면에서는 탭을 숨기고 있어서 우리뭐먹지의 미니게임 화면에서도 동일하게 숨기려고 해요)

### 3. 미니게임 화면
미니게임의 경우 디자인 해주신 것처럼 카드 형식으로 하되, `좋아요 / 싫어요 버튼`을 눌렀을 때 카드가 날아가는 애니메이션을 적용하려고 합니다.
- 참고 : https://www.pinterest.co.kr/pin/538250592968066913/

### 4. PageControl 활용
- 시안 화면
[PageControl 관련 HIG 문서](https://developer.apple.com/design/human-interface-guidelines/ios/controls/page-controls/)에 따르면 PageControl은 아래 날씨앱처럼 flat list를 여러 페이지에 나타낼 때, 현재 페이지를 알수 있도록 해주는 목적으로 사용돼요.
시안 화면에서는 PageControl이 `홈화면, 혼밥메뉴결정, 함께메뉴결정 화면`을 담고 있는데, 이 페이지들이 flat하지 않고 depth가 달라서 어색하게 느껴지는 것 같아요.

### 5. 못먹는 음식 선택
못먹는 음식을 선택할 경우 로직 자체가 4가지 종류만 선택할 수 있도록 되어 있어요!
그래서 디자인해주신 부분이 UI 적으로 좋긴 하나, 띄울 수 있는 선택지가 많지 않아 이런 식의 UI 구성이 어려울 수 있을 것 같아요.

### 6. 함께메뉴결정하기 > 결과 대기버튼
Host가 `그룹생성하기 버튼`을 누를 때, 팀 인원수를 받지 않고 있어요. 회식 참여인원이 변동성이 크다고 판단해서 Host가 알아서 마감하도록 했기 때문이에요. 그래서 원 모양의 디자인이 전달력은 좋은데, 기능 때문에 이 형태를 가져가기 힘들 것 같아요. 원 제외한 다른 디자인은 유지하고, 총 몇명이 제출했는지만 알수있는 형태로 바꿔주시면 좋을 것 같아요.

### 7. 최종결과 화면
전체적으로 구성이 좋았어요. 특히 `공유하기` 버튼이 우측 상단에서 아래로 내려간 게 더 UX가 좋은거 같아요.

그리고 `주변 마라탕 보기` 버튼을 이미지 내부에 배치하신 이유가 궁금했어요. 이미지 아래로 배치되는 버튼의 개수가 줄어서 사용자 부담이 줄어들고, 또 이미지 내부에 있는 버튼이 가장 중요하다는 게 직관적으로 느껴져서 좋은 것 같아요. 그런데 한편으로 음식 이미지가 흰색이면 글씨가 잘 안보이지는 않을까요?
-> 동일한 사이즈 버튼이 나열되어 있으면 단조로워 보이고, 사용자에게 피로감을 줄 수 있음. 주변식당보기 버튼이 아니라 이미지를 탭해도 상관없음

### 기타
- 키 컬러는 어떻게 결정하면 좋을까요? 글자 색상으로 했을 때 잘 보이는 형태가 좋을까요?
- 로고의 배경 색도 그대로 사용하는 것이 좋을지 궁금합니다. (키 컬러가 바뀌면 로고 배경색도 그에 맞게 통일시켜도 될것 같아요.)
- 미니게임 질문 뒤로 이미지 (불투명 이미지 처리)를 보여주면 디자인 상 어색할까요? ex. 스트레스 받으셨나요? 물음 뒤에 매운음식 배경이미지
- 장점 : 해당 질문을 만든 개발자 의도를 반영 가능하다. (냉면은 안되고 사무실에서 먹을 수 있는 도시락)
- 단점 : 앱 일관성 저하 (못먹는음식은 애니메이션으로 보여줬으므로)
- [로티 애니메이션](https://lottiefiles.com/search?q=food&category=animations)을 사용하려고 했는데 디자인 일관성을 해치지 않을까요?
- 지도 반경 (ex. 3km 이내)설정하는 버튼 (`DropList`)이 HIG 문서에 없습니다. 안드로이드는 기본 UI (`Spinner`)있는데, 애플이 이 형태를 지향하지 않는 것 같아요. [Picker](https://developer.apple.com/design/human-interface-guidelines/ios/controls/pickers/)로 대체해야 할 것 같습니다.
->
- 

## 2차 시안
- 현재까지 구성한 화면 (iOS)