미리보기
기본 정보
주어진 문제를 구조적으로 분석하고, 개선 프로세스를 제안해온 프론트엔드 개발자 강유진입니다. 스팀에서 8000명 이상의 유저 평가가 ‘매우 긍정적’을 기록한 3D 게임 프로젝트에서 배경 팀장 역할을 맡아 일정·리소스 관리를 주도했고, AI LLM 기반 플랫폼 개발에서는 코드 중복률을 70% 이상 줄이는 공용 컴포넌트를 구축해 효율적인 협업 환경을 만들어 왔습니다. 변화에 빠르게 대응하며 팀의 생산성을 높이는 것에 강점이 있으며, 복잡한 문제를 체계화하고 능동적으로 해결해 가치를 창출하는 개발자가 되고자 합니다. 사용자 경험을 부드럽게 연결하는 흐름을 고민하고, 팀과 함께 더 정돈된 개발 환경을 만들어가고 싶습니다.
기술 스택
JavaScript, React, HTML/CSS, TypeScript, frontend, React Native, TailwindCSS, 3d, glsl, Three.js
경력
(주)모비젠
팀원 | 개발팀
2024.11. ~ 2025.01. (3개월)
1. 공용 테이블 컴포넌트 구축을 통한 개발 생산성 향상
문제 정의
회사 서비스에서 10개 이상의 테이블 UI가 사용되었고, 도메인마다 요구되는 기능(예: 삭제/수정·토글 뷰 전환·검색/필터)과 데이터 형식이 제각각이었음.
어떤 도메인에서는 액션 셀(수정/삭제 등)이 필요하지만, 다른 도메인에서는 표시가 불필요한 경우
동일한 ‘id’ 데이터라도 API 스펙에 따라 ‘uuid’라고 표기되거나, 필드명이 다르게 들어와 타입 정의가 어려운 사례가 다수
또한 데이터/카드 뷰 간 토글 기능, 검색·필터 등 UI 요소가 각각 중복 작성되고, 자잘한 차이(“어느 도메인에서는 안 보이는 컬럼이 있다” 등)로 인해 매번 새로 복사/수정하는 방식이 사용됨
이로 인해 신규 요구사항이나 추가 도메인 지원이 발생할 때마다, 유사 로직을 중복해서 3시간 이상 걸려 작성하거나, API 필드명 불일치를 처리하느라 타입을 자주 수정해야하는 상황
'테이블 로직을 공용화해 유지보수와 개발 속도를 높이자.'라는 는 논의가 끝에 React Table 기반의 통합 컴포넌트 개발을 추진
문제 해결
테이블 구조와 옵션을 ‘BaseTable’ 컴포넌트로 추상화
검색, 필터, 정렬, 액션 셀 등 테이블에 공통적으로 들어가는 기능을 Hook + Props 기반으로 모듈화
도메인별 ‘Column config’만 구성하면 BaseTable로 바로 적용
각각의 도메인(예: Dataset, Agent 등)에선 필요한 컬럼 설정(Header, accessor, CustomCell 등)만 정의하면 공통 테이블 컴포넌트에 주입해 테이블이 구성되도록 함
유사 데이터라도 key명이 다른 상황(id vs uuid 등)은 CustomCell 내부나 Column accessor에서 처리하도록 분리해, 테이블 구조는 유지하면서 도메인 로직만 따로 관리하게끔 구현
성과
테이블 구현에만 3시간 이상 소비되던 로직이 30분 내로 구현 가능해져, 신규 개발자 2명도 1일 내 UI를 완성할 수 있게됨
코드 중복률이 70% 이상 감소. 도메인별로 일부만 수정하면 전체 UI에 반영되기 때문에 변경 이슈에 대한 유지보수 효율이 크게 상승
검색/필터/토글 뷰 등의 공통 기능을 일관되게 제공하여, UX 역시 정비되고 테이블 레이아웃에 대한 혼선을 줄임
2. 노드 이름 생성 로직 개선을 통한 사용성 향상
문제 정의
“타입별로 여러 노드가 중복 생성될 수 있지만, 사용자가 노드 이름을 편집할 수 있어야 한다”는 요구사항
즉, 노드 이름은 유일해야 하면서도, 해당 노드의 타입이 쉽게 드러나도록 “타입_번호” 형태로 자동 생성하는 로직이 필요
처음에는 “타입 + 숫자 카운트” 로 이름을 붙이는 방식을 시도했지만, 새 에이전트를 ‘처음 생성’할 때는 잘 작동해도 수정 화면에서 재접속하면 카운트가 0으로 초기화되어 중복된 노드 이름이 붙는 버그가 발생
급한 대안으로 UUID(node-7f2d9c35-a31f5b82) 방식이 적용되었지만, 너무 길고 직관적이지 않아 사용자·운영자 모두에게 가독성과 관리 측면에서 불편을 초래함
특히 노드 검색·필터링 기능을 향후 확장해야 하는 상황에서, 이 같은 비직관적 네이밍 구조는 UX 저하를 야기할 위험이 크다고 판단함
문제 해결
노드 이름을 자동 생성할 때, 이미 존재하는 노드 이름을 전부 검사하여 중복되지 않는 인덱스를 찾아붙이는 방식으로 변경
수정 화면에서도 기존 노드 정보를 상태에서 정확히 불러와 카운트를 이어갈 수 있도록 보완하여, 중복 생성 버그를 제거
이로써 ‘타입_번호’ 형태의 짧고 직관적인 이름을 안정적으로 유지할 수 있게 됨.
노드 이름 길이를 70% 이상 줄여 가독성, 편집 용이성 그리고 운영 관리성 모두 크게 개선함
3. 공통 코드 스타일 확립 및 개발 환경 세팅
문제 정의
WebStorm 사용 요구로 팀원들이 초기 설정에 어려움을 겪었고, 운영체제별 줄바꿈·공백 차이로 인해 Git 충돌과 ESLint 오류가 잦았음
문제 해결
ESLint·Prettier 설정 통합: .eslintrc, .prettierrc 설정을 일관성 있게 적용하고, endOfLine 옵션으로 운영체제별 줄바꿈 충돌을 방지
개발 환경 문서화: WebStorm 자동 포맷팅 및 ESLint 설정 방법을 정리해, 신규 팀원이 빠르게 환경을 구축하도록 지원
성과
포맷팅 관련 충돌이 50% 이상 감소했고, 가이드 문서로 인해 온보딩 시간이 단축되어 협업 효율이 크게 개선
