미리보기

팀원들의 만족도를 높이기 위해 EoA, 의사결정회의 실행.

모노레포(Turborepo) 를 적용하여 파편화된 코드 통합.

핏펫몰 백오피스, 핏펫몰, 건강 서비스, 커뮤니티 서비스, 플레이 서비스 개발.

고미몰에 제품을 위탁/판매하는 기업 고객들을 위한 파트너센터.

내부 직원들을 위한 파트너센터 어드민 개발.

채권평가 프로그램 개발

고객사 데이터 연동/송수신 프로그램 개발

ABS 평가 및 평가 프로그램 개발을 위한 요건 분석 및 기획 문서 작성

프로젝트: EoA(Essence of Agile) 도입 및 팀 업무 효율 향상

• 배경

  • 불확실성이 높은 개발 환경에서 팀의 생산성을 높이고 업무 방향성을 명확히 하기 위한 방법 필요.

  • 팀원 간 협업 효율성을 향상시키고, 팀원들 스스로가 해야할 일을 더 명확히 인식할 수 있는 환경을 조성하고자 함.

• EoA 도입

  • 매일 아침 EoA 를 진행

  • 각 팀원이 현재 진행 중인 업무를 공유하고, 직면한 불확실성과 장애 요소를 논의.

  • 업무의 우선순위를 정리하며, 팀원들이 높은 집중력을 유지할 수 있도록 지원.

  • "무엇이 가장 중요한가?"에 대한 팀의 공통된 이해를 구축하여 목표 달성에 집중.

• 주간 의사결정 회의

  • 팀원들이 원하는 개발 방향 및 아이디어를 자유롭게 제안하고, 팀 전체가 논의하여 최종 결정을 합의.

  • 결정된 내용을 문서화하여 추후 회고 및 개선 과정에서 참고 자료로 활용.

• 성과 및 효과

  • 업무 효율성 향상

    • 불확실성을 조기에 해결하고 업무 방향을 명확히 설정하여 업무 병목 현상 감소.

    • 다른 팀원이 생각하지 못한 과점으로 도움을 줄 수 있어 상호 유대감 증가.

  • 팀원 만족도 증가

    • 의사결정 과정에 팀원들의 의견이 적극적으로 반영되며, 팀원들이 효능감을 느낄 수 있는 환경 구축.

    • 회고에서 "효능감을 느낀다. 내가 기여했다는 느낌이 든다."는 긍정적 피드백 다수 획득.

• 주요 활동 및 역할:

  • EoA의 개념을 AC2 교육에서 학습 후 팀에 도입.

  • 도입 과정에서 팀원들이 변화에 쉽게 적응할 수 있도록 충분한 설명과 점진적 적용 방식 활용.

  • 회고를 통해 지속적으로 방식을 개선하며, 팀의 개발 문화를 정착시키는 데 기여.

프로젝트: 모노레포 전환을 통한 프론트엔드 개발 환경 개선

• 배경

  • 입사 당시 개발팀은 3개의 독립적인 스쿼드로 나뉘어 각각 별도의 레포지토리에서 개발을 진행.

  • 각 레포는 Next.js 버전, 스타일 라이브러리, 코드 컨벤션 등이 상이하여 동일한 기능을 중복 개발하고 있었으며, 유지보수 비용이 증가하는 문제점이 존재.

  • 구조조정 이후 조직 구조가 개편되면서 스쿼드가 폐지되고 프론트엔드 팀으로 통합되었으며, 4명의 인원이 모든 프론트엔드 개발을 담당.

• 문제 해결 접근 방식

  • 모노레포(Turborepo) 적용 결정

    • 다수의 레포를 유지하며 발생하는 비효율성을 개선하기 위해, 점진적으로 모든 프로젝트를 모노레포로 통합하기로 결정.

  • 단계적 통합 전략

    • 개발 주기가 비교적 빈번하지 않은 레포부터 시작하여 테스트 및 적용을 병행.

    • 비즈니스 로드맵에 영향을 최소화하며 안정적으로 작업을 진행.

    • 초기 성공 사례를 기반으로 나머지 두 개의 레포도 점진적으로 통합.

