SESSION · 2026.04
프로덕트 디자이너를 위한 실전 가이드

AI 101

AI 원리 프롬프트 Figma MCP 토큰 Skill · MD
calculator › prompt 고양이가 박스 안에 있습니다 ↑ 자동 완성
01 · INTRO
AI 101
오늘 30분의 지도

이 세션의
목표는 딱 세 가지.

“AI라는 툴이 처음엔 너무 막연하고 무서웠거든요.
그 무드를 깨는 데 도움이 되고 싶어요.”

  • AI의 두려움을 걷어내기 — 얘는 마법이 아니라 예측 기계예요.
  • AI의 동작 원리를 한 입 크기로 이해하기 — 프롬프트가 왜 먹히고 왜 안 먹히는지.
  • Figma MCP를 쓸 때 내부에서 뭔 일이 일어나는지 감 잡기.
02 · 오해
WHAT AI IS NOT
먼저, 흔한 오해부터

AI는 자아를 가진 마법
아닙니다.

AI는 “어딘가 통제 밖에서 떠도는 무언가”가 아니라, 주어진 질문이나 짜여진 룰에 따라 정해진 답변을 주는 시스템입니다.

그리고 사실 아주 오래된 개념이에요. 1950년대 튜링 테스트 시절부터 있었죠.

당시엔 컴퓨터 성능과 데이터 저장 용량이 너무 부족해서, 컨셉만 있고 발전이 멈춰 있었어요.

Q. 강아지는 무슨 소리를 내나요? A. “멍멍” Q. 1 + 1 = ? A. 2 — Turing Test · c. 1950 OLD NEWS
03 · 타임라인
WHY SO SMART, SUDDENLY?
왜 갑자기 붐이 됐을까?

AI는 대중화됐을 뿐,
갑자기 등장한 게 아닙니다.

1950s Turing Test AI 개념 등장 but… 정체기 하드웨어 부족 ·데이터 부족 2010s Big Data · GPU SNS → 텍스트·이미지 폭증 2017 Google · Transformer 자동완성을 훨씬 빠르게 2022 OpenAI · ChatGPT Q&A로 커스텀, 대중화 여기서 붐!

빅데이터 + 컴퓨팅 파워 + 더 효율적인 예측 로직 → 이메일 자동완성이 대화형 자동완성으로 진화한 것.

04 · 정체
AI IS A BIG AUTOCOMPLETE
AI의 진짜 정체

AI는 생각하지 않아요.
확률을 계산할 뿐이에요.

“프랑스의 수도는 어디인가요?” → “파리입니다”가 가장 높은 확률의 다음 단어.

“고양이가 어디에 있나요?” → 박스 안일 확률이 가장 높으니 “박스 안에 있어요”.

전 인터넷을 다 학습했기 때문에
예측을 기막히게 잘할 뿐!
Q. “고양이가 어디에 있나요?” — 다음 단어 예측
박스 안
80%
나무 위
10%
방 안
5%
기타
5%
→ 가장 높은 확률로 답!
05 · 토큰 · 맥락
CONTEXT & TOKENS
왜 맥락이 토큰을 줄여주나요?

어딘가에 있을 거야
를 알려주세요.

A. 맥락 없음 “내 피그마 파일 어디 있어?” 전체 컴퓨터 스캔 → 토큰 폭발 B. 맥락 있음 “데스크탑 어딘가에 있을 거야” ~/Desktop/ 좁은 범위만 스캔 ✓ → 토큰 절약 · 정확도 ↑ memory.md claude.md project.md

컴퓨터에서 파일을 찾을 때도, “데스크탑 어딘가”라고 범위를 좁혀주면 예측이 훨씬 빨라지죠. AI도 똑같아요.

memory.md, claude.md 같은 문서들은 AI에게 맥락을 제공해서 예측 확률을 높여주는 역할이에요.

맥락이 좋으면 → 낭비 토큰 ↓ · 응답 정확도 ↑.
(입력 토큰은 조금 늘어도 전체 왕복 비용은 줄어드는 구조예요.)

프롬프트 엔지니어링이 유행한 이유가
바로 이거예요. 맥락 설계!
06 · 비교
CLAUDE vs CLAUDE CODE
같은 뇌, 다른 몸

둘은 같은 계산기를 쓰는
‘다른 사람’이에요.

Sonnet · Opus = 계산기
사람 A

Claude

브라우저로 대화하는 Claude. 가장 익숙한 모습. 문서 작업, 라이팅에 특화돼 있어요.

