code-prototyping

2 개의 포스트

figma

코드, 장인정신, 그리고 중첩 폴더의 제작 | Figma 블로그 (새 탭에서 열림)

Figma의 중첩 폴더는 단순한 파일 정리 기능이 아니라 콘텐츠 구조와 권한 모델을 재설계한 대규모 제품 작업이었다. 개발 과정에서 팀은 전통적인 순차형 프로세스 대신 코드로 아이디어를 빠르게 검증하고, 직무 경계를 유연하게 넘나들며, 인수인계를 대화 중심 협업으로 바꾸었다. 그 결과 변화하는 AI·코드 중심 환경에서도 복잡한 기능을 빠르게 구체화하고 출시할 수 있었다. ## 중첩 폴더가 단순한 기능이 아니었던 이유 - 중첩 폴더는 규모가 커지는 팀이 파일과 프로젝트를 계층적으로 정리하도록 돕는 기능이다. - 구현 범위는 파일 브라우저에 그치지 않았다. - 콘텐츠 구조 - 관리자 제어 - 공유 방식 - 권한 처리 - 핵심 인프라 - 따라서 기존 모델에 폴더 한 단계만 추가하는 방식이 아니라, Figma의 콘텐츠 및 권한 모델을 근본적으로 재검토해야 했다. ## 변화한 제품 개발 환경 - 프로젝트 초기에는 일반적인 순차형 개발 방식을 따랐다. - 제품팀이 요구사항을 정의 - 디자인팀이 사용자 경험을 설계 - 설계가 충분히 정리된 뒤 엔지니어링 시작 - 그러나 개발 중 팀의 자원과 우선순위가 달라졌다. - AI 네이티브 기능 개발로 인력이 분산됨 - Figma Make, MCP 서버, 에이전트 스킬, 코드베이스 프로토타이핑 등이 아이디어를 빠르게 구현하는 수단으로 부상함 - 아이디어는 더 이상 완성된 문서에서만 출발하지 않고, 프로토타입·코드·Slack의 간단한 스케치에서도 시작될 수 있게 되었다. ## 코드로 먼저 검증하기 - 코드 작성 비용이 낮아지면서 논쟁이나 추상적인 기획을 오래 이어가기보다 실제 구현물을 빠르게 만들 수 있게 되었다. - 팀은 아이디어를 검증하기 위해 초기부터 pull request(PR)를 생성했다. - PR은 단순한 최종 코드 리뷰 수단이 아니라 다음을 확인하는 실험 도구로 활용되었다. - 기술적으로 가능한지 - 사용자 경험이 자연스러운지 - 권한과 데이터 구조에 문제가 없는지 - 여러 대안 중 어떤 방향이 적절한지 - 실제 동작하는 결과물을 바탕으로 논의하면서 의사결정 속도와 피드백의 구체성이 높아졌다. ## 직무 경계를 유연하게 바꾸기 - 역할을 엄격히 분리하기보다 문제 해결에 필요한 사람이 해당 영역의 결정을 맡았다. - 엔지니어가 디자인 관련 결정을 내리고, 디자이너가 직접 코드를 작성하는 등 업무 범위가 서로 겹쳤다. - 제품 관리자는 일상적인 실행 관리에서 일부 벗어나 더 큰 전략적 질문에 집중했다. - 이 방식은 각 직무의 전문성을 없애는 것이 아니라, 프로젝트 상황에 따라 책임을 유연하게 배분하는 접근이다. ## 인수인계 대신 지속적인 대화 - 디자인 완료 후 개발로 넘기는 식의 일방적인 handoff를 줄였다. - 역할의 경계가 흐려지면서 팀원들은 서로에게 배우는 동시에 자신의 전문 지식을 공유하는 관계가 되었다. - 평소 각 직무가 독점하던 작업 방식과 판단 기준을 공개함으로써 협업에 필요한 신뢰를 쌓았다. - 결과적으로 디자인, 제품, 엔지니어링이 단계별로 분리된 프로세스가 아니라 지속적인 대화와 공동 결정에 가까워졌다. ## 실용적인 시사점 복잡한 기능을 개발할 때는 완벽한 사전 설계만 기다리기보다 작은 PR과 프로토타입으로 가설을 검증하는 것이 효과적이다. 또한 직무별 책임을 고정하기보다 문제의 성격에 따라 역할을 유연하게 조정하고, 인수인계 문서만으로 소통하기보다 실행 과정에서 지속적으로 대화하는 협업 구조를 만드는 것이 중요하다.

figma