• 주요 작업 및 성과

  • Next.js 업그레이드

    • 모든 레포의 Next.js 버전을 14.3으로 업그레이드.

  • 공통 패키지 개발

    • 여러 프로젝트에서 중복 사용되던 코드들을 하나의 공통 패키지로 통합.

    • 주요 패키지

      • ESLint, Prettier를 통한 코드 컨벤션 표준화.

      • Date 및 String 처리 유틸리티 함수.

      • Sentry를 활용한 통합 에러 추적 및 모니터링.

  • 운영 효율성 향상

    • 모노레포 도입 후 동일한 기능을 중복 개발하는 사례가 사라졌으며, 코드 유지보수 시간 30% 이상 단축.

    • 하나의 레포에서 작업하다보니 서로의 코드를 볼 기회가 많아져, 자연스럽게 논의, 리뷰가 활발해짐.

    • 릴리스 프로세스가 간소화됨.

프로젝트: 신규 백오피스 개발 및 전환 작업

• 목표: 기존 노후화된 백오피스 시스템을 단계적으로 신규 백오피스로 전환하여 유지보수 효율성을 높이고, 새로운 기능을 추가하며 내부 운영 비용을 절감.

• 기여 항목

  • 기존 백오피스 데이터와 기능 분석을 통해 전환 계획 수립 및 단계별 전환 전략을 실행.

  • 셀러용 백오피스를 새로 설계 및 개발하여, 셀러의 데이터 관리 및 운영 효율성을 극대화.

    • 주요 기능: 상품 등록 및 관리, 배송 정보 관리

    • 셀러 피드백을 반영한 UX/UI 개선으로 사용자 만족도 증대.

  • 운영 및 기획과의 주기적인 리뷰를 통해 요구사항을 명확히 하고 우선순위 설정.

• 성과

  • 기존 백오피스의 유지보수 비용을 줄이고, 신규 백오피스에서 운영 안정성과 편의성을 강화.

  • 내부 운영 비용을 크게 줄임.

기술 스택

• React, Tailwindcss, React-Hook-Form, Zod, TypeScript, Vercel

프로젝트: 핏펫몰 - 반려동물 전용 이커머스 플랫폼 개선

• 프로젝트 개요:

  • 반려동물 용품 구매를 위한 핏펫몰 이커머스 플랫폼의 주요 기능 개선 및 운영 효율성 향상.

  • 노후화된 라이브러리 및 구조를 현대화하여 유지보수성과 성능을 개선.

  • 장바구니, 주문서, 쿠폰 기능을 포함한 핵심 기능의 재개발 및 브랜칭/배포 전략 수립.

• 기여 항목

  • 장바구니, 주문서, 쿠폰 기능 재개발

  • 장바구니

    • 사용자의 구매 편의성을 높이기 위해 UX/UI를 전면 개선.

  • 주문서

    • 복잡한 주문 프로세스를 간소화하고, 오류 발생률 감소를 위한 로직 개선.

    • 프론트에서 처리하고 있던 각종 금액 관련 로직을 백엔드에서 처리할 수 있도록 논의하려 처리.

  • 쿠폰 기능

    • 다양한 쿠폰 조건 및 할인 정책을 지원하는 유연한 로직 구현.

    • 백오피스에서 다양한 종류의 쿠폰을 쉽게 발행할 수 있도록 개발.

      • 정기발행쿠폰, 브랜드 전용 쿠폰, 카테고리 전용 쿠폰 등

• 성과

  • 장바구니 담기 부터 결제 까지 진행되는 퍼널 개선

조직적 기여

1. 브랜칭 및 배포 전략 수립

• 브랜칭 전략 수립 및 자동화

  • 팀원들과 함께 브랜칭 전략을 설계하여 확정된 내용을 빠르게 전파할 수 있었음.

  • 개발, 스테이지, 프로덕션 배포 전략을 명확히 정의하여 릴리스 안정성 확보.

  • 배포 후 Github Action 을 통해 release note 생성, Jira release 생성

