미리보기

• 2000+개 고객사가 사용하는 지출관리 서비스 기능 개선 및 고도화
• 새로운 디자인 시스템 개발 및 유지보수
• 고위드 홈페이지 리뉴얼 및 유지보수
  • 메인 캠페인 페이지 구현
  • 전체 카드 발급 프로세스 페이지의 사후 QA 검수 결과에 대한 UI 및 기능 오류 수정 대응
  • Firebase용 Google Analytics 데이터 수집 이벤트 적용
• 고위드 어드민 사이트 신규 기능 구현 및 유지보수
  • 전체 고객사 중 고위드 대출 상품을 이용중인 고객사의 정보를 확인하고 관리할 수 있는 신규 기능 구현
• 사내 사이드 프로젝트 G-허들링 페이지 기획팀(총 4인) 팀장으로 참여

• 어몽아츠(amongArts) 웹사이트 신규 기능 개발 및 배포
  • Figma로 작가 회원의 작품 등록 기능 및 갤러리 상세 정보 조회 페이지 UI 기획
  • 작가 회원이 작품 이미지를 드래그 앤드 드롭으로 업로드하고 작품 상세 정보를 입력하는 기능 구현
  • 작품 상세 정보 입력 폼에 Formik과 Yup을 활용하여 상태 관리 및 유효성 검사 적용
  • 갤러리 상세 정보 조회 페이지 기능 구현
  • media-query를 활용한 반응형 페이지 구현
• 레거시 코드 리팩토링
  • 리액트 프로젝트 애플리케이션의 전체 디렉토리 구조 개선
  • 동일한 구조의 중복되는 로컬 컴포넌트 대신 공통 컴포넌트를 구현하여 사용하도록 개선
  • 유지보수가 중단된 라이브러리인 Tabler-React를 제거하고 Styled-Components를 적용

• 시코랩(Secolab) 웹사이트 학생 회원의 역량평가 기능 구현
  • 요구사항 명세서를 기반으로 카카오오븐을 사용하여 UI 기획 및 기능 동작 명세 정의
  • 4가지 문제유형(사지선다/OX선택/복수선택/단답형) 별 정답 입력 기능 구현
  • 전체 문제에 대한 정답 입력 현황판 구현
  • 서버에서 전달해준 역량평가 응시 제한 시간 데이터를 이용하여 setTimeout()으로 타이머 기능 구현
  • Recharts.js를 활용하여 역량평가 결과 데이터를 그래프로 시각화
• 서비스 QA 및 콘텐츠 개발
  • 자사 서비스 웹사이트 프로젝트를 JSP에서 Thymeleaf로 리팩토링 및 BootStrap을 이용한 UI 개선 작업
  • KISA에서 발간한 Java 시큐어코딩 가이드를 기반으로 CSRF, XSS, SQL Injection 등 5가지 공격 유형에 대한 시큐어코딩 구현 학습용 미니 프로젝트를 SpringBoot(maven)와 BootStrap을 사용하여 개발
  • 기존 시큐어코딩 학습용 퀴즈 문제와 정답을 전수 교차 검수하여 오류를 바로잡고, 각 유형 별 퀴즈 문제 추가 출제

v2.0 디자인 시스템 개발

• v2.0 디자인 시스템의 테크 스펙 문서화 및 필요 컴포넌트 중 60%이상을 담당하여 구현
  • Icon, SelectBox, ComboBox, Menu, Modal, Pagination, Typography 등 10+가지 컴포넌트 구현
  • Popper.js를 참고하여 Modal, Menu 등에 사용할 Popper 컴포넌트 구현
• SVG 파일을 리액트 컴포넌트로 만들어서 자동으로 프로젝트 내에 추가되도록 SVGR Cli로 자동화 스크립트 적용
• 기존 적용되어 있던 v1.0 디자인 시스템 컴포넌트를 v2.0 디자인 시스템 컴포넌트로 교체 적용

