html

GitLab Duo Agent Platform으로 데모 생성기를 구축한 방법 (새 탭에서 열림)

클릭스루 데모 제작은 스크린샷 촬영부터 내레이션 작성, 외부 도구 편집, 검토와 배포까지 수작업이 많아 제품이 바뀔 때마다 다시 만들어야 했다. 글에서는 GitLab Duo Agent Platform을 활용해 이 과정을 자동화하고, 스크린샷과 간단한 컨텍스트만으로 데모 생성부터 머지 리퀘스트·GitLab Pages 배포까지 연결한 사례를 소개한다. 다만 고객 문제와 메시지를 정의하고 최종 결과를 검토하는 일은 여전히 사람이 맡아야 한다. ## 클릭스루 데모가 효과적인 이유 - 사람은 기능 설명을 읽는 것보다 실제 동작을 직접 따라 해볼 때 제품을 더 빠르게 이해한다. - 라이브 데모는 제품 환경에 접근할 권한과 발표자의 숙련도가 필요하다. - 클릭스루 데모는 링크 하나로 공유할 수 있고, 사용자가 자신의 속도로 진행할 수 있다. - 비디오와 달리 사용자가 직접 조작하면서 기능을 경험하며, 매번 동일한 흐름을 제공할 수 있다. ## 데모 제작 방식의 변화 - **가상 머신 시대**: 제품과 데모 콘텐츠가 미리 설치된 VM을 배포하고, 이후 ESX 서버에서 중앙 관리했다. - **외부 SaaS 도구 시대**: 분석 기능이 포함된 외부 데모 플랫폼으로 옮겼지만, 제작은 여전히 수동이었고 특정 업체의 인프라에 종속됐다. - **에이전트 시대**: 프롬프트만으로 에이전트가 데모를 생성하고, 생성 도구와 결과물을 같은 프로젝트에서 관리할 수 있다. - 에이전트 기반 방식은 데모를 한 번 만들고 끝내는 산출물이 아니라, 제품 변경에 맞춰 지속적으로 유지할 수 있는 자산으로 만든다. ## 데모 제작의 전체 단계 - 기능을 이해하기 위해 문서, 이슈, Slack 대화와 제품·엔지니어링 팀의 맥락을 조사한다. - 고객의 실제 문제와 제품이 제공하는 가치를 중심으로 스토리를 구성한다. - 프로젝트를 만들고 보안 취약점, 차트 데이터 등 현실적인 데모 데이터를 준비한다. - 실제 제품 흐름의 스크린샷이나 동영상을 캡처한다. - 각 단계에서 사용자를 안내할 내레이션을 작성한다. - 외부 도구에서 콘텐츠를 조합하고 관련 링크와 행동 유도 문구를 추가한다. - 이해관계자의 검토를 받고 피드백에 따라 순서와 내용을 수정한다. - GitLab Docs, Demo Hub 등에 게시하고 Slack, 블로그, 소셜 미디어로 알린다. - 이 과정은 며칠이 걸릴 수 있으며, 제품 기능이 바뀌면 환경 설정 단계부터 다시 작업해야 한다. - 에이전트는 문서 조사, 이슈와 Slack 맥락 수집, 데모 데이터 생성, 내레이션 작성, 콘텐츠 조합 등 반복 작업을 자동화할 수 있다. - 반면 무엇을 보여줄지 결정하고 최종 결과를 승인하는 역할은 사람에게 남는다. ## Click-Through Demo Generator의 동작 방식 - 프로젝트의 특정 폴더에 스크린샷을 넣는다. - 필요하면 `context.md`에 기능 배경과 추가 정보를 작성한다. - 이슈 댓글로 워크플로를 실행한다. - 에이전트가 스크린샷을 적절한 순서로 재배치하고 파일명을 정리한다. - 내레이션을 작성하고 브랜드 템플릿 기반의 HTML 데모를 생성한다. - 결과물을 머지 리퀘스트로 제출하고 이슈에 MR 링크를 댓글로 남긴다. - 검토 후 MR을 병합하면 GitLab Pages에 자동으로 게시된다. - 수정이 필요하면 에이전트에게 변경을 요청할 수 있다. ## Custom Flow와 내레이션 Skill - 내부적으로는 Custom Flow가 실행되고, 에이전트는 데모 조립용 커스텀 도구를 호출한다. - 커스텀 도구는 각 스크린샷에 내레이션 메시지 상자를 덧씌워 HTML 템플릿으로 조합한다. - `SKILL.md`는 내레이션이 제품 기능 나열이 아니라 고객 가치 중심으로 작성되도록 지시한다. - 내레이션은 다음 세 막 구조를 따른다. - 고객이 겪는 문제를 제시한다. - 제품이 문제를 해결하는 과정을 단계별로 보여준다. - 사용자가 얻게 되는 가치와 다음 행동을 강조한다. - 다국어 데모가 필요하면 프로젝트에 현지화 Skill을 추가해 이후 생성되는 데모에 자동 적용할 수 있다. ## Skill 기반 퍼블리싱 - 개발용 데모 갤러리에서 데모를 프로덕션 상태로 지정하면 게시 작업이 시작된다. - 에이전트는 Demo Hub 프로젝트에 접근해 다음 작업을 수행한다. - 짧은 설명 작성 - 현재 날짜 기록 - 신규 콘텐츠 태그 추가 - 데모를 카드로 등록하는 머지 리퀘스트 생성 - 실제 MR 병합과 프로덕션 공개 여부 결정은 사람이 담당한다. ## 데모를 코드로 관리하는 이유 - 클릭스루 데모는 HTML, 스크린샷, 설정 파일의 조합이므로 Git 저장소에 적합하다. - 외부 도구에 갇히지 않고 GitLab 프로젝트에서 관리할 수 있다. - 머지 리퀘스트로 검토할 수 있다. - 팀원이 함께 개선할 수 있다. - 변경 이력을 버전으로 관리할 수 있다. - 제품 변경에 맞춰 재생성·수정하기 쉽다. ## 실용적인 적용 방향 반복적으로 만드는 문서, 마케팅 콘텐츠, 리서치 결과처럼 입력과 출력이 비교적 명확한 업무부터 에이전트화를 시작하는 것이 좋다. 특히 사람이 최종 검토하고 승인하는 구조를 유지하면서, 조사·초안 작성·파일 생성·머지 리퀘스트 작성 같은 반복 단계를 자동화하면 품질과 유지보수성을 함께 확보할 수 있다.

Figma의 디자인 에이전트, 이제 맞춤형 도구와 더욱 풍부한 컨텍스트 지원 | Figma 블로그 (새 탭에서 열림)

