우아한형제들의 전사 프론트엔드 라이브러리 제작을 위한 TF로 라이브러리의 생태계를 구축하였습니다.
TF는 각 프론트엔드 팀의 시니어 엔지니어들로 구성되었습니다.

• 프로젝트 리드 및 일정 관리
• 신규 라이브러리 구축

• 워크플로우 구축 및 라이브러리 운영 정책 수립
• React Custom Hook 라이브러리 개발
• 코드커버리지 100% 달성

• React
• Typescript
• Turborepo
• Vite
• Vitest
• Docusaurus
• Storybook
• Gitlab
• AWS

배민사장님 앱은 사장님이 앱을 통해 주문 처리, 배달 설정, 가게 운영에 관련된 설정들을 할 수 있는 서비스입니다.
주요 기능들을 웹뷰로 제공하는 서비스이며, 앱의 주문접수 웹뷰 개발 파트 리더로 프로젝트를 진행하였습니다.

• 프로젝트/테크 리드 및 일정 관리
• 서비스 고도화 및 신규 기능 개발

• 배달의민족 커머스 주문접수 기능 개발
• 배민사장님 앱 가변 폰트 기능 개발
• 배민사장님 앱 웹뷰 브릿지 SDK 구축 및 가이드 문서 제공
• Storybook, MSW을 활용하여 UI 개발 및 검증 편리성 증대
• Merge Request에 프리뷰 기능을 제공하여 시각적 리뷰 환경 도입
• 개발 환경에서 가변폰트 Addon을 제공하여 앱으로부터 받아오는 폰트 크기 값을 모의할 수 있도록 제공
• 개발 환경 개선
• 애플리케이션 번들러 전환 ( 로컬 구동 속도 42배 ↑, CI 빌드 속도 1.3배 ↑)
• 센트리, 그라파나 대시보드 구성으로 인한 모니터링/메트릭 측정 환경 구축
• 불필요하게 사용되고 있던 Redux 관련 코드를 React Query로 전환하여 코드 복잡도 및 사용성 개선
• 웹 성능 개선
• 코드 스플리팅, 트리쉐이킹 등으로 Overall LCP 약 40% 이상 개선 ( 2.x초 → 0.8 ~ 1.2초 )
• 웹서버 정적 리소스 서빙 방식 변경으로 웹서버 부하 개선 ( 약 90% ↓ )
• 코드커버리지 개선 ( 20% → 60% )

• React
• Typescript
• Redux
• Redux Saga
• React Query
• Express
• styled-components
• TS-Pattern
• Gitlab
• Storybook
• MSW
• React Testing Library
• Vitest
• Vite
• AWS
• Turborepo
• Rspress
• tsup
• Slack Bolt

배민상회는 사장님께서 식자재 및 비품을 구매할 수 있는 서비스입니다.
B2B 이커머스 프론트, 기능 관리할 수 있는 어드민, 외부 판매자가 입점하여 사용할 수 있는 셀러 어드민을 운영하였습니다.

• 프로젝트/테크 리드 및 일정 관리
• 서비스 고도화 및 신규 기능 개발

• 판매중개 비지니스 모델 전환
• 외부 판매사들이 사용할 수 있는 셀러 어드민 서비스 구축
• 상품 관리 / 가격 관리 / 카테고리 관리 기능 개발
• 엑셀을 통한 대량 상품 이미지 등록 프로세스 개선 ( API 처리 시간 약 80% ↓ )
• 배민상회 모바일 메인화면 탭 기능 개발
• 배민상회 사용자 맞춤 발주서 기능 개발
• 배민상회 어드민 서비스 확장
• 사내의 유사 서비스를 하나의 플랫폼에서 관리할 수 있도록 확장하여 배민문방구 쇼핑몰을 배민상회 어드민에서 관리할 수 있도록 구현
• 디자인시스템 운영
• 모노레포화를 통하여 쇼핑몰과 어드민 컴포넌트들의 패키지 분리
• 패키지별 버저닝 및 배포 전략 수립
• 개발 환경 개선
• env-launcher라는 라이브러리 제작을 통해 10개 이상인 개발존 환경의 개발/배포 환경 개선
• Redux 관련 레거시 코드를 Redux Toolkit과 React Query로 전환하여 코드 복잡도 개선
• 손쉽게 사용할 수 있는 Infinite Scroll 컴포넌트 개발을 통한 여러 지면의 코드 패턴 정리 및 복잡도 개선
• 웹 성능 개선
• 이미지 레이지 로드 기능 추가로 쇼핑몰 메인 페이지에서만 200여개 이상의 불필요 요청 수 감소

