figma·2026년 6월 24일·3분 읽기큐레이션 요약

피그마 캔버스에서 코딩하기 | 피그마 블로그

Figma는 코드 레이어를 통해 실행 가능한 코드를 디자인 캔버스 안에서 생성·비교·수정할 수 있도록 한다. 디자이너와 개발자는 코드와 디자인을 오가는 대신 같은 Figma 파일에서 아이디어를 함께 탐색하고, 팀의 피드백을 반영하며, 최종 코드를 저장소에 반영할 수 있다. 코드 레이어는 디자인과 개발의 경계를 좁혀 협업 중심의 프로토타이핑을 가능하게 하는 기능이다. ## 캔버스에서 코드 시작하기 - Figma Design의 툴바에서 코드 레이어를 추가하거나, 기존 프레임을 코드로 변환할 수 있다. - Figma Agent에게 원하는 결과를 설명해 코드를 생성할 수도 있다. - 템플릿에서 시작하거나 직접 만들고 싶은 내용을 프롬프트로 입력할 수 있다. - GitHub 저장소를 가져오거나 로컬 폴더를 업로드해 기존 코드베이스를 불러올 수 있다. - Figma Make에서 생성·수정한 코드도 캔버스의 코드 레이어로 가져와 팀과 공유할 수 있다. ## 여러 대안을 나란히 비교하기 - 기존 프레임을 복제해 여러 디자인 방향을 시험하듯 코드 레이어도 복제해 대안을 만들 수 있다. - 실제로 작동하는 화면을 캔버스에서 비교하므로 정적인 시안만 볼 때보다 사용 경험을 구체적으로 평가할 수 있다. - 요소를 이동·조정·리사이즈하면 코드에 즉시 반영된다. - 프롬프트로 새 버전을 생성하면서도 기존 버전은 보존할 수 있다. - 팀원은 공유 파일 안에서 댓글을 남기거나 동일한 코드 레이어를 대상으로 Agent에 추가 작업을 요청할 수 있다. ## 코드와 디자인 레이어 오가기 - `Extract designs` 기능을 사용하면 코드의 현재 상태를 편집 가능한 Figma 레이어로 변환할 수 있다. - 전체 화면뿐 아니라 특정 화면, 상태, 사용자 플로우만 선택해 캔버스로 가져올 수 있다. - 코드로 구현된 인터랙션과 상태를 시각적으로 분석하고, 일반적인 Figma 디자인 요소처럼 편집할 수 있다. - 캔버스에서 수정한 내용은 한 번의 클릭으로 코드 레이어에 업데이트할 수 있어 디자인과 구현 사이의 반복 작업이 짧아진다. ## 코드 편집과 저장소 반영 - 코드 에디터에서 원하는 변경 사항을 주석이나 설명으로 작성하고 Agent에게 수정을 요청할 수 있다. - 필요하면 개발자가 직접 코드를 편집할 수도 있다. - 수정 결과를 다시 코드 레이어로 변환해 팀에 공유할 수 있다. - 최종적으로 확정한 변경 사항은 저장소에 push해 실제 소스 코드에 반영할 수 있다. - 따라서 Figma 캔버스는 단순한 시각화 공간이 아니라, 아이디어 탐색부터 코드 변경 및 공유까지 이어지는 협업 환경이 된다. ## 출시 계획 - 코드 레이어는 2026년 6월 기준 향후 몇 주 동안 비공개 베타로 제공될 예정이다. - 초기 접근 권한은 Figma의 베타 신청 페이지를 통해 요청할 수 있다. - 기능 세부 사항과 Config에서 발표된 다른 업데이트는 Figma Help Center와 Figma Learn에서 확인할 수 있다. 실무에서는 코드 레이어를 최종 구현을 자동화하는 도구라기보다, 디자인·개발팀이 여러 구현안을 빠르게 실험하고 합의하는 공동 프로토타이핑 환경으로 활용하는 것이 적합하다. 특히 기존 코드베이스를 불러와 실제 동작을 검토한 뒤 디자인과 코드를 반복적으로 조정하는 워크플로에 유용하다.

원문 읽기(새 탭에서 열림)

code-generationFigmaAI 에이전트React+2

figma·2026년 4월 15일·3분 읽기큐레이션 요약

MCP 핵심 요약: 컨텍스트의 중요성과 활용 방법 | Figma 블로그

MCP(Model Context Protocol)는 AI가 Figma의 디자인 파일과 컴포넌트, 토큰, 레이아웃 결정 같은 맥락을 코드 작성 도구에서 활용하도록 연결한다. 이를 통해 AI가 단순히 화면을 모방하는 대신 디자인 시스템에 맞는 코드를 생성하고, 코드와 캔버스를 오가며 제품을 반복적으로 개선할 수 있다. 글의 결론은 MCP의 효과가 기술 자체뿐 아니라 팀이 얼마나 구조적이고 일관된 디자인 맥락을 구축했는지에 달려 있다는 것이다. ## MCP가 제품 개발에 필요한 이유 - MCP는 AI 도구가 팀이 사용하는 도구와 데이터에서 맥락을 가져올 수 있도록 하는 표준화된 연결 방식이다. - 기존 제품 개발의 선형적인 흐름은 디자인 → 개발 순서로만 진행되지 않는다. - 팀은 필요에 따라 어느 단계에서든 시작한다. - 개발 중 디자인으로 돌아가거나, 완성된 UI를 다시 캔버스에서 검토할 수 있다. - Figma MCP 서버는 디자인 정보를 개발자의 코드 작성 환경으로 전달한다. - 반대로 코드로 구현된 실제 UI를 Figma 캔버스로 가져와 탐색·수정하고, 다시 개발 환경으로 돌려보낼 수도 있다. ## 스크린샷만 보는 AI의 한계 - AI 코딩 도구가 Figma 화면만 참고하면 최종 결과의 시각적 형태만 파악하고, 그 결과를 만든 설계 의도는 알기 어렵다. - 예를 들어 AI는 다음과 같은 문제를 일으킬 수 있다. - 브랜드 색상과 비슷하지만 실제 토큰에 연결되지 않은 색상을 선택한다. - 팀이 반복적으로 사용한 기존 카드 컴포넌트 대신 새 카드를 처음부터 만든다. - 여러 중첩 컴포넌트로 구성된 폼을 하나의 단순한 요소로 평탄화한다. - 결과물은 겉보기에는 비슷해도 디자인 시스템에서 벗어난 코드가 되고, 화면과 컴포넌트가 늘어날수록 불일치가 누적된다. - MCP는 컴포넌트, 디자인 토큰, 레이아웃 구조 등 Figma 파일의 구조화된 정보를 AI에 제공해 이러한 번역 오류를 줄인다. ## 디자이너에게 달라지는 점 - 디자인 시스템은 제품의 시각적 일관성을 유지하는 수단을 넘어, AI가 생성하는 코드의 품질과 방향을 결정하는 입력값이 된다. - 파일의 구조와 명명, 컴포넌트 재사용성, 토큰의 일관성이 AI 생성 결과에 직접 영향을 준다. - AI가 대규모로 코드를 생성하기 때문에 작은 파일 정리 문제도 여러 화면에 반복될 수 있다. - 과거에는 개발자가 구현 과정에서 한 번 수정하면 끝날 문제가 될 수 있었다. - 이제는 하나의 불일치가 AI를 통해 여러 곳에 복제될 수 있다. - MCP를 사용하면 개발자가 코드로 구현한 결과를 디자이너가 다시 캔버스에서 확인할 수 있다. - 디자이너는 누락된 상태를 추가하고 세부 사항을 다듬어, 기존 구현을 다시 만드는 대신 제품을 완성도 있게 개선할 수 있다. ## 개발자에게 달라지는 점 - AI 코딩 도구는 개발 속도를 높이지만, 디자인 맥락이 없으면 개발자가 디자인 의도를 코드로 번역하는 작업을 여전히 직접 해야 한다. - MCP는 개발 도구 안에서 다음 정보를 활용할 수 있게 한다. - 재사용해야 할 컴포넌트 - 색상·간격·타이포그래피 등의 디자인 토큰 - 레이아웃과 계층 구조 - 디자인 시스템에 포함된 구성 방식 - 따라서 개발자는 화면을 추측하거나 비슷하게 재현하는 데 쓰는 시간을 줄이고, 실제 기능 구현과 제품 완성도 향상에 집중할 수 있다. - 디자인과 코드가 연결된 상태로 유지되므로 구현 과정에서 발생한 차이를 더 빠르게 발견하고 수정할 수 있다. ## 디자인 시스템이 AI 품질을 좌우한다 - MCP의 성능은 연결 방식만으로 결정되지 않고, AI가 읽는 디자인 파일의 품질에 크게 의존한다. - 명확하게 정리된 컴포넌트와 토큰은 AI가 일관된 결과를 생성하도록 돕는다. - 반대로 중복 컴포넌트, 불명확한 이름, 임의의 스타일 값이 많으면 AI가 잘못된 패턴을 학습하고 이를 여러 곳에 확산시킬 수 있다. - 디자인 시스템은 AI 기반 워크플로에서 생산성을 높이는 기준점이자, 생성 결과가 브랜드와 제품 규칙에 맞도록 제한하는 장치가 된다. 실무적으로는 Figma 파일을 AI가 읽기 쉬운 구조로 정리하고, 컴포넌트·토큰·상태를 명확히 관리하는 것이 우선이다. MCP는 디자인 시스템을 대체하는 기술이 아니라, 잘 구축된 디자인 시스템을 개발과 AI 생성 과정에 연결해 주는 기술로 활용해야 한다.

