안녕하세요, 프론트엔드 개발자 최유민입니다.

생성형 AI 서비스 프론트엔드 설계·구축 주도

기술 스택 선정부터 아키텍처, 인증, 디자인 시스템과 모니터링 환경을 담당하고 배포 설정 및 동작 검증 수행

실시간 워크플로우 화면 성능·안정성 개선

SSE 이벤트를 묶어 처리하고 변경된 노드만 다시 렌더링하도록 최적화했으며, 이전 실행 결과가 최신 화면을 덮어쓰는 문제 방지

OpenAPI 기반 모델 입력 화면 자동 생성

모델별 입력 스키마를 해석해 폼과 중첩 데이터를 자동 구성하고, 신규 모델 추가 시 약 2~3시간 소요되던 프론트엔드 작업 제거

디자인 시스템·운영 기반 구축

디자인 토큰, 공통 컴포넌트, Storybook, Sentry 환경을 구축해 UI 일관성과 운영 안정성 향상

대규모 모델 그래프 렌더링 시간 89% 단축

Stable Diffusion UNet XL 기준 렌더링 시간을 172.64초에서 18.85초로 단축

• SVG와 HTML DOM을 결합한 그래프 뷰어에서 대규모 모델(노드 4,000개 이상) 처리 시 수 분의 지연 발생
• 그래프 규모에 따라 레이아웃 알고리즘을 분기하고, O(n²) 배열 탐색과 재귀 처리 등 주요 병목 제거

3단계 우선순위 기반 모델 양자화 설정 시스템 구현

전체 모델·연산자 유형·개별 레이어 설정이 순서에 따라 덮어써지는 구조 구현

• 다중 레이어 일괄 편집, Replace All, 추천 설정 연동, YAML export 제공
• 복잡한 설정 상태를 Redux와 기능별 모듈로 분리해 유지보수성 개선

AG Grid 기반 스프레드시트 편집 기능 구현

Community 버전에서 범위 선택, 필 핸들, Excel 호환 복사·붙여넣기, Undo, 키보드 선택을 직접 구현하고 모든 셀 변경을 단일 처리 구조로 통합

• 백엔드 벌크 API 도입 시 붙여넣은 셀 수와 관계없이 서버 요청 1건으로 처리하도록 확장

다차원 벤치마크 시각화 구현

Nivo 기본 레이어를 확장해 지표별 log·reverse 축과 사용자 지정 범위를 지원하고, 데이터 검증과 호버 영역 개선으로 복잡한 결과를 안정적으로 비교

디자인·다국어 반영 자동화

Figma 토큰과 다국어 문구를 GitHub Actions로 변환·반영해 기획자·디자이너가 개발자 도움 없이 변경사항을 반영할 수 있는 구조 구축

공식 웹사이트 풀스택 구현

전 페이지 프론트엔드와 FastAPI·MongoDB 백엔드를 구현하고, Dockerfile과 Jenkins 설정 파일을 구성해 배포 및 서비스 동작 검증

외부 블로그 콘텐츠 자동 동기화

MongoDB 복합 키 기반 커서 페이지네이션과 RSC 첫 화면 SSR·무한 스크롤을 결합하고, API 장애 시 정적 콘텐츠로 대체하는 fallback 적용

마케팅 데이터·공지 운영 이관

GA4/GTM 6종 이벤트 체계를 설계하고, popup·banner 공지 기능과 운영 문서를 만들어 비개발 직군이 코드 배포 없이 운영하도록 개선

폰트 로딩 최적화

서브셋 분리와 unicode-range, 로케일별 동적 import로 초기 폰트 다운로드를 2.06MB에서 53KB로 97% 축소