미리보기

React Next.js Redux React-saga Typescript Emotion CSS Zustand Tailwind CSS Turborepo Github Action AWS CodeDeploy

전자제품 판매, 체험, 중고판매등 사용자 경험이 구매로 이어질 수 있도록 서비스를 제공하는 이커머스 솔루션 테스트밸리의 개발,운영, 전자제품 빠른 매입과 사용자간의 중고거래가 가능한 서비스인 퀵셀의 백오피스 개발,운영 하였습니다.
개발 아티클 공유, Jira Task 문서화 템플릿, 온보딩 가이드 문서화 등의 활동을 통해, 동료와 함께 성장하고자 했으며 비효율적인 업무 프로세스를 개선하기 위해 노력했습니다.

• 테스트밸리 서비스 개발/운영 (Website)
  • 프로모션 이벤트 페이지 제네레이터 개발
  • 멤버쉽 서비스 기능 개발
  • 백오피스 모노레포 마이그레이션 작업 진행
• 퀵셀 서비스 개발/운영 (Website)
  • 프론트엔드 리드 개발
  • 서비스소개 랜딩페이지 개발
  • 백오피스 개발/운영
• 메세지서버 백오피스 개발/운영
  • 운영되는 서비스의 FCM 앱 푸시, 알림톡 발송 관리를 위한 메세지서버 개발
• 백오피스 모노레포 설계, 세팅
  • 모노레포 공통 UI 컴포넌트 개발, 내제화
  • 배포 전략 및 Github Actions를 이용한 CI/CD 세팅

Vue.js Nuxt.js Scss Composition-api Typescript Vuex

한정판 물품의 중고거래 서비스인 솔드아웃의 웹, 웹앱 페이지 개발, 운영하였습니다.
상대적으로 짧게 다닌 곳이지만, 솔드아웃 웹 서비스의 코드 리펙토링과 SEO 분석, 제안등의 경험을 할 수 있었습니다.
QA 프로세스의 비효율적인 부분을 개선하기위해, 적극적으로 제안하고 일부분 프로세스에 적용되어진 경험이 있습니다.

• 솔드아웃 웹앱 서비스 개발/운영 (Website)
  • 상세 페이지 SEO 적용을 위한 Vue -> Nuxt 프로젝트 이관 작업 진행
• 솔드아웃 웹 서비스 개발/운영 (Website)
  • SEO 적용 이슈 분석/리펙토링
  • 검색 > 상세페이지에서 뒤로가기시 검색 페이지 유지기능 개발

Vue.js Nuxt.js Scss Vuex Element-ui

사용자의 정책 소외 문제를 해결하기 위한 정책 큐레이션 서비스인 웰로의 웹 서비스 개발, 운영, 기업의 정부 지원정책 추천, 매칭, 관리 SaaS 서비스인 웰로비즈의 웹 서비스 개발, 운영하였습니다.

• 웰로 서비스 개발/운영
  • 프로덕트 디자인, 성능 개선 진행
  • 정책평가, 설문조사, 대리신청 기능 개발
  • 맞춤 정책 필터링, 회원가입 프로세스 A/B 테스트 후 리뉴얼 진행
• 웰로비즈 서비스 개발/운영
  • 프론트엔드 리드 개발
  • 프로젝트 설계, 세팅부터 런칭까지 모두 경험
  • 디자이너와 협업하여 디자인 시스템 세팅
  • 서류관리, 사업일정관리, 정책 신청 이메일 발송 기능 개발
  • Sitemap, SEO 개선, 고도화 진행
• 웰로 어드민 서비스 개발/운영
  • 워드프레스로 운영되던 프로덕트 환경 마이그레이션 개발 진행
  • 디자인 라이브러리(Element-ui)를 활용한 공통 컴포넌트 내제화 진행
  • 엑셀 업로드/다운로드/비밀번호 옵션 기능 모듈화
• SVG 이미지 컴포넌트 사용성 개선 프로젝트
  • svg파일을 빌드단계에서 Sprite화하고, 폰트처럼 사용 할 수 있도록 Webpack 세팅 및 컴포넌트 개발 (svgo, svg-sprite-loader 사용)

