미리보기

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

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

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

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

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

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

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

프론트 로드맵 수립

• 단기전략

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

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

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

• 장기전략

  • 새로운 프로젝트로 NextJS v15 app router로 전환하여 장고 환경 분리와 서비스 개선

  • 어드민 시스템 개선

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

서버 문제 개선

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

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

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

디자인 시스템 개발

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

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

• Slot를 이용하여 컴포넌트의 기능과 디자인을 다른 컴포넌트로 삽입하여 재사용성 극대화

• Tab 컴포넌트 value, onValueChange를 통해 외부에서 컨트롤 할 수 있도록 기능 확장

FSD 아키텍처 적용

• 파일들의 위치를 설정하기 어렵고 예측이 불가능 하며 각 컴포넌트 별의 책임을 나누기 위하여 적용하였습니다.

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

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

모노레포 환경 구성

• 모노레포를 구성하기 위한 프레임워크 turborepo, nx, 등을 사용하지 않고, 회사의 규모와 프로젝트의 규모를 생각하여 추가적인 의존성을 추가하기보단 패키지매니저의 기본 기능인 pnpm-workspace를 이용한 모노레포 환경 구축

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

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

• 개별적 배포와, 변경된 모든 서비스 배포 github workflow 제작

• EKS환경에서 ArgoCD workflow를 작성하여 배포자동화

• EKS환경에서 ArgoCD PR generator를 이용하여 PR에 달린 서비스명 태그 preview 기능 제작

SEO 최적화

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

• Nextjs generateSiteMaps를 이용하여 필요한 부분에 대해서만 사이트 구조화

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

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

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

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

문서화 작업

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

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

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

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

스타일링 라이브러리 선정

Nextjs App router를 대응하기 위하여 기존 styled-components 대체하기 위해 tailwindcss stylex vanilla-extract pandacss 중 PoC를 진행하여 기존 DX를 사용할 수 있고 다양한 조건에 맞는 vanilla-extract로 이전을 하였습니다

서비스 개선

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

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

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

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

• 웹 성능 최적화

  • 장고에서 리액트를 서빙하는 환경에서 s3를 이용하였지만 cloudfront를 적용하지 않고 직접 s3에 참조하여 성능문제와 비용문제 발생으로 cloudfront를 적용하여 performance를 향상하고 이미지 캐싱을 통한 비용과 속도 개선을 하였습니다

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

사용기술

Django Python Typescript React Pandacss Vite html2pdf

마이페이지 개선

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

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

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

계약서 템플릿

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

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

프론트엔드를 분리하기 이전에 고민을 겪고 있던 미납 문제를 해결하기 위한 프로젝트입니다.

Django환경에서 React를 이용하여 기존 시스템에서 제공할 수 있도록 하여 개발속도를 빠르게 하여 기능을 제공하였습니다

사용 기술

Django, React, Vite, Pandacss, Axios

장고 사용

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

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

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

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

• 결제 시스템 플로우 설계

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

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

쿠키 에러

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

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

디자이너 분이 아이콘을 생성하시고 개발팀에 추가되었다고 알려주시면 React에서 아이콘을 사용하기 위해 svg 컴포넌트를 아이콘이 추가 될 때 마다 작성해주어야해서 커뮤니케이션 비용을 줄이며 자동화를 하기 위해 figma plugin을 만들게 되었습니다.

사용 기술
Figma API Github API

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

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

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

• 블로그 포스팅

• Plugin 보러가기