마지막챕터 : 컴퓨터
[ 소통을 원하지는 않습니다 ]
『혼자 공부하는 바이브 코딩 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 마크업 언어를 기반으로 계층적으로 이루어진 웹 사이트 구성 요소.

 

 

 

 

  Comments,     Trackbacks
『혼자 공부하는 바이브 코딩 with 클로드 코드』 1주 차

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

 

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

 

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

 

인프런(inflearn) 발췌

 

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

 

 

 

 

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

 

인프런 사이트의 한빛미디어 "새소식" 중에서

 

 

클로드: https://claude.ai

 

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

 

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

 

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

 

 

 

인프런(inflearn) 동영상 강의 발췌

 

 

 

 

Chapter 01. 나의 첫 바이브 코딩

 

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

인프런(inflearn) 동영상 강의 발췌

 

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

 

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

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

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

 

 

 

 

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

 

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

 

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

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

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

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

 

기본 미션(필수)

 

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

https://claude.ai/public/artifacts/b7294dea-fe44-4266-9911-cc61749de1fa

 

 

 

 

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

 

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

구분 설명 대표 도구
웹 기반 챗봇 설치 없이 웹에서 바로 사용할 수 있는 방식, 복사 - 붙여넣기 필요 클로드, 챗GPT, 제미나이
모델 선택형 여러 언어 모델 중에서 선택해 쓸 수 있는 방식, 이중 비용 부담 가능성 있음 커서(Cursor), 리플릿(replit), 윈드서프(Windsurf)
전용 모델형 특정 언어 모델을 설치해 사용하는 방식, 로컬 파일 직접 접근 가능 클로드 코드(Claude code), 제미나이 CLI(Gemini CLI)

 

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
무료 메시지가 몇 개 남았나 표시해주면 좋을 것 같습니다만, 무리한 요구인 건 맞다고 봅니다. ^^;;

 

  Comments,     Trackbacks
