siesdart.fly.dev

React·Next.js 기반 사내 백오피스(Back Office) 웹 서비스의 프론트엔드 개발

1. 게임 개발 팀의 효율적인 콘텐츠 제작 및 모니터링 등 종합적인 게임 개발/운영을 돕기 위한 Next.js 기반 게임 콘솔 개발
   • Remote Config, Leaderboard 등 게임 제작에 필요한 신규 사내 모듈의 콘솔 프론트엔드 구현
   • 모바일과 데스크톱에서 UI가 달라 반응형 CSS 대신 브라우저 너비를 기준으로 JS단에서 UI를 분기하는 특정 페이지에서 페이지 접속 시 모바일에서 순간적으로 데스크톱 UI가 렌더되다 바뀌는 등의 레이아웃 시프트 포착, 팀 공유 후 대응책을 조사해 클라이언트 사이드에서 브라우저 너비를 계산하여 상태를 갱신하던 방식의 로직을 브라우저의 요청 헤더에 들어있는 User-Agent 값을 바탕으로 서버 사이드에서부터 사용자 기기를 판단하여 적절한 UI를 반환해주도록 CLS 개선
   • 기존에는 Antd로 UI가 작성되어 있었으나 프로젝트에서 사용하는 Tailwind CSS와 스타일에서 충돌이 발생하고 패키지가 무거워 개발 경험이 좋지 못하다고 판단, 팀 논의를 통해 오버엔지니어링 대신 백오피스에 특화된 경량 사내 UI 컴포넌트 패키지를 제작(3번 항목 참조)하기로 결정하고 이후 Antd에서 신규 패키지로의 컴포넌트 교체 작업 주도
2. KPI 등 게임 데이터를 시각화하여 사내 의사결정을 지원하는 Next.js 기반 데이터 플랫폼 개발
   • Tableau Embedding API를 사용한 Tableau 뷰 리액트 컴포넌트 제작
   • 공통된 UI를 가진 데이터 뷰가 별도의 페이지 코드로 하드코딩된 기존 구조가 장기적인 관점에서의 개발 및 유지보수에 비효율적이라 판단, 데이터 뷰 코드를 동적 세그먼트 페이지 하나로 공통화하고 JSON 형식의 설정 파일을 만들어 해당 설정에 기반해 페이지가 URL 세그먼트에 따라 동적으로 렌더되도록 하는 Configuration Driven Development(CDD) 방식으로 프로젝트 구조 재설계
   • 이외에도 코호트 필터 등 잦은 변경이 필요한 설정을 하드코딩이 아닌 분리된 JSON 설정 파일에서 가져오도록 수정하여 대부분의 케이스에서 코드가 아닌 한 곳에 응집된 설정 파일의 내용 수정만으로 작업이 가능하도록 유지보수성 향상
   • Zustand를 도입하여 난잡하게 파편화되어있던 각종 상태(필터, 북마크 등)를 역할 별로 추상화 및 정리해 가독성 및 유지보수성 개선
   • Next.js의 generateStaticParams 함수를 활용해 동적인 데이터 페이지가 빌드 과정에서 SSG로 사전 생성되도록 하여 페이지 초기 로딩 성능 개선
3. UI 일관성 및 중복 개발 리소스 최소화를 위한 20여 종의 컴포넌트로 이루어진 사내 공통 React UI 패키지 개발
   • Radix UI 등 헤드리스 UI 패키지에 기반하여 컴포넌트를 제작하는 방향을 고민하였으나, 타겟이 외부가 아닌 빠르고 쉽게 백오피스 서비스를 만들고자 하는 사내 구성원인 만큼 별도의 UI 패키지를 쓰지 않고 가볍고 직관적인 인터페이스와 구조로 제작하고 주기적인 빠른 업데이트로 대응하는 방향으로 결정
   • 패키지 컴포넌트 제작 과정에서 코드 변경에 따른 실시간 변화를 시각적으로 보고 테스트하는데 어려움을 느껴 개발자 경험 향상을 위해 Storybook 리서치 후 팀에 도입을 제안하여 프로젝트에 적용
   • 사내 구성원들 간 패키지 컴포넌트 스펙 및 인터페이스의 실시간 공유를 통한 업무 효율성 향상을 위해 패키지 배포 시 Storybook 역시 사내에 정적 사이트로 함께 배포되도록 CI/CD 추가
4. UI, GNB 등 사내 패키지의 에이전트 통합 개발 생산성 향상을 위한 AI 타겟 문서 작성 및 MCP 웹 허브 구축
   • 에이전트가 작업 시 패키지 별 필요한 문서를 읽을 수 있는 MCP의 설치 명령어를 버튼 원클릭으로 복사할 수 있는 웹 허브 구현
   • 패키지 업데이트마다 매번 변경된 부분에 대해 AI 문서를 직접 수정해야 한다는 것에 불편을 느껴 패키지의 변경 사항 diff를 바탕으로 초기 문서 수정을 자동화하는 커스텀 커맨드 작성
   • 처음에는 에이전트용으로 문서를 작성하였으나 사람에게도 도움이 되는 내용이 있다고 판단해 UI 패키지의 경우 Storybook에 마크다운 컴포넌트를 구현하여 AI 타겟 문서를 인간 개발자/디자이너도 즉시 열람할 수 있는 통합 문서 사이트로 확장해 팀 개발 경험을 향상
5. 사용자의 자연어 요구사항을 기반으로 사내 UI 및 GNB 등 공통 패키지를 사용해 백오피스 프로토타입을 신속하게 빌드하는 에이전트 하네스 구축
   • UI, GNB 등 사내 패키지들의 에이전트 문서에 접근하는 방법을 담은 에이전트 스킬 작성
   • 에이전트를 디자이너, 개발자, 리뷰어의 역할로 나누어 디자이너 -> 개발자 -> 리뷰어의 흐름으로 사용자의 요구사항을 Next.js와 사내 패키지들을 사용하여 구현하도록 커맨드 작성

공군 컴퓨터자산관리체계(CAMS) 운영 및 기능 개선

1. Tibero 기반의 공군 컴퓨터자산 데이터베이스 전 부대 사용자 지원 및 데이터 관리
2. SQL 쿼리/프로시저 리팩토링으로 버그 수정 및 유지보수성 향상
3. Spring 기반의 백엔드 레거시 코드 리팩토링 및 API 기능 개선
4. 데이터 수정 요청 중 반복적으로 들어오는 사항을 자동화하는 OLE DB 기반 C#/WPF 프로그램 제작
5. 전 부대 요구사항 수렴을 통한 체계 내 신규 기능 프론트엔드 및 백엔드 구현