미리보기

웍스아웃의 프론트엔드 리드로서 웍스아웃 IT 신규 서비스의 개발 및 서버 모니터링과 장애 대응을 담당하고 있습니다. 프로젝트 리드를 맡아 백엔드 개발과 인프라까지 포함한 서비스 개발 전반 과정을 관리하고 개발에 참여합니다. 또한, 기타 부서와 협업하여 웍스아웃 온라인 서비스의 전반적인 기술 부채도 함께 해결하고 있습니다.

• 웍스아웃, 칼하트WIP 웹/앱 유지보수 및 성능 개선

• 웍스아웃, 칼하트WIP 서비스 동시접속 및 주문관리 (실시간 장애대응)

• CRM 마케팅 및 가상 대기열 솔루션 서드파티 기술 도입

• CI / CD workflow 등 서비스 인프라 관리 및 서버 모니터링

• 웍스아웃, OBEY, 휴먼메이드, 팔라스, 퍼킹어썸 등 5개 이상 오프라인 매장 공통 솔루션 개발

자사 도메인 웍스아웃 웹 클라이언트 유지보수와 성능 개선을 담당했습니다. 이벤트 기간 중 급증하는 트래픽을 감당하기 위해 데이터 요청을 최적화하여 서버 부하를 줄였습니다.

• 상품 필터 데이터 요청 로직 개선, 기존 대비 데이터 요청 횟수 80% (평균 20회 -> 4회) 감소

• 검색 친화적인 URL 관리 및 쿼리 파라미터를 이용한 상품 필터 상태 관리 최적화

• 상품 페이지의 컴포넌트 구조 재설계, 불필요한 리렌더링 문제 해결

자사 도메인 칼하트WIP 의 웹 클라이언트 유지보수와 성능개선을 담당했습니다. 효율이 떨어지는 기존의 컴포넌트 구조를 개선하여, 코드의 가독성을 높였습니다. 유저의 경험을 떨어뜨리는 이슈들을 추적하여 제거하는데 노력했습니다.

• 트리쉐이킹을 통해 번들사이즈 경량화, 웹 초기 실행속도를 평균 4.0초에서 2.3초로 개선

• 상품 관련 비즈니스 로직 재구현을 통해 불필요한 데이터 호출 횟수를 평균 15회에서 8회로 개선

• Infinite scroll, Virtual list를 이용한 사용성 개선

• layout shift 발생 구간 파악 및 개선, 상품 페이지 UX 최적화

회사의 프로젝트 구조 개편 후, 차선 순위로 밀려있던 가상 대기열 서비스 재도입의 클라이언트 파트 개발을 도맡아 진행했습니다. 구 프로젝트인 JSP 에 적용되어있던 구조와 다르게 NextJS (SSR) 와 CRA 기반의 React (CSR) 환경에 적합한 구조를 설계하고, 그에 맞추어 개발한 뒤 성공적으로 서비스에 도입하였습니다.

• 이벤트 기반 약 94만 동시 접속 트래픽 발생, 약 5만건 이상의 동시 주문 결제를 안정적으로 수용

• UX를 해치지 않는 대기열 웹앱 프로세스 설계 및 구현

• 메크로 프로그램 및 유저의 비정상 접속 차단 기능 추가 구현

웍스아웃 웹 서비스는 개발과 운영 환경이 분리되어 있었지만, 롤백 시 강제적으로 코드를 푸시해야 하는 상황이 빈번했습니다. 또한, 외주사 2곳과 협업하는 과정에서 배포 환경에 의존한 테스트로 인해 불필요한 리소스 낭비가 발생했습니다. 중간 규모의 팀 환경과 빠른 배포 및 버전 관리가 필요한 웍스아웃 온라인 서비스의 특성을 고려하여, GitLab Flow 기반의 CI/CD 워크플로우를 도입하였습니다. 이에 따라 CI/CD 설계, 구축, 및 문서화 작업 전반을 주도적으로 수행했습니다.

• 스테이징 환경을 추가 구축하여, 각 개발팀의 병렬 개발을 가능하게 했으며, 협업 기간 동안, 배포 환경 의존 테스트의 개발 기간을 30% (주 평균 6시간) 이상 단축

• 빠른 배포와 분리된 테스트 환경 덕분에, 기획 상 추산한 CRM 개발 예상 기간을 2달에서 2주로 단축