Vue.js Nuxt.js Scss Vuex Element-ui jQuery

위펀의 다양한 서비스 환경을 개선하고, 마이그레이션, 개발, 운영하였습니다.

• 간식 큐레이션, 토탈케어 서비스 스낵24 개발, 운영
  • 하나의 저장소에서 통합 관리하던 FE 소스코드를 분리하는 작업 진행
  • Vue 프로덕트 Form 엘리먼트 컴포넌트 개발
  • 서비스 신청 프로세스 해피콜에서 웹에서 신청할 수 있도록 내제화 페이지 고도화
  • 기업의 직원 관리를 위한 멤버 관리 페이지 개발
• 임직원 기념일 선물, 기프티콘 관리 서비스 선물24 개발, 운영
  • 엑셀로 관리하던 기프티콘 선물 관리 기능 추가
  • 기념일 별 명단 관리를 위한 엑셀 벌크 업로드 기능 추가
• 직원의 식대관리를 위한 솔루션 식권24 개발, 운영 (Website)
  • 카카오 맵을 이용한 식권 서비스 웹앱 개발
  • 식권 관리, 식당 등록 관리자 페이지 개발
• 랜딩페이지 이관 및 리뉴얼
  • 타사 웹 호스팅 서비스를 통해 관리하던 서비스 소개 페이지 적응형 페이지로 이관
  • 번들 용량 최적화(Gzip) 및 페이지 초기 로딩 최적화 진행

Vue.js Scss Vuex Element-ui jQuery JSP Spring Boot Mysql Jenkins Gulp

삼성전자의 글로벌 웹페이지를 구성하는 Adobe CMS 솔루션(AEM)의 컴포넌트 단위의 위젯, 페이지 개발, 운영, 사내시스템인 전자 결재 시스템, 리소스 관리 솔루션의 개발, 운영을 하였습니다.
개발 위키 기술 공유, 주기적인 사내 스터디 등을 주도하면서 동료들과 같이 성장하는 환경을 만들기 위해 노력했습니다.

• 삼성전자 글로벌 웹페이지 Adobe CMS 솔루션(AEM) 개발, 운영
  • New Commercial Landing Page 컨텐츠 구성화면 프리뷰 기능 개발
  • S10 / N10 Bundle Package 랜딩 페이지 엑셀 벌크 업로드, 업로드 History 위젯 개발
  • 2020 Watch Configurator Page Json converter 및 국가별 api spec 문서 정리 및 공통 호출 함수 내제화
  • 외 4개의 프로젝트 진행
• ERP 전자 결재 시스템 개발, 운영
  • 유연 근로 출퇴근 통합 관리 기능 개발
  • 전자결재선 지정 확장성을 고려한 기능 개선
• 리소스 관리 솔루션 개발, 운영
  • 전반적인 개발을 진행하면서 프론트엔드 영역은 전담하여 개발
  • 하드코딩 된 프론트엔드 소스 컴포넌트화 개선 프로젝트 진행
  • 전사 리소스 통계 관련 DB Query 수정 및 속도 튜닝
  • 버그 리포트 Jira 토입 및 사용자 가이드 제작

기존 백오피스 서비스의 레거시를 해결하고, 개발 효율 증가를 위한 백오피스 모노레포 전환 프로젝트

• 참여 인원 : 1명 (FE 1명)
• 기술 스택 : Next.js 13 Typescript Turborepo React-hook-form Github Action AWS CodeDeploy

Experience

• 모노레포 사전 세팅하여, 이후 진행할 프로젝트의 백오피스 환경 구축 시간 단축에 기여
• 공통 컴포넌트, 커스텀 훅, 유틸, 환경변수등 구조를 잡고 문서화하여 팀원들에게 공유
• 개발시 기능 구현에 집중 할 수 있도록 모노레포 공통 UI 컴포넌트 개발 & 내제화 진행 (기여도 90%)
• Git flow를 사용하면서 모노레포의 버전관리를 위한 배포 프로세스를 정리하여 팀원들에게 공유 (기여도 100%)
• 서비스 별 배포를 위한 Github Action Workflow 스크립트 작성(기여도 60%)

