하나의 도구를 두 가지 버전으로 만들어봤다 – 목적에 따라 프롬프트가 달라지는 경험

같은 계산기인데, 쓰는 느낌이 완전히 달라졌다

바이브코딩으로 도구를 만들다 보면 이런 생각이 듭니다.
“기능은 똑같은데, 왜 이건 내가 쓰기엔 편한데 남이 쓰기엔 불편하지?”

이번 회차에서는 ‘계산기’라는 동일한 기능을 가진 도구를
개인용 / 공유용 두 가지 버전으로 실제로 만들어본 경험을 다룹니다.

중요한 점은
코드를 바꾼 것도, 기능을 추가한 것도 아니라는 점입니다.
오직 프롬프트만 달리 썼을 뿐인데
결과물의 성격이 완전히 달라졌습니다.

개인용 계산기: “나는 이미 알고 있다”는 전제

먼저 개인용 계산기부터 만들어봅니다.
이 계산기는 오직 제가 매일 쓰기 위한 용도입니다.

개인용 계산기 프롬프트

숫자를 입력할 수 있는 입력창 하나와
계산 버튼 하나를 가진 간단한 계산기 화면을 만들어주세요.

입력창에 숫자를 입력한 뒤
버튼을 누르면 해당 숫자를 그대로 결과 영역에 표시합니다.

디자인은 단순하게,
입력창 위, 버튼 아래, 결과는 숫자로만 표시되면 됩니다.

"바이브팜(vibefarm) 개인용 계산기 시현 화면. 군더더기 없는 입력창과 버튼 하나로 구성된 심플한 UI. 사용자가 이미 사용법을 알고 있다는 전제하에 설명 문구와 예외 처리를 생략하고 결과 출력의 효율성에만 집중한 디자인."

이 프롬프트의 특징은 명확합니다.

  • 입력 규칙 설명이 없습니다

  • 잘못된 입력에 대한 처리도 없습니다

  • “어떻게 써야 하는지”에 대한 안내가 없습니다

하지만 저는 이 도구를 문제없이 씁니다.
왜냐하면 이미 사용 방법을 알고 있기 때문입니다.

개인용 도구는
👉 기억과 맥락을 전제로 만들어도 괜찮은 도구입니다.

공유용 계산기: “아무것도 모른다”는 가정에서 시작

이제 같은 계산기를
다른 사람이 쓴다는 가정으로 다시 만들어봅니다.

기능은 동일합니다.
입력 → 버튼 클릭 → 결과 출력
하지만 프롬프트는 완전히 달라집니다.

공유용 계산기 프롬프트

웹 브라우저에서 바로 실행할 수 있는
간단한 계산기 웹 페이지를 만들어주세요.

조건은 다음과 같습니다.

1. 이 계산기는 별도의 설치 없이
   링크를 클릭하면 새 브라우저 창(또는 새 탭)에서 바로 실행되어야 합니다.

2. 화면 구성
   - 숫자를 입력할 수 있는 입력창 1개
   - 입력창 안에는 '숫자를 입력하세요'라는 placeholder 문구 표시
   - 입력창 아래에 '계산하기' 버튼 1개
   - 버튼 아래에 결과를 표시하는 영역 1개

3. 동작 방식
   - 사용자가 숫자를 입력하고 '계산하기' 버튼을 클릭하면
     입력된 숫자를 그대로 결과 영역에 숫자로 표시합니다.
   - 입력값이 비어 있거나 문자인 경우
     결과 영역에 '숫자만 입력해주세요'라는 안내 메시지를 표시합니다.

4. 초기 상태
   - 페이지가 처음 열렸을 때
     결과 영역에는 '결과가 여기에 표시됩니다'라는 안내 문구를 보여주세요.
   - 입력창은 페이지 로드 시 자동으로 포커스가 맞춰지도록 설정합니다.

5. 사용 대상
   - 이 계산기는 처음 사용하는 일반 독자를 위한 것입니다.
   - 사용 방법을 따로 설명하지 않아도
     화면만 보고 바로 사용할 수 있어야 합니다.

6. 디자인
   - 복잡한 스타일은 필요 없으며
     기본적인 웹 페이지 형태면 충분합니다.
   - 모바일과 PC 브라우저 모두에서 사용 가능해야 합니다.

"바이브팜(vibefarm) 공유용 계산기 시현 화면. 처음 사용하는 독자를 배려한 디자인으로, 입력창 내 placeholder('숫자를 입력하세요'), 자동 포커스, 결과 영역의 초기 안내 문구가 포함됨. 잘못된 값 입력 시 '숫자만 입력해주세요'라는 예외 처리 메시지가 출력되도록 설계된 안정적인 UI."

같은 계산기인데
화면의 분위기와 안정감이 전혀 다릅니다.

두 프롬프트의 차이는 ‘기능’이 아니라 ‘대상’

이 두 계산기의 차이를 정리해보면 이렇습니다.

