안녕하세요.
프론트엔드 개발자 편도걸입니다.

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

• -참여 인원 : 1명 (FE 1명)
• -개발 기간 : 2023. 07 ~ 2023. 08
• -기술 스택 :
  • # Next.js 13
  • # Typescript
  • # Turborepo
  • # Tailwindcss
  • # Zustand
  • # React-hook-form
  • # Github Action
  • # AWS CodeDeploy

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

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

• -참여 인원 : 5명 (FE 2명, BE 3명)
• -개발 기간 : 2023. 07 ~ 2024. 02
• -기술 스택 :
  • # Next.js 13
  • # Typescript
  • # React-hook-form
  • # Tailwind-CSS
  • # Zustand

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

운영중인 테스트밸리 백오피스 백오피스 마이그레이션 프로젝트

• -참여 인원 : 2명 (FE 1명, BE 1명)
• -개발 기간 : 2023. 12 ~ 2024. 01
• -기술 스택 :
  • # Next.js 13
  • # Typescript
  • # React-hook-form
  • # Tailwind-CSS
  • # Zustand

• 1.
  테스트밸리 백오피스의 운영 리소스 감소를 위해 모노레포로 마이그레이션 작업 진행 (기여도 80%)
• 2.
  신규 메뉴 개발 및 제품 등록 페이지 고도화 (기여도 90%)
• 3.
  최소한의 리소스로 짧은 기간 내에 메뉴 17개(80%) 마이그레이션 완료
• 4.
  슬랙 봇 명령어로 추가/삭제/관리를 진행하는 데이터 관리 메뉴 추가로 운영 이슈 감소에 기여(사용자 실수로 인한 수정요청 횟수 80% 감소)

운영되는 서비스들의 FCM 앱 푸시, 알림톡 발송 관리를 위한 메세지서버 백오피스 개발

• -참여 인원 : 2명 (FE 1명, BE 1명)
• -개발 기간 : 2023. 10 ~ 2023. 11
• -기술 스택 :
  • # Next.js 13
  • # Typescript
  • # React-hook-form
  • # Tailwind-CSS
  • # Zustand

• 1.
  기존 백엔드 DB에서 관리되던 앱 푸시, 알림톡 템플릿 관리 개발 (기여도 80%)
• 2.
  앱 FCM 예약 발송 기능 개발
• 3.
  iFrame으로 서비스별 백오피스에 내제화 할수 있게 개발하여 기간 50% 단축
• 4.
  마케팅-개발 부서간의 리소스 부족으로 인한 마케팅 병목현상 해소로 서비스 리텐션 지표 32% 상승, 개발팀 리소스 확보(평균 주 1MD 리소스 확보)
• 5.
  템플릿, 파라미터를 검수하는 단계를 추가하여, 오타 이슈 발생률 감소
• 6.
  static export하여 서버 자원 감소에 기여 (메모리 리소스 감소)

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

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

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

• 1.
  테스트밸리 사용자/백오피스 멤버십 기능 개발 (기여도 100%) - 23.07.13 ~ 23.07.25
• 2.
  퀵셀 중고거래 유도 페이지 개발
• 3.
  퀵셀 소개페이지 개발
• 4.
  테스트밸리 백오피스 이미지 썸네일 등록 기능 최적화

SEO 적용을 위해, Nuxt 프로젝트로 상세페이지 이관하는 프로젝트

• -참여 인원 : 3명 (FE 3명)
• -개발 기간 : 2023. 02 ~ 2023. 05
• -기술 스택 :
  • # Nuxt.js
  • # Vue.js
  • # Sass(scss)
  • # css3
  • # Composition-api
  • # Typescript

• 1.
  SEO 적용을 위한 Vue -> Nuxt 프로젝트 상세 페이지 세팅 담당
• 2.
  상품 상세 페이지 이관을 위한 코드 분석 진행
• 3.
  90점 상품 브릿지 페이지 개발
• 4.
  시세 차트 컴포넌트 개발/내제화 (apexcharts)
• 5.
  웹앱 페이지 최적화 진행하여 초기 렌더링 0.8초 감소 (이미지 최적화, 부분 렌더링)
• 6.
  API 호출부에서 핸들링 되던 에러 메세지를 Axios interceptors로 에러핸들링 공통화하여 코드 가독성 증가 및 코드 라인 감소

솔드아웃 웹 서비스의 기능 개발, 운영 이슈 수정

