9장. First Draft와 콘텐츠 생성 — 빈 캔버스 탈출, Replace content 활용법

빈 캔버스는 늘 조금 무섭다. 파일은 새하얗고, 머릿속에는 아이디어가 있는데, 손은 이상할 만큼 느리다. 어디서부터 시작해야 할지 모르겠는 그 몇 분이 생각보다 길다. 2026년의 피그마 AI가 가장 크게 줄여주는 시간도 바로 그 구간이다.

이 장의 핵심은 단순하다. AI는 완성본을 대신 만드는 도구라기보다, 출발점을 빠르게 만드는 도구로 쓸 때 가장 강력하다. First Draft는 초안을 꺼내 주고, Replace content와 Rewrite 계열 기능은 그 초안에 사람 냄새 나는 문장을 채워 넣는다. 그러면 디자이너는 처음부터 모든 것을 그리는 사람에서, 좋은 방향을 고르고 다듬는 사람으로 역할이 바뀐다.

왜 First Draft가 유용한가

First Draft는 아이디어를 편집 가능한 와이어프레임이나 기본 디자인으로 바꿔주는 기능이다. 중요한 점은 결과물이 이미지가 아니라 피그마 안에서 바로 수정할 수 있는 레이어와 프레임이라는 사실이다. 즉, 나온 결과를 버리거나 고치는 일이 어렵지 않다. 잘 나온 부분은 살리고, 어색한 부분은 바로 뜯어고치면 된다.¹

이 기능은 특히 웹사이트와 모바일 앱처럼 익숙한 인터페이스 패턴에서 강하다. 예를 들어 가격 정책 페이지, 체크아웃 화면, 음식 배달 앱 홈 같은 요청에는 비교적 안정적으로 반응한다. 반대로 소설 지면 레이아웃, 생선 모양 전단지, 아주 특이한 인쇄물처럼 일반적인 UI 패턴 바깥의 요청은 흔들릴 수 있다.¹ 이 차이를 이해하면 실망이 줄어든다. First Draft는 '무엇이든 만드는 마법'이 아니라, '익숙한 디지털 화면을 빨리 시작하게 해주는 도구'다.

또 하나 알아둘 점이 있다. 현재 First Draft의 생성은 피그마가 준비한 라이브러리를 기반으로 동작한다. 그래서 공통적인 UI 문법에는 강하지만, 아직은 여러분 회사의 디자인 시스템을 직접 불러와 그 기준으로 초안을 만드는 방식은 제한적이다.¹ 이 말은 곧, First Draft의 출력은 브랜드 완성본이 아니라 구조 초안으로 받아들이는 편이 맞다는 뜻이다.

First Draft는 무엇을 만들어주고, 무엇은 못하는가

First Draft가 잘하는 일은 생각보다 명확하다. 화면의 골격을 잡고, 흔히 쓰는 섹션 조합을 빠르게 꺼내며, 처음 보는 이해관계자에게 "우리가 대략 이런 방향을 생각하고 있습니다"라고 보여줄 수 있는 수준의 출발점을 만드는 일이다. 이런 초안은 회의 속도를 엄청나게 올려준다. 말로 설명할 때보다 화면으로 보여줄 때 팀은 훨씬 빨리 같은 그림을 본다.

하지만 못하는 일도 분명하다. 전체 서비스의 복잡한 정보 구조를 완벽하게 이해하지는 못한다. 실제 사용자 여정의 예외 상황, 접근성 기준, 법무 문구, 브랜드 어조, 개발 제약까지 한 번에 맞춰주지도 못한다. LogRocket의 2026년 정리에서도 이런 점이 분명하게 드러난다. 피그마의 AI 도구는 초기 아이데이션과 반복 작업을 크게 줄여주지만, 접근성·시맨틱 구조·프로덕션 준비도는 여전히 사람의 검토가 필요하다.²

그래서 실무에서는 이렇게 받아들이면 편하다. First Draft는 초안을 꺼내는 주니어 디자이너라기보다, 엄청 빠른 러프 스케치 파트너에 가깝다. 속도는 놀랍지만, 책임까지 맡기면 안 된다.

First Draft의 기본 사용 흐름

