Claude Code 프롬프트 실험 (1/4) — 개입 0, 그냥 맡기면 어떻게 될까?

이 시리즈는

Claude Code에 같은 앱을 만들되, 프롬프트를 어떻게 넣느냐에 따라 결과가 얼마나 달라지는지를 실험한 기록입니다.

만들 앱은 TODO 앱입니다. 단순한 할 일 목록이 아니라, "상업용 수준의 디자인과 기능"을 요구했습니다.

전제 조건 — 내 Claude Code는 "기본값"이 아닙니다

실험에 앞서 한 가지 밝혀둘 것이 있습니다.

저는 Claude Code를 설치한 직후 바로 테스트한 것이 아닙니다. 글로벌 설정 파일(.claude)에 다음과 같은 규칙들을 미리 세팅해둔 상태입니다:

• TDD(테스트 주도 개발) 방식으로 코드를 작성하도록 설정

• 클린 아키텍처를 기본 구조로 사용하도록 설정

• 자기검증(Self-Reflection) — 구현 후 스스로 점검하는 과정을 거치도록 설정

즉, 아무 설정 없이 Claude Code를 바로 사용하는 것보다는 기본적인 코드 품질이 높게 나올 수 있는 환경입니다. 설치 직후 아무 세팅 없이 같은 프롬프트를 넣으면 이보다 결과가 낮을 가능성이 높습니다.

이번 테스트에서는 이 세팅 중 자기검증만 명시적으로 꺼두었습니다. TDD와 클린 아키텍처 설정은 그대로 둔 채, "검증 없이 만들기만 하면 어떤 결과가 나오는가"를 보기 위함입니다.

실험 조건 정리

• Claude Code 기본 세팅: TDD + 클린 아키텍처 (활성) / 자기검증 (명시적 비활성)

• 스킬 에이전트: 없음

• 사용자 중간 개입: 없음

• 사용자가 입력한 프롬프트: 2개

• Claude Code가 리서치부터 구현까지 알아서 진행

프롬프트 #1 — 리서치와 계획을 맡기다

입력한 프롬프트는 이겁니다:

간단한 todo프로그램을 만들고 싶어. 대신 디자인과 기능은 상업용 프로그램의 퀄리티로 만들고 싶어. 구현에 필요한 리서치를 자세하게 하고 그걸 토대로 구현 계획을 세워줘. 대신 글로벌폴더의 .claude에 명시한 자기검증 과정은 제외를 해줘.

이 프롬프트 하나로 Claude Code가 한 일은 다음과 같습니다.

에이전트 2개를 동시에 띄워서 리서치

Claude Code는 스스로 판단해서 2개의 리서치 에이전트를 병렬로 실행했습니다.

에이전트 A — 상용 TODO 앱 분석 Todoist, TickTick, Things 3, Microsoft To Do 같은 실제 상용 앱들을 웹에서 조사했습니다. "튜토리얼용 TODO"와 "상용 TODO"의 차이가 뭔지, 어떤 UX 패턴이 공통적으로 쓰이는지를 분석했습니다.

에이전트 B — 기술 스택 조사 React, Vue, Svelte를 비교하고, 애니메이션 라이브러리, 드래그앤드롭 라이브러리, CSS 프레임워크 등을 조사해서 기술 스택을 추천했습니다.

리서치 결과를 바탕으로 계획 수립

리서치가 끝나자 Claude Code는 다음을 정리했습니다:

• 기술 스택: React 19 + TypeScript + Tailwind CSS v4 + shadcn/ui + Zustand + Motion + dnd-kit

• 기능 범위: 태스크 CRUD, 완료 애니메이션, 우선순위, 마감일, 프로젝트 분류, 드래그 정렬, 인라인 편집, 검색, 다크 모드 등

• 구현 순서: 8단계 (초기화 → 데이터 → 레이아웃 → CRUD → 프로젝트 → 애니메이션 → 프리미엄 UX → 폴리싱)

여기까지 걸린 시간: 약 3분

프롬프트 #2 — "진행해줘"

두 번째 프롬프트는 이게 전부입니다:

진행해줘.

이 한 마디로 Claude Code가 실제로 수행한 작업:

1. 프로젝트 초기화 — Vite로 React + TypeScript 프로젝트 생성, 의존성 일괄 설치

2. 테마 시스템 — 라이트/다크 모드, 우선순위별 색상, 커스텀 애니메이션 정의

3. 데이터 레이어 — Task(14개 필드), Project(6개 필드) 타입 정의, Zustand 스토어 2개, localStorage 연동

