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

- 작성자: [상냥한 산책가](https://community.clauders.ai/member/imported-member-P3aGHvP0Aj)
- 공간: [바이브 코딩](https://community.clauders.ai/claude-code)
- 게시: 2026-01-25
- 연재: [Claude Code 설치부터 첫 페이지까지](https://community.clauders.ai/series/claude-code-first-project) 2/2편
- 태그: #AI워크스페이스
- 주소: https://community.clauders.ai/claude-code/post/%EB%B9%84%EA%B0%9C%EB%B0%9C%EC%9E%90%EC%9D%98-%EC%B2%AB-claude-code-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%ED%98%B8%ED%9D%A1%EB%B2%95-%EC%9B%B9%ED%8E%98%EC%9D%B4%EC%A7%80-%EC%A0%9C%EC%9E%91%EA%B8%B0-bfd4423c-56e9-8058-8f82-d653cbe30e69

---

### **1단계: Gemini로 첫 시도**

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

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

저는 Clauders 스터디에서 제공한 **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/](https://6976084587e5dcce29fdc532--serenebreath.netlify.app/)

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

- 4단계 호흡 사이클 (들숨-머금기-날숨-비우기 각 4초) 시각적 안내
- 사각형 테두리를 따라 움직이는 빛 애니메이션
- 단계별 텍스트 안내와 배경음악
- 박스 브리딩의 과학적 효과와 활용법 교육 콘텐츠
- 모바일/PC 모두 최적화된 반응형 디자인

## **변화와 효과**

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

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

## **배운 점**

1. **비개발자도 웹페이지를 만들 수 있다**: 자연어로 요청하면 Claude Code가 코드를 대신 작성하고 파일까지 직접 수정해줍니다.
2. **문제가 생겨도 해결할 수 있다**: 배포 실패 같은 기술적 문제도 "왜 안 될까?"라고 물으면 원인 분석과 해결책을 제시해줍니다.
3. **워크스페이스 구조가 작업 효율을 높여준다**: 스터디에서 제공한 폴더 분류 체계 덕분에 프로젝트가 체계적으로 정리되었고, 프로젝트 폴더 자체를 배포에 활용할 수 있어서 편리했습니다.
4. **여러 AI 도구를 조합할 수 있다**: Gemini로 시작해서 Claude Code로 완성하는 것처럼, 각 도구의 강점을 활용하면 됩니다. 다만 다음에는 처음부터 Claude Code로 시작해봐야겠다는 생각이 들었습니다.

## **앞으로의 계획**

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

## **사용한 도구**

도구

용도

Claude Code

웹페이지 제작 및 수정

Gemini

초기 코드 생성

AI 워크스페이스 (Clauders)

프로젝트 폴더 구조 및 분류 체계

Netlify

무료 웹 배포 (폴더 드래그 앤 드롭)

Tailwind CSS

웹페이지 스타일링 (Claude Code가 적용)

**작성일**: 2026-01-25