곽혜림

Figma MCP, 기획자가 실무에서 쓰는 5가지 방법 - 코드 변환만 되는 것이 아닙니다

2025-11-16T23:00:14Z

이전 글에서 화면을 React나 HTML로 바꾸는 과정을 테스트하는 Figma MCP의 코드 변환 기능에 대해 다룬 적이 있습니다. 하지만 실제로 제가 Figma MCP를 가장 많이 쓰는 건 코드 변환이 아닙니다. 실무에서는 프로덕트 기획자로서 문서 작성, 시나리오 검증, 디자인 리뷰 과정에서 훨씬 자주 활용하고 있는데요. 주석을 자동으로 작성하거나, 놓

Figma Make로 하루만에 만든 프로토타입 - 번역부터 지도, 블로그 검색까지 전부 구동되는

2025-11-07T05:46:07Z

최근 디자이너 커뮤니티에서 Figma Make가 주목받고 있습니다. 단순한 프로토타이핑을 넘어, 실제로 사용자 입력을 받고 데이터를 처리하는 인터랙티브한 결과물을 만들 수 있기 때문입니다. 이러한 관심에 힘입어, Figma는 지난주 Schema by Figma에서 Make의 기능 확장 계획을 공개하기도 했는데요. Figma에서 라이브러리를 직접 가져올 수

AI로 마이크로 애니메이션 만들기 - Magic Animator, Figma Make, Cursor 비교

2025-09-01T02:54:16Z

몇 번의 클릭만으로 애니메이션을 만들 수 있다? 디자이너라면 이런 말에 마음이 움직입니다. 작은 애니메이션 하나라도 만드는 데는 시간이 적잖이 들기 때문입니다. 보통은 Figma 프로토타입으로 속성을 전달하거나 Lottie 툴로 파일을 추출해 개발팀에 넘기게 되는데, 이 때 키프레임 단위로 속도와 상태를 조정하며 테스트하는 과정은 꽤 번거롭고 시간이 오래

Figma MCP로 실무에 쓸 수 있는 코드 만들기 - 컴포넌트화 + Tailwind CSS + Shadcn UI 조합

2025-06-03T00:29:35Z

Figma MCP + Tailwind CSS + Shadcn 실무 코드 자동화 실험기 이전 글에서 Figma MCP를 활용하여 디자인 화면을 코드로 변환하는 실험을 소개한 바 있습니다. 예상보다 높은 수준의 코드가 출력되었고, 디자인-코드간 일치도가 높다는 점에서 가능성을 확인할 수 있었습니다. 하지만 디자인 한두 장을 코드로 바꾸는 것과, 하나의 프로젝

Figma MCP 사용법과 코드 변환 테스트 후기 - 디자인만 했는데 코드가 나왔다

2025-06-17T23:55:16Z

디자인을 코드화할 수 있다면? 최근 디자인 커뮤니티에서 ‘Figma MCP’라는 용어가 자주 언급되고 있습니다. MCP는 ‘Model Context Protocol’의 약자로, AI 코딩 에이전트가 Figma 디자인 데이터를 활용할 수 있도록 연결해주는 구조입니다. Cursor라는 개발 환경에서 Figma 링크를 입력하고 “이 화면을 구현해줘”라고 요청하면

미드저니, 프로젝트에 활용할 때 주의할 점 7가지 - 디자이너와 기업이 꼭 알아야할 저작권 / 라이선스 이슈

2025-02-20T07:43:57Z

이거, 미드저니로 만들어보면 어떨까요? 생성형 AI 시대가 본격화되면서, 미드저니(Midjourney)와 같은 이미지 생성 AI를 디자인에 활용하는 사례가 눈에 띄게 증가하고 있습니다. 저 역시 고객들로부터 문의를 받거나, 때로는 제가 먼저 제안하는 빈도가 부쩍 는 것 같습니다. 실무에서 미드저니의 활용도가 높아짐에 따라 저작권 및 라이선스에 대한 정확한

사람들이 ChatGPT를 Gemini보다 신뢰한 이유 - 생성형 AI 플러그인, 사용자는 어떻게 이해하고 있을까?

2025-02-20T02:47:37Z

생성형 AI의 플러그인 기능을 경험해 보셨나요? 플러그인을 활용하면 AI 채팅 인터페이스에서 실시간 항공권 예약은 물론, 음성 생성, 문서 작업 등 다양한 작업을 수행할 수 있습니다. 대표적인 예로 ChatGPT의 '탐색하기' 섹션에 접속하면 다양한 플러그인을 발견하고 무료로 이용할 수 있습니다. 이러한 생성형 AI를 중심으로 한 "생태계"가 급속도로

프리텐다드 vs 노토산스 vs 스포카 vs 인터롭 -2 - 본고딕 폰트 4종 비교 - 2편. 경량화

2025-02-20T06:41:58Z

지난 글 : 1편. 활자 디자인 비교 지난 글에 이어, 이번에는 본고딕 기반 본문 폰트 4종의 파일 사이즈와 용량을 중심으로 비교해보겠습니다. 폰트 파일 사이즈는 사용성과 밀접한 관련이 있습니다. 파일 크기가 작을수록 페이지 로딩 속도가 빨라져 사용자에게 더 쾌적한 경험을 제공할 수 있습니다. 따라서 디자인이 유사한 폰트라면 가벼운 쪽을 선택하는 것이

프리텐다드 vs 노토산스 vs 스포카 vs 인터롭 -1 - 본고딕 폰트 4종 비교 - 1편. 활자 디자인

2025-02-20T06:40:28Z

새로운 UI/UX 프로젝트를 시작할 때 가장 중요한 디자인 결정 중 하나는 본문 폰트 선택입니다. 본문 폰트는 사용자가 인터페이스에서 가장 오래 접하는 요소로, 서비스의 가독성과 사용성에 직접적인 영향을 미칩니다. 특히 모바일 환경에서는 작은 화면에서도 긴 시간 읽기 편한 폰트 선택이 더욱 중요해졌습니다. 본문 폰트는 단순한 심미적 선택을 넘어 여러 기술

웹 접근성 준수, HCT 색공간으로 해결하기 - WCAG 기준을 쉽게 충족할 수 있도록 도와주는 컬러 시스템

2025-02-19T06:36:18Z

UI/UX 디자인에서 색상 대비(Color Contrast)는 사용자 경험의 핵심 요소입니다. 저시력자, 고령자뿐 아니라 다양한 환경에서 서비스를 이용하는 모든 사용자를 위해 적절한 대비는 필수적입니다. 이러한 색상 대비의 중요성을 반영하여 웹 표준 기구인 W3C는 웹 콘텐츠 접근성 지침(WCAG)을 통해 구체적인 기준을 제시하고 있습니다. WCAG는 텍

디자인 시스템, 실제로 어떤 결과물이 나오나요? - 피그마 중심의 워크 프로세스

2025-01-28T02:41:16Z

근래의 디자인 시스템은 단순 가이드를 넘어 실시간 공유되는 도구의 모음으로 발전했습니다. 디자인 시스템의 결과물 또한 정적인 문서를 넘어 동적인 체계, 재사용성 높이는 UI 개발 프로세스 자체에 가까운 의미로 변화하게 되었습니다. 하지만 디자인 시스템이 고도화 될수록 처음 이 시스템을 도입하는 입장에서는 그 실체를 이해하기 어려운데요, 이 글은 디자인 시스