2026/05/29 3

[블로그 글 생성기] 7편 | ChatGPT로 블로그 본문 자동 생성 기능 추가하기

지난 6편에서는 AI 블로그 생성기의 사용자 경험을 개선했습니다.로딩 상태 표시, 복사 기능, 결과 정리 등을 추가하면서 단순한 예제 수준을 넘어 실제 서비스처럼 사용할 수 있는 형태로 발전시켰습니다.하지만 아직 중요한 기능 하나가 부족했습니다.현재 AI 블로그 생성기는:제목 생성SEO 핵심 키워드 생성글 목차 생성태그 생성썸네일 문구 생성기능만 제공하고 있습니다.즉 블로그 글을 작성하기 위한 준비 단계까지만 지원하는 상태입니다.이번 편에서는 ChatGPT API를 활용하여 실제 블로그 본문을 자동 생성하도록 업그레이드해보겠습니다.이 기능이 추가되면 AI 웹앱 개발 프로젝트의 핵심 기능이 완성됩니다.왜 본문 생성 기능이 필요할까?기존 방식은 아래와 같습니다.주제 입력↓제목 생성↓목차 생성↓직접 글 작성 ..

[블로그 글 생성기] 6편 | AI 블로그 생성기를 서비스 개선하기

지난 5편에서는 OpenAI API를 연결해 실제 ChatGPT가 제목, SEO 키워드, 목차, 태그를 생성하도록 만들었습니다.이제 우리는 단순한 예제가 아닌 실제 AI 웹앱을 보유하게 되었습니다.하지만 아직 아쉬운 점이 있습니다.현재는:결과 생성 중인지 알 수 없음복사 기능 없음결과가 한 덩어리로 출력됨오류가 발생하면 사용자가 이유를 모름등 실제 서비스로 사용하기에는 부족한 부분들이 있습니다.이번 편에서는 이런 문제를 해결하여 사용자 경험을 향상시켜보겠습니다.이번 편에서 추가할 기능로딩 애니메이션결과 복사 버튼GPT 응답 자동 정리에러 메시지 개선모바일 사용성 향상 1. 로딩 상태 표시하기현재는 버튼을 누르면 아무 반응이 없는 것처럼 보입니다.사용자는:고장난 건가? 라고 생각할 수 있습니다.따라서 로딩..

[블로그 글 생성기] 5편 | ChatGPT API 연결해서 진짜 AI 블로그 생성기 만들기

지난 4편에서는 JavaScript를 이용해 AI 블로그 생성기 기능을 구현했습니다.사용자가 주제와 키워드를 입력하면:제목 생성SEO 키워드 생성목차 생성태그 생성썸네일 문구 생성기능이 동작하도록 만들었습니다.하지만 아직까지는 진짜 AI가 아닙니다.JavaScript가 미리 정해놓은 문장을 조합해서 출력하는 방식이었습니다.이번 편에서는 ChatGPT API를 연결해서 실제 AI가 결과를 생성하도록 만들어보겠습니다.최종 목표이번 편이 끝나면 아래와 같은 구조가 완성됩니다.사용자 입력↓웹페이지↓Node.js 서버↓OpenAI ChatGPT↓결과 생성↓웹페이지 출력즉 이제부터는 진짜 AI가 동작하게 됩니다.1. Node.js 설치하기먼저 Node.js를 설치해야 합니다.Node.js 공식 홈페이지에 접속합니다..