🎨 스케치가 고품질 에셋으로? Stable Diffusion & Figma 연동 실습!

(feat. 나도 처음엔 몰랐는데 이렇게 해보니 되더라)

1. 도입부: 이 도구를 왜 배우게 되었나

안녕하세요! Design AI LAB 학습자 여러분, 그리고 함께 성장하고 싶은 모든 분들! 😊

저도 여러분과 똑같은 고민을 했었어요. 디자이너로서 새로운 아이디어가 샘솟을 때마다, 머릿속에서는 이미 완벽한 이미지가 그려지는데, 그걸 Figma에서 직접 만들려면 시간과 노력이 정말 많이 들잖아요? 특히 UI/UX 디자인을 할 때, 멋진 아이콘이나 일러스트 에셋 하나 만드는데 뚝딱! 하고 나오면 얼마나 좋을까 싶었죠.

간단한 스케치는 쓱쓱 그리는데, 그걸 실전에서 쓸 수 있는 고품질 디자인 에셋으로 바꾸는 과정에서 늘 벽에 부딪혔어요. 퀄리티를 높이려면 섬세한 작업이 필요한데, 그게 또 반복되다 보면 지치고요. 혹시 AI가 이 간극을 메워줄 수 있지 않을까?라는 막연한 기대감을 가지고 여러 AI 도구를 기웃거리기 시작했습니다.

그러다 마침내 발견한 마법 같은 조합! 바로 Stable Diffusion과 Figma를 연동하는 워크플로우였어요. 처음엔 이게 될까?싶었는데, 직접 해보니 세상에! 제가 그린 삐뚤빼뚤한 스케치가 뚝딱하고 전문가가 만든 것 같은 고품질 디자인 에셋으로 바뀌는 걸 보고 정말 놀랐습니다. 마치 저에게 전속 일러스트레이터가 생긴 기분이었죠. 저처럼 스케치에서 고품질 에셋으로 넘어가는 과정에서 시간을 아끼고 싶은 분들을 위해, 제가 직접 겪은 시행착오와 배운 점들을 솔직하게 공유해볼까 합니다. 초보자도 바로 따라 할 수 있게 아주 쉽게 설명해 드릴게요!

2. 준비물: 실습에 필요한 것들

준비물은 딱 세 가지입니다. 대부분 무료로 시작할 수 있으니 부담 없이 따라 해보세요!

Figma 계정 (무료/유료):
우리 디자이너들의 필수 툴이죠! 개인 작업이라면 무료 계정으로도 충분합니다. 여기서 아이디어를 스케치할 거예요. Figma 바로가기
Stable Diffusion을 사용할 수 있는 환경 (무료/유료):
저는 ControlNet 기능이 탑재된 Stable Diffusion 웹 UI를 활용할 겁니다. ControlNet은 AI가 내가 그린 그림의 형태를 그대로 따라 그리게 만드는 핵심 기능이거든요! 환경 구축이 어렵다면, 웹 기반의 Stable Diffusion 서비스(예: Leonardo.ai나 Playground AI 등)를 활용해도 좋아요. 무료 크레딧을 제공하니 그걸로 연습해볼 수 있습니다. 이 글에서는 Automatic1111 웹 UI 환경에서 ControlNet을 사용하는 것을 기준으로 설명할게요.
인터넷 연결:
두말할 필요 없겠죠? 쾌적한 환경에서 작업하기 위해 안정적인 인터넷은 필수입니다.

3. 따라하기: 스텝 바이 스텝 실습

자, 그럼 저와 함께 Figma에서 그린 아이디어 스케치를 Stable Diffusion으로 고품질 에셋으로 바꾸는 과정을 시작해볼까요? 이번 실습에서는 미래 지향적인 커피잔 아이콘을 만들어보는 시나리오로 진행하겠습니다.

1단계: Figma에서 아이디어 스케치하기 🎨

가장 먼저 Figma를 켜고 새로운 파일을 만들어주세요.

새로운 프레임 만들기: 아이콘을 만들 거니까 대략 512x512px 정도의 정사각형 프레임을 만들어주세요.
간단하게 스케치하기: 펜 도구(P)나 도형 도구를 이용해서 미래적인 느낌이 나는 커피잔의 형태를 자유롭게 그려보세요. 이때 중요한 건, 절대 완벽할 필요가 없다는 거예요! 저는 처음에 너무 완벽하게 그리려고 하다가 오히려 AI의 창의성을 막았었죠. 핵심 형태만 알아볼 수 있게, 대충 휘갈겨도 괜찮습니다.
팁! 스케치할 때는 선의 굵기나 색상에 너무 신경 쓰지 마세요. 어차피 AI가 스타일을 바꿔줄 거니까요. 저는 주로 짙은 회색 선으로 그리는 편입니다.