원문 읽기(새 탭에서 열림)

code-generationFigmaAI디자인 시스템+3

gitlab·2026년 1월 15일원문

GitLab Duo 에이전트 (새 탭에서 열림)

GitLab은 개발자가 코드를 작성하는 시간을 넘어 소프트웨어 개발 수명 주기(SDLC) 전반의 혁신 속도를 높이기 위해 'GitLab Duo Agent Platform'의 정식 출시(GA)를 발표했습니다. 이 플랫폼은 단순히 코드를 생성하는 수준을 넘어, 지능적인 오케스트레이션과 에이전트 기반 AI 자동화를 통해 코드 리뷰, 보안 점검, 파이프라인 최적화 등 기존의 병목 구간을 해결하는 데 초점을 맞춥니다. 결과적으로 팀은 인간과 AI의 유기적인 협업을 통해 복잡한 작업을 자율적으로 수행하고 전체 개발 프로세스를 가속화할 수 있습니다. ### AI 패러독스 해결과 통합된 협업 경험 * **AI 패러독스 극복:** 개발자가 코드 작성에 할애하는 시간은 전체의 약 20%에 불과하며, 나머지 80%의 업무에서 발생하는 병목 현상을 해결하기 위해 에이전트 중심의 접근 방식을 도입했습니다. * **통합 UX:** GitLab 웹 UI와 IDE(VS Code, JetBrains, Cursor, Windsurf 등) 전반에서 'Duo Agentic Chat'을 사용할 수 있으며, 이슈, 병합 요청(MR), 파이프라인 활동 내에서 AI와 실시간으로 소통할 수 있습니다. * **상황 맥락 인식:** 단순 응답을 넘어 이슈, 보안 결과물, 파이프라인 상태 등 전체 수명 주기의 맥락을 이해하고 다단계 추론을 통해 정확한 가이드를 제공합니다. ### 지능형 에이전틱 채팅의 주요 기능 * **분석 및 분석:** 웹 UI에서 이슈, 에픽, MR을 생성하거나 요약할 수 있으며, 복잡한 프로젝트 구조와 의존성을 파악하는 데 도움을 줍니다. * **코드 및 인프라 자동화:** 다양한 언어와 프레임워크에 걸쳐 코드, 구성 파일, IaC(Infrastructure-as-Code)를 생성하며 버그 수정 및 아키텍처 현대화를 지원합니다. * **CI/CD 및 보안:** 기존 파이프라인의 문제를 해결하거나 새로 구축하며, 보안 취약점을 설명하고 도달 가능성에 기반해 수정 우선순위를 제안합니다. ### 전문화된 에이전트 시스템 * **기본 에이전트(Foundational Agents):** GitLab 전문가들이 사전 구축한 에이전트로, 업무를 구조화하는 'Planner Agent'와 취약점 영향을 분석하는 'Security Analyst Agent'가 포함됩니다. * **커스텀 에이전트(Custom Agents):** 조직 고유의 표준과 가이드라인을 학습시킨 에이전트를 'AI Catalog'를 통해 관리하고 공유할 수 있습니다. * **외부 에이전트(External Agents):** Anthropic의 Claude Code나 OpenAI의 Codex CLI와 같은 외부 AI 도구를 GitLab 플랫폼 내에서 네이티브하게 연결하여 사용할 수 있습니다. ### 복잡한 업무를 처리하는 자동화 플로우(Flows) * **Issue to MR 플로우:** 잘 정의된 이슈로부터 구조화된 병합 요청(MR)을 자동으로 생성하여 개발 착수 시간을 단축합니다. * **CI/CD 전환 및 수정:** 타 시스템의 파이프라인 구성을 GitLab CI/CD로 현대화하거나, 실패한 파이프라인을 분석하여 변경 사항을 제안합니다. * **코드 리뷰 플로우:** 코드 변경 사항과 댓글을 분석하여 AI 기반의 심층적인 피드백을 제공함으로써 리뷰 프로세스를 간소화합니다. ### 사용 권한 및 새로운 과금 체계 * **GitLab Credits 도입:** 사용량 기반 과금 방식인 'GitLab Credit'을 통해 에이전트 플랫폼을 이용할 수 있습니다. * **구독별 혜택:** Premium 구독자에게는 사용자당 월 $12, Ultimate 구독자에게는 월 $24 상당의 크레딧이 추가 비용 없이 매월 제공됩니다. * **기존 고객 전환:** Duo Pro 또는 Enterprise 사용자는 기존 계약 잔여분을 크레딧으로 전환하여 즉시 에이전트 플랫폼으로 마이그레이션할 수 있습니다. GitLab Duo Agent Platform은 단순한 AI 비서를 넘어 실제 업무를 수행하는 '가상 팀원'을 제공합니다. 조직의 생산성을 높이기 위해서는 먼저 기본 제공되는 Planner 및 Security 에이전트를 활용해보고, 점진적으로 조직 특화된 커스텀 에이전트와 자동화 플로우를 구축하여 개발 전체 사이클의 효율을 극대화할 것을 권장합니다.

code-generation데이터베이스 설계AI 에이전트CI/CD+4

airbnb·2025년 10월 30일원문

LLM 및 @generateMock (새 탭에서 열림)

에어비앤비는 LLM과 제품 컨텍스트를 결합한 `@generateMock` 지시어를 도입하여, 수동으로 작성하던 GraphQL 모의 데이터 생성 과정을 자동화하고 혁신했습니다. 이 시스템은 단순한 랜덤 값 생성을 넘어 쿼리 정의, 스키마 주석, 그리고 디자인 목업 이미지까지 컨텍스트로 활용해 실제 서비스 환경과 매우 흡사한 타입 안정적(Type-safe) 데이터를 생성합니다. 이를 통해 개발자는 백엔드 구현을 기다리지 않고도 고품질의 데모와 테스트를 수행할 수 있으며, 쿼리 변경에 따른 모킹 데이터의 관리 부담을 획기적으로 줄였습니다. ### 기존 모킹 방식의 한계와 도전 과제 * **수동 작업의 비효율성:** 수백 줄에 달하는 GraphQL 쿼리에 대응하는 JSON 데이터를 직접 작성하고 수정하는 과정은 매우 번거롭고 실수에 취약합니다. * **병렬 개발의 병목:** 서버 스키마가 확정된 후에도 실제 API가 구현될 때까지 클라이언트 개발자는 UI 테스트를 진행하기 어려워 임시방편(하드코딩, 로컬 프록시 등)에 의존하게 됩니다. * **데이터의 동기화 문제:** 쿼리나 스키마가 진화함에 따라 수동으로 작성된 모의 데이터는 점차 실제 프로덕션 환경과 괴리가 생기며, 이는 테스트 신뢰도 저하로 이어집니다. ### @generateMock 지시어를 통한 선언적 모킹 * **지시어 기반 워크플로우:** 개발자는 `.graphql` 파일의 연산, 프래그먼트, 또는 특정 필드에 `@generateMock` 지시어를 추가하는 것만으로 모의 데이터를 정의할 수 있습니다. * **주요 파라미터 활용:** * `id`: 여러 버전의 모의 데이터를 생성할 때 식별자로 사용하며, 생성된 헬퍼 함수의 이름에 반영됩니다. * `hints`: "파리, 교토로 가는 여행 일정을 포함해달라"와 같이 LLM에게 구체적인 데이터 생성을 지시하는 자연어 가이드를 제공합니다. * `designURL`: 디자인 도구(Figma 등)의 URL을 입력하면 LLM이 실제 디자인 화면의 텍스트와 레이아웃에 부합하는 데이터를 생성합니다. * **로컬 개발 도구 통합:** 에어비앤비의 코드 생성 도구인 'Niobe'와 결합되어, 코드 생성 시 JSON 데이터와 이를 로딩하는 소스 코드(TypeScript, Swift, Kotlin)가 자동으로 빌드 아티팩트에 포함됩니다. ### LLM을 활용한 컨텍스트 중심의 데이터 생성 * **스키마 최적화 주입:** 전체 스키마를 LLM에 전달하는 대신, 해당 쿼리와 연관된 타입 및 인라인 문서 주석만을 추출하여 컨텍스트 윈도우 내에서 효율적으로 처리합니다. * **디자인 시각 정보 반영:** 내부 API를 통해 `designURL`의 스냅샷 이미지를 생성하고 이를 LLM에 전달함으로써, 실제 UI 디자인에 명시된 이름, 주소 등의 콘텐츠와 일치하는 현실적인 데이터를 얻습니다. * **수동 수정 및 보존:** 생성된 JSON 데이터는 개발자가 직접 수정할 수 있으며, 이후 다시 코드를 생성하더라도 Niobe는 사용자가 직접 수정한 내용을 지우지 않고 보존하는 지능적인 병합 기능을 제공합니다. 이러한 접근 방식은 단순히 더 나은 가짜 데이터를 만드는 것을 넘어, 프론트엔드와 백엔드 간의 의존성을 분리하고 개발 생산성을 극대화하는 데 목적이 있습니다. 대규모 GraphQL 환경을 운영하는 조직이라면 스키마 메타데이터와 LLM을 결합하여 테스트 자동화 수준을 한 단계 높이는 이 모델을 참고할 가치가 있습니다.