• React
• Typescript
• Next.js
• React Hook Form
• Redux Toolkit
• Redux Saga
• React Query
• Express
• styled-components
• Gitlab
• Storybook
• Jest
• React Testing Library
• Lerna
• MSW
• AWS

일반적인 펀드 서비스와 다르게 오락이 가미된 신규 펀드 매매 서비스를 구축하였습니다.
사내 CBT까지 진행하였지만, 아쉽게도 컴플라이언스 이슈로 인해 서비스가 런칭되지는 못하였습니다.
카카오페이에서 최초로 React Query를 도입하여 개발하였고, 그 후에 사용성 등을 전사에 전파하였습니다.

• 프로젝트/테크 리드 및 일정 관리
• 신규 서비스 구축

• 기술 스택, 컨벤션 정의, 배포, 모니터링 등 신규 개발 환경 구축
• React Query를 활용한 제품 코드 및 테스트 코드 설계
• 지수 차트/펀드 매수/사용자 랭킹 등 다수의 기능 개발
• Storybook, Mirage JS를 활용하여 UI 개발 및 검증 편리성 증대

• React
• React Query
• nivo
• Typescript
• sass
• Jest
• React Testing Library
• Mirage JS
• Storybook
• webpack
• Github

부동산 P2P 투자 서비스를 운영하였습니다.
이 서비스는 카카오톡 앱 내의 카카오페이 서비스 영역, 그리고 카카오페이 앱에서 접근할 수 있었습니다.
아쉽게도 현재는 운영이 종료되었습니다.

• 프로젝트 리드 및 일정 관리
• 서비스 고도화

• React Query를 도입하여 투자내역 목록 지면 코드 복잡도 감소
• 카카오페이 통합웹뷰 SDK 적용
• 제휴사를 위한 카카오페이 통합웹뷰 SDK 브릿지 개발 및 가이드 제공
• 웹뷰 뒤로 가기 시 사용자가 보고 있던 화면이 유지되도록 사용성 개선
• Storybook, Mirage JS를 활용하여 UI 개발 및 검증 편리성 증대
• 개발 환경 개선
• @babel/polyfill, awesome-ts-loader, tslint와 같은 더 이상 유지되지 않는 라이브러리 제거
• babel-loader, core-js, eslint, prettier 설치 및 적용

• React
• React Query
• Typescript
• sass
• Jest
• React Testing Library
• Mirage JS
• Storybook
• webpack
• Github

펀드 매매 서비스를 운영하였습니다.
이 서비스는 카카오톡 앱 내의 카카오페이 서비스 영역, 그리고 카카오페이 앱에서 접근할 수 있었습니다.

• 서비스 고도화

• 단 하나의 파일로만 되어있던 js 코드를 분할 처리하여 Overall LCP 약 30% 개선
• 개발 환경 개선
• @babel/polyfill, awesome-ts-loader, tslint와 같은 더 이상 유지되지 않는 라이브러리 제거
• babel-loader, core-js, eslint, prettier 설치 및 적용

• React
• Typescript
• Mobx
• sass
• Jest
• webpack
• Github

카카오페이 투자 서비스들과 나의 투자 현황을 볼 수 있는 페이지를 운영하였습니다.
이 페이지는 카카오톡 앱 내의 카카오페이 서비스 영역, 그리고 카카오페이 앱의 메인 탭 페이지로 제공되었습니다.

• 프로젝트 리드 및 일정 관리
• 서비스 고도화

