미리보기

wreck league 게임 소개 및 NFT 리스팅 하는 웹사이트 개발에 기획 초기 단계부터 오픈까지 참여했습니다. wreck league 디자인 시스템을 포함하여 성능 최적화를 중점적으로 맡아 성능 측정 및 개선, 전체적인 모션 구현을 전담하여 진행했습니다.
https://wreckleague.xyz/

• 번들 사이즈와 러닝 커브를 고려하여 react-spring, lottie 도입과 인터렉션 구현
• 사내 디자인 시스템(Combine)을 확장하여 wreck league 디자인 시스템(WLDS : wreck league design system) 개발
• UX 기획 단계에서도 동료들과 사용자 중심으로 고민하며 커뮤니케이션에 참여
• 어셋(image, video) 용량 최적화로 프로젝트에 로드되는 리소스의 용량을 90%~70% 감축
• DOM size, 번들 사이즈 측정 및 개선으로 lighthouse 기준 페이지별 LCP 평균 10% 감축
• safari, firefox, chrome, metamask app, window PC 크로스브라우징
• 기술 스택 : React, Typescript, Recoil, emotion, react-query, web3.js, Sentry, github action, yarn workspace

디자이너 2명과 프론트 개발 1명 체재로 디자인 시스템을 개발했습니다. 모노레포를 활용하여 글로벌한 디자인 시스템 Combine과 프로덕트 별 디자인 시스템을 구축했습니다.

• 디자이너와 협업하여 사내 공통 디자인 라이브러리 개발(Storybook)
• cypress로 컴포넌트별 유닛 테스트를 작성
• yarn workspace monorepo 로 프로덕트별 디자인시스템 구축
• 컴포넌트 별 커스텀 훅 정의 및 공통 모듈 개발
• npm private 레파지토리, lerna로 package 버전 관리
• 기술 스택 : React, Typescript, emotion, rollup, storybook, cypress, yarn workspace, Lerna, github action

커스터디얼 월렛 웹과 회원가입 및 인증을 할 수 있는 사이트를 운영했습니다. 개선해야할 사항으로 리렌링 문제를 제기하여 전체적으로 점검 및 업데이트했습니다.
https://accounts.nwayplay.com, https://auth.nwayplay.com

• metamask 웰렛 연동 및 커스터디얼 월렛 화면 개발
• 디자인 시스템을 기반으로 emotion, styled-components를 사용해 스타일 구성
• 기술 스택 : React, Typescript, Recoil, emotion, styled-component, web3.js

요양/간병 기관과 환자에게 적절한 서비스의 제안 및 연결할 수 있는 서비스를 제공하는 반응형 플랫폼을 구축했습니다.

• page, component, util 등 프로젝트 폴더 구조 설계 참여
• styled-components 기반 재사용 가능한 컴포넌트 설계 및 개발
• 카카오, 네이버 로그인 적용을 위한 검수 통과 및 기능 개발
• next/bundle-analyzer 테스트와 dynamic import를 활용한 First Load JS 사이즈 감축
• 크롬, 사파리, 삼성 브라우저 크로스브라우징
• 카카오, 구글, 네이버, 로거 광고 스크립트 삽입 작업
• 기술 스택 : Next.js, Typescript, Redux-toolkit, styled-component

사회문제 해결을 위한 플랫폼(세상파일)에서의 기부금, 운영과정 등을 투명하게 보고하기 위한 리포트 시스템을 구축하였습니다.
https://feedback.sesang-file.com

• 파일 첨부/다운로드, 댓글, 팝업, 테이블 등 컴포넌트 설계 및 개발
• SunEditor 기반의 게시판, export pdf 기능 구현
• 웹표준 / 접근성 권장 수준 적용
• ie11 크로스브라우징
• echart 활용하여 리포트 결과 그래프 구현
• 기술 스택 : React, Javascript, Redux-toolkit, SCSS, echarts.js

발전소 별 태양열을 모니터링 할 수 있는 어드민 시스템을 fuse react templete을 활용해 구축했습니다.

• 리덕스로 유저 권한 별 라우팅
• table, pagination, form 등의 컴포넌트 개발
• kakao map api 지도 구현
• csv export 기능 구현
• 기술 스택 : React, Javascript, Redux-toolkit, meterial-ui

국내외 130개 이상의 AD Network와 연동하고 트래픽을 처리하고 매체사와 광고주의 성과 및 효율를 극대화하는 플랫폼을 개발/운영하였습니다. 대시보드 내 신규기능 구현 및 사용성 개선 작업 및 유지보수를 했습니다.

• 테이블 조회 속도 및 사용성 개선을 위한 DataTables.js 도입
• ajax로 parameter 들을 Controller단에 전송해 동적 테이블 생성
• 대시보드 리포트 데이터 생성을 위한 쿼리문 튜닝
• 기술 스택 : HTML, CSS, Javascript, jQuery, JSP

모바일 애드테크 컨퍼런스 맥스서밋 (2019, 2020), 맥스더크리에이티브 (2019 1st, 2019 2nd) 사이트 개발과 SEO 최적화 작업을 했습니다. 2019 맥스더크리에이티브 개발에 React를 도입하였습니다.
https://maxsummit.co/ , https://maxthecreative.co/

• maxsummit(맥스서밋) : HTML, CSS, Javascript, jQuery를 활용한 UI 개발
• maxthecreative(맥스더크리에이티브) : React 도입하여 UI 개발
• CI/CD 구축(git + Netlify docker)을 통한 코드 통합 과정 개선 및 배포 자동화
• SEO를 위한 meta tag 구현
• 유저 행동 트래킹을 위한 GA스크립트, 페이스북 픽셀 삽입
• 기술 스택 : React, HTML, CSS, Javascript, jQuery

사내 홈페이지에서 하드 코딩으로 게시하던 채용공고의 불편함을 줄이고자 백오피스를 제안하여 개발하게 되었습니다. 인사팀에서 쉽게 채용 게시/수정을 할 수 있도록 단독 진행하여 개발했습니다.

• 로그인 : POST 방식 Form 개발, Javascript와 PHP로 Validate 적용
• 게시판 : summernote.js 활용하여 에디터 개발 및 동적 테이블 구현
• 기술 스택 : HTML, CSS, Javascript, jQuery, PHP