인프런 커뮤니티 질문&답변

Meaw

작성한 질문수

디자인 시스템 with 피그마

토큰스튜디오의 동기화

안녕하세요! 강의잘 들었습니다.

해결된 질문

작성

수정됨

좋은강의 잘 들었습니다 :) 아토믹디자인 시스템에대한 원리와 개발자 관점(?)에서의 구조적 설명이라 조금 더 원론적으로 잘 와닿았어요! (후반부에 실제로 git에 푸시하고 동기화하는 내용이 참 흥미로웠어요)

저는 프론트엔드 국비 6개월과정을 2년전에 수강하구 작은 회사에서 디자인겸 퍼블리싱을 같이한지 만 1년된 주니어 퍼블리셔입니다.

회사에서 개발인력이 백엔드개발자와 저밖에없고, 그동안 피그마를 못다뤄서 화면 만들 때 v0에서 그럴듯해보이는 적절한 템플릿을 먼저 다운받아서 tailwind.config를 수정하고 그뒤에 컴포넌트들 스타일을 AI 활용해서 원하는 방향으로 수정하면서 디자인을 해왔습니다. . 그러다 성장에대한 한계를 느껴서 피그마를 배웠고

이제는 강의로 사용법이나, 디자인시스템에대한 개념도 잡히는것 같아요 (테일윈드 기반으로 ai를통해 기본 토큰을 만들어서 넣어두고 그것을 시스템 삼아서 연습해보았어요)

문제는 이제 피그마 작업물 -> 개발환경 퍼블리싱 구현을 제가 하게되면 , 26년 현재 기준에서 어떤 방법이 가장 수월할지 고견을 여쭙고싶습니다.

회사에서 codex나 claudecode를 툴을 사용하고있어서 AI를 활용하면 ...우당탕탕 어찌저찌 조금씩 구현은 될것 같은데 ..실무기준에서 방향성을 알려주시면 그쪽으로 더 공부해보려 합니다 !

스크린샷과 전반적인 컴포넌트 효율적인 재사용을 위한 프롬프트를 잘 전달하는것? 아니면 mcp(전혀 모르지만..)

요즘 피그마완성본을 요즘개발환경으로 최대한 유사하게 제품화 하기에어떤방법이 가장 많이 쓰이며, 어떤점을 공부하면 도움이 될지 고견주시면 너무나 감사하겠습니다!

figma figma-tokens 디자인-시스템 아토믹-디자인 프로덕트디자인

답변 2

범쌤

지식공유자

안녕하세요 Meaw님 😀

제 강의를 좋게 봐주셔서 감사드립니다.

지금 말씀해주신 상황을 보면 굉장히 좋은 방향으로 성장하고 계신 것 같습니다.

제가 말씀드리는 내용은 지극히 제 주관이므로 참고정도만 해주시면 좋을 것 같습니다 ^^;

질문주신 피그마에서 개발로 handoff하는 과정을 어떻게 하는 것이 좋을까? 는

요즘 실무에서는 자동화 방식(MCP)까지는 아직 이른 단계입니다.

요즘 여러 ai 도구들이 figma를 코드로 변환해 주긴 하지만

아직까진 참고용으로 사용하는 경우가 많습니다.

"유튜브나 다른곳에서는 바로 배포까지 해서 쓰던데요?" 라는 질문을 하실수도 있을 것 같습니다만

그건 후킹이거나 광고용으로 가벼운 포트폴리오 사이트와 단발성 (유지보수가 필요없는) 사이트들에 한에서만 가능한 이야기입니다.

실제로 기업에서 사용하는 정밀하게 고도화된 서비스를 피그마가 가지고있는 전반적인 시스템까지 연결시키면서 자동으로 개발까지 해주는 영역은 아직 미비합니다.

물론 ai에게 instrction을 주기적으로 심어주고 LLM을 어느정도 학습시킨다면 비슷(?)하게 만들 수는 있지만. 여전히 사람의 손을 거쳐야 하는 단계는 존재합니다.

그렇다고 ai를 배제하라는 얘기는 아닙니다. 이렇게 빠르게 세상이 변하는 만큼, ai를 어떻게 잘 활용할 것인가에 대해서는 늘 궁금증과 관심을 가지고 들여다 봐야하는 문제인것이라 생각합니다 😀

