[카페인] 전기차 충전소 지도 서비스 프로젝트 시작 (6/27~)

목차

1. 기획
  1-1. 페르소나
2. API 결정
  2-1. 충전소 정보 API
  2-2. 지도 API
3. 개발 라이브러리 결정
4. 기능 목록
5. 디자인
 

---

1. 기획

1) 급속 충전 기계가 모든 충전소에 있는 것이 아님
2) 충전소 회사 별로 할인 혜택이 다름
3) 차종에 따라 충전 단자가 다름
4) 충전소와 충전기 부족
⇒ 원하는 전기차 충전소를 쉽게 찾을 수 있게 하자
 
5) 충전 속도가 느림 (완속 기준, 8 ~ 14시간 소요)
6) 충전 다하고 나서도 자리 차지하는 문제 발생
7) 주차 공간 부족
⇒ 각 충전소 별 혼잡도를 제공해 사용자들이 혼잡한 충전소를 피할 수 있게 돕자
 
기획자의 발표를 듣고 현재 전기차 충전소의 문제를 인식했다. 사용자가 원하는 전기차 충전소를 쉽게 찾을 수 있고, 혼잡도를 확인해 혼잡한 충전소를 피할 수 있는 서비스를 만들고 싶어졌다.
 

1-1. 페르소나 (임의 사용자 만들기)

전기차 충전소 지도 서비스다 보니 사용자가 '전기차 이용자'로 특정된다. 하지만 더 구체적으로 사용자를 지정할 필요성을 느꼈다. 전기차 이용자 중에서도 가격이 중요한 사람이 있을 수 있고, 내 주변에서 지금 당장 이용할 수 있는 전기차 충전소가 궁금한 사람이 있을 수 있기 때문이다. 구체적인 서비스 사용자를 정하고, 이 사용자를 중심으로 기능을 논의하고 개발해 나가면 빠르게 의견을 하나로 모을 수 있고, 기능 개발도 빠르게 진행할 수 있겠다는 생각이 들었다.
 

1) 이름 : 김영희
2) 나이 : 만 30세
3) 차종 : 아이오닉 5
4) 자동차 운전 경력 : 4년
5) 서비스 이용 목적 : 혼잡한 시간대를 피해서 전기차를 여유롭게 충전하고 싶다.
6) 특징
- 사회 초년생이다.
- 전기차를 최근에 구매했다.
- 국내 여행을 좋아해서 자차를 이용해 국내 여행을 자주 다닌다.
- 단순하고 편한 것을 좋아한다.
- 영어를 잘 못한다.
- 차를 좋아하고 아낀다. 평소 배터리 관리에 신경 쓴다.
7) MBTI : ESTJ
8) 사는 지역 : 서울
9) 자택 : 작은 전기차 충전소(충전기 2대)가 있는 오피스텔

 

2. API 결정

2-1. 충전소 정보 API

한국환경공단 전기자동차 충전소 API를 사용하기로 했다. 데이터가 많고 관리가 잘 되어있다는 장점이 있기 때문이다. 만약 더 필요한 정보나 더 잘 정제된 정보가 있는 API가 있다면 같이 쓰기로 했다.

2-2. 지도 API 

네이버 지도, 카카오 맵, 구글 맵 중 어떤 API를 정할지 의논했다.
네이버 지도와 카카오 맵은 커스텀이 불가능해 미적으로 좋지 않아 보였다. 서비스 특성상 지도가 UI에 많은 비중을 차지하기 때문에 커스텀 디자인을 할 수 있는 구글 맵을 사용하기로 했다. 세 API는 가격과 속도면에서도 차이가 있지만, 우리에게 중요하지 않았다. 구글 맵 API가 가장 비싸지만, 매달 200 달러까지 무료로 사용할 수 있기 때문에 괜찮았다. 200 달러가 초과할 정도로 사용자가 많을 것 같지 않았다. 그리고 느린 것이 체감될 만큼 많은 작업을 할 것 같지 않아 속도도 고려하지 않았다.
 
 

3. 개발 라이브러리 결정

리액트, 타입스크립트, 스타일드 컴포넌트를 사용하기로 했다. 여러 CSS-in-JS 중 스타일드 컴포넌트를 선택한 이유는 다음과 같다.

1) 컴포넌트 안에 관련 CSS를 작성할 수 있어 컴포넌트별 디자인 코드 확인 및 수정이 용이하다.
2) 혹자는 코드 가독성이 안 좋아진다고도 하지만, 개인적으로는 태그를 더 시맨틱 하게 작성할 수 있어서 좋다고 느꼈다.
3) 팀원들 모두 스타일드 컴포넌트가 익숙하다.
4) 지금까지 사용하면서 불편한 점을 못 느꼈다.

스타일드 컴포넌트와 emotion은 기능도, 작성법도 상당히 유사하다. 그래서 이번에는 스타일드 컴포넌트 대신 emotion을 써볼까도 생각했었다. 하지만 emotion에서만 사용 가능하던 *CSS Props라는 편리한 기능을 스타일드 컴포넌트(v5.2.0 이상)에서 쓸 수 있게 되기도 했고, 딱히 emotion을 사용할 필요성을 못 느껴 스타일드 컴포넌트를 채택했다.

// *CSS Props 예시

const buttonStyle = css`
    font-size: 18px;
    color: white;
    background: black;
`;

const ClickButton = styled.button<{ css: CSSProp }>`
    width: 100px;

    ${({ css }) => css}
`;

<ClickButton css={buttonStyle}>Click me!</ClickButton>

그리고 리액트 개발 환경을 처음부터 구축해보고 싶은 욕심에 CRA 대신 직접 패키지를 설치하고 webpack 설정한 뒤 개발을 진행하기로 했다. CRA 없이 리액트를 사용해 본 적이 한 번도 없어 팀원들 각자 연습해 보고 같이 설정하기로 했다. 연습을 하며 참고한 블로그 : https://dev.to/alekseiberezkin/setting-up-react-typescript-app-without-create-react-app-oph
 
 

4. 기능 목록

🗺️ 지도

• 충전소 마커 표시 (혼잡도 여부 색상으로 표시)
• 마커 클릭 시 상세정보 모달 열기
  • 충전소 정보
  • 충전기 개별 정보
  • 누적 혼잡도 통계 ⭐

🔍 검색

• 충전소 이름 기반 검색
  • 검색어와 일치하는 이름을 가진 충전소 표시
• 장소 이름 기반 검색
  • 해당 위치로 이동 (ex. 신림역 검색 → 신림역으로 이동, 주변 충전소 표시)
• 필터링
  • 충전기 타입
  • 이용 가능 시간
  • 기관명
  • 충전기 상태 (사용 중인 충전기는 숨기기)
  • 마지막 충전 시작 일시
  • 충전 중 시작 일시
  • 충전 용량
  • 충전 방식
  • 충전소 구분 (ex. 공공시설 / 관공서)
  • 주차료 무료 여부
  • 이용자 제한 여부

 
 

5. 디자인

모바일부터 PC까지 모두 대응하는 반응형으로 서비스를 만들기로 했고, 모바일 퍼스트로 개발하기로 했다. PC 보다는 모바일에서 많이 사용할 것 같기 때문이다. 폰트와 주요 컬러들도 (임시로) 정했다.