(번역) 웹 개발자를 위한 50가지 이상의 ChatGPT 프롬프트

원문 : https://www.builder.io/blog/ai-prompts-for-web-developers-chatgpt

지루하고 반복적인 코딩 작업에 지쳐서 효율성을 최적화하고 싶으시다면 제대로 찾아오셨습니다. ChatGPT의 강력한 기능을 통해 워크플로우를 간소화하고, 오류를 줄이며 코드 개선에 대한 인사이트를 얻을 수 있습니다.

이 게시글에서는, ChatGPT를 사용하여 웹 개발 워크플로우의 속도를 높이는 데 도움이 되는 50가지 이상의 프롬프트와 전략을 제공합니다. 초보자로서 개념 학습부터 면접 준비까지, 웹 개발자로서 AI를 최대한 활용하는 데 필요한 모든 것을 찾을 수 있습니다.

하지만 먼저 ChatGPT의 한계를 이해하는 것이 중요합니다. 강력한 도구이긴 하지만 ChatGPT는 사용자의 지식과 기술을 대체할 수 없습니다. 또한 ChatGPT는 사실을 검증할 수 없으므로, 모든 검색 결과에 대해 사실 확인을 해야 합니다. 또한, 학습 데이터는 2021년까지만 제공되므로 최신 트렌드나 이벤트를 인식하지 못할 수도 있습니다. 이러한 주의 사항을 염두에 두고 흥미진진한 AI 기반 웹 개발의 세계로 뛰어들어 봅시다!

https://chat.openai.com/에서 모든 프롬프트를 실행할 수 있습니다.

역자주: 아래 프롬프트 및 예시는 실제 ChatGPT에게 물어보듯 명령형으로 번역되었습니다. 또한, [] 안의 단어들은 실제 입력할 때 입력되는 단어들입니다.

코드 생성

ChatGPT는 다양한 웹 개발 작업을 위한 코드를 생성하여 시간을 절약하고 효율성을 높일 수 있도록 도와줍니다. 시맨틱 HTML 및 CSS 코드, 자바스크립트 함수, 데이터베이스 쿼리까지 생성할 수 있습니다.

프롬프트: 시멘틱하고 접근성이 높은 HTML과 (프레임워크) CSS [UI 컴포넌트] 및 [컴포넌트 부분]을 생성해줘. [컴포넌트 부분]은 [레이아웃]이어야 해.

예시: 사용자의 이름, 이메일, 문제 유형 및 메시지로 구성된 시맨틱 HTML 및 Tailwind CSS "지원 문의" 폼을 생성해줘. 폼 요소는 수직으로 쌓아서 카드 안에 배치해야 해.

프롬프트: 자바스크립트 함수를 작성해줘. 그 함수는 [입력]과 [출력]을 반환해.

예시: 자바스크립트 함수를 작성해줘. 이 함수는 이름을 입력으로 받아 아바타 문자를 반환해.

프롬프트: [기능]에 대한 [프레임워크] API를 작성해줘. 그리고 [데이터베이스]를 활용해야해.

예시: 현재 사용자의 프로필 정보를 가져오는 Express.js API를 작성해줘. 이 API는 MongoDB를 사용해야 해.

프롬프트: 데이터베이스에는 [쉼표로 구분된 테이블 이름]이 있어. [요구 사항]을 가져오기 위한 [데이터베이스] 쿼리를 작성해줘.

예시: 데이터베이스에는 학생 및 강의 테이블이 있어. 3개 이상의 강의에 등록한 학생의 목록을 가져오기 위해 PostgreSQL 쿼리를 작성해줘.

코드 완성

ChatGPT는 AI의 강력한 기능을 통해 사용자의 상황과 스타일에 맞는 코드 완성을 제안할 수도 있습니다.

프롬프트: [코드 스니펫]을 완성해줘.

예시: 코드를 완성해줘:

const animals = ["dogs", "cats", "birds", "fish"];
let animal = animals[Math.floor(Math.random() * animals.length)];

