비개발자가 처음 써보는 Figma 와이어프레임 기초 입문

ChatGPT 기획서 → ✦ Figma 와이어프레임 (지금 여기) → 바이브 코딩 앱 생성

비개발자가 처음 써보는
Figma 와이어프레임 기초 입문

ChatGPT 기획서를 실제 앱 화면으로 바꾸는 가장 쉬운 방법
디자인 감각 필요 없음 · 코딩 필요 없음 · 겁먹을 필요 없음

📅 2026년 5월 기준 ⏱ 약 9분 읽기 🎯 비개발자 입문용

AI로 앱을 만들어보고 싶은데, 막상 시작하려니 이런 생각이 드지 않으셨나요. "ChatGPT로 기획서는 만들었어. 근데 그 다음에 뭘 해야 하지?"

많은 분들이 바로 이 지점에서 막힙니다. 기획서와 AI 코딩 도구 사이에는 하나의 다리가 필요합니다. 그것이 와이어프레임이고, 가장 쉽게 시작할 수 있는 도구가 Figma입니다.

이 글은 Figma 사용법 강의가 아닙니다. "기획한 아이디어를 화면 구조로 정리해서 AI에게 넘기는 흐름"을 이해하기 위한 가장 쉬운 안내입니다. 디자인 감각도, 코딩 지식도 필요 없습니다.

🤔 01. 왜 비개발자도 갑자기 Figma를 쓰게 됐을까

몇 년 전만 해도 Figma는 디자이너의 전용 도구였습니다. 비개발자가 쓸 이유가 거의 없었죠. 그런데 2025~2026년 사이, 상황이 달라졌습니다.

바이브 코딩 도구들(Lovable, Cursor, Claude Code 등)이 등장하면서 "AI에게 화면 구조를 설명하면 앱이 만들어지는" 흐름이 실제로 가능해졌습니다. 그리고 AI에게 잘 설명하려면 — 화면이 어떻게 생겼는지를 먼저 정리해야 한다는 것을 사람들이 깨닫기 시작했습니다.

"Figma는 디자인 툴이 아니라
생각을 화면으로 정리하는 도구입니다"

비개발자에게 필요한 건 디자인 실력이 아닌 구조 정리 능력입니다

즉, 지금 Figma를 배우는 이유는 예쁜 화면을 만들기 위해서가 아닙니다. AI 앱 만들기 전에 내 아이디어를 화면으로 정리해두기 위해서입니다.

🌐 AI 시대에 달라진 것: 예전에는 화면 설계가 디자이너와 개발자의 영역이었습니다. 하지만 지금은 Lovable·Cursor·Claude Code 같은 AI 코딩 도구에게 화면 구조를 설명하기 위해, 비개발자도 최소한의 화면 정리를 직접 하기 시작했습니다. Figma는 그 최소한의 도구입니다. AI 앱 프로토타입을 빠르게 만들고 싶은 분들에게 와이어프레임은 이제 선택이 아닌 출발점입니다.

ChatGPT 기획서 → Figma 와이어프레임 → AI 바이브 코딩 앱 완성까지의 3단계 흐름 개념도

📐 02. 와이어프레임이란? — 건물로 비유하면 이해가 쉽다

와이어프레임(wireframe)이라는 단어가 낯설게 느껴진다면, 이렇게 생각해보세요.

🏚 와이어프레임 없는 경우

머릿속 아이디어를 말로만 설명 → 개발자나 AI가 제각각 해석 → 원하는 것과 다른 결과물

🏗 와이어프레임 있는 경우

건물 설계도처럼 화면 뼈대를 먼저 그림 → 누가 봐도 같은 화면을 머릿속에 그림 → 일관된 결과물

와이어프레임은 예쁜 디자인이 아닙니다. 색도 없고, 실제 이미지도 없습니다. 회색 박스와 선, 텍스트만으로 "이 화면에 어떤 요소가 어디에 있는지"를 보여주는 뼈대 스케치입니다.

📦

박스

이미지나 콘텐츠가 들어갈 자리를 표시합니다. 실제 내용은 나중에 채웁니다.

📝

텍스트

제목, 버튼 이름, 메뉴 항목 등 화면에 들어갈 글자를 표시합니다.

🔲

버튼