텍스트 응답
문서 · 글쓰기
터미널 제어
파일 직접 수정
MCP 외부 툴 호출
사람 B · 이번 세션!

Claude Code

터미널 기반의 AI 에이전트. 같은 뇌를 쓰지만 능력치가 훨씬 높습니다.

텍스트 응답
터미널 (까만 창) 제어
컴퓨터 내 파일 접근
JSON 생성 · 실행
MCP 중간다리 호출
07 · Figma MCP
MCP = 중간다리
피그마는 어떻게 연결되는 걸까?

MCP는 AI와 Figma를
잇는 중간다리예요.

AI AGENT Claude Code 텍스트만 출력 가능 Figma는 건드릴 수 없어요 ✗ BRIDGE MCP Model Context Protocol = 중간다리 EXTERNAL TOOL Figma 디자인 실행 · 렌더링 기계 언어 해석 가능 JSON 요청 JSON 실행

AI 모델 자체는 텍스트 자동완성 기능뿐이에요. Figma를 직접 건드릴 능력이 없습니다. 그래서 MCP가 사이에 껴서 통역사 · 배달부 역할을 해주는 것.

08 · Flow
“파란 버튼을 흰색으로 바꿔줘”
실제론 무슨 일이?

MCP 동작 원리 — 4 steps

1

명령 (Command)

사용자: “피그마에서 파란색 버튼을 흰색으로 바꿔줘”
Claude Code가 이 자연어를 받습니다.

2

번역 (Translate)

Claude Code가 요청을 JSON(기계 언어)으로 번역해 출력합니다. 텍스트 → 구조화된 명령.

3

전달 & 실행 (Dispatch)

MCP가 JSON을 Figma로 전달. Figma가 해석해서 버튼 색을 흰색으로 바꿉니다. 실제 파일이 수정되는 순간.

4

피드백 (Feedback)

“변경 완료” 메시지가 MCP를 통해 다시 Claude Code로. 사용자에게 성공했어요 응답.

09 · 용어 정리
MCP vs SKILL
헷갈리는 두 단어

MCP와 Skill은
완전히 다른 일을 해요.

외부 연결

MCP

Figma 같은 외부 툴과 직접 소통·연결해 주는 중간다리.

토큰 비용은 작지만, 반드시 외부 실행이 필요할 때만 호출됩니다.

Claude Code ↔ MCP ↔ Figma
내부 문서

Skill (skill.md)

중간다리가 아니라, AI가 먼저 읽는 텍스트 맥락 문서. 일종의 매뉴얼이에요.

⚠︎ 길어질수록 토큰을 많이 먹습니다.

/create-figma-ui-screen → skill.md
↳ “텍스트 맥락 = 피그마 MCP를 이용해줘”
  라고 적혀 있으면 그제서야 MCP 호출.

정리하자면 — Skill은 맥락이고, MCP는 행동이에요. Skill 안에서 MCP를 불러오는 구조도 자주 씁니다.

10 · 실전 팁
FOR PRODUCT DESIGNERS
오늘의 핵심 포인트

디자이너를 위한
실전 세 가지.

01

AI = 자동 완성

얘는 신도 만능도 아니에요. “엄청 똑똑한 자동 완성 기계”라는 전제로 프롬프트를 짜세요.

02

맥락 · 타게팅 · 태스크 쪼개기

MD 파일로 맥락 주고, 범위를 좁혀 타게팅하고, 큰 작업을 작은 단위로 자르세요. 이게 품질의 전부예요.

03

무리한 요구 금물

“화면 10장 넘게 그려줘” → 텍스트 과생성 → 토큰 초과 → MCP에 닿기도 전에 실패. 작게 자르기가 답.

AI는 신이 아닙니다.
하지만 맥락을 잘 주면
정말 똑똑해져요.

피그마 MCP 세팅법은 그냥 Claude에게 “피그마 MCP 연결 방법 알려줘”라고 물어보면 가장 정확해요. AI는 웹서치와 메모리, 최신 문서를 조합해 답을 예측합니다. 굳이 구글링하지 마세요.

END
THANKS — 2026
그래서 오늘 한 줄 요약

AI는 자동 완성이다.
무서워 말고
맥락을 설계하세요.

Session deck
AI 101 — for Product Designers
약 30분 · 2026
01 / 13 ·
이동   Space 다음   N 노트   T 모드 전환   F 전체화면