프롬프트 가이드
입력하기 전에 결정하고, 나누어 만들고, 실제 콘텐츠를 사용하며, 모든 요청을 적절한 에이전트에게 전달하세요. 이러한 습관은 한 줄짜리 아이디어를 완성된 결과물로 바꿔 줍니다.
입력하기 전에 결정하고, 나누어 만들고, 실제 콘텐츠를 사용하며, 모든 요청을 적절한 에이전트에게 전달하세요. 이러한 습관은 한 줄짜리 아이디어를 완성된 결과물로 바꿔 줍니다.
프로젝트 채팅에서 시작하세요. 변경하려는 프로젝트의 채팅을 연 다음, 작업에 맞는 역할을 가진 에이전트를 선택하거나 직접 지정하세요. 어떤 에이전트가 적합한지 확신이 없다면, 만들기 전에 팀에 명확히 해 달라고 요청하세요.
이 가이드는 에이전트 팀으로부터 더 나은 결과를 꾸준히 얻는 데 도움이 되는 기법들을 모아 놓았습니다. 이 중 어느 것도 특별한 능력을 요구하지 않습니다. 중요한 것은 형식이 아니라 무엇을 말하느냐입니다. 아주 첫 요청을 작성하든, 이미 성숙한 프로젝트를 다듬고 있든, 같은 원칙이 적용됩니다. 생각이 명확하면 결과도 명확해집니다.
만들기 전에 팀이 질문하게 하세요
더 나은 결과를 얻는 가장 효과적인 방법 중 하나는 요청이 크거나 모호할 때 팀이 알아서 맞히길 기대하는 대신 질문을 유도하는 것입니다. 원하는 내용을 말한 뒤, 마지막에 한 줄을 덧붙이세요.
시작하기 전에 제가 원하는 바를 완전히 이해하는 데 필요한 것이 있으면 무엇이든 물어보세요.
그러면 경계 사례, 대상 사용자, 트레이드오프 등 스스로는 답해야 한다고 생각하지 못했을 질문들을 자주 받게 됩니다. 이를 미리 정리하는 데는 1분이면 충분하지만, 만든 뒤에 발견하면 다시 작업해야 합니다. 그 결과 첫 시도부터 의도에 훨씬 더 가깝게 도달할 수 있습니다.
1단계: 입력하기 전에 결정하세요
무엇을 만들고 있는지 파악하세요
시작 전에 몇 분만 생각해도 나중에 프롬프트를 반복해서 다시 쓰는 일을 크게 줄일 수 있습니다. 시작하기 전에 네 가지 간단한 질문에 답할 수 있는지 확인하세요. 무엇을 만들고 있는지, 누구를 위한 것인지, 왜 그들이 그것을 사용할 것인지, 그리고 그들이 취하길 바라는 핵심 행동이 무엇인지입니다.
이 핵심 행동은 흔히 CTA라고 부르며, call to action의 약자입니다. 이는 사용자가 가장 선택하길 바라는 버튼, 링크 또는 다음 단계로, 예를 들어 Sign Up, Book a Demo, Start Free, Buy Now 같은 것입니다.
완전한 명세서를 작성할 필요는 없습니다. 목표는 단지 프로젝트에 명확한 방향을 부여하는 것입니다. 시작점이 구체적일수록 머릿속에 있는 것과 맞는 결과를 더 쉽게 만들어낼 수 있습니다.
프리랜서를 대상으로 한 예산 관리 앱용 원페이지 사이트를 만드세요. 주요 CTA는 “Start Saving Smarter.”입니다. 큰 타이포그래피와 강렬한 색상을 사용한 대담하고 표현력 있는 스타일로 구성하세요.
화면만이 아니라 여정을 스케치하세요
좋은 디자인은 화면 위에만 있는 것이 아니라 화면 사이에도 존재합니다. 사용자가 거치는 경로를 따라가 보세요. 처음 무엇을 보는지, 무엇이 신뢰를 쌓는지, 무엇이 행동할 자신감을 주는지, 그리고 그 행동이 어디로 이어지는지를 생각하세요. 히어로, 증거, 행동 유도처럼 세 박자의 간단한 스케치만 있어도 요청의 효과는 크게 높아집니다. 이제 각 섹션이 존재해야 하는 이유와 다음 섹션으로 이어져야 하는 이유가 생기기 때문입니다.
초기에 비주얼 방향을 정하세요
스타일은 나중에 덧붙이는 것보다 처음에 정하는 편이 훨씬 쉽습니다. 차분하고 우아한지, 대담하고 파격적인지, 프리미엄하고 세련된지 방향을 정하고, 팀이 실행할 수 있는 톤 단어를 사용해 첫 요청에 명시하세요. 예: minimal, playful, cinematic, developer focused. 이런 단어는 단순한 장식이 아닙니다. 첫 컴포넌트부터 타이포그래피, 간격, 색상, 그림자, 모서리 반경을 결정합니다. 이후 요청에서도 같은 스타일 문장을 재사용하면 전체적인 일관성을 유지할 수 있습니다.
차분한 웰니스 감성의 디자인을 사용하세요: 부드러운 그라디언트, 채도를 낮춘 어스 톤, 둥근 모서리, 넉넉한 패딩. 전체적인 톤은 부드럽고 안심되는 느낌으로 해주세요.
2단계: 잘 전달되는 요청을 작성하세요
구현이 아니라 결과를 설명하세요
만드는 단계가 아니라 원하는 결과를 설명하세요. 예를 들어 “세 가지 옵션이 있는 가격 섹션을 추가하고 가운데 옵션이 돋보이게 해주세요”는 페이지를 정확히 어떻게 구성해야 하는지 설명하는 것보다 더 유용합니다. 무엇이 보여야 하는지와 왜 중요한지에 집중하세요. 어떻게 만들지는 팀이 결정할 수 있습니다.
페이지 단위가 아니라 조각 단위로 작업하세요
하나의 컴포넌트, 즉 히어로, 기능 그리드, 추천사 행, 가격표처럼 범위가 정해진 요청은 명확성과 제어력을 제공합니다. 어떤 조각이 기대에 못 미치면 주변 전체를 다시 생성하는 대신 그 조각만 조정하면 됩니다. 블록 하나를 만들고, 검토하고, 다듬은 다음, 다음으로 넘어가세요. 전체 페이지 요청은 잡음을 만들고, 컴포넌트 요청은 신호를 만듭니다.
기능 섹션을 만드세요: 가운데 정렬된 헤드라인 아래에 카드 3개를 가로로 나란히 배치하고, 각 카드에는 아이콘, 제목, 한 줄 설명을 넣으세요. 부드러운 그림자와 hover 시 약간 떠오르는 효과를 적용하세요.
실제 문구를 사용하세요
플레이스홀더 텍스트는 문제를 가리지만, 실제 카피는 문제를 드러냅니다. 실제 헤드라인은 두 줄이 필요할 수 있고, 실제 CTA는 동사 형태가 더 잘 맞을 수 있습니다. 초안이라도 사용자가 실제로 읽게 될 문구를 작성하세요. 콘텐츠가 실제일 때 레이아웃, 간격, 디자인 결정이 모두 더 좋아집니다.
히어로 헤드라인: “Design Calmly.” 보조 문구: “Turn stress into structure.” CTA: “Start Building Free.” 카피 중심 레이아웃에 넉넉한 세로 간격을 사용하세요.
실제 요소의 이름을 지정하세요
페이지에 원하는 것을 설명할 때는 명확하고 구체적인 단어를 사용하세요. 디자인 용어를 알 필요는 없습니다. 프로필 카드, 버튼, 폼처럼 사용자가 보거나 상호작용해야 할 것들의 이름만 말하면 됩니다.
구체적인 요청은 광범위한 요청보다 만들기 쉽습니다. 필요한 기본 요소부터 시작한 다음, 세부 사항을 하나씩 추가하세요.
사진, 이름, 팔로우 버튼이 있는 프로필 카드를 만드세요. 이름 옆에 작은 “Verified” 라벨을 추가하고, 누군가 그 위에 마우스를 올리면 짧은 설명이 표시되게 하세요.
3단계: 정확하게 변경하세요
모든 변경의 범위를 정하세요: 무엇을 바꾸고, 무엇을 유지할지
기존 작업을 조정할 때는 양쪽 모두를 명확히 하세요. 무엇이 바뀌어야 하는지, 무엇은 바뀌면 안 되는지입니다. “더 좋게 만들어줘”보다는 “replace”, “update”, “adjust” 같은 방향성 있는 단어를 사용하고, 마음에 드는 부분은 건드리지 않도록 경계를 정하세요. 여기서의 정확성이 반복 작업이 퇴보로 바뀌지 않게 해줍니다.
CTA 텍스트를 “Get Started”로 바꾸고 가로 패딩을 늘리세요. 현재 색상, 글꼴, 그리고 이 섹션의 나머지 모든 것은 변경하지 마세요.
한 번에 의미 있는 변경 하나씩
먼저 카피를 수정하고, 그다음 레이아웃을, 그다음 상호작용을 업데이트하며 다음 요청으로 넘어가기 전에 각 결과를 확인하세요. 작고 신중한 단계는 세련된 제품으로 이어지지만, 한 메시지에 열 가지 변경을 넣으면 모호함만 쌓이고, 문제가 생겼을 때 어떤 변경이 원인이었는지 알 수 없게 됩니다.
작업 중간 수정은 채팅에서 이루어집니다. 채팅에서 Prompt Queue를 사용할 수 있고 에이전트 작업이 진행 중이라면, 후속 메시지는 실행 중인 작업 뒤에 대기열로 들어갑니다. 다른 내용을 다시 보내기 전에 메시지가 대기열에 표시되는지 확인하세요. 대기열 제어가 보이지 않는다면 다시 보내지 마세요. 현재 작업이 끝날 때까지 기다리거나, 채팅에서 제공하는 경우 interrupt 제어를 사용한 뒤, 후속 메시지를 보내기 전에 작업 상태를 확인하세요. 자세한 내용은 프로젝트 채팅을(를) 참조하세요.
UI보다 한 단계 앞서 생각하세요
프로젝트가 단지 보기 좋기만 한 것을 넘어 더 많은 일을 해야 한다면, 외형과 함께 동작도 정의하세요. 로그인 상태와 로그아웃 상태에서 사용자가 무엇을 보는지, 동적 콘텐츠가 어디서 오는지, 인터페이스가 비어 있음, 로딩, 오류 상태를 어떻게 처리하는지 명시하세요. 이런 시나리오를 고려해 디자인하는 데 작동하는 백엔드가 꼭 필요한 것은 아닙니다. 이를 초기에 계획하면 나중에 큰 UI 재작업을 막는 데 도움이 됩니다.
사용자가 로그인되어 있으면 오른쪽 상단에 아바타와 이름을 표시하세요. 그렇지 않으면 auth 화면으로 이동하는 “Log In” 버튼을 표시하세요.
FAQ
AI 에이전트를 위한 효과적인 프롬프트는 어떻게 작성하나요?
프롬프트는 다음 핵심 요소로 구성하세요.
1. Context — 상황을 설정하세요. 무엇을 만들고 있는지와 현재 어디까지 진행되었는지 설명하세요.
2. Goal — 원하는 정확한 결과나 기능을 구체적으로 설명하세요.
3. Requirements & Constraints — 무엇이 변경되어야 하고 무엇은 그대로 유지되어야 하는지 명확히 나열하세요.
4. Expected Result — 성공의 기준이 무엇인지 정의하세요(예: UI 동작, 오류 처리, 상태 유지).
5. References — 가능하면 스크린샷, 링크, 워크플로 단계 또는 코드 샘플을 첨부하세요. 공유하기 전에 비밀번호, 인증 코드, API 키, 쿠키, 개인 데이터, 결제 정보를 제거하세요.
예시: "사이드바가 있는 대시보드를 만들고 있습니다. 사이드바 하단에 로그아웃 버튼을 추가하세요. 세션을 지우고 /login으로 리디렉션해야 합니다. 사이드바 레이아웃이나 내비게이션 링크는 변경하지 마세요. 클릭 후 사용자는 1초 이내에 로그인 페이지를 봐야 합니다."
여러 기능이 포함된 복잡한 요청은 어떻게 처리해야 하나요?
복잡한 요청은 더 작은 작업으로 나누세요.
1. 현재 문제와 최종 목표를 설명하세요.
2. 각 하위 작업을 따로 나열하세요(task 1, task 2, task 3).
3. 다음 작업으로 넘어가기 전에 각 작업을 검증하세요.
4. 마지막에 전체 흐름을 테스트하세요.
이 접근 방식은 에이전트에게 한 번에 너무 많은 일을 시켜 발생하는 예상치 못한 변경을 줄여 줍니다. 각 프롬프트는 검증 가능한 하나의 결과에 집중해야 합니다.
버그를 수정하는 프롬프트는 어떻게 작성하나요?
유용한 버그 수정 프롬프트에는 다음이 포함되어야 합니다.
- 페이지, 기능, 환경, 영향을 받는 사용자
- 문제를 재현하는 정확한 단계
- 실제 동작과 기대 동작
- 전체 오류 텍스트와 오류가 발생한 시점
- 관련 스크린샷 또는 로그(비밀번호, 토큰, 쿠키, 개인 데이터, 결제 정보 제거)
- 변경되지 않아야 하는 사항
- 수정 사항을 검증하는 방법과 실행해야 할 회귀 점검
예시: “Preview의 checkout 페이지에서 Submit을 선택하면 500 오류가 반환됩니다. 기대 결과: 주문이 확인되고 사용자가 감사 페이지에 도달해야 합니다. 재현: [steps]. 장바구니 총액이나 결제 흐름은 변경하지 말고 원인을 수정한 다음, 성공 결제 1건과 결제 거절 1건을 검증하세요. 첨부한 로그에서는 모든 비밀 값을 제거했습니다.”
페이지 레이아웃이나 스타일을 수정하는 프롬프트는 어떻게 작성하나요?
페이지 수정을 요청할 때는 다음을 포함하세요.
1. 수정할 구체적인 페이지, 모듈, 요소
2. 현재 상태와 목표 결과
3. 참고 링크 또는 스크린샷
4. 변경되지 않아야 하는 기능
5. 승인 기준(예: 데스크톱과 모바일 모두에서 작동해야 함)
예시: " /pricing 페이지에서 플랜 카드 그리드를 데스크톱 기준 2열에서 3열로 변경하세요. 모바일 레이아웃은 단일 열로 유지하세요. 이 스크린샷을 참고하세요 [attach]. 카드 콘텐츠나 버튼 스타일은 변경하지 마세요."
수정해도 에이전트가 계속 잘못된 변경을 한다면 어떻게 해야 하나요?
에이전트가 반복해서 기대에 못 미친다면, 지시를 더 추가하는 것이 오히려 혼란을 키울 수 있습니다. 대신 다음과 같이 하세요.
1. 현재 상태를 보존하세요 — 겹치는 수정 지시를 보내는 것을 멈추세요. 채팅에 Revert 제어가 보인다면 사용하기 전에 확인 문구를 읽고, 유지해야 할 이후 변경 사항을 메모한 뒤, 프로젝트를 확인하세요. 범위가 불분명하다면 계속 진행하지 마세요. 프로젝트 채팅 안내를 사용하거나, 민감한 정보를 가린 Chat Link와 스크린샷을 첨부해 Support에 문의하세요.
2. 잡음을 제거하세요 — 위에 추가 지시를 덧붙이는 대신, 핵심 문제를 처음부터 깔끔하게 다시 설명하세요.
3. 한 번에 하나의 작업만 — 다음으로 넘어가기 전에 하나의 문제를 해결하는 데 집중하세요.
한 걸음 물러서서 변경을 점진적으로 처리하면, 하나의 프롬프트에서 여러 겹치는 문제를 한꺼번에 해결하려는 것보다 보통 훨씬 더 빠르게 문제가 해결됩니다.