실무 첫걸음, 생성형 AI로 배우는 UX/UI & 프론트엔드

이번 강의에서는 복잡해진 챗봇 상태를 더 효율적으로 관리하기 위해 React의 전역 상태 관리 기법인 useContext와 useReducer를 적용합니다.상태를 컴포넌트 간에 안정적으로 공유하며 코드 구조를 깔끔하게 유지할 수 있습니다.용어 설명useContext: 컴포넌트 트리에서 전역 상태를 공급하고 사용하는 훅useReducer: 상태 업데이트 로직을 액션 기반으로 분리해주는 훅액션: 상태를 변경하기 위한 식별자와 데이터(payload)를 포함한 객체기본 개념기존에는 ChatBot 컴포넌트 내부에서만 상태를 관리했음이를 Context로 전역 공급하고 Reducer로 액션 단위 처리함으로써 확장성과 유지보수성을 확보주요 사용 위치메시지 상태를 여러 컴포넌트가 참조할 때대화 히스토리, 입력값, 로딩 ..

이번 강의에서는 사용자 친화적인 챗봇을 만들기 위해 반응형 레이아웃, 테마 전환 기능, 입력 UX 개선을 진행합니다.작은 디바이스에서도 자연스럽고 쾌적하게 동작하며, 시각적인 만족감을 높이는 작업입니다.용어 설명반응형 디자인: 화면 크기에 따라 자동으로 레이아웃이 변하는 UI 구조다크모드: 어두운 배경과 밝은 글씨로 구성된 사용자 선호 테마UX 개선: 사용자의 동작 흐름을 고려하여 인터페이스를 더 직관적으로 만드는 작업기본 개념모바일 기기에서도 메시지 창이 잘 보이도록 유연한 크기, 여백, 폰트 설정 필요버튼 하나로 라이트/다크 테마를 전환하도록 전역 상태 관리 도입Enter로 전송, Shift+Enter로 줄바꿈 처리를 추가해 실제 메신저처럼 사용 가능하게 함주요 사용 위치공개 서비스 챗봇 UI 구현기..

이번 강의에서는 ChatGPT API를 사용할 때 반드시 알아야 할 요금 체계와 사용량 관리 방법에 대해 정리합니다.과금 구조를 이해하고 예측함으로써 서비스 운영 비용을 효과적으로 통제할 수 있습니다.용어 설명Token(토큰): 텍스트를 분할한 단위로, 과금은 토큰 수 기준으로 부과됨 (1토큰 ≒ 4자)Completion: AI가 생성한 응답Prompt: 사용자가 입력한 메시지기본 개념OpenAI는 요청마다 사용한 토큰 수를 기준으로 과금Prompt + Completion 토큰 합산 기준으로 요금이 계산됨모델(gpt-3.5, gpt-4)에 따라 단가가 다르며, 선택에 따라 비용 차이 발생주요 사용 위치개인 또는 기업이 ChatGPT API를 활용해 서비스화할 때비용 최적화가 중요한 실무 개발 환경구체적 ..

이번 강의에서는 브라우저를 새로고침해도 대화가 유지되는 챗봇을 만들기 위해 localStorage를 활용한 저장 기능을 구현합니다.용어 설명localStorage: 브라우저에 key-value 형태로 데이터를 저장할 수 있는 Web APIJSON.stringify / JSON.parse: 객체 데이터를 문자열로 저장하고 다시 객체로 변환하는 방식useEffect: React에서 컴포넌트 생명주기에 따라 동작하는 훅, 초기 로딩 시 또는 상태 변화 시 실행 가능기본 개념React 상태(messages)를 localStorage에 동기화하여 저장페이지를 새로고침하거나 나갔다가 돌아와도 이전 대화가 복원됨사용자 경험 개선 및 대화 흐름 유지에 효과적주요 사용 위치고객센터, 지식 기반형 챗봇 등에서 지속성 유지..

