미리보기

전기 오토바이 및 배터리 교환 스테이션을 제공하는 선도적인 기업 젠트로피의 초기 멤버로서 활동하고 있습니다. 저는 서비스 기획 및 외주 업체와의 협력을 통해 모바일 앱, 웹사이트, 백오피스 등을 론칭한 경험이 있습니다. 2021년부터는 서비스 유지보수에 관심을 갖게 되었고, 이후에는 개발 엔지니어로서 주로 홈페이지, 백오피스 기획 및 개발을 담당해오고 있습니다.

개발 담당 업무

• Nextjs 홈페이지 다국어 서비스 및 seo개선

• 백오피스 2FA 도입

  • 개인 정보 접근 제어 강화

• 펌웨어, 배터리, 차량 등 자산 관리 시스템 기획 및 개발

  • 데이터 정확성 향상과 이력 관리 편의성을 동시에 실현하여 업무 효율성 향상

• 차량 대차 관리 기획 및 개발

  • 엑셀을 통한 이력 관리로 인한 의사소통 및 불만 사항이 감소

  • 차량 사용 현황을 한눈에 파악하여 효율적인 차량 관리를 실현

• 홈페이지 개편 프로젝트 기획 및 개발

  • 방문자 수 5배 증가

  • 다양한 기능을 자유롭게 추가할 수 있는 확장성을 확보

• 홈페이지 및 모바일 게시판 관리 기획 및 개발

  • 타 사이트 게시판을 내부 시스템으로 이관하여 관리자의 유지보수 편의를 높임

• 안드로이드 앱 유지보수

  • Android 13 Notification Permission 대응

Description

React 기반 CSR 홈페이지를 Nextjs로 마이그레이션하면서 UI/UX개선, SEO개선 및 영어지원 서비스를 구축했습니다.

What did I do

• SEO 평균 70%에서 100%로 개선(lighthouse기준)

• Cypress로 통합테스트 도입하여 QA 시간 단축

• 페이지 로드시 Blank Screen Issue 해소를 위해 UI skeleton 사용으로 사용자 경험 향상

• typeof window를 이용하여 클라이언트 사이드에서도 사용할 수 있는 번역훅 작업

• 영어/한국어 텍스트 길이에 따른 디자인 차이를 고려한 작업

• DB에 직접 연결하여 게시판 조회 API 구축.

• storybook을 활용한 공통 UI 컴포넌트 설계

Tech

Next.js, Typescript, Sass, Storybook, i18next, zustand, cypress, axios

Description

백오피스 보안을 강화하고 데이터를 보호하기 위해 2FA 인증을 도입했습니다. Google Authenticator 앱을 활용한 TOTP 로그인 인증 및 TOTP 등록 이메일 전송 기능을 구현했습니다.

What did I do

• 사용자와 서버 공유용 TOTP 시크릿키 암호화

• 사용자와 서버 TOTP 일치 여부 검증 기능 구현

• Gmail smtp 서버를 사용하여 Google Authenticator 앱 등록용 이메일 보내기 기능 구현

Tech

React, TypeScript, Tanstack-query, Spring boot, Kotlin

Description

차량 정보, 펌웨어, 하드웨어 등을 사용자가 쉽게 관리할 수 있는 페이지들을 개발했습니다. 펌웨어, 하드웨어 버전을 수작업으로 관리해야했던 번거로움을 해소할 수 있었습니다. 또한 데이터 정확성 95% 이상 달성과 문제 상황 발생시 상태 모니터링 및 이력 관리 편의성을 동시에 실현하여 업무 효율성도 향상되었습니다.

What did I do

• 사용자 요구사항 분석

• 기능 정의서 작성

• UI 설계 (Figma)

• MyBatis와 JPA를 활용한 CRUD API 개발

Tech

Spring boot, Kotlin

Description

타 사이트에서 게시물 관리를 하면서 게시물을 자주 올리지 않는 상황에서도 매번 계정 정보를 찾아야 하는 번거로움과 옛날 에디터를 사용하여 게시물 작성 시 표를 그리거나 HTML로 영상을 삽입하는 불편함을 경험했습니다. 이러한 문제를 해결하기 위해 사내 시스템으로의 이전을 통해 친숙한 편집기를 도입하는 프로젝트를 진행했습니다. 또한, 다른 사이트에 있던 게시판을 사내 시스템으로 이전하고, 홈페이지와 모바일 앱에 적합한 공지사항 및 FAQ 게시판을 새롭게 개발하였습니다. 이와 함께 URL 파라미터를 활용하여 게시물을 쉽게 조회할 수 있도록 하였습니다.

What did I do

• Toast UI Editor를 활용하여 게시물 쓰기 기능 개발
• 유튜브 링크 삽입 기능 개발
• 게시물 CRUD API 개발
• react useSearchParams 활용하여 검색어, 카테고리 데이터 유지

Tech

React, TypeScript, Styled-components, Spring boot, Kotlin

Description

수작업으로 차량 대차 관리를 하여 발생하는 문제점을 해소하고자
사내 시스템을 통해 차량 대차 관리를 효율화하고 자동화하는 프로젝트를 진행하게 되었습니다.
결과적으로 사용자들은 실시간으로 대차 현황을 확인할 수 있게 되었고 자동화
기능으로 업무 효율성과 정확성이 증가하였습니다.

What did I do

• 사용자 요구사항 분석
• 기능 정의서 작성
• UI 설계 (Figma)
• 차량 대차 현황 조회 UI 및 API 개발
• 대차 정보 업데이트 UI 및 API 개발
• 대차 이력 자동화 API 개발

Tech

React, TypeScript, Styled-components, Spring boot, Kotlin

Description

스크롤 내리면 영상처럼 흘러가는 홍보 페이지를 제작하였습니다. 영상을 0.1~0.2s 프레임 단위로 이미지 그룹을 만들어 viewport와 scrollY 위치값에 따라 이미지가 바뀌도록 연출했습니다.

What did I do

• 스토리 보드 작성
• UI 설계 (Figma)
• Framer Motion, Intersection Observer API, Canvas를 활용한 반응형 홍보 페이지 개발
• mix-blend-mode css 속성으로 영상 위에도 잘 보이는 텍스트 스타일 연출
• 반응형 웹 대응

Tech

React, Styled-components, Framer motion

Link

젠트로피 홈페이지