개인용 계산기

  • 프롬프트가 짧다

  • 설명이 거의 없다

  • 빠르게 결과를 얻는 데 최적화되어 있다

공유용 계산기

  • 프롬프트가 길다

  • 입력 조건과 예외 상황이 포함되어 있다

  • 처음 쓰는 사람 기준으로 설계되어 있다

중요한 점은
기능은 완전히 같다는 사실입니다.

차이를 만든 것은
“누가 이 도구를 쓰는가”라는 질문이었습니다.

실습 포인트: 프롬프트를 나누는 기준 질문

이 회차에서 가장 중요한 학습 포인트는
프롬프트를 이렇게 나누는 질문입니다.

  • 이 도구를 나만 쓰는가?

  • 아니면 처음 보는 사람이 쓰는가?

이 질문 하나만으로
프롬프트의 길이, 설명 수준, 안정성 기준이 달라집니다.

바이브코딩 초보자가 한 단계 성장하는 순간은
프롬프트를 “잘 쓰는 법”을 고민할 때가 아니라
“누가 쓰는 도구인가”를 고민하기 시작할 때입니다.

정리

  • 같은 기능도 목적에 따라 두 가지 도구가 될 수 있습니다

  • 개인용 도구는 빠름을, 공유용 도구는 이해를 우선합니다

  • 프롬프트는 기능 설명이 아니라 사용 대상 설계입니다

  • 실제 시현해보면 이 차이는 화면에서 바로 드러납니다

이제 바이브코딩은
“만드는 단계”를 넘어
“건네줄 수 있는 단계”로 들어왔습니다.

댓글

댓글 쓰기

이 블로그의 인기 게시물

바이브코딩 기초: 설치와 환경 준비로 첫걸음 떼기

이미지
바이브코딩이라는 새로운 코딩 방식에 관심을 가지게 된 건 최근 몇 주 전입니다. 기존 프로그래밍과 달리, 내 생각과 아이디어를 바로 코드로 연결할 수 있다는 점이 매력적이었죠. 하지만 막상 시작하려니, 어디서부터 손을 대야 할지 막막했습니다. 오늘은 제가 직접 겪은 시행착오와 배움을 중심으로, 초보자도 따라할 수 있는  바이브코딩 환경 준비와 설치 과정 을 안내하려고 합니다. 실제로 제가 처음 시작했을 때는 프로그램 설치 오류, 브라우저 호환 문제 등 사소한 문제 때문에 몇 번이나 다시 시작해야 했습니다. 이런 경험이 있으니, 초보자분들은 같은 시행착오를 줄일 수 있을 거예요. 1. 컴퓨터와 브라우저 환경 확인 바이브코딩 도구 대부분은 웹 기반으로 작동합니다. 따라서 최신 브라우저가 준비되어 있어야 합니다. 저는 Chrome 브라우저를 사용했는데, 설치 과정이 간단하고 도구와 연동이 편리했습니다. 설치가 완료되면, 브라우저 설정에서 팝업 차단이나 확장 프로그램 호환성도 체크해 두는 것이 좋습니다. 실제로 제가 설치 초기에 알림 팝업이 차단되어 시연 화면이 제대로 표시되지 않은 경험이 있었거든요. 또한, 컴퓨터 화면 해상도가 너무 낮으면 시연 화면 일부가 잘리기 때문에, 해상도 설정도 미리 확인하면 좋습니다. 이런 작은 준비가 나중에 큰 시간을 절약해줍니다. 2. 바이브코딩 계정 생성과 도구 접근 환경이 준비되면, 바이브코딩 도구에 접속할 차례입니다. 제가 사용한 도구는  안티그래비티 였는데, 구글 계정으로 간단하게 가입할 수 있었습니다. 계정을 만들면 바로 시작 화면이 나타나며, 기본 사용법과 안내가 제공됩니다. 처음에는 기능이 많아 복잡해 보였지만, 천천히 하나씩 클릭하며 확인하니 이해가 되었습니다. 이 과정에서 중요한 점은 “모르면 도움말을 적극 활용하는 것”입니다. 초보자일수록 매뉴얼과 커뮤니티를 활용하면 시행착오를 크게 줄일 수 있습니다. 저 역시 처음에는 여러 메뉴를 헷갈려 몇 번이나 다시 로그인했지만, 이런 경험 덕분에 사용법을 금방...
자세한 내용 보기

안티그래비티 사용법: 문과생이 프롬프트로 5분 만에 계산기 화면 만드는 법

