𝗩𝗶𝗯𝗲 𝗖𝗼𝗱𝗶𝗻𝗴 𝗳𝗼𝗿 𝗕𝗲𝗴𝗶𝗻𝗻𝗲𝗿𝘀: 𝗛𝗼𝘄 𝗜 𝗕𝘂𝗶𝗹𝘁 𝗮 𝗣𝗵𝗼𝘁𝗼 𝗕𝗼𝗼𝘁𝗵 𝗪𝗲𝗯 𝗔𝗽𝗽

I am a writer, not a coder. My technical skills stopped at basic HTML in 1999.

Last week, I built my first real tool. I used Claude to "vibe code" a working photo booth web app for MLH.

Here is how a non-coder built a functional app for live events.

𝗧𝗵𝗲 𝗣𝗿𝗼𝗯𝗹𝗲𝗺 MLH runs many events. We needed a browser-based photo booth.

• Attendees open a link on their phones.
• They snap a selfie or upload a photo.
• They add a branded frame.
• They save the photo to their camera roll.
• No accounts. No app stores. Just a link.

𝗧𝗵𝗲 𝗧𝗲𝗰𝗵𝗻𝗶𝗰𝗮𝗹 𝗦𝘁𝗿𝗮𝘁𝗲𝗴𝘆 I wanted to use a complex framework. Claude talked me out of it.

For live events, fewer moving parts win. I built the entire tool in one single index.html file. It uses HTML, CSS, and JavaScript. There is no complex build step. It stays on GitHub Pages for free.

𝗧𝗵𝗲 𝗣𝗿𝗶𝘃𝗮𝗰𝘆 𝗕𝗼𝗻𝘂𝘀 I used an HTML canvas to combine the photo and the frame. All processing happens in the user browser. The photo never uploads to a server. This makes it private and secure for attendees.

𝗧𝗵𝗲 𝗕𝗮𝗰𝗸𝗲𝗻𝗱 𝗠𝗮𝗴𝗶𝗰 A static site can still have a backend. I used Supabase for storage.

• Organizers upload frames to a Supabase bucket.
• Attendees view those frames through the site.
• Security lives in database policies, not hidden passwords.

𝗧𝗵𝗲 𝗕𝗲𝗴𝗶𝗻𝗻𝗲𝗿 𝗚𝗼𝘁𝗰𝗵𝗮𝘀 Vibe coding helps with architecture, but you must watch for operational details:

• Databases sleep. I learned to wake up my Supabase project the day before an event.
• Image security. I had to add a specific line of code to allow the canvas to use remote images.
• User experience. On phones, a "download" is hard to find. I changed the code to use the native mobile share sheet. This sends the photo straight to the camera roll.

𝗠𝘆 𝗟𝗲𝘀𝘀𝗼𝗻𝘀 𝗳𝗼𝗿 𝗬𝗼𝘂

1. Pick a project with hard boundaries. A photo booth is a finish line. A social app is not.
2. Ask the AI "why." The reasoning is more important than the code.
3. Read the diffs. Do not let the AI change your site without your review.
4. Own the decisions. The AI handles syntax, but you handle the constraints.

Vibe coding is not about skipping the work. It is about focusing on the right problems.

초보자를 위한 바이브 코딩(Vibe Coding): Claude로 작동하는 포토 부스 웹 앱을 만든 방법

최근 개발 커뮤니티에서 "바이브 코딩(vibe coding)"이라는 용어가 떠오르고 있습니다. 만약 당신이 코드를 한 줄 한 줄 직접 작성하는 대신, AI에게 "이런 느낌의 앱을 만들어줘"라고 말하며 결과물을 만들어내고 있다면, 당신은 이미 바이브 코딩을 하고 있는 것입니다.

저는 최근 Claude를 사용하여 실제로 작동하는 포토 부스 웹 앱을 만들었습니다. 저는 복잡한 프론트엔드 프레임워크나 상태 관리 라이브러리에 대해 깊은 지식이 없었지만, '바이브'만으로 멋진 결과물을 만들어낼 수 있었습니다.

