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. 다음 빈칸을 채우시오.

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

① Why(왜), Who(누구)

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

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

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

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

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

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

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

88쪽. 확인 문제

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

업무에서 AI를 제대로 활용하고 싶어서 신청하게 된 한빛미디어의 "[6주 과정] 『혼자 공부하는 바이브 코딩 with 클로드 코드』 완독 챌린지"입니다. 

인프런 지식공유자 한빛미디어의 강의소개 페이지 바로가기(클릭, 새창)

혼자 공부하는 바이브코딩 유튜브 강의(= 인프런 강의)

난이도는 "입문"에서부터 "중급 이상"이라고 하는 것 같은데, 개인적인 경험을 바탕으로 보자면 컴알못(혹은 컴맹)이나 비전공자 분들에게는 어렵다고 느껴질 것 같습니다. 다만, 의지만 있다면 AI에게 의문이 풀릴때까지 질문을 던져서 해답을 찾을 수 있을 만한 레벨의 책이라고 보여집니다. (많이 물어봤습니다. ㅋㅋㅋ)

** 실습과정에서 유료결제 계정들이 있어야 원활하게 학습할 수 있는 점을 참고하시는 게 좋습니다. 

클로드: https://claude.ai

교재 깃허브: https://github.com/taehojo/vibecoding

한빛 자료실: https://www.hanbit.co.kr/support

클로드 코드 공식 문서(한글): https://code.claude.com/docs/ko/overview

Chapter 01. 나의 첫 바이브 코딩

01-1 나의 코딩 파트너, AI 어시스턴트

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

- 바이브 코딩은 AI와 자연스럽게 대화하며 코드를 만드는 새로운 개발 방식입니다. 

- 모델 선택형 도구는 여러 언어 모델을 골라 쓸 수 있다는 장점이 있습니다. 

- 전용 모델형 도구는 특정 언어 모델을 설치해 깊이 활용할 수 있다는 장점이 있습니다. 

01-2 AI로 나만의 첫 웹페이지 만들기

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

- 아티팩트는 클로드가 코드를 생성하고 미리보기를 제공하는 작업 공간입니다. 

- 프롬프트는 AI에게 전달하는 요청이나 지시 사항입니다. 

- 게시 기능은 만든 작품을 온라인에 공유하고 링크를 생성하는 기능입니다. 

- 커스터마이즈는 기존 디자인을 바탕으로 추가 수정하는 과정입니다. 

기본 미션(필수)

PROJECT 1. 나의 첫 웹페이지 만들고 캡처하기

p.33, p54-55 확인 문제 풀고 인증하기

1. 다음은 바이브 코딩 도구의 유형입니다. 빈칸에 알맞은 도구 이름을 넣어 보세요. 

2. 다음 설명을 보고 알맞은 개념(용어)를 쓰세요.

① 사람과 대화하듯 아이디를 설명하면 AI가 코드를 제시하고, 사용자가 검토, 수정하여 완성하는 새로운 개발 방식 → ( 바이브코딩 )

② 프로그래밍 과정에서 질문에 답하고 코드를 함께 작성해 주는 가상 파트너 → ( AI 어시스턴트 )

③ 렌터카처럼 여러 LLM을 고를 수 있는 AI 코딩 도구 → ( 모델 선택형 도구 )

④ 자가용처럼 특정 모델을 설치해 깊이 사용하는 AI 코딩 도구 → ( 전용 모델명 도구 )

1. AI 어시스턴트의 발전 과정을 올바르게 나열한 것을 고르세요.

① 딥러닝 → 뉴럴 넷 → 트랜스포머 → LLM

② 뉴럴 넷 → 딥러닝 → 트랜스포머 → LLM

③ 트랜스포머  → 딥러닝 → 뉴럴 넷 → LLM

④ LLM → 트랜스포머 → 딥러닝 → 뉴럴 넷

2. 클로드 코드와 같은 CLI 모델의 특징으로 옳지 않은 것을 고르세요. 

① 로컬 파일 시스템에 직접 접근이 가능하다.

② 프로젝트 전체를 통합적으로 관리할 수 있다.

③ 터미널 명령어를 사용해 작업한다. 

④ 도구 사용료와 AI 모델 비용을 모두 지불한다.

3. 클로드에서 코드나 문서를 생성할 때 사용하는 특별한 작업 공간으로 옳은 것을 고르세요. 

① 프롬프트(Prompt)

② 아티팩트(Aritfacts)

③ 터미널(Terminal)

④ CLI(Command Line Interface)

4. 웹페이지를 만든 후 다른 사람과 공유하기 위해 [ 게시 ] 버튼을 클릭해야 합니다. 

5. 이미 게시된 웹페이지를 수정하려면 [ Customize ] 버튼을 클릭해야 합니다. 

추가 미션(선택)

클로드 아티팩트에서 [커스터마이즈] 2회 이상하고 캡처하기

이전다음

01

첫번째 강의임에도 실습에 많은 어려움이 있었습니다. 

클로드(Claude) 웹 기반 챗봇의 무료 버전은 "현재 Sonnet 4.5" 버전이고, Opus 4.5 버전은 유료로 전환됐습니다. 며칠 전만 해도 기본이 Opus 4.5로 표시되고 있었던 것으로 기억되는데, 화면캡쳐를 하려고 보니 버전이 바뀌어 있었습니다. 회원가입 후, 일정기간만 최신 Opus 버전이 무료인지 아니면 정책이 바뀐 건지는 모르겠습니다. 

클로드 아티팩트 같은 경우에 잘못 만들었거나 헷갈리는 부분이 있어서 삭제하려고 했지만, 삭제하는 기능을 제공하지 않는다는 걸 알았습니다. 어떤 기사처럼 AI 쓰레기들을 양산하는 게 아닌가 싶기도 합니다. 

클로드 웹 기반 챗봇은 사용량이 많아지면 느려지고 끊겨버립니다. 유료 웹 기반 챗봇을 사용할 수 있어서 비교해 보니 같은 버전에서도 처리 속도가 확연히 달랐습니다. 

전문개발자가 아닌 경우에 굳이 한달 이상 혹은 연단위 유료 요금제를 사용하면서까지 책을 읽거나 바이브코딩을 학습해야 할 필요가 있을지 의구심이 드는 편입니다. 유튜브나 동영상 강의를 들으며 무료 웹 기반 챗봇으로 학습해서 바이브코딩에 익숙해지는 데도 몇 주 혹은 몇 달이 걸릴 것 같습니다. 

충분히 익숙해지고 나면 유료 요금제를 사용해도 좋을 것 같습니다. 업무적으로 많은 아이디어들이 떠오를 것 같기도 합니다. 

지금 챌린지는 책 내용을 근거로 AI 챗봇에 질문을 던져서 나오는 내용을 학습하는 것이 더 많이 도움됐고, 감을 잡느라 허덕이고 있습니다. ㅋㅋㅋ

이전다음

01