(ByeongIk Kim, Frontend Engineer)

신규 서비스 기획부터 운영까지 단독 주도하며 고객사를 4배 확장한 프론트엔드 개발자입니다.

실시간 로봇 제어 UI, 관리자 백오피스 및 CMS, 콘텐츠 서비스 등 다양한 프로덕션 서비스를 개발, 배포, 운영했습니다. 바닐라 JS 레거시 유지보수부터 React / TypeScript 기반 신규 서비스 구축까지 전 단계를 경험했습니다.

구현에 그치지 않고 성능과 운영 효율을 함께 개선해 왔습니다. CMS 관리자 기능 구축으로 운영 세팅 시간을 50% 단축했고, API 호출을 93% 줄여 로딩 속도를 56% 향상했습니다.

기획 단계부터 참여해 요구사항의 목적을 명확히 파악하고, 그 근거를 기술 결정에 반영하는 방식으로 개발합니다.

Portfolio. 김병익 | 프론트엔드 포트폴리오 GitHub. https://github.com/bbyik-k Email. [email protected]

Skill.

Languages

JavaScript TypeScript HTML/CSS

Framework & Libraries

React.js Next.js TanStack Query Redux Zustand SCSS Tailwind CSS Emotion

Tools & Service

Git Storybook Jest VS Code Redmine Jira Firebase Google Analytics GTM

Work Experience.

Future Robot

2018. 10 - 2024. 01 5년 3개월

기술연구소 콘텐츠 팀 프론트엔드 개발자

• 경비로봇 에스코트 신규 서비스 단독 개발 주도 고객사 4배 확장
• CMS, 백오피스 UI 설정 시스템 구축 수동 JSON 편집 → UI 기반 자동화로 로봇 초기 세팅 시간 50% 단축
• 날씨 안내 서비스 개발 및 캐싱 구조 설계 API 호출 93% 감소, 로딩 56% 단축, CS 0건 유지
• 사진 촬영 콘텐츠 리팩터링을 통한 성능 최적화 MediaDevices API 전환으로 CPU 사용량 20% 절감
• 다국어(한/영/중) 지원 로봇 콘텐츠 다수 개발 및 운영

JavaScript React.js TypeScript TTS WebSocket LocalStorage CMS SCSS REST API i18n(다국어 지원) Chart MediaDevices Google Analytics

Project.

날씨 안내 콘텐츠

2023. 01 - 2023. 10 퓨처로봇

실시간 날씨 데이터와 다국어 음성 안내 기능을 통한 맞춤형 예보 서비스

기획 단계부터 프론트엔드 개발을 단독으로 담당, UI/UX 설계부터 기능 개발 및 성능 최적화까지 수행.

• 실시간 데이터 처리: 기상청 API 를 사용해 오늘, 내일, 주간 날씨 정보를 동적으로 렌더링, 실시간 날씨 안내 기능 구현.
• 캐싱 최적화 및 성능 개선:
  • 초기에는 캐싱 없이 API 데이터를 직접 받아왔으나, 기상청 API의 간헐적 응답 오류(주 1회 이상)로 인해 런타임 오류 발생.
  • 비정상적인 응답이 감지될 경우, 최신 데이터(어제 또는 내일 데이터)로 대체하는 로컬스토리지 캐싱, fallback로직 적용.
  • 이를 통해 API 호출 빈도 하루 30회 → 2회, 약 93% 감소.
  • 평균 로딩 시간 1600ms → 700ms, 약 56% 단축.
  • API 응답 관련 오류 발생 0건 유지.
• TTS (Text-to-Speech) 음성 안내 기능: 날씨 데이터를 기반으로 TTS 문구를 생성하여 음성으로 예보 제공, 사용자 편의성 향상.
• i18n 다국어 지원: ko-KR, en-US, zh-CN 언어 데이터를 활용하여 UI 및 음성 안내를 다국어로 제공, 글로벌 사용자 접근성 확대.

https://byeongik.com/projects/weather-app

JavaScript React.js TypeScript 기상청 API localStorage TTS i18n(다국어지원) 웹 성능 최적화

대량 문자 서비스

관리자 사이트 개발

2023. 04 - 2023. 08 문자온 2명(FE, BE) / FE 담당

대량 문자 전송 플랫폼의 데이터 관리 시스템

사용량 통계 조회 및 사용자 관리 기능을 포함한 관리자 페이지 외주 개발.

• 프론트엔드 기획 및 개발을 맡아, API 통신 및 UI 컴포넌트 개발을 수행.
  • 프로덕트 관점에서 고객 요구사항 분석 및 비즈니스 로직 설계.
  • WBS(Work Breakdown Structure) 작성을 통한 개발 일정 조율.
  • MUI(Material-UI) 를 활용한 UI 컴포넌트 스타일링 및 반응형 웹 구현
• API 설계 및 연동
  • 고객사 백엔드 개발자와 데이터 구조 및 REST API 설계 협의, 프론트엔드와 연동.
  • CORS 정책 충돌, credentials 처리, preflight 요청 등 cross-domain 이슈 해결을 위해 백엔드와 협력하여 API 연동을 조정하고 안정적인 데이터 통신을 구현.
• 데이터 시각화 및 대시보드
  • Nivo Chart 를 활용하여 문자 송신 데이터를 선형, 원형, 막대 그래프로 시각화.
  • 문자 송신 데이터를 테이블 형태로 정리 및 표시.
  • xlsx 라이브러리를 활용하여 엑셀 변환 및 다운로드 기능 구현, 관리자 편의성 향상.
• 세션 기반 로그인: 사용자 인증을 위한 로그인 UI 설계 및 구현.
• 코인 충전 기능: 실시간 잔액 관리 및 사용자 코인 충전 기능 개발.

https://byeongik.com/projects/admin-sms-bulk

React.js Redux Nivo-Chart CORS xlsx REST API WBS MUI(Material-UI) 반응형 디자인

RCMS 관리자

사이트 기능 관리

2022. 12 - 2023. 06 퓨처로봇

RCMS (Robot Contents Management System)

기존 관리자 페이지의 데이터 시각화 및 API 연동 기능을 개선하여, 실시간 데이터 처리와 사용자 경험을 최적화한 프로젝트.

• CMS 기능 구현 및 로봇 설정 최적화
• 데이터 시각화: 월별 및 일별 데이터를 시각적으로 표현하기 위해Chart.js를 활용하여 막대, 선형 차트를 구현.

https://byeongik.com/projects/rcms-app

CMS Chart.js React.js