Figma의 디자인 에이전트가 오픈 베타에서 더 많은 사용자에게 제공되며, 단순한 프롬프트를 넘어 사용자 정의 도구와 팀의 작업 맥락을 활용할 수 있게 됐다. 사용자는 에이전트에게 재사용 가능한 플러그인과 셰이더를 만들도록 요청해 Figma 캔버스 안에서 자신만의 디자인 워크플로를 구축할 수 있다. 이를 통해 에이전트는 결과물을 생성하는 도구를 넘어 사용자의 작업 방식을 이해하고 협업하는 파트너에 가까워진다. ## Figma 디자인 에이전트의 확장 - 에이전트는 Figma 캔버스에서 직접 작동하며, 디자인 작업의 유연성·정밀도·창작 제어력을 높인다. - 팀의 작업 방식과 실제 디자인 맥락을 이해할수록 단순히 결과물을 만드는 것을 넘어 협업할 수 있다는 점을 강조한다. - Figma는 에이전트와 사용자 정의 도구를 직접 시험할 수 있는 커뮤니티 플레이그라운드 파일도 제공한다. - 사용자의 요구를 자연어로 설명하면 에이전트가 도구 제작과 문제 해결 방법까지 제안한다. ## 프롬프트로 만드는 생성형 플러그인 - 기존에는 플러그인을 만들려면 개발 지식과 별도의 개발 환경이 필요했지만, 이제 에이전트에게 재사용 가능한 플러그인 제작을 요청할 수 있다. - 생성형 플러그인은 다음과 같은 작업에 활용될 수 있다. - HTML을 Figma 캔버스로 가져오기 - 대시보드 레이아웃 생성 - 데이터를 시각화하기 - 이미지 자산 자동 배치 - `PropsKit`을 사용하기 때문에 Figma의 기본 기능처럼 자연스럽게 동작한다. - 캔버스 안에서 직접 결과를 확인하고 반복 수정할 수 있어, 외부 도구를 오가는 번거로움이 줄어든다. - Figma 밖의 AI 서비스나 서드파티 API와 연동해야 하는 경우에는 기존 방식의 클래식 플러그인을 사용해야 한다. - 플러그인이나 셰이더 자체는 제작자, 팀원, 커뮤니티 사용자 모두 무료로 사용할 수 있지만, 에이전트에게 제작을 요청하는 기능은 일반 출시 후 AI 크레딧을 사용하게 된다. ## WebGPU 기반 셰이더 효과 - 에이전트는 픽셀이 렌더링되는 방식을 정의하는 작은 프로그램인 셰이더도 생성할 수 있다. - Figma의 WebGPU 기반 렌더러를 활용해 다음과 같은 시각 효과를 만들 수 있다. - 디더링 - 리퀴드 메탈 - 프랙털 노이즈 - 렌즈 왜곡 - 입자 늘이기 - 색상 외곽선 - 셰이더 효과는 네이티브 Figma 효과처럼 쌓아 사용할 수 있으며, 속성을 조절하거나 기본 효과와 결합할 수 있다. ## 셰이더 효과와 셰이더 필 - **셰이더 효과** - 레이어에 적용되는 사용자 정의 시각 효과다. - 입자 효과, 렌즈 왜곡, 컬러 아웃라인 등 다양한 효과를 만들 수 있다. - 여러 효과를 조합해 복합적인 결과를 만들 수 있다. - **셰이더 필** - 단색이나 일반 그라디언트를 넘어서는 동적·생성형 채우기다. - 수채화, 모아레, 패턴 그리드 등을 표현할 수 있다. - 디더 웨이브, 유체 하프톤, 파티클 웹, 마그네틱 필드 같은 프리셋으로 활용할 수 있다. - 사용자는 셰이더의 기능을 정의하고, 에이전트와 대화하며 UI와 조정 가능한 매개변수를 발전시킬 수 있다. - 사진에 콜라주, 마블링, 빛샘, 금속 엠보싱, 프리즘 효과를 적용하는 등 개인의 시각적 스타일을 재사용 가능한 워크플로로 만들 수 있다. ## 디자이너와 에이전트의 협업 방식 - 제품 디자이너 Edward Chechique는 과거 개발자 지원이나 여러 외부 도구가 필요했던 생성형 플러그인 제작을 Figma 안에서 직접 처리할 수 있게 됐다고 설명한다. - 크리에이티브 테크놀로지스트 Anna Zhang은 에이전트와 기능과 UI를 주고받는 과정을 “협상”에 비유한다. - 에이전트가 제안한 해결책과 생성 결과가 다음에 추가할 매개변수와 기능에 영향을 주면서, 일회성 생성보다 반복적인 공동 설계가 가능해진다. 자신만의 레이아웃·효과·데이터 시각화 도구가 필요하다면 에이전트로 생성형 플러그인이나 셰이더를 만들어 보는 것이 유용하다. 다만 외부 API 연동은 클래식 플러그인을 사용해야 하며, 에이전트 기반 제작 기능은 AI 크레딧 비용과 지원 범위를 확인하는 것이 좋다.

Diff 라인 성능 개선을 위한 험난한 여정 (새 탭에서 열림)

GitHub는 대규모 풀 리퀘스트에서도 **Files changed** 탭의 반응성과 안정성을 유지하기 위해 단일 해결책이 아닌 여러 최적화 전략을 적용했다. 특히 diff 라인마다 생성되는 DOM 요소, React 컴포넌트, 이벤트 핸들러를 줄여 메모리 사용량과 입력 지연을 낮추고, 가장 큰 변경 사항에는 가상화를 적용해 렌더링 범위를 제한하는 방향을 택했다. 핵심 교훈은 작은 구조적 최적화도 수천 개의 diff 라인에 누적되면 큰 성능 개선으로 이어진다는 것이다. ## 대규모 풀 리퀘스트에서 성능이 어려운 이유 - GitHub의 풀 리퀘스트는 한 줄 수정부터 수천 개 파일과 수백만 줄을 포함하는 변경까지 규모 편차가 매우 크다. - 일반적인 풀 리퀘스트는 빠르게 동작했지만, 대규모 변경에서는 다음 문제가 발생했다. - JavaScript 힙이 극단적인 경우 1GB를 초과 - DOM 노드 수가 40만 개 이상으로 증가 - 페이지 상호작용이 매우 느려지거나 사실상 사용할 수 없게 됨 - 입력 후 다음 화면이 표시되기까지의 시간인 INP가 허용 수준을 초과 - 모든 기능과 브라우저의 기본 동작을 유지하면서 최악의 경우까지 해결하는 단일 기법은 현실적인 한계가 있었다. ## 풀 리퀘스트 규모별 최적화 전략 GitHub는 변경 규모와 복잡도에 따라 서로 다른 전략을 조합했다. - **diff 라인 컴포넌트 최적화** - 대부분의 풀 리퀘스트에서 기본 diff 화면을 빠르게 유지 - 중간 및 대규모 리뷰에서도 브라우저의 기본 `find-in-page` 같은 동작을 보존 - **가상화를 통한 점진적 성능 저하** - 가장 큰 풀 리퀘스트에서는 한 번에 렌더링하는 콘텐츠 양을 제한 - 모든 내용을 동시에 DOM에 올리지 않아 응답성과 안정성을 우선 - **기반 컴포넌트와 렌더링 개선** - 특정 모드에 관계없이 모든 크기의 풀 리퀘스트에 누적 효과를 제공 - 렌더링 구조 자체를 단순화해 메모리와 상호작용 비용을 줄임 ## 초기 목표와 측정 지표 최적화 작업의 목표는 단순히 평균 속도를 높이는 데 그치지 않았다. - JavaScript 힙 크기와 메모리 사용량 감소 - DOM 노드 수 감소 - 평균 INP 개선 - 특히 최악의 사용자 경험을 나타내는 p95와 p99 INP 대폭 개선 - 이를 위해 상태, HTML 요소, JavaScript 코드, React 컴포넌트 수를 전반적으로 줄이는 단순화 전략을 채택 ## v1의 문제: diff 라인당 높은 렌더링 비용 React로 처음 diff 화면을 구현한 v1은 작은 재사용 컴포넌트를 많이 조합하는 구조였다. - unified 뷰의 diff 한 줄에는 최소 약 10개의 DOM 요소가 필요했다. - split 뷰에서는 한 줄당 약 15개의 DOM 요소가 필요했다. - 구문 강조를 적용하면 추가 `<span>` 요소가 더해져 DOM 수가 증가했다. - React 계층에서도 다음과 같은 컴포넌트가 생성됐다. - unified 뷰: 한 줄당 최소 8개 컴포넌트 - split 뷰: 한 줄당 최소 13개 컴포넌트 - 댓글, hover, focus 등 추가 상태가 활성화되면 컴포넌트 수는 더 늘어났다. - 작은 컴포넌트마다 React 이벤트 핸들러를 5~6개씩 연결하는 경우가 많았다. - 결과적으로 diff 한 줄에 20개 이상의 이벤트 핸들러가 붙을 수 있었고, 이를 수천 줄에 적용하면서 비용이 급격히 커졌다. v1의 한 줄당 최소 구조는 다음과 같았다. - DOM 요소 10~15개 - React 컴포넌트 8~13개 - React 이벤트 핸들러 20개 이상 - 다수의 작은 재사용 컴포넌트 이 구조는 일반적인 규모에서는 문제가 없었지만, 데이터 크기가 사실상 제한되지 않는 대규모 풀 리퀘스트에서는 변경 줄 수가 늘수록 INP와 JavaScript 힙 사용량이 함께 악화됐다. ## v2의 방향: 작은 변경을 대규모로 누적 v2에서는 눈에 띄지 않는 HTML 구조까지 점검해 diff 라인당 비용을 줄였다. - 줄 번호 셀에 불필요하게 포함되어 있던 `<code>` 태그를 제거했다. - diff 한 줄에서 DOM 노드 2개를 줄이는 것은 개별적으로는 작은 개선처럼 보인다. - 그러나 10,000줄을 렌더링하면 DOM 노드 20,000개를 제거하는 효과가 발생한다. - 이처럼 줄 단위의 사소한 최적화도 대규모 데이터에서는 메모리 사용량과 렌더링 비용에 크게 누적된다. - 성능 개선에서는 큰 기능 변경만큼 불필요한 태그, 컴포넌트, 이벤트 핸들러를 하나씩 제거하는 작업도 중요하다. ## 실용적인 결론 대규모 목록이나 코드 diff를 렌더링할 때는 처음부터 최악의 데이터 규모를 고려해야 한다. 컴포넌트를 잘게 나누는 구조가 유지보수에는 유리할 수 있지만, 각 요소에 상태와 이벤트 핸들러를 추가하면 수천 개 항목에서 큰 비용이 된다. 따라서 DOM 구조를 단순화하고, 항목별 렌더링 비용을 측정하며, 극단적인 규모에는 가상화를 적용하는 조합이 효과적이다.

에이전트, Figma 캔버스를 만나다 | Figma 블로그 (새 탭에서 열림)