사용자가 클릭할 수 있는 요소를 네모 박스 + 텍스트로 단순하게 표현합니다.

➡️

화살표

이 버튼을 누르면 어떤 화면으로 이동하는지 흐름을 연결합니다.

💡 이것이 핵심입니다: 와이어프레임을 잘 그리는 것이 목표가 아닙니다. "내가 만들고 싶은 화면을 눈으로 볼 수 있게 정리하는 것"이 목표입니다. 회색 박스 몇 개여도 충분합니다.

🤖 03. "AI에게 앱 만들어줘"가 자꾸 실패하는 이유

Lovable이나 Cursor 같은 AI 코딩 도구에 이렇게 입력해본 적 있으신가요?

❌ 자주 하는 실패 패턴

"영어 회화 앱 만들어줘"
// AI: ??? 어떤 화면이 필요한지, 어떤 기능이 있어야 하는지 모름
// 결과: AI가 임의로 상상해서 만든 화면 → 원하던 것과 전혀 다름

왜 이런 일이 생길까요? AI는 당신의 머릿속에 있는 화면을 볼 수 없기 때문입니다. AI에게 좋은 결과를 받으려면, 화면 구조를 먼저 정리해서 설명해야 합니다.

와이어프레임은 바로 그 설명의 도구가 됩니다. 화면을 직접 만들지 않더라도 와이어프레임을 AI에게 보여주거나, 와이어프레임을 글로 설명하면 AI 결과물의 품질이 크게 달라집니다.

ChatGPT
기획서

→

Figma
와이어프레임

→

AI에게
구조 설명

→

앱
완성

💜 핵심 연결 고리: ChatGPT로 만든 기획서에 "어떤 화면이 필요한지"가 있다면, 그것을 Figma에서 눈으로 볼 수 있게 그리고, 그 구조를 AI 코딩 도구에게 설명하는 것이 이 흐름의 전부입니다.

🌟 04. 왜 다들 Figma를 쓰는 걸까?

와이어프레임을 그리는 도구는 여러 개가 있습니다. 그런데 왜 유독 Figma가 많이 쓰일까요? 업계 표준이니까, 같은 이유보다 비개발자 입장에서 실제로 편한 이유들이 있습니다.

🆓

무료로 시작 가능

개인 혼자 연습하고 와이어프레임 만드는 용도라면 무료 플랜(Starter)으로 충분합니다.

🌐

설치 없이 브라우저로

figma.com에 접속하면 바로 사용 가능합니다. 프로그램 설치 없이 크롬 등에서 즉시 실행됩니다.

🔗

링크 하나로 공유

만든 화면을 링크로 공유할 수 있습니다. AI 도구나 팀원에게 "이 링크 참고해서 만들어줘"라고 전달하기 쉽습니다.

📱

모바일 화면 그리기 쉬움

스마트폰 화면 크기의 프레임을 미리 제공합니다. 앱 화면 구조를 잡는 데 최적화되어 있습니다.

🤖

AI 도구와 연결 용이

Cursor, Claude, Lovable 등에게 Figma 캡처나 링크를 전달하면 화면 구조 참고가 쉬워집니다.

📚

무료 템플릿 1,000개+

커뮤니티에서 제공하는 무료 와이어프레임 템플릿을 가져다 쓸 수 있어, 처음부터 만들지 않아도 됩니다.

⚠️ 참고: 2026년 기준 Figma 무료 플랜(Starter)은 개인 연습·와이어프레임 작업에 충분합니다. 팀 단위 협업이나 파일이 많아지면 유료 플랜이 필요합니다. 학생이나 교사는 학교 이메일로 인증하면 Professional 플랜을 1년 무료로 사용할 수 있습니다.

Figma 인터페이스 기본 구성 — 레이어 패널, 캔버스, 속성 패널 위치 안내

🎯 05. 이것만 알면 일단 충분합니다 — 5가지

Figma를 처음 열면 메뉴가 많아서 당황할 수 있습니다. 하지만 걱정하지 않아도 됩니다. 와이어프레임을 만드는 데 필요한 건 딱 5가지뿐이고, 나머지는 지금 당장 몰라도 됩니다.

💚 처음 Figma를 열었을 때 느끼는 막막함은 누구나 똑같습니다.
아래 5가지 중 하나라도 써봤다면 오늘 와이어프레임을 완성할 수 있습니다. 어렵지 않습니다. 정말로요.

