사용 도구: Claude Code (CLI)
터미널에서 Claude Code를 실행하고, 대화하면서 전체 앱을 처음부터 끝까지 만들었습니다. 총 3단계 대화로 진행했습니다.
1단계: 초기 프롬프트 (앱 생성 + 배포)
접속하면 랜덤으로 격하게 칭찬해주는 웹앱을 만들어줘.
요구사항:
- 칭찬은 매번 접속할 때마다 랜덤으로 생성되며, 구체적이고 기분 좋은 내용으로
- 첫 접속 시에는 과하고 드라마틱한 환영 연출을 해줘
- 버튼을 누르면 새로운 랜덤 칭찬으로 교체
- 한국어/영어 언어 전환 기능
- 하단에 커스텀 섹션: 칭 찬 대상의 이름, 하는 일, 칭찬받고 싶은 점을 입력하면
LLM 기반으로 맞춤 칭찬을 생성해주는 기능
- 랜덤 칭찬은 한/영 각 50개
- 완성되면 Vercel에 배포까지 진행
이 한 번의 프롬프트로 Claude Code가 알아서:
프로젝트 폴더 생성
HTML/CSS/JS 파일 작성 (환영 화면, 칭찬 카드, 커스텀 섹션)
한국어/영어 50개씩 칭찬 데이터 생성
Vercel 서버리스 API 라우트 (LLM 연동용) 구성
vercel --prod로 배포까지 완료
2단계: API 키 제거 요청
처음에는 커스텀 칭찬에 LLM API를 연동했는데, 사용자에게 API 키를 입력하라고 하는 게 부담스러웠습니다.
API 키 입력 방식은 사용자 진입장벽이 높으니 제거하고,
대신 이름만 입력하는 방식으로 변경해줘.
- 칭찬 텍스트를 "OO님은 [칭찬]" 형태의 템플릿으로 만들어두고
- 사용자가 이름을 입력하면 해당 이름이 자동으로 들어가는 방식으로
- 모델 품질은 상관없으니 API 없이 동작하게Claude Code가 즉시:
API 폴더 삭제
50개 칭찬 템플릿을
{name}님은 ...형식으로 전환이름 입력 시 템플릿에 이름만 치환하는 방식으로 변경
입력 필드를 3개(이름/직업/칭찬포인트)에서 이름 1개로 간소화
3단계: 비주얼 효과 강화
첫 로딩 화면에 좀 더 드라마틱한 비주얼 효과를 추가해줘.이걸로 추가된 것들:
별 필드 배경 (80개 별 반짝임)
별똥별 애니메이션
화면 전환 시 화이트 플래시
컨페티 폭발 효과
펄스 링 애니메이션
결과와 배운 점
배운 점
한 번의 프롬프트로 배포까지 가능하다 - 앱 구조, 디자인, 데이터, 배포를 한 문장으로 요청했더니 Claude Code가 알아서 Vercel CLI까지 실행해줌
과감하게 방향 전환해도 된다 - LLM API 연동 → 템플릿 방식으로 바꿔달라고 했더니 불필요한 파일 삭제, 코드 리팩토링, 재배포까지 자동 처리
꿀팁: 구체적 예시를 주면 퀄리티가 올라간다 - "OO님은 [칭찬] 이런 식으로"처럼 원하는 형식을 예시로 보여주니 정확히 그 패턴으로 50개를 만들어줌
시행착오
API 키 문제: 처음에 LLM 기반 커스텀 칭찬을 넣었는데, 사용자에게 API 키를 요구하는 건 진입장벽이 너무 높았음. 서버리스 함수로 숨기는 방법도 있었지만, 결국 템플릿 방식이 가장 심플하고 빠르다는 결론
Vercel 배포 구조:
public/폴더에 정적 파일을 넣어야 Vercel이 제대로 서빙하는데, 처음에 루트에 파일을 두는 실수가 있었음
앞으로의 계획
칭찬 공유 기능 (카카오 톡/링크 공유)
매일 푸시 알림으로 칭찬 보내주기
칭찬 카드를 이미지로 저장하는 기능