switch (animal) {
  case "dogs":
    console.log(
      "Dogs are wonderful companions that bring joy and loyalty into our lives. Their wagging tails and wet noses never fail to make us smile."
    );
    break;
}

일반적으로 프롬프트를 콜론으로 끝내고 코드 블록을 새 줄에 붙여넣는 것이 좋습니다. 세 개의 백틱 [코드] 또는 세 개의 따옴표 """[코드]"""로 코드 블록을 구분하는 것도 좋은 방법입니다.

코드 변환

개발자는 다른 언어나 프레임워크로 작성된 코드로 작업해야 할 수도 있습니다. ChatGPT를 사용하면 언어 또는 프레임워크의 코드를 쉽게 변환할 수 있습니다.

프롬프트: 아래 코드 스니펫을 [언어/프레임워크]에서 [언어/프레임워크]로 변환해줘: [코드 스니펫]

예시: 아래 코드 스니펫을 자바스크립트에서 타입스크립트로 변환해줘.

function nonRepeatingWords(str1, str2) {
  const map = new Map();
  const res = [];
  // Concatenate the strings
  const str = str1 + " " + str2;
  // Count the occurrence of each word
  str.split(" ").forEach((word) => {
    map.has(word) ? map.set(word, map.get(word) + 1) : map.set(word, 1);
  });
  // Select words which occur only once
  for (let [key, val] of map) {
    if (val === 1) {
      res.push(key);
    }
  }
  return res;
}

프롬프트: [CSS 프레임워크]를 사용한 아래 코드를 [CSS 프레임워크]를 사용하는 코드로 변환해줘 :[코드 스니펫]

예시: 부트스트랩을 사용하고 있는 아래 코드를 Taliwind CSS를 사용하는 코드로 변환해줘 : [코드 스니펫]

코드 설명

ChatGPT는 코드에 대한 설명을 제공하거나 특정 질문에 답변하여 코드를 이해하는 데 도움을 줄 수 있습니다. 다른 사람이 작성한 코드를 다루거나 복잡한 코드를 이해하려고 할 때 특히 유용할 수 있습니다.

프롬프트: 다음 [언어]의 코드 스니펫을 설명해줘: [코드 블록]

프롬프트: 이 코드의 기능은 무엇인가요? [스택 오버플로우에서 채택된 정답 코드]

코드 리뷰

코드 리뷰는 소프트웨어 개발의 필수적인 측면이며, 혼자 작업할 때는 모든 잠재적 문제를 파악하기 어려울 수 있습니다. ChatGPT를 사용하면 코드에서 좋지 않은 코드와 보안 취약점을 식별하여 보다 효율적이고 안전한 코드를 만들 수 있습니다.

프롬프트: 다음 [언어]의 코드에서 좋지 않은 코드가 있는지 검토하고 개선 사항을 제안해줘: [코드 블록]

프롬프트: 다음 코드에서 보안 취약점을 찾아줘: [코드 스니펫]

코드 리팩터

주석에 //todo: refactor this code를 작성해두고 실행하지 못한 적이 있나요? ChatGPT는 너무 많은 시간이나 노력을 들이지 않고도 코드를 리팩터링하고 개선할 수 있는 방법을 제안하여 이러한 문제를 줄이는 데 도움을 줄 수 있습니다.

프롬프트: 주어진 [언어]의 코드를 리팩터링하여 오류 처리 및 코드 탄력성(resilience)을 향상시켜줘: [코드 블록]

프롬프트: 주어진 [언어]의 코드를 리팩터링하여 더 모듈화 해줘: [코드 블록]

프롬프트: 주어진 [언어] 코드를 리팩터링하여 성능을 개선해줘: [코드 블록]

프롬프트: 모바일, 태블릿, 데스크톱 화면에서 반응형으로 동작하도록 아래 컴포넌트 코드를 리팩터링 해줘: [코드 블록]