F

프레임 — 화면 한 장 만들기

스케치북에 종이 한 장 꺼내는 것.
F 키 하나만 누르면 됩니다. 대부분의 초보자는 여기서 시작합니다. iPhone 16, Android 화면 크기를 자동으로 선택할 수 있습니다.
R

사각형 — "여기 뭔가 들어갈 자리야" 표시

메모지에 네모 칸 그리는 것.
R 키를 누르고 드래그하면 회색 박스가 생깁니다. 이미지 자리, 버튼 자리, 카드 영역 — 전부 이 박스로 표현합니다. 색은 안 칠해도 됩니다.
T

텍스트 — 글씨 쓰기

그림 위에 메모 붙이는 것.
T 키를 누르고 클릭하면 글자를 입력할 수 있습니다. "검색창", "저장 버튼", "홈" 같은 설명을 박스 위에 써두면 와이어프레임이 됩니다.
정렬

정렬 — 대충 맞추기

파워포인트에서 "가운데 정렬" 누르는 것.
요소를 선택하면 오른쪽 패널에 정렬 버튼이 있습니다. 버튼 한 번이면 됩니다. 완벽하게 안 맞아도 전혀 괜찮습니다.
복사

Ctrl+D — 화면 한 장 더 만들기

슬라이드 복사해서 다음 페이지 만드는 것.
프레임을 선택하고 Ctrl+D(Mac: Cmd+D)를 누르면 복사됩니다. 홈 화면을 복사해서 두 번째 화면으로 수정하면, 화면이 2개가 됩니다.

💡 오토레이아웃, 컴포넌트, 변수 — 이런 건 지금 몰라도 됩니다.
노코드 앱 설계를 위한 와이어프레임이 목적이라면 위 5가지면 충분합니다. 나머지 기능은 나중에 필요할 때 하나씩 배우면 됩니다.

⏱ 05-1. 딱 3분만에 첫 화면 만들어보기

설명은 잠깐 멈추고, 지금 바로 따라 해봐도 됩니다. Figma를 열고 아래 순서대로만 해보세요. 3분이면 화면 하나가 완성됩니다.

figma.com 접속 → 무료 계정으로 로그인

구글 계정으로 가입하면 1분이면 됩니다.

새 디자인 파일 열기

"New design file" 클릭 → 빈 캔버스가 열립니다.

F 키 누르기 → 오른쪽 패널에서 "iPhone 16" 클릭

스마트폰 화면 크기의 프레임이 생깁니다. 이게 앱 화면 한 장입니다.

R 키 누르기 → 프레임 안에 박스 3개 드래그

할 일 목록 3개라고 상상하며 세로로 박스 3개를 그립니다. 크기나 위치는 대충 맞춰도 됩니다.

T 키 누르기 → 각 박스 위에 텍스트 입력

"운동하기", "책 읽기", "물 마시기"처럼 아무 내용이나 입력합니다.

하단에 박스 1개 더 → T키로 "+ 추가" 텍스트 입력

버튼 하나가 완성됩니다. 예쁘지 않아도 됩니다.

✓

완성! 첫 번째 와이어프레임입니다

이것으로 AI 코딩 도구에 "이 구조를 참고해서 할 일 앱 만들어줘"라고 요청할 수 있습니다.

"못생겨도 괜찮습니다.
이 박스 7개가 앱의 시작입니다."

완성도가 아닌 구조가 목적입니다 — AI가 나머지를 채워줍니다

⚡ 06. 10분 만에 만드는 첫 와이어프레임 — 실전 예시 3가지

3분 튜토리얼을 해봤다면 이번엔 실제 앱 아이디어로 연습해봅니다. Cursor 앱 만들기나 Claude Code 앱 제작을 준비 중이라면, 아래 예시 중 하나를 골라 그대로 따라 해보세요.

예시 1 — AI 할 일 관리 앱 (가장 단순한 시작)

📱 화면 구성 예시: AI 할 일 앱

[홈 화면]
  상단: 앱 제목 텍스트 "오늘의 할 일"
  중간: 할 일 목록 (박스 3~5개 세로 배치)
      각 박스 안: 체크박스 + 할 일 텍스트
  하단: "+ 추가하기" 버튼 (박스)

