미리보기

프로젝트 설명

• 택배, 주문, 재고 관리 등 물류 운영을 위한 Fullfillment 기능을 제공하는 ERP 웹 서비스

업무 내용

1. 웹 서비스의 디자인 리뉴얼에 필요한 시안 작업 및 스토리북을 사용한 자체 디자인 시스템을 구축하여 실서비스에 점진적 적용중

2. 클라이언트 사이드에서의 데이터 필터링을 위한 공통 커스텀훅 개발을 통해 작업시간 단축에 기여

3. 서비스에서 사용중인 다수의 페이지들에 다이나믹 임포트를 활용한 코드 스플리팅을 적용하여 FCP 단축에 기여

4. 레거시 코드 리팩토링으로 코드 가독성 향상에 기여 : 개발 블로그 링크

프로젝트 설명

• 그룹 단위의 지출 및 자산 관리를 할 수 있는 웹 서비스
• 서비스 링크 : 링크
• 프로젝트 리포지토리 : 링크

구현 내용

1. 프로젝트 요구사항을 충족시킬 수 있는 API 및 Data schema 작성 : 노션 링크
2. React-router를 활용하여 페이지 라우팅 및 navigate, redirect 기능 구현
3. Tanstack-query를 활용한 커스텀 훅을 작성하여 infiniteQuery를 사용해 무한 스크롤 및 데이터 상태 관리 기능 구현 : 개발 블로그 #1 링크 | 개발 블로그 링크 #2
4. date-fns 라이브러리를 활용하여 특정 기간 내 데이터만 조회하고 기간 변경 기능 구현
5. nivo 차트 라이브러리를 활용하여 자산을 등록하고 그래프 형태로 조회하고 수정할 수 있는 기능 구현
6. mustache와 nodemailer 라이브러리를 활용하여 멤버 초대 이메일 템플릿 발송 기능, 초대 페이지를 통해 새로운 멤버를 가입시키는 기능 구현
7. react-helmet을 활용하여 페이지별 open graph 정보 적용
8. react portal을 활용하여 app 바깥 영역에 호출하여 재사용할 수 있는 dropdown, modal UI 구현 : 개발 블로그 링크
9. media query를 적용하여 Desktop 환경 뿐만 아니라 Mobile 환경에 적합한 반응형 UX 구현
10. vitest와 msw로 테스트 코드를 작성하여 안정적인 코드 퀄리티 유지 : 개발 블로그 링크

프로젝트 설명

• 내가 꾸민 공간이나, 내가 찾은 이뻤던 공간을 자랑하는 웹 SNS
• 프로젝트 인원 : 6인 (풀스택 6)
• 사용 기술 : JavaScript, TypeScript, ReactJS, MongoDB, Node.js, ExpressJS, JWT
• 시연 영상 : youtube 링크

구현 내용

1. 카카오 API를 활용한 소셜 로그인 기능 개발 : 개발 블로그 링크
2. 카카오맵 SDK를 활용한 장소 검색, 조회 기능 개발
3. 이미지 영역 위에 태깅 및 정보 입력, URL 미리보기 기능 개발 : 개발 블로그 링크
4. styled-react-modal 라이브러리를 활용한 모달, 액션 시트, 팝업 공통 UI 개발 : 개발 블로그 링크

프로젝트 설명

• 온라인으로 자동차를 비교하고 구매할 수 있는 컨셉의 웹 서비스
• 프로젝트 인원 : 6인 (프론트 3, 백엔드 3)
• 사용 기술 : JavaScript, Node.js, MongoDB Atlas, ExpressJS, Nginx, JWT
• 시연 영상 : youtube 링크
• 프로젝트 리포지토리 : 링크

구현 내용

1. 서버 사이드 API 로직 개발 (사용자, 관리자, 가입 및 인증 관련) : 개발 블로그 링크
2. POST맨을 통한 API 명세서 작성 : 포스트맨 링크
3. GCP VM 서버 배포 담당 (프론트엔드 코드 통합 및 pm2와 nginx 사용)

• Home-in Fullfillment System ERP 제품 개발

• 스토리북과 피그마를 활용하여 자체 디자인 시스템 구축 및 운영

• 웹 기반 디자인툴 미리캔버스의 프로덕트 디자인을 담당
• 구독 요금제 도입을 위한 전반적인 정책 작성과 화면 기획, UXUI 디자인을 진행하여 SaaS 형태의 수익 모델 구축에 기여
• 유료 전환율과 구독 해지율 등 다양한 지표 개선 작업을 담당하여 제품 성장에 기여
• 기능 개발 시 프로덕트 매니저, 프론트엔드 개발자와 함께 우선순위를 설정하고 핵심 가치를 제공할 수 있는 기능이 먼저 개발될 수 있도록 밀접히 소통하며 협업
• 글로벌 버전 출시를 위한 I18N 적용과 CSS 처리, 워드프레스 블로그 작업을 진행
  → 글로벌 워드프레스 블로그 : 블로그 링크

• 웹 기반 협업툴인 잔디의 웹 애플리케이션 디자인을 담당
• 합류 초기부터 프로덕트 매니저, 프론트엔드 개발자와 함께 데일리 스크럼을 통해 빠르게 제품의 기능을 개발
• 정적인 디자인 산출물 뿐만 아니라 실제로 웹에서 동작하는 것을 검증하기 위해 WebPage / Motion 프로토타입을 제작하며 빠른 의사 결정을 이루어내고 UXUI 고도화에 기여
  → 데스크탑 앱 다운로드 알림 데모 : vimeo 링크
  → 다중 파일 업로드 모달 프로토타입 : vimeo 링크
  → 스티커 팝업 프로토타입 : vimeo 링크
• 디자인 산출물을 직접 HTML Markup과 SCSS로 작성하고 PR을 요청하여 최종 디자인에 대한 빠른 검수를 달성
• 다양한 브라우저의 너비에 대응 가능한 반응형 랜딩 페이지와 CSS 애니메이션을 작업을 담당하여 사용자 경험 향상에 기여
  → 랜딩 페이지 애니메이션 : vimeo 링크

• Next UX 디자인 컨셉을 구축하는 프로젝트 팀의 멤버로 참여
• Screen Design작업과 Wireframe drawing에 참여하고, Motion Design과 Flash Prototype을 제작하여 컨셉 검증과 사용자 테스트에 활용
  → 2D Concept Animation Demo : youtube 링크
• 디자인된 애니메이션이 최종적인 제품에까지 반영될 수 있도록 CSS animation의 구현 검토를 담당하여 Set-top box에서 동작 가능한 최소 스펙의 animation 도출

• 디지털 디자인 에이전시에서 삼성, LG, Hyundai 등의 클라이언트들과 선행과제를 진행
• Flash Animation과 Motion, Flash Script 작업을 진행하여 컨셉 구현과 고도화에 기여
  → Mustang UX Concept 플래시 콘텐츠 제작 : youtube 링크

• HTML, CSS, JavaScript 강의 수강
• TypeScript, Node.js, MongoDB & Mongoose 강의 수강
• React (함수형 컴포넌트, 상태 관리 등) 강의 수강
• React 프로젝트 구현 스터디 진행 (총 3개의 프로젝트)
• 팀 프로젝트 진행 (총 2개의 프로젝트)