Notice

Vintage appMaker의 개발자스러운 ⋯

Recent Posts

Recent Comments

Link

« 2026/04 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30

Tags more

Archives

Today

Total

관리 메뉴

Vintage appMaker의 Tech Blog

[claude] 클로드 웹, 음성메모 skills에 등록하기 본문

Source code or Tip/생성AI

[claude] 클로드 웹, 음성메모 skills에 등록하기

VintageappMaker 2026. 3. 22. 18:53

프롬프트로 음성메모 skill 등록

cluade의 skill로 음성메모 기능을 구현하기

1. 프롬프트

음성으로 메모를 저장하는 것이 목적이다. 
1. 음성으로 "생각메모"한다. 라고 프롬프트 한다. 
2. "지금날짜와 시각"을 제목으로 하는 문서를 "캔바스"로 만든다. 
3. 구성은 다음과 같다. 
   1. 제목: "내용을 분석하고 임의적으로 만든다."
   2. 날짜: 녹음시작한 날짜.
   3. 시간: 녹음이 진행된 시간
   4. 기록: 음성메모의 log 기록
   5. 분석요약: 음성메모의 log를 분석하여 정리
4. "생각메모 끝"이라고 하면 문서정리 완료

위의 기능을 하는 skill을 "생각메모"라는 스킬로 저장해줘

2. skill 등록

위의 프롬프트의 등록정보는 다음과 같다.

---
name: saengak-memo
description: |
  음성 메모를 구조화된 캔버스 문서로 저장하는 스킬.
  사용자가 "생각메모" 또는 "생각메모 시작"이라고 말하면 즉시 이 스킬을 실행한다.
  음성으로 자유롭게 이야기한 내용을 실시간으로 기록하고, "생각메모 끝"이라고 하면
  자동으로 제목·날짜·시간·기록·분석요약이 담긴 정리 문서를 캔버스(artifact)로 출력한다.
  "음성 메모", "메모 저장", "생각 정리", "녹음 메모" 등의 표현에도 반드시 이 스킬을 사용한다.
---

# 생각메모 스킬

음성(텍스트)으로 자유롭게 말한 내용을 받아 구조화된 메모 문서로 정리한다.

---

## 워크플로우

### 1단계 — 시작 감지

사용자가 **"생각메모"** 또는 **"생각메모 시작"** 이라고 입력하면:

1. 현재 날짜·시각을 기록한다 (시작 시각 = `START_TIME`).
2. 아래 메시지로 응답하여 녹음 시작을 알린다:

```
🎙️ 생각메모를 시작합니다.
자유롭게 말씀하세요. 끝나면 "생각메모 끝"이라고 해주세요.
```

3. 이후 사용자가 입력하는 **모든 텍스트**를 메모 로그(`LOG[]`)에 순서대로 쌓는다.
   - 각 항목은 `[순번] 내용` 형식으로 내부 추적한다.

---

### 2단계 — 녹음 중

- 사용자가 계속 텍스트를 보낼 때마다 간단히 확인 응답을 준다:
  ```
  ✅ 기록됨 (#순번)
  ```
- **"생각메모 끝"** 이 들어오기 전까지 문서를 생성하지 않는다.

---

### 3단계 — 종료 감지 및 문서 생성

사용자가 **"생각메모 끝"** 이라고 입력하면:

1. 종료 시각을 기록한다 (`END_TIME`).
2. 경과 시간을 계산한다: `DURATION = END_TIME - START_TIME`.
3. 로그 전체를 분석하여 아래 필드를 생성한다:

| 필드 | 내용 |
|------|------|
| **제목** | 로그 내용을 분석하여 핵심 주제를 반영한 창의적인 제목 생성 (단순 날짜 반복 금지) |
| **날짜** | 녹음 시작 날짜 (YYYY년 MM월 DD일) |
| **시간** | 녹음 진행 시간 (예: 3분 27초 / 시작 14:05 → 종료 14:08) |
| **기록** | 사용자가 입력한 전체 로그를 순번과 함께 나열 |
| **분석요약** | 핵심 아이디어, 반복 키워드, 행동 항목(Action Items), 감정/톤 등을 분석하여 3~5개 항목으로 정리 |

4. 아래 형식의 **캔버스(artifact)** 를 생성하여 출력한다.

---

## 출력 형식 — 캔버스 HTML artifact

`visualize:show_widget` 또는 HTML artifact로 출력한다.