[추가 화면]
  상단: "뒤로가기" 버튼 + 제목 "새 할 일"
  중간: 텍스트 입력 박스 (큰 박스)
  하단: "저장" 버튼

예시 2 — AI 영어 회화 앱

📱 화면 구성 예시: AI 영어 회화 앱

[홈 화면]
  상단: 레벨 선택 (초급 / 중급 / 고급 버튼 3개)
  중간: 오늘의 주제 카드 (박스)
  하단: "대화 시작하기" 버튼

[대화 화면]
  상단: AI 말풍선 (박스, 왼쪽 정렬)
  중간: 내 말풍선 (박스, 오른쪽 정렬)
  하단: 텍스트 입력창 + 보내기 버튼

예시 3 — AI 일정 요약 앱

📱 화면 구성 예시: AI 일정 요약 앱

[홈 화면]
  상단: 날짜 표시 (텍스트)
  중간: 오늘 일정 카드 목록 (박스 2~3개)
      각 카드: 시간 + 일정 제목
  하단: "AI 요약 보기" 버튼

[AI 요약 화면]
  상단: "오늘 일정 요약" 제목
  중간: AI가 생성한 요약 텍스트 영역 (큰 박스)
  하단: "공유하기" / "다시 생성" 버튼

💡 Figma에서 이 구조를 그리는 순서:
① F키로 모바일 프레임 생성 → ② R키로 박스 그리기 → ③ T키로 텍스트 입력 → ④ Ctrl+D로 프레임 복사해서 두 번째 화면 만들기 → 완성!
예쁠 필요 없습니다. 회색 박스만으로도 충분합니다. 이 구조를 Cursor 앱 만들기, Claude Code 앱 제작, Lovable 등 어느 AI 도구에도 바로 넘길 수 있습니다.

Figma 와이어프레임을 Lovable·Cursor·Claude Code AI 코딩 도구에 연결하는 흐름

🔗 07. 이제 이걸 AI 코딩 도구에 넘기면 됩니다

와이어프레임을 만들었다면, 이제 AI에게 넘길 차례입니다. ChatGPT UI 설계를 넘어 실제 AI 앱 프로토타입을 만드는 단계입니다. 방법은 생각보다 단순합니다.

방법 1

캡처해서 AI에게 이미지로 전달

Figma에서 와이어프레임을 캡처(내보내기)해서 이미지 파일로 저장합니다. Lovable, Claude, GPT-4o 같은 도구에 이미지를 첨부하고 "이 화면 구조를 참고해서 앱을 만들어줘"라고 요청합니다. 가장 직관적이고 빠른 방법입니다.
방법 2

Figma 링크를 AI에게 전달

Figma의 공유 버튼을 눌러 링크를 복사합니다. Claude나 Cursor에 링크와 함께 "이 Figma 화면 구조대로 만들어줘"라고 요청합니다. 일부 AI 코딩 도구는 Figma 링크를 직접 읽어올 수 있어, 노코드 앱 설계 흐름을 그대로 이어갈 수 있습니다.
방법 3

와이어프레임을 글로 설명해서 전달

앞서 만든 화면 구조 텍스트(섹션 06의 예시처럼)를 그대로 AI에게 붙여 넣습니다. Figma 없이도 화면 구조가 글로 정리되어 있으면 AI 결과물 품질이 크게 올라갑니다. 가장 쉽게 시작할 수 있는 방법입니다.

✅ AI 코딩 도구에 넘길 때 쓰는 프롬프트 예시

도구: Lovable / Cursor / Claude Code

프롬프트:
아래 화면 구조를 가진 AI 영어 회화 앱을 만들어줘.

[홈 화면]
- 상단: 레벨 선택 버튼 3개 (초급/중급/고급)
- 중간: 오늘의 주제 카드
- 하단: "대화 시작하기" 버튼

[대화 화면]
- AI 말풍선 (왼쪽), 내 말풍선 (오른쪽)
- 하단: 텍스트 입력창 + 보내기 버튼

모바일 화면 기준으로 만들어줘.

💜 연결되는 AI 코딩 도구 한눈에 보기