신규 서비스 퀵셀의 백오피스 개발 프로젝트

• 참여 인원 : 5명 (FE 2명, BE 3명)
• 기술 스택 : Next.js 13 Typescript React-hook-form Tailwind-CSS Zustand

Experience

• 프론트엔드 리드 개발
• 프로젝트 세팅 및 환경, CI/CD 세팅(기여도 100%)
• 서비스별 CSS Color 변수화, 레이아웃 공통화를 위한 디자인 가이드 제작, 개발 진행
• 메뉴관리, 카테고리, 브랜드 기능에 필요한 Drag and Drop 메뉴 컴포넌트 데이터 셋 설계 개발에 참여
• 사전 개발 세팅과 준비를 통한 개발 시간 단축으로 테스트기간 확보

정적 페이지로 개발되는 테스트밸리의 이벤트 페이지를 마케팅팀에서 마케터가 구성할 수 있도록 백오피스에 내제화 하는 프로젝트

• 참여 인원 : 3명 (FE 1명, BE 1명, Design 1명)
• 기술 스택 : React Next.js 12 Typescript Emotion Context-api

Experience

• 마케팅 팀의 요구사항과 필요한 기능을 설문조사로 취합하여 구조 설계
• 백엔드 개발자의 리소스가 부족하여 웰로의 설문조사 기능을 벤치마킹하여 Json 형식의 데이터를 DB에 저장하도록 설계하고, 기능단위의 컴포넌트로 분리하여 확장성에 용이하도록 설계
• 이벤트 페이지 제작 요청 리소스 감소에 기여 (주 1~2MD의 프론트엔드 개발자 리소스 확보)

사용자 리텐션 및 보상을 통한 회원가입 유도를 위한 기능 업데이트

• 참여 인원 : 3명 (FE 2명, BE 1명)
• 기술 스택 : Vue.js Nuxt.js Sass(scss) Vuex

Experience

• 정책평가 웹/백오피스 기능 개발
• 백오피스 설문조사 생성 기능 개발
  • Google Form을 밴치마킹하여 설문조사 생성 기능 개발
  • JSON 데이터로 설문조사 항목을 구성하고, 사용자 웹에서 대화형으로 설문을 받을 수 있도록 설계
• 정부 정책 대리신청 기능 개발
  • Canvas 라이브러리를 사용하여 대리신청시 필요한 서명을 이미지 파일로 저장하고 관리할 수 있도록 개발

회원가입시 개인화 데이터 입력이 많은 상황에서 이탈률을 개선하기 위한 프로젝트

• 참여 인원 : 3명 (FE 1명, BE 1명, PM 1명)
• 기술 스택 : Vue.js Nuxt.js Sass(scss) Vuex

Experience

• Hackle 솔루션을 사용하여 회원가입시 정보입력 A/B 테스트를 제안, 개발 진행
  • A : 정책 개인화 큐레이션 추천을 위한 필수 정보만 입력받도록 개발 (추가정보 선택적 입력)
  • B : 유저가 처음에 전체를 입력할지 추가정보를 입력할지 선택하는 팝업 노출
• A/B 테스트로 의미있는 지표를 도출하여 회원가입 이탈률 감소에 기여 (GA 회원가입률 완료 지표 58.82% -> 87.98%로 개선)

B2B 웰로비즈 서비스 개발 프로젝트

• 참여 인원 : 7명 (FE 3명, BE 2명, Design 1명, PM 1명)
• 기술 스택 : Vue.js Nuxt.js Sass(scss) Vuex

Experience

• 프론트엔드 리드 개발
  • Jira Task 관리&분배, 일정 관리 매니징 진행
  • 개발 문서화를 주도적으로 진행하여 개발에만 집중할 수 있도록 관리
  • 유기적으로 인원을 배치하고, 타이트하게 Task 일정 관리하여 개발 기간 단축으로 테스트 기간 확보