Figma는 이제 AI 에이전트가 디자인 캔버스에서 직접 파일과 컴포넌트를 생성·수정할 수 있도록 지원한다. MCP 서버의 `use_figma` 도구와 Markdown 기반 스킬을 통해 에이전트가 팀의 디자인 시스템, 컴포넌트, 변수, 작업 규칙을 활용하게 되며, 결과적으로 코드와 디자인 사이의 단절을 줄이는 것이 목표다. 이 기능은 현재 베타 기간 동안 무료로 제공되지만 향후 사용량 기반 유료 기능으로 전환될 예정이다. ## AI 에이전트가 Figma 캔버스에서 작업 - Claude Code, Codex 등 MCP 클라이언트가 `use_figma` 도구를 통해 Figma 파일과 컴포넌트를 직접 생성하고 수정할 수 있다. - 에이전트는 색상, 버튼 패딩, 타이포그래피, 인터랙션 같은 팀의 디자인 결정을 Figma 안에서 참조한다. - 기존처럼 AI가 일반적이고 브랜드와 동떨어진 디자인을 만드는 대신, 조직의 디자인 시스템에 연결된 결과물을 생성할 수 있다. - 코드에서 시작한 작업도 Figma에서 검토·수정할 수 있고, Figma에서 결정한 내용을 다시 개발 과정에 반영할 수 있다. ## `generate_figma_design`과 `use_figma`의 역할 분담 - `generate_figma_design` - 실제 웹사이트나 애플리케이션의 HTML을 Figma 레이어로 변환한다. - 코드와 디자인이 달라졌을 때 최신 UI를 Figma로 가져오는 데 사용된다. - `use_figma` - Figma 캔버스에서 기존 디자인을 수정하거나 새로운 디자인 자산을 생성한다. - 팀의 컴포넌트, 변수, 자동 레이아웃 등 실제 디자인 시스템을 활용한다. - 두 도구를 함께 사용하면 코드의 최신 상태를 Figma로 가져온 뒤, 에이전트가 디자인 시스템에 맞춰 재구성하고 개선할 수 있다. ## Markdown으로 정의하는 Figma 스킬 - 스킬은 에이전트가 Figma에서 작업하는 방법을 설명하는 Markdown 파일 기반 지침이다. - 특정 작업의 순서, 적용해야 할 규칙, 팀의 디자인 관례와 품질 기준을 명시할 수 있다. - 플러그인을 개발하거나 별도의 코드를 작성하지 않아도 누구나 스킬을 만들 수 있다. - 기본 스킬인 `/figma-use`는 Figma의 구조와 핵심 원칙을 에이전트에게 알려주며, 팀은 이를 확장해 자체 업무 방식에 맞출 수 있다. - 스킬은 단순한 문서가 아니라 에이전트가 실제 작업 중 따라야 하는 실행 규칙으로 작동한다. ## 제공되는 스킬 사례 - `/figma-generate-library`: 코드베이스에서 Figma 컴포넌트 라이브러리 생성 - `/figma-generate-design`: 기존 컴포넌트와 변수를 사용해 새로운 디자인 생성 - `/create-voice`: UI 명세에서 VoiceOver, TalkBack, ARIA용 스크린 리더 사양 생성 - `/apply-design-system`: 기존 디자인을 디자인 시스템 컴포넌트와 연결 - `/rad-spacing`: 변수와 폴백을 사용해 계층적인 간격 적용 - `/sync-figma-token`: 코드와 Figma 변수 사이의 디자인 토큰 동기화 및 변경 감지 - `/multi-agent`: 여러 에이전트가 디자인 구현 작업을 병렬로 수행 - 커뮤니티 실무자가 만든 JSON 기반 컴포넌트 생성, 디자인 워크플로 오케스트레이션 등의 스킬도 제공된다. ## 구조 기반의 자기 수정 - 에이전트는 화면을 생성한 뒤 스크린샷을 찍고, 결과가 목표와 다른 부분을 확인해 반복적으로 수정할 수 있다. - 수정 대상이 단순한 픽셀이 아니라 실제 컴포넌트, 변수, 자동 레이아웃, 레이어 구조이므로 디자인 시스템과 상호작용하며 개선된다. - AI 모델의 비결정성 때문에 같은 프롬프트라도 결과가 달라질 수 있지만, 스킬이 작업 순서와 기준을 고정해 결과를 더 예측 가능하게 만든다. - 기존의 디자인 규칙과 팀 관례가 정적인 문서에 머무르지 않고, 에이전트가 작업 중 실제로 적용하는 규칙이 된다. ## 실용적인 의미 팀은 `use_figma`와 `/figma-use`를 기반으로 자체 디자인 스킬을 만들고, 컴포넌트·변수·토큰 사용 규칙을 명시하는 것이 좋다. 특히 코드와 Figma가 자주 어긋나는 조직이라면 `generate_figma_design`으로 최신 UI를 동기화한 뒤, `use_figma`와 스킬을 이용해 브랜드와 디자인 시스템에 맞게 다듬는 워크플로가 효과적이다.

Figma Make를 캔버 (새 탭에서 열림)

Figma는 Figma Make에서 생성한 미리보기를 Figma Design 캔버스로 직접 복사하는 기능인 **Copy design**을 공개했다. 복사된 결과물은 스크린샷이 아니라 편집 가능한 디자인 레이어로 들어가므로, 팀이 아이디어를 수정·재구성하고 프로토타입에서 실제 제품 디자인으로 발전시킬 수 있다. Figma는 이를 Make와 Design 사이의 작업 단계를 줄이고, 프롬프트에서 제작까지 이어지는 흐름을 강화하는 첫 단계로 설명한다. ## Figma Make 결과물을 편집 가능한 레이어로 변환 - 이제 Figma Make 미리보기에서 디자인을 복사해 Figma Design 캔버스에 붙여넣을 수 있다. - 복사된 결과는 정적인 이미지나 스크린샷이 아니라 **구조화된 디자인 레이어**로 제공된다. - 캔버스에서 레이어를 직접 편집하고, 요소를 재배치하거나 다른 디자인과 결합할 수 있다. - 별도로 파일을 내보내거나 이름을 지정하거나 작업 모드를 전환할 필요 없이 Make와 Design을 연결한다. ## 스크린샷이 아닌 협업 가능한 레이어 - 프롬프트로 만든 아이디어가 단순한 결과물에 머무르지 않고 반복 작업을 위한 구성 요소가 된다. - PM은 자연어로 Make에서 디자인 시안을 다듬은 뒤, 특정 시점을 Figma Design으로 가져올 수 있다. - 디자이너와 개발자 등 팀 구성원은 캔버스에서 결과물을 함께 검토하고 수정할 수 있다. - 프롬프트 → 프로토타입 → 제품 디자인으로 이어지는 과정이 더 유연해진다. - 여러 사람이 아이디어를 변형하고 개선하는 멀티스레드 협업의 출발점으로 활용할 수 있다. ## 커뮤니티 도구에서 얻은 기술적 방향 - Figma Make 사용자들은 이미 `<div>RIOTS`의 **html.to.design** 플러그인을 사용해 HTML이나 라이브 프로토타입을 편집 가능한 Figma 프레임으로 가져오고 있었다. - 이 플러그인은 웹 콘텐츠를 Figma의 편집 가능한 디자인 구조로 변환해, 생성된 결과물을 캔버스에서 다시 작업할 수 있게 한다. - Figma는 해당 기술을 확보했으며, 이를 향후 Figma Make 기능 개발에 활용할 계획이다. - html.to.design은 약 3년간 개발되었고 약 200만 명이 사용하는 도구로 소개됐다. - `<div>RIOTS`는 Figma와의 협력 이후에도 플러그인과 도구를 독립적으로 계속 개발하고 유지보수한다. ## Make의 향후 방향 - Figma는 캔버스를 무엇이든 가져와 탐색하고 변환할 수 있는 공동 작업 공간으로 확장하려 한다. - Copy design은 이러한 방향을 실현하는 첫 단계다. - 궁극적으로는 어떤 프롬프트에서 시작한 아이디어든 Figma Design 안에서 발전시켜 실제 제품으로 연결하는 것이 목표다. - AI를 단순히 결과물을 생성하는 도구가 아니라, 기존 디자인 프로세스를 가속하는 도구로 활용하려는 전략이 드러난다. Figma Make를 아이디어 발상과 빠른 프로토타이핑에 사용하고, 결과물을 Copy design으로 Figma Design에 가져와 세부 편집과 팀 협업을 진행하는 방식이 가장 실용적이다. 특히 초기 시안의 반복 제작과 프로토타입 검토가 잦은 팀일수록 스크린샷 기반 작업보다 효율이 높을 것으로 보인다.

Figma Sites로 웹 (새 탭에서 열림)