v2.0 -> v2.1 디자인 시스템 업데이트

• v2.0 디자인 시스템에서 디자이너와 협의하여 일부 컴포넌트의 UI/UX를 개선하고 DatePicker와 MonthPicker 등 새로운 컴포넌트 추가 구현하여 v2.1 디자인 시스템으로 업데이트

2000+개 고객사가 사용하는 지출관리 기능의 고도화를 위해 만든 지출관리 사일로 소속으로, 고객 인터뷰와 VoC에 기반하여 사용자 편의성을 높이기 위한 신규 기능의 기획부터 개발 및 배포까지 전반적인 프로세스에 참여했습니다.

영수증의 필수 용도 설정 기능 개발

• 카드 지출 용도에 따라 상세 정보를 필수로 입력하도록 지정할 수 있는 신규 기능을 구현하여 지출내역 관리 기능 개선
• 사용자가 동일한 용도로 지출한 여러 개의 영수증을 한 번에 제출할 수 있도록 기능을 개선하여 일반 사용자와 관리자의 편의성 증대에 기여
  

회계 ERP 설정 기능 개발

• 회계 처리를 편리하게 할 수 있도록 영수증별, 용도별 부가세 별도 표기 설정 기능 구현
• 고객사가 가장 많이 사용하는 더존 ERP 프로그램 업로드용 카드 지출내역 엑셀 양식 세부 설정 기능 및 엑셀 파일 다운로드 기능 구현
  

부서 설정 기능 개발

• 부서별로 지출내역을 관리하고 결재를 받을 수 있도록 부서 설정 기능을 새로 구현하고 부서 관리자 권한을 신설하여 적용
  • depth가 여러 개 있는 트리형 구조에서도 드래그 앤드 드롭이 가능한 dnd-kit을 사용하여 최대 4단계까지 드래그 앤 드롭으로 트리형 부서 조직도 설정 기능 구현
• 지정 엑셀 양식 다운로드 및 업로드를 통한 여러 명의 사용자 일괄 등록 기능을 구현하여 관리자의 초기 서비스 사용 세팅 시간을 최대 1일 단축
• 모든 지출관리 서비스 진입구간에 서비스 이용 약관 및 마케팅 정보 수신 동의 기능 추가

고위드의 사내 사이드 프로젝트로, 둥근 원을 만들어 교대로 온기를 지켜서 추위를 견디는 황제펭귄의 허들링에서 착안하여 스타트업이 투자 혹한기를 이겨낼 수 있도록 무이자 대출 기금을 조성하는 운동인 G-허들링에 페이지 기획팀 팀장으로 참여했습니다. (Link)

• G-허들링 웹사이트 프로젝트 개발환경 세팅 및 배포
• 마케팅팀, 운영팀과 긴밀하게 협력하여 G-허들링의 핵심가치를 잘 전달할 수 있는 메시지를 기반으로 페이지 기획
• 접속 기기 환경을 고려하여 PC와 모바일 적응형으로 제작

고위드 홈페이지 UI/UX 디자인 개선을 위하여 홈페이지 전체를 v1.0 -> v2.0 리뉴얼하는 프로젝트에 참여해서 주로 지출관리 서비스와 지금은 종료된 현금흐름 서비스 관련 페이지들을 맡아서 작업했습니다.

• 새로운 홈페이지 UI/UX 디자인에 맞추어 v2.0의 새로운 디자인 시스템 컴포넌트 적용
• JavaScript 기반 React 프로젝트에 MobX로 전역 상태를 관리하고 Node.js를 서버로 하는 별도 MVP 프로젝트로 존재하던 지출관리 서비스 레거시 코드를 고위드 웹페이지 프로젝트로 이식하면서 서버를 SpringBoot로 구성할 수 있도록 서버 엔지니어와 협업하고 TypeScript 기반의 React로 전환하였으며 Redux Toolkit으로 전역 상태를 관리하도록 리팩토링