『혼자 공부하는 바이브 코딩 with 클로드 코드』 2주 차

Chapter 02. 효과적인 프롬프트로 AI 200% 활용하기

 

02-1 AI를 깨우는 프롬프트의 비밀

 

4가지 키워드로 정리하는 핵심 포인트

 

- 프롬프트는 AI와 소통하는 유일한 창구이자, AI의 성능을 좌우하는 핵심입니다. 

- Why, Who, What, When, Where, How로 구성된 체계적 사고의 틀을 줄여서 5W1H라고 합니다. 

- 개발자들이 사용하는 제품 기획서를 PRD라고 합니다. 

- 템플릿은 효과적인 프롬프트 작성을 위해 재사용 가능한 질문 구조입니다. 

 

 

위의 내용을 클로드 AI 챗봇에게 프롬프트로 개별적으로 자세하게 질문하면 추가적으로 자세한 설명을 들을 수 있는데, 비개발자인 분들에게는 아주 유용하다고 생각됩니다. (저는 아주 많이 좋았습니다.)

 

5W1H의 내용을 읽다보니 어린 시절 "6하원칙"에 대해 들었던 기억이 떠올랐는데, 같은 개념을 영어 표현, 한국어 표현으로 다르게 하는 것뿐이라고 합니다. (연식 나옵니다. ㅋ 요즘은 학교에서 안 배우나 봅니다.)

 

PRD(Product Requirements Document)는 다양한 분야에서 사용되는 실무 문서 양식으로 보입니다. 고객 요구사항이나 소프트웨어 요구 사항이나 문서 형식 이름보다 그 안의 구성이나 핵심 요소들에 따라 사뭇 달라질 수 있다고 생각됩니다. 

 

인터넷에서 "템플릿"과 "스펙"이 혼용되는 느낌이 있어서 찾아보니 둘 다 프로젝트를 체계적으로 정하는 문서이긴 하지만, 템플릿은 내용이 바뀔 수 있는 틀(구조/형식)인 반면, 스펙은 요구사항에 맞춰 구체적으로 작성되는 내용(명세)이라고 합니다. 프로그램 코드 쪽 내용과 섞인 듯한 느낌도 있지만, AI 프롬프트에서 템플릿도 비슷한 역할로 보여집니다. 

 

 

 

02-2 실전! 마케팅 포트폴리오 완성하기

 

6가지 키워드로 정리하는 핵심 포인트

 

- 4단계 포트폴리오 전략은 웹페이지를 뼈대 → 기능  → 디자인 → 점검 순으로 AI에게 요청하는 방법입니다. 

- 웹페이지는 주제별로 구분된 섹션 section 단위로 구성됩니다.

- 뼈대 단계에서는 웹페이지에 기능이나 디자인을 넣기 전, 기본적인 HTML 구조만으로 틀을 잡습니다. 

- 기능 단계에서는 실제 데이터를 채워 넣고 동작을 추가합니다. 

- 디자인 단계에서 색상, 레이아웃, 시각적 요소를 적용하여 완성도를 높입니다. 

- 점검 단계에서는 완성된 웹페이지를 검토하며 누락된 기능이나 오류를 수정합니다. 

 

 

웹페이지를 섹션(Section) 단위로 구성하는 부분, HTML 구조 잡는 부분은 추가적인 설명이 있으면 좋겠습니다. 검색엔진 최적화나 시멘틱 웹에 대한 기초적인 내용이라도 첨부되면 유용할 것 같습니다. 어쨌거나 웹페이지, 웹사이트는 누군가 쉽게 찾아올 수 있어야 할 것 같습니다. 

 

 

 

 

🚶기본 미션(필수)
PROJECT 2. 마케팅 포트폴리오 웹페이지 만들고 캡처하기

 

p.66, p.80-81 확인 문제 풀고 인증하기

 

66쪽. 확인 문제

 

1. 다음 중 좋은 프롬프트의 조건이 아닌 것을 고르세요. 

① 명확성: 원하는 결과를 구체적으로 전달한다.

② 구체성: 필요한 기능이나 조건을 세부적으로 지시한다. 

③ 창의성: 결과물이 놀라움을 주도록 요구한다. 

④ 맥락 제공: 왜 필요한지, 어떤 상황에서 활용되는지 알려 준다. 

 

2. 다음 빈칸을 채우시오.

프롬프트와 PRD는 모두  5W1H  원칙을 기반으로 한다.  이 원칙은 Why, Who, What, When, Where, How 여섯 가지 질문으로구성된다.

 

3. 소프트웨어 개발을 위한 PRD에서 특히 강조되어야 하는 두 가지 질문은 무엇인가요?

① Why(왜), Who(누구)

② What(무엇을), How(어떻게) 

③ When(언제), Where(어디서)

④ Who(누구), Where(어디서)

 

4. 아래 두 프롬프트 중 더 좋은 것은 어느 것인가요? 그 이유는 무엇인가요? ⠀

① "멋진 나만의 홈페이지를 만들어 줘."

② "오늘의 날씨와 주요 뉴스를 보여 주는 나만의 시작 홈페이지를 만들고 싶어."

이유: 필요한 기능(날씨, 뉴스)을 명시해 AI가 해야 할 일을 구체적으로 인식할 수 있기 때문이다.

 

 

88쪽. 확인 문제

 

1. 포트폴리오 웹사이트를 만들 때 사용한 4단계 전략의 올바른 순서는 무엇인가요?

① 디자인 입히기 → 기본 틀 잡기 → 핵심 기능 넣기 → 완성도 점검 

② 기본 틀 잡기 → 디자인 입히기 → 핵심 기능 넣기 → 완성도 점검   

③ 기본 틀 잡기 → 핵심 기능 넣기 → 디자인 입히기 → 완성도 점검 

④ 핵심 기능 넣기 → 기본 틀 잡기 → 완성도 점검 → 디자인 입히기 

 

2. 다음 중 효과적인 프롬프트 작성 방법으로 옳지 않은 것은 무엇인가요?

① 5W1H 템플릿을 활용하여 체계적으로 질문한다. 

② 모든 기능을 한 번에 요청하여 시간을 절약한다. 

③ 각 섹션에 ID를 부여하여 개별 수정이 가능하도록 한다. 

④ 워드프레스 테마 같은 구체적인 레퍼런스를 제공한다.

 

3. 섹션에 고유한 이름을 붙이면 생기는 장점이 아닌 것은 무엇인가요?

① 원하는 부분만 정확히 수정할 수 있다. 

② 전체 코드를 다시 생성하지 않아도 된다. 

③ AI가 수정할 위치를 명확히 이해할 수 있다. 

④ 자동으로 디자인이 개선된다. 

 

 

 

🏃추가 미션(선택)
AI에게 디자인 수정 요청 1회 이상하고 캡처하기

특정 영역의 배경색상만 수정 요청해 봤음.

 

내가 이해한 웹페이지의 구조를 한 문단으로 정리하기

웹 브라우저가 기본적으로 지원하는 HTML 마크업 언어를 기반으로 계층적으로 이루어진 웹 사이트 구성 요소.