초보자를 위한 바이브 코딩: Claude로 포토 부스를 만든 방법

Translated for your language. Read the original.

AI-assisted draft.

In this article

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

I am a writer, not a coder. My technical skills end at basic HTML from 1999.

But I just built a real, working tool.

I built a browser-based photo booth for MLH events. Attendees can snap a selfie, add a branded frame, and save it to their phones. No app store. No accounts. Just a link.

I used a method called vibe coding with Claude. Here is how I did it and what I learned.

𝗧𝗵𝗲 𝗦𝘁𝗿𝗮𝘁𝗲𝗴𝘆

I wanted something reliable for live events. Claude advised against complex frameworks. Instead, we built a single index.html file.

It uses HTML, CSS, and JavaScript in one file.
There are no build steps or installations.
It hosts for free on GitHub Pages.
It has fewer moving parts, so it is harder to break.

𝗧𝗵𝗲 𝗧𝗲𝗰𝗵𝗻𝗶𝗰𝗮𝗹 𝗕𝗶𝗹𝗱

The app uses an HTML canvas to combine a selfie with a transparent PNG frame. This happens entirely in the browser.

The user's photo never leaves their device.
This protects privacy automatically.
I added gestures like pinch-to-zoom for easy photo alignment.

To manage frames without a complex server, I used Supabase.

Organizers upload frames to a storage bucket.
Attendees view them through a public link.
Security is handled by database policies, not hidden passwords.

𝗕𝗲𝗴𝗶𝗻𝗻𝗲𝗿 𝗚𝗼𝘁𝗰𝗵𝗮𝘀

Vibe coding helps with architecture, but you must watch for operational details:

Database Sleep: Free Supabase projects pause after inactivity. You must wake them up before an event.
Canvas Tainting: Loading images from a different source can break the save function. I fixed this using crossOrigin settings.
Mobile UX: On phones, I used the native share sheet. This lets users save photos directly to their camera roll in one tap.

𝗠𝘆 𝗔𝗱𝘃𝗶𝗰𝗲 𝗳𝗼𝗿 𝗬𝗼𝘂

If you want to try this, follow these rules:

Pick a project with hard boundaries. A photo booth is a clear goal. A social media app is too big.
Ask the AI to explain the "why." The reasoning is more important than the code.
Read the diffs. Do not let AI change your site without you reviewing the changes first.

Vibe coding does not mean you do not understand your project. It means the AI handles the syntax while you handle the logic and the tradeoffs.

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

최근 개발 커뮤니티에서 "바이브 코딩(Vibe Coding)"이라는 용어가 떠오르고 있습니다. 이것이 무엇인지, 그리고 제가 Claude를 사용하여 어떻게 실제로 작동하는 포토 부스 웹 앱을 만들었는지 설명해 드리겠습니다.

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

전통적인 코딩은 프로그래밍 언어의 구문(syntax)을 정확히 알고, 세미콜론 하나, 괄호 하나까지 신경 써야 하는 작업입니다. 하지만 바이브 코딩은 다릅니다.

바이브 코딩은 코드를 직접 작성하는 대신, AI에게 당신이 원하는 결과물의 **'느낌(vibe)'**과 **'의도(intent)'**를 설명하는 방식입니다. 당신은 프로그래머라기보다는 감독(Director)에 가까워집니다. 당신은 "이 앱은 90년대 레트로 스타일이었으면 좋겠어", "사진을 찍으면 빈티지한 필터가 적용되게 해줘"라고 말합니다. 그러면 AI가 그 '바이브'를 이해하고 코드를 생성합니다.

프로젝트: 레트로 포토 부스 웹 앱

제가 도전한 프로젝트는 간단하지만 재미있는 것이었습니다. 브라우저에서 바로 실행할 수 있는 포토 부스 앱을 만드는 것이었죠.

주요 기능:

웹캠을 통한 실시간 사진 촬영
사진에 적용되는 다양한 필터 (흑백, 세피아, 빈티지 등)
촬영된 사진 다운로드 기능
90년대 스타일의 UI 디자인

작업 과정: Claude와의 협업

저는 Claude를 사용하여 이 프로젝트를 진행했습니다. 과정은 다음과 같았습니다.

1. 초기 프롬프트 (The Initial Vibe)

처음에는 아주 막연하게 시작했습니다.

"HTML, CSS, JavaScript를 사용해서 웹 브라우저에서 작동하는 포토 부스 웹 앱을 만들어줘. 90년대 레트로 스타일의 디자인이었으면 좋겠어."

Claude는 즉시 기본적인 구조를 갖춘 코드를 생성했습니다. 카메라 피드가 화면에 나타나고, '찰칵' 버튼이 있는 형태였죠.

2. 반복 및 미세 조정 (Iteration)

첫 번째 결과물이 나왔지만, 아직 '바이브'가 완벽하지 않았습니다. 저는 대화를 통해 계속해서 수정해 나갔습니다.

나: "디자인이 너무 현대적이야. 좀 더 픽셀 아트 느낌이 나고, 색감은 약간 바랜 듯한 느낌으로 바꿔줘."
Claude: (코드를 수정하여 더 레트로한 CSS 스타일 적용)
나: "사진을 찍을 때 플래시가 터지는 효과를 넣어줘. 그리고 필터 기능도 추가해줘."
Claude: (JavaScript를 사용하여 플래시 효과와 필터 로직 추가)

이 과정에서 저는 단 한 줄의 코드도 직접 작성하지 않았습니다. 대신, 제가 원하는 모습이 무엇인지 끊임없이 설명했습니다.

3. 디버깅 (Debugging the Vibe)

물론 문제가 발생하기도 했습니다. 카메라 권한 문제로 피드가 뜨지 않는 경우가 있었죠. 하지만 저는 에러 메시지를 그대로 복사해서 Claude에게 던졌습니다.

"카메라 피드가 화면에 안 나와. 이 에러가 발생해: [에러 메시지]"

Claude는 즉시 원인을 파악하고 해결책을 제시했습니다.

바이브 코딩을 통해 배운 점

이 경험을 통해 저는 코딩의 패러다임이 변하고 있다는 것을 느꼈습니다.

구문보다 의도가 중요하다: 이제는 for 루프를 어떻게 작성하느냐보다, "어떤 기능을 만들고 싶은가"를 명확하게 정의하는 능력이 더 중요해졌습니다.
언어의 장벽이 낮아졌다: 프로그래밍 언어를 완벽히 숙지하지 않아도, 논리적인 사고와 명확한 의사소통 능력만 있다면 누구나 소프트웨어를 만들 수 있습니다.
개발자는 감독이 된다: 개발자의 역할은 코드를 치는 사람에서, AI가 생성한 결과물을 검토하고 방향을 설정하는 '제품 감독'으로 진화하고 있습니다.

결론

바이브 코딩은 마법이 아닙니다. 여전히 논리적인 구조와 문제 해결 능력이 필요합니다. 하지만 기술적인 장벽을 획기적으로 낮추어, 아이디어를 즉시 현실로 만들 수 있게 해줍니다.

여러분도 Claude와 같은 도구를 사용하여 여러분만의 '바이브'를 코딩해 보세요!

Source: https://dev.to/mlh/vibe-coding-for-beginners-how-i-built-a-working-photo-booth-web-app-with-claude-8ib

Optional learning community: https://t.me/GyaanSetuAi