스타트업부터 대기업까지 다양한 회사에서 개발을 통해 문제를 해결하고 비즈니스 목표를 달성해 왔습니다. 회사 또는 팀 규모에 따라 선택할수 있는 가장 최적의 개발 방법을 도출하고 실행하며 목표한 기한 내에 비즈니스 목표를 달성하고 이를 기반으로 팀과 개인의 성장도 함께 이룰수 있는 순환 구조를 만들고 유지하며 발전해 나가는 것을 좋아합니다.
프로젝트 규모 및 목적에 따라 적절한 아키텍처와 프레임워크를 선택하고 구현합니다.
- Micro Frontend Architecture, Buildtime Or Runtime (Monolithic, Monorepo, Federation)
- Javascript, Typescript
- React, NextJS(10,12 and over 13), Angular, Svelte, Vue
- React Native, Expo
- Tailwind, SCSS, CSS, Storybook
- Vite, Webpack, Rollup
- Vitest, Jest, Cypress, React Testing Library, playwright
Nodejs, PHP 기반의 대표적인 프레임워크를 사용해 MVC 구조를 적용하고 개발합니다.
- Javascript / Typescript : NodeJS, NestJS, Express
- PHP : Codeigniter, Laravel
- Database :MySQL, MariaDB, Redis, Memcached
Cloud 또는 On-premise 환경에서 목적에 맞는 인프라를 구성하고 운영합니다.
- DevOps : EKS, k8s, ECS, Docker run
- GitOps : ArgoCD
- CI/CD : Github Actions, Jenkins
- Monitoring : Datadog, Grafana, Prometheus, Sentry, OpenSearch
- Cloud : AWS, GCP, Azure
- 2004.12.10 - MCommerce관리사 2급(MCS09000231)
- 2004.10.11 - 정보기기운용기능사(04404100554Y)
- 2004.04.30 - 인터넷정보검색사 2급(IIS21002405)
- 2004.04.19 - 정보처리기능사(0M01101408Y)
- 2003.12.22 - 컴퓨터그래픽스운용기능사(03405 1027520)
- 2003.10.30 - 컴퓨터활용능력 2급
- 2003.07.03 - 워드프로세서 1급
경력 및 학력
디지털서비스개발팀의 Frontend 셀에 개발리더 담당. 자사 전자상거래 플랫폼인 아모레몰뿐만 아니라 스킨노트, 커머스커뮤니티 등 OKR 에 필요한 서비스 개발의 프론트 파트를 리드함. 일정관리와 DX, 아키텍처 설계뿐만 아니라 필요에 따라 직접 개발도 진행.
자사 웹툰/소설 오픈 플랫폼 딜리헙 의 모든 프론트 개발을 담당. 유저(독자) 뿐만 아니라 크리에이터(작가) 들을 위한 스토어/스튜디오 두가지 서비스 개발 및 다양한 디바이스를 대응하기 위해 3가지의 break point 로 제작.
독자적인 디자인 시스템을 구축하기 위해 모든 컴포넌트는 오픈소스 없이 자체 구현했으며 소설 작성을 위한 텍스트 에디터 또한 promise mirror 를 통해 직접 개발.
딜리헙에서는 프론트 개발 뿐만이 아닌 nodejs(express) 기반의 백엔드 개발과 aws, gcp 기반의 인프라도 함께 담당하였음.
홈플랫폼추진단 홈플랫폼구축운영팀에 소속되어 LG CNS 와 함께 Homin(홈인) 플랫폼의 프론트 리딩을 담당하였음. 대부분의 개발이 외주사를 통해 이루어졌기에 목적에 맞는 아키텍처 설계와 요구사항에 맞는 최소한의 코드 퀄리티를 보장하기 위한 리뷰 및 개발자/퍼블리셔 교육 진행.
자체 o2o 서비스 카닥의 수리,테크샵(엔진오일), 워시(세차), 몰(쇼핑몰), BO, PO, 결제로비 등 모든 프론트 개발과 전반적인 프론트앤드 아키텍처에 대해 제안하고 논의하는 과정을 통해 직접 yarn workspace 기반의 모노레포 개발환경도 개선함.
자체 인프라 운영/관리를 위한 소프트웨어를 web 기반으로 개발해 Saas, on-premise 환경에서 사용할수 있도록 개발함.
중고차 매매/양수도/경매 등의 o2o 서비스를 웹/하이브리드 앱 으로 개발했고 백앤드는 php 기반의 코드로 작성하였으며 프론트앤드는 angular 로 개발했으며 서비스 특성상 Android/iOS 앱이 반드시 필요했기에 cordova 기반의 Framework7 을 통해 하이브리드 앱 형태로 개발함.
스타트업의 극 초기 첫번째 개발자로 합류해 자체 IoT 제품인 "태양광 압축 쓰레기통" 의 웹 개발을 담당하였음. 야외에 설치되는 제품에서 http 프로토콜 기반으로 통신한 이후부터 유저가 제품의 상태를 앱/웹 으로 확인할수 있는 단계까지의 모든 개발을 진행했으며 제품의 알파 버전부터 1.0버전까지 개발 진행함.
- 2009.03 - 2013.08 : 강남대학교 컴퓨터미디어공학부 졸업(학사)
- 2007.03 - 2009.02 : 세한대학교 컴퓨터교육과 수료
- 2006.03 ~ 2006.09 : 연세디지털게임교육원 게임기획 수료
- 2003.03 ~ 2006.02 : 태원고등학교 졸업
프로젝트 경험
아모레퍼시픽 / AMORE PACIFIC
주문 페이지 2차
1차 목표 달성 이후 회원 케이스에서도 동일한 경험을 주기 위해 후속 개발이 진행되었습니다.
사용 기술
typescript, react19, nextjs15, tailwind, storybook, docker
역할
- 프로젝트 개발 총괄
- VOC 대응 등 모니터링 계획 수립
- 결제 프로세스 및 에러 케이스 발생 시 대응 방안 수립
성과
- 로그 수집 및 분석을 통해 버그 발생시 문제가 되는 부분을 정확히 파악할수 있게 되었습니다.
- 데이터독을 활용해 웹 바이탈을 측정하고 메모리 누수 등 문제를 발견하고 해결할수 있는 기초 마련.
- 주문과 관련된 모든 페이지 내재화 완료.
2024 겨울 아모레 세일 페스타
라이브방송과 연계된 쿠폰 feature 를 추가하였습니다. 라이브방송 영상에서 상품과 관련된 쿠폰을 발급하고 쿠폰을 사용할수 있는 기능을 추가하였고 데이터독을 활용해 VOC 유입 전 미리 대응할수 있도록 시스템을 구성하였습니 다.
사용 기술
typescript, react17, nextjs10, datadog
역할
- 라이브방송 영상에서 상품고 관련된 쿠폰을 발급하고 쿠폰을 사용할수 있는 기능을 추가
- 데이터독을 활용해 VOC 유입 전 미리 대응할수 있도록 시스템을 구성
성과
- 라이브방송에서 별도 쿠폰함으로 이동할 필요 없이 쿠폰을 발급받을수 있어 쿠폰 발급 프로세스가 간소화되었습니다.
- 유저 플로우 최적화로 보다 정확한 구매 전환율 측정 가능
주문 페이지 1차
외주사에서 관리된 주문/완료 페이지에 대한 내재화 요건을 달성하기 위해 기존 nextjs10 환경이 아닌 사내 devops 환경에서 운영되는 EKS 로 이관을 준비했고 next 최신 버전인 14를 이용해 모던한 프로젝트를 구성하고 모든 기능을 한번에 이관할수 없기에 비회원 구매 케이스를 우선해 1차 목표 스코프를 정하였습니다.
사용 기술
typescript, react18, nextjs14, tailwind, storybook, docker
역할
- 프로젝트 개발 총괄
- 새로운 주문 프론트앤드 프로젝트 아키텍처 설계
- tailwind 기반 디자인시스템 설계
성과
- DevOps 환경에서 운영되는 EKS 로 이관 및 배포 환경 구성
- nextjs14 기반 및 모던한 프론트앤드 프로젝트 구성
Web/Native 인터페이스 리팩토링
아모레몰의 Web은 Native App(iOS, Android) 에서 Webview 형태로 사용되지만 각 작업자별로 현재 페이지 상태와 앱의 상태를 일치시키는 코드가 파편화 되어 있고 상황에 따라 제어권이 Web/Android/iOS 에서 각각 가지고 있어 문제가 발생시 어느 부분에서 잘못된 함수를 호출하는지 알수가 없는 문제가 다수 발생하였습니다. 이 문제를 해결하기 위해 Web-Native 간 인터페이스를 명령적이 아닌 선언적으로 구성하고 협력 외주사에게도 가이드 문서가 아닌 javascript library 를 제공하는 방향으로 진행하였습니다.
사용 기술
javascript, typescript, react17, nextjs10
역할
- Web-Native 인터페이스 라이브러리 설계
- 라이브러리 React Hook, pure javascript 각각 작성
성과
- 매주 발생하는 동일한 원인의 다른 버그 발생률 Zero 달성
- 동일한 기능의 라이브러리를 외주사에 제공하여 동일한 기능을 구현하는 시간 단축
데이터독(DataDog) 도입
로그 수집과 분석 장애 대응등 전반적인 모니터링을 위해 데이터독을 도입하였고 고객 VOC 유입 전 미리 대응할수 있도록 시스템을 구성하고 특정 유저의 행동을 분석해 아모레몰을 탐색하는 유저가 어떤 행동을 많이 하고 어디에서 이탈하는지 확인해 제품 고도화를 위해 무엇을 더 해야 하는지 발견하였습니다.
사용 기술
DataDog
성과
- 웹 바이탈 데이터 수집 및 분석 환경 구성해 성능적으로 취약한 부분에 대응할수 있도록 기술적 기반 마련.
- 클라이언트 에러 발생 시 웹훅을 통해 알림 추가해 대응 시간 단축.
2024 여름 아모레 세일 페스타
1년에 2번 진행하는 아모레 세일 페스타에서 사용될 새로운 feature 인 "럭키드로우" 와 "멤버십플러스 이용권" 을 추가 개발했습니다. 이 기능을 통해 새로운 유저가 행사를 좀더 잘 즐기고 아모레몰의 멤버십플러스를 짧은 기간동안 체험해볼수 있는 기능이 추가되었습니다.
사용 기술
Nextj10, React17, Redux
역할
- 상품상세 페이지 업데이트 및 럭키드로우 관련 페이지 추가
- 멤버십플러스 이용권 조회/사용/갱신/취소 등 관리 페이지 추가
성과
- 럭키드로우를 통해 운영에서 새로운 방식의 BM 활용 가능하게 되었습니다.
- 멤버십플러스를 이용권 형태로 추가해 다양한 제휴사들의 혜택을 추가할수 있게 되었습니다.
- 지난 선물하기 기능을 통해 신규 유저를 기존 유저를 통해 확보하는 루트가 추가되었습니다.
디지털 분석 도구 고도화
google analytic 3 지원 종료로 인해 GA4 로 마이그레이션을 진행해야 하는 상황에서 기존 파편화 되어 관리되던 분석 도구들을 하나의 모듈로 묶어 관리하는 작업도 같이 병행했습니다. 이 작업을 통해 분석 도구들을 통합하고 관리하기 쉽게 만들었으며, 이를 통해 데이터 분석 및 통계를 보다 효율적으로 수행할수 있게 되었습니다.
사용 기술
Nextj10, React17, GA3, GA4, GTM, aiaqua
역할
- 페이스북 픽셀, 카카오 픽셀, 네이버 추적 도구 등 타 도구들을 GTM 을 통해 주입할수 있도록 가이드 제공
- GA, GTM 관련 React 컴포넌트 및 훅 작성
성과
- 기존 파편화 되어 관리되던 분석 도구들을 하나의 모듈로 묶어 관리하기 쉽게 만들었습니다.
- GA4 를 통해 구성원들이 정확한 데이터 분석해 추후 매출 분석이 더 용이하게 가능하였음.
아모레몰 선물하기
단일 상품에 대해 선물할수 있는 새로운 feature 가 추가되었습니다. 구매자는 수신자 정보를 입력해 상품을 구매할수 있고 수신자는 새로 추가된 페이지를 통해 상품을 배송받을수 있습니다. 이 기능을 통해 신규 유저를 기존 유저를 통해 확보하는 루트가 추가되었습니다.
사용 기술
Nextjs10, React17, Typescript, Redux
역할
- 선물하기 모듈 설계
- 모니터링 방안 수립
성과
- 선물받기를 통해 신규 유저가 되는 경로가 추가되어 신규 유저 확보 효과 있음
- 선물 수요가 많은 시즌에 선물하기 기능을 활용할수 있을 것으로 기대
- 모니터링 방안 수립으로 문제 발생 시 대응 시간 단축
딜리헙
Google Cloud Platform 마이그레이션 from AWS
퇴사 이후 진행된 프로젝트로 이전 AWS k8s 환경의 비용 문제로 인해 GCP docker run (컨테이너) 환경으로 마이그레이션 하는 작업을 진행했습니다.
사용 기술
k8s, aws, gcp
역할
- 기존 k8s 환경 분석
- 각 프로젝트별 docker run 필요 파일 및 환경변수 생성
- AWS k8s 에서 GCP docker run 으로 수동 마이그레이션 진행
성과
- 비용 절감으로 인해 매달 비용문제 해결
- 소수 인원으로 쉽게 관리할수 있도록 마이그레이션 진행
프론트앤드 리팩토링
1차 개발을 마친 상태에서 프론트앤드 리팩토링을 진행하였습니다. 이전 JS, Webpack 와 같은 기술을 사용하지 않고 최신 기술과 트렌드를 도입하기 위해 Typescript + Vite 를 도입하였으며, 좀더 안정적인 개발을 위해 테스트 도구인 Vitest 도 함께 적용하였습니다. 이번 프로젝트를 진행하면서 이전 Javascript 코드를 모두 Typescript 로 포팅하고 모듈과 컴포넌트들은 모두 테스트 코드를 작성했을 뿐만 아니라 컴포넌트의 경우 스토리북까지 작성해 보다 코드의 안정성과 재사용성을 향상시켰습니다.
사용 기술
Typescript, Vite, Vitest, Tailwind, SCSS, Storybook
역할
- 전반적인 프로잭트 구조 설계
- 배포 및 브랜치 전략 수립
- 기존 javascript 코드 typescript 로 포팅
성과
- 빌드 속도 약 2~3배 이상 감소
- 테스트 코드 작성으로 안정성 향상
- 타입스크립트 적용으로 코드 안정성 향상
텍스트 에디터 및 뷰어 개발
Promise Mirror 를 활용해 100% 확장 가능한 텍스트 에디터를 개발하였고 이를 스튜디오 프로젝트에 적용하였습니다. 그리고 이를 기반으로 한 뷰어도 제작해 스토어 프로젝트에 함께 적용하였습니다.
사용 기술
React, Webpack, Javascript, tailwind, SCSS, Promise Mirror
역할
- Promise Mirror 프레임워크 분석 및 구조화
- 텍스트 에디터 및 뷰어 개발
- 뷰어에 댓글 기능 추가
성과
- 웹소설도 게재할수 있도록 서비스 확장
- Promise Mirror 를 통해 완성형이 아닌 조합형 에디터 구현해 추후 기능 확장이 용이하도록 함
갤러리 개발
일러스트와 같은 다양한 이미지를 게시하고 이를 통해 유저들끼리 소통할수 있는 기능을 구현하였습니다.
사용 기술
React, Webpack, Javascript, tailwind, SCSS
역할
- 이미지 업로드 및 간단한 편집기능 개발
- 이미지 뷰 를 위한 Feed 컴포넌트 개발
- 댓글 기능 추가
- 도네이션(Meow) 기능 추가
성과
- 일러스트 게재 기능 추가
- 도네이션(Meow) 을 통해 새로운 BM 도입
iOS App 출시
안드로이드 앱을 출시한 경험을 바탕으로 iOS 앱도 동일한 아키텍쳐를 활용해 개발하였습니다. 다만 iOS 앱 출시를 위해서는 기존 애플로그인 서드파티 로그인을 지원해야 했기에 이 기능도 함께 구현하였습니다.
사용 기술
React, Webpack, Javascript, tailwind, SCSS, JS Interface
역할
- Apple Login 구현
- 기존 로직에서 iOS 관련 스펙이 동작하도록 구조 변경 및 구현
Product 기능 추가
디지털 컨텐츠(폰트, 이미지 등 기타 에셋)들을 판매할수 있는 서 비스가 스토어와 스튜디오에 각각 구현되었습니다. 단 이번 스펙에서 좀더 구체적인 디스크립션을 작성하기 위해 에디터가 필요하였고 완성형 에디터인 Quill 을 사용해 구현하였습니다.
사용 기술
React, Webpack, Javascript, tailwind, SCSS, Quill Editor
역할
- Quill 에디터를 React 에서 사용하기 위해 컴포넌트 작성
- 프로덕트 기능에 필요한 추가 컴포넌트, 페이지, 훅 구현
성과
- 완성형 에디터를 통해 유저가 좀더 풍부한 컨텐츠를 게재할수 있도록 함
- 디지털 상품을 게시하고 판매할수 있는 새로운 BM 추가
Android App 출시
Base 로 설계된 안드로이드 앱에 웹뷰 형태로 현재 만들어진 웹앱을 렌더링하기로 결정하였고, 현재 웹뷰에서 필요한 데이터를 네이티브 앱과 연동하기 위해 JS Interface 를 설계하고 이를 적용하였습니다.
사용 기술
JS Interface, React, Webpack, Javascript, tailwind, SCSS
역할
- JS interface 정의
- Android 앱 동작성 테스트 및 앱 전용 페이지 구현
스토어/스튜디오 추가 업데이트
최초 스토어, 스튜디오 개발 이후 다음 기능들이 추가되었습니다. 주로 개발된 기능들을 실제로 유저가 얼만큼 잘 사용하고 있는지 측정하거나 테스트할수 있는 외부 라이브러리를 설치하고 이 프로젝트에 맞게 적절히 적용하는 업무를 맡았고 이전 개발된 갤러리에 도네이션 기능을 추가하였습니다.
사용 기술
React, Webpack, Javascript, tailwind, SCSS
역할
- 갤러리 : 일러스트를 포스팅하고 도네이션을 받을수 있는 기능
- 애널리틱스 툴 적용 : GTM, Mixpanel
- 스토어 홈/스튜디오 랜딩 페이지 개발
- Hackle 사용한 A/B 테스트 진행
스토어 웹 개발
창작자가 만든 창작물을 공개하기 위한 웹앱으로 다음과 같은 기능들을 개발하였습니다. 이 프로젝트 역시 모든 컴포넌트/모듈 개발과 디자인 시스템 구현 작업을 담당하고 리딩도 맡아 진행하였습니다.
사용 기술
React, Webpack, Javascript, tailwind, SCSS
역할
- 웹툰 뷰어 개발
- 디자인 시스템 개발
- 커스터마이제이션 뷰어 개발
- 디자인 시스템 개발
- 알림 등 유저와의 상호작용 시스템 개발
- 서드파티(카카오, 네이버, 페이스북) 로그인 연동
스튜디오 웹 개발
창작자를 위한 웹앱으로 다음과 같은 기능을 지원하였으며 모든 컴포넌트/모듈 개발과 디자인 스펙 구현 작업을 담당하고 프로젝트가 원활히 진행될수 있도록 리딩도 맡아 진행하였습니다.
사용 기술
React, Webpack, Javascript, tailwind, SCSS, React Hook Form
역할
- 웹툰 생성 위자드 개발
- 웹툰 에디터 개발
- 폼을 많이 사용해야 했기에 React Hook Form 라이브러리를 적용
- 커스터마제이션(유저가 자신의 페이지를 꾸밀수 있는 기능) 에디터 개발
- 디자인 시스템 개발
- 서드파티(카카오, 네이버, 페이스북) 로그인 연동
LGU+
Home-in 프론트앤드 프로젝트
프로젝트가 진행되던 도중 합류하게 되었고 퍼블리싱 개발과 프론트앤드 개발이 서로 유기적이지 못한 부분을 발견이 이 부분에 대한 가이드를 수립하고 vuejs 로 프론트앤드 개발을 좀더 원활히 진행하기 위해 교육 진행하고 지체되고 있던 프론트 개발 진행상황을 정상화하였으며 웹뷰 기반의 앱 개발을 할수 있도록 환경을 구성하였습니다.
사용 기술
VueJS, JS interface, Javascript, Tailwind
역할
- 프론트앤드 개발 총괄
- 퍼블리셔 대상 VueJS 컴포넌트 구현 교육 진행
- iOS, Android 진행상황 체크 및 웹 인터페이스 개발 테스트 진행
- WEB(PC, Mobile) : 1개의 로직(index)에서 다른 UI(PC, Mobile) 을 렌더링할수 있는 구조로 개선
- 웹뷰 기반 iOS, Android 개발환경 구축
주식회사 카닥
카닥몰 3차 업데이트
마이페이지, 장바구니, 체크아웃 페이지 등 워드프레스에 의존하고 있는 페이지들을 카닥몰 앱에서 스펙에 맞는 디자인으로 구현하기 위해 React 로 디자인을 구현하였고 워드프레스의 API 를 이용하지 않고 DB에서 직접 필요한 데이터를 가져와 Express 로 앤드포인트를 만들어 서버와 클라이언트가 데이터를 주고 받았습니다.
사용 기술
React, Express, SCSS, Javascript, Nodejs
역할
- 장바구니, 결제하기 페이지 등 주요 페이지 로드 속도 대폭 감소
카닥 커뮤니티 탭 구현
카닥 앱에 새로운 탭인 "커뮤니티" 를 추가해야 하는 미션이 있었고 기존 유저 정보와 마이카를 이용해야 했기에 최초 요구사항을 정리한 뒤 그에 맞춰 클라이언트, 서버 구조를 직접 설계하고 팀원들과 확정해 앱, 백앤드, 프론트앤드 개발자가 서로 의존성 없이 작업하는 것을 목표로 빠르게 진행하였습니다.
사용 기술
React, SCSS
역할
- 프로젝트 리딩
- 각 환경(서버, 웹, 앱) 데이터 구조와 인터페이스 정의
성과
- 카닥 앱에 커뮤니티 탭을 통해 데일리 접속자 증가
- 보유/관심차종 을 통해 게시물을 확인할수 있도록 설계해 유저의 관심도를 높이고 사업적인 데이터도 활용할수 있도록 설계
cardoc react generator 업데이트
월초에 제작했던 cg 커맨드는 컨테이너와 컴포넌트만 생성이 가능하였으나 기능을 추가로 개선해 페이지, 엘리먼트 등도 이 커맨드를 이용해 자동으로 생성할수 있도록 추가하였고 헤당 프로젝트가 JS ,TS 인지를 옵션으로 부여받았지만 프로젝트 루트폴더의 index.js or ts 를 보고 자동으로 이 프로젝트의 메인 언어를 파악하는 방식으로 변경하였습니다. 그리고 각 컴포넌트 타입에 따라 필요한 패키지를 미리 첨부해두는 식으로 작업자의 피로를 덜 수 있는 방향으로 업데이트하였습니다.
사용 기술
NodeJS, Yarn Workspace
역할
- ts, js 를 옵션으로 받지만 자동으로 감지해 생성하도록 변경
- ReadME 업데이트 및 프론트 개발자들에게 교육 진행
마이카 프로필 업데이트
마이카의 프로필 페이지를 도입할 필요성이 있기에 새로운 UI를 적용하였고 기존 레거시 코드를 개선하는 작업도 함께 이루어졌습니다. 기존에는 page 를 메인으로 두고 하단에 추가적인 페이지를 만드는 방식으로 구현되었지만 몰 작업때 완전히 정착된 컨테이너 패턴을 적용해 레거시와 독립된 형태로 구성하였습니다.
사용 기술
React, Context, Hooks, SCSS
역할
- 컨테이너 패턴 적용
- callback 패턴 적용 및 DeBounce 개념 도입해 불필요한 렌더링 제거
카닥몰 2차 업데이트
카닥몰 최초 업데이트 이후 후속으로 진행된 프로젝트입니다. 기존 디자인 패턴을 유지하면서 상품 검색,목록,상세,후기 및 상품문의 등 장바구니 이전 단계까지의 흐름을 구현하였고 이 부분을 1개의 컨테이너로 구현하였습니다.
사용 기술
React, Typescript, Context, Hooks, SCSS
역할
- 상품/전시 관련 페이지 개발
- 상태 및 코드 최적화를 통해 불필요한 렌더링 제거
- 컨테이너 패턴 적용해 View 와 비즈니스 로직 분리
카닥몰 첫 랜딩 페이지 프로젝트
통합결제 프로젝트와 병행으로 진행되었으며 기존 워드프레스의 view 를 사용하지 않 고 프론트앤드 사이드는 별도로 작성해 빠른 페이지 로딩과 카닥에서 제공하는 UI/UX 를 첫 페이지에 도입하는 프로젝트입니다.
사용 기술
React, Typescript, Context, Hooks, SCSS
역할
- 서버에서 준 타입으로 동적인 컴포넌트를 사용하도록 구성
- 컴포넌트 최적화를 위해 state, staticState 등의 개념 분리
- callback 패턴으로 컨테이너 컴포넌트간 통신규약 설정 후 내부 개발자 교육 진행
카닥 통합결제, 신용카드등록 프로젝트
각 서비스별로 독립적으로 작용했던 결제창을 하나로 통합하고, 유저가 자신의 신용카드를 직접 등록해 반복적으로 사용할수 있도록 추가되었습니다. 그리고 새롭게 템플릿 패턴을 통해 반복적인 페이지의 레이아웃을 컴포넌트화 하는 작업도 진행되었습니다.
사용 기술
React, Typescript, Context, Hooks
역할
- 프로젝트 개발 리드
- 컨테이너 패턴으로 두가지 기능을 효율적으로 작성
- 카드번호와 같이 특정 패턴을 정규화하도록 input masking hook 작성
- 전역, 지역 Context 를 활용해 props 깊이와 리렌더링 컨트롤
성과
- 기존 서비스 및 추가되는 서비스에서도 새로운 결제 로비를 통해 결제할수 있도록 로직 일원화
- 결제수단 추가/삭제시 한 번의 작업으로 모든 서비스에 적용 가능하도록 설계
- 레거시 코드를 활용한 방법으로 빠르고 안정성 높은 개발
프론트앤드 모든 프로젝트 모노레포(Monorepo) 전환 및 CI/CD 개선
더 빠르고 효율적인 작업을 위해, MSA + 모놀리식 으로 구성된 지금의 방식을 yarn workspace 를 활용해 모노레포 환경으로 다시 구성하였습니다. 구상했던 방식을 12월 외부 세미나에서 TOSS팀의 개발방식에 대해 이야기를 듣고 난 뒤 좀 더 확신하게 되었고 이를 실제 구현하였으며 이를 도입하면서 젠킨스가 아닌 github Action 으로 CI/CD 툴을 변경하였습니다. 이 시점부터 모든 프론트앤드 프로젝트는 도커로 전환되었습니다. 그리고 쉘스크립트와 cardoc-react-generator(cg cli) 를 만들어 모든 개발자가 동일한 컨벤션을 가질 수 있도록 툴로써 제공하였습니다.
사용 기술
AWS, Github Action, Docker, Yarn, Yarn Workspace
역할
- ./deploy.sh 쉘스크립트를 사용해 모든 production 배포 로직을 시스템화
- 1개 저장소에 다중 프로젝트 구조를 갖는 모노레포 구성
- cardoc-react-generator cli 프로젝트로 생성해 코드 컨벤션 통일
- 오래되고 정확하지 않은 README 재정리
- 프론트앤드 팀 내 개발자 교육
- 변경된 사항을 다른 팀과 공유하기 위해 슬라이드 제작 및 세미나 진행
성과
- 모노레포 구성으로 모든 프로젝트 배포 시간 단축
- 젠킨스 대신 github Action 으로 CI/CD 툴 변경
- 약 50개 이상의 저장소를 10개 이하로 줄임
테크샵, 워시, admin 툴 업데이트
카닥의 테크샵(엔진오일), 워시(세차) 서비스는 모두 100% 웹뷰로만 구성되어 있습니다. 그리고 이 웹뷰는 네이티브 앱과 JS인터페이스를 통해 긴밀히 통신하기에 이 부분에 유의해야 하고 매우 안 좋은 구조의 리액트 패턴으로 작업되어 있기에 이 부분도 일부 함께 개선되었습니다.
사용 기술
React, NextJS, Typescript, React Hooks, React Router, Redux, Context
역할
- 불필요한 의존성 해제
- Function 컴포넌트 사용 지향
- 공통 디자인 컴포넌트, 엘리먼트 작성
카닥 4.0 업데이트
카닥 4.0에서는 모든 웹뷰의 디자인 업데이트와 새로 추가된 쿠폰함, 쇼핑탭 및 쿠폰과의 연동 작업이 진행되었습니다.
사용 기술
React, NextJS, Typescript ,React Hooks, React Router, Context, Story Book
역할
- 컨테이너 패턴 적용
- 커스텀 화면전환 애니메이션 적용
- 공통된 행동을 Hooks 로 작성
- Function 컴포넌트 사용 지향
- 스토리북을 통한 컴포넌트 공유
카닥 앱 마이카 업데이트
앱 사용자들을 위해 자신의 차량을 등록하고, 이미 개발된 카닥의 모든 서비스를 이용할 수 있는 마이카 기능 업데이트 작업입니다. 이 작업은 Android, iOS 에서 WebView 로 사용해야 하기 때문에 그것을 전제 조건으로 개발하였고 내부 운영을 위한 백오피스도 함께 업데이트 되었습니다.
사용 기술
React, React Hooks, React Router, Context
역할
- 웹뷰를 위한 모놀리식(Monolithic) 프로젝트 구성
- 컨테이너 패턴 적용
- 커스텀 화면전환 애니메이션 적용
- 공통된 행동을 Hooks 로 작성
- Function 컴포넌트 사용 지향
카닥 앱 React Native POC
카닥은 모바일 어플리케이션을 Native + WebView 를 사용해 제작하고 있었는데 내부적인 테스트를 위해 React Native 를 활용하여 간단하게 현재의 앱의 일부 기능을 샘플로 제작하였습니다.
사용 기술
React Native, Expo, React, Adobe XD
역할
- Adobe XD 로 개발 목표와 프로토타입 제작
- 최초 Boiler Plate 작성
- 화면 전환 및 기본 레이아웃 구성
- 사진 선택 및 최적화 등 기본적인 견적요청 기능 작성
오픈소스컨설팅
Play-ce RoRo Admin 업데이트
일반 유저 사이드 작업을 끝내고 관리자를 위한 대시보드와 별도의 콘솔을 작업하였습니다.
사용 기술
React, Styled Component, React Router, Redux, Context, Code Spliting
역할
- Sketch 로 기본 기획 및 프로토타입 작성
- 컨테이너 패턴 적용
- Google Material Design 가이드 준수
- 프론트앤드 개발환경 구성 및 기능 구현
- Context API 사용
- Code Spliting 등 으로 앱 최적화
- Jest 기반 테스트 환경 구성
Play-ce RoRo 웹 콘솔 개발
기존 On Premise 서버 환경을 AWS 와 같은 Cloud 환경으로 자동 전환해주는 프로젝트로 웹 콘솔을 통해 서버, 클라우드 인증정보 등을 입력하면 기존 서버의 환경을 분석해 클라우드로 자동 마이그레이션이 가능한 툴입니다. 현재는 디자인 업데이트와 관리자 콘솔을 작업하고 있습니다.
사용 기술
React, Styled Component, React Router, Mobx, Redux, AWS Angular4
역할
- Adobe XD 로 기본 기획 및 프로토타입 작성
- Photoshop, Illustrator 활용해 기본 샘플 로고 및 디자인파일 작성
- 프론트앤드 개발환경 구성 및 기능 구현
- Redux 컴포넌트 기반 구조 개발
- Redux 기반 Flux 구조 작성
- Code Spliting 등 으로 앱 최적화
- Jest 기반 테스트 환경 구성
- Anglar4 에서 React 로 리팩토링
공식 제품 소개 페이지 개발
사내에서 개발한 제품을 소개하기 위한 Static 웹사이트입니다. 제품의 종류와 소개 그리고 한/영 번역과 markdown blog 로 제품관련 소식을 전달했습니다.
사용 기술
gatsby, Styled Component
역할
- Adobe XD 로 기본 기획 및 프로트타입 작성
- Photoshop, Illustrator 활용해 기본 샘플 로고 및 디자인파일 작성
- 프론트앤드 개발환경 구성 및 기능 구현
- React 컴포넌트 기반 구조 개발
박차컴퍼니
차팡 모바일 앱 개발
딜러들을 위한 차량 경매 어플리케이션으로 iOS, Android 동시 배포를 위해 하이브리드 앱으로 작성 되었습니다. 기본적인 경매 기능을 중심으로 차량의 아주 디테일한 상태와 사고, 보험이력, 가격정보 그래프 등의 정보 제공과 낙찰 이후의 추가정보나 서류제출등의 과정도 함께 처리할 수 있도록 제작되었습니다.
사용 기술
Framework7, SCSS, Cordova, PHP
역할
- 프론트앤드 개발환경 구성 및 기능 구현
- Framework7 기반 페이지 구조 개발
- d3.js 활용 가격변동 그래프 제작
- 플레이스토어 및 앱스토어 등록 및 인증서 작업
- SCSS 기반 스타일 클래스 작성
박차 모바일 앱 업데이트
일반 고객 대상의 LPG 전문 중고차 구매 어플리케이션으로 iOS, Android 동시 배포를 위해 하이브리드 앱으로 작성 되었습니다. 중고차 특성상 상태, 사고여부, 수리여부, 보험이력 등의 많은 정보를 효율적으로 전달하기 위해 신경써서 제작하였고, 차량 구매 이후 계약 진행과 탁송여부등도 어플리케이션을 통해 손쉽게 진행할수 있도록 제작되었습니다.
사용 기술
Framework7, SCSS, Cordova, PHP
역할
- 프론트앤드 개발환경 구성 및 기능 구현
- Framework7 기반 페이지 구조 개발
- SCSS 기반 스타일 클래스 작성
박차 비즈 웹사이트 개발
중고차 양수도를 위해 허용된 이용자만 사용 가능한 웹사이트입니다. 해외 서비스인 carvana 를 참고해 개발하였고 좌측 필터를 통해 차종, 색상, 연식, 주행거리, 제조사 등의 값을 변경하면 부드럽게 목록이 전환되도록 작성하였으며 목록과 상세 페이지 전환시에도 사용자가 불편함을 느끼지 않도록 개발하였습니다.
사용 기술
AngularJS, SCSS, PHP
역할
- 프론트앤드 개발환경 구성 및 기능 구현
- AngularJS 기반 컨트롤러 구조 개발
- AngularJS 디렉티브, 서비스, 팩토리 활용
- SCSS 기반 스타일 클래스 작성
이큐브랩
CCN 웹사이트 2.0 개발
기존 1.0 버전에서 새로운 제품군이 추가되고 다양한 요구사항을 수용하기 위해 2.0 리워크를 결정하였으며 개발 환경도 함께 변경하였습니다. 구글맵 지도 기반에서 각 사용자별 자신의 제품을 효율적으로 관리할 수 있도록 수정되었으며, 지도 위에 많은 제품을 보여주기 위해 마커 그룹화 및 실시간 필터링을 제공하였습니다.
사용 기술
AngularJS, SCSS, NodeJS, MariaDB, AWS
역할
- 프론트앤드 기능 구현
- AngularJS 기반 컨트롤러 구조 개발
- AngularJS 디렉티브, 서비스, 팩토리 활용
- SCSS 기반 스타일 클래스 작성
시크릿차트 웹사이트 개발
성형외과 등 주로 비급여 항목을 다루는 병원들의 마케팅 플랫폼으로 제작되었고 일반 사용자의 성형후기 게시 및 공유, 병원정보, 병원검색, 나에게 맞는 병원 찾기 기능과 병원 관리자 페이지를 통해 자신의 병원에 관심이 있거나 관심이 있을만한 유저를 추천하고, 메시지를 보내거나 자신의 병원과 관련된 후기 등을 관리하는 기능을 개발하였습니다.
사용 기술
Jquery, SCSS, Codeigniter, MaraiDB
역할
- 백앤드 개발환경 구성 및 기능 구현
- 프론트앤드 개발환경 구성 및 기능 구현
- CI 기반 MVC 구조 개발
- 네이티브 앱 용 API 개발 및 테스트페이지 작성
- Jquery 기반 구조 개발
- SCSS 기반 스타일 클래스 작성
CCN 웹사이트 개발
태양광 압축 쓰레기통 이라 불리는 자사 제품을 컨트롤하기 위한 웹 브라우저 기반 콘솔입니다. 지도 기반 페이지에서 각 제품별 폐기물량, 배터리 충전량, 마지막 수거 시간 등의 정보와 지금까지의 쓰레기 발생량이나 발생량이 많은 지역등의 수집된 정보, 그리고 수집된 정보를 바탕으로 한 쓰레기통 추가 배치가 필요한 지역과 발생량 추이 등의 데이터를 제공하였습니다. 현장 수거자를 위해서 모바일 앱 개발도 필요했기에 하이브리드 앱도 제작하였고 알파, 베타를 거쳐 1.0 버전까지 업데이트가 이루어졌습니다.
사용 기술
Jquery, SCSS, PhoneGap, JqueryMobile, Codeigniter, MaraiDB
역할
- 백앤드 개발환경 구성 및 기능 구현
- 프론트앤드 개발환경 구성 및 기능 구현
- Jquery 기반 구조 개발
- JqueryMobile 기반 구조 개발
- PhoneGap 으로 하이브리드 앱 개발
- SCSS 기반 스타일 클래스 작성
- CI 기반 MVC 구조 개발
- PHP 기반 HTTP 포트 활용한 서버, 제품간 프로토콜 개발
트윈클링
베트남 쇼핑몰
PHP 기반 오픈소스인 영카트5 를 활용해 베트남 쇼핑몰을 구축하였습니다. 기본 기능을 귀금속 쇼핑몰에 맞게 커스터마이징 하고 docker-compose 를 이용해 앱에서 사용되는 미들웨어를 관리하였으며 글로벌 서비스이기에 aws EC2 instance 및 RDB 그리고 S3 + CloudFront 을 사용했습니다.
사용 기술
PHP, Composer, Jquery, SCSS
역할
- 요구사항 정리 및 문서화
- Adobe XD 로 기본 기획 및 프로토타입 작성
- 백엔드 개발환경 구성 및 기능 구현
- 프론트엔드 개발환경 구성 및 기능 구현
- Docker, Docker-compose 기반 개발/테스트/배포 환경 구성
백오피스
개인 사업자분 으로부터 의뢰받아 진행한 프로젝트로 귀금속을 주문받아 고객에게 발송될때까지의 내부적인 업무 프로세스를 웹앱으로 작성하였으며, 제품 주문 -> 발주 -> 입고 -> 배송 의 과정을 처리하고 매출 등의 자료를 대시보드를 통해 보여주는 작업을 진행하였습니다. 현재는 간혹 있는 요구사항을 처리하고 있습니다. 백엔드는 PHP 기반의 Lumen 으로 작성하였고 다른 개발자와 협업하였습니다.
사용 기술
Angular4, Lumen, Composer, Docker, Docker-compose, GitLab
역할
- 요구사항 정리 및 문서화
- Kakao Oven 으로 기본 기획 및 프로토타입 작성
- 프론트앤드 개발환경 구성 및 기능 구현
- ng 컴포넌트 기반 구조 개발
- rxjs 기반 데이터 반응형 구조
- Laradock 기반 개발/테스트/배포 환경 구성
외부 활동
오픈소스 제작
오픈소스컨설팅 UI 킷
사내 프론트앤드 개발시 사용되는 속성값들을 묶어 오픈소스로 제작하고 가이드 문서도 함께 만들어 배포하였습니다. 링크
사용 기술
Webpack, Pug(Jade), NPM, SCSS
발표
2018 AWS Submit Seoul
AWS 행사에서 회사 대표로 '데이터 센터 모던화' 에 대해 발표했고, 주로 자사 제품을 통한 클라우드 전환, Docker, DevOps 관련 내용을 정리하였습니다. YouTube 링크
2018 OSC Tonight
사내에서 진행된 행사에서 'Javascript로 할 수 있는 일들' 에 대해 간략하게 발표하였습니다.