프론트앤드 개발자

이태원

3년 차 프론트엔드 개발자로 지도 기반의 반응형 웹 서비스를 개발 및 배포하였습니다. 개발자가 되기 전, 보안 엔지니어로서 Nosql을 통해 고객이 원하는 대시보드, 쿼리를 만들어주는 업무를 진행했습니다.

트랜스파머라는 회사에서 서비스를 성장 시키기 위해 주인 의식을 가지고 어떻게 하면 사용자 입장에서 조금 더 쉽게 서비스에 접근할 수 있는지, 어떻게 하면 사용자가 좀 더 서비스에 머무르게 할 수 있을지에 대해 기획팀, 디자인팀과의 커뮤니케이션하고 협업했습니다.

스테이페이에서는 QR 코드 기반 호텔 서비스 플랫폼을 개발하여, 고객이 QR을 스캔하면 자동 로그인된 환경에서 배달, 예약, 쇼핑, 룸서비스, 직원 호출 등 다양한 서비스를 이용할 수 있도록 구현했습니다. 또한, 해당 플랫폼의 Admin 페이지 유지보수를 담당했으며, 스토어용 주문 관리 시스템을 개발하여 주문 접수, 승인, 배달업체 연동까지 가능하도록 구축하였습니다.

또한 숙박업소 예약 플랫폼의 프론트엔드를 담당하며, 어드민 및 사용자 예약 시스템을 개발했습니다.

책임감

협업 지향

유연함

목표 지향적

고객 중심

SQLD

데이터분석준전문가

노션

React, Next.js, Tailwind CSS 기반의 숙박 예약 플랫폼을 개발했습니다. 어드민 페이지에서는 숙소의 기본 정보, 시즌 및 요금 설정, 서비스·옵션·시설 등의 상세 설정이 가능하며, 일반 숙박업소 점주가 로그인 시 자신의 정산 내역, 예약률, 공실률 등을 확인할 수 있는 대시보드도 제공합니다. 사용자 페이지에서는 숙소 검색부터 예약까지의 전 과정을 구현했으며, 서버 사이드 렌더링과 스켈레톤 UI를 도입해 사용자 경험과 성능을 함께 고려했습니다. 초기엔 펜션 중심으로 설계되었지만, 호텔까지 확장할 수 있도록 구조를 유연하게 구성했습니다.

스테이모아

React와 electron을 기반으로 QR 코드 기반 호텔 서비스 플랫폼의 주문 관리 시스템을 개발하였습니다.<ul><li>주문 승인/거절 및 진행 상태 관리: 고객 주문이 접수되면 해당 주문을 승인하거나 거절할 수 있는 기능을 구현하였으며, 주문 승인 후 배달대행 업체 선택부터 고객에게 배달 완료까지의 과정을 프로그레스바 형태로 시각화하여 실시간으로 관리할 수 있도록 설계하였습니다.</li><li>주문 내역 관리: 모든 주문 내역을 날짜별로 조회할 수 있는 기능을 추가하여, 체계적인 기록 관리 및 확인이 가능하도록 하였습니다.</li><li>설정 폼 제작: 위 이미지와 같이 프린터 포트, 커팅 명령어, 음성 반복 횟수, 볼륨 조절 등 다양한 설정을 조정할 수 있는 폼 UI를 제작하였습니다. 이로써 사용자 친화적인 환경에서 관리자가 원하는 설정을 간편하게 조정할 수 있도록 구현하였습니다. Electron 기반 실행 파일 배포 및 업데이트 관리: 실행 파일은 각 가맹점에 손쉽게 설치되며, Git 업데이트를 통해 프로그램이 최신 상태로 유지되도록 배포 프로세스를 구성하였습니다.</li><li>이슈 로그 서버 구축 및 분석: 별도의 이슈 로그 서버를 구축하여, 프로그램에서 발생하는 오류 및 로그를 API를 통해 수집 및 분석하였습니다. 이를 통해 문제를 빠르게 파악하고 해결할 수 있도록 했습니다.</li><li>Sentry와 Slack 연동: 프로그램 내 오류 및 이슈를 실시간으로 추적하기 위해 Sentry와 연동하였으며, 이를 Slack과 연결하여 팀원들이 발생한 문제를 실시간으로 확인할 수 있도록 시스템을 세팅하였습니다.</li><li>효율적인 유지보수 및 문제 해결: 실시간 로그 분석과 이슈 추적을 통해, 운영 중 발생할 수 있는 문제를 빠르게 대응하고, 가맹점 운영에 지장을 주지 않도록 철저히 관리하였습니다.</li></ul>이 프로젝트는 가맹점 관리의 효율성과 운영 안정성을 극대화하기 위해 설계되었으며, 유지보수 및 업데이트 관리의 편의성을 강조하여 가맹점의 만족도를 높였습니다.

주문 관리 프로그램 개발

QR 코드 기반의 호텔 서비스 플랫폼의 어드민 페이지로, 각 호텔에 매칭되는 스토어를 관리하고 그 스토어에 매칭되는 상품들을 관리하는 페이지를 작업 및 유지보수 하였습니다.

admin 페이지 제작