• 카카오페이 통합웹뷰 SDK 적용
• 다크 모드 화면 대응
• 개발 환경 개선
• @babel/polyfill, awesome-ts-loader, tslint와 같은 더 이상 유지되지 않는 라이브러리 제거
• babel-loader, core-js, eslint, prettier 설치 및 적용

• React
• Typescript
• sass
• Jest
• webpack
• Github

위버스의 웹 버전을 운영하였습니다.

• 서비스 고도화 및 신규 기능 개발

• 아티스트 커뮤니티 영역의 멤버십 혜택 기능 개발

• React
• Typescript
• Mobx
• styled-components
• i18n
• webpack
• Storybook
• Github

방탄소년단 멤버들을 모티브 한 타이니탄이라는 캐릭터의 상품을 프로모션하는 사이트를 구축하였습니다.
미디어 쿼리를 이용하여 위버스 앱 내 웹뷰 그리고 모바일 & 데스크톱 환경을 지원하였습니다.
글로벌, 미국, 일본 Shop 설정과 그에 따른 다국어도 지원하였습니다.

• 신규 프로모션 구축

• 기술 스택, 컨벤션 정의, 배포 등 신규 개발 환경 구축
• 타이니탄 컨셉, 상품 소개 기능 개발
• 여러 가게와 언어를 지원하고 있는 위버스샵 상품의 딥링크 모듈 개발

• React
• Typescript
• Mobx
• styled-components
• i18n
• webpack
• Github

위버스샵의 어드민을 운영하였습니다.
벡엔드 팀 리소스 부족으로 버그 수정 및 성능 개선 등의 업무를 지원하였습니다.

• 서비스 고도화

• 배송지 권역 설정 지면의 렌더링 성능 개선

• Angular
• webpack

배민상회는 사장님께서 식자재 및 비품을 구매할 수 있는 서비스입니다.
개발팀의 초기 멤버로 합류 후, 고도몰로 운영되고 있었던 서비스를 점진적으로 내재화시켰습니다.
내재화가 완료된 후에는 서비스 관리 어드민 및 판매중개 비지니스 모델 전환을 위해 셀러 어드민을 구축하여 서비스 고도화를 진행하였습니다.
또한, 컴포넌트를 공통으로 사용할 수 있도록 배민상회 디자인 시스템도 구축하였습니다.

• 프로젝트/테크 리드 및 일정 관리
• 서비스 구축 및 신규 기능 개발
• 서비스 고도화

• 기술 스택, 컨벤션 정의, 배포, 모니터링 등 신규 개발 환경 구축
• 배민상회 서비스 자체 플랫폼 구축 ( 고도몰 기능 100% 구현 )
• 메인 / 검색 / 상품목록 및 상세 / 장바구니 / 주문 / 회원 / 나의상회 / 샘플 등 기능 개발
• 모바일, 데스크톱 브라우저를 지원하기 위한 애플리케이션 설계
• 서비스 내재화가 완료되기 전까지 고도몰 운영
• 서비스 고도화를 위한 어드민과 외부 판매사에서 사용할 수 있는 셀러 어드민 구축
• 판매사 관리 / 상품 관리 / 가격 관리 / 주문 관리 / 배송 관리 등 주요 기능 개발
• 단일 소스로 2개의 서비스가 제공되도록 애플리케이션 설계
• 배민상회 디자인 시스템 구축
• Button / Input / Select / Modal / Pagination / Table 등 주요 컴포넌트 개발
• 버저닝 및 배포 전략 수립

• React
• Next.js
• Redux
• Redux Saga
• Typescript
• styled-components
• webpack
• Rollup
• Storybook
• Node.js
• Express
• Github
• AWS

아모레퍼시픽 브랜드들을 소개해 주는 서비스입니다.
회사 재직기간 동안 가장 많이 진행하였던 업무들이었고, 시기에 따라 적절한 기술들을 사용하였습니다.
브라우저를 위한 사용 기술 및 언어에 대한 주요 흐름은 아래와 같고, 부가적으로 필요한 환경들을 구성했었습니다.
ActionScript 3.0 -> jQuery -> AngularJS -> React

