안녕하세요. 저는 보안을 공부하고 있는 학생입니다. 공부한 내용들을 모아두면 여러모로 의미 있을 것 같아 블로그를 시작합니다.
오늘부터 6주간 한빛 미디어의 "[6주 과정] 『혼자 공부하는 바이브 코딩 with 클로드 코드』 완독 챌린지"를 진행하면서 심화 과제를 포스팅해 보고자 합니다. (인프런에서 진행하는 챌린지입니다.)
일단 제가 공부한 내용을 먼저 적어 보겠습니다.
바이브 코딩이란?
바이브 코딩은 요즘 많이 사용하는 ChatGPT, Gemini, Calude 같은 LLM을 이용하여 프로그래밍 언어가 아닌 인간의 언어로 프로그램을 개발하는 것입니다. 이는 AI 시대에 가장 적합한 개념이 아닐까 싶습니다.
제가 바이브 코딩 챌린지를 시작한 이유는 모의 해킹할 웹을 간편하게 만들기 위함입니다.
2025년에 모의해킹 프로젝트를 위해 여러 가지 웹 개념 강의를 들었습니다. 웹의 기본 구조를 이해하기에 좋았습니다.
다만, 강의를 들었다고 해서 웹이 바로 만들어지진 않았습니다.
그러던 중 바이브 코딩이라는 개념을 발견하게 되었고,
웹을 하나하나 직접 만드는 것도 좋지만 바이브 코딩으로 빠르게 만들어서 패치해 보는 것이 프로젝트를 더 빨리 진행할 수 있을 것 같아 시작했습니다.
1주 차 과제
이번 과제는 "클로드 아티팩트에서 [커스터마이즈] 2회 이상하고 캡처하기"입니다.
일단 프로젝트를 시작하기에 앞서, 이 강의의 핵심인 프롬프트를 어떻게 넣을 것인가에 대해 생각해 봐야 합니다.
프롬프트를 작성하는 데 있어 가장 중요한 3가지는 "명확성", "구체성", "맥락성"이라고 합니다.
이 3가지를 기반으로 PRD를 작성해 봅시다.(1) PRD 작성 웹
PRD(Project Required Document)란 제품 기획서로 효과적인 프롬프트 작성을 위한 문서라고 보시면 됩니다.
앞으로 모든 프로젝트를 시작하기 전, 이 PRD를 작성할 예정이기에 PRD를 작성해주는 웹을 만들면 좋지 않을까? 싶었습니다.
클로드 AI 아티팩트는 위 사진처럼 [프롬프트 -> 미리보기]를 제공합니다.
저는 5W1H framework를 기반으로 PRD를 작성해주는 웹을 만들어 봤습니다.
6가지 질문에 대한 답을 달고 나면 최종적으로 하나의 문서가 되는 형식입니다.
각 항목에 대한 답변이 줄바꿈을 통해 구분되고 최종적으로 하나의 텍스트 파일이 됩니다.
이를 이용한다면 프로젝트를 더 쉽게 시작할 수 있을 듯합니다.(2) 쇼핑 웹
제가 궁극적으로 진행하게 될 모의해킹 대상입니다.
지금은 틀만 볼 수 있도록 장바구니, 찜 목록, 검색, 2행 3열의 카드들로 구성해 봤습니다.
그런데 문제가 생겼습니다. 이미지가 로드되지 않습니다.
개발자 도구의 Network 탭을 확인해 보니, blocked:csp, CSP 정책에 의해 이미지가 로드되지 않고 있었습니다.
다른 기능들은 정상 작동하는 걸 확인했기에 다음 주 과제에서 본격적으로 해당 웹을 수정해보도록 하겠습니다.
맺는 말
지금까지 학교에 다니면서 다양한 사람들이 AI를 부정적인 도구로 인식하는 모습을 봤습니다.
물론 사견이 담기지 않은 알맹이 없는 결과물에 대해선 저도 옳지 않다고 생각합니다.
하지만 AI의 능력은 정말 빠르게 발전하고 있습니다. 다양한 업계에서도 AI 에이전트를 교육 등에 활용한다고 합니다.
즉, AI를 배척하고 인간의 고유 능력을 발달시키는 것보다는 잘 수용하고 활용하는 게 미래를 맞이하기 좋지 않을까? 하는 생각이 들고 있는 요즘입니다.
