약 5년 간 업박스 클라우드의 프론트엔드 설계 및 운영을 맡았습니다.
더 나은 제품을 만들기 위해 기여한 핵심 경험을 소개합니다.
업박스 클라우드 1.0 → 2.0 대규모 개편을 진행하면서 새로운 코드베이스에서 시작했습니다.
초기 설계하는 기능들은 앞으로 수년간 반복 사용할 공통 컴포넌트와 기능이기 때문에
쉽고 직관적이며 알아서 작동하는 구조에 초점을 두었습니다.
업박스 클라우드 2.0의 프론트엔드 구조를 처음부터 설계했습니다.
적은 공수 대비 효율을 최우선으로 고려하여 기술스택을 비교하고 선정하는 과정을 거쳤습니다.
기존 Vue2 사용 중, 새로운 프레임워크 도입을 위해 React 를 직접 테스트하여 장단점 비교
패턴/규칙화된 구조
쉽고 직관적인 사용법
HTML / CSS 방식 그대로 사용
자유로운 JSX/TSX 구조
풍부한 생태계와 채용시장
빠른 업데이트로 신규 기술 제공
한정된 리소스에서 웹과 모바일 앱을 동시 배포하여 초기 개발 공수와 유지보수 비용을 최소화하기 위해 웹뷰 방식을 선택했습니다.
모바일 개발자 부재
웹과 동시 제공 가능
적은 공수
구글의 강력한 지원
Java 보다 유연한 구조
null 안정성
업박스 클라우드는 어드민, 드라이버, 커스터머 3개 제품을 제공합니다.
동료 개발자와 함께 효율적이고 쉽게 개발할 수 있도록 DX 관점에서 설계했습니다.
공통의 코딩 컨벤션을 수립하고 맞춰 나가면서 코드 일관성을 유지했습니다.
AI의 발전에 따라서 자동화, 분석 등 도움을 받을 수 있는 부분을 적극적으로 찾아 활용했습니다.
개발 프로세스 자체를 스킬로 구성하여 기획 내용의 누락을 찾고, 디자인 시안을 자동으로 생성하였습니다.
반복 작업의 자동화를 넘어, 기획부터 디자인과 개발까지 이어지는 엔드투엔드 AI 기반 개발 프로세스를 설계했습니다.
개발 프로세스를 AI 스킬로 구성하였고, 모든 동료들이 사용할 수 있는 보편화된 프로세스로 발전시켰습니다.
개발 시작영향범위 분석기획에 누락된 기능이나 영향범위를 나열하여 사용자에게 질문
코드 작업AI 생성 코드의 품질 검증 및 비즈니스 로직 적합성 판단을 개발자가 주도
회고
PRD 등 요구사항
컴포넌트 to Code 매핑<TextField />
제품을 개발하며 발생했던 문제들과 저의 생각과 의도, 해결 과정을 공유합니다.
비용과 공수, 퀄리티 등의 조건에서 가장 최적의 해결 방법을 찾으려고 했습니다.
프론트엔드가 SPA 방식으로 작동하여 이전 번들이 캐시가 남아 있는 문제가 발생했습니다.
업데이트 시 캐시 무효화를 유도하여 오동작을 제거했습니다.
모니터링 도구 부재로 발생한 에러 상황에 대해 개발자가 원인을 분석하기 어렵고, 사용자로부터 받은 정보에 의존해야 했습니다.
Datadog 도입을 제안하고 주도적으로 사용하여 에러 추적과 성능 개선, 데이터에 기반한 UI/UX 의사소통을 했습니다.
“Datadog in Seoul 2024” 에서 공식 연사로 사용 사례를 공유하는 좋은 기회를 가졌습니다.
사용하지 않는 필터 항목을 확인하고 다른 필터 항목으로 교체
릴리즈 배포 시 원하는 시점에 완료되지 않는 문제가 있었습니다. CI/CD 구조를 개선하여 정해진 시간에, 정해진 번들만 배포할 수 있는
안정적인 구조로 개선했습니다. 릴리즈 배포에 걸리는 시간은 5분 → 1분 이내로 감소하였습니다.
하나의 앱에 다른 타입의 앱 기능이 포함되어 있는 문제
단일 앱의 변동사항 때문에 모든 앱의 배포가 강제되는 문제
앱별 기능 분리 및 보안 강화
용량 최적화 (약 10%)
원하는 버전을 선택해서 배포 가능
배포 소요 시간 5분 → 1분
백엔드 리소스를 최소한으로 사용하여 안드로이드 모바일 앱에 푸시 알림 기능을 개발해야 했습니다.
푸시 알림 데이터를 관리하지 않고, 프론트엔드에서 푸시 알림 기록을 저장하고 관리하기로 결정하고 아래 구조를 설계했습니다.
FCM
안드로이드 Room 임시저장백그라운드에서는 웹뷰 구동이 안 된 상태이기 때문앱 구동 시 Room 에서
데이터를 로드해 웹뷰로 전달
브라우저 로컬 DB에 저장알림 목록을 웹에 표시하기 위함
폐기물법에 의해 수거(배출) → 운반 → 처리 과정동안 지정된 회사를 통해서만 수행이 강제되며, 어떻게 처리되었는지 정부에 보고해야합니다.
배출장-처리장 매핑 데이터 연결을 통한 규제 대응 및 서비스 핵심 가치 실현하였습니다.
이를 위해 대규모로 데이터 구조와 화면을 개선하였습니다.
폐기물법에 따라 폐기물은 지정된 배출장에서 지정된 처리장으로만 이동해야 합니다.
이 데이터를 투명하게 관리하고 고객에게 제공하는 것이 업박스 클라우드의 핵심 가치입니다.
폐기물의 수거부터 처리까지 추적하기 위한 데이터 연결 작업을 진행했습니다.
수거1수거2수거3수거4
처리1처리2수거1수거2수거3수거4수거5수거6처리1처리2그룹의 개념을 도입하며 복잡한 스케줄 편집 화면을 개선했습니다.
공용 배출장 개념을 도입하여 정산 자동화 비율이 증가했습니다.
코드 규모가 커지면서 생겨나는 복잡하고 반복된 코드를 줄이는 것에 집중했습니다. 대표적으로 Provide / Inject 방식을 적극 활용했습니다.
깊은 depth 의 컴포넌트 간 Props Drilling 을 방지하고 기능은 중앙집중적으로 관리했습니다.
관리자 권한과, 파트너 권한으로 같은 페이지에서 다른 기능을 제공해야했습니다. 화면과 기능, 호출하는 API 를 분기처리했습니다.
자신의 소속 법인으로 고정3단계 순서 편집 기능만 제공할당 가능 차량 제한항목의 추가 삭제 불가처리 작업을 입력할 때 수거를 선택하는 과정이 추가되었습니다. 현장 업무 특성과 기사님의 높은 평균 나이를 고려해 복잡한 입력 화면을 개선해야 했습니다.
PO, 디자이너와 함께 아이디어를 논의하였습니다. 기사님이 한 화면에서 자유롭게 입력을 하는 것보다 정해진 플로우로 차근차근 입력하여 난이도를 낮추는 방향으로 작업했습니다.
한 화면에서 모든 입력 데이터를 한꺼번에 편집
단일 페이지에서 진행하여 복잡도 증가 문제단계를 분리하고, 입력하는 데이터를 제한
입력 대상이 명확하여 집중적으로 입력할 수 있도록 쉽게 설계Step1 - 처리 정보 입력Step2 - 연결할 수거 작업 선택Step3 - 수거량 분배
직접 간헐적 단식을 하기 위해 제작한 Next.js 로 만든 단식 타이머 앱입니다.
1인 개발로 UI의 구성과 기능을 직접 기획하고 정의하였습니다.
AI 에이전트를 페어 프로그래밍 파트너로 활용해 구현 방법과 아이디어를 논의하며 작업했습니다.
안드로이드와 iOS앱이 공개되어 있습니다.
앱을 개발할 때 가장 염두에둔 것은 “쉽다” 입니다.
하루하루 지속해서 사용해야하는만큼
쉽고 편해야 리텐션이 유지된다고 생각했습니다.
가장 중요한 기능은 단식 진행 시간을 표시하는 것이기 때문에, 시간을 가장 눈에 잘 띄도록 구성했습니다.
도형적 요소는 모두 SVG와 canvas 를 이용해 부하를 줄이고 경량화했습니다.
애니메이션은 Gsap 을 활용하여 스크롤 애니메이션을 추가했습니다. SVG 로 구성된 이미지들의 레이어를 Parallax 로 움직여 역동감을 추가했습니다.
단식 성공 여부와 식사 패턴을 확인할 수 있도록
캘린더 형식으로 데이터를 제공합니다.
평소 자주 먹는 시간대를 선정하여 표시합니다.
이 시간대에 푸시 알림을 보내서 식사 기록을 유도합니다.
최근 일주일 내 3회 이상 비슷한 시간대 기록된 케이스를 탐지하도록 하였습니다.
주간 캘린더에서는 원하는 시간을 클릭하여 식사 기록이 가능하도록 편의 기능을 제공했습니다.
공복 목표 시간을 설정하는 것이 주요 기능이기 때문에 가장 앞순서에 배치했습니다.
로컬 알림을 보내 리텐션을 유지하도록 했습니다.
사용자가 직접 ON/OFF가 가능합니다.
사용자의 취향에 맞춰 사용할 수 있도록 귀여운 고양이/까마귀 테마, 다크모드를 제공합니다.