지금까지는 같은 버튼 하나도 기획서 · 피그마 · 개발 화면에서 제각각 다시 그리고 다시 만들었습니다. 우리가 만들려는 건, 그 버튼을 딱 한 번 정의해두고 모두가 그 하나를 가져다 쓰는 구조예요. 이 문서는 그걸 위해 등장한 낯선 단어들(shadcn, Storybook)이 무엇인지, 어떤 프로세스를 만드는지, 효과는 무엇인지, 그리고 Claude가 어디에 붙는지를 정리한 자료입니다.
화면마다 버튼·입력창이 조금씩 다름. 기획→디자인→개발에서 계속 다시 그림.
부품을 한 곳(코드)에 정의 = "단일 원본". 모두가 그 하나를 공유.
일관성 ↑ · 다시 만드는 시간 ↓ · 기획·디자인·개발이 같은 언어로 소통.
전부 "부품"에 대한 이야기예요. 창고 비유로 한 번에 정리합니다.
부품 창고
버튼·카드·입력창·달력 같은 완성된 화면 부품 모음이에요. 수십 종을 제공합니다. 우리는 이걸 우리 디자인의 "원본(기준)"으로 삼습니다.
부품 도감
그 부품들을 하나씩 진열하고 설명하는 카탈로그예요. "이 버튼은 이렇게 생겼고, 이렇게 씁니다"를 눌러보며 확인하는 온라인 도감입니다.
도면 작업대 (이미 사용 중)
우리가 이미 쓰는 디자인 도구. 여기에 그 부품들을 라이브러리로 가져와, 기획자·디자이너가 같은 부품으로 화면을 조립합니다.
세 곳(Figma · Storybook · 실제 코드)이 어긋나지 않게 "같은 부품"으로 묶어주는 도구입니다. 중요한 점: 이건 디자인을 보고 코드를 새로 만들어내는(생성) 게 아니라, "이 Figma 부품 = 이미 있는 그 코드 부품"이라고 연결(link)해주는 역할이에요. 이름은 아래 후보 중 하나로 확정 대기 중입니다.
Figma 부품 ↔ 코드 부품 매핑. shadcn과 세트로 가장 많이 쓰임.
Figma 부품 ↔ Storybook 도감을 연결. "개발이 Storybook으로 만든다"와 맞물림.
핵심은 전 구간에서 "같은 부품 하나"가 흐른다는 것. 새로 그리는 지점이 없습니다.
지금 우리 Figma DS엔 부품이 일부만 있습니다(예: 60종). shadcn이 주는 목록을 참고해 실제로 쓸 부품만 채워 넣으며 코드 원본으로 만듭니다. (전부 채울 필요 없음 — 쓸 것만)
이제 Figma 안에서 "코드와 똑같은 부품"을 재료로 쓸 수 있습니다.
같은 부품으로 화면 기획·화면설계서를 구성.
디자이너가 동일한 부품으로 세부 디자인.
기획·디자인이 쓴 그 부품이 그대로 개발 코드가 됩니다. 다시 만들 필요 없음.
기획서의 버튼 = 디자인의 버튼 = 개발의 버튼 = 실제 화면의 버튼. 전부 하나.
화면마다 다르던 버튼·간격·색이 통일됩니다. 브랜드가 정돈돼 보여요.
기획·디자인·개발이 부품을 다시 만들지 않으니 각 단계가 빨라집니다.
"그 버튼(Primary Button)"처럼 같은 부품 이름으로 대화. 오해가 줄어듭니다.
부품 하나를 고치면 그 부품을 쓰는 모든 화면에 한 번에 반영됩니다.
접근성·반응형·상태(hover/비활성)가 부품에 이미 들어 있어 놓치기 어렵습니다.
Storybook 도감만 보면 "우리 부품이 뭐가 있는지" 바로 파악할 수 있습니다.
핵심 아이디어: 이 파이프라인의 대부분은 "코드 쓰기 · 문서화 · 연결 작업"이라 손이 많이 갑니다. Claude가 그 손을 대신하면, 기획자가 코드를 몰라도 파이프라인 전 구간을 돌릴 수 있습니다. Claude는 특정 한 단계가 아니라 전 구간의 자동화 조수로 붙습니다.
shadcn 부품 추가, 사내 색·폰트(디자인 토큰)를 코드에 주입하는 작업을 Claude가 대행합니다.
기획자가 말로 요구 → Claude가 그 부품들로 화면 프로토타입·화면설계서 초안 생성.
Figma↔코드 연결(매핑) 파일 작성을 Claude가 자동 생성. (연결 툴 확정 후)
Storybook 진열용 스토리·사용 가이드를 자동으로 작성합니다.
부품을 바꾸면 스토리·문서·Figma 연결까지 어긋난 곳을 Claude가 찾아 맞춰줍니다.