Claude Code 바이브코딩으로 QR 코드 생성기 만들기

셀 모양을 하트, 별, 클로버 같은 걸로 바꿀 수 있는 QR 코드 생성기를 만들고 있습니다.
개인적으로 사용할 데가 많을 것 같아서 만들어야지 생각하다가 바이브코딩으로 작업해보는 게 좋을 것 같아 시작했습니다.

기술 스택: .NET 10, Avalonia 12, SkiaSharp, QRCoder, CommunityToolkit.Mvvm, Velopack

개발 방식: Claude Code 바이브코딩 — 스펙 인터뷰부터 구현, 포팅, 배포까지 하나의 대화에서 진행

현재 상태: v1.0.1, Windows/macOS 빌드, GitHub Actions CI/CD 구성

원래 WPF로 시작했다가, 크로스플랫폼이 필요하다고 판단해서 Avalonia로 포팅했습니다.
이후 답글로 바이브코딩 경험을 이어서 기록하겠습니다.

GitHub : GitHub - rvdingDev/QRCreator: Create QR Code · GitHub

10 Likes

QR 셀을 다양한 모양으로 그리려면 각 모양의 렌더링 방법이 필요합니다.
처음에는 SkiaSharp의 베지어 커브로 직접 그렸는데, 하트가 찌그러지고 별의 꼭짓점 방향이 틀리고 클로버가 뭉개지는 등 모양마다 조정이 끝이 없었습니다.
전환 계기: “Fluent System Icons의 SVG path data를 그대로 가져다 쓸 수 있지 않을까?” 하는 생각이었습니다.
더 좋은 방법이 있었을 것 같은데, 조금 더 생각을 해봐야할 것 같습니다.

4 Likes

GitHub Actions를 한 번도 써본 적이 없었습니다. CI/CD 개념은 알고 있었지만, workflow YAML을 직접 작성하는 건 처음이었습니다.

이것도 바이브코딩으로 진행했습니다. "v* 태그 push하면 Windows/macOS 빌드해서 Release에 올려줘"라고 요청했더니, 워크플로우 파일이 나왔습니다.

구조:
v* 태그 push
├── build-windows (windows-latest)
│ └── publish win-x64 → vpk pack → artifacts
├── build-macos (macos-latest × 2)
│ ├── osx-x64 → vpk pack → artifacts
│ └── osx-arm64 → vpk pack → artifacts
└── release (위 job들 완료 후)
└── artifacts 수집 → GitHub Release 자동 생성

git tag v1.0.0 && git push origin v1.0.0 한 줄이면 세 플랫폼 빌드가 돌아가고 Release 페이지에 설치 파일이 올라갑니다.

처음 써보는 입장에서 느낀 점은, 이런 “한 번 설정하면 반복적으로 쓰는 설정 파일” 종류가 바이브코딩에 가장 잘 맞는 것 같습니다.
workflow YAML 문법을 공부할 필요 없이 원하는 결과를 설명하면 되니까요. 물론 생성된 파일이 맞는지는 실제로 태그 push해보고 Actions 탭에서 확인해야 할 것 같습니다.

4 Likes

바이브코딩으로만 개발해서 소소하게 쓰려고 만든 겁니다 :slight_smile:
완벽하지 않습니다. 혹시나 보시는 분들은 참고 부탁드립니다!

4 Likes

엇, 그런데 리포지터리가 private repo여서 다른 분들에게는 보이지 않는것 같습니다.

클로드 코드한테 Finder는 셀이 나눠지면 안 된다고 말해주세요~:sweat_smile:
QR 코드는 Finder를 기준으로 각 셀을 인식하기 때문에 인식 프로그램에서 가장 먼저 찾는 부분이라고 볼 수 있어서 셀 단위로 끊어져 있으면 잘 인식하지 못하는 프로그램들이 있을 수 있습니다. ㅎㅎㅎ

그리고 SVG로도 저장되면 대박 좋을 것 같아요~:grin:

필요할 때 유용하게 쓸 것 같습니다!

2 Likes

수정했습니다! 알려주셔서 감사합니다:saluting_face:

1 Like

조언 감사드립니다:grinning_face_with_smiling_eyes:
svg도 좋겠군용, 확장해봐야겠네요.
열심히 일시켜보겠습니다 ㅋㅋ

3 Likes

프로젝트 자체의 라이선스 설정도 필요할것 같네요! 보통 Apache License 2.0 정도가 무난합니다.

3 Likes

블링블링 마법진 모양 QR코드 를 상상해버렸읍니다. 그건 너무 간 것 같으니 별모양 정도는 어떨까요☆
그런데 finder 위치때문에 어떨지 잘 모르겠네요 하하;

1 Like