이미지
  안티그래비티란 무엇일까? 제가 처음 안티그래비티를 만났을 때 솔직히 조금 두려웠습니다. 평생 문과생으로 살아오면서 숫자와 코드와는 거리가 멀었거든요. 그런데 안티그래비티는 그런 저 같은 사람도 친근하게 접근할 수 있도록 만들어진 도구였습니다. 안티그래비티는 말 그대로 “마법의 작업 공간” 같은 느낌이에요. 화면 안에는 우리가 만들고 싶은 프로그램의 요소들을 글로 입력하면, 내부 인공지능이 알아서 코드와 버튼, 화면을 만들어줍니다. 복잡한 명령어를 외울 필요 없이, 글로 원하는 내용을 쓰기만 하면 되는 것이죠. 무엇보다 마음에 들었던 점은,  초보자의 실수를 자연스럽게 흡수 한다는 겁니다. 제가 글자를 조금 잘못 입력해도 안티그래비티는 오류를 크게 내지 않고, 대부분 수정 제안이나 기본값으로 처리해 줍니다. 처음 접하는 사람에게는 정말 큰 장점입니다. 그리고 재미있는 점은, 입력하는 글의 문장만으로도 다양한 시도가 가능하다는 것입니다. 예를 들어, “빨간 버튼을 만들어줘”라고 입력하면 즉시 빨간 버튼이 나타나고, “버튼 크기는 크게”라고 덧붙이면 버튼이 조금 더 커지는 식이죠. 이런  직관적 반응  덕분에 문과생도 금세 재미를 느낄 수 있었습니다. 화면 구성과 첫 인상 처음 안티그래비티를 켜면 기본 화면은 크게 세 부분으로 나뉩니다. 입력창 : 프로그램에 원하는 기능이나 디자인을 글로 입력하는 공간 미리보기 창 : 입력 내용을 바탕으로 화면을 실시간으로 확인할 수 있는 곳 설정 메뉴 : 버튼 색상, 글씨 크기, 배경 색 등을 조절하는 영역 제가 처음 입력창에 글을 입력할 때, 조금 성의 있게 프롬프트를 작성했습니다. 예를 들어 단순히 “계산기 만들어줘”라고 입력하는 대신, 이렇게 썼습니다: “간단한 계산기 화면을 만들어줘. 숫자 입력 칸 2개, 더하기 버튼, 결과를 표시하는 출력 칸 포함. 버튼은 파란색, 글씨는 검정색, 배경은 연한 회색으로. 모든 버튼과 입력칸은 보기 좋게 정렬해줘.” 몇 초 후, 입력한 그대로 버튼과 입...
자세한 내용 보기

바이브코딩의 장점과 일상 활용 사례(가계부와 체크리스트 5분 만들기)

이미지
  바이브코딩이란 무엇인가? 지난 글에서 안티그래비티를 이용해 간단한 계산기 화면을 만들어보았죠. 이번에는 그 경험을 바탕으로  바이브코딩의 장점과 일상 속 활용 사례 를 살펴보겠습니다. 바이브코딩은 단순히 코드를 작성하는 행위가 아니라,  아이디어를 글로 표현하면 화면과 기능으로 바로 구현 해주는 도구입니다. 기존 코딩과 달리 문법 오류에 시달릴 필요가 없고, 초보자도 시각적으로 바로 결과를 확인할 수 있다는 점이 가장 큰 장점이에요. 제가 직접 사용해보면서 느낀 장점은 크게 세 가지였습니다. 즉시 피드백 : 입력한 문장대로 화면이 생성되니, 결과를 기다릴 필요가 없습니다. 시행착오 학습 : 작은 실수나 입력 오류가 발생해도, 반복 수정 과정을 통해 자연스럽게 문제 해결 능력을 기를 수 있습니다. 실용성 : 간단한 계산기, 메모 앱, 체크리스트 등 실생활에서 바로 쓸 수 있는 기능을 구현할 수 있어, 배운 것을 바로 활용할 수 있습니다. 특히 저는 처음 안티그래비티 화면을 띄웠을 때, 버튼 하나하나가 제대로 작동하지 않아 당황했던 경험이 있습니다. 하지만 반복적으로 입력값을 수정하고, 버튼 색상과 위치를 조정하면서  문과생인 저도 충분히 화면을 원하는 대로 설계할 수 있다 는 자신감을 얻었죠. 일상 속 활용 사례 제가 가장 먼저 시도한 활용은   생활에 직접 필요한 도구 만들기 였습니다. 예를 들어, 집안에서 자주 사용하는   가계부 계산기 나, 간단한   할 일 체크리스트 를 만들어보았습니다. 1. 가계부 계산기 프롬프트 가계부 계산기 화면을 만들어줘. - 숫자 입력 칸 2개: ‘지출 내역’과 ‘금액’ 입력 가능 - 더하기 버튼: 클릭 시 두 입력값의 합계 계산 - 결과 출력 칸: 합계가 표시됨 - 버튼 색상은 기본 파란색, 글씨는 검정색, 배경은 연한 회색 - 모든 버튼과 입력칸 보기 좋게 정렬 - 입력 칸에 안내 문구 포함: ‘지출 내역 입력’, ‘금액 입력’ 이 프롬프트를 입력하...
자세한 내용 보기