미리보기

🔥 Project

• TMS (Transportation Management System) 개발
• Backend & Frontend 개발 프로세스 기획 / 관리
  ⚙️ Tech Stacks
  
• TypeScript, React, Nest.js, styled-components, Docker, react-query, jotai

🔥 Project

• 배송 경로 최적화 시스템 기획
  
• Backend & Frontend 개발 프로세스 기획 / 관리
  
• 경로 최적화를 위한 Distance Matrix Server 개발
  
  👍 Accomplishment
  
• OSRM(Open Source Routing Machine) 활용하여 Distance Matrix 계산 비용 86.2% 절감 (월 100,000건 TMap 기준)
  
  ⚙️ Tech Stacks
  
• TypeScript, React, Nest.js, OSRM, styled-components, Docker, react-query, jotai

🔥 Project

• 확진자 동선 지도 서비스 기획 / 디자인 / 개발
  
• 웹사이트 초기 랜더링 속도 개선 작업
  
• 검색엔진 최적화
  
  👍 Accomplishment
  
• 누적 사용자 수 1400만 달성
  
• 누적 조회수 4600만 달성
  
• 최대 동시접속자 수 12만명
  
• 2020 대한민국 모바일 어워드 선정
  
  ⚙️ Tech Stacks
  
• TypeScript, React, Express, styled-components, Docker, react-query, jotai

🔥 Project

• 실시간 드로잉 교육 툴 개발
  
• Backend & Frontend 개발 프로세스 기획 / 관리
  
• 메인 웹페이지 및 서버 개발
  
  👍 Accomplishment
  
• Real-Time Data Transfer 비용 99% 절감 (월 100G 기준, Firebase Realtime Database 비교)
  
  ⚙️ Tech Stacks
  
• React, Express, WebRTC

🔥 Project

• 탈모 진단 서비스 기획
  
• 이미지 분석 및 메인 서버 개발
  
• 프로토타이핑 및 릴리즈 일정 관리를 수행
  
  👍 Accomplishment
  
• 탈모 진단 이미지 분석 모델 특허 출원
  
• 누적 다운로드 수 3000회 달성
  
• 정부로부터 사업화 지원금 57,000,000 원을 유치
  
  ⚙️ Tech Stacks
  
• Express, OpenCV

☀️ Summary

• 배송지 최적화를 구현하기 위해 Distance Matrix Server를 OSRM을 활용하여 자체 설계 구현함
  
  🌱 Problem
  
• 타사의 Distance Matrix api 비용이 높아 많은 비용 지출이 예상 됨
  
  ✨ Solution
  
• 클라이언트 요구사항 정의 (최대 요청 수, Distance Matrix 스펙.. 등등)
  
• 타사 API를 대체할 수 있는 OSRM 선택 후 개발 진행
  
  💐 Performance
  
• 요구 사항 정의 후, 타사의 Distance Matrix API 견적 비교
  
• OSRM을 활용한 자체 Distance Matrix Server 설계 및 개발

☀️ Summary

• CI/CD 환경 구축
  
  🌱 Problem
  
• 다양한 개발환경을 관리하고 배포할 수 있는 환경 개발 필요
  
  ✨ Solution
  
• Docker 및 Github Action을 활용한 CI/CD 환경 구축
  
  💐 Performance
  
• 기존 산재 되어있던 관리 및 배포 환경을 통합

☀️ Summary

• 동선데이터를 요구하는 개인,기업,학교가 많아짐에 따라 데이터 판매 프로세스를 설계하고 두가지 방식으로 제공. 데이터를 판매하는 웹, 클라이언트를 관리하는 서비스를 추가로 설계 & 개발하여 보다 쉽게 관리할 수 있도록 함. 월 평균 5~10여건의 데이터 판매.
  
  🌱 Problem
  
• 확진자 동선 데이터를 구매하고 싶어하는 고객의 요청이 많아짐
  
  ✨ Solution
  
• 데이터 포맷을 정의한 후, 개인정보를 제거하여 재가공한 데이터 셋 확보
  
• 고객이 요구하는 '데이터 셋 구매 방식' 과 '월 구독 방식'의 두가지 판매 방식을 정의하고 관련 API 개발
  
  💐 Performance
  
• 약 3만여건의 데이터 중 회사, 거주지 등과 같이 개인을 특정할 수 있는 값을 제거하여 판매할 수 있는 데이터로 재가공
  
• 판매에 필요한 프로세스를 정의한 후 API를 개발하여 서비스의 방향성을 확장시킴

☀️ Summary

• 실시간 드로잉 정보를 전송하기 위한 실시간 서버 개발
  
  🌱 Problem
  
• 기존 실시간 드로잉 서버 유지 비용이 높아 개선 필요
  
  ✨ Solution
  
• Socket.io 와 WebRTC를 활용한 P2P 통신 서버 개발
  
  💐 Performance
  
• 기존 서버 운영 비용 99% 절감

☀️ Summary

