Fitpet_B_Read.me

PLANNER

Profile	Name	Role
	NAYOUNG HAN go-myang	기획
	SOMIN PARK ssominging	PM
	SARANG YUN ssominging	기획

FRONTEND

Profile	Name	Role
	SEOHEE CHOI karnelll	사용자 랜딩/리뷰페이지,관리자 설정페이지, 공통 레이아웃
	YEYOUNG KONG yeyounging	프로젝트 환경설정, 사용자 견적서/FQA/보험팁 페이지, 관리자 로그인/견적서설정/url관리페이지, 관리자페이지 접근제한, 배포

BACKEND

Profile	Name	Role
	Heechan Chung anselmo	Create a Docker Image for Inferring UVR Models Manage AWS S3 buckets, Lambda, and API gateways Managing singtome project model experiments
	YUJOON LEE L-U-Ready	Create a Docker Image for Inferring UVR Models Manage AWS S3 buckets, Lambda, and API gateways Managing singtome project model experiments

DESIGNER

Profile	Name	Role
	CHAEYEON KIM lkrko	디자이너
	SEOUEN LEE lorvrlo	디자이너

💘 큐핏트

**효과적인 서비스를 기획하여 천만 반려동물 인구의 마음을 큐피트처럼 사로잡고 싶은 팀 ‘큐핏트’입니다. 저희는 이번 큐시즘 30기 기업프로젝트에서 ‘스마트커버 인슈어런스’ 사의 UXUI 개선안 및 견적서 발송 자동화 시스템 구축 과제를 담당했습니다. 3주 동안 모든 팀원이 열정을 갖고 기업 프로젝트에 임했습니다. 앞으로도 항상 최선을 다하는 ‘큐핏트’팀이 되겠습니다!

🌟 R&R 분배

분야	이름	포지션
기획	박소민	📈 PM, 서비스 기획 - 경쟁사 분석, 와이어프레임 작성, 서비스 기능명세서 작성
기획	한나영	📊서비스 기획 - 유저 리서치 설계, 와이어프레임 작성, 서비스 기능명세서 작성
기획	윤사랑	📋 서비스 기획 - 자사 분석, 와이어프레임 작성, 서비스 기능명세서 작성
디자인	김채연	🎨 디자인 리드, ux/ui디자인, gui 디자인, 3D 캐릭터 디자인
디자인	이서은	🖌️ux/ui디자인, gui 디자인
개발(프론트)	공예영	🔦 화면 UI 구현, API 연동
개발(프론트)	최서희	📱 화면 UI 구현, API 연동
개발(백엔드)	정희찬	💻 개발 리드, API 구축, 서버 배포
개발(백엔드)	이유준	🖥️ DB 및 API 구축

🔎 문제 인식

자사 분석과 경쟁사 분석을 통해 현재 ‘스마트커버 인슈어런스’ 사이트의 문제를 파악했습니다.

❇️ 자사 분석

‘스마트커버 인슈어런스’의 시장 현황과 SWOT을 분석했습니다.

1️⃣ 자사 현황

‘스마트커버 인슈어런스’는 반려동물 헬스케어 분야 선두 기업 ‘핏펫’의 자회사 법인보험대리점입니다.
- 핏펫은 2017년 설립되어 모바일 반려동물 검진키트 ‘어헤드’, AI 서비스 기반 반려동물 물품 이커머스 ‘핏펫몰’, 반려동물 맞춤 건강관리 프로그램 ‘핏펫 헬스’, 동물병원 리뷰 및 예약 서비스 ‘핏펫 케어’ 등의 주요 사업을 추진 중임
- 국내 반려동물 헬스 케어 분야 1위
‘스마트커버 인슈어런스’는 펫보험 비교 서비스를 통해 펫 전문 보험사 설립 목표를 지녔습니다.
- 모회사 ‘핏펫’의 다양한 반려동물 사업으로 누적된 빅데이터를 활용해 2024년 2월 출범
- 반려동물 빅데이터를 활용해 펫 전문 보험사 설립 추진
- 반려동물 보호자의 상담과 컨설팅을 통해 펫보험을 추천
- 주요 5개 손해보험사와 제휴를 맺고 보험 상품을 판매
- 24년 8월 기준 약 2천여건의 펫보험 고객 상담 및 100건 이상의 펫보험 체결

