← 대시보드 스킬 실습 Apify 실습

🪄 Claude superpowers 가이드

Claude Code 의 superpowers 플러그인 설치 + 핵심 스킬 사용법. 스터디 실습 과제를 마친 학생이 본인 개선 아이디어를 직접 기획하고 brainstorming → writing-plans → executing-plans 같은 정형 워크플로로 구현까지 이어갈 수 있도록 안내합니다.

📖 superpowers 란?

superpowers 는 Claude Code 에 플러그인 형태로 설치되는 "스킬(skill)" 모음입니다. 브레인스토밍 · 계획 작성 · 실행 · 검증 · 코드 리뷰처럼 자주 반복되는 작업 워크플로를 미리 정형화해 두어, Claude 가 한 단계도 건너뛰지 않고 일관된 품질로 따라가도록 돕습니다.

예를 들어 /superpowers:brainstorming 을 호출하면 Claude 는 임의로 코드를 짜는 대신 요구사항을 질문으로 풀어 설계 스펙을 먼저 정리하고, 이후 /superpowers:writing-plans 로 task 단위 실행 계획을 만들고, /superpowers:subagent-driven-development 로 각 task 를 분업해서 진행합니다.

이 가이드의 목표: 스터디에서 만든 대시보드/캘린더에 본인만의 기능(예: 댓글 키워드 분석, YouTube 통합, 새로운 통계 뷰) 을 추가하고 싶을 때, superpowers 스킬을 그대로 따라 호출해서 안정적으로 마무리하는 것.
1 Superpowers 플러그인 설치

프로젝트 폴더에서 claude 를 실행한 뒤, 프롬프트에 아래 두 줄을 차례로 입력합니다.

/plugin marketplace add obra/superpowers-marketplace
/plugin install superpowers@superpowers-marketplace

설치가 끝나면 claude 를 한 번 종료했다가 재시작하세요.

확인:

/help

출력 중 superpowers:* 로 시작하는 스킬들이 보이면 정상입니다. (brainstorming, writing-plans, executing-plans 등)

참고: 마켓플레이스 URL · 슬래시 명령은 Claude Code 버전에 따라 달라질 수 있습니다. /help 또는 공식 GitHub 에서 최신 명령을 확인하세요.
2 핵심 스킬 4개 — 바이브 코딩 레벨

개발자가 아니어도 바로 쓸 수 있는 핵심 4개입니다. 슬래시 명령을 그대로 입력하면 Claude 가 해당 흐름으로 진입합니다.

/superpowers:brainstorming
① 아이디어 정리 — 머릿속 막연한 아이디어를 Claude 와 대화하며 구체적인 설계로 만듭니다. Claude 가 질문 하나씩 던지면서 빠진 부분을 채워줍니다.
이럴 때: "이런 기능 만들고 싶은데 어떻게 시작할지 모르겠어"
예시 prompt: /superpowers:brainstorming 댓글 키워드 분석 기능을 추가하고 싶어
/superpowers:writing-plans
② 만들 순서 정하기 — 정리된 아이디어를 "1단계 → 2단계 → 3단계" 식으로 작은 작업으로 쪼개 계획서를 만듭니다. 한 번에 다 안 만들고 단계별로.
이럴 때: 아이디어는 정해졌는데 어디부터 손대야 할지 막막할 때
예시: brainstorming 직후 자동 연결됨
/superpowers:subagent-driven-development
③ 실제로 만들기 — 계획서를 작은 task 로 나눠 Claude 가 알아서 하나씩 만들고, 각 task 마다 자기 작업을 두 번 검증합니다. 비개발자가 가장 안심하고 맡길 수 있는 흐름.
이럴 때: writing-plans 로 계획서가 준비된 뒤 실제 코드를 만들 차례
대안: 더 간단한 작업이면 /superpowers:executing-plans
/superpowers:systematic-debugging
④ 안 될 때 원인 찾기 — 뭔가 작동 안 하거나 이상할 때 Claude 가 "추측" 대신 "가설 → 확인 → 수정" 순서로 원인을 차근차근 추적합니다.
이럴 때: "왜 안 되는지 모르겠는데 자꾸 엉뚱한 수정만 함" 같은 상황
예시 prompt: /superpowers:systematic-debugging 댓글 panel 이 새로고침 시 비어 보임