[Figma 스케치 예시: 심플한 컵 모양의 외곽선]

이렇게 해보세요:
Figma에서 펜 툴로 손잡이 없는 컵 모양을 대충 그리고, 그 위에 몇 개의 직선을 추가해서 미래적인 느낌을 흉내 내보세요. 중요한 건 뚜렷한 외곽선입니다.
스케치 내보내기: 스케치한 프레임 또는 그룹을 선택한 후, 오른쪽 패널의 Export 섹션에서 PNG 형식으로 내보내기(Export) 합니다. 이때, 배경은 투명하게 내보내는 게 좋습니다. (혹은 흰색 배경 위에 그렸다면 흰색 배경과 함께 내보내도 ControlNet은 잘 인식합니다.)

2단계: 스케치를 Stable Diffusion으로 보내기 (ControlNet 활용) 🤖

이제 Stable Diffusion 웹 UI를 열어주세요. 저는 보통 txt2img나 img2img 탭에서 ControlNet 섹션을 활용합니다.

ControlNet 활성화: Stable Diffusion 웹 UI에서 ControlNet 섹션을 찾아서 Enable 체크박스를 클릭해 활성화합니다.
스케치 이미지 업로드: 1단계에서 Figma에서 내보낸 PNG 스케치 이미지를 ControlNet 섹션의 이미지 업로드 영역으로 드래그 앤 드롭합니다.
프리프로세서와 모델 선택: 여기가 중요해요!
- 프리프로세서(Preprocessor): AI가 내 스케치에서 어떤 정보를 뽑아낼지 결정하는 부분이에요.
  - canny: 스케치의 날카로운 가장자리를 인식하게 합니다. 정확한 형태를 유지하고 싶을 때 좋아요.
  - scribble_pidinet 또는 scribble_hed: 자유로운 손그림처럼 흐릿한 선도 잘 인식하게 합니다. 좀 더 부드러운 형태를 원할 때 사용해요.
  미래적인 커피잔처럼 정확한 외곽선이 중요한 경우, canny를 선택하는 것이 좋습니다.
- 모델(Model): 프리프로세서와 짝을 이루는 AI 모델입니다. control_v11p_sd15_canny 또는 control_v11p_sd15_scribble 등 해당 프리프로세서 이름이 들어간 모델을 선택해주세요.
이렇게 해보세요:
업로드된 이미지 아래의 Preprocessor 드롭다운 메뉴에서 canny를 선택하고, Model 드롭다운 메뉴에서 control_v11p_sd15_canny와 같이 canny가 포함된 모델을 선택하세요. 그리고 Guess Mode는 끄고 Control Weight는 0.7~0.9 사이에서 시작해보세요. (이 값은 AI가 스케치를 얼마나 따를지를 결정합니다.)

3단계: AI에게 명령하기 (프롬프트 작성) ✍️

이제 AI에게 어떤 스타일의 이미지를 만들지 명령어(프롬프트)를 내려줄 시간입니다!

긍정 프롬프트 (Positive Prompt) 작성: 만들고 싶은 이미지를 상세하게 묘사해주세요.
예시: futuristic coffee mug, sleek design, metallic finish, glowing accents, minimalist, studio lighting, product photography, high detail, 8k, cinematic, sharp focus, octane render

팁! 구체적인 재질, 조명, 분위기, 카메라 앵글 등을 묘사하면 더 좋습니다. 저는 주로 product photography, studio lighting, 8k, octane render 같은 키워드를 즐겨 씁니다.
부정 프롬프트 (Negative Prompt) 작성: AI가 만들지 말았으면 하는 것들을 적어주세요.
예시: blurry, low quality, deformed, ugly, bad anatomy, noise, text, watermark, signature, poorly drawn, out of frame

팁! blurry, low quality는 기본적으로 넣어주는 게 좋아요. deformed도 예상치 못한 형태 왜곡을 막는 데 도움이 됩니다.
생성 파라미터 설정:
Sampling method (샘플링 방식): 저는 DPM++ 2M Karras나 Euler a를 자주 씁니다.

Sampling steps (스텝 수): 20-30 정도가 적당합니다. 너무 낮으면 퀄리티가 떨어지고, 너무 높으면 시간이 오래 걸려요.

