[Claude Code + Gemini Canvas] AI 도구 조합의 힘을 경험하다 - 하루 만에 4페이지 호흡법 웹사이트 완성

📝 한줄 요약

Claude Code와 Gemini Canvas를 조합해서 하루 만에 3가지 호흡법을 담은 인터랙티브 웹사이트를 만들었습니다.

바쁘시면 이것만 읽어도 돼요:

사용한 도구: Claude Code(프로젝트 관리와 파일 통합) + Gemini Canvas(실시간 미리보기와 세부 조정)
핵심 발견: AI 도구마다 장점이 다르니 조합해서 쓰면 시너지가 난다
인상적인 순간: "이 코드로 통합해줘" 한 마디에 관련된 모든 파일이 자동으로 맞춰짐
막막했던 순간: 용어를 '신체적 한숨'에서 '생리적 한숨'으로 바꿔야 했는데 → "일괄 변경해줘"로 해결
결과: 호흡법 교육할 때 이제 링크 하나만 공유하면 끝

🎯 이런 분들께 도움돼요

AI로 뭔가 만들어보고 싶은데 코딩을 모르는 비개발자
Claude Code나 Gemini Canvas 같은 AI 도구를 어떻게 조합해서 쓰는지 궁금한 사람
교육용 콘텐츠나 체험형 웹페이지를 직접 만들어보고 싶은 분

😫 문제 상황 (Before)

https://www.gpters.org/llm-service/post/nondevelopers-first-claude-code-ubM8F6t7N7Bi16S

며칠 전에 클로드 코드로 '박스 브리딩'이라는 호흡법 체험 페이지를 하나 만들어뒀는데, 호흡법이 이것만 있는 게 아니잖아요. 생리적 한숨, 4-7-8 호흡 등 상황에 따라 다른 호흡법을 알려줘야 할 때도 많았습니다.

문제는 매번 "이건 이 링크, 저건 저 링크" 하면서 따로따로 안내하는 게 번거로웠다는 거예요. 한 곳에서 여러 호흡법을 선택해서 체험할 수 있으면 좋겠다고 생각했습니다.

또한 프로토타입을 만들어 올리니, 'AI 워크스페이스' 스터디장님들께서 향후 좀 더 발전시켜보는 것도 기대된다고 응원해주셔서 착수하게 되었습니다.

🛠️ 사용한 도구

Claude Code: 프로젝트 구조 설계, 파일 생성, 여러 파일 동시 수정 및 통합
Gemini Canvas: 실시간 미리보기 보면서 디테일한 텍스트/스타일 조정
모델: Claude Opus 4.5
배포: Netlify (무료)

🔧 작업 과정

큰 그림부터 잡기 — Claude Code에게 구조 설명

처음에는 어떤 페이지가 필요한지 큰 그림만 설명했습니다.

이 프로젝트를 시작해보자.
총 4개의 페이지를 만들고 싶어.
호흡에 대해 전반적으로 설명하고 안내하는 메인 페이지 하나,
그리고 생리적 한숨, 박스 브리딩, 4-7-8 호흡 이렇게 3가지 호흡법 페이지야.
박스 브리딩은 기존에 만들어둔 프로젝트를 그대로 쓸 거야.

그랬더니 Claude가 바로 코드를 작성하는 게 아니라, 먼저 세부사항을 물어보더라고요.

"로고와 음원 파일을 기존 프로젝트에서 복사할까요, 상대 경로로 참조할까요?"
"각 호흡법 페이지에서 메인으로 돌아가는 버튼이 필요한가요?"
"각 페이지별로 다른 배경 이미지를 쓸까요?"

내가 미처 생각 못 한 부분까지 먼저 질문해주니까, 나중에 "아 이것도 해줘, 저것도 해줘" 하면서 왔다 갔다 할 일이 줄었습니다.

Gemini Canvas로 디테일 다듬기 — 미리보기 보면서 직접 수정

Claude Code가 초기 페이지들을 만들어주면, 저는 그 파일을 Gemini Canvas에 가져가서 세부 조정을 했습니다.

Gemini Canvas의 장점은 코드 보기와 미리보기를 쉽게 오갈 수 있다는 거예요. "여기 문구가 어색한데?" 싶으면 바로 코드에서 고치고, 미리보기에서 어떻게 보이는지 확인하고. 이 과정이 정말 빠릅니다.

텍스트 톤앤매너 조정
색상이나 간격 같은 스타일 미세 조정
각 페이지별 콘텐츠 다듬기

다시 Claude Code로 통합 — "이 버전으로 맞춰줘"

Gemini Canvas에서 디테일을 다 다듬고 나면, 그 코드를 Claude Code에 가져와서 이렇게 말했습니다.

자, index.html을 아래의 코드로 치환해주고, 이에 맞춰 다른 페이지도 변경해줘.

그랬더니 관련된 다른 파일들까지 자동으로 맞춰주더라고요. 메인 페이지의 스타일이 바뀌면 하위 페이지들도 일관되게 업데이트해주고, 링크 연결도 확인해주고.

이게 정말 편했습니다. 원래라면 "index.html 수정 완료, 이제 page1.html 열어서 수정, page2.html 열어서 수정..." 이렇게 일일이 해야 하는데, Claude Code가 프로젝트 전체를 보면서 알아서 동기화해주니까요.