Figma Sites는 Figma 안에서 웹사이트를 디자인하고, 반응형 동작과 인터랙션을 적용한 뒤 바로 게시할 수 있는 올인원 도구다. 기존의 디자인·프로토타이핑·개발·배포로 이어지는 선형 작업을 하나의 반복적인 흐름으로 통합해, 개발 도구나 별도 협업 과정 없이 실제 웹사이트를 제작하도록 돕는다. 템플릿과 디자인 시스템 연동, 반응형 레이아웃, 다양한 애니메이션 기능을 통해 디자이너와 소규모 팀도 표현력 있는 사이트를 만들 수 있다. ## 디자인부터 게시까지 하나의 작업 흐름 - 기존 웹 제작은 Figma에서 디자인한 뒤 프로토타입을 만들고, 브레이크포인트를 설정하며, 디자인을 코드로 변환하고 테스트·배포하는 수작업과 도구 전환이 필요했다. - Figma Sites에서는 Figma를 떠나지 않고 디자인, 인터랙션 구현, 반응형 조정, 웹 게시를 수행할 수 있다. - 포트폴리오, 이벤트 사이트, 제품 랜딩 페이지 등 다양한 목적의 실제 동작하는 웹사이트를 제작할 수 있다. - 템플릿, 반응형 웹 요소, 사전 제작된 인터랙션을 제공해 디자인·개발 인력이 제한적인 팀도 빠르게 시작할 수 있다. - 향후 Figma Make 기반의 채팅-투-코드 기능을 통해 원하는 애니메이션이나 인터랙션을 자연어로 설명하고 생성할 수 있게 될 예정이다. ## 템플릿과 디자인 시스템 연동 - Inserts 패널을 통해 게시된 디자인 라이브러리를 사이트에 연결할 수 있다. - 팀의 컴포넌트와 스타일을 재사용해 제작 속도와 일관성을 높일 수 있다. - 별도의 디자인 시스템이 없는 경우에도 내비게이션, 히어로 섹션, 전체 페이지 같은 기본 블록을 활용할 수 있다. - 디자인 시스템을 처음부터 구축하지 않아도 검증된 구성 요소를 조합해 사이트를 만들 수 있다. ## 다양한 화면에 대응하는 반응형 디자인 - 레이아웃, 텍스트, 디자인이 화면 크기와 브레이크포인트에 맞춰 자동으로 조정된다. - Multi-edit 기능으로 여러 화면 크기의 요소를 한 번에 수정할 수 있다. - 텍스트 스타일마다 브레이크포인트별 글자 크기와 간격을 설정할 수 있으며, 별도의 변수를 사용하지 않아도 된다. - 자동 조정 기능을 기반으로 하면서도 세부 요소는 수동으로 조정해 정교하게 다듬을 수 있다. - 미리보기 창의 크기를 바꾸면서 레이아웃 재배치와 브레이크포인트 전환을 확인할 수 있다. ## 웹사이트 수준의 프로토타이핑과 검수 - 협업자에게 인터랙티브한 라이브 웹사이트 미리보기를 공유하고 피드백을 받을 수 있다. - 미리보기는 HTML과 CSS로 렌더링되므로 일반적인 Figma 프로토타입보다 실제 게시 환경에 가까운 결과를 확인할 수 있다. - 반응형 동작뿐 아니라 웹사이트에 특화된 인터랙션도 게시 전에 테스트할 수 있다. ## 기본 제공되는 애니메이션과 인터랙션 - 마우스 패럴랙스: 커서 움직임에 따라 객체를 이동시킨다. - 라이트박스: 이미지를 강조하고 배경을 어둡게 처리한다. - 스핀: 객체를 무한 회전시킨다. - 드래그 가능 요소: 페이지 안의 요소를 자유롭게 이동시킨다. - 타자기 효과: 텍스트를 한 글자씩 표시한다. - 스크램블 텍스트: 문자를 무작위로 보여준 뒤 원래 텍스트를 드러낸다. - 마키, 리빌, 스크롤 패럴랙스 같은 사전 제작 효과도 제공된다. ## Figma Sites만의 확장 기능 - Figma Design에는 아직 없는 스크롤 패럴랙스와 스크롤 변환 기능을 지원한다. - 인터랙티브 컴포넌트를 별도로 만들지 않아도 호버 상태와 눌림 상태를 구현할 수 있다. - 향후 코드 레이어를 사용해 플러그인이나 외부 도구 없이 더 복잡한 인터랙션을 추가할 수 있다. - AI 채팅을 이용해 드래그 가능한 목록이나 실제 지리 정보를 반영한 시계처럼 복잡한 동작을 설명만으로 생성할 수 있게 될 예정이다. - 생성한 코드 레이어는 Figma Design의 라이브러리처럼 재사용·공유 가능한 컴포넌트와 인스턴스로 만들 수 있다. Figma Sites는 단순히 디자인을 웹으로 내보내는 기능보다, 디자인·반응형 구현·프로토타이핑·게시를 통합한 제작 환경에 가깝다. 빠르게 랜딩 페이지나 이벤트 사이트를 제작해야 하는 팀, 개발 리소스가 적은 디자이너에게 특히 유용하며, 복잡한 서비스 기능이나 세밀한 코드 제어가 필요한 경우에는 향후 코드 레이어 기능의 성숙도를 함께 확인하는 것이 좋다.

버전 관리: 피그마 (새 탭에서 열림)

Figma의 Layers 패널에 가로 스크롤을 추가하는 일은 단순한 UI 개선이 아니었다. 계층 구조, 접기·펼치기와 잠금·숨김 상태, 가상화 렌더링, 다양한 텍스트 길이와 다중 스크롤 방향이 서로 얽혀 있었기 때문이다. Figma 팀은 세 가지 프로토타입을 시험하며 사용자의 계층 구조 인식과 작업 맥락을 해치지 않는 방향을 탐색했다. ## 가로 스크롤이 어려웠던 이유 - Layers 패널은 자주 사용되고 신뢰성이 중요해 작은 동작 변화도 신중해야 했다. - 레이어는 정적인 목록이 아니라 다음과 같은 상태를 가진다. - 숨김·잠금 - 계층 접기·펼치기 - 부모·자식 관계 - 성능을 위해 현재 화면에 보이는 레이어만 렌더링하는 **가상화**가 적용되어 있었다. - 세로로 스크롤하면 새 레이어가 렌더링되고, 레이어 이름 길이가 달라져 가로 스크롤 영역과 정렬이 복잡해졌다. - 핵심 목표는 단순히 콘텐츠를 옮기는 것이 아니라 사용자가 현재 계층상의 위치와 “더 볼 내용이 있음”을 계속 이해하도록 하는 것이었다. - 디자이너 Giorgio Caviglia는 JavaScript, HTML, CSS, React로 직접 프로토타입을 만들어 수천 개 레이어와 다양한 상호작용을 실제로 검증했다. ## 첫 번째 시도: 화면 왼쪽의 보이지 않는 레이어 표시 - 레이어가 패널의 왼쪽 위나 오른쪽 아래 경계를 벗어나면 해당 위치에 아이콘을 표시하는 대칭형 UI를 실험했다. - 아이콘을 패널 가장자리에 고정하는 것은 쉬웠지만, 레이어 이름이 스크롤될 때 배경이 일부 요소 아래로 지나가고 다른 텍스트는 가려야 했다. - 컴포넌트가 위에 놓인 요소의 정확한 위치를 알지 못해 다음 문제가 발생했다. - 배경이 텍스트를 제대로 덮지 못함 - 레이어 행 구조와 불투명 배경 처리가 충돌함 - 스크롤 상태에 따라 시각적 가림 처리가 달라짐 - 디자인 측면에서도 왼쪽 상단에 레이어 이름의 끝부분이 들쭉날쭉하게 남아 시각적으로 어색했다. - 결과적으로 대칭성을 유지하려던 해결책이 새로운 문제를 만들었고, 패널 상단의 빈 공간을 어떻게 다룰지 재검토하게 됐다. ## 두 번째 시도: 선택한 레이어로 자동 스크롤 - 캔버스에서 선택한 레이어가 Layers 패널에 보이지 않으면 해당 레이어가 패널 중앙에 오도록 자동으로 가로 스크롤하는 방식을 실험했다. - 이론적으로는 편리했지만, 실제 사용에서는 가로와 세로 스크롤이 동시에 발생해 사용자가 현재 위치를 잃었다. - 특히 깊게 중첩된 레이어를 선택하면 부모 레이어가 화면에서 사라져 계층 구조를 파악하기 어려웠다. - 사용자는 작업 대상의 이름뿐 아니라 다음 정보도 함께 확인해야 한다. - 어떤 부모 아래에 있는지 - 계층상 어디에 위치하는지 - 특정 컴포넌트의 일부인지 - 화면을 갑자기 다른 위치로 이동시키는 동작은 Google Maps가 주행 중 지도를 갑자기 다른 장소로 옮기는 것과 비슷한 혼란을 유발했다. - 도구가 사용자를 돕기보다 현재 작업에 대한 정신적 모델을 깨뜨리는 결과가 되어 채택되지 않았다. ## 세 번째 시도: 레이어 이름 변경 중 스크롤 - 가로 스크롤 도입으로 레이어 이름을 편집하는 동안 다른 레이어로 스크롤할 때의 동작도 새롭게 정의해야 했다. - 사용자가 이름 입력 중 다른 레이어를 보기 위해 스크롤하면, 입력 중인 텍스트를 자동으로 새 이름으로 확정하는 방안을 검토했다. - 그러나 스크롤은 이름 변경을 확정했다는 충분히 강한 신호가 아니었다. - 이 동작을 채택하면 사용자가 의도하지 않게 레이어 이름을 변경할 위험이 있었다. - 따라서 스크롤과 편집 확정의 관계를 별도로 설계해야 한다는 점이 드러났다. ## 실용적인 시사점 - 복잡한 UI에서는 정적인 화면 설계만으로 모든 상태를 예측하기 어렵기 때문에 실제 코드 기반 프로토타이핑이 유용하다. - 자동 이동은 편리함보다 사용자의 공간적·계층적 맥락 보존을 우선해야 한다. - 스크롤, 선택, 편집처럼 서로 다른 의도를 가진 동작을 하나의 암묵적 신호로 처리하면 오작동과 혼란이 발생한다. - 특히 가상화된 계층형 UI에서는 렌더링 구조, 텍스트 가림, 상태 변화까지 함께 고려해야 한다.