CFG Scale: 7 정도로 시작해보세요. 이 값이 높을수록 프롬프트를 엄격하게 따르지만, 너무 높으면 이미지가 깨질 수 있습니다.

Seed: 처음에는 -1로 두어 무작위로 생성하고, 마음에 드는 이미지가 나오면 그 이미지의 Seed 값을 고정해서 여러 번 생성해보세요.

이렇게 해보세요:
위 예시 프롬프트를 복사하여 붙여넣고, Sampling steps는 25, CFG Scale은 7로 설정 후 Generate 버튼을 클릭해보세요!

4단계: AI가 만들어낸 결과물 확인 및 조정 🖼️

두근거리는 마음으로 Generate 버튼을 누르면, AI가 몇 초 만에 여러 이미지를 만들어낼 거예요.

이미지 평가: 생성된 이미지들을 보면서 어떤 것이 내가 원했던 미래적인 커피잔에 가장 가까운지 확인합니다. 스케치의 형태를 잘 유지하고 있는지, 프롬프트에서 요청한 스타일이 잘 반영되었는지 등을 봅니다.
반복 및 조정:
- 마음에 안 들면: 프롬프트를 수정하거나, ControlNet의 Control Weight 값을 조절(조금 낮춰 AI의 창의성을 높이거나, 높여 스케치에 더 충실하게) 해봅니다. 때로는 아예 스케치를 Figma에서 다시 조금 손본 후 시도하는 것도 좋은 방법입니다.
- 괜찮은데 더 좋게 만들고 싶다면: 해당 이미지의 Seed 값을 복사해서 고정하고, 프롬프트에 세부적인 묘사를 추가하거나 Sampling steps, CFG Scale 등을 미세하게 조정하여 여러 번 다시 생성해봅니다.
이렇게 해보세요:
처음에 만든 이미지 중에 형태는 괜찮은데 재질이 좀 아쉽다면, 해당 이미지의 Seed 값을 고정하고 프롬프트에 glassy texture나 carbon fiber material 같은 키워드를 추가해서 다시 Generate 해보세요.

5단계: 고품질 에셋 Figma로 가져오기 ✨

가장 마음에 드는 이미지를 얻었다면, 이제 Figma로 가져와 실제 디자인에 활용할 차례입니다.

이미지 다운로드: Stable Diffusion에서 생성된 이미지 중 가장 마음에 드는 것을 선택하여 다운로드합니다.
Figma로 드래그 앤 드롭: 다운로드한 이미지를 Figma 캔버스 위로 드래그 앤 드롭하거나, File > Place image 메뉴를 통해 가져옵니다.
디자인에 적용: 가져온 에셋을 원하는 크기로 조절하고, Figma에서 다른 UI 요소들과 함께 배치해보세요. 배경 제거가 필요하다면, Figma의 플러그인(예: Remove BG)을 활용하거나 포토샵 등 외부 툴을 사용해도 좋습니다.

4. 내가 겪은 실수: 시행착오와 해결법 🧐

처음부터 완벽하게 되는 사람은 없겠죠? 저도 수많은 삽질 끝에 이 워크플로우를 익혔답니다. 여러분은 저의 실수를 바탕으로 좀 더 빠르게 성공하시길 바라요!

실수 1: 스케치를 너무 대충 했더니 AI가 엉뚱한 걸 만들어요!

문제점: 어차피 AI가 알아서 해줄 거야!라는 생각으로 너무 추상적이거나 모호하게 스케치했어요. 예를 들어, 커피잔을 그리는데 손잡이를 점 두 개로 표현하거나, 너무 흐릿하게 그린 거죠. ControlNet이 제 의도를 파악하지 못하고 완전히 다른 이미지를 생성했습니다.
해결법: 스케치는 핵심 형태와 외곽선이 뚜렷하게 보이도록 그려야 합니다. AI는 사람처럼 맥락을 파악하기 어렵기 때문에, 명확한 지시를 내려야 해요. 삐뚤빼뚤해도 좋으니, 객체의 주요 특징이 잘 드러나도록 선을 확실하게 그려주세요. 특히 canny 프리프로세서를 사용할 때는 선명한 선이 중요합니다.

실수 2: 프롬프트가 복잡하면 더 잘 나올 줄 알았어요.