프롬프트: 변수와 함수에 대해 서술적이고 의미 있는 이름을 제안하여 코드에서 각 요소의 목적을 더 쉽게 이해할 수 있도록 해줘: [코드 스니펫]

프롬프트: 복잡한 조건문을 단순화하여 읽고 이해하기 쉽게 만드는 방법을 제안해줘: [코드 스니펫]

버그 감지 및 수정

개발자로서 코드의 모든 버그를 발견하는 것이 항상 쉬운 일은 아니라는 것을 알고 있습니다. 하지만 ChatGPT 프롬프트의 도움으로 문제를 일으킬 수 있는 성가신 버그를 쉽게 식별하고 해결할 수 있습니다.

프롬프트: 다음 코드에서 버그를 찾아줘: [코드 스니펫]

프롬프트: 다음 코드 조각에서 [오류]가 발생했어: [코드 스니펫]. 어떻게 수정하면 될까?

시스템 설계 및 아키텍처

ChatGPT는 특정 기술 스택을 사용하여 시스템을 설계하는 방법에 대한 가치 있는 통찰력과 권장 사항을 제공할 수 있습니다. 또한 다른 기술 스택과의 디자인 및 아키텍처를 대조할 수도 있습니다. 웹 애플리케이션, 모바일 앱 또는 분산 시스템을 구축할 때 ChatGPT는 확장 가능하고 안정적이며 유지 관리가 가능한 사용자의 요구를 충족하는 아키텍처를 설계하는 데 도움을 줄 수 있습니다.

프롬프트: 너는 시스템 설계 및 아키텍처 전문가야. [시스템]을 설계하는 방법을 알려줘 기술 스택은 [쉼표로 구분된 기술 목록]이야.

예시: 너는 시스템 설계 및 아키텍처 전문가야. 호텔 예약 시스템을 설계하는 방법을 알려줘. 기술 스택은 Next.js와 Firebase야.

프롬프트: 기술 스택으로 [쉼표로 구분된 기술 목록]을 사용했을 때의 설계와 아키텍처를 비교해줘.

예시: 기술 스택으로 React 및 Supabase를 사용했을 때의 설계와 아키텍처를 비교해줘.

검색 엔진 최적화(SEO)

ChatGPT는 검색 엔진에 맞게 웹사이트를 최적화하기 위한 팁과 모범 사례를 제공할 수 있습니다.

프롬프트: 랜딩 페이지의 SEO를 개선하는 방법은 뭐야?

프롬프트: [웹사이트]의 검색 엔진 최적화(SEO)에 최적화된 섹션의 HTML 예시 코드를 작성해줘.

예시: 운동선수용 소셜 네트워킹 사이트의 검색 엔진 최적화(SEO)에 최적화된 섹션의 HTML 예시 코드를 작성해줘.

모의 데이터 생성

테스트 목적이든 데모 목적이든, 현실적이고 대표적인 데이터를 확보하는 것은 매우 중요합니다. ChatGPT를 사용하면 다양한 도메인과 형식의 모의 데이터를 빠르게 생성할 수 있습니다.

프롬프트: [도메인]에 대한 [특정 개수][엔티티]를 [데이터 형식]으로 샘플 데이터 만들어줘.

예시: 이커머스 사이트에 대한 5개 제품을 JSON으로 샘플 데이터 만들어줘.

프롬프트: 모든 응답 뒤에 프롬프트를 입력하여 보다 세밀하게 제어할 수도 있습니다.

1. 이커머스 사이트의 [엔티티]에 대한 [특정 개수] 필드 목록을 알려주세요.
2. 각 [엔티티]에 고유한 "ID" 필드를 추가해줘. [기존 필드]를 [새 필드]로 바꿔줘.
3. 해당 [엔티티]의 [특정 개수]의 샘플을 [데이터 형식]으로 현실적인 값으로 생성해줘.

테스트

ChatGPT는 단위 테스트 작성, 테스트 케이스 목록 생성, 적합한 테스트 프레임워크 또는 라이브러리 선택에 도움을 줄 수 있습니다.

