VS Code에서 프롬프트 파일을 사용하여 AI를 더 잘 사용하기

프롬프트 파일이 중요한 이유

0:00에 Tim은 "AI에 프롬프트 파일을 사용하면 평범한 경험을 훌륭한 경험으로 바꿀 수 있습니다."라고 말합니다. 프롬프트 파일은 AI 모델에게 어떻게 생각하고, 어떻게 진행하고, 사용자의 프롬프트에 어떻게 응답해야 하는지를 알려줍니다. Tim은 이것을 Microsoft의 Burke Holland가 만든 "Beast Mode" 파일과 연결하는데, 이 파일은 템플릿처럼 작동하는 대규모 시스템 프롬프트입니다. 이를 통해 개발자는 반복적인 명령어를 줄이고, 오류를 감소시키며, VS Code 내에서 더욱 예측 가능한 코드를 생성할 수 있습니다.

팀은 이를 일종의 프롬프트 엔지니어링으로 설명합니다. 즉, 재사용 가능한 일련의 지침을 구축하여 나중에 채팅 보기나 활동 표시줄의 AI 툴킷 아이콘에 간단한 사용자 프롬프트를 입력할 때 AI가 이미 사용자의 코딩 스타일과 선호하는 프로젝트 구조를 알고 있도록 하는 것입니다.

Tim의 개발자 자료

도구를 보여주기 전에 Tim(0:27)은 자신이 제공하는 무료 및 유료 리소스(9개의 정규 강좌, iamtimcorey.com 에 있는 10번째 강좌, 개발자 질문에 답변하는 팟캐스트)를 요약합니다. 그는 이러한 기능들이 개발자들이 기술을 연마하고 더 나은 워크플로를 구축하는 데 도움이 되도록 고안되었다고 강조합니다. 이것이 바로 VS Code AI 프롬프트 파일이 중요한 이유입니다. 이는 일상적인 코딩 작업을 개선하기 위한 최신 관행의 일부이기 때문입니다.

VS Code에서 비스트 모드 설정하기

1분 22초에 Tim은 VS Code의 도구 섹션으로 이동합니다. 그는 이미 "모드 구성"에서 비스트 모드를 설치하고 선택해 놓았습니다. 그는 AI 툴킷 뷰를 열고 모델 카탈로그에서 모델을 찾아보고 새로운 사용자 지정 모드를 만들 수 있다고 설명합니다. 예시에서 '프롬프트 추가 선택'을 클릭하고 ' GitHub 채팅 모드'와 같은 이름을 지정한 다음 파일 내용을 붙여넣을 수 있습니다(1:34). 이 기능은 사용자 지정 시스템 프롬프트를 저장하여 작업 공간에서 항상 사용할 수 있도록 합니다.

Tim의 설정은 로컬 모델이나 클라우드 모델을 사용자 지정 프롬프트 빌더 지침과 결합하는 방법을 보여줍니다. 모든 파일은 VS Code 루트 폴더 또는 다른 저장된 폴더에 깔끔하게 정리되어 있으므로 나중에 쉽게 반복 작업을 수행할 수 있습니다.

실제 프로젝트에서 AI 활용하기

2분 3초부터 Tim은 VS Code 워크스페이스에 호스팅된 실제 웹사이트 프로젝트에서 AI 기능을 시연합니다. 그는 "학습 경로" 섹션의 코드(기본적으로 Python/React 기반 사이트)를 열고 앱 탐색 메뉴를 보여줍니다. 그는 화살표 아이콘에 마우스 오버 시 작은 애니메이션 효과를 추가하도록 수정하고 싶어합니다(3:21).

이는 전형적인 개발자 시나리오입니다. 프런트엔드 코드가 있는데, AI 에이전트가 CSS를 생성해 주길 바라지만 모든 세부 사항을 직접 작성하고 싶지는 않은 경우입니다. 프롬프트 파일이 이미 로드된 경우 사용자 프롬프트는 간결하게 작성할 수 있으며, AI가 상황에 맞는 내용을 채워줍니다.

AI 프롬프트 준비하기

3시 38분에 Tim은 Windows 캡처 도구(Windows+Shift+S)를 사용하여 화살표가 표시된 스크린샷을 캡처합니다(3시 45분). 이러한 시각적 맥락은 인공지능에 도움이 됩니다. 그는 4시 43분에 자연스러운 프롬프트를 입력합니다.

"학습 경로 섹션 아래에 있는 탐색 메뉴에서 마우스 커서를 올리면 화살표가 30°에서 수평으로 회전하고, 마우스 커서를 떼면 다시 원래대로 돌아옵니다." 현재 모습은 다음과 같습니다. (스크린샷 참조)

팀은 나중에 CSS를 정확히 어디에 배치할지 지정할 수도 있다고 언급했지만, 우선 비스트 모드의 기능을 테스트하기 위해 다음과 같은 프롬프트를 사용합니다.

비스트 모드의 계획