사용 흐름은 의외로 단순하다. 툴바의 Actions에서 First Draft를 열고, 웹사이트용인지 모바일 앱용인지, 와이어프레임에 가까운지 기본 디자인에 가까운지에 맞는 라이브러리를 고른다. 라이브러리를 고르지 않으면 피그마가 프롬프트에 맞춰 적당한 쪽을 선택한다. 그다음 설명을 입력하고 Make it을 누르면 된다.¹

생성 후에는 같은 구조를 다른 테마로 미리 보거나, Make changes로 들어가 더 손볼 수 있다. 여기서 중요한 디테일이 하나 있다. Actions를 닫고 나면 First Draft 라이브러리 기반의 추가 수정 흐름으로 되돌아갈 수 없다. 그 이후에는 일반 피그마 편집처럼 레이어, 속성, 자동 레이아웃을 직접 손보는 방식으로 넘어간다.¹ 그래서 생성 직후의 몇 분이 꽤 중요하다. 이때 여러 변주를 비교하고, 마음에 드는 방향을 골라 두는 편이 좋다.

저는 이 구간을 'AI 초안 회의'라고 부른다. 혼자 하는데도 회의 같다. 같은 요구사항으로 세 방향 정도를 보고, 구조가 좋은 안을 고른 뒤, 그다음부터는 사람의 판단으로 옮겨 가는 것이다.

좋은 First Draft 프롬프트는 어떻게 쓰는가

많은 초보자가 "멋진 앱 만들어줘"라고 쓴다. 그러면 결과도 정말 성의 있게 애매하다. First Draft는 점쟁이가 아니다. 잘 쓰는 프롬프트는 최소한 화면 종류, 핵심 목적, 꼭 들어갈 요소, 원하는 분위기를 담는다.

실전에서는 다음 네 덩어리로 생각하면 편하다.

첫째, 무엇을 만드는지 분명히 말한다. 예를 들어 모바일 홈 화면인지, 가격 정책 페이지인지, 체크아웃 화면인지부터 정해준다.

둘째, 화면의 목적을 알려준다. 사용자가 이 화면에서 무엇을 해야 하는지 적어주면 구조가 훨씬 안정된다. 상품을 탐색하는지, 결제를 완료하는지, 플랜을 비교하는지에 따라 섹션 우선순위가 달라지기 때문이다.

셋째, 꼭 필요한 구성 요소를 넣는다. 헤더, 검색창, 카드 리스트, 하단 탭 바처럼 빠지면 곤란한 요소를 써준다.

넷째, 톤과 스타일을 붙인다. 예를 들어 차분한 핀테크 느낌인지, 밝고 친근한 교육 서비스인지, 미니멀한 B2B SaaS 느낌인지가 여기에 해당한다.

아래처럼 쓰면 시작점이 훨씬 좋아진다.

반려동물 사료를 주문하는 모바일 앱 홈 화면. 상단에는 현재 배송지와 검색창, 그 아래에는 카테고리 칩, 개인화 추천 배너, 재구매 상품 리스트, 오늘의 할인 섹션, 하단 탭 바가 필요하다. 처음 방문한 사용자도 복잡하지 않게 이해되는 구조로, 밝고 친근하지만 과하게 장난스럽지 않은 톤.

이 프롬프트의 좋은 점은 화려한 수사를 거의 쓰지 않았다는 데 있다. 무엇을 위한 화면인지, 무엇이 들어가야 하는지, 어떤 분위기인지가 분명하다. AI는 시보다 명세서를 좋아한다.

초안을 잘 뽑는 사람의 질문법

First Draft를 잘 쓰는 사람은 한 번에 정답을 뽑으려 하지 않는다. 대신 초안이 흔들리기 쉬운 지점을 미리 지정한다. 예를 들어 이런 식이다.

"첫 화면에서 가장 먼저 보여야 할 정보는 무엇인가?"

"이 사용자는 지금 탐색 중인가, 비교 중인가, 행동 직전인가?"

"카드 수가 많을 때도 구조가 유지되는가?"

"텍스트가 길어지면 무너질 영역은 어디인가?"

이 질문을 먼저 하면 프롬프트가 달라진다. 예를 들어 단순히 '강의 앱 화면'이라고 쓰는 대신, '처음 방문 사용자가 바로 인기 강의와 학습 경로를 이해할 수 있게'라고 쓰게 된다. 그 한 줄 차이가 레이아웃 우선순위를 바꾼다.

생성 후 바로 해야 하는 다듬기