핸드메이드 웹을 위한 자리 (새 탭에서 열림)

작은 개인 웹사이트가 획일화·상업화된 인터넷에 새로운 가능성을 열고 있다. 저자는 웹사이트를 이력서나 포트폴리오처럼 완성된 목적지로 만들기보다, 개인의 취향과 상상력이 담긴 변화하는 공간으로 바라보자고 주장한다. 직접 웹사이트를 만드는 행위 자체가 더 개인적이고 표현적인 인터넷을 되살리는 방법이라는 결론이다. ### 상업화 이전의 개인적인 웹 - 1990년대 웹은 개인이 자신만의 디지털 공간을 소유하고 가꾸는 문화가 강했다. - GeoCities는 1994년 누구나 2MB 규모의 웹 공간을 만들 수 있게 했고, 한때 약 3,800만 개의 웹페이지를 호스팅했다. - 사이트들은 와인·음식, 기술 등 관심사별 “동네”로 묶였으며, 세련되지 않아도 개인의 개성과 공동체성이 드러났다. - 웹사이트는 단순한 정보 전달 수단이 아니라 자신을 표현하고 다른 사람과 연결하는 공간이었다. ### 효율성과 플랫폼이 만든 획일화 - 오늘날 웹사이트 수는 크게 늘었지만, 인터넷은 오히려 더 제한적이고 비슷해졌다. - 웹 제작 도구의 대중화는 접근성을 높였지만, 효율성과 표준화 중심의 디자인으로 손으로 만든 듯한 불완전함을 약화시켰다. - 소셜 미디어 플랫폼이 개인 홈페이지를 대신하면서 사용자는 정해진 형식과 알고리즘에 맞춰 자신을 표현하게 됐다. - 공개적인 자기표현에 대한 평가와 검열의 두려움 때문에 진솔한 표현이 사라지는 ‘인터넷의 어두운 숲’ 현상도 나타난다. ### 핸드메이드 웹의 부활 - Neocities는 GeoCities의 웹사이트를 보존하기 위해 시작했으며, 현재는 약 100만 개의 사이트를 호스팅하는 플랫폼으로 성장했다. - Rhizome, Center for Net Art, School for Poetic Computation 등은 인터넷 예술 전시와 워크숍을 지원한다. - DWeb 운동은 Internet Archive 등의 지원을 받아 더 분산되고 이용자가 소유하는 인터넷을 추구한다. - 이처럼 개인적이고 실험적인 웹은 사라진 것이 아니라 특정 커뮤니티와 프로젝트 안에서 계속 이어지고 있다. ### 웹사이트는 ‘홈페이지’가 아니라 변화하는 공간 - 웹사이트가 이력서, 포트폴리오, 블로그처럼 여러 기능을 동시에 수행해야 한다고 생각하면 제작 자체가 부담스러워진다. - 사이트는 반드시 실용적이거나 완성된 자기소개서일 필요가 없으며, 만든 사람의 소유와 취향을 담는 것만으로 충분하다. - 고정된 ‘집’이나 목적지보다 시간이 지나며 변하고 성장하는 공간으로 웹사이트를 바라볼 수 있다. - 짧은 기간 운영하거나, 한 가지 주제만 다루거나, 특정 한 사람에게만 공개하는 등 형식과 목적은 자유롭다. ### 시간의 제약을 가진 웹사이트 - 온라인 공간도 현실의 장소처럼 특정 시간에만 열리거나 사라질 수 있다. - B&H 카메라 매장은 종교적 휴일에 오프라인 매장과 웹사이트를 함께 닫는다. - `Cloudwatching`과 `Stargazing`은 각각 낮과 밤에만 접근할 수 있다. - `Internet Stoop`처럼 12시간만 존재하는 사이트나, 5일 만에 종료된 Reddit의 `The Button`처럼 일시적인 웹 경험도 가능하다. - 도메인 갱신과 유지보수에는 한계가 있으므로, 모든 웹사이트가 영원히 존재해야 한다는 생각도 재고할 수 있다. ### 찾기 어려운 웹사이트 - 검색엔진과 소셜 플랫폼의 최적화 경쟁에 반대해, 일부러 발견하기 어렵게 만드는 방식도 하나의 배포 전략이 된다. - `Black Room`은 알아보기 어려운 URL을 사용하고, `Default Filename TV`는 파일명을 바꾸지 않은 홈비디오를 모아 보여준다. - 이런 사이트는 검색 결과보다 링크를 따라 이동하는 ‘웹 서핑’ 과정에서 우연히 발견된다. - 쉽게 소비되는 콘텐츠가 아니라, 적절한 방문자가 직접 찾아냈을 때 의미가 생기는 인터넷 경험을 제공한다. ### 소유자와 작가가 사라진 웹 - 웹사이트를 만든 사람이나 원래 목적에서 분리해, 방문자가 의미를 투영하도록 만들 수도 있다. - JODI의 웹사이트는 ASCII 이미지와 미로 같은 구조를 통해 방문자가 오랫동안 탐험하게 한다. - SCP Foundation은 수천 명이 공동으로 fictional 세계관을 작성하며, 실제 조직처럼 보이는 허구의 웹사이트를 구축한다. - 웹사이트가 명확한 저자나 기능을 갖지 않아도, 미스터리와 상상력을 유발하는 도구가 될 수 있다. ### 직접 만드는 행위의 의미 - 핸드메이드 웹에 참여하는 가장 간단한 방법은 자신의 웹사이트를 직접 만드는 것이다. - 사이트의 규모나 완성도보다 개인적인 관점, 실험성, 지속 방식이 중요하다. - 수십 년 동안 가꿀 수도 있고 며칠 만에 끝낼 수도 있으며, 기술적·시적·공동체적 목적 모두 가능하다. - 하나의 플랫폼이 수많은 사람에게 맞춰지는 대신, 각자가 만든 수많은 웹사이트가 공존하는 인터넷을 상상할 수 있다. 자신만의 작은 웹 공간을 만들 때는 완벽한 홈페이지를 목표로 하기보다, 한 가지 관심사나 실험에서 시작하는 것이 좋다. 운영 시간, 접근 방식, 수명, 디자인을 일부러 제한하면 더 독창적이고 개인적인 웹 경험을 만들 수 있다.

입문하기: 첫 프로덕트 (새 탭에서 열림)