code-generation대규모 언어 모델TypeScriptKotlin+4

google·2025년 10월 26일원문

우리가 개인용 건강 코치를 (새 탭에서 열림)

구글은 제미나이(Gemini) 모델을 기반으로 사용자의 수면, 활동 등 생체 데이터를 분석해 맞춤형 가이드를 제공하는 '개인형 AI 건강 코치(Personal Health Coach)'를 개발하고 있습니다. 이 서비스는 기존 건강 앱들의 파편화된 정보를 통합하여 행동 과학에 기반한 능동적이고 적응적인 코칭 계획을 제시하는 것을 목표로 합니다. 특히 멀티 에이전트 프레임워크와 엄격한 전문가 검증 체계를 도입하여 AI 피드백의 과학적 신뢰성과 개인화된 정확성을 동시에 확보했습니다. **제미나이 모델의 건강 코칭 최적화 기술** * **시계열 데이터 추론:** 수면 및 활동과 같은 생체 시계열 데이터에 대해 수치적 추론을 수행하며, 개인의 기준점(Baseline) 및 인구 통계 데이터와 비교 분석하여 맞춤형 통찰을 도출합니다. * **멀티 에이전트 프레임워크(Multi-agent Framework):** 여러 전문 에이전트가 협업하는 구조를 채택했습니다. * **대화형 에이전트:** 사용자의 의도를 파악하고 맥락을 수집하며 전체 프로세스를 조율합니다. * **데이터 과학 에이전트:** 코드 생성 능력을 활용해 데이터를 검색, 분석 및 요약합니다. * **도메인 전문가 에이전트:** 피트니스 등 특정 분야의 지식을 바탕으로 개인화된 운동 계획을 수립하고 수정합니다. * **시스템 조율(Steering):** 범용 모델이 건강 및 웰니스 맥락에서 유용하게 작동하도록 소비자 건강 요구사항에 맞춘 전용 시스템 지침과 평가 모델을 적용했습니다. **전문가 검증 및 사용자 중심 설계** * **과학적 근거 확보:** 검증된 코칭 및 피트니스 프레임워크를 기반으로 코칭 로직을 설계했습니다. * **전문가 자문단 운영:** '소비자 건강 자문 패널'과 전문 피트니스 코치들의 피드백을 수용하여 실제 현장에서 통용되는 맥락 정보를 통합했습니다. * **대규모 사용자 연구:** '핏빗 인사이트 익스플로러(Fitbit Insights Explorer)' 등을 통해 수만 명의 사용자로부터 실제 데이터를 수집하고 이를 모델 학습과 개선에 활용했습니다. **SHARP 평가 프레임워크를 통한 신뢰성 강화** * **5대 평가 요소:** 안전성(Safety), 유익성(Helpfulness), 정확성(Accuracy), 관련성(Relevance), 개인화(Personalization)를 기준으로 코치를 다각도 평가합니다. * **방대한 평가 데이터:** 스포츠 의학, 수면, 심장학 등 다양한 분야의 전문가들이 참여하여 100만 개 이상의 주석(Annotation)과 10만 시간 이상의 인간 평가를 진행했습니다. * **자동 평가 시스템:** 오토레이터(Autoraters)를 도입해 전문가 평가를 확장 및 가속화함으로써 웰니스 권장 사항의 과학적 정확성을 지속적으로 검증합니다. 현재 이 서비스는 미국의 핏빗 프리미엄(Fitbit Premium) 안드로이드 사용자를 대상으로 공개 프리뷰가 시작되었으며, 곧 iOS로 확대될 예정입니다. AI 코칭은 단순한 정보 제공을 넘어 개인의 생체 리듬과 목표에 맞춰 실시간으로 변화하는 '살아있는 가이드'로서의 역할을 수행하게 될 것입니다.

code-generationmulti-agent-systemsagent-orchestrationai-evaluation+4

google·2025년 9월 29일원문

개인 건강 에이전트 (새 탭에서 열림)

구글 리서치는 웨어러블 기기의 시계열 데이터와 혈액 지표 등 다중 모드(multimodal) 데이터를 분석하여 개인화된 건강 통찰력을 제공하는 LLM 기반의 '개인 건강 에이전트(PHA)' 연구 프레임워크를 공개했습니다. 이 시스템은 데이터 과학, 도메인 전문가, 건강 코치라는 세 가지 전문 서브 에이전트로 구성된 멀티 에이전트 아키텍처를 채택하여 사용자의 복잡하고 모호한 건강 질문에 정밀하게 대응합니다. 대규모 실제 사용자 데이터를 활용한 광범위한 평가 결과, PHA는 기존 단일 LLM 대비 데이터 분석 및 의학적 근거 기반 조언 측면에서 월등한 성능을 입증하며 차세대 개인용 건강 관리 도구의 가능성을 제시했습니다. **사용자 중심 설계와 멀티 에이전트 구조** * 1,300개 이상의 실제 건강 질문과 500명 이상의 사용자 설문 조사를 분석하여 일반 건강 지식 이해, 개인 데이터 해석, 실천 가능한 조언, 증상 평가라는 4가지 핵심 요구 사항을 도출했습니다. * 인간 전문가 팀의 업무 방식을 모방하여 데이터 과학자, 도메인 전문가, 개인 건강 코치 역할을 수행하는 서브 에이전트들이 협업하는 구조를 설계했습니다. * 약 1,200명의 사용자로부터 동의를 얻은 핏빗(Fitbit) 활동 데이터, 건강 설문, 혈액 검사 결과를 포함한 리얼 월드 데이터셋을 평가에 활용하여 실무적인 유효성을 검증했습니다. **데이터 과학 에이전트: 시계열 데이터의 수치적 해석** * 웨어러블 기기의 복잡한 시계열 데이터를 분석하며, "최근에 더 건강해졌나요?"와 같은 사용자의 모호한 질문을 구체적인 통계 분석 계획으로 변환합니다. * 분석 계획 수립과 코드 생성의 2단계 프로세스를 거쳐 통계적으로 유효한 답변을 도출하며, 생성된 코드는 실제 데이터에서 즉시 실행 가능한 수준의 정확도를 갖췄습니다. * 평가 결과, 데이터 분석 계획 수립 능력에서 75.6%의 점수를 기록하며 기본 모델(Gemini, 53.7%)을 크게 상회하는 성능을 보였습니다. **도메인 전문가 에이전트: 근거 기반의 신뢰할 수 있는 정보** * NCBI(미국 국립생물정보센터)와 같은 권위 있는 외부 데이터베이스에 접근하여 검증된 사실에 기반한 답변을 생성하는 다단계 추론 프레임워크를 사용합니다. * 사용자의 기저 질환이나 개인 프로필에 맞춰 정보를 맞춤화하여 제공하며, 전문 보건 자격시험 문항 및 감별 진단 능력을 평가하는 벤치마크에서 우수한 성과를 거두었습니다. * 의료 전문가와 일반 소비자 모두를 대상으로 한 인간 평가를 통해 정보의 정확성과 안전성을 동시에 확보했습니다. 이 연구는 범용 LLM의 한계를 넘어 전문화된 에이전트 간의 협업이 개인화된 의료 AI 서비스에서 얼마나 중요한지를 잘 보여줍니다. 앞으로 이러한 기술이 실제 서비스에 적용된다면, 사용자는 자신의 건강 데이터를 단순히 수집하는 것을 넘어 능동적으로 이해하고 실질적인 생활 습관 변화를 이끌어내는 강력한 조력자를 얻게 될 것입니다.