• -참여 인원 : 1명 (FE 1명)
• -개발 기간 : 2022. 01 ~ 2023. 02
• -기술 스택 :
  • # Nuxt.js
  • # Sass(scss)
  • # css3
  • # Typescript
  • # Composition-api

• 1.
  웹 특정 페이지의 SEO가 적용되지 않는 문제를 분석/디버깅을 통해 확인하고 Layout 레이어에서 CSR이 발생 할 수 밖에 없는 코드에 대한 리펙토링 진행
• 2.
  상품 검색 페이지에서 상품 상세 이동 후 뒤로가기 시, 스크롤/상품정보가 유지되지 않는 부분 해결하기위해 Keep-alive 기능을 사용하여 뒤로가기 유지기능 개발

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

• -참여 인원 : 3명 (FE 2명, BE 1명)
• -개발 기간 : 2022.08 ~ 2023. 09
• -기술 스택 :
  • # Vue.js
  • # Sass(scss)
  • # css3
  • # element-ui

• 1.
  정책평가 웹/백오피스 기능 개발
• 2.
  백오피스 설문조사 생성 기능 개발
  -

  Google Form을 밴치마킹하여 설문조사 생성 기능 개발

  -

  JSON 데이터로 설문조사 항목을 구성하고, 사용자 웹에서 대화형으로 설문을 받을 수 있도록 설계

• 3.
  정부 정책 대리신청 기능 개발
  -

  Canvas 라이브러리를 사용하여 대리신청시 필요한 서명을 이미지 파일로 저장하고 관리할 수 있도록 개발

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

• -참여 인원 : 3명 (FE 1명, BE 1명, PM 1명)
• -개발 기간 : 2022.11 ~ 2022. 11
• -기술 스택 :
  • # Vue.js
  • # Nuxt.js
  • # Sass(scss)
  • # css3
  • # Vuex

• 1.
  Hackle 솔루션을 사용하여 회원가입시 정보입력 A/B 테스트를 제안, 개발 진행
  -

  A : 정책 개인화 큐레이션 추천을 위한 필수 정보만 입력받도록 개발 (추가정보 선택적 입력)

  -

  B : 유저가 처음에 전체를 입력할지 추가정보를 입력할지 선택하는 팝업 노출

• 2.
  A/B 테스트로 의미있는 지표를 도출하여 회원가입 이탈률 감소에 기여
  -

  GA 회원가입률 완료 지표 58.82% -> 87.98%로 개선

기업의 지원정책을 추천하고, 매칭, 관리가 가능한 Saas 서비스 개발

• -참여 인원 : 3명 (FE 1명, BE 1명, PM 1명)
• -개발 기간 : 2022. 03 ~ 2023. 05
• -기술 스택 :
  • # Nuxt.js
  • # Sass(scss)
  • # css3
  • # Vuex

• 1.
  프론트엔드 리드 개발
  -

  Jira Task 관리&분배, 일정 관리 매니징 진행

  -

  개발 문서화를 주도적으로 진행하여 개발에만 집중할 수 있도록 관리

  -

  유기적으로 인원을 배치하고, 타이트하게 Task 일정 관리하여 개발 기간 단축으로 테스트 기간 확보

• 2.
  서류관리, 사업일정관리, 정책 신청 이메일 발송 기능 개발
  -

  폴라리스 오피스를 내제화 하여 한글문서 편집기능 추가

  -

  쿠콘 솔루션(jQuery)를 Vue에서 사용할 수 있도록 내제화하여 정부민원서류 조회/다운로드 기능 개발

  -

  사업일정관리 캘린더 기능에 Google 캘린더를 연동 기능 추가

• 3.
  SEO, Sitemap 고도화
  -

  sitemap에 정책을 등록하고 관리할 수 있는 메뉴 개발

  -

  sitemap 최대 갯수 50000개 제한으로 SEO가 제대로 적용되지 않는 이슈가 있어, nuxt-sitemap을 사용하여, 백오피스에서 등록한 sitemap 정보를 build 과정에서 스플리팅하여 sitemap을 동적 생성하도록 고도화

유저의 정보를 분석하여 개인화를 통해 정부 정책을 추천하고 매칭하는 서비스 리뉴얼 개발/운영

• -
• -개발 기간 : 2022. 01 ~ 2023. 02
• -기술 스택 :
  • # Vue.js
  • # Sass(scss)
  • # css3

• 1.
  기존 디자인 시스템을 디자이너와 협업을 통해 개선하고, 디자인 리뉴얼 진행
• 2.
  효율적이지 못한 css 구조를 개선하고, scss로 컬러, 폰트등 자동화 세팅으로 개발 환경 개선

