미리보기

로봇 테스트 및 관리 플랫폼 프론트엔드 개발

• UI/UX 개편 및 개선

• WebSocket을 활용한 실시간 데이터 처리 및 시각화

• 사용자 편의성 위주 개발

블록체인 기반 플랫폼 프론트엔드 개발

• UI/UX 개편 및 개선

• Web3 암호화폐 지갑 연동

• WebSocket 및 API 를 활용한 데이터 시각화 및 관리

• 다국어 지원(i18n) 시스템 구축

프로젝트 정보

로봇 출고 전 부품 및 MAP 파일 관리 웹사이트

기술 스택

Vue.js, Pinia, Tailwind css, TypeScript

작업 사항

• 기여도 100%

• Excel Drag & Drop 업로드 기능

  • Drag & Drop 기능을 도입해 로봇 부품 정보를 엑셀 파일 업로드로 간편하게 등록 할 수 있도록 구현

  • 대량의 데이터를 효율적으로 업로드 및 검증할 수 있어 사용자 편의성 개선

• Map 파일 관리 시스템

  • 테스트 과정에서 생성된 Map 파일을 열람 및 다운로드 할 수 있는 기능 구현

  • Map 파일 열람은 Canvas 에 출력하여 데이터 시각화

성과

• Input 데이터로 직접 수많은 데이터 업로드했던 시간 10분 이상 에서 엑셀 업로드 도입으로 5초 미만으로 단축

• 간편한 UI/UX 로 사용자 만족도 99% 달성

프로젝트 정보

로봇 부품 테스트 및 상태 확인 웹사이트

기술 스택

Vue.js, Pinia, bootstrap5, webSocket, TypeScript

작업 사항

• 기여도 100%

• TypeScript 도입

  • 팀의 TypeScript 도입을 직접 추진하여 프로젝트 중간에 도입

  • 코드의 타입 안전성을 확보하고 유지 보수 및 협업 효율성을 개선하여 개발 생산성 향상

• WebSocket 데이터 최적화

  • WebSocket 을 활용해 실시간 데이터 요청 및 처리 시스템 구축

  • 서버 및 클라이언트 과부하를 방지하기 위해 페이지 및 페이지별로 WebSocket 요청과 연결관리를 구현

• 웹 코드 리팩토링

  • AOS(Android OS) 버전 9 대응을 위해 구 버전 호환 리팩토링 진행

  • 코드 최적화를 통해 구 버전에서도 원활하게 작동하도록 개선

• 센서 데이터 시각화

  • MAP 파일, Lidar, ToF, Camera 센서 데이터를 Canvas 및 그래프 형태로 시각화하여 사용자 편의성 강화

  • 실시간 데이터 시각화를 통해 로봇 부품의 상태를 직관적으로 확인할 수 있도록 구현

성과

• 간편하고 접근성을 높인 UI/UX로 전체 테스트 시간 37분에서 10분미만 으로 단축

• UI/UX 및 데이터 시각화로 사용자 평가 98% 달성

프로젝트 정보

강력한 권한을 가진 운영 주체에 의해 운영되는 거래소 솔루션

기술 스택

Vue.js, Pinia, bootstrap, vue-router, WebSocket

작업 사항

• 기여도 20%

• 알림 시스템

  • iziToast 를 활용하여 거래 성사 시 실시간 알림을 구현

  • 사용자 작업에 방해되지 않도록 알림 디자인 및 UX 최적화

• UI/UX 부분 리뉴얼

  • 팀 피드백을 바탕으로 미흡한 부분에 대한 UI/UX를 개선하여 사용자 경험을 향상

프로젝트 정보

사용자간 1:1 방식으로 거래를 지원 및 6가지 이상의 코인&토큰이 지원되며 자체 발행 토큰 상장 가능 사이트

기술 스택

Vue.js, Pinia, bootstrap, vue-router, WebSocket

작업 사항

• 기여도 50%

• WebSocket 기반 채팅 시스템

  • webSocket 을 활용하여 1:1 거래를 할 때의 채팅 시스템 구현으로 거래 접근성을 높임

• 상세 검색 기능

  • 사용자가 거래글을 검색 시 5가지의 필터를 적용해 상세 검색 기능 제공

  • 사용자가 스크롤 할때 다음 거래 리스트를 fetch 하게 Lazy Loading 을 구현

• 실시간 시세 관리

  • Coingecko API 를 통해 실시간 시세를 조회하고 판매 금액과의 차액을 표기하여 사용자 선택의 폭 확대

• 보안 확대

  • Google Authenticator 연동으로 사용자의 계정 보안을 강화

성과

• 필터 기능과 Lazy Loading을 적용해 로딩 시간 단축

프로젝트 정보

관리자가 만든 NFT를 사용자에게 사전에 판매 할 수 있는 솔루션

기술 스택

Vue.js, Vuex, bootstrap, bootstrap-vue

작업 사항

• 기여도 100%

• UI/UX 구현

  • Zeplin 으로 전달 받은 디자인을 프로젝트에 반영하여 관리자 페이지 및 사용자 페이지 UI/UX를 구축

• NFT 이미지 다중 업로드

  • 관리자가 NFT를 생성할 수 있도록 8가지의 형식에 이미지 다중 업로드 기능을 제공

• 카운트 다운 기능

  • 관리자가 설정한 사전 판매 기간에 맞춰 사용자 페이지에 실시간 카운트다운 기능을 구현

  • 1차 판매 기간이 끝나면 자동으로 2차 판매 기간 카운트 다운 시작

성과

• 편의성이 높은 UI/UX 로 사용자 만족도 90% 달성

프로젝트 정보

개방형 NFT 거래소로 누구나 NFT를 거래할 수 있는 형태의 솔루션

기술 스택

Vue.js, Vuex, bootstrap, bootstrap-vue

작업 사항

• 기여도 20%

• UI/UX 개편

  • 사용자 피드백을 반영하여 선택의 폭을 넓히기 위해 4가지 디자인 버전을 제공 및 UI/UX 개편

성과

• UI/UX 개편과 디자인 선택의 다양화로 사용자 피드백을 적극 반영 하였으며, 그 결과 판매량 10% 증가 및 사용자 만족도 7% 향상

프로젝트 정보

블록체인에서 운영되는 마켓플레이스. 암호화폐 트레이더 간에 직접 P2P(개인간 거래)를 지원 하는 솔루션

기술 스택

Vue.js, Vuex, bootstrap, Web3, bootstrap-vue

작업 사항

• 기여도 40%

• UI/UX 전면 개편

  • 사용자 피드백을 반영하여 기존 UI/UX를 개편

• Web3를 활용한 지갑 연결

  • 사용자가 메타마스크, 카이카스 등 다양한 지갑 프로그램을 쉽게 연결할 수 있도록 Web3 연동을 구현

• 트레이드 및 시세 기능

  • locutus 라이브러리를 활용하여 소수점 단위의 정밀한 시세 계산을 구현

  • Chart.js 를 사용해 API 데이터를 기반으로 시세 변동 그래프를 시각화

  • 주요 토큰 시세를 실시간으로 가져와 변동 내역을 UI 에 표기

• 다국어 지원 구조 설계

  • i18n을 활용해 다국어 지원 구조를 설계하고 JSON 기반의 번역 데이터를 관리하여 번역 업데이트를 간소화

성과

• JSON 기반 언어 데이터 관리로 번역 업데이트 시간 20% 단축

• UI/UX 개선 및 데이터 시각화로 사용자 만족도 81%에서 90%로 향상