미리보기

• 스마트팜 양계 종합관리 웹 솔루션 "치킨몽거"의 프론트엔드 전담

• 자사 홈페이지 개발

• Next.js, TypeScript, SCSS, React Query, Git, Github, Recoil, Jotai, React Hook Form, ESLint, Prettier, Figma, Jira, Confluence

• 실시간 주행 분석 솔루션 서비스 및 기타 프로젝트의 프론트엔드 개발 및 유지보수

• 자사에서 제공하는 각종 웹 페이지의 마크업 개발 및 유지보수

• HTML, CSS, JavaScript, EJS, SCSS, jQuery, D3.js, Google maps API, AJAX, WebSocket, AWS S3, AWS CloudFront, JSON

• 비상주 인력으로서 신라젠 기업 홈페이지 리뉴얼 웹 퍼블리싱 작업 참여

• 홈페이지 구성과 인터렉션 부분에 대한 기획 참여

• 담당 디자인 팀장님과의 활발한 소통을 통한 협업 진행

• HTML/CSS, jQuery, PHP, Photoshop

• 중소기업 및 공공기관 프로젝트의 웹 디자인 및 퍼블리싱 작업 담당

• 팀 내 인원과 활발한 소통을 통한 협업 진행

• 웹 디자인 작업 참여도 다수 있으나, 대부분은 웹 퍼블리싱 작업 위주로 프로젝트 진행

• HTML, CSS, jQuery, PHP(그누보드5), Photoshop, Illustrato

주요 참여

• 대전 시청 청년정책 사업 “청춘광장” 홈페이지 웹 퍼블리싱 및 디자인 참여 (2018)

• 한스산업 웹 퍼블리싱 및 디자인 참여 (2018)

• 레인보우 로보틱스 홈페이지 웹 디자인 및 퍼블리싱 (2018)

• 레인보우 아스트로 홈페이지 웹 퍼블리싱 (2018)

• 대전 MICE 웹진 디자인 및 퍼블리싱 (2018)

인공지능 기반 스마트팜 양계 종합관리 웹 솔루션

(아직 정식오픈 전입니다)

• 프로젝트 정식오픈을 위한 3차 개선 단계부터 투입

• Next.js + TypeScript 기반의 프로젝트 환경 구성

• 입력 관리를 위해 React-Hook-Form 도입

• API 호출 데이터 관리는 React Query, UI 상태관리는 Recoil을 각각 도입하여 적용 (Jotai로 마이그레이션중)

• TypeScript, Eslint, Prettier 도입을 통해 일관성 및 안정성 지향

• 시각화 대시보드 화면에서 Recharts 도입

• Next.js, TypeScript, ReactQuery, Jotai, Recoil, React Hook Form, SCSS, ESLint, Prettier, Git, Github, Figma, Jira, Confluence

팀 단위 주행 관제 솔루션

https://3secondz.com/livedemo

• 3SECONDZ 주력 서비스 상품

• 차량에 장착하는 자사 하드웨어 XYRO를 통해 텔레메트리 데이터를 수신받아 웹 화면에 시각화하여, 각 차량의 실시간 상태를 모니터링하는 솔루션 서비스

• 개인 회원을 위한 관리 페이지 개선 및 유지보수

• 모바일 앱 웹뷰 화면의 개선 및 유지보수, 추가 개발 등

• HTML, SASS, JavaScript, jQuery, D3.js, EJS, AJAX, WebSocket, Google Maps API, Git, Github, JSON, Zeplin

국내 최대 모터스포츠 경기 SUPERRACE의 경기 관제 솔루션 및 방송용 HUD 제작

• 경기 관제를 위한 솔루션 웹 페이지 개발

• 방송 화면에서 특정 드라이버 주행 시 오버레이할 HUD 컨트롤 웹 페이지 제작 등

• HUD 실제 중계방송화면 https://youtu.be/33_xidx9cH8?si=NyvM74esvtyj0MlY&t=1391

• HTML, SASS, JavaScript, jQuery, D3.js, AJAX, WebSocket, Git, Github, JSON, Zeplin, EJS

주행했던 특정 세션에 대해, 다른 주행 데이터와 비교하여 분석할 수 있도록 서비스 제공

https://3secondz.com/demo

• 주행 데이터에 대한 각 텔레메트리 데이터 채널 별로 라인 차트 개발

• 라인 차트에 대한 패닝 및 줌 인터랙션 기능 개발

• 트랙 탐색을 위한 패닝 및 줌 인터랙션 기능 개발

• 주행 데이터의 타임스탬프 등을 활용한 재생 기능 개발