code-generationAI대규모 언어 모델gemini+5

figma·2025년 9월 22일·3분 읽기큐레이션 요약

디자인 맥락, 제품을

Figma는 디자인 파일에 담긴 레이아웃, 상호작용, 디자인 시스템, 코드 구조 등의 맥락을 개발 환경 전반에서 활용할 수 있도록 Figma MCP 서버와 Code Connect를 확장했다. 원격 MCP 접속으로 IDE·AI 코딩 에이전트·브라우저에서 Figma에 연결할 수 있고, Figma Make의 실제 코드와 Code Connect의 프로덕션 컴포넌트 정보도 AI가 활용할 수 있다. 이를 통해 디자인에서 코드로 전환하는 과정의 마찰을 줄이고, 더 일관되고 효율적인 코드 생성을 지원한다. ## 디자인 맥락을 어디서나 공유 - AI 기반 코드 생성은 프롬프트만으로는 충분하지 않으며, 디자인 시스템 구조와 코드베이스 작성 방식 같은 추가 맥락이 필요하다. - Figma 파일에는 반응형 레이아웃, 인터랙션 세부사항, 시각적 프로그램 등 단순한 이미지 이상의 정보가 담겨 있다. - Figma는 이러한 팀의 축적된 디자인·개발 지식을 Figma 캔버스 밖에서도 사용할 수 있도록 만드는 것을 목표로 한다. ## 원격 Figma MCP 서버 - 기존에는 Dev Mode의 로컬 MCP 서버를 통해 개발자의 편집기에서 Figma 디자인 정보를 가져왔다. - 새 원격 접속 기능을 사용하면 데스크톱 앱 없이도 다음 환경에서 Figma에 연결할 수 있다. - IDE - AI 코딩 에이전트 - 브라우저 기반 AI 모델 - Android Studio, Replit, Warp 등 다양한 파트너 도구에서 Figma 디자인 맥락을 사용할 수 있다. - Figma MCP 파트너 카탈로그에서 사용하는 IDE나 에이전트를 찾아 쉽게 연동할 수 있다. - 디자인 시스템 규칙을 생성하는 기능 등 MCP 서버의 기능과 파트너 지원을 계속 확대할 예정이다. - Affirm은 MCP 서버를 사용해 주요 제품 플로우를 이틀 이내에 재구축했으며, 개발 속도가 “몇 배가 아니라 orders of magnitude” 향상됐다고 평가했다. ## Figma Make와 MCP의 연결 - Figma Make 파일을 MCP 클라이언트에서 사용하면 AI 모델이 렌더링된 프로토타입이나 이미지만 보는 것이 아니라 underlying code를 직접 확인할 수 있다. - MCP 서버는 Make 파일의 코드를 색인하고, 사용자가 요청한 파일이나 코드 일부를 선택적으로 제공한다. - 개발자와 AI 에이전트는 다음 방식으로 Make의 정보를 활용할 수 있다. - 특정 파일의 코드를 직접 재사용 - 구현 로직과 디자인 패턴을 참고 - 기존 코드 구조를 기반으로 새로운 기능 생성 - Anthropic, Cursor, Windsurf, VS Code와 협력해 해당 기능을 제공한다. - 향후에는 외부 파트너의 MCP 서버를 Figma Make 안에서도 연결할 계획이다. ## Code Connect의 컴포넌트 매핑 개선 - Code Connect는 Figma 디자인 컴포넌트와 실제 코드베이스의 컴포넌트를 연결하는 기능이다. - 기존에는 터미널에서 매핑을 수동으로 설정해야 했지만, 이제 Figma 내부에서 직접 매핑할 수 있다. - Figma에서 컴포넌트 탐색 - 연결할 코드와 파일 선택 - 연결 완료 또는 누락된 항목 확인 - 기존 Code Connect CLI도 계속 사용할 수 있으며, 다양한 프레임워크에 대해 속성(prop)과 변형(variant)이 매핑된 프로덕션 코드 스니펫을 Dev Mode에 제공한다. - MCP 서버와 Code Connect를 함께 사용하면 AI 에이전트가 다음 정보까지 얻을 수 있다. - 실제 코드 컴포넌트의 위치 - 컴포넌트 사용 지침 - 디자인과 코드 간의 연결 관계 - 내부 평가와 초기 고객 테스트에서 다음과 같은 개선이 확인됐다. - 더 일관된 코드 생성 - 코드 파일 탐색 속도 향상 - AI 에이전트의 토큰 사용량 감소 ## 연동 검토와 사용량 제한 - Figma는 외부 도구와의 연결이 확대되는 만큼 연동의 안정성과 기반 시스템도 강화하고 있다고 밝혔다. - 글에서 해당 섹션의 세부 내용은 제공된 본문이 중간에 끊겨 있어 확인할 수 없다. Figma를 사용하는 개발팀이라면 원격 MCP 서버로 IDE나 AI 에이전트에 디자인 정보를 연결하고, Code Connect로 핵심 UI 컴포넌트를 실제 코드와 매핑하는 방식이 효과적이다. 특히 Figma Make를 프로토타이핑 도구에 그치지 않고 코드 재사용과 AI 기반 구현의 출발점으로 활용할 수 있다는 점이 이번 업데이트의 실질적인 변화다.

원문 읽기(새 탭에서 열림)

code-generation디자인 시스템AI 에이전트모델 컨텍스트 프로토콜+3

google·2025년 9월 8일원문

AI 기반 경험적 소프트 (새 탭에서 열림)

구글 리서치가 과학적 발견을 가속화하기 위해 '경험적 소프트웨어(Empirical Software)'를 자동으로 설계하고 최적화하는 새로운 AI 시스템을 공개했습니다. 이 시스템은 제미나이(Gemini) 모델과 트리 탐색 알고리즘을 결합하여 과학적 가설을 검증하는 맞춤형 코드를 생성하며, 유전학부터 시계열 예측까지 6개 분야의 복잡한 벤치마크에서 전문가 수준의 성과를 거두었습니다. 이를 통해 기존에 수개월이 걸리던 연구 탐색 과정을 단 몇 시간으로 단축하여 과학적 혁신의 병목 현상을 해결할 수 있는 가능성을 제시했습니다. ### 경험적 소프트웨어와 점수화 가능한 과제 * 단순히 기능적인 정확성만을 따지는 일반 소프트웨어와 달리, 사전에 정의된 '품질 점수'를 극대화하는 것을 목표로 하는 '경험적 소프트웨어' 개념을 핵심으로 합니다. * 문제 설명, 평가 지표, 학습/검증 데이터를 포함한 '점수화 가능한 과제(Scorable Task)'를 입력받아 최적의 솔루션을 도출합니다. * 응용 수학, 공학, 기초 과학 등 정량적 지표로 성과를 측정할 수 있는 광범위한 과학적 난제들을 AI가 해결할 수 있는 형태로 변환합니다. ### 트리 탐색 기반의 코드 최적화 엔진 * 알파제로(AlphaZero) 알고리즘에서 영감을 받은 '상한 신뢰 한계(Upper Confidence Bound)' 트리 탐색 전략을 사용하여 수천 개의 코드 변종을 체계적으로 탐색합니다. * LLM은 기존 방법론을 재현하거나 재조합하여 새로운 연구 아이디어를 제안하고, 이를 실행 가능한 코드로 직접 구현합니다. * 샌드박스 환경에서 구현된 코드를 실행해 성능을 실시간으로 평가하며, 높은 점수를 받은 코드를 기반으로 반복적인 수정을 거쳐 성능을 개선합니다. * 모든 출력물은 실행 가능한 코드 형태로 제공되므로, 연구자가 결과를 직접 검증하고 재현하며 해석할 수 있다는 장점이 있습니다. ### 6개 과학 분야에서의 실전 성능 입증 * 유전학(Genomics), 공중 보건, 지리 공간 분석, 신경과학, 시계열 예측, 수치 분석 등 서로 다른 특성을 가진 6개 벤치마크에서 전문가 수준의 성능을 입증했습니다. * 특히 유전학 분야의 '단일 세포 RNA 시퀀싱 배치 통합' 과제에서는 기존 전문가들이 개발한 수백 개의 도구보다 뛰어난 성능을 보이는 40개의 새로운 방법론을 자동으로 발견했습니다. * 제로샷 일반화, 고차원 신호 처리, 시스템 수준의 모델링 등 인간 전문가에게도 도전적인 과제들을 성공적으로 수행하며 AI의 과학적 잠재력을 보여주었습니다. 이 시스템은 과학자가 수동적인 코딩과 디버깅 작업에서 벗어나 더 높은 수준의 가설 수립과 실험 설계에 집중할 수 있도록 돕습니다. 정량적인 평가 지표를 설정할 수 있는 연구 분야라면, AI 기반의 경험적 소프트웨어 생성 도구를 도입함으로써 연구 효율성을 극적으로 높이고 새로운 과학적 발견의 주기를 단축할 수 있을 것입니다.