2️⃣ SWOT 분석

SWOT 분석 전략 중 WO 전략을 채택하여 약점을 보완하고 스마트커버인슈어런스가 타사에 비해 가지는 강점과 기회 요인을 강화하는 방향성을 구축했습니다.

3️⃣ 자사 분석 인사이트

💡 ‘스마트커버 인슈어런스’는 **주요 5개 보험사와 제휴를 통한 보험 상품 비교**와 보험사 출신 **전문가와의 상세한 상담**이라는 강점이 있지만 부실한 웹사이트 UI와 기능 안내로 인해 **사용성이 떨어진다**는 문제가 있습니다.

❇️ 경쟁사 분석

카카오페이, 비마이펫, 펫핀스 분석을 통해 ‘스마트커버인슈어런스’ 사이트의 보완점을 모색했습니다.

1️⃣ 웹사이트의 기능이 명확히 드러나는 슬로건

세 경쟁사 모두 펫보험 ‘비교’ 서비스 기능을 명확히 드러내는 슬로건을 내세워 사용자가 한눈에 웹사이트의 정체성을 파악할 수 있도록 유도했습니다.

“다양한 보험사의 상품을 한눈에 비교해요-펫보험으로 병원비 부담을 낮출 수 있어요.” (카카오페이) ”펫보험, 간단한 정보로 바로 확인!” (비마이펫) “AI 비교가입과 청구까지 간편하게 펫보험은 펫핀스에서” (펫핀스)

2️⃣ 사용자 피로도를 줄인 보험 정보 입력 과정

세 경쟁사 모두 객관식 옵션 체크, 드롭다운, 스크롤 형식을 통해 보험 정보 입력 과정을 단순화했습니다.

객관식 체크 형식, 스크롤 (카카오페이, 비마이펫, 펫핀스) 보장혜택 선택 가능 (비마이펫, 펫핀스) 상품 클릭 시 세부 페이지 이동 (비마이펫)

3️⃣ 차별적인 기능을 통한 사용자 경험 증진

세 경쟁사 모두 간편한 보험 비교 결과 안내와 부가적인 기능으로 사용자 경험을 증진했습니다.

즉각적인 비교 결과 확인 가능 (카카오페이, 비마이펫, 펫핀스) 갱신형/재가입형 분류 확인, 선택한 가입조건 수정 및 재확인 가능 (카카오페이) 커뮤니티 Q&A 확인, 보험사 페이지 연결 (비마이펫) 생년월일 입력 시 자동 나이 계산 (펫핀스)

4️⃣ 경쟁사 분석 인사이트

💡 ‘스마트커버 인슈어런스’는 경쟁사에 비해 **사이트의 정체성이 드러나는 슬로건이 부재**하며 **보험 정보 입력 및 확인 과정에서 사용자 편의성이 떨어진다**는 문제가 있습니다.

👥 유저 리서치

앞선 문제 인식을 바탕으로 사용자가 ‘스마트커버 인슈어런스’ 사이트를 사용하며 겪을 페인포인트에 대한 4가지 가설을 설정하고 이를 유저리서치를 통해 검증하였습니다.

💭 **[문제 인식을 바탕으로 한 가설 설정]**

사용자들은 카카오톡으로 제공되는 견적서를 파악하는 데에 어려움을 겪을 것이다.
1. 특히 알아보기 어려운 글씨와 각 보장 별 비교가 어려운 레이아웃이 주된 페인포인트일 것이다.
사용자들은 현재 사이트의 정체성을 파악하는 데에 어려움이 있을 것이다.
1. 해당 사이트에서 어떤 행동을 할 수 있을 지 파악하기 어려울 것이다.
스마트커버 인슈어런스의 보험 비교 서비스 이용 방법을 파악하는 데에 어려움이 있을 것이다.
견적서 정보 입력 시, 선택지와 예시 미제공으로 불필요한 소요 시간 발생에 불편함을 겪을 것이다.

가설을 검증하기 위해 직접 사용자의 목소리를 들어보고자 유저 리서치를 진행하였습니다.

❇️ 유저 리서치 설계

