모범 사례

​

프롬프트 모범 사례

​

1. 더 나은 결과물을 위한 프롬프트 엔지니어링 마스터하기:

• 명확성과 상세함: 명확하고 상세한 프롬프트는 더 우수한 결과물로 이어집니다. /dashboard와 같은 정확한 페이지와 예상되는 동작을 언급하며 구체적으로 작성하세요. 다음과 같이 자연어를 사용하여 요청하세요.

Investor 역할을 가진 사용자는 이 컴포넌트에 접근할 수 있지만 Admin은 접근할 수 없도록 하고 싶습니다.

• 시각 자료: 특히 버그나 UX 문제를 설명할 때는 스크린샷을 추가하세요. 이는 말만으로는 놓칠 수 있는 시각적 맥락을 제공합니다.
• 가드레일과 제한 사항: AI에게 건드리지 말아야 할 것을 알려주세요. 예를 들어, 다음과 같이 지시할 수 있습니다:

/shared/Layout.tsx 파일은 수정하지 마세요.

• 기억을 위한 반복: AI의 기억력은 제한될 수 있으므로, 필요한 경우 여러 프롬프트에 걸쳐 중요한 지침을 반복하세요.
• 복잡한 작업 분해하기: 여러 가지를 동시에 구현하려고 하지 마세요. 작업을 더 작고 테스트 가능한 단위로 나누세요. 다음 단계로 진행하기 전에 각 단계 사이에 토론 모드를 사용하여 검증하세요. 기능 분해에 유용한 템플릿은 다음과 같습니다:

새 페이지 생성, UI 레이아웃 추가, 데이터 연결, 로직 + 엣지 케이스 추가, 역할별 테스트.

• 역할별 지침: 애플리케이션이 여러 사용자 역할을 지원하는 경우, 프롬프트가 어떤 역할에 적용되는지 항상 정의하세요. 이는 공유 로직이나 컴포넌트에서 발생하는 버그를 방지하는 데 도움이 됩니다. 예를 들어:

Investor로서 회사 대시보드를 보고 싶지만, 수정할 수는 없어야 합니다. 이 기능을 Investor 역할에만 국한시켜 주세요.

​

2. 토론 모드 자주 활용하기

• 사용 시점: “수정 시도”가 2-3번 실패한 후, 복잡한 로직이나 데이터베이스 문제를 디버깅할 때, 또는 새로운 기능을 계획할 때 토론 모드로 전환하세요. 다음과 같이 프롬프트를 입력할 수 있습니다.

"X를 구현하는 3가지 방법을 제안해 줘".

• 워크플로우 권장 사항: 일부 사용자는 시간의 60-70%를 토론 모드에서 보내고, 완전히 만족했을 때만 “계획 구현”을 클릭하는 것이 효과적이라고 생각합니다. 이 접근 방식은 결과물의 일관성을 높이고 의도하지 않은 수정을 방지합니다.
• 제어된 상호작용: 원치 않는 코드 실행을 피하려면 “조사하되 아직 코드는 작성하지 마” 또는 “아무것도 변경하지 않고 이 문제를 해결할 3가지 방법을 제안해 줘”와 같은 프롬프트를 사용하세요. 이를 통해 제어권을 유지할 수 있습니다.
• AI 루프 탈출하기: AI가 손상된 코드를 수정하는 “루프”에 빠지면 토론 모드로 전환하고 오류 스크린샷을 붙여넣은 후 다음과 같이 프롬프트를 입력하세요:

"다른 기능을 손상시키지 않고 이 문제를 조사해 주세요. 필요한 경우, 마지막으로 작동했던 버전으로 되돌리고 거기서부터 수정해 주세요".

​

3. 최후의 수단으로 리믹스하기

• 리믹스의 기능: 리믹스는 T=0 시점의 프로젝트 클린 복사본을 만듭니다. 그런 다음 이전 프로젝트를 순전히 참조용으로 사용하여 개선된 프롬프트와 더 명확한 지식으로 다시 빌드할 수 있습니다.
• 리믹스 시점: 버그가 많은 루프에 갇혔거나, 기록을 보존하면서 깔끔하게 다시 시작하고 싶거나, Supabase와 같은 데이터베이스 서비스를 연결 해제하고 새로운 접근 방식을 시도해야 할 때 유용합니다.

​

4. 인내심과 침착함 기르기

• 황금률: 프롬프트를 작성할 때 시간을 충분히 갖고, 모든 것을 다시 확인하며, 작업을 작고 테스트 가능한 블록으로 나누세요. 입력의 정밀도는 출력의 품질과 직접적인 관련이 있습니다.

​

5. 향상된 워크플로우를 위한 보너스 팁

