코드잇 텐엑스 "입문자를 위한 바이브 코딩" 강의 후기

About this offer

본 포스팅은 10x 체험단 활동의 일환으로 강의 수강권을 제공받아 작성한 후기입니다. 아이디어를 기획하고 화면으로 구현해본 바이브 코딩 학습 이번 코드잇 텐엑스 과정에서는 바이브 코딩의 기본 개념부터 서비스 기획, 그리고 Google Stitch를 활용한 UI 화면 제작까지 학습했다. 평소 서비스 기획에 관심이 있어 아이디어를 정리하거나 사용자 문제를 정의하는 경험은 있었지만, 내가 생각한 아이디어를 AI 도구를 활용해 실제 화면의 형태로 빠르게 만들어보는 것은 새로운 경험이었다. 특히 이번 2주간의 학습을 통해 단순히 “좋은 아이디어를 생각하는 것”에서 끝나는 것이 아니라, 사용자의 불편함을 발견하고 → 서비스 기능을 정의하고 → MVP와 PRD를 작성하고 → 실제 화면으로 구체화하는 과정을 직접 경험할 수 있었다. AI를 활용하며 내가 기획한 아이디어를 구체화하는 경험이었기에 실제로 AI 서비스 개발을 하는 것 같아서 작업할 때마다 흥미롭게 진행할 수 있었던 것 같다. 📍 1주차 – 바이브 코딩과 서비스 기획의 기초 익히기 1주차에는 먼저 바이브 코딩이 무엇인지 이해하고 Google AI Studio를 활용해 AI와 대화하는 방법을 학습했다. 처음에는 AI에게 원하는 내용을 이야기하면 결과물을 만들어주는 정도로 생각했지만, 학습을 진행하면서 결과물의 품질을 높이기 위해서는 사용자가 원하는 것을 얼마나 구체적으로 전달하는지가 중요하다는 것을 알게 됐다. 특히 AI에게 요청할 때 단순히 “이 기능을 만들어줘”라고 이야기 하기보다는 목적, 사용자, 필요한 기능, 조건 등을 구체적으로 설명 해야 원하는 결과에 가까워진다는 점이 인상적이었다. 이후에는 서비스 기획의 기본적인 과정을 학습했다. 가장 먼저 좋은 서비스 아이디어 는 새로운 기술에서 시작하는 것이 아니라 사용자가 실제로 경험하는 불편함에서 시작 해야 한다는 점을 배웠다. 이를 바탕으로 내가 평소 느끼고 있던 문제를 서비스 아이디어로 발전시켰다. 유튜브, 인스타그램, 틱톡 등에서 나중에 다시 보기 위해 콘텐츠를 저장하지만, 저장된 콘텐츠가 많아질수록 원하는 콘텐츠를 다시 찾기 어렵다는 불편함에 주목했다. 그래서 여러 플랫폼에서 저장하고 싶은 콘텐츠 링크를 하나의 서비스에 모으고, 카테고리별로 정리해 나중에 쉽게 다시 찾을 수 있는 서비스를 기획했다. 이 과정에서 단순히 기능을 많이 넣는 것이 아니라 가장 먼저 검증해야 할 핵심 기능이 무엇인지 결정하는 * MVP * 개념도 학습했다. 내가 기획한 서비스에서는 다음과 같은 흐름을 핵심 MVP로 설정했다. 콘텐츠 링크 저장 → 카테고리별 분류 → 저장 목록 확인 → 원본 콘텐츠로 이동 이를 통해 “처음부터 완성도 높은 서비스를 만드는 것” 보다 사용자가 실제로 이 기능에서 가치를 느끼는지를 먼저 확인하는 것 이 중요하다는 점을 이해할 수 있었다. 이후에는 서비스의 목적, 사용자, 주요 기능, 사용 흐름 등을 정리한 PRD(Product Requirements Document) 를 작성하면서 막연했던 아이디어를 하나의 서비스 기획서로 구체화했다. 📍 2주차 – 기획서를 실제 화면으로 표현하기 2주차에는 1주차에서 기획한 서비스를 실제 화면으로 표현하는 과정을 학습했다. 먼저 UI를 구성할 때 단순히 예쁜 화면을 만드는 것이 아니라 사용자가 어떤 행동을 해야 하는지 자연스럽게 안내하는 것이 중요하다는 점을 배웠다. 화면에 포함된 모든 요소를 동일하게 강조하면 오히려 사용자가 어디를 먼저 봐야 할지 알기 어렵기 때문에, 정보의 중요도 에 따라 크기와 배치, 강조 정도를 다르게 구성 해야 한다는 점도 학습했다. 이후 Google Stitch를 활용해 내가 기획한 서비스의 UI 초안을 직접 만들어보았다. AI에게 프롬프트를 제공하면 텍스트로만 정리되어 있던 서비스가 실제 화면으로 나타나는 과정이 가장 흥미로웠다. 처음 생성된 화면을 그대로 사용하는 것이 아니라, 원하는 서비스 방향과 다르게 표현된 부분을 다시 수정하면서 화면을 발전시켰다. 예를 들어 사용자가 가장 먼저 해야 하는 행동 을 더 잘 보이게 만들거나, 중요도가 상대적으로 낮은 요소 는 시각적인 강조를 줄이는 방식으로 화면을 조정했다. 또한 하나의 화면을 만드는 데서 끝나는 것이 아니라 다음 화면을 추가하면서 사용자의 전체 이용 흐름 을 연결하는 경험 도 할 수 있었다. 이 과정에서 기획 단계에서는 자연스럽다고 생각했던 사용자 흐름도 실제 화면으로 만들어보면 부족한 부분이 보인다는 것을 알게 됐다. 결국 화면 설계는 단순히 기획서를 시각화하는 과정이 아니라, 사용자 입장에서 서비스 흐름을 다시 검증하는 과정이라는 점을 배울 수 있었다. 📍 전문가 피드백으로 더 성장하기 텐엑스를 진행하면서 직접 작업한 과정 및 결과를 멘토님께 제출하면, 직접 피드백을 텍스트로 적어주시고 그와 동시에 내가 어느 부분에서 잘했고, 어느 부분에서는 부족하며, 이럴 때는 어떻게 고도화하면 좋은지 이해하기 쉽게 영상으로도 설명해주셔서 더욱더 성장할 수 있는 발판이 되었다. 실제로 멘토님께 받은 피드백 내용이다. 정보 위계에 요소 이름만 적혀 있는데, 왜 이러한 우선순위를 가져야 하는지나, 화면 상에서 어떻게 우선순위를 높여서 보여줄지를 더 구체화해보면 좋습니다. 예를 들어 메인 화면 1순위인 링크 입력 칸이라면 "핵심 가설의 주요 행동이므로 가장 접근성이 높아야 하고, 화면 최상단에 가로 전체 폭으로, 저장 버튼은 대표 색상으로 채워서 표시하기"와 같이 만들어 볼 수 있습니다. 피드백을 확인한 직후, 바로 적용시켜서 프롬프트를 작성하니 내가 수정하고자 한 부분을 AI가 완벽하게 수정하는 결과를 확인했다. 이를 기점으로 내가 판단한 이유와 그렇기에 어떻게 수정해야할 지 세세하게 설명하며 작업을 진행하는 습관을 가지게 되었다. 📍 가장 크게 달라진 점 이번 2주간의 학습을 통해 가장 크게 달라진 점은 아이디어를 바라보는 방식 이다. 이전에는 서비스 아이디어가 떠오르면 먼저 어떤 기능을 넣을지 생각하는 경우가 많았다. 하지만 지금은 먼저 “사용자가 어떤 불편함을 겪고 있는가?” 를 생각한 뒤, 문제 정의 → 핵심 가설 → MVP → PRD → UI 순서로 아이디어를 구체화하려고 한다. 또한 AI 도구 역시 단순히 결과물을 만들어주는 도구가 아니라, 내가 원하는 방향을 명확하게 전달하고 결과를 반복적으로 수정 하면서 함께 결과물을 만들어가는 도구라는 점을 경험했다. 특히 Google Stitch를 이용해 기획 내용을 실제 화면으로 빠르게 확인해보면서, 서비스 기획자가 아이디어를 전달할 때 문서뿐 아니라 화면 형태의 프로토타입까지 함께 제시할 수 있다면 훨씬 효과적인 커뮤니케이션이 가능 하겠다는 생각이 들었다. 📍 앞으로의 목표! 이번 2주차까지는 서비스 아이디어를 정의하고, MVP와 PRD를 작성한 뒤 Google Stitch를 활용해 UI 초안을 제작하는 단계까지 진행했다. 3주차에는 지금 만든 화면을 기반으로 사용자가 실제로 조작할 수 있는 형태의 서비스를 기획 및 제작해서 직접 배포하여 웹서비스 만들기 과정까지 배울 것 같다. 그렇기에 사용자의 입장이 되어, '나의 서비스를 직접 사용한다면 어디서 불편함을 겪을지', 또는 '기획한 기능 중 서비스 초기 단계 구현에서 필요가 있는가?'를 판단해서 기획을 구체화하고 싶다. 또한 AI를 활용해 기능을 구현하는 과정에서 단순히 AI가 만들어준 결과를 사용하는 것이 아니라, 내가 작성한 기획 의도가 실제 기능에 제대로 반영되었는지를 판단하고 수정할 수 있는 능력 을 기르고 싶다. 궁극적으로는 서비스 아이디어를 기획서에서 끝내지 않고, 직접 프로토타입을 제작하고 사용자 반응까지 확인할 수 있는 기획자로 성장하는 것이 목표다.