[혼공컴운] 혼공학습단 13기 활동 회고((1.01^365=?)


활동 기간: 2025.01.06 ~ 02.23(6주)
책이름: 혼자 공부하는 컴퓨터 구조 + 운영체제 
저자: 강민철
출판사: 한빛미디어
판본 표시: 초판 발행. 2022년 08월 16일

출처: 혼공게시판




입문자용 책을 위한 소소한 고찰..

 


한빛미디어에서 운영하는 "혼공학습단" 13기에 참여했습니다. 

개발자는 아니고, 컴퓨터, 네트워크, 소프트웨어를 하찮은 수준에서 관리하고 있습니다. 워라벨이라는 시소(seesaw)가 한 쪽으로 기울어진 게 아니라 완전히 주저앉은 직장입니다. 단점은 굳이 말하지 않아도 짐작할 수 있겠지만, 유일한 장점은 업무난이도가 낮고 상대적으로 여유시간이 있는 편이라는 점입니다. 

AI 등장으로 다양한 분야에서 혼자 학습할 수 있는 환경이 훨씬 풍부해졌다고 생각되지만, 초보적인 영역에서는 멘토 혹은 가이드가 꼭 필요하다고 보는 편입니다. 

평소 기본을 다지기 위해 몇 권의 컴퓨터 기초 관련 서적과 유튜브 강좌들을 보며 초심자들을 위해 씌여지는 책들이 가졌으면 하는 미덕들이 떠올랐습니다. 


1. 초보자용 서적은 "쉽게" 씌여지는 게 당연하지만, "쉽게"라는 부사는 넣지 않는 않는 것이 좋을 것 같습니다. 


배경지식이 거의 없다시피한 초심자나 비전공자에게는 전공 관련 서적이 대부분 가파른 언덕입니다. "쉽게"라는 부사가 적당한 주기로 등장하는 경우가 많은데, 읽는 사람이 쉽다고 느끼는 경우는 생각보다 많지 않습니다. 오히려 "쉽게" 쓴 걸 본인의 능력이 부족해서 이해 못하는 게 아닌가하는 자괴감에 빠지는 경우가 생각보다 꽤 있다고 보시는 게 좋을 것 같습니다. 자매품 "간단하게도" 있습니다. 
"쉽고 간단하게" 썼다는 데 그 부사의 뒷부분이 하나도 이해가지 않으면 책을 덮는 사람들이 있습니다. 
"쉽게", "간단하게"는 정말 주의해서 적확하고(=정확하게 맞아 조금도 틀리지 아니하다), 정확하게(=바르고 확실하다) 사용하면 좋겠습니다. 습관적으로 부사를 넣어서 책의 페이지수를 늘리지 말아주세요. 나무가 웁니다. 


2. 입문자 혹은 비전공자용 서적들은 용어에 해당 업계에서 사용하는 원어(주로 영어)를 같이 써주면 좋겠습니다.  


이어서 뭔가 설명이 잘 납득하지 못해서 학습자가 다시 검색, 질문해서 헤쳐나갈 때가 많은데, 책을 쓴 사람이 이해를 돕기 위해, 혹은 지은이가 더 적확한 뜻을 담고 있다고 생각하는 단어로 설명한 경우에 검색결과가 별로 좋지 않을 때가 있습니다. 이때 원어가 같이 써 있으면 도움이 된다고 생각됩니다. 

 


3. 문장을 길게 쓴다고 해서, 부사를 더 많이 넣는다고 해서, 더 쉽고 자세하게 설명할 수는 없습니다. 


이건 누구나 하는 실수 아닌 실수라고 생각됩니다. 수학자 블레즈 파스칼조차 "시간이 없어서 길게 썼네"라고 할 정도로 글을 간결하게 쓰는 건 아주 어려운 일입니다. 대개 내용이 좋지 않은 책들은 부실한 설명을 보충하려고 문장이 장황하게 길어지고, 내용이 좋은 책들은 중요하고 관련있는 내용들이 간결하고 빽빽하게 들어차는 바람에 읽는 이를 주눅들게 합니다. 
이런 부분을 모두 개선해야 좋은 초보자용 책이라고 생각되지만, 이게 쉬운 일은 아니죠. 그런 책이 발견되면 집에 신주단지 모시듯 보관할 겁니다.  

 


3. 가독성도 중요하지만, 흐름을 유지하도록 구성하는 것도 중요합니다.

 
비단 초보자용 책들 뿐 아니라 대부분의 서적에 해당되는 부분이지만, 눈이 시원시원하게 페이지가 만들어졌으면 좋겠고, 불필요하게 책의 앞뒤로 이동하지 않도록 구성하는 게 좋을 것 같습니다. 간단한 퀴즈나 복습용 퀴즈의 답을 굳이 페이지 뒤에 배치하지 말아주세요. 왔다갔다 하느라 정신만 사납습니다. 
어차피 초보자들의 약간 불성실하게(?) 책을 읽을 것 같으면 같은 내용을 약간 다른 관점이나 관련성을 중심으로 반복 설명으로 넣어주세요. 불성실하게 읽는 사람들은 책을 어디까지 읽었는지도 헷갈리고, 이 내용이 어디서 나왔는지 이전 부분도 기억 못하는 경우가 왕왕 있습니다. (경험담입니다. ^^;;) 어디서 읽어도 굳이 앞부분이나 뒷부분을 찾는 일이 별로 없도록 서술해주세요. 어쩔 수 없는 경우에는 "목차"라는 걸 활용할 수도 있습니다. 


4. 목차는 생각보다 중요합니다. 


오랜만에 책을 이어서 읽을 때도 목차가 중요하지만, 책을 다 읽은 후에도 목차를 보며 머릿속으로 복습할 때도 좋습니다. 각 챕터 요약의 문맥을 읽고 목차를 봤는데, 뭔가 이질감이 느껴질 때면 가끔.. 약간.. 불안합니다. ^^;;
 

5. 가급적 실습해 볼 수 있는 가이드나 이미지 자료, 풍부한 참고자료가 있으면 좋겠습니다. 


이번에는 지은이의 gitbub, 유튜브 영상 등 참고자료가 풍부한 편이었지만, 그래도 읽는 사람이 되도록 직접 입력해보고 해당 설명이 어느 부분에 있는지 확인하는 구성도 추가되었으면 좋겠습니다. 
윈도우, 리눅스 운영체제에서 명령어를 입력한 뒤 결과에 대한 설명이 꽤 있다고 생각됩니다. 


6. 입문서, 풍부한 추가자료 외에 다양한 SNS를 활용한 소통과 주기적인 현황 점검 페이지도 좋았습니다. 


10여권이 마다 수십개의 게시글들이 달리는데, 일일이 답글을 달리는 걸 보면서 궁금한 점은 AI를 활용했는가였습니다. AI를 활용했다고 보기에는 답글의 내용이 다채로워 보였고, AI를 안 썼다고 하기에는 양이 너무 무리라고 생각될 정도로 많다고 느꼈기 때문입니다. ^^;;


7. 혼공학습단의 책들도 서로 연관성이 있을 것 같습니다. 

 

13기에서 어떤 책을 읽었다면, 14기에서는 어떤 책을 읽으면 좋을지, 혹은 14기 참여할 때, 13기의 어떤 책이 좋았는지 공유해 보는 SNS 페이지도 있으면 좋겠습니다. 


책 잘 읽었습니다. 올해는 책을 좀 더 읽고 싶고, 느슨했던 지식들을 다시 재정비해서 주변에서 컴퓨터와 씨름하는 비전공자들(사실상 컴맹)에게 체계적인 가이드 역할을 해줄 수 있으면 좋겠다는 바램이 있습니다. 좋은 커리어가 있다면 멘토라고 하고 싶으나.. 차마.. 쿨럭.. 

 

올해 목표는 이런 거라고 말하고 나니 2월이 끝나가네요. ㅋㅋㅋ

요즘은 이런 거 안 주나요?

  Comments,     Trackbacks