(언젠가는 대체가 될겁니다)

지금으로서는 잘 구축된 시스템을 가지고 개발단에서 변환하여 토큰을 잘 사용하여 중복되지 않는 컴포넌트들을 개발하는 플로우를 공부해보시는게 좋을 것 같습니다.

그럴려면 퍼블리셔를 넘어서서 프론트엔드 개발의 영역까지 건드려야 하기 때문에(실제로 시스템과 컴포넌트를 사용한느 이유는 리액트와 뷰같은 컴포넌트 중심의 라이브러리때문인 경우가 많습니다)

그 시너지를 온전히 느끼시려면 개발을 좀 더 깊게 공부해 보시는걸 추천드립니다.

정리하자면 ai와 mcp는 아직까지 코드 생성기 보다는 구현 보조 도구로 사용하시는게 바람직하되, 항상 새로운 모델이 등장할 때마다 관심을 가져야 한다..? 정도로 보시면 될 것 같고

공부의 추천 방향은 디자인토큰을 컴포넌트에 어떻게 잘 녹여낼 수 있는지 그럴려면 프론트엔드쪽을 공부하셔야 할 것 같습니다. 컴포넌트에 대해 더 배우고자 한다면 storybook까지 가시면 좋을 것 같습니다. [Component Drivent Development] 줄여서 CDD라고 합니다 ^-^

완강 해주셔서 감사합니다 :)

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. 박노영님께서 질문하신 피그마 작업물의 개발 환경 퍼블리싱 구현에 관하여 조언을 드리고자 합니다.

현재 피그마로 디자인한 화면을 실제 개발 환경에서 구현하는 방법에는 여러 가지가 있습니다. 이 과정에서 중요한 점은 디자인과 구현 간의 갭을 최소화하는 것입니다. 여기 몇 가지 방법을 추천드립니다:

디자인 토큰 활용:
- 피그마와 같은 디자인 도구에서 디자인 토큰을 정의하고, 이를 JSON 형식으로 내보낸 후 개발 환경에서 사용하는 방법이 유용합니다. 이렇게 하면 디자인과 코드의 일관성을 유지할 수 있습니다. 이와 관련된 더 자세한 내용은 “프론트에서 json파일을 가공하여 사용하는 방법” 게시물을 참고해 주세요.
디자인 시스템 구축:
- 작은 팀이라도 디자인 시스템을 갖추면 일관성 있는 UI를 제공할 수 있습니다. 피그마에서 디자인 시스템을 구축하고 이를 컴포넌트화하여 재사용 가능한 상태로 만드는 것이 중요합니다. “토큰스튜디오 / 로컬베리에이블” 게시물에서 디자인 시스템 구축 시 고려할 사항들을 살펴보세요.
통합 도구 활용:
- 제플린(Zepellin), Abstract 같은 도구는 디자이너와 개발자 간의 효율적인 협업을 지원합니다. 디자인 명세를 정확하고 일관되게 전달하기 위해 이러한 툴을 활용해 보세요.
코드 기반 디자인 툴:
- Storybook 같은 툴을 사용하여 디자인한 컴포넌트를 코드 형식으로 만들어 실시간으로 미리 보고 테스트할 수 있습니다. 이는 특히 컴포넌트 기반 프레임워크(React 등)에서 아주 유용합니다.
AI 기반 변화 추적:
- Codex나 Claudecode 같은 툴을 사용하여 AI 기반으로 코드 변환을 시도하는 것도 검토해볼 가치가 있습니다. 그러나, 이 툴들은 아직 실험적인 측면이 있으니 항상 결과를 리뷰하고 필요한 수정 작업을 거쳐야 합니다.
프롬프트 개선:
- AI 기반 툴을 사용할 때는 프롬프트의 정확성과 세부사항이 중요합니다. 프롬프트를 정확하게 제공하고 원하는 대로 스타일링을 가이드하는 연습을 계속해보세요.

앞으로 나아갈 방향을 설정하실 때는 우선 현재 팀의 요구사항과 개발 환경을 고려하고, 효율적인 작업 방식을 찾아가시는 것이 중요합니다. 각 도구와 방법의 장단점을 비교하면서 최적의 조합을 찾아보세요.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

Meaw

작성한 질문수

전체 Q&A

질문하기