• 서류관리, 사업일정관리, 정책 신청 이메일 발송 기능 개발
  • 폴라리스 오피스를 내제화 하여 한글문서 편집기능 추가
  • 쿠콘 솔루션(jQuery)를 Vue에서 사용할 수 있도록 내제화하여 정부민원서류 조회/다운로드 기능 개발
  • 사업일정관리 기능에 Google 캘린더를 연동 기능 추가
• SEO, Sitemap 고도화
  • sitemap에 정책을 등록하고 관리할 수 있는 메뉴 개발
  • sitemap 최대 갯수 50000개 제한으로 SEO가 제대로 적용되지 않는 이슈가 있어, nuxt-sitemap을 사용하여, 백오피스에서 등록한 sitemap 정보를 build 과정에서 스플리팅하여 sitemap을 동적 생성하도록 고도화

Figma로 관리되는 svg파일을 프로젝트에서 쉽고 간편하게 관리하고 사용하기위한 프로젝트

• 참여 개발자 : 1명 (FE 1명)
• 기술 스택 : Vue.js Nuxt.js Sass(scss) Figma Webpack svgo svg-sprite-loader

Experience

• svg 컴포넌트를 만들고 class, style, icon(파일 이름) 정보를 props를 전달하여 폰트처럼 svg 이미지를 관리할 수 있도록 개발
• Figma에서 다운받은 SVG 파일의 색상을 컨트롤하기 위해 svgo 라이브러리를 사용하여, 빌드과정에서 svg 파일 내의 fill, fill-rule attribute를 제거하도록 처리
• icon 폴더를 따로 분리하고 svg-sprite-loader 라이브러리를 사용하여, build 과정에서 svg 파일을 sprite처리하여 컴포넌트에서 #fileName의 prop을 전달하여 아이콘을 불러올 수 있도록 개발
• 개발 과정에서 svg 파일을 추가하고 import 하던 단계를 단순화하여 개발 효율 증가에 기여

기업 관리자가 직원들의 식대를 쉽게 관리하고, 직원들이 자유롭게 사용할 수 있도록 돕는 식대 관리 솔루션 개발

• 참여 인원 : 4명 (FE 1명, BE 1명, Design 1명, PM 1명)

• 기술 스택 : Vue.js Sass(scss) css3 Vuex

Experience

• 웹앱 프로덕트 환경 세팅 진행

  • 브릿지 함수 정의 및 설계에 참여

• 카카오 맵의 커스텀 오버레이를 이용하여 마커 선택 기능 고도화 개발

  • document.elementsFromPoint로 찍힌 좌표의 음식점이 겹쳐있을 경우 목록화하여 선택할 수 있도록 기능 고도화 진행

• 식권 결제 페이지, 함께 결제 페이지, 키패드 기능 개발

기타 프로젝트는 개인 이력서 포트폴리오 사이트를 통해 확인해보세요. (Website)

• 주식회사비엘큐
  • [테스트밸리] 멤버쉽 서비스 개발
  • [테스트밸리] 백오피스 서비스 마이그레이션
  • [백오피스] 메세지 서버 FCM 앱 푸시, 알림톡 발송 관리 기능 개발
• 주식회사 에스엘디티
  • [솔드아웃 웹앱] 상세 페이지 서비스 Nuxt 프로젝트 이관 작업
  • [솔드아웃 웹] 검색 > 상세페이지 뒤로가기 시 검색 페이지 스크롤 유지 기능 개발
• 주식회사웰로
  • [웰로비즈] 디자인 시스템 세팅
  • [백오피스] 엑셀 업로드/다운로드/비밀번호 옵션 기능 모듈화
• (주) 위펀
  • [스낵24] 마이그레이션 프로젝트
  • [선물24] 기업 사용자 페이지 고도화 프로젝트
  • [랜딩페이지] 소개 페이지 이관 후, 최적화 작업
• 하이브랩
  • [삼성전자] 글로벌 웹페이지 CMS 솔루션 개발 운영
  • [사내시스템] ERP 전자 결재 시스템 유연근로 출퇴근 통합 관리 기능 개발
  • [사내시스템] 리소스 관리 솔루션 개발, 운영