목적: 현재 자사 사이트의 사용성을 테스트하고 이를 통해 사용자들의 페인포인트와 니즈를 파악하기 위함
대상: 현재 스마트커버인슈어런스의 페르소나 타겟인 2040 여성 (총 5명: 20대 2명, 30대 1명, 40대 2명)
일시: 2024. 8. 22. ~ 2024. 8. 25.
인터뷰 진행 방식: 대면 or 비대면
- 비대면의 경우, ZOOM을 이용한 화면 공유를 통해 사용자가 사이트를 활용하는 모습을 실시간으로 확인

❇️ 유저 리서치 분석

[Pain point&Needs]

전반적인 사이트에 대한 사용성

“보험에 대한 지식이 없으니 사이트 전반이 생소해요.” “반려동물 관련한 사이트인 건 알겠는데 펫보험 비교를 해주는 지는 정보를 조금 읽은 뒤에야 알았어요.” “펫보험에 대한 정보가 없이 고객 리뷰가 먼저 나오니 당황스러워요.” ”반려생활에서 핏펫몰로 이동한지 몰랐어요. 다시 SC 사이트로 돌아오는 방법을 찾기 어려웠어요.”
견적서 받기에 대한 사용성

“견적받기 눌러보니 메시지가 올 것이라는 창만 뜨고 아무 정보를 못 받으니 답답해요.” “글씨가 너무 작아서 눈에 잘 보이지 않아요.” “서로 다른 견적서의 차이를 잘 모르겠어요.” “한 장에 너무 많은 정보가 들어가서 인지가 어려워요. 두 장으로 나누어 왔으면 더 좋을 것 같아요.”

“비고란에 어떤 내용을 작성해야할 지 몰라서 그냥 제출했어요.”
- 강아지 품종을 입력하는 과정에서 40대의 경우 품종을 잘 모르거나 입력에 어려워하는 경우 발생
- ‘펫보험 견적받기’ 라는 UX writing이 비교하기 기능을 나타내는 지 파악하지 못하고 헤맴
- ‘펫보험 견적받기’ 이후 견적서를 수령하고 상담받을 수 있는 방법을 명확히 파악하지 못함
- 나이를 입력할 때, 생년월일로 기억하니 일일이 나이를 세서 작성함
기타

“펫보험에 대한 사이트인데 반려생활에서 보험에 대한 정보가 안나와서 당황스러웠어요.” ”견적서 내용은 상세해서 좋아요. 상담으로 넘어갈 만한 동기가 되는 것 같아요.” ”실제로 해당 사이트를 사용하는 사람이 얼마나 되는 지 궁금해요.”

❇️ 가설 검증

1️⃣ 사용자들은 카카오톡으로 제공되는 견적서를 파악하는 데에 어려움을 겪을 것이다. 특히 알아보기 어려운 글씨와 각 보장 별 비교가 어려운 레이아웃이 주된 Pain point일 것이다.

⇒ 너무 작은 글씨와 많은 내용으로 인해 정보 파악 어려움, 차이가 없는 각 보장 별 화면 (가설 검증 완료 및 채택)

2️⃣ 사용자들은 현재 사이트의 정체성을 파악하는 데에 어려움이 있을 것이다. 해당 사이트에서 어떤 행동을 할 수 있을 지 파악하기 어려울 것이다.

⇒ 반려동물 사이트임은 인지하지만 보험 사이트임을 인지하는 유저는 절반 정도, 다만 해당 사이트에 대한 자세한 설명이 없어서 보험 사이트임을 인지해도 보험 비교 상담을 제공 받을 수 있는 지 파악이 어려움. (가설 검증 완료 및 수정하여 채택 + 초기 설정 가설에서 “아예 파악이 어려울 것” 이라는 가설은 일치하지 않았고 보험 사이트에 대한 인지는 되나 기능에 대한 안내가 부족하다는 문제로 정의)

3️⃣ 스마트커버 인슈어런스의 보험 비교 서비스 이용 방법을 파악하는 데에 어려움이 있을 것이다.

⇒ 적합하지 않은 ux writing으로 기능 사용에 대한 어려움을 겪음 (가설 검증 완료 및 채택)

4️⃣ 견적서 정보 입력 시, 선택지와 예시 미제공으로 불필요한 소요 시간 발생에 불편함을 겪을 것이다.

