Claude Code 플러그인: 코딩 결과 미리보기로 "딱 원하는" 화면 만들기!

Claude 플러그인 html-plan으로 똑똑하게 결과물 만들기!

Claude한테 뭔가 만들어달라고 했는데, 설명만 계속 길어지고 화면이 어떻게 나올지 감이 안 잡혀서 답답했던 경험 있지? "일단 만들어봐!" 하고 넘겼는데, 막상 결과물을 보면 "아, 여기 버튼이 있었으면 좋았을 텐데..." 싶어서 처음부터 다시 해야 했던 적도 있을 거야.

이럴 때 html-plan이라는 Claude 플러그인을 쓰면 훨씬 편해! 이건 마치 미리 화면을 보여주고, 내가 원하는 걸 선택하고, 빠진 부분을 채워 넣어서 결과물을 만드는 방식이야.

html-plan, 어떻게 설치하고 사용할까?

1. 설치:

   • Claude 코드에서 딱 두 줄만 복사해서 터미널에 붙여넣으면 끝!
   • pip install html-plan
   • pip install anthropic

2. 사용:

   • Claude한테 /html-plan 이라고 입력하고, 그 뒤에 만들고 싶은 기능을 써.
   • 예시: "이메일을 원하는 시간에 보내고 싶어. 보내기 전에 취소할 수 있으면 좋겠고, 실패하면 알려줘. 바로 실행하지 말고. 화면이랑 내가 선택할 질문들도 보여줘. 설명이랑 질문은 한국어로 해줘."

html-plan이 만들어주는 결과물은?

Claude가 너의 요청을 받으면 HTML 파일 형태로 계획을 만들어줘. 이걸 브라우저에서 열어보면, 마치 실제 화면처럼 미리 볼 수 있어!

• 예시: "이메일 예약 발송 계획" 이라는 제목의 문서가 나올 거야. 이건 실제 이메일을 보내는 화면이 아니라, 예약 발송 기능이 어떻게 작동할지 보여주는 계획 문서야.
• 화면 구성이나 질문들이 프로젝트마다 다를 수 있어.
• 이 계획 문서에서 내가 원하는 대로 수정하고, 선택하고, 피드백을 추가할 수 있어.

실제 사용 예시: 이메일 예약 발송 기능

밤에 일 끝났는데 바로 이메일 보내기 좀 그렇잖아? 다음 날 아침에 상대방한테 도착했으면 좋겠다고 생각할 때, "예약 발송 기능 추가해줘!" 라고 말할 수 있지.

근데 실제로 쓰려면 더 결정해야 할 게 많잖아?

• 보내기 전에 취소할 수 있나?
• 전송 실패하면 알려주나?

이런 것들을 html-plan으로 미리 확인하고 결정할 수 있어.

화면 미리 보기 & 선택:

• "예약 발송" 버튼이 어디에 있고, 이걸 누르면 어떤 옵션이 나오는지 화면으로 볼 수 있어.
• 예약 발송 버튼을 누르면 "예약 발송", "취소", "실패 알림" 같은 옵션들이 나오는 걸 볼 수 있지.
• 질문 선택: Claude가 계획을 만들기 위해 던지는 질문들에 답할 수 있어.
  • "한 사람이 몇 개의 예약을 할 수 있나요?" (50개, 500개, 제한 없음)
  • "전송 실패 시 어떻게 알림을 받을 건가요?" (앱 내 알림, 앱+이메일 알림, 알림 없음)
• 내가 선택한 옵션에 따라 계획 문서가 어떻게 바뀌는지 바로 확인할 수 있어.
• 추가하고 싶은 의견도 남길 수 있어. (예: "50, 100, 제한 없음 세 가지 옵션으로 만들어줘.")

Claude한테 보낼 때 이렇게 해봐!

1. html-plan으로 만든 HTML 파일 내용을 복사해.
2. 이걸 Claude한테 붙여넣고, "이 내용 반영해서 수정해줘." 라고 말해봐.
3. "취소 확인 팝업이 뜨면 화면이 어떻게 바뀌는지 먼저 보여줘." 와 같이 구체적으로 요청할 수도 있어.

html-plan, 왜 이렇게 좋을까?

• 미리 화면을 보고 결정: 실제로 구현되기 전에 어떻게 보일지 알 수 있어서 잘못된 방향으로 가는 걸 막아줘.
• 선택과 결정: 내가 원하는 대로 옵션을 선택하고, 빠진 부분을 채워 넣으면서 계획을 구체화할 수 있어.
• 명확한 소통: Claude와 더 정확하게 소통하고, 내가 원하는 결과물을 얻을 확률이 높아져.

GitHub에 있는 다른 유용한 플러그인들도 있어!

• claude-plugin-community: 많은 사람들이 사용하는 스킬과 플러그인들이 모여있는 곳이야.
• eli5: 복잡한 내용을 쉽게 설명해주는 플러그인도 있어.

앞으로 Claude한테 뭔가 만들라고 할 때…

"먼저 화면이랑 내가 봐야 할 것들을 보여줘." 라고 말해보자. 처음부터 완벽하게 설명하기 어렵잖아. 일단 내용을 보고, 마음에 드는 옵션을 선택하고, 부족한 부분은 그때그때 이야기하면서 만들어가는 거지.

이런 방식은 Anthropic 직원들이 GitHub에 올려놓은 플러그인들의 기본 원리라고 할 수 있어. 내용을 보고, 계획을 세울 때 수정할 수 있도록 만든 스킬인 셈이지.

너는 어떤 기능을 만들고 싶어? html-plan으로 한번 시도해봐!