• HTML, SASS, jQuery, D3.js, AJAX, JSON, Git, JavaScript, Zeplin, EJS

한국타이어 R&D용 타이어 센서 모니터링 패널 개발

• 타이어 센서로부터 수신받은 데이터를 데이터 값, 게이지 그래픽, 라인 차트 등으로 시각화하여 표현

• HTML, SASS, jQuery, JavaScript, D3.js, AJAX, WebSocket, Git, Github, JSON, Zeplin, EJS

렌터카 주행 상태 관리를 위한 대시보드 데모 개발

• Vitejs 환경으로 개발 시작

• 대시보드에 사용된 차트는 대부분 Chart.js로 구현

• FullCalendar를 활용한 달력 차트 구현

• svg 생성 및 인터랙션에 d3.js 활용

• 웹소켓을 통해 실시간으로 업로드된 데이터를 시각화 처리

• mapbox를 활용한 경로 표현

• Vite, HTML, SCSS, jQuery, AJAX, Mapbox, JavaScript, JSON, Git, Github, Chart.js, D3.js, WebSocket, Zeplin

택시 주행 데이터 관리를 위한 데모 개발

• 주행 데이터에 대한 주행 경로 표현, 각 이벤트 지점, 구간 재생 등 타임스탬프 기반 인터랙션 개발

• 경로 표현, 이벤트 지점 마커, 지역 표현에 google maps API를 활용

• 지역 표현에 kakao API도 활용

• 지역별 통계 표현에는 leaflet 활용

• 대시보드의 라인 차트에 d3.js 활용

• HTML, SASS, jQuery, D3.js, AJAX, Google Maps API, JavaScript, Leaflet, JSON, Git, Github, Zeplin

기관 및 R&D를 위한 종합 주행 관제 솔루션 개발

• 기관 및 R&D를 위해, 제한없는 다수의 차량을 종합적으로 관리할 수 있는 서비스 개발

• 주행 차량 관리를 위한 관리 페이지, 주행 관제 페이지 등 개발 및 유지보수 참여

• HTML, SASS, jQuery, JavaScript, AJAX, WebSocket, Git, Github, JSON, Zeplin, EJS

자사 소개 홈페이지의 리뉴얼 프로젝트

https://uniai.co.kr/

https://github.com/uniai-corp/uniai-corp.github.io

• Next.js SSG 기능으로 빌드 및 배포

• 기존 WIX 구축 홈페이지에서, 컨텐츠 교체 및 홈페이지 레이아웃 개선 등을 위한 리뉴얼 프로젝트 작업 진행

• SPA 영문화 첫 작업

• Next.js, TypeScript, Jotai, SCSS, GSAP, ESLint, Prettier, Git, Github, Figma, Confluence

XYRO, TeamSolution, 구매방법 등의 프로모션을 위한 반응형 웹 페이지 3종

https://3secondz.com/service/info_teamsolution

• 하드웨어 및 웹 솔루션 서비스 관련한 프로모션을 위해 반응형 웹 페이지 3개 페이지 제작

• 현재는 이전 제작 3개 페이지에서, TeamSolution 페이지만 존재

• HTML, SASS, JavaScript, jQuery, EJS, Git, Github, Zeplin

자사 제품 사용법 및 Q&A, AS 등 정보 제공

고객지원 | 3SECONDZ

• 자사 제품의 사용 설명서 및 Q&A 페이지 제작, AS를 위한 정보 제공 페이지 제작

• HTML, SASS, jQuery, EJS, Git, Github, Zeplin, Google Maps API

자사 홈페이지 리뉴얼

https://3secondz.com/

• 기존 랜딩페이지에서 멀티페이지 구성으로 변경

• 서비스 관련 페이지는 플랫폼으로 재구성하여 개발 (https://3secondz.com/service)

• HTML, SASS, jQuery, JavaScript, AJAX, WebSocket, Git, Github, JSON, Zeplin, EJS

신라젠 홈페이지 리뉴얼 홈페이지에 퍼블리싱 외주 참여

http://www.sillajen.com/kor/

• 퍼블리싱 외주 인력으로 참여

• php 환경으로 반응형 웹 제작

• HTML/CSS, jQuery, PHP, Photoshop

대전광역시 청년 사업인 "청년공간" 홈페이지 제작

• 메인 페이지 및 서브페이지 공통 요소에 대한 웹 디자인 참여 (30%)

• header, footer 및 gnb 등 공통 요소 제작 및 php로 컴포넌트화 작업

• 각 페이지 반응형 처리 등 퍼블리싱 전반 참여 (80%)

• 그누보드 기반으로 적용 작업

• HTML/CSS, jQuery, PHP, 그누보드, Photoshop