미리보기

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

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

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

Django 템플릿 기반 서비스를 React로 단계적으로 마이그레이션하며 프론트엔드을 주도적으로 수행하였습니다.UX/UI 개선에 중점을 두는 동시에 , 백엔드 및 DevOps에도 기여하여 시스템 개선을 하였습니다

성과 및 결과

프론트 로드맵 수립 및 실행

• 단기 전략

  • Django 템플릿에서 React로 전환을 단계적으로 진행하며 미납 관리 및 마이페이지 핵심 기능을 우선적으로 마이그레이션

  • 부분적으로 빠르게 적용하여 유지보수성,성능

    , 즉각적인 UX 개선

• 장기 전략

  • Next.js로 신규 프로젝트를 전환하며 Django 환경을 분리하고 모노레포 환경으로 관리 체계 구축.

  • 어드민 시스템 개선

FSD 아키텍처 적용

• FSD아키텍처를 적용하여 모듈화와 유지보수성을 강화하고, 기능 단위로 독립적인 개발 환경을 위하여 적용

• 아키텍처를 표준화하여 가독성 향상

모노레포 구성

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

• 개별적 배포와, 변경된 모든 서

  비스 배포 github workflow 제작

• EKS환경에서

  ArgoCD workflow를 작성하여 배포자동화

• EKS환경에서 ArgoCD PR generator를 이용하여 PR label을 이용한 preview 기능 제작

디자인 시스템 개발

• Slot 패턴을 이용하여 재사용성 향상

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

• foundation 값을 정의하고 해당 값만을 사용할 수 있도록 커뮤니케이션을 통해 표준화

• Storybook을 이용하여 동작 테스트와 UI사용방법등을 문서화

• vitest, testing-library를 이용하여 테스트 코드 작성

API 최적화 및 서버 문제 해결

• 통신을 하는데 불필요한 값을 주고 받은 점과 너무 많은 통신으로 복잡해지는 구조를 개선하였습니다.

• 불필요한 API 30% 감소, 프론트 로직 간소화 및 API 호출보안 향상

• 회원가입시 기존유저일때 연결하도록하여 중복 회원가입 방지

• 사용하지 않는 endpoint를 제거, 구글 색인을 제거하였습니다.

문서화 작업

• 프론트엔드 구조, 툴,

  컨벤션, 이슈 내용, 백로그 등 문서화하여

  작업 내용을 쉽게 추적하

  고 접근할 수 있으며 서

  비스에 대해 파악하기 쉽도록 개선

• 개발하기 전 문제원인과 해결방법을 작성하고 전반적인 내용을 담을 수 있도록 문서화 진행

스타일링 라이브러리 선정

Nextjs App router를 대응하기 위하여 기존 styled-components 대체하기 위해 여러 라이브러리중 기존 DX를 사용할 수 있고 디자인 토큰, 확장 가능한 기능들의 조건에 맞아 vanilla-extract이전을 완료했습니다.

개발 환경 개선

• Datadog RUM을 적용하여 모니터링과 사용자 경험 개선

• PR review를 개선하기 위하여 D-day기능 reviewer 알림 슬랙 등 github-action을 이용하여 개선하였습니다.

서비스 개선

• 바텀시트나 모달을 통해서 페이지 이동을 줄이고 한 곳에서 동작할 수 있도록 수정하였습니다

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

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

기존 마이페이지를 React로 재구축하며 제공되지 않던 기능들을 추가하고, 유저 경험을 개선하기 위한 작업을 수행하였습니다.

사용기술

Django Python Typescript React vanilla-extract Vite html2pdf

성과 및 결과

결제 방식 개선

• 결제 정보가 보이지 않는 문제를 해결하고, 결제 방식 변경을 권장하는 시스템 구축

유저 편의성 향상

• 유저가 마이페이지에서 렌탈 정보, 미납 정보, 결제 정보를 확인 가능하도록 기능 제공

• 계약서를 기존 1개의 png에서 pdf형식으로 다운로드할 수 있는 기능 추가

계약서 템플릿 다운로드

• html2pdf 라이브러리를 활용하여 계약서를 PDF로 다운로드할 수 있도록 구현

• useImperativeHandle을 사용해 서명 추출 및 PDF 다운로드 메서드 제공

기존 시스템에서 해결하지 못했던 미납 문제를 해결하기 위해 Django와 React를 활용하여 개발 속도를 단축하고, 기능 제공을 제안 및 구현하였습니다

사용 기술

Django, React, Vite, vanilla-extract, Axios

성과 및 결과

• React를 활용한 미납 관리 페이지를 Django에서 서빙하도록 설계하여 개발 기간 단축 및 효율성 향상

• 미납금 수취율 0% → 26% 증가 달성

• Vite 설정과 collectstatic 자동화로 Django에서 정적 파일 배포 간소화

주요 기능

• 결제 시스템 플로우 설계

  • 결제 상태와 링크 생성 메서드를 Hook으로 분리하여 재사용성 향상

  • 비동기 팝업 실행 방식으로 모바일 환경 대응

• 도메인 쿠키 이슈

  • www와 non-www 도메인 간 로그인 세션 쿠키 충돌 문제를 문서화 및 해결

  • AWS ALB 설정을 통해 모든 요청을 non-www 도메인으로 리다이렉트

디자이너가 생성한 아이콘을 개발팀에 전달할 때마다 React에서 SVG 컴포넌트를 작성해야 하는 비효율성을 개선하기 위해, Figma 플러그인을 개발하여 커뮤니케이션 비용을 절감하고 작업을 자동화하였습니다.

사용 기술
Figma API Github API

성과 및 결과

• 개발한 플러그인을 Figma 커뮤니티에 공개하여 현재까지 약 2,800명의 사용자를 확보하였습니다.

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

향후 개선 사항

• 아이콘의 수가 증가함에 따라 JSON 파일의 크기가 커지는 문제를 해결하기 위해 라이브러리나 시스템의 개선이 필요합니다.

블로그 포스팅

Plugin 보러가기

토스에서 주관하는 프론트엔드 개발자들의 심도 있는 지식 공유를 위한 커뮤니티인 프론트엔드 딥다이빙 클럽에 참석하였습니다. 오프라인 모임에 참여하여 다양한 주제에 대한 발표를 듣고, 조별 토론을 통해 의견을 나누었습니다.