• 성과

  • 릴리스 과정에서 발생하던 병목현상 제거, 평균 배포 시간 단축.

  • 원하지 않는 브랜치가 배포되어 롤백하는 상황이 없어짐.

2. 노후화된 라이브러리 최신화 및 디자인 시스템 구축

• Ant Design 제거 및 디자인 시스템 구축:

  • 기존 Ant Design(Antd)으로 작성된 대부분의 공통 컴포넌트를 제거하고, 디자인 시스템에 맞게 기본 컴포넌트를 재구성.

  • 점진적인 교체 방식으로 부작용을 최소화하고 기존 코드와의 호환성 유지.

• 성과:

  • 팀 전체의 디자인 일관성 확보 및 신규 기능 추가 시 개발 속도 증가.

  • 유지보수 비용 감소 및 코드 가독성 향상.

3. Type Generate 적용

• GraphQL 및 REST API에 Type Generate 도입

  • 전사적으로 신규 API 는 REST 방식으로 진행하기로 결정.

  • 백엔드팀에게 API 명세(Open API Spec) 를 생성하여 협업할 것을 요청.

  • API 명세를 이용하여 Type Generate.

  • Request, Response, Enum 등의 타입이 자동 생성되어 코드 작성 시 생산성이 향상됨.

• 성과:

  • API 완성 전에 명세를 이용하여 프론트 작업이 가능해짐.

기술 스택

• Next.js, Styled-Components, GraphQL, React Query, TypeScript, Vercel

프로젝트 1: 건강 커뮤니티 서비스 개발

• 프로젝트 개요

  • 사용자들이 건강 관련 정보를 공유하고 소통할 수 있는 신규 커뮤니티 서비스를 개발.

  • 앱 내 웹뷰(WebView)를 활용하여 서비스 제공, 빠른 개발 및 유지보수를 목표로 함.

프로젝트 2: 반려동물 병원 검색 및 예약 서비스 웹 전환

• 프로젝트 개요

  • 기존에 앱 전용 서비스로 구현되었던 병원 검색 및 예약 기능을 SEO 최적화와 개발 리소스 절감을 위해 웹 기반으로 전환.

  • 앱에서는 새로 개발된 웹 서비스를 웹뷰 형태로 통합하여 일관된 사용자 경험 제공.

• 기여항목

  • Next.js 기반 SEO 최적화:

    • 검색 엔진에서 병원 정보를 손쉽게 탐색할 수 있도록 SSR 적용

    • 주요 페이지(검색 결과, 병원 상세 정보 등)에 기본 SEO 정보와 JSON-LD 를 추가.

  • 리소스 효율화:

    • 웹으로 전환하여 팀의 개발 리소스를 줄이고, 앱과 웹의 기능을 통합하여 유지보수를 간소화.

기술 스택

• Next.js, Emotion, GraphQL, React Query, TypeScript, Vercel

프로젝트 1: 반려동물 활동 서비스 개발

• 프로젝트 개요

  • 반려동물의 활동 내역을 입력하고, 이를 바탕으로 적립금을 획득할 수 있는 서비스 개발.

  • 사용자 참여도를 높이고, 반려동물 관리에 동기를 부여하는 기능 제공.

• 기여항목

  • 급여 기록하기

    • 반려동물의 급여 내역을 간편히 입력하고 저장할 수 있는 기능 구현.

    • 데이터를 기반으로 사용자에게 맞춤형 추천 기능을 제공하는 구조 설계.

  • 체중 재기

    • 반려동물의 체중 변화를 기록 및 추적할 수 있는 UI/UX 개발.

    • 데이터를 시각적으로 표현하여 사용자 경험 향상.

• 성과

  • 사용자 활동 데이터 저장 및 적립금 시스템 안정적으로 연동.

프로젝트 2: 핏펫 사진전 콘테스트 페이지 개발