code-generationAI대규모 언어 모델gemini+4

figma·2025년 8월 5일·4분 읽기큐레이션 요약

디자인 시스템과 AI: MCP 서버

디자인 시스템은 AI가 브랜드와 팀의 표준에 맞는 코드를 생성하도록 만드는 핵심 맥락이며, MCP 서버는 이 맥락을 디자인 도구와 개발 환경 사이에서 전달하는 연결 고리다. Figma MCP 서버는 컴포넌트, 스타일, 변수, Code Connect 정보 등을 AI 에이전트에 제공해 생성 코드의 정확도와 일관성을 높인다. 결과적으로 디자인 시스템과 AI는 서로를 강화하는 선순환을 만들며, 더 빠르면서도 품질 높은 제품 개발을 가능하게 한다. ## 디자인 시스템과 AI의 선순환 - 디자인 시스템은 디자인과 엔지니어링 팀이 확장된 환경에서도 일관된 결정을 내리도록 돕는 기반이다. - 성공적인 디자인 시스템의 요소인 문서화, 공통 언어, 재사용 패턴, 브랜드 가이드는 AI 활용에도 필수적인 맥락이 된다. - AI가 디자인 시스템을 이해하면 단순히 “작동하는 결과물”이 아니라 팀의 표준과 의도에 맞는 결과물을 생성할 수 있다. - AI가 디자인 시스템을 활용해 더 나은 코드를 만들면, 디자인 시스템의 활용도와 품질도 다시 향상되는 선순환이 형성된다. ## MCP 서버가 제공하는 역할 - Figma MCP 서버는 Figma의 디자인 정보를 IDE와 AI 에이전트에 전달한다. - AI가 활용할 수 있는 정보에는 다음이 포함된다. - 컴포넌트와 스타일 - 디자인 변수와 변수의 코드 문법 - Code Connect를 통해 연결된 실제 코드 리소스 - 디자인 요소가 코드와 연결되어 있을수록 AI는 기존 컴포넌트와 구현을 재사용할 수 있어 더욱 정확한 코드를 생성한다. - 디자인 시스템이 아직 충분히 구축되지 않은 조직에서도 토큰과 컴포넌트 구현을 시작하는 데 MCP 서버를 활용할 수 있다. ## 디자인 시스템은 디자인과 AI의 공통 언어 - LLM을 통해 아이디어를 실행으로 옮기기 쉬워질수록, 기능뿐 아니라 시각적 완성도와 브랜드 정체성이 차별화 요소가 된다. - 디자인 시스템은 다음과 같은 기반을 제공한다. - **확장 가능한 기반:** 색상, 간격, 타이포그래피 등의 토큰을 정의해 플랫폼 전반의 일관성을 유지 - **재사용 가능한 컴포넌트:** 다양한 사용 사례에 대응하면서도 단일한 기준점 유지 - **내장된 접근성:** 처음부터 포용적이고 사용 가능한 인터페이스 설계 - 디자인 시스템이 없으면 AI가 생성한 결과가 비슷하고 일반적인 UI의 조합으로 수렴할 수 있다. - 디자인 시스템은 AI를 조직의 브랜드, 품질 기준, 개발 관행에 연결하는 매개체가 된다. ## 속도와 정확도를 높이는 디자인 맥락 - 글에서 인용한 Figma AI 보고서에 따르면 개발자의 68%가 코드 작성에 AI를 사용하지만, 생성 결과를 신뢰하는 디자이너와 개발자는 32%에 그친다. - AI가 디자인 시스템 없이 코드를 생성하는 것은 팀의 온보딩을 거치지 않은 신입 개발자에게 바로 코드를 배포하게 하는 것과 비슷하다. - 디자인 시스템 맥락이 제공되면 AI는 다음을 수행할 수 있다. - 기존 컴포넌트와 패턴을 재사용해 중복과 불일치 감소 - 디자인 토큰을 자동 적용해 브랜드 및 접근성 기준 준수 - 개발자가 바로 개선할 수 있는 품질 높은 초기 코드 제공 - 디자인과 개발 사이의 오해 및 QA 시간을 줄여 피드백 주기 단축 ## Figma MCP 서버의 코드 생성 방식 - Figma 프레임을 검사하면 MCP 서버가 해당 화면의 컴포넌트, 스타일, 변수 등의 맥락을 AI 에이전트에 전달한다. - Code Connect와 변수 코드 문법이 설정되어 있으면 AI는 실제 코드베이스의 컴포넌트와 리소스를 직접 활용할 수 있다. - 연결 정보가 없더라도 MCP 서버는 색상, 스타일, 레이아웃 등 디자인 정보를 제공해 AI가 디자인에 맞는 코드를 새로 작성하도록 돕는다. - 자동 디자인 시스템 규칙 생성 기능은 코드베이스를 분석해 다음 내용을 포함한 구조화된 규칙 파일을 만들 수 있다. - 토큰 정의 - 컴포넌트 라이브러리 - 스타일 계층 구조 - 명명 규칙 - 이 규칙 파일은 AI 에이전트의 시스템 수준 지침으로 작동해, 개발자가 매번 간격·토큰·이름 규칙을 상세히 프롬프트하지 않아도 팀의 기본값을 적용하게 한다. - 주석(annotations)을 사용하면 접근성 요구사항, 상호작용 방식, 콘텐츠 관련 추가 맥락도 AI에 전달할 수 있다. ## 실용적인 적용 방향 - AI 코드 생성 전에 디자인 토큰, 컴포넌트, 변수의 이름과 구조를 정리한다. - Figma 컴포넌트와 실제 코드 컴포넌트를 Code Connect로 연결한다. - 코드베이스의 규칙과 명명 체계를 AI가 참조할 수 있는 규칙 파일로 관리한다. - 접근성, 상호작용 동작, 콘텐츠 제약은 주석으로 명시한다. - MCP 서버는 AI를 대체하는 도구라기보다, 조직의 디자인 시스템을 AI가 활용할 수 있도록 변환하는 인프라로 보는 것이 적절하다.

원문 읽기(새 탭에서 열림)

code-generationFigma디자인 시스템AI 에이전트+2

figma·2025년 7월 28일·4분 읽기큐레이션 요약

두 매개변수 구조