6시에 Tim은 Beast Mode가 다음과 같은 워크플로를 제시한다고 설명합니다. 올바른 선택자를 식별하고, CSS 클래스를 추가하고, 호버 효과를 추가한 다음 테스트 및 검증하는 것입니다. 심지어 CSS를 루트 위의 올바른 site.css 파일에 배치하기도 합니다(6:42). 이는 프롬프트 파일에 미리 정의된 스키마, 즉 스타일이 배치될 위치에 대한 "규칙"이 AI의 응답을 어떻게 안내하는지 보여줍니다.

팀은 프롬프트 파일을 사용하는 것의 "중요한 점"은 바로 이것이라고 말합니다. 프롬프트 파일은 맥락을 제공하여 사용자가 매번 전체 설명을 반복하지 않아도 AI가 프로젝트 구조를 알고 있는 것처럼 작동할 수 있도록 해줍니다.

반복 및 개선

팀이 6시 54분에 사이트를 확인했을 때, 생성된 코드는 화살표 하나에만 영향을 미치고 그 방향도 잘못되어 있었습니다. 그는 7분 29초에 프롬프트를 수정하여 마우스 오버 효과를 반전시키고 모든 화살표에 적용합니다.

8시 49분에 그는 모든 화살표가 동시에 회전하는 것을 알아차렸다. 그래서 그는 9시 6분에 또 다른 사용자 메시지를 보내 AI에게 마우스 커서가 올라간 항목에만 효과를 적용하라고 지시합니다. 팀은 9시 38분에 "인공지능을 조정해야 합니다."라고 말합니다. 그것이 항상 옳은 일을 하는 것은 아닙니다.

이는 채팅 화면 내에서 즉각적인 반응을 유도하는 엔지니어링의 훌륭한 예입니다. 원하는 구조화된 출력이 나올 때까지 프롬프트를 편집하고, 반복하고, 저장합니다. 프롬프트 파일에 이미 시스템 프롬프트가 제공되어 있으므로, 각 새로운 명령어는 약간의 개선 사항일 뿐입니다.

최종 결과

9시 52분, 팀은 화살표에 따라 애니메이션이 이제 제대로 작동한다고 확인했습니다. 마우스 커서를 올리면 회전하고, 마우스 커서를 떼면 원래대로 돌아갑니다. 그는 밝은 테마로 전환하거나 어두운 테마로 전환하거나, 색상을 변경하거나, 전환 속도를 늦추는 등 원하는 대로 할 수 있다고 말합니다(10:02). 핵심은 AI가 SVG 변환을 파악하고 그를 위해 CSS를 작성했다는 것입니다(10:11).

Tim은 10:30~11:20에 Beast Mode를 확장하거나 자신만의 프롬프트 빌더 파일을 만들어 파일 레이아웃, 코드 서식 지정 방식 또는 Python 함수 호출 방식을 정의할 수 있다고 설명합니다. 그러면 일상적인 질문은 훨씬 짧아도 일관된 답변을 얻을 수 있습니다.

AI 출력 검토

11시 50분에 팀은 AI의 변경 사항을 항상 검토해야 한다고 경고합니다. 보호된 프롬프트 파일과 모범 사례를 따르더라도 AI가 클래스를 잘못된 위치에 추가하거나 필수 종속성을 손상시킬 가능성이 있습니다. 그의 예시에서 AI는 CSS 클래스를 추가하거나 코드 한 줄을 추가하는 등 작고 합리적인 변경만 수행했지만, 개발자는 여전히 변경 로그를 확인하고 필요에 따라 수정해야 합니다.

팀은 마음에 드는 결과를 얻으면 저장해 두었다가 다시 사용할 수 있다는 점을 언급하며 마무리합니다. 이것이 바로 VS Code 내에서 AI 모델과 프롬프트 파일을 사용하는 핵심입니다. 즉, 임시 프롬프트를 SDK와 유사한 안정적인 환경으로 전환하는 반복 가능하고 일관된 워크플로를 구축하는 것입니다.

팀 코리의 데모에서 얻은 주요 교훈

Tim Corey의 비디오 설명에 따라 Visual Studio Code 내에서 잘 설계된 프롬프트 파일이 어떻게 도움이 되는지 확인할 수 있습니다.

• AI 모델에 일관된 맥락을 제공하여 프롬프트를 더 짧게 만들 수 있습니다.

• 생성된 코드, 구조화된 출력 및 서식을 자동으로 처리합니다.

• 작업 공간, 활동 표시줄 및 AI 툴킷에 통합하여 프롬프트를 쉽게 열고 테스트하고 개선할 수 있습니다.

• 모델을 탐색하고, 로컬 모델과 클라우드 모델 간에 전환하고, 신속한 엔지니어링 규칙을 원활하게 적용할 수 있습니다.

규칙을 프롬프트 파일에 저장하면 AI가 따를 수 있는 신뢰할 수 있는 에이전트 스크립트를 제공하게 되므로, 동일한 지침을 반복하는 대신 더 높은 수준의 개발 작업에 집중할 수 있습니다.