문제점: 좋은 결과물을 얻고 싶어서 프롬프트에 온갖 미사여구를 다 때려 박았어요. 그러다 보니 서로 상충되는 키워드들이 들어가거나, 너무 길어져서 AI가 어떤 것에 집중해야 할지 모르는 상황이 발생했습니다.
해결법: 프롬프트는 간결하고 핵심적인 내용부터 시작하세요. 그리고 이미지를 생성하면서 맘에 드는 결과물이 나오면, 그때그때 필요한 디테일을 조금씩 추가하는 방식으로 점진적으로 다듬어 나가는 게 좋습니다. 나무위키처럼 장황하게 설명하기보다, 키워드 사전처럼 필요한 단어들을 정확히 넣어주는 게 효과적이에요.

실수 3: ControlNet 강도 조절을 못해서 스케치랑 너무 다르거나 너무 똑같았어요.

문제점: ControlNet의 Control Weight (강도) 값을 너무 높게 설정하면, AI가 스케치를 사진처럼 너무 맹목적으로 따라 하려다가 오히려 부자연스러운 이미지가 나왔어요. 반대로 너무 낮추면 스케치를 거의 무시하고 AI 마음대로 이미지를 만들어버리더군요.
해결법: 0.6에서 0.8 사이의 값에서 시작하여 원하는 결과물이 나올 때까지 미세하게 조절해보세요. 0.7 정도가 보통 스케치의 형태를 유지하면서 AI의 창의성을 발휘하게 하는 좋은 시작점입니다. Control Weight를 변경할 때마다 어떻게 이미지가 달라지는지 관찰하며 감을 익히는 것이 중요합니다.

실수 4: Figma에서 스케치 내보낼 때 배경 처리를 안 했어요.

문제점: Figma에서 스케치를 내보낼 때, 배경을 투명하게 하거나 흰색으로 채우지 않고 다른 색상의 배경 위에서 내보냈어요. 그랬더니 ControlNet이 스케치 선뿐만 아니라 배경색의 대비까지 고려해서 엉뚱한 윤곽선을 잡으려고 했습니다.
해결법: 스케치 이미지를 내보낼 때는 반드시 흰색 배경 위에 선명한 선으로 그리거나, 투명한 배경에 선만 있도록 내보내세요. ControlNet의 Canny나 Scribble 같은 프리프로세서는 이미지의 가장자리(Edge)를 감지하는 데 최적화되어 있으므로, 배경이 복잡하면 혼란스러워할 수 있습니다.

5. 마무리: 여러분도 해보세요!🚀

어때요? Stable Diffusion과 Figma를 연동하여 아이디어 스케치를 고품질 디자인 에셋으로 전환하는 워크플로우, 생각보다 어렵지 않죠?

이 워크플로우는 단순히 이미지를 만드는 것을 넘어, 디자인 아이디어를 빠르게 시각화하고, 다양한 스타일을 실험하며, 반복 작업의 효율을 극대화하는 강력한 도구가 될 수 있습니다. 저는 이 방법을 통해 디자인 프로세스에서 엄청난 시간을 절약하고, 더 많은 아이디어를 시도해볼 수 있게 되었어요.

처음에는 제가 겪었던 실수들처럼 예상치 못한 결과물에 당황할 수도 있을 거예요. 하지만 수없이 Generate버튼을 누르고, 프롬프트를 수정하고, ControlNet 설정을 만져보는 과정이야말로 여러분의 실력을 향상시키는 가장 좋은 방법입니다. AI는 우리가 명확한 가이드라인을 제시할수록 더 좋은 결과물을 만들어냅니다.

여러분도 오늘 제가 공유한 내용을 바탕으로 직접 실습해보세요! 처음에는 간단한 아이콘부터 시작하여, 점차 복잡한 일러스트나 배경 이미지 등 다양한 에셋에 도전해보는 것도 좋습니다. ControlNet의 다른 프리프로세서(예: Depth, Normal 등)도 탐험해보면 더 무궁무진한 가능성을 발견할 수 있을 거예요.

우리 Design AI LAB에서는 이렇게 함께 배우고 성장하는 것이 가장 중요하다고 생각합니다. 포기하지 않고 꾸준히 연습하면, 어느새 AI를 능숙하게 다루는 여러분 자신을 발견하게 될 겁니다. 궁금한 점이나 더 좋은 팁이 있다면 언제든지 댓글로 공유해주세요!

다음에도 더 쉽고 재미있는 AI 활용 팁으로 돌아올게요. 그때까지 즐거운 디자인 & AI 학습 되세요! 💪

스케치를 고품질 AI 에셋으로! Stable Diffusion & Figma 연동 실전 가이드