제품 디자인의 첫 직무를 얻으려면 포트폴리오를 통해 실력뿐 아니라 문제 해결 과정과 제품 사고를 보여줘야 한다. 특히 결과물 자체보다 “왜 그렇게 결정했는가”를 설명하고, 제약·트레이드오프·배운 점까지 설득력 있게 전달하는 것이 중요하다. Figma는 인턴과 신입 디자이너에게 관찰자가 아닌 제품에 기여하는 구성원으로서의 창의성과 새로운 관점을 기대한다. ## Figma의 초기 커리어 기회 - Figma는 매년 인턴과 신입 졸업생을 제품 디자인 팀에 영입한다. - 초기 경력 디자이너도 단순히 업무를 관찰하는 데 그치지 않고 제품에 새로운 아이디어와 에너지를 더한다. - 글은 Figma의 채용 기준과 초기 커리어 지원 방법, 인터뷰 과정 등을 안내한다. - 인터뷰에는 Figma 제품 디자이너인 Chia Amisola, Julia Han, Keeyen Yeo, Kelly Hu, Tammy Taabassum의 경험과 조언이 담겼다. ## 포트폴리오의 기본 원칙 - 포트폴리오는 첫인상을 결정하므로 자신의 역량, 창의성, 디자인 프로세스, 결과의 영향력을 가장 잘 보여주는 작업을 앞에 배치해야 한다. - 사이트 제작 도구, 프로젝트 개수, 시각적 스타일보다 다음 요소가 더 중요하다. - 최고의 작업을 선별했는가 - 프로젝트를 이해하기 쉬운 이야기로 구성했는가 - 방문자가 콘텐츠를 쉽게 탐색할 수 있는가 - 포트폴리오가 자신의 관점과 개성을 드러내는가 - 포트폴리오의 형식은 개인적일 수 있으며, 정해진 템플릿을 따르기보다 자신과 작업을 잘 표현하는 방식을 선택하면 된다. ## 가장 강한 프로젝트를 앞에 배치하기 - 첫 번째 프로젝트는 전체 포트폴리오의 기준을 설정하므로 가장 종합적으로 자신의 능력을 보여주는 작업을 선택해야 한다. - 어떤 프로젝트를 앞에 둘지 고민된다면, 가장 자연스럽게 설명할 수 있고 설득력 있는 이야기를 들려줄 수 있는 작업을 고르는 것이 좋다. - 좋은 프로젝트 사례에는 다음 내용이 포함된다. - 명확한 문제 정의 - 프로젝트의 주요 단계와 마일스톤 - 결과에 대한 해석과 결론 - 성과를 측정한 지표 - 진행 과정에서 얻은 교훈 - 다시 한다면 바꾸고 싶은 점 - 프로젝트가 큰 성공을 거두지 못했더라도 실패 원인과 배운 점을 설명할 수 있다면 충분히 강력한 사례가 될 수 있다. ## 결과보다 디자인 의사결정이 중요한 이유 - 제품 디자인 포트폴리오에서는 최종 화면보다 각 선택의 이유를 설명하는 능력이 중요하다. - 색상, 컴포넌트, 스타일, 문구 등 모든 요소는 의도적인 결정으로 다뤄야 한다. - 설명할 때 다음 내용을 구체적으로 제시해야 한다. - 어떤 문제를 해결하려 했는가 - 고려한 대안은 무엇이었는가 - 각 대안의 장단점은 무엇이었는가 - 시간·기술·비즈니스 등 어떤 제약이 있었는가 - 최종 선택으로 인해 발생한 트레이드오프는 무엇인가 - 이러한 설명은 단순히 화면을 제작하는 능력을 넘어, 제품의 맥락과 다양한 선택의 영향을 이해하고 있음을 보여준다. ## 포트폴리오 제작에 활용할 수 있는 자료 - Figma는 포트폴리오 발표 구성과 제작을 돕는 커뮤니티 템플릿을 제공한다. - 활용 가능한 자료에는 다음이 포함된다. - 제품 디자이너 포트폴리오 발표 가이드 및 템플릿 - 여러 기기 화면을 보여주는 디바이스 목업 - 15페이지 분량의 제품 디자인 포트폴리오 발표 템플릿 - HTML 포트폴리오 템플릿 - UI·UX 디자이너용 개인 포트폴리오 템플릿 - 템플릿은 완성된 정답이라기보다 작업의 구조를 잡고 빠르게 시작하기 위한 도구로 활용하는 것이 적절하다. 프로젝트를 많이 넣기보다 가장 잘 설명할 수 있는 작업을 선별하고, 화면보다 문제 정의·과정·의사결정·성과·배움을 중심으로 구성하는 것이 효과적이다. 포트폴리오를 완성한 뒤에는 각 선택의 “왜”를 말로 설명하는 연습을 해보는 것이 좋다.

디자인에서 코드로의 자동화를 (새 탭에서 열림)

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 플러그인은 반복적인 초기 구현을 줄이고 협업을 빠르게 만드는 보조 도구로 활용할 때 가장 효과적이다.

주목하고 좋아하게 (새 탭에서 열림)

피그마 Creator Fund는 커뮤니티를 위해 무료 위젯·플러그인·템플릿 등을 만드는 창작자를 지원하며, 13명에게 약 30만 달러를 지원했다. 이 글은 그중 실용적이고 어려운 문제를 해결한 프로젝트들을 소개하고, 창작자가 명확한 비전과 시각 자료를 바탕으로 자신이 관심 있는 아이디어를 발전시키라고 권한다. 제공된 본문에는 세 프로젝트 중 **Figma to Code** 사례가 중심적으로 포함되어 있다. ## Creator Fund의 목적과 성과 - Figma Community에서 누구나 사용할 수 있는 무료 리소스 제작을 지원한다. - 2023년 3월 시작 이후: - 수백 건의 지원서를 접수했다. - 9개국 13명의 창작자에게 약 30만 달러를 지원했다. - 디자인 시스템 튜토리얼, Figma 개발자 플랫폼 학습 플러그인 등 다양한 결과물이 나왔다. - Figma는 단순히 흥미로운 프로젝트보다 다음과 같은 프로젝트를 선호한다. - 해결하기 어려운 문제를 다루는 프로젝트 - 사용자의 시간을 절약하는 실용적인 도구 - 커뮤니티 전체가 무료로 사용할 수 있는 리소스 ## Creator Fund 지원서 작성 시 고려할 점 - 만들고 싶은 것이 무엇인지 명확한 비전을 제시해야 한다. - 몇 문장으로 급하게 작성하기보다 아이디어와 목표를 충분히 구체화해야 한다. - 추가 설명을 요청받을 수 있으므로 시각 자료를 준비하는 것이 좋다. - 심사위원이 원하는 것을 추측하기보다 자신이 실제로 관심 있는 문제를 선택해야 한다. - 지원 프로그램은 단순한 자금 제공을 넘어, 창작자가 프로젝트를 완성하도록 돕는 역할을 한다. ## Figma to Code: 디자인을 코드로 변환 - 브라질 쿠리치바의 Bernardo Ferrari가 만든 프로토타이핑 플러그인이다. - Figma 레이아웃을 다음 형식의 코드로 변환한다. - HTML - Tailwind - Flutter - SwiftUI - 디자인 시안을 실제 프론트엔드 코드로 빠르게 옮길 수 있어 프로토타이핑과 초기 개발 과정을 단축한다. - 디자인을 기반으로 제품을 만들고 사업화하려는 창작자에게 특히 유용하다. ## 코로나19 프로젝트에서 시작된 플러그인 - Bernardo는 코로나19 확산 정보를 제공하는 브라질 지역 웹사이트의 유지보수를 맡으며 플러그인을 구상했다. - 웹 개발 경험이 2015년 이후 거의 없었기 때문에 Figma에서 디자인한 화면을 직접 코드로 재현하는 방식으로 작업했다. - 기존 디자인-코드 변환 플러그인에는 다음과 같은 한계가 있었다. - 코드 생성 속도가 느림 - 여러 단계를 거쳐야 함 - 전체 기능을 사용하려면 유료 결제가 필요함 - Figma API 지원 범위가 좁고 오토 레이아웃 같은 기능이 빠짐 - 하나의 언어나 프레임워크만 지원함 - 반응형 디자인과 접근성을 충분히 고려하지 않음 - 이를 해결하기 위해 약 두 달 동안 플러그인을 개발했고, 2020년 7월 출시했다. ## Creator Fund를 통한 기능 개선 - 출시 후 몇 년 동안 Figma와 웹 프레임워크가 크게 바뀌었지만, 플러그인은 이를 따라가지 못했다. - 초기 버전은 다음과 같은 제한이 있었다. - 패딩을 수직·수평 방향으로만 설정 가능 - 오토 레이아웃에서 `min`과 `fixed` 정도만 지원 - Creator Fund 지원을 계기로 플러그인을 유료화하지 않고 대대적으로 개선할 기회를 얻었다. - Figma의 새로운 Dev Mode를 지원하는 작업도 진행했으며, 2023년 Config에서 업데이트를 공개했다. - 지원금은 기존 프로젝트를 유지하는 데 그치지 않고, 최신 Figma 기능과 개발 환경에 맞춰 제품을 발전시키는 촉진제가 되었다. ## 실용적인 시사점 - 디자인-코드 변환 도구는 단순한 코드 생성뿐 아니라 반응형 레이아웃, 접근성, 최신 Figma API 지원까지 고려해야 한다. - 무료 도구를 지속적으로 유지하려면 개발 비용과 기능 업데이트를 지원하는 구조가 필요하다. - Creator Fund에 지원하려는 창작자는 명확한 문제 정의, 구체적인 해결 방법, 실제 사용자가 얻는 이점을 함께 제시하는 것이 좋다. - 제공된 글 본문은 Figma to Code 사례 중간에서 끝나므로, 나머지 두 프로젝트의 구체적인 내용은 포함되어 있지 않다.

Figma Persona 20 (새 탭에서 열림)

