미리보기

펫 보험 비교 및 가입&청구 사이트인 PETFINS
휠체어 보험 가입&청구 사이트인 휠체어코리아닷컴

이 2가지 사이트를 운영하는 스타트업에서
1인 프론트엔드 개발자로서 일부 기획 및 디자인과
React를 사용하여 퍼블리싱, 프론트 개발, 배포, 유지보수 및 운영을 담당하였습니다.

• 기획 피드백 및 UI, UX 설계 참여

• 정식 서비스 오픈을 위한 퍼블리싱 및 프론트 전체 개발

• 방문 경로 및 유저 유입을 분석을 위한 Google Analytics, Beusable 연동

• 서비스 고도화와 신규 기능 개발

• Lighthouse를 사용하여 성능 점수 50점대 → 90점대 개선

• 이미지, 폰트를 최적화하여 렌더링 속도 5배 개선

• 휠체어코리아닷컴 Backoffice 개발

• 휠체어코리아닷컴 한국형 웹 접근성 심사 합격

[목표]

• DAU 증가를 위해
  1. UI/UX 전체 개선
  2. 추천인제도, 포인트 사용, AI로 병원비 예측 등 신규 기능 추가
  3. 사이트 성능 최적화

[작업내용]

• Lighthouse를 이용하여 성능 점수 개선 (56점 → 90점)

• 배포 시 기존에 있던 js 캐시를 제거하기 위해 React-App-Rewired로 js 캐시 버스팅

• 폰트 렌더 속도를 향상 시키기 위해 subset 폰트 사용
  (폰트 렌더 속도 : 606ms→ 30ms , 폰트 용량 : 792kb → 177kb)

• 이미지의 렌더 속도를 향상 시키기 위해

  • 전체 이미지 wepb/avif 확장자 적용

  • resizing

  • cdn 적용

• Axios Interceptors와 React-Cookie를 활용하여 RefreshToken 구현

• Secure 쿠키로 저장된 Refresh Token 확인을 위해
  mkcert를 이용해 로컬에서 http → https로 변경하여 테스트

• AI 병원비 예측 신규 페이지 기획/디자인 및 API 연동

• 무한 스크롤 기능 구현을 위해 React-Query의 useInfiniteQuery 도입

• 커뮤니티에 optimistic ui 구현을 위해 React-Query의 useMutation 도입

• 보험 가입 단계에서 필요한 데이터 전역에서 관리하기 위해 Recoil 도입

• 카카오, 네이버 소셜로그인 기능 구현

• CLS를 개선하기 위해 Skeleton UI 사용

• heic와 같은 확장자 이미지가 업로드 될 때 jpg 확장자 변경 및 이미지 압축

• Clipboard api 활용하여 링크 복사 기능 추가

• Framer-Motion 를 활용하여 애니메이션 요소 추가

• PC, Mobile 퍼블리싱

• Figma 기반 디자인 협업

[기술스택]

React Styled-Components React-Query Recoil Framer-motion React-app-rewired React-Cookie React-responsive HTML CSS Javascript Axios Figma

[목표]

• 장애인이나 노약자분들이 웹사이트에서 제공하는 정보를 비장애인과 동등하게 접근하고 이용할 수 있도록 접근성 개선 작업 진행 후 심사 합격

[작업내용]

• 한국형 웹 접근성 심사 기준에 맞추어 작업

  • img 태그에 alt 속성, Link 태그에 to 속성 추가

  • tabIndex로 사용자 초점 이동 조절

  • html 태그별로 적절하게 aria 속성 추가

  • React-Select로 구현한 옵션박스 select태그로 수정

[기술스택]

React Styled-Components HTML CSS Javascript Axios

[목표]

• 기존 Thymeleaf로 구성된 백오피스의 기능을 점검하고 불필요한 기능 삭제 및 개선해야할 점을 정리한 후, React로 신규 개발

[작업내용]

• PC 퍼블리싱 및 API 연동

• Toast UI Editor로 공지사항, faq 글 등록 기능 추가

• Ant Design으로 리스트 UI 적용

[기술스택]

React Styled-Components Ant Design Recoil Toast Ui Editor HTML CSS Javascript Axios

[목표]

• 기존 Thymeleaf로 구성된 전동보조기기 보험 가입부터 청구/갱신, 전동보조기기 중고거래까지 할 수 있는 사이트를 React로 신규 개발

• 전동 보조기기 판매 회사와 제휴를 위해서 페이지 신규 개발 및 결제 시 파라미터 추가

• DAU 증가를 위해
  1. UI / UX개선
  2. 사이트 성능 최적화 진행

[작업내용]

• Lighthouse를 이용하여 성능 점수 개선

• 이미지의 렌더 속도를 향상 시키기 위해

  • 전체 이미지 wepb 확장자 적용

  • resizing

  • cdn 적용

• Axios Interceptors와 React-Cookie를 활용하여 RefreshToken 구현

• Secure 쿠키로 저장된 Refresh Token 확인을 위해
  mkcert를 이용해 로컬에서 http → https로 변경하여 테스트

• 보험 가입 단계에서 필요한 데이터 전역에서 관리하기 위해 Recoil 도입

• 카카오 소셜 로그인 구현

• heic와 같은 확장자 이미지가 업로드 될 때 jpg 확장자 변경 및 이미지 압축

• html, css로 보험 해지/변경 서류 양식 구현

• PC, 모바일 퍼블리싱 및 API 연동

• Figma 기반 디자인 협업

[기술스택]

React Styled-Components Recoil React-Cookie React-responsive HTML CSS Javascript Axios Figma

[목표]

• 국내 최다로 보유하고 있는 펫 보험을 비교할 수 있고 보험 가입, 보험금 청구까지 가능한 사이트 개발

• DAU 증가를 위해
  1. UI / UX개선
  2. 커뮤니티, AI 신규 기능 추가

[작업내용]

• AI를 활용하여 반려견 사진 1장으로

  반려동물의 품종을 판별하는 API 연동

• 카카오, 네이버 소셜로그인 구현

• ThemeProvider를 활용하여 공통 스타일 속성 관리

• TTV(Time To View)를 개선하기 위해 Suspense, lazy loading 적용

• useSearchParams를 이용하여 보험 비교 시 필터 검색 기능 추가

• dompurify를 이용해 xss 공격에 방어하고 공지사항, faq의 상세페이지에 innerHTML 방식을 사용할 수 있게 함.

• PC, Mobile 퍼블리싱 및 API 연동

• 기획 피드백 및 UI, UX 설계 참여

  • 보험에 대해서 자세히 알고 싶은 사용자들을 생각해 보험 상세 페이지 제안 및 설계 참여

  • 보험 가입 비교 페이지에서 보험 카드 UI 개선 제안 및 설계 참여

  • 회원가입을 유도하기 위해 보험에 관한 상세 내용을 확인하기 위해서 로그인 유도 모달 추가

• Zeplin 기반 디자인 협업

[기술스택]

React Styled-Components React-responsive HTML CSS Javascript Axios Zeplin