• 스크롤 인터렉션을 적용한 홈페이지 개발
  
  💐 Performance
  
• 로그인 / 회원가입 기능 및 세부 페이지 개발
  
• 홈페이지 관리 페이지 제작

☀️ Summary

• 동선 데이터가 증가하고 사용자가 늘어 웹사이트 접속 시 렌더링 속도가 약 3초 정도로 느려지는 현상 발생, 이를 개발적인 방법과 비개발적인 방법을 활용하여 개선하는 작업을 수행
  
  🌱 Problem
  
• 동선 데이터가 3000건을 넘어감에 따라 초기 렌더링 속도가 느려지는 현상 발생, 사용자 이탈률 증가 (크롬 기준 3초, 이탈률 23% 증가)
  
  ✨ Solution
  
• 확진자 방문 기간을 차등적으로 분류, 14일 이전 데이터만 제공
  
• Marker Clutering 기능을 활용하여 초기 렌더링 속도 개선
  
  💐 Performance
  
• 확진자 동선 데이터를 '24시간 미만, 13일, 314일' 로 나누어 제공
  
• 마커를 모아 시각화 해주는 Clutering 기능을 적용하여 초기 렌더링 속도 개선 (3초 -> 0.3초 미만)

☀️ Summary

• 사용자가 늘어남에 따라 기존 소스코드의 개선 필요, 기존 Express로 운영하던 프로젝트를 Express + React로 나누는 개선 작업 진행
  
  🌱 Problem
  
• 기존 프로젝트는 프론트엔드 + 백엔드를 Express 하나로 개발
  
• 사용자가 폭발적으로 증가하고 기능이 추가됨에 따라 기존 코드베이스로(Express)로는 관리 및 유지보수가 어려워짐
  
  ✨ Solution
  
• Express 로 개발된 프로젝트를 React + Express 로 분리
  
• Github Action을 활용한 CI/CD 환경 구축
  
  💐 Performance
  
• 프론트와 백엔드를 나눠 개발하여 유지 보수 및 관리 효율성 증가
  
• CI/CD 환경 구축 후 개발 및 배포 시간 단축

☀️ Summary

• 사용자들의 요청으로 모바일 앱 / 웨일 익스텐션 개발
  
  🌱 Problem
  
• 코로나맵의 모바일 앱과 익스텐션 제작의 요구가 많아짐
  
  ✨ Solution
  
• 네이버 웨일 스토어 익스텐션 제작 및 출시
  
• Web View 방식으로 모바일 앱 제작 (원스토어 출시)
  
  💐 Performance
  
• 네이버 웨일 스토어 소셜부분 8위 / 사용자 수 48,251 / 다운로드 수 56,555
  
• 원스토어 모바일 앱 출시

☀️ Summary

• 사용자들이 정확한 데이터를 얻을 수 없는 상황으로 인해 불안감을 겪고 있는 것을 인지하고, 동선 데이터를 지도위에 시각화 함으로서 정보격차를 해소할 수 있는 서비스 기획 및 개발
  
  🌱 Problem
  
• 코로나 19 초기 당시 확진자의 동선 정보를 한눈에 확인할 수 없는 불편함
  
  ✨ Solution
  
• 지도 위에 확진자 동선을 시각화
  
• Google Analytics 데이터 기반으로 서비스 사용 패턴을 관찰 후 개선
  
• 개별적으로 관리되고 있던 동선 데이터를 자동 수집
  
  💐 Performance
  
• 질병관리청의 이미지 데이터를 바탕으로 공신력 있는 정보를 보다 쉽게 확인할 수 있도록 서비스 기획
  
• 각 지자체 별로 상이하게 제공하고 있는 데이터를 자동적으로 수집 하도로록 시스템 설계 후 웹크롤러 개발

☀️ Summary

• 소규모 창업 팀을 구성하여 '사진 한장으로 진단하는 탈모진단 앱' 아이템으로 창업 지원 대회에서 대상을 받은 후 정부로부터 사업화 지원을 받음.
  
  사업화 자금 확보 후 팀 빌딩, 사업 모델 개발, 서비스 개발 순으로 사업을 진행함.
  
  최종적으로는 수익 모델을 찾지 못하여 실패했지만, 그 과정에서 기업가 정신을 배양하였고 IT 스타트업 커리어에 대한 목표를 가지게 됨.
  
  🌱 Problem
  
• '내가 지금 탈모인가?' 라는 고민이 2~30대 에서 늘어나고 있음
  
  ✨ Solution
  
• 직접 인터뷰를 통해 2~30대의 탈모에 대한 인식과 고민을 분석
  
• 간편하게 사진 한장으로 탈모를 진단할 수 있는 아이디어를 제안
  
• 이미지 분석 모델 개발 (OpenCV)
  
  💐 Performance
  
• 50여명의 2~30대 대면 인터뷰를 통해 핵심 문제점 파악
  
• 디자이너, 개발자와 프로젝트의 우선순위를 선정하여 주도적으로 프로젝트를 진행할 수 있도록 리드