미리보기

폰고는 리퍼비시 기기들을 렌탈하는 서비스를 제공하고 있습니다
장고 기반에서 프론트엔드와 백엔드 분리를 주도로 개발하고 있습니다.

시작 단계에서 부터 참여하여 기획/디자인에 참여하여 의견을 제시하여 유저에 좋은 경험을 줄 수 있도록 기여하였습니다.

전반적인 프론트작업 뿐만이 아니라 백엔드, 이슈 문서화, 슬랙 알림 봇등을 만들어 팀원들에게 도움이 되고 함께 성장하고 협업 가능한 환경을 만들기 위해 노력했습니다.

장고로 되어있는 서비스를 리액트를 기반으로 마이그레이션 작업을 진행합니다.

프론트는 혼자서 주도적으로 모든 환경을 구축하였습니다.

프론트, 백엔드, 데브옵스 모두 작업을 진행하고 주력으로는 프론트엔드를 개발하였습니다.

사용 기술
TypeScript React Nextjs styled-components zustand Pandacss Tanstack-query jest react-testing-library Django Python EKS argoCD helm

프론트 로드맵 수립

• 단기전략

  • 장고 템플릿 기반 서비스를 리액트로 전환하는 단계적 전환 주도

    • 미납 관리,마이 페이지를 시작으로 핵심 페이지 마이그레이션 완료

  • 부분적으로 빠르게 적용하여 유지보수성,성능, 즉각적인 UX 개선

• 장기전략

  • NextJS로 전환하여 장고 환경 분리

  • 어드민 시스템 개선

  • 모노레포를 통해 통합적으로 서비스/패키지 관리

서버 문제 개선

• API 설계 주도로 불필요한 API 30% 감소, 프론트 로직 간소화

• 기존 API 문제점 발견하여 문서화 후 해결 방안 PR과 작업내용 공유

• 팀원들이 겪고있는 문제에 대한 현재의 문제점, 해결방안, 앞으로 방향 문서화 공유

• 신용인증 시 필요한 정보를 계속해서 API마다 프론트에서 보내고 있던 부분을 보안 향상을 위해 1개의 API로 통합하여 작업할 수 있도록 개선 제안

• 장고에서 리액트 파일을 서빙하기 위해 CI/CD 작업 중 Docker Image에서 빌드된 리액트 정적 파일을 S3에 업로드 될 수 있도록 자동화

디자인 시스템 개발

• aria태그와 키보드 지원하여 접근성 향상

• overlay되는 요소들의 위계 정의

• PR에 코멘트를 트리거하여 원하는 시점에만 s3에 배포

• 기존 컴포넌트를 직접 개발하는 공수가 많아 headless 기반 UI를 바탕으로 마이그레이션 작업

• Tab 컴포넌트 개발 포스팅

• 블로그 포스팅

모노레포 환경 구성

• pnpm-workspace를 이용한 모노레포 환경 구축

• pnpm-filter와 jq를 이용하여 변경된 패키지를 추출하고 연관된 서비스만 추출하여 matrix로 병렬적으로 빌드 하여 배포

  • 서비스별 Dockerfile 생성하여 빌드 이후 ECR에 업로드

• EKS환경에서 PR 별 preview 작업

• EKS환경에서 개발, 프로덕션 환경에 대한 배포 작업

SEO 최적화

• SPA환경에서 react-helmet, prerender.io 서비스를 이용하여 임시적으로 적용하고 서비스에 크롤러 접근 시 prerender.io로 향하게 하여 동적으로 변경된 값을 얻을 수 있게 적용하였습니다.

코드 리팩토링 재사용성 향상

• 추가 기능으로 인한 중복 코드를 제거하고, 동일한 동작을 하는 부분을 컴포넌트로 분리하여 재사용성을 높였습니다. 추가 작업은 props로 전달받아 실행하는 구조로 변경하여 확장성을 확보하였습니다.

• 확장성을 고려한 컴포넌트 기반 아키텍처 설계 중복된 기능에 쉽게 추가할 수 있도록 컴포넌트 기반의 구조를 설계하고 개발하여 유지보수성과 확장성을 향상시켰습니다.

• 보안을 위한 쿼리 파라미터 암호화 적용 특정 값을 쿼리 파라미터로 받아 동작하도록 변경하였으며, 쿼리 파라미터의 변경 가능성에 따른 보안 이슈를 해결하기 위해 암호화를 적용하였습니다.

문서화 작업

• 프론트엔드 구조, 툴, 컨벤션, 이슈 내용, 백로그 등 문서화하여
  작업 내용을 쉽게 추적하고 접근할 수 있으며 서비스에 대해 파악하기 쉽도록 개선

• 로컬에서 github workflow 테스트하는 방법 문서화 하여 공유

• 특정 기능에 대한 시퀀스 다이어 그램 등을 작성하여 기능에 대한 전체적인 흐름을 파악할 수 있도록 노력

• EKS 환경으로 넘어가면서 EKS를 적용하는데 같이 사용한 helm, argoCD k8s에 대해서 간단한 설명과 프론트엔드 배포/preview 환경 설명 문서 작성

스타일링 라이브러리 선정

Nextjs App router를 대응하기 위하여 기존 styled-components대체하기 위해 tailwindcss stylex vanila-extract pandacss 중 PoC를 진행하여 기존 DX를 사용할 수 있고 디자인 토큰, 확장 가능한 기능들의 장점으로 pandacss 선정 적용 후 평균 번들 크기 8% 감소