프롬프트: 테스트 [프레임워크/라이브러리]를 사용하여 다음 [라이브러리/프레임워크] 컴포넌트 [컴포넌트 코드]에 대한 단위 테스트를 작성해줘.

예시: 웹/모바일 애플리케이션에서 사용자 등록을 수동으로 테스트하기 위한 테스트 사례 목록을 생성해줘.

예시: React Native 앱에 어떤 테스트 프레임워크 또는 라이브러리를 선택해야 해?

문서

개인 프로젝트든 팀 프로젝트든, 좋은 문서화는 시간을 절약하고 나중에 골치 아픈 일을 방지할 수 있습니다.

프롬프트: 아래 코드에 주석을 작성해줘.: [코드 스니펫]

예시: 아래 JavaScript 함수에 대한 JSDoc 주석을 작성해줘: [코드 스니펫]

쉘 명령어

개발자는 코드 작성에만 국한되지 않습니다. ChatGPT는 Git을 사용하여 쉘 명령 및 버전 관리를 지원할 수 있습니다.

프롬프트: [요구 사항]에 대한 쉘 명령어을 작성해줘.

예시: 'logs' 폴더에서 확장자가 '.log'인 모든 파일을 삭제하는 쉘 명령어를 작성해줘.

프롬프트: [요구사항]에 대한 git 명령을 작성해줘.

예시: 이전 커밋을 되돌리기 위한 git 명령을 작성해줘.

프롬프트: 다음 명령어 [명령어]를 설명해줘.

예시: 다음 명령어를 설명해줘 [git switch -c feat/qwik-loaders].

정규 표현식

ChatGPT를 사용하면 복잡한 정규식을 이해하고 텍스트의 특정 패턴과 일치하는 정규식을 생성할 수 있습니다.

프롬프트: 이 정규식을 설명해줘: [정규식]

예시: 이 정규식을 JavaScript로 설명해줘: const regex = /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$/;

프롬프트: 너의 역할은 텍스트의 특정 패턴과 일치하는 정규식을 생성하는 거야. 정규식이 지원되는 텍스트 편집기나 프로그래밍 언어에 쉽게 복사하여 붙여넣을 수 있는 형식으로 정규식을 제공해줘. [텍스트]와 일치하는 정규식을 생성해줘.

콘텐츠

ChatGPT를 사용하면 특정 요구에 맞게 다양한 목적에 맞는 콘텐츠를 생성할 수 있습니다.

프롬프트: 이커머스 사이트에 대한 자주 묻는 질문 목록 생성해줘.

프롬프트: 강의 랜딩 페이지를 위한 콘텐츠를 생성해줘. 강의의 제목은 "[코스 제목]"이야. 최소한 강의 내용, 주요 대상은 누구인지, 어떤 혜택을 받을 수 있는지, 강좌 섹션 및 구조, 교육 방법, 저자 소개, 가격이 포함되어야 해. 가격 영역의 경우 사용자가 선택할 수 있는 세 가지 요금제를 제공해야 해.

이력서 및 자기소개서

매력적이고 세련된 이력서와 자기소개서를 작성하는 것은 어려운 작업일 수 있지만 ChatGPT의 도움을 받으면 그렇지 않습니다. ChatGPT는 글자 수나 단어 수 제한도 철저히 준수합니다.

프롬프트: 내 이력서를 사용하여 LinkedIn 소개 섹션을 작성해줘: [이력서][쉼표로 구분된 키워드]를 키워드를 사용하고 1인칭으로 작성하고 친근한 어조를 사용해줘. 2,600자를 초과하면 안돼.

프롬프트: 자기소개서 작성자 역할을 맡아줘. 내 이력서를 제공하면 이를 보완할 자기소개서를 작성해줘. 나는 [회사 유형] 회사에 지원할 것이므로 자기소개서에 [형용사]의 톤이 더 많았으면 해. 다음은 내 이력서야 [이력서]. 다음은 직무 설명 이야 [직무 설명].

