현대적인 AI 어시스턴트를 만들었습니다

대부분의 AI 튜토리얼은 단순히 API를 호출하는 방법만 보여줍니다. 저는 실제 애플리케이션을 만들고 싶었습니다. 그래서 vanilla HTML, CSS, JavaScript를 사용했습니다.

앱에는 다음과 같은 기능이 포함되어 있습니다:

  • 반응형 UI
  • 다크 모드 및 라이트 모드
  • 스트리밍 응답
  • 마크다운 렌더링
  • 구문 강조
  • 채팅 기록
  • 에러 핸들링
  • GitHub Pages 배포

다음 도구들을 사용했습니다:

  • HTML5 and CSS3
  • Vanilla JavaScript
  • Marked.js
  • DOMPurify
  • Prism.js
  • Google Generative AI SDK

보안에 중점을 두었습니다. AI 응답을 정화하기 위해 DOMPurify를 사용했으며, 이를 통해 보안 리스크를 방지합니다.

사용자 경험(UX)에도 집중했습니다. 앱은 텍스트가 생성되는 대로 스트리밍하여 보여줍니다. 덕분에 로딩 아이콘을 기다릴 필요 없이 즉각적인 피드백을 받을 수 있습니다.

코드 블록을 위해 Prism.js를 추가했습니다. 이를 통해 언어 라벨과 복사 버튼이 제공됩니다.

채팅 기록에는 localStorage를 사용했습니다. 페이지를 새로고침해도 대화 내용이 유지됩니다. 속도가 빠르고 별도의 백엔드가 필요하지 않습니다.

재시도 로직과 에러 메시지를 추가하여 앱을 안정적으로 만들었습니다.

AI 프로젝트를 통해 다음과 같은 많은 기술을 배울 수 있습니다:

  • API 연동
  • UI 디자인
  • 상태 관리
  • 사용자 경험

포트폴리오를 위해 이와 같은 프로젝트를 만들어 보세요. 실무 능력을 갖추고 있음을 증명할 수 있습니다.

다음에는 어떤 기능을 추가하면 좋을까요?

  • 음성 입력
  • 파일 업로드
  • 메모리

댓글로 알려주세요.

Source: https://dev.to/codehuntersharath/i-built-a-modern-ai-assistant-using-html-css-and-javascript-4ca8 Optional learning community: https://youtu.be/nbFKG_6DkSE