웰로/웰로비즈를 관리하기 위한 백오피스 서비스 개발/운영

• -
• -개발 기간 : 2022.01 ~ 2023. 02
• -기술 스택 :
  • # Vue.js
  • # Sass(scss)
  • # css3
  • # element-ui

• 1.
  프로덕트 환경세팅 및 개발 (기여도: 100%)
• 2.
  워드프레스로 운영되던 기존 백오피스의 마이그레이션 진행
• 3.
  디자인 라이브러리(element-ui)를 사용한 컴포넌트 기능 개발 진행, 백오피스 환경에 맞게 사전 개발을 진행하여 개발 기간 단축
• 4.
  엑셀 업로드/다운로드, 비밀번호 옵션 기능 모듈화 개발

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

• -참여 인원 : 4명 (FE 1명, BE 1명, Design 1명, PM 1명)
• -개발 기간 : 2021. 11 ~ 2021. 12
• -기술 스택 :
  • # Vue.js
  • # Sass(scss)
  • # css3
  • # Vuex

• 1.
  신규 프론트엔드 웹앱 프로덕트 환경 세팅 진행
  -

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

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

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

• 3.
  식권 결제 페이지, 함께 결제 페이지, 키패드 기능 개발
• 4.
  식권 웹앱 카카오맵 연동 및 리뷰 기능, 결제 기능 개발(payple 결제 서비스 연동 등)
• 5.
  관리자 페이지 식권 관리 페이지 개발 담당

B2B 통합 서비스 프로덕트의 소스코드 분리 및 서비스 고도화를 위한 마이그레이션 프로젝트

• -참여 인원 : 4명 (FE 2명, BE 1명)
• -개발 기간 : 2021. 06 ~ 2021. 07
• -기술 스택 :
  • # Vue.js
  • # Sass(scss)
  • # css3

• 1.
  하나의 저장소에서 통합 관리하던 FE 소스코드를 분리하는 작업 진행
• 2.
  서비스 신청을 해피콜(유선) 프로세스를 개선하기 위한 서비스 신청 페이지 고도화
• 3.
  서비스 신청, 가입시 사용하는 멤버 관리 페이지 개발
• 4.
  프론트엔드 개발의 마크업 컨벤션 정의
• 5.
  Vue 프로덕트 Form 엘리먼트 컴포넌트 개발

서비스 소개 랜딩페이지를 신규 프로덕트로 이관 및 리뉴얼 프로젝트

• -참여 인원 : 3명 (FE 2명, Design 1명)
• -개발 기간 : 2021. 08 ~ 2021. 10
• -기술 스택 :
  • # Vue.js
  • # Sass(scss)
  • # css3

• 1.
  타사 웹 호스팅 서비스를 통해 관리하던 서비스 소개 페이지의 내제화
• 2.
  적응형 페이지(pc, mobile) 개발하여 최적화 진행
• 3.
  디자인 공통화를 위한 컴포넌트 개발 및 CSS 리펙토링을 담당
• 4.
  번들 용량 최적화(Gzip) 적용하여 페이지 초기 로딩 시간 단축
• 5.
  영역에 도달하면 trigger되는 컴포넌트를 만들어, 부분 렌더링되도록 수정하여 페이지 초기 로딩 시간 단축

스낵24 앱, 웹앱 페이지의 디자인 리뉴얼을 진행하면서 비효율적인 로직 및 설계를 개선하기 위한 프로젝트

• -참여 인원 : 1명 (FE 1명)
• -개발 기간 : 2021. 10 ~ 2021. 11
• -기술 스택 :
  • # Nuxt.js
  • # Sass(scss)
  • # css3

• 1.
  SCSS 적용 및 공통화 진행하여 개발시간 단축
• 2.
  비효율적인 비동기 로직을 개선하여, 메인페이지 로딩 속도 단축 (약 30% 속도 개선)

B2B 기프티콘, 선물 관리 서비스 고도화 프로젝트

• -참여 인원 : 2명 (FE 1명, BE 1명)
• -개발 기간 : 2021. 07 ~ 2021. 07
• -기술 스택 :
  • # Nuxt.js
  • # Sass(scss)
  • # css3
  • # SheetJs

• 1.
  엑셀로 관리하던 기프티콘 선물 관리 기능 추가
• 2.
  기념일 별 명단 관리를 위한 엑셀 벌크 업로드, 다운로드 관리 기능 추가

• 1.
  오피스24 나이키 전용 커스텀 고도화 (2021.09 ~ 2021.09)
