1. 프로젝트 개요

• 프로젝트명: 다이버전스
• 목표: AI 캐릭터와 게임을 즐길 수 있는 인터랙티브 웹 게임

2. 담당 역할 및 주요 작업

• ComfyUI 기반 AI 프롬프트 대량 이미지 자동 생성 툴 풀스택 개발 (Python·React 연동)

• 캐릭터 생성 페이지 UXUI 및 구현

  

  • 실시간 프리뷰: $derived로 상태 계산
  • 복잡한 폼: 단방향 데이터 플로우 + 제네릭으로 타입 안전성 확보
  • 이미지 최적화: ComfyUI 이미지생성 후 + 스프라이트 제작으로 16번 → 1번으로 네트워크 요청 최소화

• 룰렛 미니 게임 구현

  

  • SVG로 세그먼트 경로(path) 수학 계산(각도 → 좌표 → 아크) 및 아이콘/텍스트 렌더링
  • 버튼 비활성화 처리, 콘페티/인벤토리로 이동하는 마이크로인터랙션, 반응형 레이아웃
  • 색상 매핑(팔레트), 세그먼트 재계산 로직 분리로 아이템/확률이 유연하기 바뀔 수 있도록 구현

• 상점 퍼블리싱 및 일부 컴포넌트 구현

  

  

  • 카드 컴포넌트화 → 유지보수성 증가
  • 박스가 열리는 영상 → 짧은 길이로도 영상이 계속 플레이 될수있도록 리소스 최적화

• 이벤트/퀘스트 시스템 기획 및 구현

• 이벤트 관리자가 구성하는 레이아웃에 따라 유동적으로 컴포넌트가 변경 될 수 있도록 구현

3. 주요 기술 및 구현 포인트

1. AI 이미지 생성 자동화 (ComfyUI + Python + React)

• 문제: 회사 프로젝트에서 수백 개의 프롬프트로 이미지를 생성해야 했는데, ComfyUI에서 수동으로 하나씩 실행해야 해서 시간이 매우 오래 걸림.
• 해결:
  • Python으로 ComfyUI 자동화 스크립트를 작성하여 대량 이미지 생성 파이프라인 구축
  • JSON 프롬프트 리스트를 업로드하면 자동으로 실행 가능하도록 함
  • 퇴근 전 실행 → 퇴근 후 결과 확보 → 개발 효율 대폭 향상
• 성과: 반복 업무를 자동화 파이프라인으로 전환하여 수작업 프로세스를 제거하고, 이미지 생성 워크플로우의 운영 효율성을 개선

2. 캐릭터 생성 페이지 UX/UI 구현

• 과제: LLM + AI 이미지 생성 단계를 포함한 캐릭터 생성 플로우는 시간이 오래 걸려, 사용자가 대기하는 동안 이탈 위험이 있었음.
• 해결:
  • GSAP 애니메이션을 활용하여 단계별 전환을 부드럽게 구성
  • 로딩 구간에서 인터랙션(캐릭터 생성 정보를 담은 티켓, 순차적으로 데이터가 보여지는 애니메이션)을 추가하여 대기 시간 체감 감소
  • 복잡한 폼 로직 (MBTI 성격 조합, 세계관 선택, 스타일 선택 등) 을 상태 관리 및 모듈화된 컴포넌트 구조로 정리