모듈형 AI 챗봇 아키텍처 및 서비스 엔진

주요 모듈 / 컨텍스트 인식 챗봇 / 포트폴리오 통합

한 줄 요약:
React Context, 서비스 추상화, 유지 관리성, 접근성 및 고급 UI/UX에 중점을 두고 구축된 포트폴리오: 글래스를 위한 강력하고 확장 가능한 모듈식 챗봇 시스템입니다.

개발 기간: 2025년 6월 - 2025년 7월

참고 사항:

• 호스팅/코드 사용 가능 여부 고지:
  챗봇 모듈의 전체 소스 코드는 요청 시 제공됩니다. 보안 및 개인 정보 보호를 위해 코드는 공개적으로 게시되지 않습니다.
• 자세한 정보 또는 데모 문의:
  franzdomingo.dev를 통해 Franz Phillip G. Domingo에게 연락하십시오.
• 내비게이션 참고:
  포트폴리오 사이트의 플로팅 액션 버튼(FAB)을 통해 챗봇에 접근할 수 있습니다.

---

주요 기능

• 재사용 가능한 컴포넌트를 갖춘 모듈식 아키텍처
• React Context를 사용한 중앙 집중식 상태 관리
• API/비즈니스 로직을 위한 서비스 추상화 계층
• 강력한 UX를 위한 오류 경계 및 재시도 로직
• 애니메이션, 접근 가능한 UI (Shadcn UI, Radix UI, Framer Motion)
• 빠른 명령을 위한 빠른 작업(Quick Actions)
• 실시간 피드백을 위한 입력 표시기(Typing indicator)
• 손쉬운 접근을 위한 플로팅 액션 버튼(FAB)
• 새로운 제공자, 프롬프트 또는 기능을 위한 확장 가능한 디자인
• 관심사 분리: UI, 상태, 도우미, 유형, 서비스
• 성능 최적화: 최소한의 클라이언트 측 상태, 동적 로딩, 이미지 최적화

---

나의 역할 및 기여

아키텍처 및 엔지니어링:

• 유지 관리를 위해 UI, 상태, 도우미 및 서비스를 분리하여 모듈식 챗봇 시스템을 설계하고 구현했습니다.

상태 관리:

• React Context 및 커스텀 훅을 사용하여 중앙 집중식 채팅 상태를 구축했습니다.

서비스 계층:

• 채팅 API 및 비즈니스 로직을 위한 추상화를 개발하여 쉽게 확장하고 테스트할 수 있도록 했습니다.

UI/UX:

• Shadcn UI, Radix UI 및 Framer Motion을 사용하여 애니메이션이 적용된 접근 가능한 컴포넌트를 만들었습니다.

오류 처리:

• 원활한 사용자 경험을 위해 오류 경계 및 재시도 로직을 구현했습니다.

확장성:

• 새로운 기능, 제공자 및 빠른 작업을 쉽게 추가할 수 있도록 코드베이스를 구성했습니다.

---

직면한 과제

• 컨텍스트 관리:
  글로벌 채팅 상태가 여러 컴포넌트 전반에 걸쳐 신뢰할 수 있고 확장 가능한지 확인.

• 오류 처리:
  예측할 수 없는 API 응답에 대한 강력한 오류 경계 및 재시도 로직 구축.

• 성능:
  대규모 채팅 로그 및 동적 UI 기능을 위한 렌더링 최적화.

• 접근성:
  모든 챗봇 상호 작용을 키보드 및 화면 판독기 친화적으로 만들기.

---

프로젝트 아키텍처

• 아키텍처 스타일:
  관심사(UI, 상태, 도우미, 서비스, 유형, 유틸리티)가 명확하게 분리된 모듈식 React.

• 컴포넌트 구성:

  • components/chatbot/: 메인 UI, FAB, 메시지 렌더링, 빠른 작업, 입력 표시기
  • components/chatbot/components/: 레이아웃, 입력, 메시지 목록, 헤더, 고급 UI
  • components/chatbot/helpers/: 빠른 작업, 해시태그 명령, 링크 추출, 타입 정의
  • components/chatbot/services/: 채팅 서비스 추상화
  • components/chatbot/types/: 채팅 컨텍스트 및 메시지를 위한 TypeScript 인터페이스
  • components/chatbot/utils/: 상태 관리, 분석, 접근성, 오류 처리 등

• 상태 관리:
  채팅 상태 및 운영을 위한 React Context 및 커스텀 훅.

