미리보기

프로젝트 설명

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

업무 내용

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

2. 클라이언트 사이드에서 데이터 필터링을 수행하는 공통 커스텀훅 개발을 통한 작업시간 단축 및 레거시 코드 리팩토링으로 코드 가독성 향상에 기여 : 개발 블로그 링크

3. 제품 내 페이지 라우팅 처리 로직에 다이나믹 임포트를 활용한 코드 스플리팅을 적용하여 FCP 단축에 기여

프로젝트 설명

• 그룹 단위의 지출 및 자산 관리를 할 수 있는 웹 서비스

• 기술 스택 : React NodeJS MongoDB Vite styled-components Recoil tanstack-query JWT Kakao API

• 링크 : 서비스 링크, 리포지토리 링크

주요 구현 내용

1. 프로젝트 요구사항을 충족시킬 수 있는 API 및 Data schema 작성 : 노션 링크

2. Tanstack-query를 활용한 커스텀 훅을 작성하여 infiniteQuery를 사용해 무한 스크롤 및 데이터 상태 관리 기능 구현 : 개발 블로그 #1 링크 | 개발 블로그 링크 #2

3. react portal을 활용하여 재사용 가능한 공통 dropdown, modal UI 구현 : 개발 블로그 링크

4. media query를 적용하여 Desktop 환경 뿐만 아니라 Mobile 환경에 적합한 반응형 UX 구현

5. vitest와 msw로 테스트 코드를 작성하여 안정적인 코드 퀄리티 유지 : 개발 블로그 링크

프로젝트 설명

• 내가 꾸민 공간이나, 내가 찾은 이뻤던 공간을 자랑하는 웹 SNS

• 기술 스택 : JavaScript TypeScript React MongoDB NodeJS ExpressJS JWT

• 링크 : youtube 링크

주요 구현 내용

1. 카카오 API, 카카오맵 SDK를 활용한 소셜 로그인 기능 및 장소 검색, 조회 기능 개발 : 개발 블로그 링크

2. 이미지 영역 위에 태깅 및 정보 입력, URL 미리보기 기능 개발 : 개발 블로그 링크

3. styled-react-modal 라이브러리를 활용한 모달, 액션 시트, 팝업 공통 UI 개발 : 개발 블로그 링크

프로젝트 설명

• 온라인으로 자동차를 비교하고 구매할 수 있는 컨셉의 웹 서비스

• 기술 스택 : JavaScript NodeJS MongoDB Atlas ExpressJS Nginx JWT

• 링크 : youtube 링크,

  리포지토리 링크

구현 내용

1. 서버 사이드 API 로직 개발 (사용자, 관리자, 가입 및 인증 관련) : 개발 블로그 링크

2. POST맨을 통한 API 명세서 작성 : 포스트맨 링크

3. pm2와 nginX를 사용하여 프론트엔드 빌드 코드 및 백엔드 코드에 대한 GCP VM 서버 배포를 담당

• Home-in Fullfillment System ERP 제품의 프론트엔드 개발을 담당

• 스토리북과 피그마를 활용한 자체 디자인 시스템 구축 (Logimate Design System, LDS) 및 제품 유지보수 및 운영

• 컴포넌트와 로직을 분리한 디자인 시스템 컴포넌트를 제작하여 관심사 분리 원칙 적용

• 레거시 JavaScript 코드를 TypeScript로 점진적 마이그레이션 진행

• 입력 데이터 변환에 대한 정규표현식과 함수를 공통화하여 업무 효율 증대에 기여

• 웹 기반 디자인툴 미리캔버스의 프로덕트 디자인을 담당하여

  구독 요금제 도입을 위한 전반적인 정책 작성과 화면 기획 및 UXUI 디자인을 진행하며 SaaS 형태의 수익 모델 구축에 기여

• 글로벌 버전 출시를 위한 I18N 작업과 워드프레스 블로그 개발 작업을 진행 : 블로그 링크

• 웹 기반 협업툴인 잔디의 웹 프로덕트(SPA) 디자인을 담당하여 디자인 산출물을 직접 HTML과 SCSS로 작성하고 Github를 통해 실제 라이브 서비스중인 제품의 프로덕션 코드를 유지 보수하며 제품 디자인에 대한 빠른 검수를 달성 (인터뷰 링크)

• 정적 디자인 산출물을 기반으로 실제로 웹에서 동작하는 것을 검증하기 위해 Web/Motion 프로토타입을 제작하며 빠른 의사 결정 및 사용자 경험 고도화에 기여 : 데스크탑 앱 알림 데모 링크 | 다중 업로드 프로토타입 링크 | 스티커 팝업 프로토타입 링크 | 랜딩 페이지 애니메이션 링크

• Next UX 디자인 컨셉을 구축하는 프로젝트 팀의 멤버로 참여하여

  Screen Design및 Wireframe drawing, Motion Design과 Flash Prototype을 제작하여 컨셉 검증과 사용자 테스트에 활용 : 2D Concept Animation Demo 링크

• Set-top box에서도 동작 가능한 CSS UI animation 구현 검토를 통한 최소 스펙 도출 및 적용

• 디지털 디자인 에이전시에서 삼성, LG, Hyundai 등의 클라이언트들과 선행과제를 진행하며 ActionScript를 사용한

  Flash Animation과 Motion 작업으로 컨셉 구현과 고도화에 기여 : Mustang UX Concept 작업물 링크

• HTML, CSS, JavaScript, TypeScript, Node.js, MongoDB & Mongoose, React (함수형 컴포넌트, 상태 관리 등) 강의 수강

• React를 사용한 3개의 프로젝트 구현 스터디 및 2건의 팀 프로젝트 진행