• 프로젝트 개요

  • 랜덤하게 반려동물 사진을 노출하여 사용자 흥미를 유도하는 콘테스트 페이지 개발.

• 기여항목

  • ISR 적용:

    • 랜덤한 순서로 사진 노출하기 위해 SSG 가 아닌 ISR 적용.

    • 데이터 요청 및 화면 렌더링 지연 최소화로 사용자 경험 개선.

조직적 기여: 프론트엔드 개발 프로세스 개선

• 팀 상황 및 개선 목표

  • 주니어 프론트엔드 개발자로 구성된 팀에 합류하여 개발 효율성과 코드 품질을 높이기 위한 프로세스 개선 주도.

• 기여항목

  • 코드 작성 방식 정착

    • Context API와 Custom Hook을 활용하여 Page/Component 와 비즈니스 로직을 분리하는 구조 도입.

    • 코드 가독성 및 유지보수성을 향상시켜 팀의 개발 생산성을 높임.

  • Next.js에 적합한 폴더/파일 구조 도입

    • 페이지와 관련된 컴포넌트, hook, 유틸리티 등을 같은 폴어에서 관리할 수 있도록 구조화.

  • 코드 컨벤션 가이드 문서 작성

    • 팀원들이 일관된 코드 스타일을 유지할 수 있도록 ESLint와 Prettier 설정 가이드 제공.

  • PR 및 코드 리뷰 문화 정착

    • PR 작성 및 리뷰 프로세스를 표준화하여 협업의 효율성 및 코드 품질 향상.

• 성과

  • 팀 내 코드 일관성 유지 및 리뷰 과정에서의 소통 증가로 개발 속도 향상.

  • 신규 팀원 온보딩 시간 단축 및 팀원들의 업무 만족도 증가.

기술 스택

• 프론트엔드: Next.js, TailwindCSS, React Query, TypeScript, Vercel

• 프로젝트 배경

  • 고미몰에 제품을 위탁/판매하는 기업 고객들을 위한 파트너센터 구축.

    • 주요 기능: 파트너사의 입점, 상품 등록, 판매 이력 대시보드, 정산 프로세스 지원.

    • 빠르게 고객사의 요구를 충족하고 제품 방향성을 설정하기 위해 초기에는 AWS QuickSight를 활용하여 대시보드 중심의 서비스를 오픈.

    • 이후 고객 피드백과 데이터 분석을 기반으로 자체 개발을 통한 기능 고도화를 단계적으로 진행.

  • 내부 직원을 위한 파트너센터 어드민 개발.

    • 고객사에게 제공되는 정보 외에, 내부 운영 및 관리 업무를 지원하는 추가 정보를 표시하기 위한 페이지 설계 및 개발.

• 기여항목

  • AWS QuickSight로 초기 MVP 대시보드를 신속히 구현, 서비스 출시 기간을 단축.

    • 고객 요구사항을 빠르게 수집 및 분석하여 이후 제품 고도화 방향을 명확히 설정.

  • 자체 개발로 파트너센터 기능 고도화

    • 파트너사의 입점 및 상품 등록을 위한 사용자 친화적인 UI/UX 설계.

    • 판매 이력 대시보드에서 실시간 데이터 조회 및 분석 지원.

    • 정산 기능을 통해 매출 및 수익 데이터를 간편하게 확인 가능.

  • 내부 어드민 개발

    • 내부 직원을 위한 추가 데이터 페이지를 구현하여 파트너 센터의 전반적인 관리 및 운영 효율성을 높임.

• 기술 스택

  • React, Vite, TypeScript

  • GraphQL 및 React Query

  • Ant Design

  • react-i18next

  • AWS Amplify

• 성과 지표

  • MVP 대시보드 오픈 후 고객사의 초기 피드백을 통해 제품 방향성을 명확히 설정.

  • 자체 개발로 전환 후 파트너센터 기능 완성도 증가, 고객사의 서비스 이용 편의성 향상.

  • 내부 어드민 도입으로 운영 효율성 개선.