VS Code에 특정 확장 프로그램을 설치하여 Google Gemini AI와 워드프레스 REST API를 연동할 것입니다. 이 워크플로우를 통해 아이디어 구상, AI 기반 초안 작성, 마크다운(Markdown) 편집, 그리고 최종 게시까지 모든 작업을 VS Code 안에서 완결할 수 있습니다.
사전 준비 사항
이 가이드를 성공적으로 마치기 위해 다음 환경과 정보가 준비되어야 합니다.
- Visual Studio Code (VS Code): 최신 버전의 VS Code가 설치되어 있어야 합니다.
- 워드프레스 사이트: 외부에서 접근 가능한 워드프레스 사이트와 관리자 계정이 필요합니다.
- Google AI Studio API 키: Google Gemini 모델을 사용하기 위한 무료 API 키가 필요합니다. Google AI Studio에서 발급받을 수 있습니다.
- 마크다운(Markdown) 기본 지식: VS Code에서 글을 작성할 때 마크다운 문법을 사용합니다.
1단계: 워드프레스 연동을 위한 VS Code 확장 프로그램 설치
목표: VS Code에서 작성한 콘텐츠를 워드프레스 사이트로 전송할 수 있는 통로를 마련합니다.
이유: 워드프레스는 외부 애플리케이션이 글을 생성하거나 수정할 수 있도록 REST API라는 표준 인터페이스를 제공합니다. WordPress Post 확장 프로그램은 이 API를 활용하여 VS Code를 워드프레스의 원격 클라이언트로 만들어 줍니다.
- VS Code를 열고 왼쪽 액티비티 바에서 확장(Extensions) 아이콘(네모 블록 모양)을 클릭합니다.
- 검색창에 WordPress Post를 입력하고, satonaky가 제작한 확장 프로그램을 찾아 Install 버튼을 클릭합니다.
검증: 확장 프로그램이 성공적으로 설치되면, 별도의 UI 변경은 없습니다. 다음 단계인 연결 설정이 성공하면 설치가 올바르게 완료된 것입니다.
2단계: 워드프레스 REST API 연결 설정
목표: VS Code가 내 워드프레스 사이트에 접근할 수 있도록 인증 정보를 설정합니다.
이유: 보안을 위해 워드프레스는 아무나 글을 게시하지 못하도록 막습니다. ‘애플리케이션 비밀번호(Application Password)’는 일반 로그인 비밀번호 대신, 특정 애플리케이션(여기서는 VS Code)에만 부여하는 전용 접근 키 역할을 하여 안전한 연동을 가능하게 합니다.
- 워드프레스에서 애플리케이션 비밀번호 생성:
- 워드프레스 관리자 대시보드에 로그인한 후, 사용자 > 프로필로 이동합니다.
- 페이지를 아래로 스크롤하여 애플리케이션 비밀번호 섹션을 찾습니다.
- 새 애플리케이션 비밀번호 이름에 VS Code와 같이 식별 가능한 이름을 입력하고 새 애플리케이션 비밀번호 추가 버튼을 클릭합니다.
- 중요: 화면에 xxxx xxxx xxxx xxxx xxxx xxxx 형식의 비밀번호가 표시됩니다. 이 비밀번호는 지금만 볼 수 있으므로, 반드시 안전한 곳에 즉시 복사해 두어야 합니다.
- VS Code에 인증 정보 입력:
- VS Code에서 Ctrl+Shift+P (macOS: Cmd+Shift+P)를 눌러 명령 팔레트(Command Palette)를 엽니다.
- WordPress: Set a password를 입력하고 실행합니다.
- 워드프레스 사이트의 전체 URL을 입력하라는 창이 나타납니다. https://[YOUR_WORDPRESS_SITE_URL] 형식으로 입력하고 Enter를 누릅니다.
- **워드프레스 사용자 이름(Username)**을 입력하고 Enter를 누릅니다.
- 마지막으로, 위에서 복사해 둔 애플리케이션 비밀번호를 붙여넣고 Enter를 누릅니다.
검증: VS Code 우측 하단에 “Credentials for [YOUR_WORDPRESS_SITE_URL] have been stored.” 라는 알림 메시지가 나타나면 연결 설정이 성공적으로 완료된 것입니다.
3단계: Google Gemini AI 확장 프로그램 설치 및 설정
목표: VS Code 편집기 내에서 직접 Google Gemini AI 모델을 호출하여 콘텐츠를 생성할 수 있는 환경을 구축합니다.
이유: 브라우저를 열어 ChatGPT나 Gemini 웹사이트에 접속하고 결과를 복사-붙여넣기 하는 과정은 번거롭습니다. VS Code 확장 프로그램을 사용하면, 현재 작업 중인 파일 내에서 직접 프롬프트를 날리고 생성된 텍스트를 바로 삽입하여 작업 흐름의 중단을 최소화할 수 있습니다.
- VS Code 확장 탭에서 Google Gemini를 검색하고, Google이 제작한 공식 확장 프로그램을 찾아 Install 버튼을 클릭합니다.
- 설치가 완료되면, 다시 명령 팔레트(Ctrl+Shift+P 또는 Cmd+Shift+P)를 엽니다.
- Gemini: Set API Key를 입력하고 실행합니다.
- 사전 준비 사항에서 발급받은 Google AI Studio API 키를 붙여넣고 Enter를 누릅니다.
검증:
새 파일을 하나 열고, 파일 상단에 주석으로 프롬프트를 작성합니다. 예를 들어: code Codedownloadcontent_copyexpand_less
# "개발 생산성을 높여주는 VS Code 단축키 5가지"라는 주제로 블로그 글의 서론을 작성해줘.
프롬프트를 작성한 후, 코드 렌즈(Code Lens)에 나타나는 ✨ Generate (✨ 생성) 버튼을 클릭하거나, 해당 라인에서 전구 아이콘을 클릭하여 Gemini: Generate Code from Instruction를 실행합니다. AI가 생성한 텍스트가 코드 아래에 나타나면 성공적으로 연동된 것입니다.
4단계: AI로 블로그 초안 작성 및 워드프레스에 게시하기
목표: 지금까지 구축한 시스템을 활용하여 실제 블로그 게시물을 생성하고 워드프레스 사이트에 발행하는 전체 과정을 실행합니다.
이유: 이 단계는 앞서 준비한 모든 구성 요소가 하나의 유기적인 워크플로우로 동작함을 확인하는 최종 과정입니다. 이를 통해 이론이 아닌 실제 생산성의 향상을 경험할 수 있습니다.
- 마크다운 파일 생성: VS Code에서 my-ai-post.md 와 같이 .md 확장자를 가진 새 파일을 생성합니다.
- AI로 초안 생성: Gemini를 이용해 블로그 글의 전체 또는 일부를 생성합니다. 명령 팔레트나 코드 렌즈를 사용하여 원하는 프롬프트를 실행합니다. code Markdowndownloadcontent_copyexpand_lessIGNORE_WHEN_COPYING_STARTIGNORE_WHEN_COPYING_END
--- title: AI와 VS Code로 완성하는 블로그 자동화 tags: VS Code, WordPress, AI, Gemini, Automation categories: Tech, Tutorial --- # "개발자를 위한 궁극의 콘텐츠 워크플로우" 라는 주제로 블로그 글을 작성해줘. 목차를 포함하고, 각 섹션별로 상세하게 설명해줘. - 내용 편집 및 완성: AI가 생성한 초안을 바탕으로 내용을 다듬고, 마크다운 문법을 사용하여 제목, 목록, 코드 블록 등을 정리합니다. 파일 상단에 —로 둘러싸인 영역(Front Matter)을 추가하면 게시물의 제목, 태그, 카테고리를 미리 지정할 수 있습니다.
- 워드프레스에 게시:
- 명령 팔레트(Ctrl+Shift+P 또는 Cmd+Shift+P)를 엽니다.
- WordPress: Post a new post from the current file을 입력하고 실행합니다.
- 게시물 유형(Post 또는 Page)과 상태(Published 또는 Draft)를 선택하라는 옵션이 나타납니다. 원하는 옵션을 선택합니다. (초안으로 발행하여 검토하는 것을 권장합니다.)
검증: VS Code 우측 하단에 “Successfully posted!” 라는 알림과 함께 게시물 보기(View Post) 및 게시물 편집(Edit Post) 링크가 나타납니다. View Post 링크를 클릭하여 브라우저에서 방금 발행한 글이 워드프레스 사이트에 올바르게 표시되는지 확인합니다. 마크다운으로 작성한 제목, 목록, 코드 블록 등이 HTML로 잘 변환되었는지 확인하면 모든 과정이 성공적으로 완료된 것입니다.
결론 및 다음 단계
축하합니다! 당신은 이제 VS Code를 중심으로 Google AI와 워드프레스를 통합한 강력하고 효율적인 콘텐츠 제작 파이프라인을 구축했습니다. 이 시스템을 통해 개발자는 자신이 가장 편안하게 느끼는 환경에서 벗어나지 않고도, 아이디어 구상부터 발행까지의 전 과정을 매끄럽게 처리할 수 있습니다.
핵심 이점:
- 생산성 극대화: 잦은 컨텍스트 전환 없이 오직 콘텐츠 제작에만 집중할 수 있습니다.
- 개발자 친화적 환경: 마크다운으로 글을 작성하고, Git으로 버전 관리를 할 수 있습니다.
- 강력한 AI 지원: Google Gemini의 능력을 편집기 내에서 직접 활용하여 글의 품질과 작성 속도를 높일 수 있습니다.
다음 단계:
- Git을 이용한 콘텐츠 버전 관리: 작성한 .md 파일들을 깃허브(GitHub) 저장소에서 관리하여 모든 변경 이력을 추적하고 백업할 수 있습니다.
- 이미지 워크플로우 통합: 이전 가이드에서 다룬 ‘깃허브를 이미지 호스팅으로 사용하기’를 이 워크플로우에 통합하여, 마크다운 파일에 깃허브 이미지 URL을 삽입하는 방식으로 이미지까지 완벽하게 관리할 수 있습니다.
- VS Code Tasks 자동화: VS Code의 Tasks 기능을 사용하여 ‘Git Push 후 자동으로 워드프레스에 Draft로 발행’하는 것과 같은 커스텀 명령을 만들어 워크플로우를 더욱 자동화할 수 있습니다.