최신 버전 v2.2.2 · 상태바 버튼 보완
터미널 전체와 미리보기 전체 버튼에 각각 고정 ID를 부여해 표시 설정을 독립적으로 관리합니다. 버튼이 보이지 않으면 상태바를 우클릭하고 Vibe Coding 전환 항목의 체크를 확인하세요. AI 설치 검증에도 이 확인을 포함했습니다.
🚀 1분 만에 세팅하기 (AI에게 요청)
로컬 실행 권한이 있는 AI 에이전트(Codex 등)에게 아래 프롬프트를 그대로 복사해서 전달하세요.
https://github.com/ARTHONG1/vsstudiovibecoding 의 vibe-coding 폴더를
내 AI 도구의 스킬 폴더에 설치하고 SKILL.md를 읽어 실행해줘.
Windows에서 별도 샘플 프로젝트를 만들고 VS Code, Codex CLI,
필수 확장, 미리보기 | 코드 | Codex 3열 화면과 상태바 토글 버튼까지 설정해줘.
기존 설정과 파일은 보존하고 실제 화면, 버튼, 3대 모드 전환,
바로가기 재실행을 검증해줘. 보안 승인과 로그인이 필요하면
정확히 어떤 버튼을 내가 눌러야 하는지 알려줘.📌 핵심 구성 및 3대 뷰포트 모드
🖥️ 3대 뷰포트 모드
[3열 분할] 미리보기(50%) | 코드(50%) | 우측 공식 Codex CLI
[터미널 전체] Codex와 대규모 프롬프트 및 빌드 로그 점검 (100%)
[미리보기 전체] 순수 1:1 고해상도 웹 UI 검수 및 Computer Use 자율 조작 (100%)
🖱️ 원클릭 UI & 단축키
상태바 버튼: 화면 우측 하단 [ 🗖 터미널 전체 ], [ 🌐 미리보기 전체 ]
에디터 툴바: [ ↗ 외부 브라우저 ](Chrome/Edge F12) 및 [ 📷 이미지 첨부 ]
터미널 복사/붙여넣기: Ctrl + V 즉시 붙여넣기, 마우스 드래그 자동 복사, Alt + V 클립보드 캡처 이미지 즉시 첨부
F12 순정 보존: 기본 '함수/변수 정의로 이동' 기능을 100% 온전히 보존
📁 다중 프로젝트 & 우클릭 메뉴
탐색기에서 아무 폴더나 우클릭 ➔ [Vibe Coding으로 열기]를 누르면 해당 프로젝트 전용 3열 환경이 즉시 실행됩니다. 프로젝트별 독립 해시 워크스페이스가 적용되어 서로 간섭하지 않습니다.
🤖 공식 Codex & OpenCodex 시너지
3열 터미널에 OpenAI 공식 Codex가 직접 구동되며, OpenCodex 연결과 추가 모델 사용은 설치된 에이전트의 설정 및 인증에 따라 달라집니다. Computer Use 도구는 별도 구성이 필요하며, 이 스킬의 설치만으로 제공되지 않습니다.
⚠️ 사용자가 직접 눌러야 하는 단계 (중요!)
1. 작업 공간 신뢰 (Workspace Trust)
VS Code 실행 후 "Do you trust the authors of the files in this workspace?" 팝업이 뜨면 [Trust Workspace & Continue]를 눌러주세요. (제한 모드에서는 Live Preview 및 확장이 실행되지 않습니다)
2. 화면 제어 승인
AI가 화면을 검증할 수 있도록 AI 클라이언트(Codex 등)가 띄우는 컴퓨터/앱 제어 권한을 승인해주세요.
3. AI 모델 확인 및 변경
오른쪽 3열 터미널에서 공식 Codex가 실행됩니다. OpenCodex가 설치되어 있다면 평소처럼 /model 또는 환경설정을 통해 멀티 모델을 즉시 전환할 수 있습니다.
❓ 자주 묻는 질문 & 문제 해결
F12 단축키가 원래 기능으로 동작하나요?
네! 기존 버전과 달리 F12를 가로채지 않고 VS Code 본래의 [함수/변수 정의로 이동(Go to Definition)]으로 100% 정상 작동합니다. 화면 전환은 화면 우측 하단의 전용 상태바 버튼과 툴바 아이콘으로 직관적으로 조작하실 수 있습니다.
상태바 버튼이 안 보여요. 어디에 있나요?
화면 맨 아래 오른쪽 구석(알림 종 아이콘과 포트 번호 바로 왼쪽)에 [ 🗖 터미널 전체 ]와 [ 🌐 미리보기 전체 ] 버튼이 항상 노출됩니다. 혹시 보이지 않는다면 Ctrl + Shift + P ➔ Reload Window (창 다시 로드)를 한 번 실행해 주세요.
새로운 프로젝트마다 어떻게 적용하나요?
윈도우 탐색기에서 원하는 프로젝트 폴더를 마우스 우클릭 ➔ [Vibe Coding으로 열기]를 누르거나, AI 에이전트(Codex)에게 "내 프로젝트 C:MyProject를 바이브 코딩으로 열어줘"라고 말하면 끝납니다. 스킬이 진입 파일과 프레임워크 포트를 자동으로 감지하여 전용 3열 창을 띄워줍니다.