⇒ 연령대에 따라 40대의 경우 품종을 잘 모르거나 생년월일을 일일이 세야하는 불편함 발생 (가설 검증 완료 및 채택)

💡 문제 정의 및 솔루션

앞선 문제 인식과 문제 정의 과정을 통해 주요 Problem을 설정하고 이에 따른 Solution을 도출하였습니다.

⚡️ 홈페이지 UXUI 개선점

1️⃣ 더 편리해진 견적서 발급 플로우

▶️ 사용자들이 홈페이지에 처음 접속한 후, 견적서 발급까지 진행하는 플로우를 더 편리하게 개선하고자 했습니다. 이를 위해 두 가지 측면에 중점을 두어 개선했습니다. ① 사용자가 ‘펫보험 비교’ 서비스라는 점을 빠르게 파악할 수 있도록 합니다. ② 사용자가 SC가 가진 차별점인 ‘전문가 상담’ 서비스를 빠르게 파악할 수 있도록 합니다.

GNB 개선
- 기존안 홈, 펫보험견적, 반려생활, FAQ, 제휴/문의
- 개선안 홈, 펫보험 비교, 펫보험 팁, 고객 리뷰, FAQ
  - 홈페이지 접속 시 사용자들이 해당 사이트가 ‘펫보험 비교 서비스’를 제공하는 사이트임을 빠르게 이해할 수 있도록 개선했습니다.
    - UT에서 다수의 테스터가 개선안의 GNB UX 라이팅을 통해 해당 사이트가 제공하는 서비스를 빠르게 이해했습니다.
슬라이드형 배너 구성 (총 3개)
- 3개의 슬라이드 배너를 통해 중요도 높은 정보를 제공합니다.
  - 4초마다 자동으로 배너가 전환되어 사용자가 편리하게 배너를 확인할 수 있습니다.
- 전문가 전화 상담, 톡 문의 플로팅 버튼 → 상담 접근 용이
  - 전화 상담, 톡 문의 클릭 시 각각 ‘SC 자사와의 전화’, ‘카카오톡 스마트커버인슈어런스 플러스친구’로 바로 연결될 수 있게 하여 사용자들의 상담 접근성을 높였습니다.
견적서 입력 페이지에서 실제 견적서 예시를 바로 확인 가능할 수 있는 기능
- ‘?’ 컴포넌트, ‘견적서 예시보기’ 컴포넌트 모두 사용자가 접근 시 견적서 예시를 확인할 수 있도록 구현했습니다.
- 또한, 사용자가 정보 확인 이후 견적서 입력 정보 플로우로 빠르게 돌아갈 수 있도록 호버, 닫기 기능 모두 구현했습니다.

2️⃣ 신뢰감 있는 UXUI

▶️ 스마트커버인슈어런스가 제공하는 핵심 서비스인 ‘보험 비교 서비스’의 특성을 고려하여 신뢰감을 주는 UXUI를 구현하고, 동시에 UX 라이팅 개선 시에도 해당 측면을 고려했습니다.

UX 라이팅 전면 개선
- 메인 슬로건
- ‘우리 아이 건강, 걱정 없이 오래오래, 전문가와 딱 맞는 펫보험 찾아보세요.’
  - 먼저, 메인 슬로건 개선을 위해 데스크 리서치, 필드 리서치를 통해 얻은 SC의 차별화된 장점을 키워드로 도출했습니다.
  - 도출한 키워드는 다음과 같습니다.
    - ‘걱정 없이’, ‘전문가’, ‘딱 맞는’, ‘~찾아보세요.(SC는 고객과 함께 한다는 느낌울 주는 어미 사용)’
  - 위 키워드를 활용하는 동시에 페르소나의 특성을 고려하여 메인 슬로건을 변경했습니다.
SC만의 3D 캐릭터 제작
- ‘강아지와 고양이의 펫보험 비교 서비스’를 제공하는 SC의 특성을 고려하여, 강아지와 고양이 3D 캐릭터를 각각 직접 제작하여 사이트에 활용했습니다.
- 제작한 캐릭터를 메인 홈, 견적서 입력 완료 시 팝업, 고객 리뷰 작성 완료 시 팝업 등에 활용했습니다.
- 해당 3D 캐릭터 사용 시 기대되는 효과는 다음과 같습니다.
  - 2D가 아닌, ‘깊이’와 ‘입체감’을 가진 3D 캐릭터를 제작하여 사용자에게 제공되는 시각적 매력을 향상 시킬 수 있습니다.
  - 브랜드의 정체성을 표현하는데 탁월한 3D 캐릭터를 통해 SC의 브랜드 가치를 사용자들에게 효과적으로 전달할 수 있습니다.