Figma Persona 2022는 21개의 질문을 통해 자신의 창의적 협업 및 업무 방식을 돌아보게 하는 퀴즈다. 아이디어를 만들고 문제를 해결하는 방식, 작업 공간과 도구를 사용하는 방식, 다른 사람과 협업하는 방식을 분석해 8가지 페르소나 중 하나를 제시한다. 이 글의 결론은 자신의 성향을 이해하고, 그에 맞는 업무 환경과 협업 방식을 의식적으로 설계하자는 것이다. ## Figma Persona 퀴즈의 목적 - 연말에 자신의 업무 방식과 협업 습관을 되돌아보고 다음 해의 목표를 세우도록 돕는다. - 21개의 질문을 통해 개인의 창의적 특성을 분석한다. - 분석 기준은 다음 세 가지 축이다. - 아이디어를 생성하고 문제를 해결하는 방식 - 작업 공간을 구성하고 Figma 도구를 활용하는 방식 - 다른 사람과 소통하고 협업하는 방식 - 결과는 총 8개의 Figma Persona 중 하나로 나타난다. - 퀴즈 자체도 Figma 파일과 FigJam을 활용해 동료들과 함께 진행할 수 있도록 구성됐다. ## 정리된 개인주의자 정리된 개인주의자는 명확한 프로세스와 개인의 책임 범위를 선호하는 유형이다. - 혼자 집중할 수 있는 시간을 가진 뒤 팀과 다시 공유하는 방식을 좋아한다. - 실시간 회의보다 비동기 업데이트, 버그 검토, 명확한 마일스톤을 선호한다. - 정돈된 작업 환경과 분명한 산출물, 체계적인 프로세스에서 높은 생산성을 발휘한다. - 협업할 때는 충분히 생각할 시간을 주고, 사전 자료와 기대 결과를 명확하게 전달하는 것이 효과적이다. - 요청 사항을 모호하게 표현하기보다 구체적이고 정확하게 설명해야 한다. ## Type 1: Lone Ascender Lone Ascender는 체계적이고 분석적인 개인주의자다. - 복잡한 문제를 해결할 때 강점을 보인다. - 전술적이고 실용적이며 시스템 중심의 해결책을 선호한다. - 거의 모든 일에 자신만의 프로세스를 만들 정도로 구조화된 업무 방식을 갖고 있다. - 단축키, 색상 코드 등 도구 사용법을 빠르게 익히고 반복 작업을 효율화한다. - 이상적인 접근보다 현실적이고 확장 가능한 해결책을 중시한다. - 협업 자체를 거부하지는 않지만, 자신의 파일 구조와 작업 규칙이 흐트러지는 것을 불편해할 수 있다. - 적절한 도구로는 Figma의 단축키와 빠른 실행 기능, 다양한 FigJam 템플릿 등이 제시된다. ## 나머지 Figma Persona 유형 글은 Lone Ascender 외에도 다음 7가지 협업 성향을 제시한다. - **Canvas Captain**: 캔버스와 작업 공간을 주도적으로 구성하고 관리하는 유형 - **Direct Mobilizer**: 명확하고 직접적인 소통으로 사람들을 움직이는 유형 - **Artful Detacher**: 작업과 감정을 적절히 분리하고 필요할 때 한발 물러나는 유형 - **Bounding Boxer**: 작업 범위와 구조를 명확히 설정하는 유형 - **Branch Merger**: 여러 아이디어나 작업 흐름을 하나로 통합하는 유형 - **Vector Networker**: 다양한 사람과 연결하며 협업 네트워크를 확장하는 유형 - **Bézier Curve Baller**: Figma의 세부적인 디자인 기능과 조형적 표현을 능숙하게 다루는 유형 이 유형들은 우열을 가리는 분류가 아니라, 각자가 아이디어를 만들고 파일을 다루며 협업하는 방식을 재미있게 이해하기 위한 자기 진단 도구다. ## 자신의 Persona를 협업에 활용하는 방법 - 자신의 강점뿐 아니라 협업 과정에서 생길 수 있는 불편함도 파악한다. - 혼자 생각할 시간이 필요한 사람에게는 회의 전에 비동기 사전 작업을 제공한다. - 업무 요청 시 목표, 산출물, 마감일, 의사결정 기준을 구체적으로 제시한다. - 정리와 구조화를 중시하는 사람에게는 자유로운 브레인스토밍만 요구하기보다 명확한 범위와 기대치를 함께 전달한다. - 팀원마다 작업 방식이 다르다는 점을 인정하면 불필요한 충돌을 줄이고 협업 효율을 높일 수 있다. 자신의 Persona를 고정된 성격 유형으로 받아들이기보다, 현재의 업무 습관을 점검하는 출발점으로 활용하는 것이 좋다. 특히 팀 전체가 함께 퀴즈를 진행하면 서로에게 필요한 소통 방식과 협업 조건을 더 쉽게 이해할 수 있다.

피그마 접근성 팀과의 대화 | 피그마 블로그 (새 탭에서 열림)

Figma의 접근성 팀은 스크린 리더 지원을 개발 초기부터 다양한 사용자와 함께 검증해야 한다고 강조한다. 프로토타입 스크린 리더 베타를 통해 VoiceOver와 JAWS의 차이, 저시력 사용자의 시각·음성 병행 사용, 키보드 포커스의 중요성을 확인했다. Figma는 앞으로도 접근성 파트너와 협력해 지원 범위를 넓히고, 디자이너가 생성 HTML과 접근성 품질을 더 직접적으로 관리할 수 있는 도구를 제공할 계획이다. ## 오픈 베타를 통해 확인한 실제 사용자 요구 - 내부 테스트만으로는 실제 사용 환경과 보조공학 사용자의 요구를 충분히 파악하기 어렵다. - Mac VoiceOver에서는 잘 작동하던 기능도 JAWS 등 다른 스크린 리더에서는 추가 조정이 필요했다. - 스크린 리더 사용자는 시각 정보를 전혀 사용하지 않는 경우만 있는 것이 아니다. - 저시력 사용자는 화면의 시각 정보와 음성 정보를 함께 활용할 수 있다. - 다양한 상호작용 방식을 제공하면 더 넓은 사용자에게 도움이 된다. - 이에 따라 Figma는 주요 스크린 리더 기술을 개발 후반이 아니라 초기 단계부터 테스트하기로 했다. ## 시각 경험과 스크린 리더 경험의 연결 베타 테스트 결과, 스크린 리더 사용 경험은 시각적 UI와 분리된 별도 기능이 아니라 두 경험이 서로 보완되어야 한다는 점이 드러났다. - 접근성 트리에 요소의 위치 정보를 제공해, 시각 정보를 일부 활용하는 사용자가 스크린 리더 커서의 화면상 위치를 파악할 수 있게 했다. - 클릭 가능한 요소에 키보드 포커스가 있을 때도 “On hover” 상호작용을 실행하도록 조정했다. - 스크린 리더 커서가 이동하면 스크롤 영역도 함께 이동하도록 구현했다. - 프로토타입 도구 모음이 자동으로 숨겨질 때 키보드 포커스를 고려했다. - 화면을 탐색할 때 도구 모음이 방해되지 않아야 한다. - 동시에 현재 포커스된 컨트롤은 계속 화면에 보여야 한다. - 개발 과정에서 접근성 사용자를 단순히 “시각 사용자”와 “음성 사용자”로 나누는 기존 가정을 수정하게 됐다. ## 접근 가능한 프로토타입 진입 경로 프로토타입 자체가 스크린 리더로 접근 가능하더라도, Figma 디자인에서 해당 프로토타입으로 이동할 방법이 없으면 전체 경험은 접근 가능하지 않다. - 실제 출시 과정에서 프로토타이핑 모드로 바로 이동하는 단축키를 추가했다. - Mac: `Option + Command + Return` - PC: `Alt + Ctrl + Enter` - 스크린 리더 지원을 지속적으로 켤 수 있는 토글을 제공했다. - Figma Community를 통해 접근성 기능 사용법을 더 적극적으로 안내했다. - 기능 단위가 아니라 사용자가 처음부터 끝까지 수행하는 전체 흐름을 검증해야 한다는 교훈을 얻었다. ## 접근성 파트너와의 공동 테스트 Figma는 보조공학 사용자와 기업을 연결하는 Fable과 협력해 기능을 검증하고 있다. - Fable은 특정 사용자 흐름 테스트부터 심층 사용자 인터뷰까지 지원한다. - 사용자 피드백을 반영해 접근성 관련 컨트롤과 키보드 단축키를 더 쉽게 찾도록 개선하고 있다. - 접근성 탐색용 키보드 단축키를 키보드 단축키 패널에 포함하는 작업을 진행했다. - 키보드 단축키 패널 자체도 스크린 리더와 키보드로 접근 가능하도록 개선 중이다. - FigJam에서는 화면 구성의 정보 계층을 명확히 전달하기 위해 다음 정보를 스크린 리더에 제공한다. - 각 항목의 자식 수 - 형제 항목 수 - 캔버스 내 요소의 맥락을 파악하는 데 필요한 구조 정보 - 다양한 스크린 리더 소프트웨어와 숙련도 차이를 고려하면서 기능을 조정할 수 있었다. ## 앞으로의 접근성 방향 Figma 팀은 현재의 프로토타입 스크린 리더 지원이 완성된 상태가 아니라고 설명한다. - 콘텐츠가 기본적으로 스크린 리더 사용자에게 항상 제공되도록 하는 것을 우선순위로 삼고 있다. - 디자이너가 Figma가 생성하는 HTML을 더 세밀하게 제어할 수 있도록 할 계획이다. - 스크린 리더에 익숙하지 않은 디자이너도 자신의 디자인 접근성을 평가할 수 있는 도구를 개발하려 한다. - 접근성을 출시 직전의 점검 항목이 아니라 제품 설계와 개발 전반에 포함되는 기준으로 정착시키려 한다. 접근성 기능을 만들 때는 특정 스크린 리더 하나만 기준으로 삼지 말고, 실제 보조공학 사용자와 함께 초기 단계부터 테스트하는 것이 중요하다. 또한 개별 기능의 접근성뿐 아니라 사용자가 해당 기능에 도달하고, 탐색하고, 조작하는 전체 경로를 검증해야 한다.