Figma는 변수(variables)와 컴포넌트 속성(component properties)을 서로 다른 구조로 구축했지만, 두 시스템이 같은 레이어 속성에 동시에 연결될 수 있어 렌더링 불일치와 학습·유지보수의 어려움이 발생했습니다. 이를 해결하기 위해 두 기능을 하나의 파라미터 아키텍처로 통합했고, 그 결과 사용자 경험의 일관성, 개발 속도, 향후 제품 확장성을 개선했습니다. ## 파라미터 시스템의 역할 - Figma의 반응형 디자인, 타이포그래피, 애니메이션, 상태 머신 등은 값을 한 곳에서 설정하고 여러 요소에 전파하는 파라미터 개념을 기반으로 합니다. - 값이 변경되면 해당 값을 참조하는 레이어의 속성이 즉시 갱신됩니다. - 변수와 컴포넌트 속성은 모두 “한 번 설정하고 여러 곳에 적용하는” 기능이지만, 서로 다른 문제를 해결하기 위해 별도로 발전했습니다. ## 컴포넌트 속성: 범위가 제한된 파라미터 - 컴포넌트 속성은 2022년에 출시됐으며, 디자인과 코드 사이의 간극을 줄이기 위한 목적이었습니다. - 특정 컴포넌트 내부 레이어에만 적용되는 **범위 제한형 파라미터(scoped parametrization)** 를 제공합니다. - 디자인 시스템 작성자는 버튼 등의 컴포넌트에 Boolean, 텍스트, 인스턴스 교체 등의 속성을 정의할 수 있습니다. - 사용자는 컴포넌트 내부 구조를 직접 훼손하지 않고, 공개된 속성만 수정할 수 있습니다. - 코드에서 컴포넌트의 props를 사용하는 방식과 유사해 디자이너와 개발자가 동일한 mental model을 공유할 수 있게 됐습니다. - 이 구조는 Figma Sites, Figma Make, Code Connect처럼 디자인을 실제 웹·코드 결과물로 연결하는 기능의 기반이 됐습니다. ## 변수: 전역적이고 문맥을 지원하는 파라미터 - 변수는 컴포넌트 내부에 국한되지 않고 프로젝트 전반에서 사용할 수 있는 더 넓은 범위의 파라미터입니다. - 색상, 크기 등 다양한 타입을 지원하며 디자인 토큰을 표현하는 데 적합합니다. - 라이트 모드와 다크 모드처럼 하나의 변수에 여러 문맥별 값을 정의할 수 있습니다. - 예를 들어 배경색 변수 하나에 기본, 보조, 강조 값과 각 모드의 실제 색상을 연결할 수 있습니다. - 이러한 특성 덕분에 디자인 시스템의 토큰을 중앙에서 관리하고 여러 화면에 일관되게 적용할 수 있습니다. ## 두 아키텍처를 분리했을 때의 문제 - 변수와 컴포넌트 속성이 서로 다른 내부 구조를 사용하면서 기능 간 동작이 일관되지 않았습니다. - 하나의 레이어 속성에 변수와 컴포넌트 속성이 동시에 연결되는 상황이 발생할 수 있었습니다. - 이 경우 편집기에서 어떤 값이 우선하는지 예측하기 어렵고 렌더링 결과가 일치하지 않을 수 있었습니다. - 사용자 입장에서는 비슷한 기능을 서로 다른 방식으로 배워야 했습니다. - 개발팀 역시 기능을 추가할 때 두 아키텍처를 각각 수정하고 호환성을 검토해야 했습니다. - 다른 Figma 제품에 파라미터 기능을 확장하려 해도 기존의 기술적 복잡성을 함께 가져가야 했습니다. ## 단일 파라미터 아키텍처로의 통합 - Figma는 변수와 컴포넌트 속성을 공통된 내부 파라미터 모델 위에서 동작하도록 통합했습니다. - 두 기능의 사용자-facing 개념은 유지하면서도, 값의 정의·바인딩·전파를 처리하는 기반 구조를 공유하게 했습니다. - 동일한 레이어 속성에 여러 파라미터가 연결되는 경우도 일관된 규칙으로 처리할 수 있게 됐습니다. - 공통 아키텍처를 통해 편집기 내 예상치 못한 동작과 렌더링 불일치를 줄였습니다. - 새로운 파라미터 기능이나 제품을 개발할 때 기존 시스템을 각각 구현할 필요가 없어져 개발 속도도 향상됐습니다. ## 통합이 가져온 확장성 - 컴포넌트의 구조적 제어와 변수의 전역적·문맥적 제어를 하나의 기반에서 조합할 수 있습니다. - 디자인 토큰, 컴포넌트 속성, 코드 생성 기능을 더 일관된 방식으로 연결할 수 있습니다. - 향후 Figma의 다른 제품에서도 동일한 파라미터 개념과 동작 규칙을 재사용할 수 있습니다. - 이번 작업은 단순한 내부 리팩터링이 아니라, 디자인 도구 전반에서 파라미터화를 확장하기 위한 기반을 마련한 사례입니다. 실무적으로는 컴포넌트의 외부에 노출할 사용자 조정 항목에는 컴포넌트 속성을, 여러 화면과 모드에서 공유할 디자인 토큰에는 변수를 사용하는 것이 적절합니다. 두 기능이 통합된 아키텍처 위에서 동작하더라도 각 기능의 범위와 목적은 여전히 다르므로, 재사용 범위에 따라 선택하는 것이 좋습니다.

원문 읽기(새 탭에서 열림)

code-generationFigma디자인 시스템반응형 디자인+3

figma·2025년 6월 3일원문

MCP 서버 소개: 워크 (새 탭에서 열림)

Figma는 개발자가 LLM 기반 협업 도구에서 디자인 맥락을 실시간으로 활용할 수 있도록 지원하는 'Figma MCP(Model Context Protocol) 서버'를 베타 버전으로 출시했습니다. 이 서버는 단순한 이미지 전달을 넘어 디자인 시스템의 컴포넌트, 변수, 스타일링 정보를 AI에게 직접 제공함으로써, 개발자가 사용하는 코드베이스의 패턴에 최적화된 고품질 코드를 생성하도록 돕습니다. 결과적으로 Cursor, VS Code Copilot 등 AI 기반 코딩 도구에서 디자인 의도를 더욱 정확하고 효율적으로 구현할 수 있게 되었습니다. ### 디자인 의도를 코드로 전환하는 MCP 서버의 역할 * **표준화된 컨텍스트 제공**: MCP는 애플리케이션이 LLM에 맥락을 제공하는 표준 규격으로, 이를 통해 Figma의 디자인 데이터를 가공 없이 AI 에이전트(Cursor, Windsurf, Claude Code 등)에 직접 연결합니다. * **학습 데이터의 한계 극복**: LLM은 일반적인 코드는 잘 작성하지만 특정 팀의 고유한 코드 구조나 프레임워크 패턴은 알지 못합니다. MCP 서버는 팀 고유의 디자인 의도를 전달해 이 간극을 메웁니다. * **효율적인 워크플로우**: 단순히 디자인을 보고 코드를 짜는 단계를 넘어, AI가 디자인의 구조와 논리를 스스로 이해하고 멀티 레이어 애플리케이션 흐름을 구축할 수 있도록 지원합니다. ### 디자인 시스템 및 패턴 메타데이터 활용 * **정밀한 코드 매칭**: 디자인에 정의된 컴포넌트, 변수(Variable), 스타일 정보를 직접 전달합니다. AI가 단순히 비슷한 색상을 찾는 것이 아니라, 시스템에 정의된 정확한 토큰 이름과 변수명을 사용하게 합니다. * **Code Connect 연동**: Figma에 설정된 'Code Connect' 정보를 바탕으로 AI에게 해당 디자인이 구현된 실제 코드 파일의 경로를 정확히 안내하여 중복 컴포넌트 생성을 방지합니다. * **토큰 절약 및 정확도 향상**: 디자인 시스템의 패턴을 직접 참조함으로써 AI가 탐색에 소모하는 토큰 양을 줄이고, 디자인 시스템을 벗어난 코드를 생성할 확률을 낮춥니다. ### 시각적 정보와 상호작용의 결합 * **고수준 스크린샷 제공**: 텍스트 데이터로 설명하기 어려운 전체적인 화면 흐름, 반응형 레이아웃, 섹션 간의 관계를 스크린샷을 통해 AI에게 시각적으로 보완 설명합니다. * **인터랙션 및 의사 코드(Pseudocode)**: 복잡한 상태 변화나 UI 시퀀스를 설명하기 위해 '의사 코드' 형태의 프로토타입 데이터를 제공합니다. 이는 단순한 메타데이터 트리보다 AI가 컴포넌트의 동작 논리를 이해하는 데 훨씬 효과적입니다. * **선택적 컨텍스트 제어**: 사용자는 특정 도구가 반환하는 정보의 양을 설정하여, 현재 작업 중인 코드 구현에 가장 적합한 수준의 디자인 컨텍스트를 조절할 수 있습니다. ### 실용적인 활용 및 향후 계획 현재 Figma MCP 서버는 베타 단계로, VS Code의 Copilot이나 Cursor 같은 도구에 연결하여 즉시 디자인 기반 코드 생성을 테스트해 볼 수 있습니다. 향후 Figma는 원격 서버 기능 지원과 코드베이스와의 더욱 깊은 통합을 포함한 업데이트를 지속할 예정입니다. 디자인 시스템이 잘 구축된 팀일수록 이 서버를 통해 디자인과 코드 간의 일치성을 극대화하는 경험을 할 수 있을 것입니다.

code-generationFigma대규모 언어 모델AI 에이전트+3

figma·2025년 4월 23일원문

Figma의 202 (새 탭에서 열림)

