[아티클 01] 메모 앱 만들며 프롬프트 작성 기술 익히기
효과적인 프롬프트 작성은 바이브 코딩의 핵심 역량입니다. 이번에는 커서와 원활한 소통과 결과물을 생성하기 위해 좋은 프롬프트를 만드는 팁과 부족한 결과를 보강하는 방법, 그리고 직접 연습할 수 있는 과정을 통해 프롬프트 활용 능력을 자연스럽게 익히도록 안내합니다.
프롬프트 작성 팁 4가지 알아보기
프롬프트는 커서와 소통하는 핵심 도구로, 여러분의 생각과 아이디어를 실제 코드로 바꾸는 마법의 열쇠입니다. 명확하고 구체적인 프롬프트는 원하는 코드를 빠르게 얻는데 큰 역할을 하며, 코딩 과정을 훨씬 더 효율적이고 직관적으로 만들어줍니다. 단순히 ‘코드를 만들어줘’라는 요청부터 ‘특정 기능을 구현해줘’ 또는 ‘오류를 해결해줘’와 같은 문제 해결까지, 프롬프트는 AI와의 대화를 통해 여러분의 의도를 정확히 전달하는 다리 역할을 합니다. 프롬프트 작성 기술을 익히면 코딩이 훨씬 더 재미있고 생산적인 작업이 될 겁니다. 다음은 이 책 전반에 걸쳐 자주 사용하게 될 프롬프트 작성 팁 4가지를 나열한 겁니다. 미리 알아두면 앞으로의 학습이 훨씬 수월해질 겁니다.
구체적으로 작성하기 : ‘버튼을 만들어줘’보다 ‘Shadcn UI로 파란색 ‘추가’ 버튼을 만들어줘’와 같이 구체적으로 요청하세요.
단계별로 나누기 : 복잡한 요청은 여러 단계로 나눠서 전달하면 AI가 더 정확하게 이해할 수 있어요.
창의적인 아이디어 제시하기 : ‘메모를 추가할 때 색상이 랜덤으로 바뀌게 해줘’처럼 자신만의 아이디어를 제안해보세요.
피드백 제공하기 : ‘이 코드는 너무 복잡해, 더 간단하게 바꿔줘’처럼 구체적인 수정 사항을 AI에게 요청하여 결과를 개선해보세요.
보강된 프롬프트 예 확인하기
프롬프트는 간단한 요청부터 시작해 점점 복잡한 요청으로 확장할 수 있습니다. 특히 채팅창에서 여러 파일을 수정하거나 긴 코드 작성을 요청할 때도 효과적입니다. 만약 커서의 응답이 기대와 다르다면 다음 예시처럼 수정 요청을 구체적으로 전달해보세요.
프롬프트 작성은 단순한 질문이 아니라 커서에게 의도를 명확히 전달하는 대화 과정입니다. 예를 들어 처음에는 ‘간단한 버튼을 만들어줘’라고 요청한 뒤 이어서 ‘색상을 파란색으로 바꿔줘’라고 추가 지시를 해보세요. 그러면 커서가 어떻게 반응하는지 확인할 수 있습니다. 이런 연습을 통해 커서와 협업하는 방식이 점점 익숙해지고, 보다 자연스럽게 발전하게 될 것입니다.
메모 앱 만들며 프롬프트 작성 연습해보기
지금까지 프롬프트가 무엇인지, 그리고 어떻게 작성해야 하는지 살펴봤습니다. 하지만 최고의 학습 방법은 역시 직접 해보는 것이겠죠? 다음 챕터로 넘어가기 전에 5분만 투자해서 메모 앱을 직접 만들어보며, AI 코드 어시스턴트인 커서와 직접 대화하며 프롬프트와 친해지는 시간을 가져봅시다. 마치 처음 만난 친구와 대화하듯, 간단한 요청부터 시작해 점차 구체적으로 지시를 늘려가며 커서의 능력을 확인해보세요.
01 스티커 메모 앱 프로젝트를 커서로 열고, 커서와 대화할 수 있는 채팅창을 띄워주세요. 가장 먼저, 아주 간단하고 포괄적인 요청으로 대화를 시작하겠습니다. 커서가 프롬프트를 어떻게 이해하는지 확인하는 첫 단계입니다.
커서가 기본적인 기능(입력창, 추가 버튼, 목록 등)을 갖춘 메모 앱의 기본 코드를 생성할 겁니다. 훌륭한 시작이지만, 아직 우리의 취향은 전혀 반영되지 않았죠.
02 이제 방금 만든 기본 앱에 여러분의 구체적인 디자인 취향과 요구사항을 더해봅시다. 커서는 우리가 구체적으로 설명할수록 더 마음에 쏙 드는 결과물을 만들어줍니다. 다음과 같이 요청하겠습니다.
밋밋했던 앱이 여러분이 요청한 대로, 세련된 Shadcn UI 스타일의 입력창과 버튼, 그리고 눈에 잘 띄는 노란색 카드 형태의 메모장으로 변신했습니다. 커서가 구체적인 지시를 정확하게 이해하고 반영한 결과입니다.
03 커서는 훌륭한 개발자이자 디자이너입니다. 이제 우리 앱에 창의적인 아이디어를 더해달라고 요청해볼까요?
이제 메모를 추가할 때마다 각기 다른 색상의 메모가 예쁜 애니메이션과 함께 추가될 겁니다. 커서가 우리의 창의적인 아이디어를 기능으로 구현해낸 겁니다.
04 개발하다 보면 당연히 오류를 만나게 됩니다. 이때 커서는 오류를 함께 해결하는 든든한 동료가 될 수 있습니다. 커서가 오류를 잘 해결해주는지 확인하기 위해 실제 오류가 없다면, 일부러 코드 일부를 지워서 오류를 만들어 확인해보겠습니다. 오류를 프롬프트에 복사해서 붙여 넣거나, 터미널의 오류 부분을 드래그하여 [Add to Chat]을 눌러 추가합니다.
커서는 프로젝트 전체 코드를 분석하여 오류의 원인을 설명해주고, 해결된 코드를 제안할 겁니다. 막막했던 디버깅 과정이 커서와의 대화를 통해 훨씬 더 빠르고 수월해졌습니다.
어땠나요? 방금 여러분은 단 네 번의 대화만으로 멋진 메모 앱을 만들었습니다. 단순한 아이디어를 구체화하고, 창의적인 디자인을 더하고, 발생한 문제까지 해결하면서 커서와의 완전한 협업 사이클을 직접 경험했습니다. 프롬프트 작성은 어려운 기술이 아니라, 이처럼 커서에게 내 의도를 명확히 전달하는 '대화'입니다. 이제 프롬프트 작성에 대한 자신감이 조금 붙었나요? 이 자신감을 가지고, 다음 챕터에서 우리만의 멋진 프로젝트를 본격적으로 시작해봅시다.