이번 강의에서는 챗봇의 기본 기능을 넘어서 사용자 경험을 향상시키는 UI 개선 작업을 진행합니다.자동 스크롤, 로딩 인디케이터, 사용자/AI 메시지 구분 등을 통해 더 자연스러운 대화 흐름을 구성합니다.용어 설명자동 스크롤: 새로운 메시지가 생길 때 대화창이 맨 아래로 이동하는 기능로딩 상태: AI 응답을 기다리는 동안 사용자에게 상태를 알려주는 표시조건부 렌더링: 특정 조건일 때만 요소를 화면에 출력하는 React 패턴기본 개념메시지 출력 후 스크롤을 제어해 사용자가 응답을 놓치지 않게 함AI 응답 대기 중임을 시각적으로 표현하여 UX 안정감 제공사용자와 AI 메시지를 시각적으로 구분해 가독성을 향상주요 사용 위치실시간 대화 인터페이스 (고객센터, 튜터 챗봇 등)UX를 중요시하는 서비스 프론트엔드다수의..

이번 강의에서는 OpenAI API 연동 시 가장 중요한 API 키 보안 문제를 해결하기 위해, 간단한 백엔드 프록시 서버를 구성하는 방법을 알아봅니다. 프론트엔드에서 직접 키를 노출하지 않고 안전하게 요청을 전달할 수 있는 실습입니다.용어 설명API 키 노출: 클라이언트 코드에 API 키가 포함되면 누구나 무단 사용 가능프록시 서버: 클라이언트와 외부 API 사이에서 요청을 중계해주는 중간 서버.env 파일: 환경변수를 저장하여 코드에 직접 키를 작성하지 않도록 처리 기본 개념React에서 직접 OpenAI API를 호출하면 키가 브라우저에 노출됨Express 기반의 간단한 Node 서버를 구성해 키를 서버에 보관프론트엔드는 /api/chat 같은 내부 경로로만 요청함 주요 사용 위치모든 유료 API ..

이번 실습에서는 드디어 OpenAI의 ChatGPT API를 연동하여 사용자의 입력에 대한 실제 AI 응답을 받아보는 기능을 구현합니다.용어 설명API 연동: 외부 서버(OpenAI)와 데이터를 주고받기 위해 요청(Request)과 응답(Response)을 주고받는 처리POST 요청: 데이터를 서버로 전송하는 방식 (예: 메시지 내용)Authorization 헤더: API 사용을 인증하기 위한 키 포함 영역기본 개념사용자의 입력값을 메시지로 변환해 OpenAI API에 전송합니다.서버 응답에서 AI 메시지를 추출해 대화에 추가합니다.단일 요청으로 이전 대화 히스토리를 함께 보내야 흐름이 유지됩니다.주요 사용 위치대화형 챗봇 인터페이스에서 실제 응답을 받아야 할 때실시간 채팅 처리 로직 학습프론트엔드에서 ..

이번 실습에서는 ChatGPT와의 연동 없이 React만으로 챗봇 UI의 기본 구조를 만들어봅니다.사용자 입력, 메시지 출력, 전송 버튼까지 포함된 구조를 직접 구성해보며 챗봇의 뼈대를 완성합니다.용어 설명컴포넌트(Component): UI를 구성하는 독립적인 React 단위useState: React에서 상태(입력값, 메시지 목록 등)를 관리하는 훅이벤트 처리: 버튼 클릭, 입력 등 사용자 동작에 반응하는 기능기본 개념챗봇 인터페이스는 ① 메시지 목록 출력 영역, ② 입력창, ③ 전송 버튼으로 구성됩니다.상태(state)를 이용해 입력값과 메시지를 관리합니다.아직 ChatGPT API는 연결하지 않으며, 사용자 메시지만 출력합니다.주요 사용 위치/상황챗봇 프로젝트 UI 설계 초기 단계메시지 전송 흐름 ..