Lovable — 화면 설명만으로 앱 초안 생성, 비개발자에게 가장 친화적
Cursor — 코드 편집기 기반, Figma 캡처 이미지 첨부 가능
Claude Code — 터미널 기반, 화면 구조 텍스트 전달에 강함
v0.dev — 텍스트 프롬프트로 UI 초안 즉시 생성
Bolt / Windsurf — 풀스택 앱 생성, 화면 구조 설명으로 시작

어떤 도구를 쓰든 와이어프레임으로 정리된 화면 구조가 있으면 첫 결과물의 완성도가 훨씬 올라갑니다.

💬 08. 초보자가 가장 많이 오해하는 것들

Figma 와이어프레임을 처음 시작하는 분들이 자주 걸리는 함정들입니다. 미리 알아두면 훨씬 편하게 시작할 수 있습니다.

❌

"처음부터 예쁘게 만들어야 한다"

와이어프레임은 예쁠 필요가 없습니다. 색도 없고, 아이콘도 없어도 됩니다. 회색 박스와 텍스트만으로 충분합니다. 예쁜 디자인은 나중에, 혹은 AI가 알아서 해줄 일입니다.
❌

"디자인 감각이 있어야 잘 할 수 있다"

와이어프레임에 필요한 건 디자인 감각이 아니라 "이 화면에 무엇이 있어야 하는지"를 생각하는 능력입니다. 앱을 쓰는 사람의 입장에서 "뭐가 있으면 편할까"를 생각하면 됩니다.
❌

"완벽한 기획이 끝난 다음에 그려야 한다"

와이어프레임을 그리는 것 자체가 기획을 더 구체화해주는 과정입니다. "아, 이 화면에 이것도 필요하겠네"라는 생각이 그리면서 나옵니다. 완벽하지 않아도 일단 시작해도 됩니다.
❌

"와이어프레임만 잘 만들면 AI가 완벽한 앱을 만들어준다"

와이어프레임은 AI에게 방향을 주는 도구입니다. AI와 대화하면서 수정하는 과정은 계속 이어집니다. 와이어프레임이 있으면 그 대화가 훨씬 빠르고 정확해진다는 것이 핵심입니다.

"비개발자가 해야 하는 건
코드를 외우는 게 아니라
생각을 구조화하는 것입니다"

AI 시대에는 구조를 먼저 정리하는 사람이 더 좋은 앱을 더 빠르게 만듭니다.
Figma 와이어프레임은 그 구조화의 첫 번째 도구입니다.

🗒 Figma 첫 와이어프레임 시작 전 체크리스트

✓ figma.com에 무료 계정 만들기 완료
✓ 만들고 싶은 앱의 핵심 화면 2~3개 정해두기 (홈, 입력, 결과)
✓ 각 화면에 어떤 요소가 있어야 하는지 메모해두기
✓ F키 → 모바일 프레임 만들기 연습해보기
✓ R키 → 박스 그리기, T키 → 텍스트 입력 연습해보기
✓ 예쁘게 안 만들어도 된다는 것 마음에 새기기 😄
✓ 완성된 화면을 AI 도구에 전달하는 방법 정해두기

📌 이 글의 핵심 정리

AI 시대에는 비개발자도 화면 구조를 먼저 정리해야 한다 — Figma는 그 최소한의 도구다.
와이어프레임은 예쁜 디자인이 아닌 화면 뼈대 스케치 — 회색 박스와 텍스트만으로 충분하다.
ChatGPT 기획서 → Figma 와이어프레임 → AI 코딩 도구 순서가 바이브 코딩의 기본 흐름이다.
비개발자가 알아야 할 Figma 기능은 F·R·T·정렬·복사 딱 5가지뿐 — 나머지는 지금 몰라도 된다.
3분 안에 첫 화면을 만들 수 있다 — F키 → 박스 3개 → 텍스트 입력이면 와이어프레임 완성이다.
완성된 와이어프레임은 Lovable·Cursor·Claude Code 등 AI 도구에 이미지나 텍스트로 넘기면 된다.

❓ FAQ — 처음 Figma를 접하는 분들이 많이 묻는 질문

Figma는 완전 무료로 사용할 수 있나요?

개인 혼자 연습하거나 와이어프레임을 만드는 용도라면 무료 플랜(Starter)으로 충분합니다. 2026년 기준 Figma 무료 플랜은 브라우저에서 설치 없이 사용할 수 있고, 기본적인 프레임 만들기·텍스트·도형·공유 기능을 모두 무료로 이용할 수 있습니다. 팀 단위 협업이나 파일 수가 많아지면 유료 플랜이 필요합니다.

