cyh-lab.com하위 사이트들을 만들면서 컴포넌트 작성은 거의 Claude한테 맡기고 있다. 처음엔 "이거 만들어줘" 식으로 던졌는데, 그렇게 하면 수정을 몇 번씩 해야 해서 오히려 느렸다. 프롬프트를 어떻게 쓰느냐에 따라 결과 품질이 꽤 달라진다는 걸 느끼면서 내 나름대로 패턴을 정리하게 됐다.
컨텍스트를 먼저 주는 게 핵심이다
아무 맥락 없이 "블로그 카드 컴포넌트 만들어줘"라고 하면 Claude는 자기가 생각하는 일반적인 형태로 만들어온다. 프로젝트 스택, 기존 스타일 방식, 어디서 쓸 건지를 먼저 알려줘야 한 번에 쓸 수 있는 결과가 나온다.
내가 쓰는 기본 구조는 이렇다.
[스택 정보]
Next.js App Router, TypeScript, Tailwind CSS
[기존 코드 또는 패턴]
(관련 컴포넌트나 타입 파일을 붙여넣거나 구조 설명)
[요청]
BlogCard 컴포넌트를 만들어줘.
props: title(string), date(string), description(string), slug(string)
클릭하면 /blog/[slug]로 이동.
스타일은 기존 카드 컴포넌트와 동일한 border, padding 사용.이렇게 주면 수정 없이 바로 쓸 수 있는 결과가 나오는 경우가 많다.
수정 요청은 diff처럼 명확하게
"좀 더 예쁘게 해줘", "느낌이 다른데 고쳐줘" 같은 요청은 결과 예측이 안 된다. Claude가 뭘 바꿔야 할지 모르니까 이것저것 건드리다가 잘 되던 부분까지 바뀌는 경우가 생긴다.
수정할 때는 어떤 부분을 왜 바꾸고 싶은지 구체적으로 적는 게 훨씬 낫다.
// 나쁜 요청
"카드 디자인 좀 더 깔끔하게 바꿔줘"
// 좋은 요청
"카드 배경색을 white에서 gray-50으로 바꾸고,
hover 시 border 색이 바뀌도록 수정해줘.
나머지 스타일은 그대로 유지."타입 먼저 정의하고 시작하기
컴포넌트를 바로 요청하기보다 타입 정의부터 같이 만드는 게 나중에 수정이 적다.
다음 데이터를 다루는 Post 타입을 정의해줘.
- slug: string
- title: string
- date: string (YYYY-MM-DD 형식)
- description: string
- tags: string[] (선택)
그리고 이 타입 기반으로 BlogCard 컴포넌트도 만들어줘.타입이 먼저 정해지면 컴포넌트 props도 명확해지고, 나중에 API 연동할 때도 타입 불일치 에러가 줄어든다.
에러 디버깅은 에러 메시지 전체를 붙여넣기
"이 코드 왜 에러 나?" 식으로 물어보면 Claude도 추측으로 답할 수밖에 없다. 에러 메시지 전체와 관련 코드를 같이 붙여넣으면 훨씬 정확한 답이 온다.
아래 에러가 나는데 원인이 뭔지 알려줘.
[에러 메시지]
TypeError: Cannot read properties of undefined (reading 'map')
at BlogList (app/blog/page.tsx:23)
[코드]
(해당 파일 코드 붙여넣기)한 번에 너무 많이 요청하지 않기
"메인 페이지 전체 레이아웃 만들고, 블로그 목록도 추가하고, 반응형도 처리해줘" 식으로 한꺼번에 요청하면 결과물이 커지고 검토하기 어려워진다. 컴포넌트 단위로 쪼개서 하나씩 만들고 확인하는 게 전체 작업 속도가 더 빠르다.
지금도 이 패턴이 완벽한 건 아니고 계속 바꾸고 있다. 프로젝트마다 컨텍스트가 다르니까 틀을 외우기보다는 "Claude가 뭘 알아야 내가 원하는 걸 만들 수 있을까"를 생각하는 게 더 실용적인 것 같다.