소개
"커스텀 플래너 사이트 만들어줘."
그리고 나온 결과물을 보고 말을 잃었어요.
크림색 배경에, 코랄, 퍼플, 파란색이 뒤섞이고, 폰트는 제각각. 어디서 본 것 같은 느낌인데, 분명히 별로인 그 느낌.
저는 그걸 "밤티" 라고 부르는데요.
AI가 만들었다는 티가 나는, 뭔가 촌스럽고 일관성 없는 결과물.
"으악 너무 밤티나ㅠㅠ"
진행 방법
사용 툴: Claude Code*
배포: Firebase Hosting
Tip:
잘못된 첫 프롬프트 ("예쁘게") → 밤티 무한루프 실화
Claude를 "우리 디자인 에이전시 주니어"라고 생각하고, 일 시키기 전에 브리프를 먼저 줬어요.
```
아래 디자인 시스템을 기준으로 커스텀 플래너 빌더 사이트를 만들어줘.
[디자인 토큰]
- 컬러: #111111(블랙), #FFFFFF(화이트), #C6FF00(포인트 형광)
- 폰트: Pretendard 하나만
- 간격: 8px 그리드 기반
[레퍼런스]
- T셔츠 커스터마이저처럼 왼쪽은 미리보기(실제 달력), 오른쪽은 컨트롤 패널
- 진짜 달력이 렌더링 되어야 함 (날짜, 요일 실제로 표시)
- 배너는 하단만
- 폰트 선택 드롭다운 + 크기 슬라이더
[포함할 섹션]
먼슬리, 위클리, 24h 플래너, 요가 루틴, 습관 트래커, 식단 기록, 메모
각 섹션은 토글로 켜고 끌 수 있게 → 탭에 즉시 반영
결과물은
결과물 링크 : https://carrot-test26060301.web.app/builder.html?v=4&tab=h24
배운점
1. "예쁘게 해줘"는 프롬프트가 아니에요.
컬러 코드, 폰트 이름, 여백 규칙을 숫자로 주면 결과가 완전히 달라져요.
레퍼런스 URL 하나가 텍스트 열 줄보다 강해요.
2. Claude를 주니어 디자이너로 생각하세요.
신입한테 "알아서 잘 해와"라고 하면 안 되듯,
디자인 시스템 브리프를 한 번 제대로 잡아주면
그다음 수정은 "이 부분만 고쳐줘"로 끝나요.
3. 섹션 토글 → 탭 즉시 반영처럼, 기능 설명도 구체적으로.
"토글 켜면 탭 생기게"가 아니라
"토글 ON → 해당 탭 표시 + 바로 그 뷰로 이동 / OFF → 탭 숨김 + 다른 탭으로 자동 이동"
이렇게 케이스를 명시하면 한 번에 나와요.
앞으로 해볼 것
- 실제 결제 연동 (카카오페이)
- 당근마켓 비즈 프로필 에 서비스 링크 게시
- 월별 테마 드롭 → 매달 새 디자인 출시로 반복 구매 유도
- 반려동물 / 아기 성장 기록 플래너 추가
발표자료도 여기 첨부 합니두