용어 일괄 변경 — 막막했던 순간이 한 마디로 해결

작업 중에 "신체적 한숨"이라는 용어를 "생리적 한숨"으로 바꿔야 하는 상황이 생겼습니다. 이미 여러 파일에 이 용어가 들어가 있어서, 일일이 찾아 바꿀 생각을 하니 막막했어요.

그래서 그냥 이렇게 말했습니다.

신체적 한숨을 생리적 한숨으로 모두 교체해줘.

끝. Claude Code가 모든 파일에서 해당 용어를 찾아서 한 번에 바꿔줬습니다. 실수로 빠뜨리는 것도 없고, 정말 편했습니다.

배포 — Netlify에 올리고 완료

모든 페이지가 완성되고 나서 Netlify에 업로드했습니다.

오케이. 최종 버전을 netlify에 올렸고 서버에 게시했어.
https://697b782d85142bebb52b54b6--serenebreath.netlify.app/
이 내용도 어딘가에 저장해줘.

어딘가에 저장해주라고 하니, 로드맵 파일에 저장해두었다고 하네요.

✅ 결과 (After)

Before vs After

항목

Before

After

호흡법 안내 방식

호흡법마다 따로 설명하거나 자료 전송

링크 하나만 공유하면 끝

호흡 연습 접근성

자료를 찾아서 열어야 함

모바일에서 언제든 바로 연습

제작 소요 시간

하루 (개발자 없이)

결과물

호흡법 통합 웹사이트 : https://697b782d85142bebb52b54b6--serenebreath.netlify.app/

메인 페이지: 호흡의 과학적 원리 설명 + 3가지 호흡법 선택 카드
생리적 한숨: 즉각적 스트레스 해소 (앤드류 후버만 교수 연구 기반)
박스 브리딩: 4단계 균형 호흡 (기존 프로젝트 통합)
4-7-8 호흡: 깊은 이완과 수면 유도 (앤드류 웨일 박사 기법)

💬 이 과정에서 배운 AI 활용 팁

효과적이었던 것

AI 도구마다 장점이 다르니 조합해서 쓰기
- Claude Code: 프로젝트 전체를 보면서 파일 관리, 여러 파일 동시 수정, 일괄 변경
- Gemini Canvas: 코드↔미리보기 빠른 전환, 실시간으로 결과 보면서 디테일 조정
- 각자 잘하는 걸 맡기니까 효율이 올라갔습니다.
여러 파일을 동시에 수정해야 할 땐 "일괄 변경해줘"
- 용어 변경, 스타일 통일 등 여러 파일에 걸친 작업은 AI에게 맡기면 실수 없이 처리됩니다.
처음부터 완벽하게 요청하려 하지 말기
- 큰 구조부터 잡고, 디테일은 나중에 다듬으면 됩니다.
- 오히려 AI가 먼저 세부사항을 물어봐주기도 해요.

이렇게 하면 안 돼요

한 도구로만 모든 걸 하려고 하기
- 처음엔 Claude Code에서 미리보기 없이 코드만 보면서 수정하려니 감이 안 왔습니다.
- Gemini Canvas로 옮겨서 미리보기 보니까 바로 해결.
AI 도구 사이에서 코드 옮기는 걸 두려워하기
- 처음엔 어색했는데, 몇 번 해보니까 금방 익숙해집니다.
- 복사-붙여넣기만 하면 되니까요.

🌍 다른 업무에 적용한다면?

이 워크플로우는 호흡법 웹사이트뿐만 아니라 다양한 상황에 적용할 수 있습니다:

교육용 인터랙티브 콘텐츠: 단계별 가이드, 체험형 학습 자료
포트폴리오 웹사이트: 여러 페이지로 구성된 개인 소개 사이트
이벤트 랜딩 페이지: 여러 섹션이 있는 행사 안내 페이지
제품 소개 페이지: 기능별로 나뉜 제품 설명 사이트

핵심은 "Claude Code로 구조 잡고 통합, Gemini Canvas로 디테일 다듬기"입니다.

🚀 앞으로의 계획

지금은 충분히 만족스러워서 당분간은 이대로 활용할 예정입니다. 호흡법 교육이나 워크숍에서 링크 하나로 안내할 수 있게 되어서 편해졌어요.

📋 재사용 가능한 프롬프트

프롬프트 1: 멀티 페이지 웹사이트 구조 기획

총 [N]개의 페이지로 구성된 웹사이트를 만들고 싶어. 메인 페이지에서는 [전체 주제]를 설명하고, 하단에 [N-1]개의 하위 페이지로 이동하는 카드 UI를 넣어줘. 하위 페이지는 [페이지1 주제], [페이지2 주제], [페이지3 주제]야. [특별 조건이 있다면 여기에]

프롬프트 2: 코드 통합 요청

자, [파일명]을 아래의 코드로 치환해주고, 이에 맞춰 다른 페이지도 변경해줘. [수정된 코드 붙여넣기]

프롬프트 3: 용어 일괄 변경

[기존 용어]를 [새 용어]로 모두 교체해줘.

🔥<24기 AI 스터디> 9/21 모집 마감 🔥