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

여는 말

• 안녕하세요. 한 주 동안 클로드 AI를 더 다양하게 다뤄 보고,
• 다른 분들의 포스팅 방식을 보면서 '글을 이렇게 쓰면 좋겠구나~'하는 걸 많이 배웠습니다.
• 한 주가 지났으니 다시 한번 배운 내용을 간단히 보겠습니다.

복습하기

• ✅ 바이브 코딩? AI와 대화하며 프로그램 개발.
• ✅ 아티팩트? 클로드가 결과물을 생성하고 미리 보기를 제공하는 작업 공간.
• ✅ 프롬프트? AI에게 전달하는 요청. 명확성, 구체성, 맥락 제공.
• ✅ 5W1H? Why, Who, What, When, Where, How 체계적 사고의 틀.
• ✅ PRD? 제품 기획서, 바이브 코딩의 효과적인 프롬프트.
• ✅ 4단계 전략 : 뼈대 → 기능 → 디자인 → 점검.
• 강의를 보며 제가 정리한 핵심 키워드들인데요.
• 바이브 코딩에서의 핵심은 결국 '프롬프트를 얼마나 잘 쓰는가'이고, 위 개념은 견고한 프롬프트 작성을 위한 도구입니다.
• 그럼 이를 토대로 이번 주 심화 과제를 해결해 보겠습니다. (문제 풀이까지 아래 같이 써볼게요. 😎)

심화 과제 1 : 디자인 변경하기

• 지난주에 쇼핑 웹 사이트를 만들다가 이미지를 불러오지 못하는 이슈가 있었습니다.
• block:CSP. 즉, CSP에 의해 막힌 건데요. 이게 무엇인지 간단히 알아보겠습니다.

CSP (Content Security Policy)

CSP 등장 배경

• 인터넷상에선 다른 사람에게 위해를 가하는 해킹 기법이 여럿 있습니다.
• 그중 악성 스크립트를 강제로 주입하는 XSS(Cross-Site-Scripting) 계열의 공격이 있는데요.
• 쉽게 말해서 다른 사람의 브라우저에서 내 JS 코드를 강제로 실행시키는 공격입니다.
• 이를 잘 이용하면 타인의 계정이나 관리자 권한을 탈취할 수 있습니다.
• 따라서 이를 방지하기 위한 장치가 등장하게 되었고, 그게 바로 CSP입니다.

CSP가 이미지 로드랑 무슨 상관일까?

• '해킹을 막기 위한 장치인 건 알겠는데.. 이미지 로드랑 무슨 상관이지?'
• 웹 사이트에 표시되는 정보는 기본적으로 HTML 구조를 지니고 있습니다.
• 여기서 이미지를 삽입하기 위해선 <img> 태그를 사용하는데요.
• 문제는 이 <img> 태그를 이용한 XSS 공격이 가능하다는 점입니다.
• 예를 들어 아래와 같은 스크립트가 있다고 해 봅시다.

<img src="invalid_image.png" onerror="악성 스크립트">

• onerror는 앞선 이미지가 제대로 로드되지 않았을 때 스크립트를 실행합니다.
• 즉, 일부러 유효하지 않은 이미지를 넣어 오류를 일으키고, 자신이 구성한 악성 스크립트로 이어지게 하는 거죠.
• 따라서 CSP는 위와 같은 위험을 방지하고자, 허용되지 않은 출처의 이미지 링크를 막아버린 것입니다.

쇼핑 웹 완성하기

• 일단 이번 프로젝트를 진행하기 전에..

• 원활한 진행을 위해 PRO 요금제를 구입했습니다. (무료 버전은 토큰이 너무 빨리 닳더라고요. 😅)
• 아무튼 제가 진행한 프로젝트의 PRD를 다시 한번 정리해 보면 아래와 같습니다.

Why? (목적)	트랜디한 쇼핑 경험을 제공하는 웹 서비스의 핵심 사용자 플로우와 UI/UX를 빠르게 검증하기 위한 프로토타입 개발
Who? (대상)	온라인 쇼핑을 즐기는 사용자 및 개발자
What? (기능)	검색바, 2행 3열 레이아웃 (6개 제품), 제품 카드 팝업, 찜목록 및 장바구니
When? (사용 시점)	즉시 사용
Where? (환경)	Chrome
How? (기술)	React(JSX)

• 해당 PRD대로 진행하면... 어김없이 blocked:CSP를 만나게 됩니다.
• 이제 본격적으로 이미지를 삽입할 CSP 우회 방법을 살펴봅시다.

이미지 삽입하기 1 - CSP 정책 우회하기

• 가장 기본적이면서 확실한 방법은 코드를 추가해 CSP 정책 자체를 변조하거나 특정 도메인에 대한 허가를 넣으면 되는데요.
• 아쉽게도 클로드 아티팩트에서 CSP 설정 변경을 막아두었기에 이 방법은 불가능!

 이미지 삽입하기 2 - 로컬 파일 업로드

• 정책을 우회하는 것만큼 확실한 방법 중 하나는 로컬 데이터를 활용하는 것이죠.
• 그래서 이미지를 업로드해 사용하려고 했는데!!!
• 클로드 아티팩트에서 이미지를 저장하고 사용할 수 없었습니다.
• 정확히는 웹에서 사용하는 클로드 아티팩트에서 이미지를 끌어다 쓸 수 없는 것 같습니다.
• 아마 클로드를 다운로드해서 쓴다면 로컬 파일에 접근해 활용할 수 있을 것으로 예상되는데요. 
• 추후 강의를 통해 확인해 봐야겠습니다.