Figma의 2025년 AI 보고서는 인공지능이 단순한 기술적 기대를 넘어 실제 제품 개발 단계로 깊숙이 침투했음을 보여줍니다. 현재 제품 제작자의 3명 중 1명이 AI 기반 기능을 출시하고 있으며, 특히 스스로 판단하고 다단계 과업을 수행하는 '에이전트형 AI'가 핵심 트렌드로 부상했습니다. 보고서는 AI가 업무 효율을 크게 높였음에도 불구하고 결과물의 신뢰성 확보와 직군별 활용 격차 해소가 향후 성공의 관건이 될 것이라고 결론짓습니다. ### 에이전트형 AI(Agentic AI)의 급부상 * 단순한 텍스트나 이미지 생성을 넘어 스스로 추론하고 다단계 프로세스를 완수하는 에이전트형 AI가 가장 빠르게 성장하는 카테고리로 조사되었습니다. * AI 제품을 개발 중인 Figma 사용자의 51%가 에이전트를 구축하고 있으며, 이는 전년(21%) 대비 두 배 이상 증가한 수치입니다. * 에이전트 설계 시에는 AI가 사용자에게 확인을 요청하는 시점, 정보 공유의 양, 채팅 vs 버튼 기반 인터페이스 중 최적의 UI를 선택하는 등 고도의 기획력이 요구됩니다. ### 성공을 결정짓는 반복 설계와 인적 역량 * 성공적인 AI 제품을 출시한 팀의 60%는 여러 가지 디자인 및 기술적 접근 방식을 탐색한 반면, 실패한 팀은 39%만이 이러한 반복 과정을 거쳤습니다. * 빌더의 52%는 AI 제품에서 디자인이 기존 제품보다 더 중요하다고 답했으며, 95%는 최소한 동일한 수준의 중요성을 갖는다고 평가했습니다. * 기술이 빠르게 변하는 상황에서 신속한 프로토타이핑과 긴밀한 협업 루프 등 전통적인 제품 설계 원칙을 유연하게 적용하는 능력이 차별화 요소로 작용합니다. ### 소규모 기업의 공격적인 투자와 실험 * 직원 10인 이하 소규모 기업의 61%가 AI를 시장 점유율 확보를 위한 핵심 요소로 인식하고 있으며, 이는 대기업보다 훨씬 높은 비중입니다. * 규모가 작은 기업일수록 의사결정이 빨라 AI 기술을 실험하고 업무 프로세스에 통합하는 속도가 더 민첩한 것으로 나타났습니다. * AI가 소규모 조직의 비즈니스 성장을 가속화할 수 있다는 믿음이 깊어지면서, 이들의 AI 기반 제품 개발 비중은 작년 대비 두 배로 증가했습니다. ### 개발자와 디자이너 간의 활용도 및 만족도 격차 * 개발자의 82%가 AI 도구에 만족하고 68%가 업무 품질 개선을 경험했다고 답한 반면, 디자이너는 각각 69%와 54%로 상대적으로 낮은 수치를 보였습니다. * 이러한 차이는 핵심 업무 활용 방식에서 기인합니다. 개발자의 59%는 코드 생성 등 핵심 업무에 AI를 쓰지만, 디자이너는 31%만이 에셋 생성 등 핵심 업무에 AI를 활용합니다. * 개발 현장에서는 AI가 생성한 코드에 대한 만족도가 높지만, 디자인 분야에서는 AI 도구가 디자이너의 워크플로우에 어떻게 최적으로 녹아들지 여전히 탐색 단계에 있습니다. ### 효율성 향상과 결과물 신뢰성 사이의 과제 * 조사 대상자의 78%가 AI가 업무 효율성을 크게 높인다는 점에 동의했지만, AI의 출력물을 전적으로 신뢰할 수 있다는 응답은 32%에 불과했습니다. * 단순히 작업을 빠르게 수행하는 것을 넘어, AI가 어떻게 인간의 전문성을 강화하고 실제 업무에 유용한 결과물을 지속적으로 낼 수 있게 할 것인지가 향후 과제입니다. AI를 성공적으로 도입하기 위해서는 '속도'보다는 '품질과 신뢰'에 집중해야 합니다. 개발 단계에서 다양한 프로토타입을 반복적으로 테스트하고, AI의 자율성과 인간의 통제권 사이에서 적절한 균형을 찾는 디자인 전략이 뒷받침될 때 비로소 시장에서 경쟁력 있는 AI 제품을 완성할 수 있습니다.

code-generationFigmaAI 에이전트프로토타이핑+3

figma·2025년 1월 8일·3분 읽기큐레이션 요약

제품 로드맵을 벗

제품 로드맵은 방향을 제시하는 도구이지, 반드시 지켜야 하는 계약서가 아니다. AI와 사용자 기대가 빠르게 변하는 환경에서는 사용자 피드백과 실험 결과에 따라 계획을 과감히 수정해야 하며, 이러한 우회와 전환이 오히려 좋은 제품을 만든다. Figma의 Dev Mode 사례는 초기 비전을 고집하기보다 실제 개발자의 문제를 해결하는 방향으로 피벗한 과정을 보여준다. ## 변화한 제품 개발 환경 - AI, 에이전트, 어시스턴트의 발전으로 제품 개발과 사용 방식이 빠르게 변하고 있다. - Claude, Cursor 같은 도구는 프롬프트만으로도 애플리케이션을 만들 수 있다는 기대를 높였다. - 기존의 6~12개월 단위 로드맵과 전통적인 개발 방식만으로는 변화 속도와 사용자 기대를 따라가기 어렵다. - 명확한 계획은 필요하지만, 로드맵을 지나치게 규범적으로 따르면 더 이상 유효하지 않은 방향을 계속 추진할 위험이 있다. ## 비전보다 중요한 유연성과 학습 - 신제품 개발은 계획대로 직선적으로 진행되지 않고, 실험과 실패, 재설계를 반복하는 비선형 과정이다. - 하나의 비전을 끝까지 고수해야 성공한다는 것은 기술 업계의 신화에 가깝다. - 사용자 조사, 내부 직원의 실제 사용(dogfooding), 베타 테스트를 통해 새로운 정보를 얻으면 기존 가정을 수정해야 한다. - 계획을 바꾸는 것은 실패가 아니라 더 나은 사용자 결과에 도달하기 위한 학습 과정이다. ## Dev Mode의 피벗 사례 - Figma는 처음에 Dev Mode를 디자인을 코드로 자동 변환하는 도구로 구상했다. - 초기 코드 생성 기능은 가능성을 보였지만, 개발자들은 생성된 코드가 실제 업무에 항상 유용하지 않다고 피드백했다. - 디자인 시스템을 사용하는 개발자들은 새 코드를 생성하기보다 이미 작성된 컴포넌트를 조합하는 데 더 많은 시간을 썼다. - Figma는 코드 생성에 계속 투자하는 대신 **Code Connect**를 개발했다. - 개발자가 디자인 시스템의 실제 코드 스니펫을 직접 연결할 수 있다. - Dev Mode에서 자동 생성 CSS가 아니라 팀이 사용하는 컴포넌트 코드를 보여준다. - 이 전환으로 출시가 늦어지고 기존 방향을 추진하던 팀원들이 좌절하는 비용이 발생했지만, 사용자에게 더 적합한 제품에 가까워질 수 있었다. ## 로드맵을 수정하는 데 따르는 비용 - 방향 전환은 이미 투입한 시간과 자원을 포기해야 하므로 조직적으로 쉽지 않다. - 기존 작업을 중단하면 출시 일정이 지연되고, 팀의 사기가 떨어질 수 있다. - 그러나 매몰비용 때문에 효과가 낮은 기능을 계속 개발하면 더 큰 손실로 이어진다. - Figma는 Dev Mode 베타 이후 로드맵보다 사용자 피드백을 우선했고, 한 달 동안 200개가 넘는 수정 사항과 신규 기능을 출시했다. ## 성공적인 제품은 전환을 통해 성장한다 - Loom은 기업에 제품 피드백을 제공하는 전문가 네트워크에서 출발했지만 여러 번 피벗한 끝에 현재의 비디오 녹화 플랫폼이 되었다. - Slack 역시 온라인 멀티플레이어 게임인 Glitch에서 시작해 협업 도구로 전환했다. - 이 사례들은 초기 아이디어를 끝까지 지키는 것보다, 새로운 학습을 바탕으로 사업과 제품의 방향을 바꾸는 것이 중요하다는 점을 보여준다. - 좋은 제품은 우여곡절 때문에 망가지는 것이 아니라, 그 우여곡절을 통해 정의된다. ## 실무에서의 적용 - 상세한 사양과 디자인을 확정하기 전에 빠른 프로토타입으로 가설을 검증한다. - 베타 사용자와 내부 사용자에게서 반복적으로 나타나는 문제를 로드맵보다 우선한다. - 제품이 시장이나 사용자에게 제대로 도달하지 못한다면 처음부터 다시 시작하는 결정을 고려한다. - 매몰비용이나 기존 방법론에 얽매이지 말고, 현재 환경에서도 유효한지 오래된 가정을 재검토한다. - 로드맵은 고정된 약속이 아니라, 언제 계획을 따르고 언제 방향을 바꿀지 판단하기 위한 기준으로 활용하는 것이 바람직하다.

원문 읽기(새 탭에서 열림)

code-generationFigmaAI디자인 시스템+4

figma·2024년 4월 10일·3분 읽기큐레이션 요약

디자인에서 코드로의 자동화를

