Introduce

4년 차 프론트엔드 개발자로 스타트업에서 주로 웹 프로덕트를 개발하고 있습니다. 비즈니스 임팩트와 일관되고 편리한 유저 경험을 중요 시 하고 있습니다.

**React Next.js** **Recoil TanStack Query Emotion** 을 주로 사용하고 있으며 AWS 의 Elastic Beanstalk, EC2, S3, RDS, CloudFront 등의 서비스를 활용하여 하나의 서비스 운영 환경을 구성할 수 있습니다.

Work Experience

<aside> <img src="https://prod-files-secure.s3.us-west-2.amazonaws.com/1412b58f-1bca-4be9-8839-9a8c24e62c8d/f9f7e050-e2fd-4199-b8ed-0aa0a7c6e619/logo_icon_blue.webp" alt="https://prod-files-secure.s3.us-west-2.amazonaws.com/1412b58f-1bca-4be9-8839-9a8c24e62c8d/f9f7e050-e2fd-4199-b8ed-0aa0a7c6e619/logo_icon_blue.webp" width="40px" /> 미스터카멜

(Frontend Developer, 2021. 10 ~ 2023. 09)

중고 명품 통합검색 & 유저 간 거래 및 비교 분석 서비스를 제공하는 C2C 플랫폼 카멜을 운영하는 스타트업입니다. 모바일 웹, 하이브리드 앱 카멜의 신규 기능 개발 및 유지보수, 디자인 시스템 UI 라이브러리 개발을 담당했습니다.

팀의 생산성/프로덕트의 완성도 향상을 위해 디자인 시스템 UI 라이브러리 개발을 시작하였습니다. 더 나아가 구성원, 회사 간의 동반 성장을 기반하기 위해 외부 라이브러리 의존을 최소화하며 내부 라이브러리를 개발하는 등 자체 생태계를 구축하여 견고한 개발팀을 만들고자 시도하였습니다.

</aside>

Project Stack

**Next.js TypeScript Recoil TanStack Query Emotion Storybook Chromatic**

담당 업무

디자인 시스템 UI 라이브러리 개발
- 디자이너와 협업하면서 브랜드 컬러/타이포그래피/다크모드 구현 등 일관된 디자인 원칙을 적용한 디자인 시스템 구축 경험을 쌓았습니다.
- **Emotion** 을 제외하고, 외부 라이브러리에 종속성을 가지지 않도록 컴포넌트를 직접 구현하였습니다.
  - Web API, 이벤트 처리에 대한 이해와 사용법을 숙달할 수 있었습니다.
  - 특정 디자인/기능 요구사항을 충족시킬 수 있는 유연성이 생겼습니다.
  - 컴포넌트를 직접 구현하며 직면하게 되는 문제들을 해결하면서, 문제 해결 능력을 향상 시킬 수 있었습니다.
- 결과적으로 유저에게 일관된 경험을 제공할 수 있게 되었고, 개발팀은 생산성 향상 및 팀이 추구하는 속도와 성과 중심 빠른 도전, 빠른 실패 방식에 큰 기반이 되는 성과를 이루었습니다.
기존 React 기반의 레거시 프로젝트 Next.js 마이그레이션
- 일관된 라우팅, 레이아웃 설계와 관심사 및 공통 컴포넌트 분리 등을 통해 유지보수/확장성/생산성 향상에 기여했습니다.
- 반응형을 고려하여 모바일에 친화적인 UI 를 개발하였습니다.
- SEO를 진행하였습니다.
매물 목록 필터 기능 개발

필터 기능 시연 영상 및 화면
- 사이즈, 새상품급, 가격, 브랜드. 라인, 색상, 플랫폼, 상세옵션 등 매물을 다양하게 조건 별로 필터링 할 수 있는 기능입니다.
- 필터 기능의 요구사항을 이해하고, 상태 관리의 흐름을 설계하여 정리하여 개발을 진행하였습니다. 이에 따라 이후 좋은 유저 경험 제공을 위한 여러가지 실험에 따른 필터 기능 고도화 및 유지보수에 어려움을 겪지 않을 수 있었습니다.
- 페이지 뒤로가기, 앞으로 가기 간의 상태 관리 및 스크롤을 유지하기 위해 쿼리 스트링 파라미터를 기반으로 **atomFamily** 를 활용했습니다.
집단 사진감정 기능 개발
- 집단으로 형성된 카멜 소속 정품 감정 전문가들에게 간편하게 사진 업로드만으로 정/가품 의견을 받을 수 있는 기능입니다.
- 브릿지를 사용하여 네이티브에서 유저가 촬영하거나 선택된 사진을 전달받아 렌더링하는 플로우를 경험하고 숙달했습니다.
매물 등록/수정 기능 구현

매물 등록 기능 시연 영상