[바이브코딩 특집] 비전공자를 위한 Claude 바이브 코딩 2회 - 원하는 대로 고치는 요청법: 모호한 요청과 구체적 요청 비교, 부분 고정 수정 프롬프트 공식, 프로필 사진 자리와 연락처 버튼 추가 가이드

[바이브코딩 특집] 비전공자를 위한 Claude 바이브 코딩 2회 - 원하는 대로 고치는 요청법: 모호한 요청과 구체적 요청 비교, 부분 고정 수정 프롬프트 공식, 프로필 사진 자리와 연락처 버튼 추가 가이드

 

지난 1회에서 우리는 단 한 번의 요청으로 내 이름과 직업, 취미가 담긴 자기소개 웹페이지를 만들어 보았습니다. 처음 화면이 짠 하고 나타났을 때는 신기하고 뿌듯하지만, 1분만 자세히 들여다보면 슬슬 고치고 싶은 부분들이 눈에 들어오기 시작합니다.

"이름 위에 동그란 프로필 사진 자리가 있으면 좋겠는데...", "취미 카드 3개가 위아래로 길게 늘어져 있으니 가로로 나란히 놓고 싶네", "맨 아래 이메일 글자 대신 누르면 바로 연결되는 예쁜 연락처 버튼을 달고 싶어!"

바이브 코딩의 진짜 실력은 '첫 번째 화면을 만드는 것'이 아니라, 이미 만들어진 화면에서 내가 원하는 부분만 정확하게 고쳐 나가는 과정에서 판가름 납니다. 오늘 2회: 원하는 대로 고치는 요청법에서는 모호한 요청과 구체적 요청 비교, 마음에 드는 곳은 건드리지 않게 잠그는 부분 고정 수정 프롬프트 공식, 그리고 프로필 사진 자리와 연락처 버튼 추가 가이드까지 약 40분 동안 차근차근 따라 하며 1회 페이지를 전문가 수준으로 업그레이드해 보겠습니다.

1. 원하는 대로 고치는 요청법: 오늘 만들 결과물과 1회 페이지 불러오기

오늘 실습을 마치면 1회 때 만들었던 소박한 자기소개 페이지가 어떻게 변하는지 먼저 확인해 볼까요?

(1) 오늘의 실습 요약표

항목	상세 내용
오늘 만들 결과물	상단 원형 프로필 아바타 자리, 가로 3열로 정돈된 취미 카드(마우스 반응 효과 포함), 하단 클릭형 연락처 버튼이 추가된 완성형 자기소개 웹사이트
소요 시간	약 40분
이번 회차 세팅	추가 설치 및 가입 없음 (1회 때 사용한 Claude(claude.ai) 대화창 그대로 사용)
핵심 실습 3단계	① "더 예쁘게" vs 구체적 요청 차이 이해하기 $\rightarrow$ ② "다른 부분은 그대로 두고 ○○만" 연습하기 $\rightarrow$ ③ 프로필 사진 자리와 연락처 버튼 순서대로 추가하기
오늘 깨우칠 핵심 원리	"Claude는 앞선 대화 맥락을 기억한다. 단, 수정할 때는 한 번에 하나씩, 위치와 방법을 구체적으로 지시해야 망가지지 않는다."

(2) 준비 단계: 1회 때 만든 자기소개 페이지 다시 불러오기

Claude 웹사이트에 접속해 지난번 작업을 이어서 준비합니다. 아래 두 가지 상황 중 본인에게 맞는 방법을 선택하세요.

• 상황 A (지난번 대화가 남아 있는 경우 - 가장 추천):
  1. 클로드 화면 왼쪽 사이드바의 최근 대화 목록(Recent chats)에서 1회 때 자기소개 페이지를 만들었던 대화방을 클릭합니다.
  2. 대화방이 열리면 오른쪽에 지난번에 만든 자기소개 미리보기(아티팩트)가 그대로 떠 있는지 확인합니다. (안 보인다면 대화 내용 중 클로드가 만들어준 박스 모양의 결과물 카드를 클릭하면 오른쪽에 다시 열립니다.)
• 상황 B (지난번 대화를 지웠거나 새 대화에서 시작하고 싶은 경우):
  1. [+ 새 채팅(New Chat)]을 누릅니다.
  2. 채팅 입력창 아래의 [+] 또는 클립 모양(파일 첨부) 버튼을 눌러, 1회 때 내 컴퓨터 다운로드 폴더에 저장해 두었던 .html 파일을 첨부합니다.
  3. 파일과 함께 "지난번에 만든 내 자기소개 HTML 파일이야. 이 파일을 먼저 오른쪽 미리보기 창에 그대로 띄워줘."라고 입력해 화면을 복구합니다.