• 통합:
  애니메이션을 위한 Framer Motion, 접근성 및 디자인을 위한 Radix UI 및 Shadcn UI.

---

데모 미리보기

• 스크린샷/비디오:
  챗봇의 라이브 데모는 franz-domingo.vercel.app에서 확인할 수 있습니다. 플로팅 액션 버튼(FAB)을 통해 챗봇을 열어 모든 기능을 라이브로 확인하세요.

• 플랫폼 뷰:
  웹 (반응형, 모바일 우선)

• 표시된 기능:

  • 채팅 접근을 위한 플로팅 액션 버튼(FAB)
  • 애니메이션, 접근 가능한 채팅 UI
  • 빠른 작업, 입력 표시기, 오류 처리
  • 모듈식 메시지 렌더링 및 컨텍스트 인식 기능

• 데모 지침:
  franz-domingo.vercel.app을 방문하여 챗봇 FAB를 클릭하여 챗봇을 실행하고 상호 작용하십시오.

---

자세한 내용이 필요하거나 코드베이스를 보고 싶으시면 작성자에게 직접 문의하십시오.

---

\n# 챗봇 (Portfolio: Glass) 상황 인식 챗봇 및 포트폴리오 통합

라이브 데모 (V1) • [GITHUB: 비공개 소스]

개요

• 역할: 아키텍처 및 엔지니어링, UI/UX
• 스택: React, TypeScript, Tailwind CSS, Framer Motion, Radix UI, Shadcn UI
• 핵심 결과: 완벽한 100/100 성능 점수를 유지하면서 원활하고 접근성 높은 챗봇 통합 달성
• 요약: Portfolio: Glass를 위해 설계된 견고하고 확장 가능한 모듈형 챗봇 시스템입니다. React Context와 서비스 추상화를 사용하여 유지보수성과 접근성을 극대화했습니다.

문제 및 해결 과제

• 과제: 성능 점수나 디자인을 해치지 않고 미니멀한 글래스모피즘 UI에 챗봇을 원활하게 통합하는 것이 주요 과제였습니다.
• 대상: Trend Micro와 같이 지원했던 회사의 기술 채용 담당자 및 엔지니어링 리더.
• 제약 조건: 클라이언트 번들 크기를 작게 유지하고 Lighthouse 100/100 점수를 유지하며 화면 판독기 접근성을 보장해야 했습니다.

접근 방식 및 결정

• 아키텍처: 관심사를 명확히 분리한 모듈형 React 아키텍처. React Context를 사용한 중앙 집중식 상태 관리.
• 주요 결정:
  • 서비스 추상화: 다양한 LLM 제공업체를 쉽게 테스트하고 확장할 수 있는 API 추상화 계층 개발.
  • 모듈형 UI: 모놀리식 구조를 피하기 위한 컴포넌트 분리.
• 트레이드오프: 번들 크기를 최소화하기 위해 Redux 대신 React Context를 선택했습니다.
• 데이터 흐름: 사용자 입력은 UI 컴포넌트를 거쳐 React Context로 전달되며, 여기서 API 서비스 계층과 통신합니다.

핵심 결과 및 영향

• 결과: 로딩 시간을 저하시키지 않고 포트폴리오 경험을 풍부하게 만드는 고성능 챗봇.
• 비교: 정적인 포트폴리오에 동적인 대화형 인터페이스를 추가하여 향상시켰습니다.
• 영향: 프론트엔드 엔지니어링 역량(상태 관리, API 통합 등)을 채용 담당자에게 입증했습니다.

기술 딥 다이브

• 주요 세부 사항: 빠른 작업, 타이핑 표시기, 플로팅 작업 버튼(FAB).
• 검증: 오류 경계 처리 및 Lighthouse를 활용한 로컬 테스트.
• 최적화: 동적 지연 로딩 및 이미지 최적화.

회고

• 아쉬운 점: 더 다양한 LLM 제공업체를 수용하기 위해 API 서비스 추상화를 조기에 계획했어야 합니다.
• 성공 사례: 외부 무거운 라이브러리 없이 성공적으로 상태를 구축하고 성능을 유지했습니다.

---

프로젝트 아키텍처

• 계층 구조: UI, 상태, 서비스가 components/chatbot/ 내에 엄격하게 분리되어 있습니다.
• 상태 관리: React Context 및 커스텀 훅.

---

데모 미리보기

• 라이브 데모: franzdomingov1.vercel.app

호스팅 참고:
라이브 데모는 V1 포트폴리오 사이트에서 확인할 수 있습니다.