Eco fit - Finding Eco Nearby you

🌿서울시 채식 지도 웹사이트 🥗

1. Why Eco fit?

• 더는 지구에게 미안하기 싫은 사람들의 모임
• 환경 피해를 최소화할 방안을 찾아 코로나 장기화로부터 지구 환경 보호
• 포스트 코로나 시대 이후에도 지속 가능한 방향의 발전을 도모

2. Discription

어떻게 하면 친환경 가게에 대중들이 쉽게 접근할 수 있을까? -> 웹을 통해 친환경 가게들을 소개하고 친환경 제품에 대한 정보를 알린다. 카드뉴스를 통해 새로운 환경 소식을 열람할 수 있도록 한다.

3. Programming Language

Frond-end: Vanilla JS

4. Adversity & Overcome

• how to filter stores? -> 태그를 key로 구현하여 가게 필터링

• how to show a map on the web site? -> 카카오 Maps API
  
  
  
  

5. Web Contents

1. 에코핏 소개

• 상단 가장 좌측에 프로젝트 이름 표시
• 상단 헤더에 에코핏 소개, 용어 정리, 지도, 카드뉴스, 고객 센터 메뉴 표시
• 홈페이지에 대한 전반적인 설명 페이지

2. 용어 정리

• 채식과 친환경에 대해 생소한 사람들을 위한 페이지
• 상단의 해시태그를 누르면 해당 설명으로 자동 이동
• 베지테리언의 분류를 도식화하여 정리
• 제로웨이스트, 동물실험지양, 업사이클링에 대한 설명 제공

3. 지도

• 서울시에 존재하는 친환경 가게의 위치를 지도 위에 핀으로 표시
• 드래그 및 스크롤로 지도의 표시 위치와 표시 비율 변경 가능
• 각 카테고리별 세부 필터링 가능
• 친환경 식당 (베지테리언, 락토, 오보, 락토오보, 페스코, 폴로)
• 업사이클링 (업사이클링, 의류, 가방, 생활용품)
• 비건뷰티 (비건뷰티, 화장품, 향수)
• 제로웨이스트 (제로웨이스트)
• 각 카테고리별 다른 색의 핀 사용하여 가독성 높임
• 지도에 표시된 핀 클릭 시 가게의 상세 정보 표시 (상호명, 주소, 연락처, 판매 메뉴)

4. 카드 뉴스

• 슬라이드 형태의 카드 뉴스로 하단 버튼으로 카드 이동 가능
• 환경 이슈에 관한 정보 제공

6. Link

에코핏.com (expired)