2. 모호한 요청과 구체적 요청 비교: 왜 "더 예쁘게 고쳐줘"라고 말하면 망가질까?

비전공자분들이 바이브 코딩을 하다가 가장 먼저 좌절하는 순간이 언제일까요? 바로 첫 화면이 80% 정도 마음에 들어서 "여기서 좀 더 세련되고 예쁘게 다듬어줘"라고 입력했을 때입니다.

이렇게 말하면 클로드는 갑자기 내가 좋아했던 따뜻한 크림색 배경을 시꺼먼 남색으로 바꿔버리거나, 잘 있던 취미 소개 문구를 마음대로 줄여버리곤 합니다. 왜 그럴까요?

(1) 클로드가 "더 예쁘게"를 오해하는 이유

사람에게 "더 예쁘게"는 *"지금 틀은 유지하면서 글씨 간격이나 그림자 같은 디테일만 살짝 다듬어 달라"*는 뜻이지만, AI에게 "더 예쁘게"는 "지금 디자인이 마음에 안 든다는 뜻이구나! 처음부터 완전히 새로운 스타일로 다시 그려주자!"라는 명령으로 해석되기 쉽습니다.

(2) 실패하는 요청 vs 성공하는 요청 비교표

클로드에게 수정을 시킬 때는 추상적인 감상 대신 ① 어디를(위치), ② 무엇을(대상), ③ 어떻게(변화 내용) 바꿀지 3가지를 콕 집어 말해야 합니다.

구분	모호한 요청 (전체가 뒤집어질 위험 높음)	구체적 요청 (원하는 곳만 정확히 수정됨)
색상 변경	"분위기를 좀 더 차분하게 바꿔줘."	"전체 배경색은 그대로 두고, 이름 제목 글씨 색깔만 짙은 갈색으로 바꿔줘."
크기·간격	"글씨가 눈에 잘 안 들어와. 읽기 편하게 해줘."	"한 줄 소개 문구의 글씨 크기를 지금보다 조금 더 키우고, 위아래 여백을 넓혀줘."
배치 변경	"취미 부분이 너무 심심해 보여. 세련되게 고쳐줘."	"내가 좋아하는 취미 3가지 카드를 위아래로 쌓지 말고, 가로로 3개가 나란히 놓이게 배치해 줘."
효과 추가	"화면에 생동감을 좀 넣어줘."	"취미 카드 위에 마우스를 올렸을 때 카드가 위로 살짝 떠오르면서 그림자가 진해지는 효과를 넣어줘."

이 표의 차이점만 기억하셔도 앞으로 24회까지 진행하면서 AI와 씨름하는 시간을 80% 이상 줄이실 수 있습니다.

3. 부분 고정 수정 프롬프트 공식: "다른 부분은 그대로 두고 ○○만" 연습하기

이제 실제로 우리의 자기소개 페이지를 고쳐보겠습니다. 여기서 오늘의 가장 강력한 마법의 문장이 등장합니다. 바로 "다른 부분은 그대로 두고, ○○만 ~해줘"라는 부분 고정(Locking) 공식입니다.

클로드에게 수정을 요청할 때 맨 앞에 "기존 내용과 디자인은 그대로 유지하고"라는 안전장치를 한 줄만 붙여주면, 클로드는 나머지 코드를 절대 건드리지 않고 내가 지목한 부분만 외과 수술하듯 정확하게 고쳐냅니다.

Step 1. 취미 카드 배치와 마우스 반응 효과만 수정해 보기

1회 때 만든 대화창 아래 입력칸에 다음 프롬프트를 복사해서 붙여 넣고 엔터를 눌러보세요. (새 대화를 열지 말고, 반드시 1회 페이지가 떠 있는 그 대화창에서 이어서 입력해야 합니다!)

[복사해서 붙여 넣을 프롬프트 1 - 카드 배치 및 마우스 효과 수정]

지금 만들어진 디자인과 글자 내용은 전부 마음에 들어. 다른 부분은 그대로 두고, 다음 두 가지만 수정해 줘.

1. '내가 좋아하는 취미 3가지' 카드를 PC 화면에서 봤을 때 가로로 3칸이 나란히 배치되도록 바꿔줘. (단, 화면이 좁아지면 자동으로 한 줄씩 내려오게 해줘.)
2. 내가 하는 일과 취미 카드 위에 마우스 커서를 올렸을 때, 카드가 위로 살짝 떠오르면서 테두리 색이 선명해지는 부드러운 움직임 효과를 넣어줘.

Step 2. 수정 결과 확인 및 '버전 되돌리기' 기능 익히기

엔터를 누르면 클로드가 *"기존 레이아웃과 텍스트는 그대로 유지하면서, 취미 카드를 3열 그리드로 변경하고 호버(Hover) 효과를 추가했습니다"*라며 오른쪽 미리보기 화면을 새로 고쳐줍니다.

