챗봇 프론트엔드 및 AI API 연동

안녕하세요. 공고에서 가장 중요한 점은 새 AI 모델을 만들거나 화면 전체를 다시 설계하는 것이 아니라, 운영 중인 웹사이트에 기본 챗봇 창을 붙이고 이미 준비된 AI API와 질문·답변을 안정적으로 연결하는 것이라고 이해했습니다. 산출물 완성도를 1순위로 두신 만큼 작은 화면의 정상 흐름뿐 아니라 기다림과 실패 상황까지 마무리하겠습니다.

진행 방식은 다음과 같습니다.
1) 착수 시 현재 웹사이트의 프레임워크, 디자인 기준, 챗봇을 띄울 페이지와 모바일 폭을 확인합니다. 제공하실 API의 호출 주소, 인증 방식, 요청 필드, 응답 구조, 오류 형식과 테스트 환경을 함께 맞춥니다. 기존 사이트의 구성 요소와 스타일을 우선 활용해 변경 범위를 좁힙니다.
2) 우측 하단 아이콘을 누르면 열리고 닫히는 간결한 챗봇 창을 구현합니다. 질문 입력창과 대화 내역을 한눈에 볼 수 있게 배치하고, 키보드 입력·전송 버튼·좁은 화면에서의 사용을 확인합니다. 기본 UI는 기존 사이트의 색상과 글꼴, 간격에 맞춥니다.
3) 사용자의 질문을 제공 AI API로 보내고 받은 답변을 같은 대화창에 순서대로 표시합니다. 요청 중에는 진행 상태를 보여주고, 통신 오류나 빈 응답에는 이해하기 쉬운 안내와 재시도 동작을 제공합니다. 질문이 실패해도 입력 내용을 유지해 다시 작성할 필요가 없도록 합니다.
4) 실제 API와 연결해 열기·닫기, 여러 차례 질문, 정상 답변, 응답 지연, 오류, 모바일 화면을 함께 검수합니다. 최종 인수 시 연동 위치와 설정 방법, 확인한 테스트 항목을 정리해 드립니다.

기획안과 프롬프트, API가 이미 준비되어 있다는 전제를 활용해 연결과 검수에 집중하겠습니다. 범위에는 신규 AI 모델 학습이나 별도의 복잡한 관리자 화면을 포함하지 않습니다. 작업 기간은 30일로 제안하며, 착수 직후 API 계약과 기존 사이트 환경을 확인하면 상세 일정과 검수 기준을 빠르게 확정할 수 있습니다.

이번 공고를 위해 만든 제안서·스토리보드·인터랙티브 데모에서 화면 흐름과 구현 방향을 직접 확인하실 수 있습니다: https://wishket-158862-ai-chatbot-ui.pages.dev/

지원완료 댓글 공고 댓글란에 작성할 짧은 정중 멘트

지원서를 제출했습니다. 기존 웹사이트의 챗봇 UI와 준비된 AI API 연결 방식을 제안서·스토리보드·데모로 정리했습니다. 검토해 주시면 미팅에서 API 형식과 적용 범위를 함께 확인하겠습니다.

포트폴리오 1: 제안서 포트폴리오 신규 등록용 제목 및 설명

[포트폴리오 제목]
[제안서] 웹사이트 AI 챗봇 UI·API 연동 전략

[포트폴리오 설명]
운영 중인 웹사이트에 우측 하단 챗봇을 붙이고 준비된 AI API의 질문·답변을 연결하기 위한 제안서입니다. 범위, 상태별 검수 기준, 구현 선택과 단계별 진행 계획을 담았습니다. 이 공고에 지원하기 위해 사전 제작한 제안 자료입니다.

*본 포트폴리오는 공고지원을 위해 사전 제작된 내용임을 알려드립니다.

포트폴리오 2: 스토리보드 포트폴리오 신규 등록용 제목 및 설명

[포트폴리오 제목]
[스토리보드] 챗봇 진입·질문·답변 화면 설계

[포트폴리오 설명]
서비스의 화면을 실제 모습에 가깝게 미리 그려 보는 문서입니다. 웹사이트 방문자의 여정 순서에 맞춰 챗봇 진입, 질문·AI 답변, 연결 오류와 재시도 화면을 담았습니다. 마지막까지 보시면 생각하고 계신 시스템의 모습이 머릿속에 그려지실 것입니다. 이 공고에 지원하기 위해 사전 제작한 자료입니다.

*본 포트폴리오는 공고지원을 위해 사전 제작된 내용임을 알려드립니다.

PDF → 이미지 변환 명령어 터미널에 입력하여 PDF를 고해상도 이미지로 일괄 분할 변환 (ImageMagick)

magick -density 300 proposal.pdf -quality 100 proposal_page_%02d.png