비개발자의 AI 코딩 도전기: Claude Code로 크리스마스 앱 만들기 🎄

koyu · 2025-12-24T08:39:29.966145Z

# A Non-Developer's AI Coding Challenge: Creating a Christmas App with Claude Code 🎄 > "I can't even type a line of code, but I fought against AI to create an app." --- ## Part 1: The Beginning of a Reckless Challenge 🚀 ### 1.1 Who Am I? I'm not a developer. I know HTML, but I thought JavaScript was a coffee brand. LOL Then, just before Christmas, I suddenly had this idea: "Let's create a retro-inspired diary app!" Why? Because there's an AI coding assistant called **Claude Code**! #

"코드 한 줄 못 치는 내가 AI랑 싸우며 앱을 만들었다"

Part 1: 무모한 도전의 시작 🚀

1.1 나는 누구인가?

나는 개발자가 아닙니다.

HTML이 뭔지는 알지만, JavaScript는 커피 브랜드인 줄 알았던 사람이에요 ㅋㅋㅋ

그런 제가 크리스마스를 앞두고 갑자기 이런 생각을 했습니다:

"레트로 감성의 다이어리 앱을 만들어보자!"

왜냐고요? Claude Code라는 AI 코딩 어시스턴트가 있으니까요!

1.2 순진한 시작

"쉽겠지? AI한테 말만 하면 되잖아!"
- 며칠 전의 순진한 나

"AI가 다 해주겠지~" 라는 순진한 생각으로 시작한 이 프로젝트는...

예상대로 순탄하지 않았습니다 😱

Part 2: 꿈은 원대하게 - 프로젝트 기획 💭

2.1 내가 원했던 것

제가 만들고 싶었던 건 이런 거였어요:

📺 1990년대 DOS 시대 감성의 다이어리
💚 녹색 모니터 느낌의 레트로 UI
🎄 크리스마스 카드 기능 (GIF로 다운로드!)
☁️ 클라우드 저장으로 어디서든 접속

2.2 실제로 만들어진 것

DOOGIE 스크린샷

DOOGIE - 진짜로 1990년대 DOS 느낌이 나는 다이어리가 탄생했습니다! 🎉

완성된 앱의 특징:

