버튼은 눌리는데 왜 아무 일도 안 일어날까

동작 트리거 이해하기 – 실행은 ‘언제’ 시작되는가

바이브코딩으로 도구를 만들다 보면
이상하게 가장 당황스러운 순간이 찾아옵니다.

버튼은 분명히 눌립니다.
화면도 멀쩡합니다.
에러 메시지도 없습니다.

그런데 아무 일도 일어나지 않습니다.

처음 이 상황을 겪었을 때는
도구가 고장 난 줄 알았습니다.
프롬프트를 다시 쓰고,
AI에게 “왜 동작을 안 하냐”고 묻기도 했습니다.

하지만 문제는 기능이 아니라
실행 시점, 즉 동작 트리거에 있었습니다.

초보자가 가장 자주 빠지는 오해

바이브코딩을 처음 배우면
이런 식으로 생각하기 쉽습니다.

“이 기능을 만들어달라고 했으니
버튼을 누르면 당연히 실행되겠지.”

하지만 AI는
‘당연히’를 이해하지 않습니다.

AI에게 중요한 것은
이 코드가 언제 실행되어야 하는지입니다.

이 지점을 명확히 하지 않으면
버튼은 만들어지지만
버튼과 동작은 서로 연결되지 않은 상태로 남게 됩니다.

동작 트리거란 무엇인가

동작 트리거는 간단히 말해
실행이 시작되는 계기입니다.

대표적인 트리거는 다음과 같습니다.

  • 화면이 열리자마자 자동 실행

  • 버튼을 눌렀을 때 실행

  • 특정 조건이 만족되었을 때 실행

문제는
초보자가 이 차이를 인식하지 못한 채
“기능”만 설명한다는 점입니다.

그 결과
AI는 실행 시점을 추측하게 되고,
그 추측은 매번 동일하지 않습니다.

실습 ① 자동 실행 vs 버튼 실행의 차이

먼저 가장 기본적인 비교부터 해보겠습니다.

자동 실행 예시

프롬프트에 이렇게 요청했다고 가정합니다.

“숫자를 입력하면 합계를 계산해서 보여주는 화면을 만들어주세요.”

이 경우 AI는
입력값이 바뀔 때마다
자동으로 계산이 실행되도록 만들 가능성이 큽니다.

즉,
화면 변화 = 즉시 실행 구조입니다.

간단한 예제에서는 편하지만,
입력이 많아지면
의도하지 않은 계산이 계속 발생할 수 있습니다.

버튼 실행 예시

이번에는 실행 조건을 명확히 합니다.

“계산 버튼을 누르면
입력된 숫자들의 합계를 계산하여
결과 영역에 표시합니다.”

이 문장이 추가되는 순간
실행 트리거는 명확해집니다.

  • 언제 실행되는가 → 버튼 클릭 시

  • 무엇을 기준으로 실행되는가 → 현재 입력값

이 차이가
“버튼은 있는데 아무 일도 안 일어나는 문제”를
근본적으로 해결해줍니다.

버튼이 눌리는데 동작하지 않는 진짜 이유

이 현상의 대부분은
버튼이 ‘장식’으로만 존재하기 때문입니다.

  • 버튼은 생성되었지만

  • 버튼 클릭과 계산 로직이 연결되지 않았고

  • 실행 조건이 코드에 정의되지 않은 상태

사람 눈에는
“버튼이 있으니 누르면 되겠지”이지만
AI에게는
“이 버튼이 뭘 하라는 건지” 정보가 없습니다.


실행 트리거가 연결되지 않아 총 합계가 0원으로 표시되고 있는 화면 & '합계 계산' 버튼에 트리거가 연결되어, 추가된 내역인 5만 원과 2만 원을 합산한 7만 원이 총 합계 영역에 정확히 표시된 화면


실습 ② 조건에 따른 실행 분기 이해하기

한 단계 더 나아가 보겠습니다.

조건이 없는 실행의 문제

버튼을 눌렀을 때
무조건 계산이 실행되도록 만들면
입력이 잘못되어도 그대로 진행됩니다.

이전 회차에서 배운
입력값 검증과도 연결되는 지점입니다.

조건이 있는 실행 구조

프롬프트에 다음 흐름을 추가합니다.

  • 버튼 클릭 시

  • 입력값이 비어 있지 않다면 계산 실행

  • 조건을 만족하지 않으면 안내 메시지 표시

이렇게 조건을 붙이면
실행은 단순한 동작이 아니라
판단을 거친 행동이 됩니다.

이 구조가 들어간 순간
도구는 훨씬 사람처럼 행동하기 시작합니다.

“언제 실행되는가”를 반드시 말로 적어야 하는 이유

바이브코딩에서
실행 시점을 명시하지 않는다는 것은
AI에게 결정권을 넘기는 것과 같습니다.

AI가 대신 판단해주길 기대할수록
결과는 흔들립니다.

반대로
실행 조건을 문장으로 적어주는 순간
결과는 눈에 띄게 안정됩니다.

이것은 코딩 실력의 문제가 아니라
설명 습관의 문제였습니다.

프롬프트 점검용 질문 하나

프롬프트를 보내기 전에
다음 질문을 스스로에게 던져보면 좋습니다.

“이 동작은 언제 실행되는가?”

  • 화면이 열리자마자인가

  • 버튼을 눌렀을 때인가

  • 특정 조건이 만족되었을 때인가

이 질문에 답이 떠오르지 않는다면
프롬프트에도 그 정보가 빠져 있을 가능성이 큽니다.

요약 / 정리

  • 버튼이 눌리는데 동작하지 않는 이유는 대부분 실행 트리거 문제입니다

  • 바이브코딩에서는 ‘무엇을’보다 ‘언제’를 먼저 정리해야 합니다

  • 자동 실행과 버튼 실행은 명확히 다른 구조입니다

  • 조건에 따른 실행 분기를 추가하면 도구는 훨씬 안정됩니다

이번회를 지나면서 바이브코딩은
단순히 화면을 만드는 단계를 넘어
동작 흐름을 설계하는 단계로 진입합니다.

이 감각을 익히면
“왜 안 되지?”라는 질문은 줄어들고,
“아, 실행 조건을 빼먹었구나”라는
차분한 점검이 가능해지기 시작합니다.

댓글

댓글 쓰기

이 블로그의 인기 게시물

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

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

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

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

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

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