jihyeon-do / ediyamenuui

ediya

이디야 커피의 메뉴 UI를 반응형으로 구현✨

프로젝트 기획노트

시연동영상

👉 video : ediyamenu-video

1. 문제정의

주어진 웹페이지의 완성도 높이기 + 과정결과 공유하기

완성도 : 접근성, 사용성 면에서의 기존 문제점을 해결 · 개선하는 것

2. 프로세스 합의

과제이해 - 문제정의 - 작업환경 합의 - 문제분석 - 지향하는 문서의 ID - 설계 합의 (HTML) - 구현 - 평가 - 평가서

기능추가 - 카테고리정렬 - n개 비교하기기능 - 더보기 버튼 - 메뉴 담기? 가까운 매장? 버튼 - 언어설정 - 추천메뉴 캐러셀 - 매장찾기 시, Web API로 사용자위치 권한 얼럿
컨텐츠추가 - 카테고리 선택섹션 - 소제목 디바이더 - 서브헤더 알림 (코로나관련, 배민할인) - 프로모태그추가(뉴,핫,스테디,시즌) - 데스크탑 화면으로 보기 - 추천메뉴 케러셀

HTML

HTML 굵은 가지 합의하기.

• 원칙 문서자체로 예뻐야한다.(Disable all style)
  장식/중복/의미없는 태그를 지양하자.
  시맨틱 태그
  접근성을 고려한 구조(속성)
  

• 구조

  • 데스크탑

    • 햄버거
    • 메뉴카드 4열 배치
    • 더보기

  • 모바일

    • 탭바(햄버거가 들어간 절충안)
    • 더보기

• 클래스명

CSS

모바일모드에서는 햄버거 사형 판결

• 2014년 부터 논의된
• MOBILE FIRST 전략..