First Draft의 결과가 나오면 감탄부터 하기 쉽다. 하지만 그다음 10분이 더 중요하다. 초안은 보기보다 자주 삐끗한다. 정렬이 미묘하게 어색하거나, 카드 높이가 일정하지 않거나, 텍스트 톤이 한 화면 안에서 섞이기도 한다. 실무에서는 생성 직후에 바로 구조 검수를 해야 한다.

가장 먼저 볼 것은 프레임 구조다. 화면 전체가 하나의 논리적인 프레임으로 묶여 있는지, 스크롤 영역이 자연스러운지 확인한다. 다음은 자동 레이아웃이다. 간격이 일관적인지, 요소 추가 시 무너지지 않는지, 내부 패딩이 섹션마다 들쭉날쭉하지 않은지 본다. 마지막은 텍스트 계층이다. 제목, 본문, 보조 문구의 역할이 섞이지 않았는지 확인해야 한다.

그리고 이 단계에서 너무 예쁘게 만들려고 애쓰지 않는 것이 좋다. 초안 단계에서 중요한 것은 미감보다 정보 구조다. 아름다운데 틀린 화면보다, 투박해도 맞는 구조가 훨씬 가치 있다.

Make changes: 프롬프트 수정과 스타일 조절

First Draft는 생성 후에도 다시 프롬프트를 넣어 테마, 콘텐츠, 구조를 수정할 수 있다. 예를 들어 색감을 바꾸거나, 오디오북 서비스로 주제를 바꾸거나, 특정 섹션의 위치를 바꾸는 식이다. 특정 부분만 선택한 뒤 수정 지시를 주면 선택 영역에만 반영할 수도 있다.¹

여기서 실무 감각이 갈린다. 초보자는 큰 요구를 한 번에 던진다. "더 예쁘게 하고 더 현대적으로 만들고 카드도 늘리고 친근하게 바꾸고 다크 모드도 보여줘." 그러면 AI도 당황한다. 좋은 수정은 한 번에 한 축만 건드린다.

예를 들어 구조를 바꿀 때는 이렇게 말한다.

추천 섹션을 검색창 아래로 이동하고, 할인 배너는 그 아래에 배치해줘.

톤을 바꿀 때는 이렇게 말한다.

전체 분위기를 조금 더 차분하고 신뢰감 있게 바꿔줘. 채도는 낮추고 장식 요소는 줄여줘.

콘텐츠를 바꿀 때는 이렇게 말한다.

팟캐스트 앱이 아니라 오디오북 앱에 맞는 텍스트와 카테고리로 바꿔줘.

또한 색상, 타이포그래피, 간격, 모서리 반경 같은 스타일 조절도 별도로 가능하다.¹ 이 기능은 프롬프트보다 덜 극적이지만 더 안정적이다. 화면의 논리는 유지한 채 인상만 조절하고 싶을 때 특히 유용하다.

Replace content는 왜 생각보다 강력한가

많은 사람이 AI 하면 일단 화면 생성을 떠올린다. 하지만 실무에서 더 자주 쓰게 되는 것은 콘텐츠 채우기다. 특히 Replace content는 반복 요소가 많은 카드, 리스트, 게시물, 표에서 시간을 크게 절약해준다. 임시 텍스트를 사실적인 예시 콘텐츠로 바꿔주기 때문이다.³

이 기능의 진짜 장점은 '모형이 갑자기 제품처럼 보이기 시작한다'는 데 있다. 이름, 직함, 설명, 가격, 요약 문장이 그럴듯하게 들어가면 이해관계자의 반응이 달라진다. 사용성 테스트를 할 때도 훨씬 현실적인 피드백이 나온다. 사용자는 로렘 입숨보다 실제 같은 문장 앞에서 더 솔직하게 반응한다.

예를 들어 프로페셔널 네트워킹 앱 카드에 name, title, bio라고 써 둔 상태라고 해보자. Replace content를 실행하면 이를 실제 인물 이름, 직함, 소개 문장처럼 바꿔줄 수 있다.³ 이때 여러 개의 중복 카드에 한 번에 적용할 수 있다는 점이 중요하다. 카드 열두 장에 손으로 내용을 넣는 순간, 디자이너는 어느새 복사-붙여넣기 사무원이 되어버린다.

Replace content를 잘 쓰는 방법