• “답답하네요…” 패턴: AI가 더 잘 집중하도록 돕기 위해 “답답하네요…” 프롬프트 패턴을 사용하세요.
• 수정 후 확인: 주요 수정 후에는 항상 여러 역할과 그 동작을 다시 확인하세요, 특히 조건부 로직의 경우 더욱 그렇습니다.
• 대체 버전: 빠른 디버깅을 위해 안정적인 버전을 대체 버전으로 저장하세요.
• 역할별 컴포넌트: 지나치게 일반적인 로직으로 인한 버그를 피하려면 AI에게 다음과 같이 프롬프트를 입력하세요.

"[X 역할]을 위한 컴포넌트를 특별히 만들고, 명확하게 범위가 지정되지 않은 한 공유 컴포넌트를 재사용하지 마세요".

​

프롬프트 라이브러리 – 전략 및 예시

1. 프로젝트 시작하기

• 사용 시점: 프로젝트의 맨 처음에 AI가 높은 수준의 요구 사항을 이해하고 기반을 구축하도록 돕기 위해 사용합니다. 초기 프로젝트 개요서 역할을 합니다.
• 사용 방법: 애플리케이션 유형, 주요 기술(프론트엔드, 백엔드, 서비스), 주요 기능을 개략적으로 설명합니다. AI에게 어디서부터 시작할지 지시하세요. 일반적으로 메인 페이지나 중요한 기능부터 시작합니다.

"다음과 같은 작업 관리 애플리케이션이 필요합니다: - 기술 스택: Next.js 프론트엔드, 스타일링을 위한 Tailwind CSS, 인증 및 데이터베이스를 위한 Supabase. - 핵심 기능: 프로젝트 및 작업 생성, 사용자에게 작업 할당, 마감일 알림, 대시보드 개요. 다음을 포함하는 메인 대시보드 페이지부터 빌드해 주세요: - 내비게이션이 있는 헤더, - 상태가 표시된 프로젝트 목록, - 새 프로젝트 생성 버튼. 지금은 더미 데이터를 제공하고, 디자인이 깔끔하고 반응형인지 확인해 주세요".

2. UI/UX 디자인 개선

• 사용 시점: 애플리케이션의 기능을 변경하지 않고 시각적 매력을 다듬기 위해 사용합니다. UI를 다듬거나, 레이아웃을 조정하거나, 특정 디자인 스타일을 구현하는 것이 포함됩니다.
• 사용 방법: 디자인 변경 범위를 명확히 정의하고 기능은 그대로 유지되어야 함을 강조하세요. 원하는 미학(예: 모던, 미니멀리스트)에 대해 AI를 안내하세요. 여러 변경 사항을 한 번에 하나씩 처리하고 로직이 변경되어서는 안 되는 UI 부분을 언급하세요.

앱의 UI를 기능 변경 없이 개선해야 합니다. - 모든 기존 로직과 상태 관리는 그대로 유지하세요. - 시각적 개선: 대시보드 페이지의 스타일링을 업데이트하세요: 각 프로젝트 목록에 모던한 카드 디자인을 사용하고, 대비를 높이기 위해 색상 구성을 개선하며, 더 깔끔한 레이아웃을 위해 패딩을 늘리세요. - 이러한 변경 사항이 기능이나 데이터 흐름을 손상시키지 않도록 하세요. 목표: 앱이 이전과 똑같이 동작하면서 더 세련된 외관을 위한 순수한 외관 개선.

3. 반응형 디자인 보장하기

• 사용 시점: 앱이 다양한 화면 크기(모바일, 태블릿, 데스크톱)에 맞게 레이아웃을 조정해야 할 때 사용합니다. UI 중심 작업의 최종 단계로 이상적입니다.
• 사용 방법: 모바일 우선 접근 방식을 강조하고 AI에게 표준 중단점에서 반응형을 보장하도록 지시하세요. 특정 CSS 프레임워크 가이드라인(예: Tailwind의 sm, md, lg, xl 중단점)을 언급하고 고정 너비 사용을 피하도록 요청하세요.

우리 앱은 모바일, 태블릿, 데스크톱에서 완벽하게 반응형이어야 합니다. - 모바일 우선 전략을 따르세요: 작은 화면의 레이아웃을 우선시한 다음, 더 큰 화면에 맞게 조정하세요. - 반응형 디자인을 위해 최신 UI/UX 모범 사례를 사용하세요. (Tailwind CSS의 경우, 표준 중단점인 sm, md, lg, xl을 사용하세요 – 필요한 경우가 아니면 사용자 지정 중단점은 사용하지 마세요.) - 모든 페이지(특히 대시보드 및 프로젝트 상세 페이지)가 작은 화면에서 제대로 리플로우되는지 확인하세요: 요소는 필요에 따라 쌓이거나 크기가 조정되어야 하고, 텍스트는 읽기 쉬워야 하며, 콘텐츠가 화면 밖으로 넘치지 않아야 합니다. - 핵심 디자인이나 기능은 변경하지 말고, 다른 화면 크기에 유연하게 적응하는지만 확인하세요. 변경 후에는 iPhone 12 크기와 일반적인 데스크톱 너비에서 레이아웃을 다시 확인해 주세요.