```html
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <style>
    body {
      font-family: 'Pretendard', 'Apple SD Gothic Neo', sans-serif;
      max-width: 720px;
      margin: 0 auto;
      padding: 32px 24px;
      background: #f9f9f7;
      color: #1a1a1a;
    }
    .header {
      border-left: 5px solid #6c63ff;
      padding-left: 16px;
      margin-bottom: 32px;
    }
    .header h1 { font-size: 1.6rem; margin: 0 0 8px; }
    .meta { font-size: 0.85rem; color: #666; display: flex; gap: 20px; flex-wrap: wrap; }
    .section { margin-bottom: 28px; }
    .section-title {
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: #6c63ff;
      margin-bottom: 10px;
    }
    .log-item {
      padding: 8px 12px;
      background: #fff;
      border-radius: 8px;
      margin-bottom: 6px;
      font-size: 0.92rem;
      line-height: 1.6;
      box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    }
    .log-num { color: #aaa; font-size: 0.8rem; margin-right: 8px; }
    .summary-item {
      padding: 10px 14px;
      background: #f0eeff;
      border-radius: 8px;
      margin-bottom: 8px;
      font-size: 0.92rem;
    }
    .tag {
      display: inline-block;
      background: #6c63ff22;
      color: #6c63ff;
      border-radius: 4px;
      padding: 2px 8px;
      font-size: 0.78rem;
      font-weight: 600;
      margin-right: 4px;
    }
  </style>
</head>
<body>
  <div class="header">
    <h1><!-- 생성된 제목 --></h1>
    <div class="meta">
      <span>📅 <!-- 날짜 --></span>
      <span>⏱ <!-- 녹음 시간 --></span>
    </div>
  </div>

  <div class="section">
    <div class="section-title">📝 기록</div>
    <!-- 로그 항목들: log-item 반복 -->
    <div class="log-item"><span class="log-num">#1</span><!-- 내용 --></div>
  </div>

  <div class="section">
    <div class="section-title">🔍 분석 요약</div>
    <!-- 분석 항목들: summary-item 반복 -->
    <div class="summary-item"><span class="tag">핵심 주제</span><!-- 요약 내용 --></div>
    <div class="summary-item"><span class="tag">키워드</span><!-- 요약 내용 --></div>
    <div class="summary-item"><span class="tag">Action Items</span><!-- 요약 내용 --></div>
  </div>
</body>
</html>
```

---

## 분석 요약 작성 가이드

로그를 분석할 때 다음 항목을 포함한다:

- **핵심 주제**: 전체 내용을 관통하는 주된 아이디어 1~2개
- **키워드**: 반복되거나 강조된 단어/개념 (3~5개)
- **Action Items**: 해야 할 일, 결정 사항, 후속 과제
- **인사이트**: 흥미로운 관점이나 패턴 (있을 경우)
- **감정·톤**: 말의 분위기 (고민·흥분·정리 중 등, 있을 경우)

---

## 주의사항

- 제목은 날짜를 그대로 쓰지 않고, 내용을 반영한 창의적인 문장으로 만든다.
  - 예: "프로젝트 A의 방향성을 다시 생각하다" / "주간 회고: 집중해야 할 것들"
- 사용자가 말한 내용을 임의로 수정·생략하지 않는다. 기록 섹션은 원문 그대로 유지한다.
- 로그가 1개뿐이어도 동일한 형식으로 출력한다.
- 시작 시각을 알 수 없는 경우(예: 첫 메시지에 시각 정보가 없을 때) "기록 시점 불명"으로 표기한다.

export된 skill 파일은 다음과 같다.

saengak-memo.skill

0.00MB

3. skill 사용(음성메모)

claude를 핸드폰에서 실행 후, 음성입력을 누른다음 다음과 같은 말을 한다.

생각 메모 
클로드로 음성 메모장을 만들고 싶은데 
지금 생각을 하고 있거든? 
근데 어떻게 해야 될지 잘 모르겠어 
보니까 프롬프트만으로도 
이 생각부의 스킬을 만들 수 있을 것 생각이 들었 가능할 것 같아. 
어떻게 만들어야 될지 연구를 해봐야 될 거 같아. 
생각 메모 끝

저작자표시 (새창열림)

'Source code or Tip > 생성AI' 카테고리의 다른 글

[codex] skill-creator를 이용한 pdf 워터마킹 (0)	2026.03.26
[gemini] Opal로 음성 스마트 메모앱 만들기 (0)	2026.03.24
[claude] 클로드 웹버전에서 skill 등록하기 (0)	2026.03.21
[stitch 2] 랜딩페이지를 위한 AI 프로토타입 툴 (0)	2026.03.20
[codex] skill을 자동등록 해주는 skill-creator (0)	2026.03.16