1. 개요

1. 일시 및 장소 : 11.10.(목) 10:30 ~ 12:00, 13:00 ~ 19:00, 게더타운
2. 참여자 : 전원
3. 목적 : figma를 사용해 프로그램의 구체적인 UI 작성
4. 회의 중요도 : 상

2. UI 작성 전 논의 사항

2.1. 프로토타이핑 툴

1. 피그마
   • 장점
     • 디자인 이쁘게 꾸밀 수 있음
     • 필요할 경우 기능 동작을 확인할 수 있음
   • 단점
     • 현정을 제외한 다른 팀원들은 사용 안 해봄
2. 카카오오븐
   • 장점
     • 빠르게 페이지를 작성할 수 있음
     • 상준 혼자 작업 시간은 10분
   • 단점
     • 디자인적으로 기능이 별로 없음

⇒ 결론 : 피그마

2.2. 반응형 페이지 지원 여부

• 서울 도시 데이터가 PC 서비스만 지원하므로, Mildo는 모바일을 중심으로 제작
• 다만 UI 제작 시 PC 서비스도 고려하자

2.3. 메인 컬러 결정

1. 상준
   • 2db400 : 네이버 메인 색과 동일
2. 현정
   • 46FFC7 : 연두색
   • 8C45FF : 보라색
   • FFA13D, FF7B3D : 주황색
   • FFC23D : 망고색
   • 7A39E4 : 블루 바이올렛
3. 참고 사이트
   • https://coolors.co/863cf2

⇒ 결정 : 6349FF(Majorelle Blue**)**

2.4. 최근 24시간 밀도 정보 제공 방법

1. 미제공
2. Mildo 서비스 제공 시점부터 데이터 누적
3. 최고로 붐볐던 시간/여유로웠던 시간만 제공

2.5. 기타

1. 사용자 편리성과 웹 접근성 고려
   • ARIA
2. 심플하고 직관적인 디자인
3. UI 제작과 함께 기능의 동작 고려
4. 컴포넌트 사이즈 결정

3. 각 기능별 고려사항

3.1. 내일 갈 거야

• 시간 설정을 위한 모달 창 띄우기
  • 간편하게 사용하는 것이 목적인데 모달까지 나오면 귀찮아짐
• 낮/밤으로 나눠서 버튼 클릭
• 시간 구별하지 않고 하루로 정하기

3.2. 24시간 이내의 밀도 정보

• 그래프
  • 사용자가 직관적으로 이해할 수 있음
  • 그래프 구현법 학습에 오랜 시간이 걸림
  • 글씨가 작아 정보를 정확히 알 수 없음
• 글로 작성
• 그래프를 4시간 정도의 큰 단위로 나눠서 정보 제공

3.3. 검색 기능

3.3.1. 문제점

• 주요 지역 50곳이 아닌 곳 검색 시에 다른 지역을 가까운 순으로 보여주려면 해당 장소의 위도 경도 정보를 지도 API에서 가져와야 함
  • 이 기능이 가능한지 확인이 안됨
  • 또한, 같은 단어라도 여러 개의 장소 결과가 존재할 수 있음
• 목록으로 정보를 제공하면 주요 장소가 추가될 경우 사용이 정말 불편해짐

3.3.2. 대책

• 강남 검색 → 강남역처럼 검색 결과가 없을 때는 비슷한 주요 장소를 보여줌
• 주요 지역과 유사한 단어가 아닌 경우에는 지도에서 찾으라는 안내 문구를 보여줌

3.3.3. 자동 완성

• 주요 장소가 적으니 프론트엔드 쪽에서 정보를 가져, 서버에 여러 번 쿼리를 날리지 말자
• 향후 주요 장소가 늘어날 수 있으니 서버에서 구현하자

4. UI 및 기능 동작 구현

4.1. 메인페이지

4.1.1. 밀도 정보 표시

• 핀으로 표시
• 접속 시 모든 밀도 단계 표시
• 4단계 : 빨강(매우 붐빔) - 주황(붐빔) - 노랑(보통) - 초록(여유)
• 접속 시 지도의 위치
  • 서울일 경우에는 자신 주변 위치
  • 서울이 아니면 그냥 정해 놓은 서울 중심

4.1.2. 핀 클릭 시

• 보여줄 정보
  • 장소명
  • 현재 혼잡도
    • 밀도 단계, 유동 인구 수
  • 과거/미래 혼잡도
  • 도로소통현황
• 이벤트
  • 해당 핀을 화면 가운데로 슬라이딩
  • 핀 크기 키우고, 핀 안에 혼잡도 나타내는 문구/이모티콘 표시
  • 상세정보 창 1단계

4.2. 필터 버튼

• 혼잡도 단계에 따라 4개의 버튼 생성
• 버튼 클릭하여 해당 혼잡도에 대한 필터 기능 사용
• 버튼이 클릭되어 있으면 혼잡도별 색으로 채움

4.3. 사용자 정보 창

4.3.1. UI

• 검색 창 옆의 보라색 동그라미
• 로그인이 안되어 있으면 로그인 모달창을 띄움
• 로그인이 되어 있으면 오른쪽 사이드에 개인정보 창을 띄움
• 스크롤 없음

4.3.2. 로그인

• OAuth를 사용하기 때문에 회원가입은 구현하지 않음
• 우선 네이버 로그인 버튼만 구현

4.3.3. 개인정보

• 사용자 이름 - 북마크 - 내일 갈거야 - 로그아웃
• 북마크는 최대 5개
  • 혼잡도 동그라미 - 장소명
  • 삭제 버튼
• 내일 갈거야
  • 최대 3개
  • 내가 찜한 장소, 인기순위
  • 인기 척도 : 내일 갈거야 수 / 지역별 최대수용인원
  • 순위가 바뀌면 ‘N’ 마크로 표시, ‘N’ 마크는 사이드바를 닫으면 사라짐
  • 오전 4시 초기화
  • 삭제 버튼

4.4. 상세정보 창

4.4.1. UI

• 화면 하단에 2단계의 터치 슬라이드 방식으로 구현

4.4.2. 1단계

• 장소명, 현재 혼잡도, 북마크 버튼, 내일 갈 거야 버튼
• 북마크와 내일 갈 거야는 선택 여부에 따라 색상 변경

4.4.3. 2단계

• 1단계의 정보 포함
• 이전 24시간 이내의 혼잡도, 내일 갈 거야 순위
  • 이전 24시간 이내의 혼잡도는 1시간 간격으로 표시
  • DIV를 사용하여 세로 그래프로 제작
  • 스크로를 활용하여 24시간 전부를 보여줌

4.5. 검색 창

• 주요 50곳에 해당하면 자동 완성 기능
• 검색 시 해당 장소로 이동 및 1단계 상세정보 창 표시
• 주요 50곳에 없는 경우 검색 못함

4.5.6 향후 논의 사항

• 데이터 주기적으로 가져오는 방법
  • 일단 사용자가 들어오면 API 요청해서 받아올지?
  • 크론탭을 사용하여 주기적으로 서버에서 업데이트할지?
    • https://blog.naver.com/javaking75/220108463945
• 로그인되지 않은 사용자에 대한 북마크, 내일 갈 거야 클릭

5. 구현하면 좋을 것 같은 기능(중요도 : 하)

• 사용자 정보 창에 내일 갈 거야 1등, 꼴등 장소 표시
• mildo 아이콘 만들기
• 북마크, 내일 갈 거야 삭제 시 모달창 띄우기
• 내일 갈 거야 설명해주는 버튼 및 모달창
• 로그아웃 시 모달창