Dev Mode의 코드 생성(codegen)은 디자인을 완성된 코드로 자동 변환하는 기능이라기보다, 개발자가 구현을 시작할 수 있도록 돕는 출발점이다. Figma는 기본 코드 스니펫을 제공하고, 팀의 디자인 시스템과 기술 스택에 맞춰 다양한 codegen 플러그인으로 확장할 수 있다고 설명한다. Anima, Builder, Figma to Code, Locofy.ai 같은 도구는 React·HTML·Tailwind부터 Flutter·SwiftUI까지 지원하며 반응형 구현과 컴포넌트화를 가속한다. ## Dev Mode와 codegen의 역할 - Codegen은 정해진 규칙이나 명세를 바탕으로 코드를 자동 생성하는 과정이다. - Figma Dev Mode에서 캔버스의 객체를 선택하면 Inspect 패널에 자동 코드 스니펫이 표시된다. - 사용자는 코드 언어와 단위 체계를 드롭다운에서 선택할 수 있다. - codegen은 디자인을 개발로 옮기는 작업을 완전히 대체하기보다, 매번 빈 화면에서 시작하지 않도록 구현의 출발점을 제공한다. - 성숙한 디자인 시스템을 운영하는 팀은 자체 규칙과 컴포넌트를 반영하기 위해 custom codegen 플러그인을 만들 수 있다. ## Anima를 활용한 디자인 코드 변환 - Figma의 레이어·컴포넌트·프레임을 React 또는 HTML 코드로 내보낼 수 있다. - CSS, SCSS, Tailwind 형식의 스타일 코드와 함께 인터랙티브하고 반응형인 결과물을 생성한다. - 반복되는 컴포넌트를 자동으로 감지해 코드 중복을 줄인다. - 팀이 사용하는 코드 스타일과 관례를 학습해 더 적절한 코드 스니펫을 제공한다. - Dev Mode에서 애니메이션을 추가하거나 특정 스타일에 맞게 코드를 조정하도록 요청할 수 있다. ## Builder의 AI 기반 코드 컴포넌트 활용 - React, Svelte, HTML 등의 코드를 AI로 생성한다. - 팀의 기존 코드 컴포넌트를 활용해 디자인과 실제 구현 사이의 간극을 줄인다. - 생성된 코드에 대해 대화형으로 수정 사항을 요청할 수 있다. - 팀의 코드 스타일에 맞도록 AI를 학습시키고, 디자인을 자동으로 반응형으로 변환할 수 있다. - Figma 밖의 별도 웹 인터페이스에서 생성 코드를 시험하고 수정할 수 있다. ## Figma to Code로 웹·모바일 코드 생성 - Figma Community에서 제공되는 무료 오픈 소스 플러그인이다. - 반응형 웹을 위해 HTML 또는 Tailwind 코드를 생성한다. - 모바일 앱 개발을 위해 Flutter와 SwiftUI 코드도 지원한다. - 플러그인에서 생성된 Tailwind 코드를 확인한 뒤 코드 에디터로 복사해 사용할 수 있다. - 별도의 유료 도구 없이 디자인을 여러 플랫폼의 코드로 빠르게 변환할 수 있다는 점이 특징이다. ## Locofy.ai를 통한 웹·모바일 프로토타입 구현 - React, HTML/CSS, Next.js, Gatsby, Vue 기반의 인터랙티브 코드를 생성한다. - 개별 컴포넌트뿐 아니라 전체 화면 단위의 코드 생성도 지원한다. - 자동 레이아웃과 프레임 그룹화 같은 디자인 최적화를 적용한다. - 시맨틱 HTML 요소, 라이브러리, 동작을 태깅해 인터랙션을 구성한다. - 화면 크기에 따른 반응형 동작을 지원한다. - 컴포넌트와 props를 생성해 결과물을 모듈화한다. - 사람이 이해하기 쉬운 문맥 기반 클래스명을 사용해 협업과 확장성을 높인다. - 생성 코드를 다듬은 뒤 프로토타입을 공유하고, 데이터를 연결하며, 코드나 Storybook 파일로 내보낼 수 있다. - GitHub와 직접 동기화하고 자동 병합 및 충돌 해결을 지원해 지속적 통합 흐름에 연결할 수 있다. 실무에서는 생성된 코드를 최종 결과물로 그대로 사용하기보다, 팀의 디자인 시스템·컴포넌트 구조·접근성·상태 관리·성능 기준에 맞게 검토하고 수정하는 것이 좋다. codegen 플러그인은 반복적인 초기 구현을 줄이고 협업을 빠르게 만드는 보조 도구로 활용할 때 가장 효과적이다.

원문 읽기(새 탭에서 열림)

code-generationFigmaReactdesign-to-code+3

figma·2024년 2월 25일·3분 읽기큐레이션 요약

AI가 어떻게 디자인과 개발을 통합

AI는 디자인과 개발을 পৃথ개의 영역으로 두기보다 하나의 긴밀한 창작·제작 과정으로 통합할 가능성이 크다. David Hoang은 AI가 정해진 화면을 설계하는 방식을 넘어, 사용자와 맥락에 따라 변화하는 동적·멀티모달 인터페이스를 만들 것이라고 전망한다. Replit은 범용 인공지능(AGI)보다 개발자의 자율성과 생산성을 높이는 ‘인공 개발자 지능(ADI)’에 집중하며, 아이디어를 코드로 구현하고 실제 출시까지 이어지도록 돕는 것을 목표로 한다. ## AI가 바꾸는 인터페이스와 디자인 - 모바일 혁명 당시 기존 전문가들이 새로운 환경에서 다시 초보자가 되었듯, AI도 디자인과 상호작용의 기준을 재설정하고 있다. - 디자이너가 사용자가 보게 될 모든 인터페이스를 미리 고정하는 방식에서 벗어나, 상황에 따라 형태와 표현이 바뀌는 **동적 인터페이스**로 이동한다. - AI, 멀티모달 기술, 다양한 폼팩터, 공간 컴퓨팅(예: Apple Vision Pro)은 서로 독립적인 흐름이 아니라 하나로 수렴하는 변화로 설명된다. - 디자이너는 화면의 모든 요소를 직접 통제하기보다, 시스템이 변화할 수 있는 여지를 설계해야 한다. ## 디자인과 개발의 통합 - AI는 엔지니어에게는 설계와 코드 작성을, 디자이너에게는 기술 구현과 프로토타이핑을 보조할 수 있다. - 그 결과 디자인과 엔지니어링은 점점 더 긴밀하게 결합된 하나의 분야가 될 가능성이 있다. - AI 도구는 특정 직군을 대체하기보다 각자가 자신의 전문성을 확장하고 다른 영역의 작업까지 수행하도록 돕는 **증강 기술**로 제시된다. - 협업과 AI는 Replit이 개발자 생산성을 바라보는 핵심 축이다. ## Replit의 ‘인공 개발자 지능(ADI)’ - Replit은 인간 수준의 범용 지능인 AGI보다, 소프트웨어 개발에 특화된 **Artificial Developer Intelligence(ADI)** 구축에 초점을 맞춘다. - ADI의 목표는 사용자의 자율성을 높이고 더 적은 장벽으로 소프트웨어를 만들 수 있도록 지원하는 것이다. - 장기적으로는 복잡한 소프트웨어 아키텍처를 생성하고, Replit에 배포된 고급 개발 도구를 조율하는 에이전트가 등장할 수 있다. - 단순한 코드 생성뿐 아니라 팀의 작업 방식과 협업 맥락을 이해하는 조직 지능으로 확장될 수 있다. ## ‘코드 학습’에서 ‘제품 출시’까지 - ADI는 코드 자동완성, 코드 생성, 개발 과정 안내 등 다양한 형태로 활용될 수 있다. - Replit은 사용자가 코딩을 배우는 데서 멈추지 않고, 실제 제품을 만들고 출시하며 사업으로 발전시키는 과정을 가속하는 것을 지향한다. - Hoang은 Replit을 사용자가 필요로 하는 ‘기술 공동창업자’처럼 바라본다. - AI를 활용하면 비기술 직군의 기획자도 프롬프트와 제품 이해를 바탕으로, 기존 엔지니어 팀에 못지않은 수준의 결과물을 만들 수 있다. - 따라서 앞으로는 코딩 능력뿐 아니라 문제를 정의하고 AI에 정확한 지시를 내리는 능력도 중요한 역량이 된다. AI 시대의 창작 도구는 완성된 화면이나 코드 조각을 제공하는 수준을 넘어, 사용자의 의도와 팀의 맥락을 이해하고 실행 가능한 결과물까지 함께 만들어야 한다. 디자이너와 개발자는 모든 것을 직접 통제하려 하기보다 AI와 협업하는 방식, 명확한 문제 정의, 효과적인 프롬프트 작성 능력을 함께 발전시키는 것이 바람직하다.

원문 읽기(새 탭에서 열림)

code-generationAI프롬프트 엔지니어링mobile-apps+4