• 2.
  퀵24 서비스 개발 (2021.07 ~ 2021.07)

삼성 닷컴 카테고리별 제품을 노출하는 Offer 페이지 리뉴얼 프로젝트

• -
• -개발 기간 : 2019. 10 ~ 2020. 10
• -기술 스택 :
  • # Javascript
  • # jQuery
  • # HTML5
  • # Sass(scss)
  • # css3
  • # gulp

• 1.
  CMS 솔루션의 복잡한 컨텐츠 구성 난이도를 감소시키기위해 컨텐츠 구성하는 화면의 프리뷰 팝업 위젯을 개발하여, 페이지 제작 시간 단축
• 2.
  국가별 API Spec 문서를 제작하고, API를 함수화하여 타 프로젝트에서 사용 할 수 있도록 가공
• 3.
  RawData 데이터 가공 기능 담당 개발

삼성 닷컴 S10 번들 프로모션 랜딩페이지 위젯 개발

• -
• -개발 기간 : 2019. 09 ~ 2019. 10
• -기술 스택 :
  • # Javascript
  • # jQuery
  • # JSP
  • # SheetJs

• 1.
  프론트엔드 담당 개발
• 2.
  페이지를 구성하는 컨텐츠 제작 과정 반복되는 과정을 줄이기 위해 SheetJS의 엑셀 업로드 기능을 활용한 데이터 가공 위젯 개발
• 3.
  솔루션의 Node 저장소를 이용하여 History 기능 개발
• 4.
  엑셀 업로드를 통해 페이지 생성 시간 단축으로, 오픈 국가 추가 계약 달성

사내의 유연 근로 출·퇴근 통합 관리 시스템 구축 프로젝트

• -
• -개발 기간 : 2020. 01 ~ 2020. 03
• -기술 스택 :
  • # Javascript
  • # jQuery
  • # JSP
  • # HTML5
  • # css3
  • # Java
  • # Spring Boot
  • # Mysql

• 1.
  출퇴근 시간 관리 기능 추가
• 2.
  출퇴근 수기 입력 CRUD API 개발
• 3.
  근로시간 통계 계산 비즈니스 로직 개발
• 4.
  jQuery + moment.js 활용한 DatePicker 리펙토링
• 5.
  리소스 관리 솔루션의 데이터 접근시 발생한 CORS에러를 해결하기 위한 타 도메인 간의 CORS 이슈 처리에 대한 검토 및 개발 진행
  -

  내부 비즈니스 로직에서 DB에 접근할 수 있도록 세팅 변경

사내 정책 변경에 의한 리소스 관리 솔루션 통계 및 기능 개선 프로젝트

• -참여 인원 : 2명 (BE 2명)
• -개발 기간 : 2020. 01 ~ 2020. 06
• -기술 스택 :
  • # Vue.js
  • # Vuex
  • # Javascript
  • # HTML5
  • # css3
  • # Java
  • # Spring Boot
  • # Mysql

• 1.
  전반적인 개발을 진행하면서, 프론트엔드 관련 수정은 전담하여 진행
• 2.
  비효율적인 비동기 호출을 최소화하여, 페이지 초기 구동 시간 단축
• 3.
  하드코딩 된 코드를 공통 컴포넌트로 변경하여 가독성 증가
• 4.
  통계 관련 DB Query 수정 & 속도 튜닝
  -

  조회 및 통계 관련 유저리포팅 1분기 대비 50% 이상 감소

• 5.
  Jira를 활용하여 이슈 관리 프로세스 단축 및 히스토리 관리 진행
  -

  장애보고서 작성을 위한 가이드 문서, 템플릿 제작

• 1.
  [삼성 닷컴] 2020 Watch Configurator Page 개발 (2020.06 ~ 2020.12)
• 2.
  [삼성 닷컴] EU 컴포넌트 개발/운영 (2018.07 ~ 2018.09, 2019.03 ~ 2019.06)
• 3.
  [삼성 닷컴] 닷컴 홈 개편 프로젝트 (2018.06 ~ 2019.01)
• 4.
  [삼성 닷컴] Support 개편 프로젝트 (2018.05 ~ 2018.08)
• 5.
  [삼성 닷컴] SHOP 통합 프로젝트 (2018.04 ~ 2018.08)
• 6.
  [사내 시스템] 전자 결재 시스템 개발·운영 (2019.01 ~ 2020.12)
• 7.
  [사내 시스템] 리소스 관리 솔루션 개발·운영 (2019.01 ~ 2020.12)