접근성 향상을 위한 (새 탭에서 열림)

Figma는 디자인을 모든 사람이 참여할 수 있게 만드는 것을 목표로 하며, 이를 위해 시각장애·저시력 사용자를 위한 프로토타입 스크린 리더 베타를 발표했다. Figma 디자인은 일반 HTML이 아니어서 기존 스크린 리더가 내용을 읽기 어려웠지만, 프로토타입을 스크린 리더 전용 HTML로 변환하는 방식으로 문제를 해결했다. 이는 중요한 진전이지만, ARIA 역할·탭 순서·대체 텍스트 설정 등 접근성 지원을 확대하기 위한 추가 과제가 남아 있다. ## 프로토타입 스크린 리더 베타 - 기존에는 시각장애 사용자가 Figma 프로토타입을 열어도 스크린 리더에 “빈 캔버스” 레이블만 표시됐다. - 텍스트, 이미지, 버튼 등 프로토타입의 핵심 콘텐츠를 스크린 리더가 인식하지 못하는 문제가 있었다. - 베타 기능은 다음을 지원한다. - 텍스트 노트 읽기 - 이미지 대체 텍스트(alt text) 읽기 - 버튼과 키보드 동작을 통한 프로토타입 탐색 - Tab 키 등을 이용한 키보드 내비게이션 - 2022년 8월 업데이트를 통해 이 기능은 모든 사용자가 이용할 수 있는 오픈 베타로 전환됐다. ## Figma 디자인을 HTML로 변환하는 방식 - Figma는 웹 기반 애플리케이션이지만 디자인 결과물이 일반적인 HTML 요소로 그려지지 않는다. - 따라서 대부분의 스크린 리더가 Figma 캔버스의 텍스트와 인터페이스 구조를 직접 해석할 수 없었다. - Figma는 프로토타입을 스크린 리더 전용 HTML 표현으로 변환해 보조공학 기술에 제공하는 구조를 구현했다. - 이 변환 계층을 통해 스크린 리더가 화면에 표시된 콘텐츠와 상호작용 요소를 읽고 탐색할 수 있게 됐다. ## 함께 진행된 접근성 개선 - 다크 모드와 색상 대비 개선을 통해 다양한 시각적 요구를 지원했다. - WCAG 3.0 초안 기준에 부합하도록 색상 대비 준수를 강화했다. - Figma 데스크톱 앱과 Pro·Org·Enterprise 요금제에서 오디오 채팅 실시간 자막 기능을 오픈 베타로 제공했다. - Deque의 플랫폼 전반 접근성 평가를 받아 다음과 같은 개선 영역을 확인했다. - 키보드만으로 기능을 사용할 수 있도록 개선 - ARIA 레이블을 모범 사례에 맞게 적용 - Adee, Deque, Stark 등의 플러그인과 커뮤니티 파일을 통해 색상 대비 검사 등 접근성 도구 생태계도 확대되고 있다. ## 개발 프로세스에 접근성을 내재화 - Figma는 팀이 접근성을 고려하도록 권장하는 수준을 넘어, 제품을 설계·개발할 때 접근성을 필수적으로 반영하도록 하고 있다. - 키보드 전용 사용자와 스크린 리더 사용자를 지원하는 재사용 가능한 UI 컴포넌트를 제작하고 있다. - 새 기능과 코드가 접근성 모범 사례를 따르는지 확인할 수 있는 내부 도구도 개발 중이다. - 알파·베타 테스트에 접근성 사용자를 조기에 참여시켜 실제 사용 경험을 설계 과정에 반영하고 있다. ## 남은 과제 - 사용자가 디자인 요소에 직접 대체 텍스트를 지정할 수 있도록 해야 한다. - 컴포넌트에 ARIA 역할을 설정하는 기능이 필요하다. - 프로토타입 요소의 키보드 탭 순서를 지정할 수 있어야 한다. - 스크린 리더 지원은 시작 단계이며, 커뮤니티와 지속적으로 테스트하고 피드백을 받아 개선해야 한다. 실용적으로는 Figma에서 프로토타입을 제작할 때 이미지에 의미 있는 대체 텍스트를 제공하고, 키보드만으로 탐색 가능한 흐름과 충분한 색상 대비를 함께 검토하는 것이 권장된다.

Figma의 새로운 소 (새 탭에서 열림)

Figma는 2021년 8월 업데이트에서 FigJam의 확장성과 Figma 플러그인 개발 역량을 강화하고, 디자인 시스템 관리와 반복 작업을 간소화했다. 특히 FigJam 플러그인·위젯, 프로토타이핑 자동화를 위한 API, 라이브러리 관리 기능이 추가되어 협업과 디자인 운영의 효율성이 높아졌다. 또한 투명 객체의 그림자 처리와 직선 그리기처럼 일상적인 사용성도 개선했다. ## FigJam 플러그인과 위젯 도입 - FigJam에 Figma의 오픈 플랫폼을 확장해 팀별 협업 방식에 맞는 기능을 직접 만들 수 있게 했다. - **플러그인** - 개인 작업을 자동화하고 효율화하는 도구다. - 스타일 사용자 지정, 스티키 정리, 데이터 가져오기 등에 활용할 수 있다. - **위젯** - 여러 사용자가 캔버스에서 함께 조작하는 인터랙티브 객체다. - 투표, 설문, 메모장, 게임 등을 제공해 워크숍과 브레인스토밍 진행을 돕는다. - 기본 HTML·JavaScript 지식이 있으면 플러그인을, React 경험이 있으면 위젯을 개발할 수 있도록 진입 장벽을 낮췄다. - 플러그인은 모든 요금제 사용자가 개발할 수 있었고, 위젯은 당시 비공개 베타로 제공됐다. ## Figma 플러그인 API 확장 - **프로토타이핑 쓰기 기능** - 플러그인이 프로토타입을 자동 생성하거나 기존 인터랙션을 대량으로 수정할 수 있게 됐다. - 반복적인 프로토타입 제작과 상호작용 설정을 자동화할 수 있다. - **플러그인 파라미터** - 별도의 사용자 인터페이스를 만들지 않고도 Quick Actions를 통해 사용자 입력을 받을 수 있다. - 플러그인 개발 시간이 줄고, 간단한 입력 기반 도구를 더 빠르게 만들 수 있다. - 당시 오픈 베타로 제공됐다. ## 디자인 시스템 관리 개선 - **컴포넌트 이동** - 게시된 컴포넌트와 컴포넌트 세트를 파일 간에 이동할 수 있다. - 이동 후에도 기존 인스턴스와의 연결이 유지된다. - 대형 라이브러리를 여러 파일로 분리하거나 새 파일로 이전하기 쉬워졌다. - **라이브러리 교체** - 스타일과 컴포넌트를 하나씩 변경하지 않고, 전체 라이브러리 세트를 다른 라이브러리로 교체할 수 있다. - **컴포넌트 검색** - `Shift + I` 단축키로 필요한 컴포넌트를 빠르게 검색할 수 있다. - 규모가 큰 디자인 시스템에서 탐색 시간을 줄여준다. ## 일상적인 사용성 개선 - 투명 객체가 뒤에 있는 그림자를 기본적으로 가리도록 변경되어, 별도로 설정을 조정할 필요가 줄었다. - Figma와 FigJam에서 연필 도구 사용 시 `Shift`를 누르면 직선을 그릴 수 있다. - 그 밖의 버그 수정과 개선 사항은 Figma 릴리스 노트에서 확인할 수 있도록 안내했다. 실무에서는 컴포넌트 라이브러리를 기능별 파일로 분리하고, 라이브러리 교체 기능과 플러그인 자동화를 함께 활용하면 디자인 시스템 유지보수 비용을 줄일 수 있다. FigJam에서는 투표나 설문 위젯을 활용해 회의 진행과 의사결정을 구조화할 수 있다.