Favor-Eat : 맛 기준과 custom progress bar

J·2023년 5월 24일

프로젝트

목록 보기

4/14

음식의 맛을 시각적으료 표현할때
재료가 얼마나 들었는지로 맛을 계산해서
progress-bar로 보여주는 기능이 있었다.

기획때 다음과 같은 의문점이 생겼고

어떤 맛을 보여줄것인지,
어떤 기준으로 단계를 나눌것인지

이를 해결하기 위해 자료조사를 했다.

맛 기준 조사

음식 데이터를 어떤거를 활용할지에 대한 조사도 같이 하고 있었는데
spoonacular라는 음식 조회 api에서는

이런 맛 정보를 제공해준다해서
매운맛, 단맛, 신맛, 짠맛, 기름기, 쓴맛
이렇게 6가지로 자료 조사를 해보기로 했다.

반려된 맛들

쓴맛

주관적인 부분이 크기도 했고 수치화하기에는 화학적인 부분도 고려를 해야해서 우리가 계산하기에 부적합하다고 판단되어서 제외했다.
기름기
우리나라 음식의 특성상 굽고 찌는 과정에서 기름기가 빠질수도 있기 때문에 계산하기에 부적합하다고 판단되어서 제외했다.

( 프로젝트 중반에는 맛을 계산해내는게 불가능하다고 판단하고 사용자들의 평가 데이터로 맛을 수치화하기로 결정했고, 기름기를 추가했다. )

내가 조사한 단맛 behind

단맛은 내가 맡아서 조사했었는데
건강 분야에서는 당 지수(GI)를 주로 사용하는데

절대적인 단맛보다는 시간당 혈당을 얼마나 높이는지를 수치화한 것이다.

그래서 밀크 초콜릿처럼 엄청 달 거 같은 음식도 실제로는 중 혈당지수로 나오는 것이었다.

혈당지수 분류 출처

초콜릿, 파인애플, 고구마도 당 지수로 계산하면
초콜릿 < 파인애플 < 고구마 가 된다.

이대로 단맛의 기준을 세우면 사용자들이 헷갈릴거 같아서
이렇게 우리가 아는 단맛과 당 지수를 비교하면서 결정한 기준은 다음과 같다.

녹차 < 딸기 < 푸딩 < 파인애플 < 벌꿀

progress-bar 디자인 시안 확인

진짜 보자마자 와 이거 어떻게 만들지? ㅋㅋㅋㅋㅋ

일단 저 indicator는 어떻게 띄울것이며
밑에 1~5점 쟤들은 css로 만들어야되나?

디자인 타협점

indicator의 색깔이 점수에 따라 그라데이션 된 색깔로 표현되는게 디자인 시안이었는데

프로젝트를 하면서 이런말은 처음 꺼내봤다.

이 디자인은 구현 못할거 같다.....

그라데이션 색깔 정도를 퍼센테이지로 계산해서 indicator에 입혀야될거 같은데
도저히 방법이 생각 안나서 못하겠다 선언하고
맛의 대표 색깔(5단계)로 표현하기로 했다.

progress 구현

이 컴포넌트를 잘게 쪼개면 이렇게 나눌수 있겠다.

여기서 문제는 Level 부분의 svg의 시작점 위치와
progress-bar의 시작 위치가 다르다는 점이다.

progress-bar의 시작 위치를 신경쓰지 않으면 이렇게 된다.
엄청 답답해보인다.

1. progress-bar

그래서 progress bar를 감싼 box에 padding을 주었다.

2. progress-bar 그라데이션

background: linear-gradient(
  to right,
  ${({ flavor }) => {
  switch (flavor) {
    case "spicy":
      return spicyColors.join();
    case "sweet":
      return sweetColors.join();
    case "salty":
      return saltyColors.join();
    case "oily":
      return oilyColors.join();
  }
}}
);