비개발자의 첫 Claude Code 프로젝트: 호흡법 웹페이지 제작기

한줄 요약

코딩 경험 없는 심리상담 전문가가 Claude Code로 내담자용 박스 브리딩 웹페이지를 하루 만에 완성하고 배포까지 성공한 이야기

타겟 독자

• 심리상담/교육 분야에서 AI 도구 활용에 관심 있는 분

• Claude Code를 처음 시작하려는 비개발자

• AI 워크스페이스 구조를 실제 프로젝트에 활용해보고 싶은 분

문제 상황

심리 상담과 교육 현장에서 내담자들에게 호흡법을 안내할 일이 많습니다. 특히 '박스 브리딩'은 네이비 씰에서도 사용하는 검증된 스트레스 관리 기법이죠. 하지만 매번 직접 시연하거나 유튜브 영상을 찾아 보여주는 것은 한계가 있었습니다.

"내담자에게 링크 하나만 보내면, 혼자서도 호흡법을 따라할 수 있는 도구가 있으면 좋겠다."

이런 생각으로 직접 웹페이지를 만들어보기로 했습니다. 문제는 제가 개발자가 아니라는 것이었죠.

해결 과정

1단계: Gemini로 첫 시도

처음에는 Gemini(제미나이)를 통해 박스 브리딩 웹앱의 기초 코드를 만들어 보았습니다. 코드는 생성되었지만, 이를 실제로 웹에 게시하고 완성도를 높이는 작업이 막막했습니다.

2단계: Claude Code로 프로젝트 이전 (워크스페이스 구조 활용)

저는 GPTers 스터디에서 제공한 AI 워크스페이스 구조를 사용하고 있습니다. 이 워크스페이스는 Johnny Decimal 번호 체계를 기반으로 폴더가 정리되어 있어서, 진행 중인 프로젝트는 10-working/ 폴더 아래에, 그 중에서도 개발 프로젝트는 11-dev/ 폴더에 배치됩니다.

Gemini에서 받은 코드를 Claude Code로 가져오면서, 이 구조 안에서 프로젝트를 시작했습니다.

첫 번째 요청:

"프로젝트 폴더에 'Box breathing 개발하기'를 만들어줘. 첨부한 이 코드를 참고하여, 웹에 게시가 가능한 형태의 박스 브리딩 체험 페이지를 생성해줘."

Claude Code가 워크스페이스 규칙을 인식하고, 10-working/11-dev/115-box-breathing/ 폴더를 생성해주었습니다. 프로젝트 번호 115가 자동으로 부여되고, 그 안에 웹페이지 파일들과 로드맵 문서까지 체계적으로 배치되었습니다.

3단계: 배포 문제 해결

배포는 놀라울 정도로 간단했습니다. 115-box-breathing 폴더 전체를 Netlify 사이트에 드래그 앤 드롭하면 끝이었거든요.

그런데 첫 시도에서 배포가 실패했습니다. 당황해서 Claude Code에 물었죠.

"Netlify 게시가 실패했어. 뭐 문제되는게 있을까?"

Claude Code가 원인을 분석해주었습니다. 외부 음원 사이트의 접근 권한 문제였어요. 자동으로 무료 공개 음원으로 교체하고 배포용 파일 구조를 정리해주어서, 다시 폴더를 드래그 앤 드롭하니 성공했습니다.

4단계: 세부 커스터마이징

배포 후에도 여러 가지 수정이 필요했습니다:

• 배경음악 변경: "배경음악을 같은 폴더의 'From Here on In - Everet Almond' 파일로 변경해줘"

• 제목 폰트 변경: "'고요한 호흡'이라는 큰 글씨만 굵고 진한 명조체로 폰트 변경도 가능할까?"

• 조직 로고 삽입: "maumflexlogo.jpg와 KCBS Mark.png를 페이지 상단과 하단에 넣어줘"