바이브 코딩이란 무엇인가요?

바이브 코딩은 전통적인 프로그래밍 방식과는 다릅니다. 전통적인 방식에서는 구문(syntax), 알고리즘, 데이터 구조에 집중합니다. 반면, 바이브 코딩은 **의도(intent)**와 **결과물(outcome)**에 집중합니다.

당신은 개발자가 아니라 '지휘자'가 됩니다. 당신은 코드를 직접 작성하는 대신, AI에게 요구 사항을 설명하고, 생성된 코드를 테스트하며, 원하는 결과가 나올 때까지 피드백을 주고받습니다.

프로젝트: 포토 부스 웹 앱

제가 만들고자 했던 것은 간단하지만 재미있는 프로젝트였습니다:

1. 웹 브라우저에서 카메라 접근 권한 요청.
2. 실시간 카메라 피드 표시.
3. '찰칵' 버튼을 누르면 사진 촬영.
4. 촬영된 사진에 재미있는 필터(흑백, 세피아 등) 적용.
5. 사진을 다운로드할 수 있는 기능.

제작 과정

1. 첫 번째 프롬프트 (The Initial Vibe)

저는 처음부터 완벽한 코드를 요구하지 않았습니다. 대신 아주 느슨한 '바이브'를 전달했습니다.

"HTML, CSS, JavaScript를 사용해서 간단한 포토 부스 웹 앱을 만들어줘. 카메라를 사용할 수 있어야 하고, 사진을 찍어서 화면에 보여준 다음, 필터를 적용할 수 있어야 해. 디자인은 귀엽고 팝한 느낌으로 해줘."

Claude는 즉시 모든 기능이 포함된 코드를 생성했습니다.

2. 반복과 개선 (Iteration)

첫 번째 버전은 작동했지만, 디자인이 너무 심심했습니다. 그래서 저는 다시 '바이브'를 전달했습니다.

"디자인이 너무 심심해. 네온 핑크와 블루를 사용해서 80년대 레트로 스타일로 바꿔줘. 버튼은 누를 때마다 반짝이는 효과를 넣어줘."

Claude는 CSS를 수정하여 훨씬 더 멋진 UI를 만들어냈습니다.

3. 디버깅 (Debugging the Vibe)

사진을 찍을 때 브라우저가 멈추는 버그가 발생했습니다. 저는 코드를 직접 분석하는 대신 Claude에게 에러 메시지를 그대로 던졌습니다.

"사진을 찍으려고 하면 브라우저가 응답하지 않아. 이 에러 메시지를 보고 해결해줘: [에러 메시지 복사/붙여넣기]"

Claude는 비동기 처리(async/await) 문제임을 파악하고 코드를 수정했습니다.

바이브 코딩에서 배운 점

이 과정을 통해 저는 몇 가지 중요한 교훈을 얻었습니다.

• 의사소통이 핵심입니다: AI에게 무엇을 원하는지 명확하게(하지만 유연하게) 설명하는 능력이 코딩 실력만큼 중요해졌습니다.
• 작게 시작하세요: 한 번에 모든 기능을 요구하기보다, 핵심 기능을 먼저 만들고 하나씩 추가하는 것이 훨씬 효율적입니다.
• 결과를 검증하세요: AI가 코드를 짜준다고 해서 검증을 멈춰서는 안 됩니다. 코드가 실제로 의도대로 작동하는지 계속 확인해야 합니다.

결론

바이브 코딩은 프로그래밍의 문턱을 낮추고 있습니다. 이제 아이디어만 있다면, 복잡한 문법을 배우느라 시간을 허비하지 않고도 자신의 상상을 현실로 만들 수 있습니다.

여러분도 오늘 자신만의 '바이브'로 무언가를 만들어보는 건 어떨까요?