2명의 디자이너가 마케팅 사이트를 재구축하기 위해 Figma를 (어느 정도) 버린 방법

원문 발행 2026. 06. 24. 01:04원문 언어 영어AI 한국어 번역Dev.to AI tag 원문 보기

요약

디자이너 2명이 개발자 없이 Claude를 활용해 5주 만에 마케팅 사이트를 재구축한 사례를 다룹니다. Figma를 아이디어 구상용으로 제한하고, 코드를 진실의 원천으로 삼아 AI와 협업하는 새로운 워크플로우를 소개합니다.

우리는 Fern의 두 명의 프로덕트 디자이너(product designers)이며, 최근 개발자의 도움 없이 5주 만에 buildwithfern.com 사이트를 재구축했습니다. 블로그에서 언급할 만한 세 가지 사항은 다음과 같습니다:

Figma는 매우 비싼 가상 화이트보드(virtual whiteboard)가 되었습니다. 여전히 우리의 작업 루프(loop)에 포함되어 있지만, 아이디어 구상(ideation)과 무드보딩(moodboarding)을 위한 시작점으로만 사용됩니다. 그 후 우리는 반복 작업(iteration)을 위해 claude.ai/design으로 빠르게 이동하고, 구축을 위해 Claude Code를 사용합니다. 진실의 원천(source of truth)은 Figma 파일이 아니라 코드입니다.
흔히 AI가 작업의 80%를 수행하고 인간이 마지막 20%를 마무리한다는 이해가 일반적입니다. 하지만 우리는 이것이 25/50/25에 더 가깝다는 것을 발견했습니다. 즉, 인간이 초기에 취향(taste)을 설정하고, AI가 중간 과정을 수행하며, 인간이 마지막에 다듬기(polish)를 합니다.
우리가 저지른 가장 큰 프롬프팅(prompting) 실수는 결과물(output) 대신 구현 방식(implementation)을 설명한 것이었습니다. 벡터 너비(vector widths), 곡선 끝점(curve endpoints), 선 길이(line lengths)를 지정하여 푸터 애니메이션(footer animation)을 구축하려고 했을 때, 결과물은 취약하고 생동감이 없었습니다. 하지만

AI 자동 생성 콘텐츠