1. 마우스 올려보기: 오른쪽 미리보기 창에 있는 취미 카드 3개가 가로로 나란히 정렬되었는지 보고, 마우스를 카드 위에 스윽 올려보세요. 카드가 통통 튀듯 부드럽게 떠오르는 것을 확인할 수 있습니다!
2. [핵심 꿀팁] 수정 결과가 마음에 안 들 때 이전 버전으로 돌아가는 법:
   • 오른쪽 아티팩트 미리보기 창 상단(또는 하단)을 자세히 보면, 첫 번째 만들었을 때는 없던 버전 표시(예: v1 / v2 또는 좌우 화살표 < >)가 생긴 것을 볼 수 있습니다.
   • 왼쪽 화살표나 v1을 클릭하면 수정하기 전의 원래 화면으로 즉시 돌아가고, 다시 v2를 누르면 방금 수정한 화면으로 돌아옵니다.
   • 즉, 고치다가 망가질까 봐 겁낼 필요가 전혀 없습니다! 언제든 이전 버전으로 되돌릴 수 있으니 마음껏 실험해 보세요.

4. 프로필 사진 자리와 연락처 버튼 추가 가이드: 한 번에 하나씩 단계별로 업그레이드하기

수정하는 법에 감이 잡히셨나요? 욕심이 나더라도 여러 가지 큰 기능을 한꺼번에 뭉뚱그려 시키지 말고, 한 번에 한 단계씩 확인하며 추가하는 것이 바이브 코딩의 핵심 요령입니다.

이번에는 ① 상단 프로필 사진(아바타) 자리를 먼저 만들고, 그게 잘 된 것을 눈으로 확인한 뒤 ② 하단 연락처 버튼을 추가해 보겠습니다.

Step 1. 상단에 동그란 프로필 사진 자리(아바타) 추가하기

아직 우리는 내 컴퓨터에 있는 사진 파일을 인터넷 서버에 올리는 법(중급편 12~13회 과정)을 배우지 않았습니다. 따라서 지금 당장 내 컴퓨터 사진 파일 경로를 넣으면 다른 기기에서 사진이 깨져 보일 수 있습니다.

대신 클로드에게 감각적인 일러스트 아이콘이나 이니셜이 들어간 원형 프로필 자리를 만들거나, 내가 마우스로 클릭해서 내 컴퓨터 사진을 즉시 끼워 넣어 미리 볼 수 있는 프로필 사진 틀을 만들어 달라고 요청해 보겠습니다.

아래 프롬프트를 같은 대화창에 이어서 입력해 보세요.

[복사해서 붙여 넣을 프롬프트 2 - 프로필 사진 자리 추가]

방금 바꾼 카드 배치와 효과는 그대로 유지해 줘. 이번에는 맨 위 내 이름('김바이브') 바로 위쪽에 동그란 프로필 사진 자리를 추가하고 싶어.

1. 코랄 오렌지색 테두리가 있는 큼직하고 세련된 원형 프로필 영역을 가운데에 만들어줘.
2. 기본 화면에는 따뜻한 느낌의 캐릭터 일러스트(SVG 아이콘)나 이모지가 보이게 해줘.
3. 그리고 그 동그란 프로필 원을 마우스로 클릭하면, 내 컴퓨터에 있는 사진 파일(jpg, png)을 선택해서 그 동그라미 안에 바로 내 사진이 꽉 차게 들어가는 기능을 넣어줘.

화면에서 직접 테스트해 보기!

오른쪽 미리보기 화면 맨 위에 동그란 프로필 틀이 생겼나요? 마우스로 그 동그라미를 직접 클릭해 보세요! 파일 선택 창이 열리면 내 컴퓨터에 있는 아무 사진이나 골라보세요. 동그란 액자 안에 내 사진이 쏙 들어가는 신기한 경험을 하실 수 있습니다.

Step 2. 하단에 클릭 가능한 연락처·SNS 버튼 3개 추가하기

프로필 사진 자리까지 완벽하게 들어갔다면, 이제 마지막 단계로 맨 아래에 있던 밋밋한 이메일 글자를 누르면 실제로 작동하는 세련된 버튼 3개로 바꿔보겠습니다.