📌 그 외 개발자용 스킬 (test-driven-development, using-git-worktrees, requesting-code-review, writing-skills 등) 은 코드 깊게 만지기 시작할 때 차츰 활용. 비개발자가 처음부터 다 알 필요는 없습니다.

3 실습 시나리오 3개

아래는 본 프로젝트(대시보드/캘린더)에 그대로 적용해볼 수 있는 예시 흐름입니다. 각 슬래시 명령을 차례로 입력하면 됩니다.

(가) 인스타 프로필 카드 추가하기 기능 추가

"내 인스타 사진·이름·팔로워 수를 대시보드 메인에 한 칸 넣고 싶어요." — 자주 보는 화면에 내 정체성을 박는 작은 작업.
1. /superpowers:brainstorming
   "대시보드 메인 화면 맨 위에 내 인스타 프로필 카드
   (사진 + 이름 + 자기소개 + 팔로워 수) 를 한 칸 넣고 싶어.
   어떻게 만들면 좋을지 같이 정리해줘."

   → Claude 가 '데이터는 어디서 가져올까요?', '사진이 안 뜨면
     어떻게 할까요?' 같은 질문을 하나씩 던집니다. 답만 하면 됨.

2. /superpowers:writing-plans
   (합의한 내용을 '1단계 → 2단계 → 3단계' 체크리스트로 정리해줌)

3. /superpowers:subagent-driven-development
   (체크리스트를 한 줄씩 자동 실행 — 사이사이에 결과 보여줌)

(나) 다른 SNS 정보도 같이 보기 — 유튜브 통합

"유튜브 구독자 수랑 최근 영상도 대시보드에서 한 번에 보고 싶어요." — 새로운 데이터를 끌어와 카드 한 줄 더 만들기.
1. /superpowers:brainstorming
   "내 유튜브 채널 구독자 수랑 최근 영상 조회 수를 대시보드에
   같이 보이게 하고 싶어. 어떻게 연결할 수 있을까?"

   → 유튜브 API 키 받는 방법, 채널 아이디 입력받는 자리, 카드 디자인 등
     실제 단계를 사람 말로 풀어줍니다.

2. /superpowers:writing-plans
   (어떤 순서로 만들지 한 단계씩 정리)

3. /superpowers:executing-plans
   (한 단계 끝날 때마다 "계속할까요?" 물어봐서 안심 진행)

(다) 가끔 이상한 거 고치기 디버깅

"가끔 이상해요" — 원인을 모를 때. 어디가 잘못됐는지 같이 찾아주는 시나리오.
1. /superpowers:systematic-debugging
   "공구 목록 들어가면 가끔 표가 텅 비어요. 새로고침 하면 다시
   잘 보이는데, 왜 그러는지 모르겠어요."

   → Claude 가 의심 가는 원인을 하나씩 물어보고, "이 화면에서
     이런 거 한번 눌러보세요" 식으로 같이 재현해본 다음, 어디가
     문제인지 찾아내고 어떻게 고칠지 알려줍니다.

※ 다른 예시: "이벤트 응모 폼에서 제출 눌렀는데 멈춤", "사진이
  안 보임", "당첨자 목록이 두 번 들어감" 같은 모호한 증상에 좋음.
4 권장 흐름 & 더 알아보기

큰 작업은 아래 순서를 그대로 따라가는 것이 가장 안전합니다.

brainstorm → write plan → review plan → execute → verify
  • 각 단계 끝마다 본인이 직접 결과를 읽어보고, 마음에 들지 않으면 같은 스킬을 다시 호출.
  • execute 중간에 막히면 /superpowers:systematic-debugging 으로 분기.
  • 완료 직전엔 반드시 /superpowers:verification-before-completion.

공식 자료

한 줄 요약: 코드를 바로 쓰지 말고, brainstorming → plan → execute → verify 의 네 박자를 superpowers 스킬로 강제하면 작은 변경이든 큰 변경이든 일관된 품질로 마무리할 수 있습니다.