프롬프트: [이력서]. 이 [회사]의 이 [직책] 포지션을 기준으로 이력서를 개선하고 영향력과 측정 기준을 보여주는 요약 점수 성과를 포함해줘 [직무 설명]. 참고: ChatGPT에 LaTex 마크업으로 출력을 생성해 달라고 요청할 수 있습니다.

면접 준비

ChatGPT의 도움으로 다가오는 면접을 잘 준비할 수 있습니다.

프롬프트: [회사 이름]과 [직책]에 대한 면접이 있어. 다음 질문에 대한 답변을 도와줘:
1. 회사, 업계 및 경쟁업체에 대한 정보
2. 회사의 문화
3. 면접이 끝날 때 물어볼 수 있는 질문

프롬프트: 나는 [직책] 직무에 대해 면접을 보고 있어. [직책] 직무에 대해 가장 많이 묻는 면접 질문 10가지를 적어줘.

예시: 시니어 React 개발자 직무에 대한 면접을 보고 있어. 시니어 React 개발자 직무에 대해 가장 많이 묻는 면접 질문 10가지를 적어줘.

프롬프트: 나는 [직책] 역할에 대해 면접을 보고 있어. 아래에 게시된 [직책] 직무와 관련된 면접 질문 10개를 생성해 줘.

프롬프트: 쉬운/중간/어려운 리트코드 질문을 무작위로 던지고 정답과 시간 및 공간의 복잡성을 기준으로 내 솔루션을 평가해 줘.

배움

웹 개발에서 배움은 멈추지 않습니다. 새로운 프로그래밍 언어를 배우든, 모범 사례를 이해하든, 웹사이트 성능을 개선하든, ChatGPT가 도와드립니다.

프롬프트: 나는 [언어/기술]을 배우는 웹 개발자야. 팔로우할 상위 5개의 [소셜 미디어][계정/채널/프로필]을 추천해 줘.

프롬프트: 로그인 양식을 만들 때 모범 사례를 알려줘?

프롬프트: 웹 접근성의 중요성을 설명하고 웹사이트의 접근성을 보장하는 세 가지 방법을 알려줘.

프롬프트: [언어/프레임워크]로 깔끔하고 유지 보수 가능한 코드를 작성하기 위한 모범 사례에는 어떤 것이 있어?

프롬프트: 다음 요구 사항을 충족하는 [기술/프레임워크] 블로그 앱을 만들려면 어떤 단계를 거쳐야 해?
1. 모든 문서의 목록 페이지
2. 글을 읽을 수 있는 상세 페이지
3. 내 정보 페이지
4. 소셜 미디어 프로필 링크
5. 성과

프롬프트: [언어/프레임워크]에서 [유사한 개념 목록]의 차이점은 뭐야?

예시: 자바스크립트에서 var, let, const 키워드의 차이점은 뭐야?

프롬프트: 실제 비유를 들어 [언어/프레임워크][개념]을 설명해줘.

예시: 실제 세계 비유를 통해 자바스크립트 Promise를 설명해줘.

프롬프트: 웹사이트의 성능을 개선하는 다양한 방법에는 어떤 것이 있어?

결론

웹 개발자의 경우, ChatGPT를 사용하면 코딩 작업을 간소화하기 위한 프롬프트와 전략을 제공하여 워크플로우를 최적화하고 효율성을 높일 수 있습니다. ChatGPT는 강력한 도구이지만, 그 한계를 염두에 두고 자신의 지식과 기술을 보완하는 용도로 사용하는 것이 중요합니다. 리서치를 통해 사실을 확인하고 최신 트렌드를 파악하면 웹 개발에서 AI의 이점을 충분히 활용할 수 있습니다. ChatGPT를 귀중한 리소스로 활용하면 웹 개발의 세계를 자신 있게 탐색하고 기술을 향상시킬 수 있습니다.