김영찬

프론트엔드 개발자

복잡한 데이터를 이해하기 쉽게 표현하고,
안정적인 사용자 경험을 제공하는 프론트엔드 개발을 지향합니다.

ROS1, roslibjs 기반 모바일 로봇 검증 UI 개발과 제조 현장 6곳의 협동 로봇 시스템 구축 경험했습니다.

이후 React, Next.js 기반 B2B 데이터 대시보드와 AI 포털을 개발하며 데이터 시각화, 실시간 스트리밍, 비동기 UI 구현 역량을 쌓았습니다.

경력

더에스엠씨

프론트엔드 엔지니어

~ 현재 (3년 10개월)

  • 마케팅
  • 사내 시스템

소셜 마케팅 데이터 대시보드

YouTube·Instagram 콘텐츠 및 광고 성과를 통합 조회하고 비교하는 B2B 데이터 분석 대시보드

주요 기여:

데이터 시각화, UI 품질 검증, 배포 환경 구축

이슈1. 지표 특성을 구분되지 않아 따른 수치 왜곡

누적 조회수는 최종값, 클릭률은 재계산값을 써야 하는 등 지표마다 기간 값 산출 방식이 달라, 일괄 합산하거나 평균하면 틀린 수치가 표시됨

해결 방향
  1. 지표 22종을 일별 발생값, 시점, 비율, 도달 4가지 성격으로 분류하고 표시 규칙 정의

    (비율·도달은 백엔드 집계값을 그대로 사용, 시점값은 증감으로 표시)

  2. 공통 차트 컴포넌트가 지표별로 설정된 값 포맷, 축, 툴팁, 절대값/변화량 모드를 받아 렌더

  3. 플랫폼별 정의가 다른 지표는 합산하지 않고 나란히 표시

성과
  • 공통 차트 하나를 3개 화면에 재사용해 같은 지표의 화면 간 불일치와 왜곡을 제거

  • 지표 추가 시 성격만 지정하면 규칙이 자동 적용되어 확장 비용 최소화

이슈2. 배포 환경 구축

Next.js 무중단 배포와 CI/CD를 지원하는 실행 환경을 구성 필요

해결 방향
  1. 기존 프로젝트의 Terraform 구성을 참고해 ECS Fargate 배포 환경 구성

  2. Blue/Green 무중단 배포와 CI/CD 파이프라인 구축

성과
  • 무중단 배포가 가능한 실행 환경 마련

사내 AI 포털 개발

임직원을 위한 사내 정보 에이전트·범용 AI 채팅 포털. 모델 3종과 사내 에이전트 4종을 한 화면에서 제공하고 직원별 외부 AI 구독 대체

주요 기여:

스트리밍 채팅 프론트엔드 개발, 이후 AWS 인프라 운영으로 담당 범위 확대

이슈1. 스트리밍 응답 처리

외부 모델과 사내 에이전트의 응답을 유형별로 처리해 채팅 화면에 실시간으로 반영해야 했습니다.

해결 방향
  1. 백엔드 개발자와 협의해 스트리밍 응답 이벤트 정의

  2. 외부 모델과 사내 에이전트의 응답 유형별 채팅 UI 반영 로직 구현

성과
  • 스트리밍 응답을 채팅 UI에 실시간 반영

이슈2. 긴 대화의 성능 최적화

대화가 길어질수록 모든 메시지를 한 번에 불러와 그리고, 스트리밍 중에는 답변 전체를 다시 렌더링해 화면이 느려졌습니다.

해결 방향
  1. 최근 메시지만 먼저 불러오고, 위로 스크롤하면 이전 메시지를 이어 불러오는 구간 단위 로딩 (Incremental Loading) 적용

  2. 화면에 보이는 메시지만 그리는 가상 스크롤 적용

  3. 스트리밍 중에는 마크다운을 블록 단위로 메모해 새로 생기는 블록만 렌더링

성과
  • 긴 대화의 첫 화면 표시 시간 50% 단축

  • 스트리밍 중 렌더링 비용 70% 감소

사내 운영 도구 개발

정산 검수, 근무 현황 대시보드를 제공하는 사내 ERP

주요 기여:

프론트엔드 개발, 요구사항 정의 단계부터 참여

이슈1. 정산 검수와 근무시간 취합 자동화

정산 검수와 근무시간 취합에 수작업이 반복되고, 비고와 금액은 규칙만으로 대조하기 어려움

해결 방향
  1. 정산 검수와 근무시간 취합을 시스템화하고, 비고와 금액을 비교하는 LLM 검수 보조 기능 연동

성과
  • 불일치 항목을 화면에 표시해 수작업을 줄이고 업무 효율 개선

코가로보틱스

소프트웨어 엔지니어

~ (1년 6개월)

  • 3D Vision
  • 서빙 로봇

ROS 기반 로봇 진단 및 제어 대시보드

서빙 로봇의 센서 데이터와 동작 상태를 보여 주고 이동을 제어할 수 있는 웹 대시보드 개발

주요 기여:

로봇 센서 데이터 시각화, 이동 제어 UI, 태블릿 환경 지원

이슈1. 실시간 로봇 데이터 처리

여러 ROS 토픽의 데이터가 화면 갱신보다 잦게 들어와, 불필요한 렌더링 없이 실시간으로 반영 필요

해결 방향
  1. rosbridge와 roslibjs로 웹 클라이언트가 필요한 토픽만 구독하는 통신 계층 구성

  2. 토픽별 메시지를 화면에서 쓰는 데이터 모델로 변환해 통신 계층과 화면 컴포넌트의 의존성 분리

  3. 데이터의 변경 빈도와 용도에 따라 보관 방식과 갱신 주기를 다르게 적용

  4. 통신이 끊기거나 데이터가 늦을 때 마지막 수신 시각과 연결 상태를 화면에 명확히 표시

성과
  • 로봇의 센서와 동작 상태를 웹에서 실시간으로 확인할 수 있는 진단 환경 구축

  • 통신과 화면 표시의 책임을 나눠, 새 진단 항목을 쉽게 추가하고 유지보수할 수 있는 구조 마련

인아오리엔탈모터(주)

필드 엔지니어

~ (1년 6개월)

  • 협동 로봇(UR·두산로보틱스)
  • Python SDK 기반 로봇 제어 로직 구현 및 PLC·3D Vision 장비 연동

  • 6개 제조 현장의 로봇 시스템 설치·가동 검증 및 작업자 교육

기술

프론트엔드

JavaScript, TypeScript, React, Next.js, Recharts, Tailwind CSS

상태 관리

TanStack Query(서버), Zustand(클라이언트)

테스트·협업

Git, Vitest, Testing Library

성능

Lighthouse

인프라·배포

AWS, Terraform, GitHub Actions

Tool

Claude Code, Codex

학력

한서대학교

무인항공기학과

2013-03 ~ 2019-02

자격

AWS Certified Solutions Architect Associate 자격 배지

AWS Certified Solutions Architect - Associate (SAA-C03)

Amazon Web Services (AWS)

취득
2026-10
사유:

고가용성과 보안 및 비용 설계를 체계적으로 학습하여, 안정적인 클라우드 아키텍처 설계 역량을 갖추기 위해 취득

AWS Certified AI Practitioner 자격 배지

AWS Certified AI Practitioner (AIF-C01)

Amazon Web Services (AWS)

사유:

AI에 대한 관심으로 AWS AI 서비스 간 차이와 용도를 파악하기 위해 취득