챗봇 기능 구현 실습 가이드라인

NCP CLOVA Chatbot API 를 활용하여 챗봇 기능을 구현합니다

목표
HTML/CSS 활용한 챗봇 UI 레이아웃을 구성할 수 있음
JavaScript를 활용한 이벤트 및 외부 API 요청을 처리할 수 있음
API 응답 데이터를 UI에 동적으로 렌더링할 수 있음

→ 챗봇과 관련된 연동 세부 가이드는 NCP 문서 를 참조하시기 바랍니다

Key가 퍼블릭 환경에 노출되지 않도록 주의!

1. UI 구현 가이드라인

1-1. UI 구현 기준

기본적인 채팅 UI(채팅 메시지, 입력 영역 등)를 구현합니다

• 채팅 영역: 메시지가 누적될 경우 스크롤 가능하도록
• 입력 영역: 입력창 + 전송 버튼
• 메시지 스타일: 사용자/챗봇 구분 (좌/우 정렬)

1-2. CSS 구현 기준

모바일 브라우저 앱을 통한 환경에서도 이용할 수 있는 웹뷰(Webview) 형태로 구현

2. JavaScript 구현 가이드라인

2-1. 기본 구현 흐름

사용자의 채팅 메시지 입력 및 Node.js 서버 전송

NCP로 API 요청 및 응답 수신 및 챗봇 응답 메시지 데이터를 화면에 렌더링

2-2. 클라이언트(브라우저) 이벤트 처리

• 버튼 or Enter 키로 채팅 입력 처리
• 중복 전송 방지
• 에러 처리
• (채팅 UX) 챗봇이 응답 중인 상태(Typing indicator)

3. 발표 방식

구현이 완료되면 팀별 5~10분 내외로 발표를 진행할 예정입니다

• 구현 동작 시연
• README.md 기반 세부 구현 내용 설명(구성 항목 자유)