Replace content는 마법의 복붙이 아니다. 결과를 좋게 하려면 텍스트 레이어의 역할이 어느 정도 분명해야 한다. 카드 제목, 보조 설명, 가격, 태그처럼 구조가 읽히는 상태일수록 결과가 자연스럽다. 반대로 한 텍스트 레이어에 너무 많은 역할이 섞여 있으면 어색한 문장이 들어갈 가능성이 커진다.

또 프롬프트로 맥락을 조금만 보태면 품질이 좋아진다. 예를 들어 단순히 바꾸는 대신, "친환경 생활용품을 파는 쇼핑 앱의 상품 카드 내용"이라고 적으면 제목과 설명의 결이 맞아진다. "초등학생 부모를 위한 학습 앱의 코스 목록"이라고 쓰면 문장 톤도 달라진다.

실전에서는 이런 식으로 쓰면 좋다.

재택근무 팀을 위한 협업 도구의 프로젝트 카드 내용으로 바꿔줘. 카드마다 프로젝트명, 현재 상태, 짧은 설명이 자연스럽게 다르게 나오면 좋겠어.

이런 식의 지시는 Replace content가 단순히 단어만 바꾸는 대신, 목록 전체의 세계관을 맞추도록 도와준다.

Rewrite, Shorten, Translate를 함께 써야 하는 이유

콘텐츠 생성은 Replace content 하나로 끝나지 않는다. 텍스트 레이어 단위에서는 Rewrite this, Shorten, Translate to 기능이 더 자주 손에 익는다. Rewrite는 톤을 바꾸거나 새 문장을 생성하는 데 유용하고, Shorten은 길이를 줄여 좁은 UI에 맞추는 데 좋으며, Translate는 다른 언어에서 화면 길이와 리듬을 미리 확인하는 데 큰 도움이 된다.⁴

이 기능들을 함께 쓰면 카피 작업이 훨씬 빨라진다. 예를 들어 First Draft로 가격 정책 페이지 초안을 만들고, Replace content로 플랜 설명을 채운 다음, CTA 버튼 문구는 Rewrite로 더 설득력 있게 바꿀 수 있다. 그다음 모바일 화면 폭이 부족하면 Shorten으로 줄이고, 다국어 대응이 필요하면 Translate로 독일어나 일본어 길이를 미리 본다.⁴

이 흐름은 별것 아닌 것 같지만 실무에서 아주 크다. 과거에는 카피 초안, 번역 시안, 길이 조정이 서로 다른 도구와 사람을 거치며 늦어졌다. 이제는 디자이너가 검토용 초안을 훨씬 빠르게 만들 수 있다. 물론 최종 문구는 여전히 UX 라이터, 마케터, 현지화 담당자의 검수가 필요하지만, 적어도 빈칸은 빠르게 사라진다.

실전 워크플로우: 화면 초안에서 검토 가능한 시안까지

이 장의 내용을 한 번에 묶으면, 가장 현실적인 흐름은 다음과 같다.

먼저 First Draft로 구조 초안을 만든다. 여기서는 완성도를 욕심내지 말고, 화면 목적과 핵심 섹션이 제대로 잡혔는지만 본다.

다음으로 Make changes에서 구조를 한두 번 정리한다. 섹션 순서를 바꾸고, 분위기를 서비스 성격에 맞게 조절한다.

그다음 Replace content로 반복 요소를 현실적인 내용으로 채운다. 카드, 리스트, 표, 추천 영역부터 손보면 화면이 빠르게 살아난다.³

이후 Rewrite와 Shorten으로 카피 톤과 길이를 맞춘다. 버튼, 빈 상태 메시지, 안내 문구처럼 작지만 중요한 텍스트를 다듬는다.⁴

마지막으로 사람의 손으로 구조를 정리한다. 자동 레이아웃을 안정화하고, 컴포넌트로 바꿀 것은 바꾸고, 변수와 스타일을 연결한다. AI가 출발선을 그렸다면, 이제부터는 디자인 시스템 위로 올리는 과정이다.

이 다섯 단계를 거치면 초안은 더 이상 'AI가 대충 만든 그림'이 아니라, 팀이 검토할 수 있는 시안이 된다.

가장 흔한 실패 패턴

First Draft와 콘텐츠 생성 기능을 쓰다 보면 비슷한 실패가 반복된다. 첫 번째는 프롬프트가 너무 넓은 경우다. 서비스 소개, 온보딩, 커머스, 커뮤니티, 설정까지 한 화면에 다 넣으려 하면 구조가 흐려진다. 한 번에 한 화면, 한 목적에 집중해야 한다.