주의 (1회 복습): 만약 이 페이지를 나중에 공개 링크(Publish)로 만들어 다른 사람에게 보여줄 계획이라면, 스팸 방지를 위해 실제 전화번호나 개인 이메일 대신 반드시 연습용 주소(vibe@example.com, https://example.com)를 넣어 테스트하세요!

아래 프롬프트를 대화창에 이어서 입력합니다.

[복사해서 붙여 넣을 프롬프트 3 - 연락처 버튼 추가]

위에 만든 프로필 사진 자리와 카드들은 전부 그대로 유지해 줘. 맨 아래 하단 인사말 부분에 있는 이메일 텍스트 대신, 가로로 나란히 놓인 깔끔한 버튼 3개를 만들어줘.

1. 첫 번째 버튼: [✉️ 이메일 보내기] - 클릭하면 이메일 앱이 연결되도록(mailto:vibe@example.com) 해줘.
2. 두 번째 버튼: [📝 블로그 놀러가기] - 클릭하면 새 창으로 연습용 주소(https://example.com)가 열리게 해줘.
3. 세 번째 버튼: [💬 인스타그램] - 클릭하면 새 창으로 연습용 주소(https://instagram.com)가 열리게 해줘.
4. 버튼 디자인은 첫 번째 버튼은 코랄 오렌지색 배경에 흰 글씨로 강조하고, 나머지 두 버튼은 흰색 배경에 코랄 오렌지색 테두리로 구분해 줘.

Step 3. 완성된 2회차 버전(v4) 다운로드하기

오른쪽 미리보기 창을 확인해 보세요! 1회 때 만들었던 단순한 글자 나열 페이지가, 불과 세 번의 추가 대화 만에 프로필 사진 변경 기능 + 가로 3열 인터랙티브 카드 + 3종 연락처 버튼을 갖춘 진짜 포트폴리오 사이트처럼 변신했습니다.

1. 오른쪽 미리보기 창에서 방금 만든 버튼 3개 위에 마우스를 올려 색깔과 모양을 확인합니다.
2. 마음에 든다면 아티팩트 창 우측의 [다운로드(Download) 아이콘]을 눌러 오늘 완성한 업그레이드 버전을 내 컴퓨터에 저장해 두세요.

5. 2회 핵심 원리 정리 및 다음 회차 예고: Claude는 대화 맥락을 기억한다, 한 번에 하나씩 구체적으로

오늘 40분 동안 여러분은 비전공자가 바이브 코딩을 할 때 가장 중요하게 써먹어야 할 '대화의 기술'을 완벽하게 익히셨습니다.

(1) 오늘 배운 것 3줄 요약

1. 맥락(Context)의 기억: 같은 대화방 안에서 이어서 말하면, 클로드는 내가 처음에 요청했던 내용과 방금 수정한 코드를 모두 기억하고 그 위에서 작업을 이어갑니다.
2. 부분 고정의 법칙: 마음에 드는 화면을 유지하면서 고치려면 "더 예쁘게" 대신 "다른 부분은 그대로 두고, [위치]의 [대상]만 [어떻게] 바꿔줘"라고 지시해야 합니다.
3. 한 번에 하나씩(Step-by-Step): 카드 배치 바꾸기 $\rightarrow$ 확인 $\rightarrow$ 사진 자리 넣기 $\rightarrow$ 확인 $\rightarrow$ 버튼 넣기처럼 한 번에 하나씩 시키고 눈으로 확인해야, 혹시 잘못되었을 때 바로 이전 버전(v1, v2)으로 되돌리기가 쉽습니다.

(2) 2회 완료 셀프 체크리스트

오늘 실습을 잘 마쳤는지 아래 항목을 체크해 보세요.

• [x] 1회 대화창을 이어서 열고, "다른 부분은 그대로 두고" 공식을 써서 취미 카드를 가로 3칸으로 바꿨다.
• [x] 아티팩트 창의 버전 표시(v1, v2 등)를 눌러 이전 화면과 수정된 화면을 비교해 보았다.
• [x] 상단 프로필 사진 자리와 하단 연락처 버튼 3개를 한 단계씩 차례대로 추가하고 파일로 저장했다.

(3) 다음 3회 예고: 휴대폰으로 보는 모바일 초대장

오늘 만든 자기소개 페이지, 컴퓨터의 넓은 모니터로 볼 때는 가로로 카드 3개가 나란히 놓여서 참 예쁩니다. 그런데 만약 내 친구들을 모임이나 파티에 초대하는 모바일 초대장을 만든다면 어떨까요?

초대장을 받는 사람들의 99%는 컴퓨터가 아니라 세로로 길쭉한 스마트폰 화면으로 열어봅니다. 컴퓨터 화면 기준으로 대충 만들었다가는 휴대폰에서 글씨가 개미만 하게 작아지거나 버튼이 화면 밖으로 삐져나가기 십상입니다.

다음 3회 [휴대폰으로 보는 모바일 초대장]에서는 처음부터 스마트폰 화면에 딱 맞게 디자인하는 '반응형 디자인'의 비밀을 배우고, 모임 날짜까지 남은 시간을 실시간으로 알려주는 D-Day 카운트다운 시계와 지도 링크, 참석 확인 버튼이 달린 근사한 모바일 초대장을 만들어 보겠습니다!