미리보기

React Native로 크리에이터 팬덤 플랫폼인 THEUS 앱을 개발했습니다.
이벤트 예매, 멤버쉽 인앱 결제, 크리에이터 일정 작성 기능을 담당했습니다.

커스텀 갤러리 성능 최적화

• 문제: iCloud에 저장된 고용량 이미지의 썸네일을 변환하고 렌더링하는 과정에서 랜더링 병목 현상과 프레임 드랍이 발생

• 해결 방법:

  • 고용량 썸네일 이미지 변환을 row단위로 나눠 비동기 처리하고, 상태를 갱신하여 JS 실행 부하를 완화

  • 변환된 썸네일을 캐싱하여 반복 랜더링 시 처리 시간 절감

  • 레이지 로딩을 적용하여 갤러리 진입 시 초기 랜더링 대기 시간 단축

• 성과: 30MB이상 고용량 이미지 처리 속도를 평균 5000ms에서 1000ms 미만으로 단축

반복 작업 자동화로 팀 생산성 향상

• 문제: 배포 환경에 맞는 전략이 없어 배포 실수가 잦았고 릴리즈 노트도 수동 작성으로 협업 효율이 떨어짐

• 해결 방법

  • 환경 기반 배포전략을 수립, 시맨틱 버저닝 도입으로 각 배포의 변경사항을 명확히 관리

  • GitLab CI를 활용하여 JIRA 티켓 정보를 기반으로 배포 단계에서 릴리즈 노트를 자동 생성하는 스크립트 작성

  • 자동 git branch 생성 스크립트와 커밋 메시지 구조화 도구를 구현하여 개발 효율성을 높임

• 성과: 개발자의 반복 작업을 줄여 개발 시간 절약, 배포 안정성 확보, 타 팀과의 커뮤니케이션 비용 축소

네비게이션 코드 개선 및 안정성 강화

• 문제: 네비게이션 구조가 스크린 별로 상이해 스크린 중복 정의 및 누락됨. 이로 인해 검증 비용이 증가하고 네비게이션 관련 버그가 자주 리포트됨

• 해결 방법:

  • 모든 네비게이션 스택에서 공통으로 사용하는 스크린과 특정 스택에만 필요한 스크린을 구조적으로 분리

  • 의도한 스택에만 필요한 스크린이 등록되도록 유틸 함수를 도입, 중복 선언 없이 네비게이션 구조 일원화

• 성과: 일관성 없는 네비게이션 동작 문제를 해결하고, 관련 버그 발생이 10% 미만으로 줄어듦. 개발 생산성 향상 및 검증 비용이 절감

React Native 명품 시계 거래 커머스인 Viver 앱을 개발했습니다.

가격제안, 분할결제, 구매입찰 기능을 담당했습니다.

분할결제 기능 개발

• 문제: 고가의 명

  품 시계 거래 특성상 여러 개의 카드 한도를 고려한 분할결제가 필요했으나, PG사

  의 미지원으로 인해 자체 분할결제 시스템을 개발

• 해결 방법:

  • 전역 상태 관리를 통해 결제 퍼널 내 다중 모달 및 스크린 간 분할결제 입력 정보를 유지

  • 상태를 최소 단위로 분리하고, 금액 계산과 같은 파생 로직은 별도로 관리

  • 모달 위치 제약 해소를 위해 EventEmitter 기반 제어 구조 도입, 상태 관리와 UI 제어를 분리

• 성과: 도입 후 하루 결제의 54% 점유하여 매출 향상에 기여, 컴포넌트 모듈화로 여러 화면에서 재사용

무한 스크롤리스트 성능 최적화

• 문제: 구형 안드로이드 기기에서 리스트 가상화 기능이 정상 동작하지 않아 스크롤 성능 저하 발생

• 해결 방법

  • 중첩된 가상화 리스트 구조를 1-depth 리스트로 변경하여 가상화 성능을 개선

  • 랜더링되는 컴포넌트 개수를 50%로 유지하여 메모리 사용량을 줄임

• 성과: 무한 스크롤 시 프레임 드롭이 개선되어 부드러운 사용자 경험 제공

판매 주문 테스트 케이스 작성

• 문제: 판매 주문 상태별로 비지니스 로직과 UI가 달라 QA 과정에서 모든 상태를 수동으로 테스트하기 어려웠음. 이로 인해 상태 변경 시 검증 비용이 증가하고, 예상치 못한 UI 버그가 발생할 가능성이 높았음.

• 해결 방법:

  • 9가지 상태별로 비지니스 로직 유닛 테스트를 작성하여, 판매 주문 로직이 기획 및 비즈니스 요구사항에 맞게 동작하는지 검증

  • 각 상태에서 컴포넌트가 올바르게 렌더링되는지를 확인하기 위해 UI 테스트 추가

• 성과: 배포 시 UI 검증 비용 절감, 상태별 예외 처리 안정성 강화 및 서비스 일관성 유지

구매입찰 기능 개발

• 문제: 판매자와 구매자 간의 서비스 이용도를 활성화하기 위해 구매 입찰 기능을 도입하려 했으나, 개발 규모가 커 MVP 형태로 먼저 사용자 테스트를 진행할 필요가 있었음.

• 해결 방법:

  • 구매 입찰 기능을 추가할 수 있도록 기존 폼 구조를 확장 가능하도록 재설계 하여 구매 제안 MVP를 빠르게 출시

  • 구매 제안 플로우에 사용자 행동 로깅 추가로 데이터 검증 및

    검증된 데이터를 기반으로 정식 구매 입찰 기능을 개발하여 사용자 경험을 확장

  • 구매 입찰 과정에서 결제 실패한 45%의 사용자가 결제 재시도할 수 있도록 플로우를 개선

• 성과:

  • 구매 입찰 도입 이후 일 GMV 16% 상승, 사용자 참여 및 거래 활성화

Lienmall 서비스 개발 및 판매자 Admin 개발

• 장바구니, 주문 처리, 상품 관리 기능 개발

• 기존 React 프로젝트에서 Next.js로 마이그레이션

• React Native와 WebView로 Lienmall 앱 출시 및 FCM 와 notifee 기반 실시간 CS 채팅 기능 구현

Enkor 웹 서비스 개발 및 런칭

• 기존 워드프레스 홈페이지를 Next.js로 전환하여 성능 및 유지보수성 개선

수동으로 관리되던 장비 렌탈 예약을 시스템화하여 더 효율적이고 편리하게 만들기 위해 개발된 웹 서비스입니다.

스택: Next.js, Supabase, Typescript

담당: 프론트 개발, 백엔드 개발, 디자인, 기획

깃허브 https://github.com/Kayaleeeee/rental_assist

서비스: www.rental-assist.co.kr