4:3 비율의 CRT 모니터 느낌
녹색 텍스트 (#00ff00)
네오둥근모 폰트로 완벽한 레트로 감성
픽셀 아트 이미지 처리까지!

근데... 여기까지 오는 과정이 순탄치 않았어요 😅

Part 3: 첫 번째 고비 - GIF 다운로드 기능 🎬

3.1 문제 발생

크리스마스 카드를 GIF로 다운로드하는 기능을 넣고 싶었어요.

나와 Claude의 대화:

나: "카드를 GIF로 다운로드하게 해줘!"

Claude: "gif.js 라이브러리를 사용하면 됩니다."

... 에러 발생 ...

나: "안 되는데?"

Claude: "CORS 문제네요. Worker 파일을 로컬에서 불러와야 합니다."

... 또 에러 ...

나: "아직도 안 돼!!"

3.2 해결까지의 여정

겪었던 문제들:

Web Worker 파일 로딩 문제
CORS (Cross-Origin) 에러
Canvas tainted 에러
Base64 인코딩 문제

5번의 시행착오 끝에 드디어 작동했습니다! ✨

Part 4: 진짜 지옥의 시작 - 백엔드 연동 🔥

4.1 Bkend BaaS 도입

로컬 저장소만으로는 부족했어요. 클라우드에 저장하고 싶었습니다.

"코드 없이 백엔드를 만들 수 있다"는 Bkend를 발견했어요!

나: "Bkend 연결해줘!"

Claude: "네, MCP로 연결하겠습니다."

... 프로젝트 생성 완료 ...
... 환경 생성 완료 ...
... 테이블 생성 완료 ...

나: "오 잘 되네!"

여기까지는 좋았습니다... 😌

4.2 로그인이 안 된다???

javascript
// 회원가입 시도
POST /auth/signup/password
→ 에러: "auth/invalid-password-format"

나: "비밀번호 형식이 뭐가 문제야!?"

알고 보니 4자리 PIN 번호를 비밀번호로 쓰려고 했는데, Bkend는 복잡한 비밀번호를 요구했던 거예요.

해결책: PIN을 복잡한 비밀번호로 변환!

javascript
// 1234 → "Doo@gie1234#Pwd"
pinToPassword(pin) {
    return `Doo@gie${pin}#Pwd`;
}

4.3 그래도 안 된다!?

나: "아니 로그인이 왜 안되는건데!!?"

나: "로그인 문제만 몇번째야 여기서 넘어가지를 못하잖아!!!"

나: "이거 뭐 진행이 안돼!!"

(실제로 이렇게 소리질렀습니다 ㅋㅋㅋ)

Part 5: 반전 - 문서가 틀렸다! 😱

5.1 몇 시간의 삽질 끝에...

원인을 드디어 찾았습니다!

문제의 원인:

Claude가 사용한 URL: https://api-enduser-*****.bkend.ai
실제 작동하는 URL: https://api-enduser.bkend.ai

"-*"가 문제였어요!!

Bkend MCP 문서에 잘못된 URL이 적혀있었던 겁니다 😤

5.2 테스트 결과

bash
# 잘못된 URL (실패)
curl -X POST "https://api-enduser-*****.bkend.ai/auth/signup/password"
→ 연결 실패

# 올바른 URL (성공!)
curl -X POST "https://api-enduser.bkend.ai/auth/signup/password"
→ {"success": true, "data": {"access_token": "..."}}

드디어 작동!!! 🎉🎉🎉

Jira에 버그 리포트(BK-543)도 올렸어요. 다른 사람들은 이 삽질을 안 해도 되게요!

Part 6: 최종 결과물 🏆

6.1 DOOGIE Diary 완성!

완성된 앱 스크린샷

주요 기능:

📺 DOS 스타일 레트로 UI
🔐 닉네임 + 4자리 PIN 로그인
☁️ 클라우드 저장 (Bkend MongoDB)
🎄 크리스마스 카드 만들기
🎬 GIF 다운로드
💾 자동 저장

6.2 기술 스택

내가 직접 친 코드는 0줄입니다!

Frontend: Vanilla HTML/CSS/JavaScript
Backend: Bkend BaaS
배포: Vercel
AI: Claude Code (Opus 4.5)

Part 7: 에필로그 - 배운 것들 📝

7.1 AI는 만능이 아니다

AI도 틀립니다. 특히 외부 서비스의 문서가 잘못되어 있으면 AI도 그걸 그대로 따라가요.

7.2 에러 메시지를 읽자

처음엔 무슨 말인지 몰랐던 에러도, 차근히 읽으면 힌트가 됩니다.

7.3 포기하지 말자

로그인 안 되는 것만 5시간 넘게 싸웠어요. 결국 해결했습니다! 💪

7.4 문서를 의심하자

공식 문서라고 다 맞는 게 아니에요. URL 하나 틀려서 몇 시간을 날렸습니다.

7.5 버그 리포트를 하자

내가 겪은 문제는 다른 사람도 겪을 수 있어요. 버그 티켓 생성 완료! ✅

마치며 ✨

비개발자도 AI와 함께라면 앱을 만들 수 있습니다.

단, 쉽지는 않아요 ㅋㅋㅋ

하지만 그 과정에서 배우는 것들이 있습니다:

에러를 읽는 법
문제를 분석하는 법
포기하지 않는 마음

Merry Christmas to My Special Someone! 🎄❤️

크리스마스 카드 앱, 완성!

타임라인 요약 ⏰

단계	작업	삽질 시간
1	기본 UI 구현	2시간
2	GIF 다운로드 기능	3시간
3	Bkend 연동 시도	1시간
4	로그인 안 됨 디버깅	5시간+
5	URL 문제 발견 & 해결	10분
6	최종 테스트 & 배포	30분

총 소요 시간: 약 12시간 실제 코딩: 0줄 AI와 싸운 횟수: 셀 수 없음 😂

프로젝트 링크 🔗

GitHub: https://github.com/popup-koyu/doogie-diary
Live Demo: https://doogie-diary.vercel.app

Made with 💚 (그리고 수많은 에러 메시지들)

Merry Christmas from POPUP-STUDIO

비개발자의 AI 코딩 도전기: Claude Code로 크리스마스 앱 만들기 🎄

"코드 한 줄 못 치는 내가 AI랑 싸우며 앱을 만들었다"

Part 1: 무모한 도전의 시작 🚀

1.1 나는 누구인가?

나는 개발자가 아닙니다.

HTML이 뭔지는 알지만, JavaScript는 커피 브랜드인 줄 알았던 사람이에요 ㅋㅋㅋ

그런 제가 크리스마스를 앞두고 갑자기 이런 생각을 했습니다:

"레트로 감성의 다이어리 앱을 만들어보자!"

왜냐고요? Claude Code라는 AI 코딩 어시스턴트가 있으니까요!

1.2 순진한 시작

"쉽겠지? AI한테 말만 하면 되잖아!"
- 며칠 전의 순진한 나

"AI가 다 해주겠지~" 라는 순진한 생각으로 시작한 이 프로젝트는...

예상대로 순탄하지 않았습니다 😱

Part 2: 꿈은 원대하게 - 프로젝트 기획 💭

2.1 내가 원했던 것

제가 만들고 싶었던 건 이런 거였어요:

📺 1990년대 DOS 시대 감성의 다이어리
💚 녹색 모니터 느낌의 레트로 UI
🎄 크리스마스 카드 기능 (GIF로 다운로드!)
☁️ 클라우드 저장으로 어디서든 접속

2.2 실제로 만들어진 것

DOOGIE 스크린샷

DOOGIE - 진짜로 1990년대 DOS 느낌이 나는 다이어리가 탄생했습니다! 🎉

완성된 앱의 특징:

4:3 비율의 CRT 모니터 느낌
녹색 텍스트 (#00ff00)
네오둥근모 폰트로 완벽한 레트로 감성
픽셀 아트 이미지 처리까지!

근데... 여기까지 오는 과정이 순탄치 않았어요 😅

Part 3: 첫 번째 고비 - GIF 다운로드 기능 🎬

3.1 문제 발생

크리스마스 카드를 GIF로 다운로드하는 기능을 넣고 싶었어요.

나와 Claude의 대화:

나: "카드를 GIF로 다운로드하게 해줘!"

Claude: "gif.js 라이브러리를 사용하면 됩니다."

... 에러 발생 ...

나: "안 되는데?"

Claude: "CORS 문제네요. Worker 파일을 로컬에서 불러와야 합니다."

... 또 에러 ...

나: "아직도 안 돼!!"

3.2 해결까지의 여정

겪었던 문제들:

Web Worker 파일 로딩 문제
CORS (Cross-Origin) 에러
Canvas tainted 에러
Base64 인코딩 문제

5번의 시행착오 끝에 드디어 작동했습니다! ✨

Part 4: 진짜 지옥의 시작 - 백엔드 연동 🔥

4.1 Bkend BaaS 도입

로컬 저장소만으로는 부족했어요. 클라우드에 저장하고 싶었습니다.

"코드 없이 백엔드를 만들 수 있다"는 Bkend를 발견했어요!

나: "Bkend 연결해줘!"

Claude: "네, MCP로 연결하겠습니다."

... 프로젝트 생성 완료 ...
... 환경 생성 완료 ...
... 테이블 생성 완료 ...

나: "오 잘 되네!"

여기까지는 좋았습니다... 😌

4.2 로그인이 안 된다???

javascript
// 회원가입 시도
POST /auth/signup/password
→ 에러: "auth/invalid-password-format"

나: "비밀번호 형식이 뭐가 문제야!?"

알고 보니 4자리 PIN 번호를 비밀번호로 쓰려고 했는데, Bkend는 복잡한 비밀번호를 요구했던 거예요.

해결책: PIN을 복잡한 비밀번호로 변환!

javascript
// 1234 → "Doo@gie1234#Pwd"
pinToPassword(pin) {
    return `Doo@gie${pin}#Pwd`;
}

4.3 그래도 안 된다!?

나: "아니 로그인이 왜 안되는건데!!?"

나: "로그인 문제만 몇번째야 여기서 넘어가지를 못하잖아!!!"

나: "이거 뭐 진행이 안돼!!"

(실제로 이렇게 소리질렀습니다 ㅋㅋㅋ)

Part 5: 반전 - 문서가 틀렸다! 😱

5.1 몇 시간의 삽질 끝에...

원인을 드디어 찾았습니다!

문제의 원인:

Claude가 사용한 URL: https://api-enduser-*****.bkend.ai
실제 작동하는 URL: https://api-enduser.bkend.ai

"-*"가 문제였어요!!

Bkend MCP 문서에 잘못된 URL이 적혀있었던 겁니다 😤

5.2 테스트 결과

bash
# 잘못된 URL (실패)
curl -X POST "https://api-enduser-*****.bkend.ai/auth/signup/password"
→ 연결 실패

# 올바른 URL (성공!)
curl -X POST "https://api-enduser.bkend.ai/auth/signup/password"
→ {"success": true, "data": {"access_token": "..."}}

드디어 작동!!! 🎉🎉🎉

Jira에 버그 리포트(BK-543)도 올렸어요. 다른 사람들은 이 삽질을 안 해도 되게요!

Part 6: 최종 결과물 🏆

6.1 DOOGIE Diary 완성!

완성된 앱 스크린샷

주요 기능:

📺 DOS 스타일 레트로 UI
🔐 닉네임 + 4자리 PIN 로그인
☁️ 클라우드 저장 (Bkend MongoDB)
🎄 크리스마스 카드 만들기
🎬 GIF 다운로드
💾 자동 저장

6.2 기술 스택

내가 직접 친 코드는 0줄입니다!

Frontend: Vanilla HTML/CSS/JavaScript
Backend: Bkend BaaS
배포: Vercel
AI: Claude Code (Opus 4.5)

Part 7: 에필로그 - 배운 것들 📝

7.1 AI는 만능이 아니다

AI도 틀립니다. 특히 외부 서비스의 문서가 잘못되어 있으면 AI도 그걸 그대로 따라가요.

7.2 에러 메시지를 읽자

처음엔 무슨 말인지 몰랐던 에러도, 차근히 읽으면 힌트가 됩니다.

7.3 포기하지 말자

로그인 안 되는 것만 5시간 넘게 싸웠어요. 결국 해결했습니다! 💪

7.4 문서를 의심하자

공식 문서라고 다 맞는 게 아니에요. URL 하나 틀려서 몇 시간을 날렸습니다.

7.5 버그 리포트를 하자

내가 겪은 문제는 다른 사람도 겪을 수 있어요. 버그 티켓 생성 완료! ✅

마치며 ✨

비개발자도 AI와 함께라면 앱을 만들 수 있습니다.

단, 쉽지는 않아요 ㅋㅋㅋ

하지만 그 과정에서 배우는 것들이 있습니다:

에러를 읽는 법
문제를 분석하는 법
포기하지 않는 마음

Merry Christmas to My Special Someone! 🎄❤️

크리스마스 카드 앱, 완성!

타임라인 요약 ⏰

단계	작업	삽질 시간
1	기본 UI 구현	2시간
2	GIF 다운로드 기능	3시간
3	Bkend 연동 시도	1시간
4	로그인 안 됨 디버깅	5시간+
5	URL 문제 발견 & 해결	10분
6	최종 테스트 & 배포	30분

총 소요 시간: 약 12시간 실제 코딩: 0줄 AI와 싸운 횟수: 셀 수 없음 😂

프로젝트 링크 🔗

GitHub: https://github.com/popup-koyu/doogie-diary
Live Demo: https://doogie-diary.vercel.app

Made with 💚 (그리고 수많은 에러 메시지들)

Merry Christmas from POPUP-STUDIO

비개발자의 AI 코딩 도전기: Claude Code로 크리스마스 앱 만들기 🎄

"코드 한 줄 못 치는 내가 AI랑 싸우며 앱을 만들었다"

Part 1: 무모한 도전의 시작 🚀

1.1 나는 누구인가?

나는 개발자가 아닙니다.

HTML이 뭔지는 알지만, JavaScript는 커피 브랜드인 줄 알았던 사람이에요 ㅋㅋㅋ

그런 제가 크리스마스를 앞두고 갑자기 이런 생각을 했습니다:

"레트로 감성의 다이어리 앱을 만들어보자!"

왜냐고요? Claude Code라는 AI 코딩 어시스턴트가 있으니까요!

1.2 순진한 시작

"쉽겠지? AI한테 말만 하면 되잖아!"
- 며칠 전의 순진한 나

"AI가 다 해주겠지~" 라는 순진한 생각으로 시작한 이 프로젝트는...

예상대로 순탄하지 않았습니다 😱

Part 2: 꿈은 원대하게 - 프로젝트 기획 💭

2.1 내가 원했던 것

제가 만들고 싶었던 건 이런 거였어요:

📺 1990년대 DOS 시대 감성의 다이어리
💚 녹색 모니터 느낌의 레트로 UI
🎄 크리스마스 카드 기능 (GIF로 다운로드!)
☁️ 클라우드 저장으로 어디서든 접속

2.2 실제로 만들어진 것

DOOGIE 스크린샷

DOOGIE - 진짜로 1990년대 DOS 느낌이 나는 다이어리가 탄생했습니다! 🎉

완성된 앱의 특징:

4:3 비율의 CRT 모니터 느낌
녹색 텍스트 (#00ff00)
네오둥근모 폰트로 완벽한 레트로 감성
픽셀 아트 이미지 처리까지!

근데... 여기까지 오는 과정이 순탄치 않았어요 😅

Part 3: 첫 번째 고비 - GIF 다운로드 기능 🎬

3.1 문제 발생

크리스마스 카드를 GIF로 다운로드하는 기능을 넣고 싶었어요.

나와 Claude의 대화:

나: "카드를 GIF로 다운로드하게 해줘!"

Claude: "gif.js 라이브러리를 사용하면 됩니다."

... 에러 발생 ...

나: "안 되는데?"

Claude: "CORS 문제네요. Worker 파일을 로컬에서 불러와야 합니다."

... 또 에러 ...

나: "아직도 안 돼!!"

3.2 해결까지의 여정

겪었던 문제들:

Web Worker 파일 로딩 문제
CORS (Cross-Origin) 에러
Canvas tainted 에러
Base64 인코딩 문제

5번의 시행착오 끝에 드디어 작동했습니다! ✨

Part 4: 진짜 지옥의 시작 - 백엔드 연동 🔥

4.1 Bkend BaaS 도입

로컬 저장소만으로는 부족했어요. 클라우드에 저장하고 싶었습니다.

"코드 없이 백엔드를 만들 수 있다"는 Bkend를 발견했어요!

나: "Bkend 연결해줘!"

Claude: "네, MCP로 연결하겠습니다."

... 프로젝트 생성 완료 ...
... 환경 생성 완료 ...
... 테이블 생성 완료 ...

나: "오 잘 되네!"

여기까지는 좋았습니다... 😌

4.2 로그인이 안 된다???

javascript
// 회원가입 시도
POST /auth/signup/password
→ 에러: "auth/invalid-password-format"

나: "비밀번호 형식이 뭐가 문제야!?"

알고 보니 4자리 PIN 번호를 비밀번호로 쓰려고 했는데, Bkend는 복잡한 비밀번호를 요구했던 거예요.

해결책: PIN을 복잡한 비밀번호로 변환!

javascript
// 1234 → "Doo@gie1234#Pwd"
pinToPassword(pin) {
    return `Doo@gie${pin}#Pwd`;
}

4.3 그래도 안 된다!?

나: "아니 로그인이 왜 안되는건데!!?"

나: "로그인 문제만 몇번째야 여기서 넘어가지를 못하잖아!!!"

나: "이거 뭐 진행이 안돼!!"

(실제로 이렇게 소리질렀습니다 ㅋㅋㅋ)

Part 5: 반전 - 문서가 틀렸다! 😱

5.1 몇 시간의 삽질 끝에...

원인을 드디어 찾았습니다!

문제의 원인:

Claude가 사용한 URL: https://api-enduser-*****.bkend.ai
실제 작동하는 URL: https://api-enduser.bkend.ai

"-*"가 문제였어요!!

Bkend MCP 문서에 잘못된 URL이 적혀있었던 겁니다 😤

5.2 테스트 결과

bash
# 잘못된 URL (실패)
curl -X POST "https://api-enduser-*****.bkend.ai/auth/signup/password"
→ 연결 실패

# 올바른 URL (성공!)
curl -X POST "https://api-enduser.bkend.ai/auth/signup/password"
→ {"success": true, "data": {"access_token": "..."}}

드디어 작동!!! 🎉🎉🎉

Jira에 버그 리포트(BK-543)도 올렸어요. 다른 사람들은 이 삽질을 안 해도 되게요!

Part 6: 최종 결과물 🏆

6.1 DOOGIE Diary 완성!

완성된 앱 스크린샷

주요 기능:

📺 DOS 스타일 레트로 UI
🔐 닉네임 + 4자리 PIN 로그인
☁️ 클라우드 저장 (Bkend MongoDB)
🎄 크리스마스 카드 만들기
🎬 GIF 다운로드
💾 자동 저장

6.2 기술 스택

내가 직접 친 코드는 0줄입니다!

Frontend: Vanilla HTML/CSS/JavaScript
Backend: Bkend BaaS
배포: Vercel
AI: Claude Code (Opus 4.5)

Part 7: 에필로그 - 배운 것들 📝

7.1 AI는 만능이 아니다

AI도 틀립니다. 특히 외부 서비스의 문서가 잘못되어 있으면 AI도 그걸 그대로 따라가요.

7.2 에러 메시지를 읽자

처음엔 무슨 말인지 몰랐던 에러도, 차근히 읽으면 힌트가 됩니다.

7.3 포기하지 말자

로그인 안 되는 것만 5시간 넘게 싸웠어요. 결국 해결했습니다! 💪

7.4 문서를 의심하자

공식 문서라고 다 맞는 게 아니에요. URL 하나 틀려서 몇 시간을 날렸습니다.

7.5 버그 리포트를 하자

내가 겪은 문제는 다른 사람도 겪을 수 있어요. 버그 티켓 생성 완료! ✅

마치며 ✨

비개발자도 AI와 함께라면 앱을 만들 수 있습니다.

단, 쉽지는 않아요 ㅋㅋㅋ

하지만 그 과정에서 배우는 것들이 있습니다:

에러를 읽는 법
문제를 분석하는 법
포기하지 않는 마음

Merry Christmas to My Special Someone! 🎄❤️

크리스마스 카드 앱, 완성!

타임라인 요약 ⏰

단계	작업	삽질 시간
1	기본 UI 구현	2시간
2	GIF 다운로드 기능	3시간
3	Bkend 연동 시도	1시간
4	로그인 안 됨 디버깅	5시간+
5	URL 문제 발견 & 해결	10분
6	최종 테스트 & 배포	30분

총 소요 시간: 약 12시간 실제 코딩: 0줄 AI와 싸운 횟수: 셀 수 없음 😂

프로젝트 링크 🔗

GitHub: https://github.com/popup-koyu/doogie-diary
Live Demo: https://doogie-diary.vercel.app

Made with 💚 (그리고 수많은 에러 메시지들)

Merry Christmas from POPUP-STUDIO

비개발자의 AI 코딩 도전기: Claude Code로 크리스마스 앱 만들기 🎄

"코드 한 줄 못 치는 내가 AI랑 싸우며 앱을 만들었다"

Part 1: 무모한 도전의 시작 🚀

1.1 나는 누구인가?

나는 개발자가 아닙니다.

HTML이 뭔지는 알지만, JavaScript는 커피 브랜드인 줄 알았던 사람이에요 ㅋㅋㅋ

그런 제가 크리스마스를 앞두고 갑자기 이런 생각을 했습니다:

"레트로 감성의 다이어리 앱을 만들어보자!"

왜냐고요? Claude Code라는 AI 코딩 어시스턴트가 있으니까요!

1.2 순진한 시작

"쉽겠지? AI한테 말만 하면 되잖아!"
- 며칠 전의 순진한 나

"AI가 다 해주겠지~" 라는 순진한 생각으로 시작한 이 프로젝트는...

예상대로 순탄하지 않았습니다 😱

Part 2: 꿈은 원대하게 - 프로젝트 기획 💭

2.1 내가 원했던 것

제가 만들고 싶었던 건 이런 거였어요:

📺 1990년대 DOS 시대 감성의 다이어리
💚 녹색 모니터 느낌의 레트로 UI
🎄 크리스마스 카드 기능 (GIF로 다운로드!)
☁️ 클라우드 저장으로 어디서든 접속

2.2 실제로 만들어진 것

DOOGIE 스크린샷

DOOGIE - 진짜로 1990년대 DOS 느낌이 나는 다이어리가 탄생했습니다! 🎉

완성된 앱의 특징:

4:3 비율의 CRT 모니터 느낌
녹색 텍스트 (#00ff00)
네오둥근모 폰트로 완벽한 레트로 감성
픽셀 아트 이미지 처리까지!

근데... 여기까지 오는 과정이 순탄치 않았어요 😅

Part 3: 첫 번째 고비 - GIF 다운로드 기능 🎬

3.1 문제 발생

크리스마스 카드를 GIF로 다운로드하는 기능을 넣고 싶었어요.

나와 Claude의 대화:

나: "카드를 GIF로 다운로드하게 해줘!"

Claude: "gif.js 라이브러리를 사용하면 됩니다."

... 에러 발생 ...

나: "안 되는데?"

Claude: "CORS 문제네요. Worker 파일을 로컬에서 불러와야 합니다."

... 또 에러 ...

나: "아직도 안 돼!!"

3.2 해결까지의 여정

겪었던 문제들:

Web Worker 파일 로딩 문제
CORS (Cross-Origin) 에러
Canvas tainted 에러
Base64 인코딩 문제

5번의 시행착오 끝에 드디어 작동했습니다! ✨

Part 4: 진짜 지옥의 시작 - 백엔드 연동 🔥

4.1 Bkend BaaS 도입

로컬 저장소만으로는 부족했어요. 클라우드에 저장하고 싶었습니다.

"코드 없이 백엔드를 만들 수 있다"는 Bkend를 발견했어요!

나: "Bkend 연결해줘!"

Claude: "네, MCP로 연결하겠습니다."

... 프로젝트 생성 완료 ...
... 환경 생성 완료 ...
... 테이블 생성 완료 ...

나: "오 잘 되네!"

여기까지는 좋았습니다... 😌

4.2 로그인이 안 된다???

javascript
// 회원가입 시도
POST /auth/signup/password
→ 에러: "auth/invalid-password-format"

나: "비밀번호 형식이 뭐가 문제야!?"

알고 보니 4자리 PIN 번호를 비밀번호로 쓰려고 했는데, Bkend는 복잡한 비밀번호를 요구했던 거예요.

해결책: PIN을 복잡한 비밀번호로 변환!

javascript
// 1234 → "Doo@gie1234#Pwd"
pinToPassword(pin) {
    return `Doo@gie${pin}#Pwd`;
}

4.3 그래도 안 된다!?

나: "아니 로그인이 왜 안되는건데!!?"

나: "로그인 문제만 몇번째야 여기서 넘어가지를 못하잖아!!!"

나: "이거 뭐 진행이 안돼!!"

(실제로 이렇게 소리질렀습니다 ㅋㅋㅋ)

Part 5: 반전 - 문서가 틀렸다! 😱

5.1 몇 시간의 삽질 끝에...

원인을 드디어 찾았습니다!

문제의 원인:

Claude가 사용한 URL: https://api-enduser-*****.bkend.ai
실제 작동하는 URL: https://api-enduser.bkend.ai

"-*"가 문제였어요!!

Bkend MCP 문서에 잘못된 URL이 적혀있었던 겁니다 😤

5.2 테스트 결과

bash
# 잘못된 URL (실패)
curl -X POST "https://api-enduser-*****.bkend.ai/auth/signup/password"
→ 연결 실패

# 올바른 URL (성공!)
curl -X POST "https://api-enduser.bkend.ai/auth/signup/password"
→ {"success": true, "data": {"access_token": "..."}}

드디어 작동!!! 🎉🎉🎉

Jira에 버그 리포트(BK-543)도 올렸어요. 다른 사람들은 이 삽질을 안 해도 되게요!

Part 6: 최종 결과물 🏆

6.1 DOOGIE Diary 완성!

완성된 앱 스크린샷

주요 기능:

📺 DOS 스타일 레트로 UI
🔐 닉네임 + 4자리 PIN 로그인
☁️ 클라우드 저장 (Bkend MongoDB)
🎄 크리스마스 카드 만들기
🎬 GIF 다운로드
💾 자동 저장

6.2 기술 스택

내가 직접 친 코드는 0줄입니다!

Frontend: Vanilla HTML/CSS/JavaScript
Backend: Bkend BaaS
배포: Vercel
AI: Claude Code (Opus 4.5)

Part 7: 에필로그 - 배운 것들 📝

7.1 AI는 만능이 아니다

AI도 틀립니다. 특히 외부 서비스의 문서가 잘못되어 있으면 AI도 그걸 그대로 따라가요.

7.2 에러 메시지를 읽자

처음엔 무슨 말인지 몰랐던 에러도, 차근히 읽으면 힌트가 됩니다.

7.3 포기하지 말자

로그인 안 되는 것만 5시간 넘게 싸웠어요. 결국 해결했습니다! 💪

7.4 문서를 의심하자

공식 문서라고 다 맞는 게 아니에요. URL 하나 틀려서 몇 시간을 날렸습니다.

7.5 버그 리포트를 하자

내가 겪은 문제는 다른 사람도 겪을 수 있어요. 버그 티켓 생성 완료! ✅

마치며 ✨

비개발자도 AI와 함께라면 앱을 만들 수 있습니다.

단, 쉽지는 않아요 ㅋㅋㅋ

하지만 그 과정에서 배우는 것들이 있습니다:

에러를 읽는 법
문제를 분석하는 법
포기하지 않는 마음

Merry Christmas to My Special Someone! 🎄❤️

크리스마스 카드 앱, 완성!

타임라인 요약 ⏰

단계	작업	삽질 시간
1	기본 UI 구현	2시간
2	GIF 다운로드 기능	3시간
3	Bkend 연동 시도	1시간
4	로그인 안 됨 디버깅	5시간+
5	URL 문제 발견 & 해결	10분
6	최종 테스트 & 배포	30분

총 소요 시간: 약 12시간 실제 코딩: 0줄 AI와 싸운 횟수: 셀 수 없음 😂

프로젝트 링크 🔗

GitHub: https://github.com/popup-koyu/doogie-diary
Live Demo: https://doogie-diary.vercel.app

Made with 💚 (그리고 수많은 에러 메시지들)

Merry Christmas from POPUP-STUDIO

비개발자의 AI 코딩 도전기: Claude Code로 크리스마스 앱 만들기

비개발자의 AI 코딩 도전기: Claude Code로 크리스마스 앱 만들기 🎄

Part 1: 무모한 도전의 시작 🚀

1.1 나는 누구인가?

1.2 순진한 시작

Part 2: 꿈은 원대하게 - 프로젝트 기획 💭

2.1 내가 원했던 것

2.2 실제로 만들어진 것

Part 3: 첫 번째 고비 - GIF 다운로드 기능 🎬

3.1 문제 발생

3.2 해결까지의 여정

Part 4: 진짜 지옥의 시작 - 백엔드 연동 🔥

4.1 Bkend BaaS 도입

4.2 로그인이 안 된다???

4.3 그래도 안 된다!?

Part 5: 반전 - 문서가 틀렸다! 😱

5.1 몇 시간의 삽질 끝에...

5.2 테스트 결과

Part 6: 최종 결과물 🏆

6.1 DOOGIE Diary 완성!

6.2 기술 스택

Part 7: 에필로그 - 배운 것들 📝

7.1 AI는 만능이 아니다

7.2 에러 메시지를 읽자

7.3 포기하지 말자

7.4 문서를 의심하자

7.5 버그 리포트를 하자

마치며 ✨

타임라인 요약 ⏰

프로젝트 링크 🔗

답변 2개

비개발자의 AI 코딩 도전기: Claude Code로 크리스마스 앱 만들기

비개발자의 AI 코딩 도전기: Claude Code로 크리스마스 앱 만들기 🎄

Part 1: 무모한 도전의 시작 🚀

1.1 나는 누구인가?

1.2 순진한 시작

Part 2: 꿈은 원대하게 - 프로젝트 기획 💭

2.1 내가 원했던 것

2.2 실제로 만들어진 것

Part 3: 첫 번째 고비 - GIF 다운로드 기능 🎬

3.1 문제 발생

3.2 해결까지의 여정

Part 4: 진짜 지옥의 시작 - 백엔드 연동 🔥

4.1 Bkend BaaS 도입

4.2 로그인이 안 된다???

4.3 그래도 안 된다!?

Part 5: 반전 - 문서가 틀렸다! 😱

5.1 몇 시간의 삽질 끝에...

5.2 테스트 결과

Part 6: 최종 결과물 🏆

6.1 DOOGIE Diary 완성!

6.2 기술 스택

Part 7: 에필로그 - 배운 것들 📝

7.1 AI는 만능이 아니다

7.2 에러 메시지를 읽자

7.3 포기하지 말자

7.4 문서를 의심하자

7.5 버그 리포트를 하자

마치며 ✨

타임라인 요약 ⏰

프로젝트 링크 🔗

답변 2개

비개발자의 AI 코딩 도전기: Claude Code로 크리스마스 앱 만들기

비개발자의 AI 코딩 도전기: Claude Code로 크리스마스 앱 만들기 🎄

Part 1: 무모한 도전의 시작 🚀

1.1 나는 누구인가?

1.2 순진한 시작

Part 2: 꿈은 원대하게 - 프로젝트 기획 💭

2.1 내가 원했던 것

2.2 실제로 만들어진 것

Part 3: 첫 번째 고비 - GIF 다운로드 기능 🎬

3.1 문제 발생

3.2 해결까지의 여정

Part 4: 진짜 지옥의 시작 - 백엔드 연동 🔥

4.1 Bkend BaaS 도입

4.2 로그인이 안 된다???

4.3 그래도 안 된다!?

Part 5: 반전 - 문서가 틀렸다! 😱

5.1 몇 시간의 삽질 끝에...

5.2 테스트 결과