Figma Make, 이제 로컬 코드에서 | Figma 블로그 (새 탭에서 열림)

Figma Make은 디자인, 프로토타이핑, 실제 코드 배포 사이의 경계를 허물고, Figma 안에서 로컬 코드베이스를 직접 수정·검토·공유할 수 있도록 확장된다. 사용자는 화면 요소를 시각적으로 편집하거나 자연어 주석으로 동작을 변경하고, Git 브랜치·커밋·PR 흐름을 통해 안전하게 배포할 수 있다. 궁극적으로 Figma는 디자인 캔버스와 코드베이스를 하나의 협업 환경으로 통합하려 한다. ## 로컬 코드베이스의 시각적 편집 - Figma Make를 회사의 코드베이스에 연결하면 Figma 안에서 실제 UI를 직접 수정할 수 있다. - 화면 요소를 선택해 다음 속성을 변경할 수 있다. - 레이아웃 - 색상 - 글꼴 - 크기 - 기타 시각적 속성 - Make의 에이전트가 사용자의 시각적 변경에 대응하는 코드를 찾아 수정한다. - 이미 원하는 결과가 명확한 속성 변경에는 직접 편집 기능을 사용한다. - 현재는 코드베이스 접근 권한이 있는 디자이너에게 적합하며, 비기술 사용자를 위한 설정 과정은 계속 개선 중이다. ## 주석과 프롬프트를 활용한 동작 변경 - 단순한 속성 변경을 넘어 상호작용이나 애니메이션을 수정할 때는 화면 요소에 주석을 달 수 있다. - 주석에는 원하는 동작을 자연어로 설명할 수 있다. - 여러 요소를 한 번에 참조할 수 있어 에이전트에 구체적인 맥락을 전달한다. - 직접 편집과 일반적인 채팅 프롬프트 사이의 유연한 작업 방식으로 활용된다. - 예를 들어 버튼의 클릭 동작, 화면 전환, 애니메이션 로직 등을 설명해 코드에 반영할 수 있다. ## 브랜치·커밋·PR 기반 배포 - 프로덕션 코드는 팀의 개발 프로세스를 거쳐 의도적으로 배포하도록 설계됐다. - PR을 열기 전 변경 사항은 로컬 커밋으로 저장된다. - Make 안에서 Git 작업을 수행할 수 있다. - 브랜치 생성 - 커밋 확인 - 커밋 되돌리기 - 변경 이력 검토 - PR 생성 - 엔지니어링 팀은 일반적인 코드 변경과 동일하게 Make의 변경 사항을 리뷰할 수 있다. ## 디자인과 코드의 협업 및 왕복 작업 - 로컬 코드베이스의 변경 사항을 파일과 브랜치 단위로 팀원에게 공유할 수 있다. - 팀원은 공유받은 브랜치를 체크아웃해 변경 내용을 확인하고 추가 작업을 진행한다. - 커밋 이력을 통해 변경 전후를 비교할 수 있다. - Make에서 만든 화면·페이지·컴포넌트를 Figma 캔버스의 레이어로 복사할 수 있다. - Figma 캔버스에서 팀원과 의견을 나누고, Figma 에이전트와 함께 디자인을 수정할 수 있다. - 디자인 변경 사항은 다시 Make로 가져와 코드에 적용할 수 있다. - 이를 통해 다음과 같은 왕복 흐름을 지향한다. - Make에서 코드 기반 화면 제작 - Figma Design에서 검토·편집·협업 - 결정된 디자인을 다시 코드에 반영 ## 베타 출시 범위 - 직접 편집, 주석, 채팅, PR 생성 기능은 2026년 5월 28일부터 제한적 베타로 제공된다. - 베타 기간에는 AI 크레딧을 차감하지 않는다. - 정식 AI 크레딧 요금은 추후 공개될 예정이다. - 초기 베타는 Mac용 Figma Beta 데스크톱 앱에서만 제공된다. - 대기자 등록이 베타 접근을 보장하지는 않으며, 선정된 사용자에게 별도 이메일이 발송된다. - 향후 다른 플랫폼으로 확대할 계획이다. Figma Make는 디자인 도구와 IDE를 대체로 구분하기보다, 작업 단계에 따라 두 환경을 연결하는 방향을 택했다. 현재는 Mac 베타와 코드 접근 권한 등 제약이 있지만, Git 기반 리뷰 프로세스와 Figma 캔버스 협업이 안정화된다면 디자이너와 개발자가 실제 제품 코드를 함께 발전시키는 실용적인 워크플로가 될 수 있다.