SP.AGCY
Available for new projects
 
09 / 09Selected project

CARROT

Client
한화손해보험
Services
Front-end
Year
2021
Visit site
CARROT 프로젝트 이미지 1
CARROT 프로젝트 이미지 2
CARROT 프로젝트 이미지 3
CARROT 프로젝트 이미지 4
CARROT 프로젝트 이미지 5
CARROT 프로젝트 이미지 6
09 / 09 · Selected project

CARROT

탄 만큼 내는 자동차 보험, 캐롯손해보험

Client
한화손해보험
Year
2021
Services
Front-end
Stack
Next.js
CARROT 프로젝트 커버

Overview

탄 만큼 내는 자동차 보험, 캐롯 퍼마일 자동차보험 웹 플랫폼 고도화

한화손해보험 계열의 디지털 손해보험사 캐롯손해보험 프론트엔드 개발팀에서 2021년 5월부터 9월까지 Next.js로 '캐롯 퍼마일 자동차보험' 서비스 고도화와 사내 API 통신 플랫폼(테스트 도구) 고도화를 담당했습니다. 헤드헌팅을 통해 합류한 첫 금융 대기업이었고, 큰 조직이 개발 환경과 절차를 어떻게 갖추는지 직접 보는 것이 개인적인 목표이기도 했습니다.

퍼마일 자동차보험은 주행거리에 따라 보험료를 내는 상품이라 기존 자동차보험과 계산 구조가 다르고, 가입·조회 화면 곳곳에서 사용자에게 그 차이를 설명해야 하는 서비스였습니다. 잘 정리된 개발 문서와 코딩 컨벤션, 검토 절차를 따라 고도화를 진행했습니다.

01

퍼마일 자동차보험 웹 플랫폼 고도화

문제 Problem주행거리 기반 보험료는 사용자가 자신의 보험료를 미리 가늠하기 어렵고, 가입 흐름이 길어 중간에 이탈하기 쉬웠습니다.

해결 Solution가입·조회 화면을 고도화하면서 단계 진행 표시와 입력값 검증 메시지를 공통 컴포넌트로 정리해, 사용자가 지금 어디에 있고 무엇을 고쳐야 하는지 바로 알 수 있게 했습니다. 보험료가 정해지는 원리는 화면 안에서 짧게 설명했고, 금융 서비스인 만큼 오류가 날 수 있는 경우마다 문구와 처리 방식을 정해 두었습니다.

결과 Result가입 과정에서 걸리는 부분을 줄이고, 여러 개발자가 만드는 화면이 같은 규칙으로 보이도록 정리했습니다.

CARROT 프로젝트 화면 1

02

사내 API 통신 플랫폼 고도화

과제 Task개발팀이 API를 검증하는 사내 테스트 도구의 프론트엔드 업데이트

아이디어 Insight내부 도구는 예쁠 필요는 없지만 빨라야 합니다. 요청과 응답의 위계를 단순화하고 자주 쓰는 입력을 기억하게 해, 개발자가 API를 검증하는 데 드는 시간을 줄였습니다.

결과 Result팀이 매일 쓰는 도구를 손보면서, 내부 도구는 서비스 화면과 다른 기준으로 봐야 한다는 걸 배웠습니다.

CARROT 프로젝트 화면 2

03

금융 대기업의 개발 프로세스 경험

내용 Description잘 정리된 문서와 컨벤션, 코드 리뷰와 배포 검토 절차를 따르는 대규모 조직의 프론트엔드 운영 방식을 경험했습니다.

접근 Approach스타트업에서는 속도 때문에 건너뛰기 쉬운 문서화와 검토가 규모가 커질수록 왜 필요한지 직접 겪었고, 이후 프로젝트에서는 이때 경험을 살려 문서화 기준과 컨벤션을 세웠습니다.

CARROT 프로젝트 화면 3
CARROT 프로젝트 화면 4
CARROT 프로젝트 화면 5

Process

이슈 단위로 브랜치를 만들고 코드 리뷰와 QA 검토를 거쳐 배포하는 조직의 절차를 그대로 따랐습니다. 화면을 고치기 전에 관련 문서와 컨벤션을 먼저 확인하고, 변경 사항은 문서에 함께 반영해 팀 누구나 같은 정보를 보게 했습니다.

Outcome짧은 기간이었지만 금융 서비스가 요구하는 정확성과 큰 조직의 개발 절차를 직접 겪어 봤습니다.

Next project