4. UI 컴포넌트 17개 파일 — 사이드바, 헤더, 태스크 목록, 체크박스(SVG 애니메이션), 인라인 편집, 검색, 빈 상태 화면 등

5. 빌드 검증 — TypeScript 타입 체크 통과, 프로덕션 빌드 성공, 개발 서버 정상 실행

여기까지 걸린 시간: 약 7분

프롬프트 2개, 총 소요시간 약 10분.

첫 번째 결과 — 프롬프트 2개만으로 나온 것

ALT

여러 개의 버튼이 있는 검은색 화면

잘된 점

• 전체적인 완성도가 나쁘지 않음. 사이드바, 검색바, 다크 모드 등 상용 앱의 기본 구조를 갖추고 있음

• 프로젝트 추가 기능이 동작함

• 검색 기능(Ctrl+K)이 정상 동작함

• 스마트 뷰(Inbox, Today, Upcoming, Completed) 분류가 구현되어 있음

아쉬운 점

• 할 일 등록 시 날짜 선택 부분에서 버그가 바로 발견됨

• 단축키 N(새 태스크 추가)이 동작하지 않음 — 우측 상단에 "N new"라고 표시만 되어 있고 실제로는 반응 없음

• 반응 속도가 다소 느림

자기검증 없이 만들었기 때문에, "구현은 되어 있지만 검증은 안 된" 상태입니다. 겉으로 보기엔 괜찮지만 실제로 만져보면 빈틈이 보입니다.

추가 프롬프트 — "사용자 관점에서 개선해줘"

아쉬운 점이 있어서 프롬프트를 하나 더 넣었습니다:

지금 간단하게 몇가지 문제점이 있어. 우선 사용자의 관점에서 어떻게 하면 더욱 편하게 사용할지에 대해서 검색을 하고 UI/UX를 변경해줘.

Claude Code가 다시 리서치부터 시작

이번에도 에이전트 2개를 병렬로 띄웠습니다.

에이전트 A — 사용자 관점 UX 리서치 (태스크 입력 마찰 최소화, 완료 피드백 패턴, 접근성 기준 등) 에이전트 B — 현재 앱의 문제점 분석 (N키 미구현, 호버 의존 메뉴, 터치 타겟 부족 등 발견)

리서치 결과를 바탕으로 10가지 개선

Claude Code가 스스로 문제를 찾고 해결한 내역입니다:

8개 파일 수정/생성, 소요시간: 약 7분

Before vs After

Before — 프롬프트 2개만으로 만든 결과

• 각 태스크에 제목만 표시됨. 우선순위는 체크박스 색상으로만 구분 (빨간 원 = 긴급)

• 속성(우선순위, 날짜)을 보거나 바꾸려면 메뉴를 열어야 함

• 하단 "Add task"가 점선 테두리의 텍스트로만 존재

• 우측 상단에 단축키 힌트가 있지만 N키는 실제로 동작하지 않음

After — UX 개선 프롬프트 추가 후

ALT

여러 개의 버튼이 있는 검은색 화면

• 각 태스크 아래에 우선순위 뱃지(Urgent, Medium)와 Add date 라벨이 인라인으로 바로 보임

• 태스크 추가 폼이 개선됨 — "Add a task..." placeholder, 우선순위/날짜 버튼이 폼 안에 바로 표시

• 검색바에 Ctrl+K 힌트가 뱃지 형태로 표시됨

• 우측 상단이 정리됨 (테마 전환 아이콘으로 단순화)

달라진 것 요약

이 테스트에서 알 수 있는 것

1. Claude Code에 기본 세팅(TDD, 클린 아키텍처)이 되어 있으면, 프롬프트 2개만으로도 동작하는 앱은 나옵니다.

2. 하지만 자기검증 없이 만든 결과물은 겉보기엔 괜찮아도 실사용 시 빈틈이 드러납니다. 표시만 되고 동작하지 않는 단축키, 날짜 선택 버그 등이 대표적입니다.

3. "사용자 관점에서 개선해줘"라는 추가 프롬프트 한 줄로 눈에 띄는 UX 개선이 가능합니다. 하지만 이건 결국 사용자가 문제를 인지하고 추가 지시를 넣어야 한다는 뜻이기도 합니다.

4. 만약 자기검증이 처음부터 켜져 있었다면, 이런 추가 프롬프트 없이도 이 정도 품질이 나왔을까요?

다음 글 예고

다음 글(2/4)에서는 같은 TODO 앱을 만들되, 이번에는 자기검증을 끄지 않고 활성화된 상태로 진행합니다. 처음부터 스스로 점검하고 사용자 피드백을 추가하면 완성도 높은 결과가 나올까요?