진행 방법
사용한 도구: Claude (claude.ai) — 대화만으로 React 코드를 작성하고, 바로 미리보기(Artifacts)로 확인하면서 만들었어요. 코드를 직접 짤 필요 없이, 원하는 걸 말로 계속 설명하고 다듬는 방식으로 진행했어요.
진행 흐름: 하나의 대화창에서 기능을 하나씩 추가·수정하면서 완성했어요. 매번 결과물을 바로 미리보기로 확인하고, 마음에 안 드는 부분은 바로 얘기해서 고쳐나갔어요.
완성된 주요 기능
매일 컨디션 체크인 (완전 익명 — 팀에는 인원수만 공유)
응원 메시지 5개마다 커지는 왕관 시스템
번호 뽑기 + 안경/털스타일/유니폼·양말 색까지 커스터마이징하는 곰돌이 아바타
팀원 전체가 함께하는 스트레칭 미니게임 (동작 선택 → 큰 화면으로 따라하기)
코치님 응원 메시지, 학기 전체 참여 추이 그래프
코드 예시 (응원 개수에 따라 왕관이 커지는 로직)
javascript
const CROWN_TIERS = [
{ min: 5, label: "Bronze Crown", size: 16 },
{ min: 10, label: "Silver Crown", size: 22 },
{ min: 15, label: "Gold Crown", size: 28 },
{ min: 20, label: "Platinum Crown", size: 34 },
{ min: 25, label: "THE CROWN · Final Tier", size: 42 },
];
function getCrownInfo(cheerCount) {
let tierIndex = -1;
for (let i = 0; i < CROWN_TIERS.length; i++) {
if (cheerCount >= CROWN_TIERS[i].min) tierIndex = i;
}
return {
current: tierIndex >= 0 ? CROWN_TIERS[tierIndex] : null,
next: tierIndex + 1 < CROWN_TIERS.length ? CROWN_TIERS[tierIndex + 1] : null,
};
}결과와 배운 점
배운 점
작은 요청 하나하나("풍선 효과 넣어줘", "옷 색깔도 바꾸게 해줘")가 쌓여서 생각보다 훨씬 완성도 있는 결과물이 됐어요.
미성년자 대상 앱이라 처음부터 개인정보(멘탈 컨디션, 실명)를 어떻게 다룰지 고민했어야 했다는 걸 뒤늦게 깨달았어요.
시행착오
처음엔 팀원 이름과 컨디션이 서로에게 다 보이는 구조였는데, "이거 개인정보 아니야?"라는 생각이 들어서 전부 완전 익명 구조로 바꿨어요. (체크인 여부·컨디션은 본인만 보고, 팀에는 숫자만 공유)
실명 대신 등번호를 쓰기로 바꾸는 과정에서, 예전에 자유 텍스트로 테스트하며 넣었던 닉네임("빨강")이 저장소에 남아있어서 새로 만든 기능이 안 보이는 것처럼 착각한 적이 있어요. 처음엔 캐싱 문제인 줄 알았는데, 알고 보니 제 기기에 저장된 예전 식별자 때문이었어요 — 기능을 계속 바꾸다 보면 이런 "묵은 데이터" 문제도 생길 수 있다는 걸 배웠어요.
도움이 필요한 부분
지금은 클로드 아티팩트 안에서만 돌아가는 프로토타입이라, 실제 앱스토어나 웹사이트로 배포하려면 별도 백엔드(진짜 서버)로 옮기는 작업이 필요해요. 클로드 코드로 넘겨서 이 부분을 진행해보려고 하는데, PWA나 React Native 배포 경험 있으신 분들 팁이 있으면 좋겠어요.
앞으로의 계획
클로드 코드로 넘겨서 실제 배포 가능한 형태로 발전시키기
팀원들한테 실제로 써보게 하고 피드백 받기