ImageMagick, FFmpeg와 같은 라이브러리들은 특수한 프로모션 사이트들에서 이미지와 영상 처리가 필요하여 사용하였습니다.

• 프로젝트 리드 및 일정 관리
• 프로젝트 견적 산출
• 신규 기능 개발

• 라네즈 프로모션 사이트 개발 및 9개국 확산(한국, 중국, 대만, 홍콩, 태국, 베트남, 싱가폴, 말레이시아, 인도네시아)
• 이니스프리 프로모션 사이트 개발
• 프리메라 프로모션 사이트 개발
• VB프로그램 프로모션 사이트 개발
• 헤라 프로모션 사이트 개발
• 한율 프로모션 사이트 개발
• 설화수 프로모션 사이트 개발
• 리리코스 마이크로사이트 개발
• Verite 마이크로사이트 개발
• VitalBeautie 마이크로사이트 개발
• VB프로그램 마이크로사이트 개발
• 아이오페 마이크로사이트 개발
• 유스레볼루션 마이크로사이트 개발

• ActionScript 3.0
• PHP
• Javascript
• jQuery
• ImageMagick
• FFmpeg
• Node.js
• Express
• gulp
• Typescript
• AngularJS
• React
• Redux
• Redux Thunk
• sass
• webpack
• AWS
• Serverless
• Github

하기스 네이처피크닉 프로모션 사이트에서 사용되는 API를 개발하였습니다.
클라이언트로부터 이미지를 전달받아, 이미지에 필터 효과를 적용하고 애니메이션이 들어간 gif를 생성하고 반환해 주었습니다.

• 프로젝트 리드 및 일정 관리
• 프로젝트 견적 산출
• API 기능 개발

• ImageMagick을 활용하여 이미지 필터 모듈 개발
• FFmpeg를 활용하여 gif 생성 모듈 개발
• AWS Lambda와 API Gateway로 API 구성

• FFmpeg
• ImageMagick
• Node.js
• AWS
• Github

제주항공의 프로모션 사이트에서 SNS 무비를 제작할 수 있는 서비스입니다.
사용자 이미지와 페이스북 친구들의 이미지를 업로드하면 자신만의 SNS 무비를 만들 수 있었습니다.

• 신규 기능 개발

• 이미지 필터 모듈 개발
• 영상 크로마키 모듈 개발

• ActionScript 3.0

베트남 하노이 롯데센터 전망대의 대형 스크린에 전시했던 서비스입니다.
사용자가 키오스크에서 입력한 텍스트를 다양한 인터랙션으로 보여주고, 세계 도시들의 전경과 우주 배경 등 다양한 테마가 디스플레이되었습니다.

• 신규 기능 개발

• 만화경 이미지 테마뷰 개발
• 텍스트 파티클 애니메이션 테마뷰 개발

• Cinder
• C++
• OpenGL
• Github

아이데이션부터 앱 출시까지 주도적으로 진행한 서비스입니다.
아침 기상을 위해 알람을 설정하면, 사용자에게 특정 미션을 수행하라는 푸시 알림이 전송되며,
미션 수행 완료 시 해당 푸시 알림이 자동으로 종료되도록 개발했습니다.
광고 없이 중국 지역 애플스토어 유틸리티 카테고리에서 20위를 달성하였고, 앱 제작부터 배포까지의 개발 과정을 모두 혼자 진행하였습니다.

• 서비스 기획 및 개발

• iOS 애플리케이션 아키텍처 설계 및 UI 개발
• 데시벨 측정 모듈 개발
• 가속도센서를 활용한 흔들기 측정 모듈 개발

• Objective-C
• Github

이니스프리 iCF 앱은 이니스프리의 CF를 제작할 수 있는 서비스입니다.
사용자들이 직접 촬영한 영상으로 자신만의 CF를 제작할 수 있고, 이것을 Youtube로 공유할 수 있었습니다.

• 신규 기능 개발

• 영상 갤러리 개발
• Youtube Data API 연동 모듈 개발

• ActionScript 3.0
• Adobe AIR