보험 무료상담하기, 펫보험 견적받기 위계 조정
- 펫보험 견적받기의 경우, ‘나에게 딱 맞는 펫보험 찾아보기’로 UX 라이팅 변경 및 위치
- 보험 무료상담하기의 경우, 전문가 전화상담/톡 문의로 나눈 플로팅으로 변경
  - 기능별 중요도를 고려한 위계 조정 및 UX 라이팅 변경을 통해 사용자들이 펫보험 비교 견적서 발급 페이지에 접근 할 수 있도록 유도합니다.
메인홈에서 제휴 보험사들을 직관적으로 배치
- 5개 보험사 로고를 캐러셀 기능을 사용해 구현했습니다.
  - 메인 홈에서 바로 비교 가능한 보험사 정보를 확인할 수 있도록 위한 기능입니다.
  - 또한, 메인 홈의 공간을 효율적으로 사용할 수 있습니다.
고객 리뷰 카테고리 신설
- 기존 사이트에서 메인 홈 내 이미지로만 구현되었던 고객 리뷰를 별도 카테고리로 생성했습니다.
  - 해당 개선 점을 통해 사용자가 고객 리뷰를 직관적으로 확인할 수 있게 유도하여, SC의 신뢰성을 높습니다.

❇️ 페르소나를 고려한 UX

현재 스마트커버 인슈어런스의 주요 타겟 페르소나는 비대면을 선호하는 2040 반려인 여성입니다. 해당 페르소나를 고려한 다양한 UIUX를 사이트에 적용하였습니다.

1. 반려인을 위한 센서티브한 UI와 UX writing

딱딱한 ‘~습니다.’ 체보다 부드럽고 친근한 ~세요.’ 체를 사용하여 2040 반려인 여성에게 거부감 없이 다가가고자 하였습니다.
대표 캐릭터인 고양이와 강아지를 사이트 곳곳에 적절하게 배치하여, 사이트에 대한 장벽을 낮추고 브랜드의 긍정적인 이미지를 구축하고자 하였습니다.

2. 즉각적인 인지가 가능한 UX

완료 후 팝업, 오류 시 메세지, 마우스 호버 시 인터랙션을 통해 해당 사이트의 사용자가 본인의 행동을 빠르게 인지할 수 있도록 하였습니다.
이탈 시 팝업을 띄워줌으로써 사용자의 불필요한 행동을 최소화 하였습니다.
견적서 입력 시, 사용자 입력에 따라 프로그레스 바가 변하는 인터랙션을 통해 사소한 디테일에서도 사용자의 인지도를 향상하였습니다.

3. 보험이 낯설 2040 여성을 위한 충분한 정보 제공

보험이라는 낯선 주제를 쉽게 이해할 수 있도록 충분한 정보 제공
- 메인 화면의 설명
- 각 기능 별 페이지의 배너
  - 해당 페이지의 기능을 한 줄로 파악할 수 있도록 하였습니다.
- 보험 용어 설명
  - 어렵고 복잡한 보험 용어를 간단하게 풀어서 제공합니다.
- 펫보험 팁
  - 기존의 단순한 반려동물 내용에서 보험과 의료에 대한 내용과 연결하여 사이트 내의 내용적 통일성을 높이고 사용자에게 유의미한 정보를 제공합니다.
  - 일부 게시물에서는 보험 견적 받기를 유도하도록 하여 비교 견적서를 받을 수 있는 모수를 확대할 수 있도록 하였습니다.

💻 GUI

스마트커버 인슈어런스 웹사이트 GNB는 [홈 - 펫보험 비교 - 펫보험 팁 - 고객 리뷰 - FAQ - 제휴 문의] 로 구성되었습니다.

🏠 홈

웹사이트의 아이덴티티와 서비스 정보를 통합적으로 제공합니다.