4. 코드 리팩토링하기

• 사용 시점: 주기적으로, 특히 코드가 지저분해지거나 느려질 때 사용합니다. 리팩토링은 외부 동작을 변경하지 않고 코드 구조, 가독성 또는 성능을 개선합니다.
• 사용 방법: 범위(파일, 기능 또는 코드베이스)를 식별합니다. 특정 파일의 경우, “이 파일을 명확성과 효율성을 위해 리팩토링하되, 기능이나 출력을 변경하지 마세요”라고 프롬프트를 입력합니다. 중복 줄이기나 로직 단순화와 같은 중점 영역을 지정하세요. 더 큰 리팩토링의 경우, AI에게 단계별로 계획하거나 코드를 먼저 감사하도록 요청하세요.

ProjectList 컴포넌트 파일을 리팩토링하되, 동작과 UI는 정확히 동일하게 유지하세요. 목표: - 코드 구조와 가독성 개선(복잡한 함수 단순화, 필요시 더 작은 함수로 분리). - 사용하지 않는 변수나 import 제거. - 파일이 모범 사례를 따르고 문서화가 잘 되어 있는지 확인. 새로운 기능을 도입하거나 사용자를 위해 컴포넌트가 작동하는 방식을 변경하지 마세요 – 이것은 순전히 유지보수를 위한 코드 정리입니다. 코드의 어떤 부분이 불분명하면, 명확화를 위해 간단한 주석을 추가하세요.

5. 앱 유형 및 기능

전자상거래 스토어: 상품 목록, 검색, 필터링, 장바구니, 결제, 사용자 계정.

CMS: 관리자 대시보드, 콘텐츠 생성/편집/게시, 리치 텍스트, 이미지 업로드, SEO.

프로젝트 관리: 작업 보드, 목록, 카드, 할당, 마감일, 드래그 앤 드롭.

소셜 미디어 피드: 게시물, 댓글, 좋아요, 공유, 사용자 프로필, 알림, 무한 스크롤.

분석 대시보드: 다양한 차트 유형, 데이터 필터링, 날짜 범위 선택, 내보내기 가능한 보고서.

SaaS 애플리케이션 스타터: 사용자 인증, 구독 관리, 설정, 대시보드, 역할 기반 접근 제어.

AI 채팅 인터페이스: 대화 기록, 입력 표시기, 메시지 스레딩, 피드백.

AI 콘텐츠 생성 도구: 입력을 기반으로 콘텐츠 생성, 개선 옵션, 저장, 내보내기.

추천 컴포넌트: 사용자 행동/선호도 기반, 피드백, 추천 설명.

개인화 시스템: 사용자 정의 가능한 UI, 콘텐츠 추천, 개인화에 대한 사용자 제어.

6. AI를 활용한 전략적 계획

• 사용 시점: 복잡한 다단계 구현을 시작하기 전이나, 분해가 필요한 큰 기능이 있을 때 사용합니다. 계획 프롬프트를 사용하면 코드를 작성하기 전에 접근 방식을 개략적으로 설명하여 크레딧을 절약하고 잘못된 방향으로 가는 것을 방지할 수 있습니다.
• 사용 방법: AI에게 계획이나 체크리스트를 요청하세요. 예를 들어, “X에 대한 단계별 계획을 개략적으로 설명해 줘” 또는 “코딩하기 전에 Y를 구현하기 위해 취할 단계를 나열해 줘”라고 요청할 수 있습니다. 이는 코드 실행을 피하기 위해 토론 모드에서 수행하는 것이 가장 좋습니다.

"코드를 작성하기 전에 새로운 알림 기능의 구현을 계획해 주세요. - 작업이 기한을 넘겼을 때 이메일 알림을 추가하는 데 필요한 각 단계를 나열하세요. - 프론트엔드(UI 변경 사항, 있는 경우)와 백엔드(예약된 확인 또는 트리거 생성) 측면을 모두 고려하세요. - 계획이 현재 기능을 안정적으로 유지하도록 하세요 – 기존의 어떤 것도 손상시켜서는 안 됩니다. - 계획을 순서 있는 목록(1, 2, 3, ...)으로 제공하고 각 단계에 대한 간략한 설명을 덧붙여 주세요. 계획을 설명한 후에는 검토를 위해 잠시 멈추세요. 아직 코드 변경은 하지 마세요.". AI는 다음과 같은 계획으로 응답할 수 있습니다: 1. 작업에 타임스탬프 필드 추가. 2. 기한이 지난 작업을 확인하는 서버 측 함수 생성. 3. 이메일 전송 통합. 4. 알림 토글을 위한 UI 업데이트. 5. 흐름 테스트.