QR 코드 기반 호텔 서비스 플랫폼을 React 및 Next.js를 활용하여 개발하였습니다. 고객은 호텔 내 제공된 QR 코드를 스캔하면 자동으로 해당 호텔과 연동된 온라인 플랫폼에 접속하며, 추가 로그인 없이 다양한 서비스를 이용할 수 있습니다.플랫폼 내에서 고객은 호텔에 매칭된 스토어를 선택하고, 상품 및 옵션을 구성한 후 결제까지 진행할 수 있도록 전체 프로세스를 설계 및 구현하였습니다. 이를 통해 호텔 투숙객이 룸서비스, 배달, 쇼핑, 예약, 직원 호출 등의 다양한 서비스를 완전 비대면 환경에서 편리하게 이용할 수 있도록 지원하였습니다.또한, 테블릿에서도 동일한 기능을 제공할 수 있도록 React Native(RN)를 활용하여 추가 개발을 진행하였습니다. 이를 통해 웹과 모바일 환경 모두에서 일관된 사용자 경험을 제공하였습니다.이 프로젝트에서는 한때 무분별한 공격으로 인해 트래픽이 기하급수적으로 증가하면서 서버가 다운되는 문제가 주말마다 발생하는 상황이 있었습니다. 이를 해결하기 위해 Cloudflare를 연동하여 DDoS 공격 방어를 성공적으로 구현하였으며, 플랫폼의 안정성과 가용성을 유지하였습니다.이 플랫폼은 호텔 고객에게 혁신적인 서비스 경험을 제공함과 동시에, 실시간 트래픽 관리 및 안정성 강화로 시스템 신뢰도를 크게 향상시켰습니다.

QR 기반 주문 플랫폼 개발

<h4>카카오 맵 연동(7개 서비스 공통)</h4><ul><li>kakao map api를 이용해 카카오 맵 연동</li><li>지도를 움직이면 특정 주소지에 마커 생성</li></ul><h4>Axios 모듈화 및 요청 관리 클래스 구현(React, TypeScript, Axios)</h4><ul><li>Axios 인스턴스 생성: 기본 URL 및 공통 헤더 설정 (토큰 인증 포함).</li><li>요청 인터셉터: 각 요청에 대해 Content-Type 헤더 설정 및 토큰 갱신 처리.</li><li>응답 인터셉터: 토큰 만료 및 서명 오류에 대한 예외 처리 (재로그인 유도).</li><li>HTTP 메서드 래핑: GET, POST, PATCH, DELETE, PUT 메서드에 대한 간단한 래퍼 함수 제공.</li></ul><h4>7개 서비스 제작</h4><ul><li>각 서비스에 맞는 내용을 api 요청을 통해 화면에 뿌리는 업무, 공통된 내용은 컴포넌트화를 통해 재사용성을 높임</li><li>데이터 시각화를 위해 recharts의 linechart, areachart,barchart 등등 차트, mui-slider의 slider, react-slick의 slider 등 시각적인 요소를 커스텀해서 사용</li></ul><h4>전역 상태 관리(Redux)</h4><ul><li>Redux를 사용하여 여러 slice를 조합하여 전역 상태 관리</li><li>Redux-persist를 사용하여 특정 상태를 로컬 스토리지에 영구 저장</li><li>Redux Toolkit을 활용하여 스토어를 구성하고 상태 관리를 최적화</li></ul><h4>다양한 분석 도구, SEO 설정</h4><ul><li>Google Tag Manager 및 Google Analytics 통합을 통해 트래픽 분석 및 사용자 행동 추적</li><li>Naver Analytics를 사용하여 웹사이트 방문자 데이터 수집 및 분석</li><li>react-snap, sitemap.xml, robots.txt, 메타 태그를 사용하여 SEO 최적화</li></ul><h4>서버 구축 및 빌드 파일 배포 </h4><ul><li>nginx를 통해 웹 서버를 구축하고 React 애플리케이션의 빌드 및 배포 프로세스를 관리</li></ul><h4> 랜딩페이지 제작</h4><ul><li>서비스 홍보를 위해 사용자 참여를 유도하고 정보를 효과적으로 전달하기 위한 랜딩 페이지 설계 및 개발.</li><li>사용자가 어떤 랜딩페이지를 통해 유입되서 회원가입을 하게 되었는지 트래킹을 위해 이벤트 작성</li></ul>

트랜스파머 서비스 개발

<h4>대시보드</h4><ul><li>서비스 현 상황을 파악하기 위해 가입자 수 통계 그래프</li><li>포인트 사용 내역 표, 필터 기능 추가</li><li>회원 목록 표, 필터 기능 추가</li></ul><h4>고객문의, 공지사항 연동</h4><ul><li>본 서비스에서 문의한 내용 연동</li><li>공지사항 제작 및 수정 페이지 개발</li></ul>

트랜스파머 관리자 페이지

정책연구원 외주

<ul><li>호텔 또는 모텔 비치된 qr을 통해 숙박하는 손님을 대상으로 한 배달 플랫폼 구축</li><li>테블릿이 호환될 수 있도록 RN으로 추가 개발</li><li>관리자 페이지 유지보수</li><li>매장 점주들이 사용하는 주문 관리 프로그램을 리액트와 일렉트론 프레임워크를 사용해 개발</li><li>호텔, 펜션 예약 사이트 스테이모아 개발</li><li>스테이 모아 관리자 페이지 개발 </li></ul>

<ul><li>가격분석, 매물분석, 농지연금 분석, 농지찾기, 내 농장 진단, 내 집 짓기, 숨은 정책 지원금 7개 서비스 FE관련 개발</li><li>고객 문의, 공지사항, 뉴스룸, 결제페이지 등등 페이지 개발 </li><li>카카오맵 연동</li><li>반응형 웹 개발</li><li>사용자 트래킹을 위해 Google Analytics(GA) 태그 추가</li><li>검색 엔진 최적화</li><li>서비스 버전 관리 및 배포</li><li>데이터 시각화를 위한 차트 라이브러리 커스텀 사용</li></ul>