이미지 삽입하기 3 - 이미지 우회하기

• Base64 인코딩을 비롯하여 다양한 시도를 해 보았는데요.

• 결론적으로 이미지 로드에 실패했습니다.
• 하지만 저의 첫 쇼핑 웹 사이트를 이렇게 방치할 수 없죠.

쇼핑 웹 완성하기

• 저는 클로드의 추천을 기반으로 이미지를 고집하지 않고, 아이콘 기반의 웹을 만들기로 했습니다.

• 이런 식으로 제품에 맞는 아이콘을 넣으니 제가 처음에 추구했던 트렌디함에 좀 더 가까운 것 같다는 생각이 들었어요. 
• 하지만 개인적으로 그라데이션 배경을 별로 좋아하지 않아 디자인을 수정해 보겠습니다.

---

• 내가 원하는 느낌을 말로만 전하면 AI는 이를 이해하지 못할 가능성이 큽니다.
• 따라서 강의에서 언급된 레퍼런스, 참고 자료를 동봉하는 것이 여러모로 좋을 것 같습니다.
• 웹 서핑을 통해 가장 원하는 느낌의 디자인을 찾았고, 해당 링크를 전달해 보았습니다.

• 제 눈엔 훨씬 감각적인 디자인이 되었네요.
• 그런데 제품을 선택했을 때 팝업되는 카드가 화면에 충분히 담기지 않았어요.

• 이 부분은 크게 건들지 않고, 세로형에서 가로형으로 바꾸면 될 것 같아 화면을 좌, 우로 나누어 요청했습니다.
  • 좌측 : 제품 설명 (제품 이름, 아이콘, 가격 및 설명 등)
  • 우측 : 기능 모음 (사이즈 선택, 장바구니, 찜하기)

• 최종적으로 아주 만족스러운 사이트를 하나 완성했습니다. (물론 실제 사이트는 아니지만..)
• 강의를 완주하면 로그인 기능과 품목을 추가해 또 다른 프로젝트를 진행해 볼 예정입니다.
• 혹시나 자세히 보고 싶으신 분은 직접 구경해 보세요 → 링크
• (이렇게 사용자 행동을 유도하는 해킹 기법도 있으니 조심하세요 ㅎㅎ)

심화 과제 2 : 웹 페이지 구조 한 문단으로 설명하기

ChatGPT의 시각화

• 웹 페이지란 클라이언트(사용자)의 요청에 대해 서버가 반환한 응답을 브라우저에서 렌더링한 결과입니다.
• 우리가 유튜브나 쇼핑 웹, SNS를 사용하면서 하나의 페이지를 보고 있는 것처럼 느끼는 이유는 JS와 비동기 통신이 동작하기 때문입니다. 전통적으로는 요청할 때마다 새 HTML 문서를 받아 화면에 받아집니다. 
• 이런 웹 페이지의 구조는 어떻게 이루어질까요?
• 바이브 코딩에서 웹을 구성할 때 항상 보이는 문서가 있습니다. 바로 HTML(Hyper Text Markup Language).
• 웹 페이지는 이 HTML 문서를 뼈대로 작성됩니다.
• 이후 디자인 요구가 커지면서 CSS(Cascading Style Sheets)로 문서를 꾸밀 수 있게 되었습니다.
• (참고로 위에서 언급한 XSS가 Cross-Site-Scripting임에도 C가 아니라 X인 이유는 이 CSS와의 혼동을 피하기 위함입니다.)  
• 마지막으로 JavaScript가 등장하며 페이지가 동적인 느낌을 받을 수 있도록 발전했습니다.
• 정리하면, HTML(뼈대/구조) -> CSS(꾸미기) -> JS(동작)으로 웹 페이지의 구조를 이해할 수 있습니다.

✅ 문제 풀이 (과제)

• 지난주엔 노션에 따로 문제를 적어올렸는데요. 그러지 않아도 된다고 하셔서 블로그에 함께 적어봅니다.

p.66

1. 좋은 프롬프트의 조건이 아닌 것은?

①  명확성

②  구체성

③  창의성

④  맥락 제공

2. 다음 빈칸을 채우세요.

프롬프트와 PRD는 모두 5W1H 원칙을 기반으로 한다.

이 원칙은 Why, Who, What, When, Where, How 여섯 가지 질문으로 구성된다.

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

①  Why, Who

②  What, How

③  When, Where

④  Who, Where

4. 아래 두 프롬프트 중 더 좋은 것과 이유는?

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

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

AI는 추상적인 말을 잘 이해하지 못하기에 명확하고 구체적으로 접근해야 하는데, 무엇을 만들어야 하는지, 어떤 요소를 넣을지 상대적으로 잘 적었기 때문.

p.80-81

1. 포트폴리오 웹 사이트를 만들기 위한 4단계 전략은?

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

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

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

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

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

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

② 모든 기능을 한 번에 요청 (시간 절약)

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

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

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

① 원하는 부분만 정확히 수정 가능

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

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

④ 자동으로 디자인이 개선됨