기능 및 특징
- 슬로건과 캐릭터를 통해 웹사이트의 정체성을 부각합니다.
- ‘펫보험 비교하기’, ‘펫보험 팁’ 등 주요 세부 페이지에 접속합니다.
- 누적 상담 건수를 통해 웹사이트의 이용률을 파악합니다.
- 웹사이트 이용 시 받을 수 있는 혜택을 확인합니다.
- 제휴되어 있는 주요 보험사를 한눈에 파악합니다.
- 소개글을 통해 SC만의 차별적 서비스를 압축적으로 제시합니다.
- ‘펫보험 비교’ 서비스를 통해 수령할 견적서 예시를 미리 확인합니다.
- 사용자들의 사이트 사용 후기를 게시하여 신뢰도를 상승합니다.

✏️ 펫보험 비교

펫보험 비교 견적서 수령 시 필요한 정보를 작성합니다.

기능 및 특징
- 반려동물과 보호자 정보를 간편하게 입력합니다.
- 카카오톡 견적서 전송과 상담에 대한 안내를 통해 견적서 정보 입력 이후의 프로세스를 인지할 수 있습니다.

🔍 펫보험 팁

펫보험 관련 카드뉴스를 게시합니다.

기능 및 특징
- 펫보험 관련 지식과 펫보험 알아두면 유용한 정보를 카드뉴스로 제공합니다.

👥 고객 리뷰

스마트커버 인슈어런스 이용 후기를 작성하고 다른 고객들의 후기를 조회합니다.

기능 및 특징
- 반려동물의 정보와 사이트 이용 후기를 입력합니다.
- 다른 사용자들의 리뷰를 카테고리 별(반려동물 종류, 정렬)로 조회합니다.

🤔 FAQ

자주 묻는 질문을 게시합니다. (FAQ 페이지 이미지 삽입)

기능 및 특징
- FAQ 를 카테고리 별로 조회 또는 검색어를 입력하여 조회합니다.

📞 제휴

스마트커버 인슈어런스와의 제휴 문의를 신청합니다.

기능 및 특징
- 문의자 정보와 문의 내용을 작성하여 제휴를 신청합니다.

📄 Usability Test

9월 8일, 개선된 사이트를 기반으로 사용성 테스트를 진행하였습니다.

1. 사용성 테스트 설계

사용자에게 특정 페르소나와 상황을 부여하고 이에 따른 과제를 제시하여 해당 사이트를 이용하는 행태와 보완점을 확인하고자 했습니다.

페르소나 및 상황

5살 포메라니안 코코를 키우고 있는 20대 반려인, 소형견 슬개골 탈구가 걱정되어 펫보험을 알아보던 중 스마트커버 인슈어런스를 접하게 됨.

과제

Task 1. 비교 견적서를 받기 전 전반적인 사이트 탐색을 통해 펫보험에 대해 알아보세요.
Task 2. 코코가 가입할 수 있는 펫보험을 알아보기 위해 펫보험 비교 견적서를 받아보세요.
Task 3. 발급받은 견적서의 내용을 통해 보다 더 자세히 알아보세요.
- Task 3-1. 각 견적서의 차이를 파악할 수 있으신가요?
- Task 3-2. 보장형과 갱신 주기를 확인해보세요.
- Task 3-3. 슬개골 탈구와 관련된 내용을 견적서에서 확인해보세요.

2. 사용성 테스트 결과

Good point

“사이트의 내용이 전반적으로 친절해요.”

”보험 용어 설명 페이지가 구현은 안되었지만 굉장히 좋은 것 같아요. 저 같이 보험에 대해 잘 모르는 사람은 유용하게 사용할 수 있을 것 같아요.”

”메인 홈에서 4가지의 주요 기능과 사이트의 특성이 한 번에 보여서 좋았어요.”

”이전 UI에서는 어떤 사이트인지 바로 파악하기 어려웠는데, 개선된 사이트에서는 GNB를 보고 바로 펫보험 비교 사이트임을 알 수 있었어요.”

”메인 화면에서 제휴 보험사가 바로 보여서 신뢰감이 생겨요.”

”홈 화면의 배너 슬라이드가 좋은 것 같아요.”

”전반적인 아이콘들이 통일감 있고 확실해서 눈이 편안해요”

”메인 페이지에 리뷰가 있어 신뢰가 가요.”