Figma 와이어프레임을 만들면 Lovable이나 Cursor에 바로 넣을 수 있나요?

직접 붙여 넣는 것보다는 '화면 구조 설명'으로 활용하는 방식이 현실적입니다. Figma에서 만든 와이어프레임을 캡처하거나 공유 링크를 복사해서, AI 도구(Lovable, Cursor, Claude Code 등)에 '이 화면 구조를 참고해서 만들어줘'라고 설명하는 방식으로 연결합니다. 화면 구조가 글로 정리되어 있으면 AI 결과물 품질이 훨씬 올라갑니다.

Figma 와이어프레임을 잘 그리려면 디자인 감각이 있어야 하나요?

아닙니다. 와이어프레임은 예쁜 디자인이 목적이 아니라 '어떤 요소가 어디에 있는지'를 정리하는 것이 목적입니다. 회색 박스, 선, 텍스트만으로도 충분한 와이어프레임을 만들 수 있습니다. 디자인 감각보다 '내가 만들고 싶은 화면에 무엇이 필요한지'를 생각하는 능력이 훨씬 더 중요합니다.

Figma 말고 비개발자가 쓸 수 있는 다른 와이어프레임 도구도 있나요?

있습니다. FigJam(Figma의 보드형 스케치 도구), Whimsical, Balsamiq 등이 비개발자 친화적인 도구입니다. 손그림에 가까운 형태를 선호한다면 Balsamiq가 직관적이고, 빠른 플로우 정리에는 FigJam이 좋습니다. 다만 업계에서 가장 많이 쓰이고 바이브 코딩 도구와의 연결이 쉬운 쪽은 Figma입니다.

🚀 지금 바로 첫 와이어프레임을 만들어보세요

figma.com에 접속해서 F키 → 모바일 프레임 하나만 만들어보세요.
그 한 걸음이 AI 앱 만들기의 진짜 시작입니다.

Figma 무료로 시작하기 → 5가지 기본 기능 다시 보기

📌 관련 태그

#Figma와이어프레임입문 #비개발자Figma #와이어프레임이란 #바이브코딩준비 #AI앱화면설계 #Figma무료사용법 #ChatGPTUI설계 #AI앱프로토타입 #노코드앱설계 #Cursor앱만들기 #ClaudeCode앱제작 #코딩없이앱만들기 #바이브코딩시리즈2026

비개발자가 처음 써보는 Figma 와이어프레임 기초 입문

비개발자가 처음 써보는Figma 와이어프레임 기초 입문

🤔 01. 왜 비개발자도 갑자기 Figma를 쓰게 됐을까

📐 02. 와이어프레임이란? — 건물로 비유하면 이해가 쉽다

박스

텍스트

버튼

화살표

🤖 03. "AI에게 앱 만들어줘"가 자꾸 실패하는 이유

🌟 04. 왜 다들 Figma를 쓰는 걸까?

무료로 시작 가능

설치 없이 브라우저로

링크 하나로 공유

모바일 화면 그리기 쉬움

AI 도구와 연결 용이

무료 템플릿 1,000개+

🎯 05. 이것만 알면 일단 충분합니다 — 5가지

프레임 — 화면 한 장 만들기

사각형 — "여기 뭔가 들어갈 자리야" 표시

텍스트 — 글씨 쓰기

정렬 — 대충 맞추기

Ctrl+D — 화면 한 장 더 만들기

⏱ 05-1. 딱 3분만에 첫 화면 만들어보기

⚡ 06. 10분 만에 만드는 첫 와이어프레임 — 실전 예시 3가지

🔗 07. 이제 이걸 AI 코딩 도구에 넘기면 됩니다

캡처해서 AI에게 이미지로 전달

Figma 링크를 AI에게 전달

와이어프레임을 글로 설명해서 전달

💬 08. 초보자가 가장 많이 오해하는 것들

"처음부터 예쁘게 만들어야 한다"

"디자인 감각이 있어야 잘 할 수 있다"

"완벽한 기획이 끝난 다음에 그려야 한다"

"와이어프레임만 잘 만들면 AI가 완벽한 앱을 만들어준다"