서비스 개선

• UI/UX 개선을 위해 기존 서비스에서 불필요한 부분과 필요한 기능에 대해 의견을 피력하여 개선하였습니다

  • 페이지로만 계속해서 넘겨지는 부분들을 바텀시트나 모달을 통해서 페이지 이동없이 한 곳에서 동작할 수 있도록 변경하였습니다.

  • 너무 많은 설명과 단계로 인한 유저의 피로감을 고려하여 상세한 설명과 체크후 이동 최소화하였습니다.

  • 인터렉션이나 마우스 호버 이벤트등이 없어 유저가 느끼는 사용감이 부족할 수 있기에 반응성 추가 작업을 하였습니다.

• AWS 최적화를 진행하였습니다

  • 기존 AWS S3 비용이 많이 청구되어 CDN 적용을 통해 비용 최적화와 로딩 속도를 높였습니다.

기존 마이페이지를 리액트로 변경하며 제공되지 않던 기능들을 파악하고 제공될 수 있도록 수정과 유저의 사용성을 향상 시키기위한 작업입니다

사용기술

Django Python Typescript React Pandacss Vite html2pdf

마이페이지 개선

• 결제 방식에 따라 결제 정보가 보이지 않는 경우가 있어 변경을 권장하도록 유도와 변경 시스템 구축

• 유저가 계약서를 다운로드 할 수 있도록 기능 제공

• 마이페이지에서 유저가 확인해야할 렌탈 정보, 미납 정보, 결제 정보 제공

계약서 템플릿

• html2pdf 라이브러리를 이용하여 템플릿을 다운로드 할 수 있도록 하였습니다.

• useImperativeHandle를 이용하여 서명 추출, pdf다운로드 매서드를 제공하여 계약서 서명과, 계약서 조회에서 사용할 수 있도록 기능 제공하였습니다

미납을 하고 계시는 분들이 많아 미납의 현황을 볼 수 있으며 고객이 직접 원하는 미납금액을 납부할 수 있는 기능 제공하자고 제안하여 시작한 프로젝트입니다.

고객은 렌탈한 상품에 대한 미납금의 상태를 볼 수 있고 미납금을 분할/일시 납부할 수 있는 기능을 제공합니다.

사용 기술

Django, React, Vite, Pandacss, Axios

장고 사용

• 미납 관리 페이지를 리액트로 빌드하고 장고에서 서빙하도록 하여 개발기간 단축

• 미납금 수취율 0% -> 20% 증가

• 장고에서 정적 파일 서빙을 위한 vite 설정과 장고 collectstatic 정적 파일 배포 자동화

페이플 링크 결제 확인 시스템

• 결제 시스템 플로우 설계

• hook으로 분리하여 결제 상태, 링크생성 매서드 제공하여 재사용성 향상

• 팝업을 띄어 결제를 하는 방식인데 모바일 팝업 차단으로 인하여 팝업을 비동기로 실행하여 모바일 환경 대응

쿠키 에러

• www, non-www 모두 서비스 접근이 가능하고 로그인 세션 쿠키의 도메인은 접속한 도메인에 따라 발급되어 생기는 이슈 문서화 후 해결방안 공유

• AWS ALB 수정하여 모두 non-www 연결되도록 수정

React에서 아이콘을 사용하기 위해 svg 컴포넌트를 아이콘이 추가 될 때 마다 작성해주어야해서 자동화를 하기 위해 figma plugin을 만들게 되었습니다.

사용 기술
Figma API Github API

• Figma Public Plugin 배포 현재까지 사용 인원 2700명

• 아이콘 생성 작업 시간 단축

• 아이콘의 관리 측면과 커질수록 JSON 파일 크기 증가로 추후엔 라이브러리나 시스템 개선이 필요

• 블로그 포스팅

• Plugin 보러가기

휴가 알림 봇

사용 기술
Serverless AWS Lambda AWS Gateway AWS S3 Bolt AWS DymanoDB

휴가 전날이나 당일에 휴가자가 누구인지에 대해 알고싶다는 팀원들의 의견을 받아 flex에서 휴가 승인 시 슬랙에 전송되는 메세지값을 데이터 베이스에 저장하고 slack의 예약 메세지를 통해 휴가 전날과 당일에 휴가자에 대한 알림을 주는 slack bot을 제작하였습니다
블로그 포스팅

CS 봇

사용 기술

Serverless AWS Lambda AWS Gateway AWS S3 Bolt ChannelTal API

CS 업무 환경 개선을 위한 기능으로 cs 업무중 대응하기 어려운 케이스를 상위 보고자에게 알리기 위한 봇입니다.

• 슬랙봇을 커멘드로 호출하고 공유 하고싶은 채널톡 상담 ID를 넣으면 정해진 템플릿으로 슬랙 메세지를 전송

• 해당 이슈에 대한 승인,거절,삭제 시스템 제공하며 승인,거절 상태에 따라 이모지 표기

다양한 알림 봇

사용 기술

Serverless AWS Lambda AWS Gateway AWS S3 Bolt ChannelTal API express

외부의 서비스에서 슬랙으로 알림을 주기 위한 서버입니다

• webhook을 통해 들어온 값들을 정리하여 원하는 채널에 제공하는 봇을 제공합니다