”견적서 예시가 바로 보여서 좋은 것 같아요.”

”이전 UI에 비해 펫보험과 더 잘 어울리고 친근감 있어서 긍정적이에요.”

Feedback

“견적서에서 나이를 쓸 때, 예시 문구가 헷갈려 어떻게 써야할 지 헷갈려요” ”예시에 ‘만 ~세 ‘라고 적혀있어서 반드시 그렇게 써야하는 것 처럼 느껴져요.”

품종 강아지/고양이 선택 시, 둘 다 선택된 것 같아 보여서 디자인이 바뀌면 좋을 것 같아요.”

“인증된 사람에 대한 리뷰가 있으면 좋을 것 같아요. 중간에 인증 절차가 있으면 어떨까요?”

“리뷰랑 견적서의 나이 입력 형식이 다르던데, 이를 통일 하면 좋을 것 같아요.”

“리뷰에서 별이 아예 선택이 안되어있으니 별을 선택해야하는 지 몰랐어요. 아예 디폴트로 별이 1개 색칠되어있으면 좋을 것 같아요.”

“견적서 갱신주기와 보장 비율이 이전 보다는 잘 보이긴 하지만 여전히 눈에 띄지는 않는 것 같아요.”

“리뷰에 사진을 넣을 수 있으면 좋을 것 같아요.”

“견적서 예시를 볼 때, 물음표 아이콘이 아닌 텍스트에 호버해서 보는 게 불편했어요.”

3. 사용성 테스트를 기반으로 사이트 2차 개선

사용성 테스트에서 받은 피드백을 기반으로 사이트 2차 개선을 진행하였습니다. 받은 피드백 중 빠르게 개선이 가능한 것들을 해결하였습니다.

2차 개선이 완료된 부분

리뷰와 견적서 나이 입력 형식 통일
리뷰 작성 시, 디폴트 값으로 별점 1점 표시
견적서 내의 갱신주기와 보장 비율을 컬러 변화를 통해 강조
견적서 입력 페이지의 예시의 호버 위치를 텍스트가 아닌 아이콘으로 이동

Admin 페이지

보다 용이한 사이트 관리를 위하여 Admin 페이지를 제작하였습니다.

견적서 목록 조회

사이트 내의 ‘펫보험 비교’를 통해 접수된 견적서를 모아볼 수 있는 페이지 입니다.

확인 가능한 데이터

견적서가 접수된 시간
종류
이름
나이
품종
특이사항
보호자 연락처

사용 가능한 기능

필터링
- 날짜
- 보호자 전화번호
사용자 입력 데이터 수정
입력 데이터 기반 자동화된 견적서 PDF 다운
전체 견적서 데이터 엑셀 파일로 다운

URL 관리

자사에서 배포 중인 URL을 관리할 수 있는 페이지입니다.

사용 가능한 기능

등록된 URL 수정
새로운 URL 추가

🎨 디자인 시스템

Typhography
- 깔끔하고 정직한 Pretendard 폰트를 사용했습니다.
- Bold, Semibold, Medium, Regular 4가지의 font-weight로 헤드라인, 본문, 버튼 등의 정보 위계를 정리하고 가독성을 높였습니다.
Grid
- 웹 서비스의 기본이 되는 1440*1024사이즈를 기반으로 웹사이트 디자인을 진행하였으며, 마진은 120px로 설정했습니다.
- 12column의 그리드를 설정해 콘텐츠를 일관성 있게 배치하고 다양한 디바이스에 최적화된 레이아웃을 설계했습니다.
Color
- 신뢰감, 안정감을 주는 파란색을 메인 컬러로 설정했습니다. 또한 회색과 흰색을 함께 사용하여 깔끔하고 시각적으로 편안한 웹사이트로 리뉴얼했습니다.
Component
- 깔끔하고 직관적인 UI디자인을 위해 8px의 Corner Radius 기본값을 설정한 사각형 기반의 컴포넌트를 주로 사용했습니다.
- 파란색, 흰색 2가지의 버튼 컬러를 주로 활용해 시각적 위계를 구분했습니다.
Character
- 브랜드의 정체성을 확립하고 SC의 사용자들에게 보다 친근하게 다가갈 수 있는 방안으로, 강아지와 고양이 캐릭터를 디자인해 웹사이트 전반에 활용했습니다.
- 높은 활용도를 위해 다양한 자세와 각도로 자유롭게 변경할 수 있고 생동감을 줄 수 있는 3D 모델링 캐릭터를 제작했습니다.
- 캐릭터의 전반적인 외형은 3D로 설정했으며, 이목구비는 보다 평면적으로 설정해 귀엽고 친근한 이미지의 캐릭터로 디자인했습니다.