두 번째는 AI가 준 문장을 사실로 착각하는 경우다. 특히 숫자, 가격, 지역 정보, 법적 표현은 검증 없이 쓰면 위험하다. 사실적인 문장과 사실인 문장은 다르다.

세 번째는 보기 좋은 더미 데이터를 실제 서비스 데이터처럼 다루는 경우다. 사용성 테스트에서는 그럴듯함이 도움이 되지만, 개발 사양이나 정책 문서에 그대로 가져가면 혼선이 생긴다.

네 번째는 브랜딩이 저절로 맞을 거라고 기대하는 경우다. First Draft는 구조 초안에는 도움이 되지만, 우리 팀의 브랜드 언어와 시각 시스템을 완전히 이해하지는 못한다.¹

다섯 번째는 접근성 검수를 건너뛰는 경우다. 문장 길이, 대비, 라벨 명확성, 스크린 리더 친화성은 사람이 직접 확인해야 한다.²

저작권과 데이터에 대한 감각도 필요하다

생성형 도구를 쓸 때는 편의성만큼 신뢰도와 데이터 감각도 중요하다. Figma는 자사의 생성 기능이 기본적으로 제3자 모델을 활용하며, 사설 파일이나 고객 데이터를 훈련에 사용하지 않았다고 설명해 왔다. 또한 관리자는 팀 콘텐츠의 학습 사용 여부를 제어할 수 있고, 학습 참여 여부와 AI 기능 사용 가능 여부는 별개라고 안내했다.⁵

이 정보는 두 가지 의미가 있다. 첫째, 팀에서는 AI 기능 사용 정책을 정리해 둘 필요가 있다. 둘째, 결과물이 그럴듯하다고 해서 출처·정확성·유사성 문제를 완전히 잊으면 안 된다. 과거 Make Designs 시절에는 특정 앱과 지나치게 닮은 출력에 대한 논란도 있었고, 그 뒤 기능이 조정되어 First Draft라는 이름과 위치를 다시 잡았다.⁶ 그래서 더더욱 초안을 참고점으로 다루고, 최종 결과는 팀의 판단과 시스템으로 책임 있게 다듬어야 한다.

이 장의 실전 감각 한 줄 정리

First Draft는 디자이너를 대체하는 기능이 아니다. '처음 30분'을 압축해 주는 기능이다.

Replace content와 Rewrite 계열 도구도 카피라이터를 없애는 기능이 아니다. '빈칸과 임시문구'를 빠르게 현실적인 문장으로 바꾸어, 더 나은 대화를 가능하게 만드는 기능이다.

결국 시간 절약의 진짜 포인트는 완성 자동화가 아니라 출발 가속이다. 막막함이 줄어들면, 탐색 횟수는 늘고, 비교는 빨라지고, 판단은 더 좋아진다. AI 시대의 좋은 디자이너는 처음부터 다 그리는 사람이 아니라, 빠르게 초안을 만들고 더 빠르게 옳은 방향을 고르는 사람이다.

직접 해보기

이번 장을 읽고 바로 해볼 만한 연습은 간단하다. 익숙한 서비스 하나를 고르고, 그 서비스의 새 기능 화면을 First Draft로 만들어 보자. 예를 들어 배달 앱의 구독 페이지, 은행 앱의 해외 결제 설정 화면, 교육 앱의 오늘의 학습 홈 같은 식이다. 첫 번째 초안은 넓게 만들고, 두 번째는 구조만 고치고, 세 번째는 콘텐츠만 바꿔본다. 그러면 무엇을 프롬프트로 고치는 게 좋고, 무엇을 직접 손으로 고치는 게 좋은지 감이 생긴다.

그리고 마지막에는 꼭 스스로에게 물어보자. "이 화면은 예뻐졌는가?"보다 먼저, "이 화면은 이제 대화를 시작할 수 있는가?"라고. First Draft의 진짜 가치는 바로 거기에 있다.

참고

¹Use First Draft with Figma AI

²Figma AI in 2026: Everything it can do — and what it still can't

³Replace text content with AI

⁴Rewrite, translate, and shorten text with AI

⁵Meet Figma AI: Empowering designers with intelligent tools

⁶Figma Reintroduces Figma AI as First Draft