Claude Code가 인상적이었던 것은, 로고를 추가할 때 단순히 이미지만 넣는 게 아니라 로고 배경색에 맞춰 헤더와 푸터 색상까지 조정해준 점이었습니다. 로고 클릭 시 홈페이지 연결도 한 번의 요청으로 해결되었고요.

가장 인상 깊었던 순간

"워크스페이스 안에서 모든 것이 자동으로 정리된다"

스터디에서 제공한 워크스페이스 구조와 Claude Code의 조합이 정말 유용했습니다. 두 가지가 특히 인상적이었어요.

첫째, 프로젝트 폴더 자체가 배포 단위가 된다. 115-box-breathing 폴더 안에 HTML, 이미지, 음원 파일이 모두 정리되어 있어서, 이 폴더를 통째로 Netlify에 올리면 바로 웹사이트가 됩니다. 별도로 파일을 모으거나 정리할 필요가 없었어요.

둘째, 여러 파일이 동시에 자동으로 수정된다. 로고 파일을 교체하고 간격을 조정할 때, 관련된 여러 파일들이 한꺼번에 업데이트되는 것을 보았습니다. 일반적인 AI 챗봇이었다면 "이 파일 수정하세요, 저 파일도 수정하세요" 하고 안내만 해주었을 텐데, Claude Code는 실제로 모든 파일을 직접 수정해주었습니다. 수정 요청마다 바로바로 파일이 업데이트되고, 변경된 파일들이 프로젝트 폴더 안에서 자동으로 통합되니 실수할 일이 없었습니다.

결과물

박스 브리딩 웹페이지: https://6976084587e5dcce29fdc532--serenebreath.netlify.app/

완성된 페이지의 주요 기능:

• 4단계 호흡 사이클 (들숨-머금기-날숨-비우기 각 4초) 시각적 안내

• 사각형 테두리를 따라 움직이는 빛 애니메이션

• 단계별 텍스트 안내와 배경음악

• 박스 브리딩의 과학적 효과와 활용법 교육 콘텐츠

• 모바일/PC 모두 최적화된 반응형 디자인

변화와 효과

이제 내담자에게 링크 하나만 보내면 됩니다.

상담 시간에 직접 시연하지 않아도, 내담자가 집에서 혼자 박스 브리딩을 연습할 수 있게 되었습니다. 특히 불안 증상이 있는 내담자들에게 "이 링크로 들어가서 따라해보세요"라고 안내하면, 24시간 언제든 접근 가능한 호흡 가이드가 되어줍니다.

배운 점

1. 비개발자도 웹페이지를 만들 수 있다: 자연어로 요청하면 Claude Code가 코드를 대신 작성하고 파일까지 직접 수정해줍니다.

2. 문제가 생겨도 해결할 수 있다: 배포 실패 같은 기술적 문제도 "왜 안 될까?"라고 물으면 원인 분석과 해결책을 제시해줍니다.

3. 워크스페이스 구조가 작업 효율을 높여준다: 스터디에서 제공한 폴더 분류 체계 덕분에 프로젝트가 체계적으로 정리되었고, 프로젝트 폴더 자체를 배포에 활용할 수 있어서 편리했습니다.

4. 여러 AI 도구를 조합할 수 있다: Gemini로 시작해서 Claude Code로 완성하는 것처럼, 각 도구의 강점을 활용하면 됩니다. 다만 다음에는 처음부터 Claude Code로 시작해봐야겠다는 생각이 들었습니다.

앞으로의 계획

이번 경험을 바탕으로, 상담 현장에서 활용할 수 있는 다른 인터랙티브 도구들도 만들어보고 싶습니다. 점진적 근육 이완법 가이드, 마음챙김 타이머, 감정 기록 도구 등 내담자들이 상담실 밖에서도 스스로 연습할 수 있는 디지털 도구들을 구상 중입니다.

사용한 도구

작성일: 2026-01-25