• 원활한 버전관리, 커밋 관련 컨벤션 정리로, 제품 버전 히스토리를 깔끔하게 정리하여, 신속한 롤백으로 장애 대응

프로덕트 배포 주기에 맞춰 앱을 빌드하고 배포하는 과정에서 많은 리소스가 소모된다는 문제를 발견했습니다. 이를 해결하기 위해 앱 빌드 환경설정 자동화 작업을 진행했습니다.

결과적으로, 기존에 적용하지 못한 Gitflow 전략을 통해 효율적인 버전 관리를 실현할 수 있었습니다. 또한, 개발과 운영 빌드 환경을 전환할 때 발생하는 사이드 이펙트를 최소화했으며, 각 프로덕트의 빌드 및 배포 시간을 평균 15분에서 2분으로 단축하는 데 성공했습니다.

• Android의 경우, Gradle의 Flavor와 Build Type을 통해 다양한 테스트 환경을 제공하고 있습니다.

• iOS는 Build 및 pre-actions 작업을 통해 네이티브에서 웹뷰의 환경변수를 직접 제어할 수 있도록 설계했습니다.

CRM 마케팅을 위한 푸시 알림 서비스의 신규 개발 및 유지보수를 담당하고 있습니다. CRM 마케터와 긴밀하게 협업하여 과탐지되고 있었던 유저 데이터를 추적 수정 및 정상화하고, 신규 이벤트 타입 추가 등 마케팅에 필요한 개발 작업을 진행합니다. 이 과정에서 Braze & Amplitude 서드파티 모듈 SDK 에 의존하고 있는 앱, 웹, 서버 전반의 배포 심사 사이클도 함께 관리하고 있습니다.

• 월 평균 15만 이상의 과탐지된 세션 제거, CRM 마케팅 데이터 정확도를 개선해 타겟팅 효율 향상

• iOS 앱 Braze 서드파티 SDK 의존성 재구축, Apple Privacy Manifest 이슈 해결

• Braze & Amplitude SDK 버전 상향 마이그레이션 (Android, iOS, React Native)

• Android FCM Credential 이슈 해결

CRM 마케팅 오픈소스인 Braze SDK 에 유저의 비정상 종료 현상을 유발하는 문제가 있다는 것을 확인하였습니다. 해당 이슈로 인한 VOC 대응에 CS팀이 리소스를 과하게 소비하고 있다는 사실을 인지하고, 웍스아웃의 메인 비즈니스중 하나인 선착순 결제 (Raffle, Pre-order) 의 특성상 중요도가 높은 문제라고 판단하여 원인 파악 및 대응을 진행했습니다.
임시 패치버전을 만들어 운영 버전의 이슈를 일시 대응하고, 추후에 오픈소스에 기여한 코드가 반영된 것을 확인하여 Braze SDK 버전 업데이트까지 진행하였습니다.

• 사용자 인식 비정상 종료 발생률 1.79% (5.24K)에서 0% (7건)으로 감소

• CS 팀의 VOC 인입을 일평균 5건 이상 감축하여 리소스 절감 효과 달성

• Braze SDK 네이티브 오픈소스 기여

웍스아웃, OBEY, 휴먼메이드, 팔라스, 퍼킹어썸 등 오프라인 매장 현장 이벤트 대응을 위한 솔루션으로, 이벤트 기간 동안 대기 손님에게 입장 순번을 부여하는 웨이팅 키오스크 React-Native 앱 개발을 전담했습니다. 많은 브랜드 매장에서 사용될 것을 고려하여, 기능 확장에 열려있는 템플릿 구조를 설계하기 위해 노력했습니다.

현장에서 지속적인 모니터링이 불가하다는 특성을 고려해, App Store 가 아닌 Firebase 의 AppTester 를 이용해 보다 신속한 배포 파이프라인을 구축하였습니다. 그로 인한 빠른 장애 대응으로 크리티컬한 이슈없이 이벤트를 마무리한 경험이 있습니다. 다른 키오스크 솔루션에서는 제공되지 않던 해외 국적 유저에 대한 대응을 진행하여, 완성도 높은 다국적 사용자 경험을 제공했습니다.

• 누적 유저 세션 25k 이상을 안정적으로 핸들링

• 빠른 커스터마이징으로, 5곳 이상의 오프라인 매장 키오스크 앱 서비스 제공