🛅ERD

🧑‍🔧기술 스택 선정 이유

Server

EC2: AWS EC2를 사용하여 백엔드 서버를 호스팅했습니다.
RDS: AWS RDS를 사용해 MySQL 데이터베이스를 관리했습니다.
S3: AWS S3를 통해 파일 저장소를 구현했습니다.
Vercel: Vercel을 사용하여 프론트엔드 애플리케이션을 배포했습니다.

Frontend

Next.js 14: 서버사이드 렌더링(SSR)과 정적 사이트 생성(SSG)으로 빠른 초기 화면 렌더링과 SEO 최적화가 가능합니다.
- page router
React: 컴포넌트 기반으로 UI를 모듈화해 빠르고 효율적인 업데이트가 가능하며, 재사용성 높은 코드로 유지보수가 용이합니다.
TypeScript: 정적 타입 검사로 코드 안정성을 높이고 디버깅을 쉽게 합니다.
TailwindCSS: 유틸리티 클래스 기반으로 신속하고 일관된 스타일링이 가능합니다.
tanstack-query:

백엔드 스택 선정과 이유

Backend

Layered Architecture in DDD: 복잡한 비즈니스 로직을 체계적으로 관리하고 확장성을 높입니다.

└─fitpet_be
    ├─application
    │  ├─dto
    │  │  ├─request
    │  │  └─response
    │  ├─exception
    │  ├─service
    │  └─serviceImpl
    ├─common
    │  └─config
    ├─domain
    │  ├─model
    │  └─repository
    ├─infrastructure
    │  ├─jwt
    │  ├─persistence
    │  ├─s3
    │  └─utils
    └─presentation
        └─controller

CQRS: 읽기와 쓰기 작업을 분리해 성능과 데이터 일관성을 유지합니다.
Java 17: 안정성과 보안을 제공하며, 최신 LTS 기능을 활용할 수 있습니다.
Spring Boot: 빠른 개발과 표준화된 코드 구조를 지원합니다.
Spring Data JPA, Swagger, Logback, AWS 등: 데이터 접근, API 문서화, 로깅, 클라우드 인프라 활용을 간소화합니다.
JWT(Jason Web Token): 현대 웹 애플리케이션에서 인증과 권한 부여를 위해 널리 사용되는 기술로, 서버와 클라이언트 간의 데이터를 안전하게 주고받을 수 있도록 해줍니다. 관리자 인증, 인가에 사용했습니다.
Aspose.Cells: 보험료 견적서에 사용된 Microsoft Excel를 생성, 읽기, 조작, 변환 및 보호하기 위한 클라우드 API입니다.
Apache POI: Microsoft Excel 포맷을 순수 자바 언어로서 읽고 쓰는 기능을 제공합니다. 보험료 견적서에 사용자의 정보를 입력하기 위해 사용했습니다.

API Documentation

Swagger: Controller 기반으로 자동화된 API 문서를 생성하여 정확성과 신뢰성을 높입니다. (http://3.35.191.40:8080/swagger-ui/index.html#/)

�GIT FLOW

GitHub Flow는 모든 개발을 기능 브랜치에서 독립적으로 진행한 후, 코드 리뷰를 거쳐 master 브랜치로 병합하고, 배포하는 간단하고 효율적인 방식입니다. 이 방법은 빠른 배포 주기가 필요한 프로젝트에 적합합니다.

이 이미지에서 각 색깔의 노드는 브랜치의 각각의 커밋을 나타내며, 병합 화살표는 각 기능 브랜치가 master 브랜치로 병합되는 과정을 설명하고 있습니다.

Name		Name	Last commit message	Last commit date
Latest commit History 26 Commits
README.md		README.md

KUSITMS-FITPET/Fitpet_B_Read.me

Folders and files

Latest commit

History

Repository files navigation