그림이 '작동하는' 앱이 된다! 세상 쉬운 바이브 코딩법 | 바이브코딩 7편

UI 캔버스가 뭐길래 그림이 앱이 되나

UI 캔버스는 단순한 드로잉 툴이 아니라, 각 컴포넌트가 실제 동작할 수 있는 속성을 가진 전문 캔버스예요. 버튼 하나를 놓을 때도 “이 버튼을 누르면 어떤 일이 일어나는지” 미리 설명을 적어둘 수 있죠.

이게 왜 중요하냐면, 나중에 앱빌더가 이 설명을 보고 실제 코드를 생성하기 때문입니다. 그냥 예쁘게 그린 그림이 아니라 살아 있는 설계도가 되는 거예요.

실제 사례를 하나 볼까요? 어떤 사용자가 길에서 본 할 일 관리 앱 화면을 캡처해서 올렸더니, 10초 만에 버튼과 리스트가 모두 작동하는 UI로 바뀌었어요. AI가 이미지 속 요소들의 역할과 관계를 분석해서 리버스 엔지니어링을 해준 거죠.

UI 캔버스 화면 구성은 크게 세 부분으로 나뉩니다. 왼쪽 사이드바에서 컴포넌트와 레이어를 관리하고, 가운데 커다란 캔버스에서 실제 디자인을 하며, 오른쪽 속성 패널에서 색상, 텍스트, 동작 설명까지 세밀하게 조정할 수 있어요.

포토샵 경험이 있다면 레이어 탭이 익숙할 거예요. 컴포넌트가 많아지면 그룹으로 묶어서 관리하면 훨씬 편합니다. 마우스로 영역을 드래그한 뒤 오른쪽 클릭 → 그룹 만들기를 선택하면 끝이에요.

여기서 한 가지 팁을 드리자면, 컴포넌트를 추가할 때마다 속성 패널의 ‘앱 설명’란에 용도를 꼭 적어두세요. 나중에 AI가 이 설명을 참고해서 더 정확한 코드를 만들어줍니다. 설명이 없을 때와 있을 때 결과 차이가 꽤 커요.

실제로 음악 플레이어 화면을 그려보자

이제 직접 화면을 그려보는 과정을 따라가 보죠. 먼저 컨테이너를 하나 그려 앱 전체 외곽을 잡습니다. 컨테이너는 영역을 구분하거나 배경을 정의할 때 유용한데, 만든 뒤에는 잠금 설정을 해두는 걸 추천해요. 실수로 움직이는 걸 방지할 수 있거든요.

다음으로 목록 상자를 추가하고, 속성의 앱 설명에 “음악 파일 목록 관리”라고 입력합니다. 파일을 불러오는 버튼도 만들어 “탐색기를 열어 곡 불러오기”라고 설명을 남겨두세요.

시각적 효과를 위해 오디오 스펙트럼도 넣어보겠습니다. 컴포넌트에 없으니 ‘기타’를 선택한 뒤 속성에 “오디오 스펙트럼 막대형”이라고 적어줍니다. 이렇게 하면 AI가 나중에 실제 오디오 시각화 코드를 넣어줘요.

플레이, 이전 곡, 다음 곡 버튼은 복제 기능을 활용하면 빠르게 만들 수 있어요. 버튼을 하나 만든 뒤 오른쪽 클릭 → 복제를 두 번 하면 동일한 크기와 스타일의 버튼이 생깁니다. 텍스트만 바꿔주면 끝.

작업이 끝나면 오른쪽 상단의 ‘AI로 내용 채우기’ 버튼을 눌러보세요. 앱 이름, 주요 기능, 타겟 사용자까지 AI가 자동으로 정리해줍니다. 직접 문서를 쓰는 것보다 훨씬 자연스럽고 설득력 있는 명세서가 나와요.

완성된 파일은 JSON 형식으로 저장합니다. 이미지로도 저장할 수 있으니 참고용으로 같이 보관해 두는 게 좋습니다. 이 JSON 파일이 바로 앱빌더로 넘어가는 핵심 자료가 되거든요.

이미지 한 장만으로 앱을 뚝딱 만드는 법

UI 캔버스의 진짜 강력한 기능은 이미지 분석입니다. 이미 완성된 다른 앱 화면을 캡처만 해도 AI가 UI를 분석해서 그대로 재현해줘요.

예를 들어 8일 관리 앱 화면을 캡처해서 올렸더니, AI가 헤더, 리스트, 버튼 등을 자동으로 인식하고 컴포넌트로 변환했습니다. 깨진 부분이 있어도 크게 신경 쓸 필요 없어요. 컴포넌트 속성과 디자인 명세서까지 함께 생성해주기 때문이죠.

생성된 결과물에서 앱 이름이 “생산성 부스터”로 잘못 나왔다면, 간단히 수정하고 ‘AI로 내용 채우기’를 다시 누르면 됩니다. 명세서가 자동으로 업데이트되죠.

이제 앱빌더로 넘어갑니다. 저장한 JSON 파일을 업로드하고 “이 파일을 기반으로 한글 앱을 만들어라”라고만 입력하면 끝. 화면 캡처 이미지도 같이 올리면 더 정확한 결과가 나오는 경우가 많아요.

또 다른 방법으로, 아예 프롬프트로 이미지를 먼저 생성한 뒤 UI 캔버스에 넣는 방식도 있어요. “데스크톱용 음악 플레이어 정면 UI”라고 입력해서 이미지를 만들고, 그 이미지를 분석시키면 동일한 과정으로 앱이 완성됩니다.

이렇게 하면 복잡한 프롬프트 작성 없이도 원하는 앱을 빠르게 프로토타입으로 만들 수 있어요. 기획자든 개발자든, 아이디어만 있으면 누구나 바로 시작할 수 있는 환경이 된 거죠.