figma2025년 6월 24일

캔버스, 코드를 만나다 (새 탭에서 열림)

Figma의 코드 레이어는 디자인 캔버스와 실제 코드를 하나의 작업 공간에서 결합하려는 시도다. React 기반 코드를 일반 Figma 레이어처럼 이동·복제·리사이즈하고, AI 또는 내장 IDE로 편집할 수 있게 해 디자인의 자유로운 탐색성과 코드의 강력한 기능을 함께 제공한다. 이를 위해 Figma는 캔버스 모델, 웹 기반 코드 편집기, 디자이너와 개발자의 협업 방식을 통합하는 하이브리드 접근법을 택했다. ## 디자인 캔버스와 코드의 충돌 - Figma 캔버스는 객체를 자유롭게 배치하고 수정하는 2D 공간이다. - 반면 코드는 디렉터리와 파일로 구성된 계층적 파일 시스템을 전제로 한다. - 이 차이 때문에 다음과 같은 문제가 발생한다. - 캔버스에서 코드 레이어를 복제하면 새 인스턴스를 만들 것인지, 코드의 분기본을 만들 것인지 결정해야 한다. - 코드의 원본이 캔버스인지 파일 시스템인지 명확히 해야 한다. - 시각적 레이어와 실제 코드 파일의 위치를 어떻게 연결할지 정해야 한다. - Figma는 코드의 구조를 캔버스에 그대로 강요하기보다, 코드가 Figma의 공간적 작업 방식에 맞도록 설계했다. ## 코드를 새로운 캔버스 기본 요소로 구현 - 코드 레이어는 일반 레이어처럼 다음 작업을 지원한다. - 자유로운 이동과 크기 조절 - 부모 레이어 변경 - 오토 레이아웃 스택에 배치 - 다른 레이어와 동일한 방식의 중첩 - 코드 레이어를 복제하면 별도의 코드 포크가 생성된다. - 따라서 Git 브랜치를 따로 만들지 않고도 `Option` 키를 누른 채 드래그해 여러 코드 버전을 나란히 비교할 수 있다. - 이러한 방식은 디자인에서 흔한 빠른 복제와 실험, 버전 비교를 코드에도 적용한다. ## React와 Figma 컴포넌트의 결합 - Figma는 컴포넌트 모델과 React의 컴포넌트 모델이 유사하다는 점에서 React를 선택했다. - 두 시스템 모두 재사용 가능한 구성 요소를 조합해 화면과 애플리케이션을 만든다. - React의 props는 Figma의 컴포넌트 속성과 연결된다. - 개발자가 코드에서 속성을 정의하면 디자이너는 Figma 화면에서 다음과 같은 컨트롤로 값을 조정할 수 있다. - 토글 - 슬라이더 - 드롭다운 - 결과적으로 코드 컴포넌트도 일반 Figma 컴포넌트처럼 시각적으로 재사용하고 변형할 수 있다. ## AI와 직접 편집을 함께 지원하는 IDE - 코드 레이어는 AI만으로 생성하고 수정할 수 있지만, 사용자가 직접 코드를 편집할 수 있는 환경도 필요했다. - Figma는 웹 기반의 내장 IDE를 만들기 위해 CodeMirror를 핵심 편집 엔진으로 채택했다. - CodeMirror의 확장 구조를 활용해 다음 기능을 제공할 수 있다. - 색상 테마 - 찾기 및 바꾸기 - 줄 번호 - Figma 환경에 맞춘 편집 동작 - 기본 편집기의 실행 취소·다시 실행 동작은 Figma의 자체 멀티플레이어 undo 스택과 통합하기 위해 교체했다. - 이를 통해 코드 편집도 Figma의 다른 작업과 일관된 협업 및 실행 취소 경험을 제공하도록 했다. ## 코드 레이어 설계에서 해결해야 할 세 가지 과제 - Figma는 코드 레이어를 구축하며 다음 문제를 핵심 과제로 삼았다. - 코드 레이어와 컴포넌트를 기존 Figma 생태계에 자연스럽게 통합하기 - 강력하면서도 쉽게 사용할 수 있는 웹 IDE 제공하기 - 디자이너와 개발자가 동시에 작업할 수 있는 멀티플레이어 협업 지원하기 - 전체 방향은 코드의 엄격한 구조를 그대로 가져오는 것이 아니라, Figma의 시각적이고 실험적인 작업 방식을 유지하면서 코드의 표현력을 추가하는 데 있다. 코드 레이어는 디자인 파일 안에 단순히 코드를 삽입한 기능이 아니라, 코드를 Figma의 레이어와 컴포넌트 모델에 맞춰 재구성한 기능이다. 디자인을 한 번의 클릭으로 코드 레이어로 바꾸고, AI나 직접 코딩으로 상호작용을 추가할 수 있으므로 디자이너와 개발자가 같은 캔버스에서 더 빠르게 실험할 수 있다는 점이 핵심이다.

code-editorreactmultiplayer-collaborationcodemirror+2

figma2024년 9월 18일

VS Code 방식: 개발자의 이너 (새 탭에서 열림)

개발자의 생산성을 높이려면 코드 작성 자체보다 코드와 디버깅에 몰입하는 ‘이너 루프(inner loop)’를 최대한 끊기지 않게 해야 한다. VS Code는 외부 도구로 이동하는 횟수를 줄이고, 협업·프로젝트 관리·AI 지원 기능을 편집기 안으로 통합해 몰입과 협업을 함께 달성하려 한다. 궁극적으로 도구를 오가는 마찰을 줄이는 것이 코드 품질뿐 아니라 개발자의 만족도와 에너지에도 영향을 준다는 주장이다. ## 이너 루프와 아우터 루프의 구분 - **이너 루프**는 코드 작성, 컴파일, 디버깅을 코드 에디터 안에서 반복하는 집중 작업 과정이다. - **아우터 루프**는 버그 트래커 확인, 티켓 업데이트, 동료와의 Slack·Teams 대화, 문서 검색, 프로젝트 관리 등 에디터 밖의 활동을 의미한다. - 여러 프로젝트를 동시에 진행하면 브라우저, API 문서, 터미널, 데스크톱을 계속 오가게 되며 집중력이 분산된다. - 몰입 상태가 유지되면 코드의 엣지 케이스와 향후 확장 계획 같은 맥락을 머릿속에 유지할 수 있다. - 반대로 컨텍스트 스위칭이 발생하면 이러한 맥락이 사라져 생산성과 코드 품질이 떨어진다. ## 편집기 안에서 집중력 유지하기 - VS Code의 **Zen Mode**는 사이드바 등 불필요한 UI를 숨겨 방해 요소를 줄인다. - 화면 구성이 바뀔 때마다 뇌가 새로운 UI에 적응해야 하므로, 작은 UI 변화도 누적되면 집중을 방해할 수 있다. - 개발자는 필요한 확장 기능을 선택해 자신의 작업 방식에 맞게 편집기를 구성할 수 있다. - 단일 도구의 사용성을 개선하는 것만으로는 충분하지 않으며, 도구 사이를 오가는 행위 자체를 줄여야 한다. ## 아우터 루프를 이너 루프로 가져오기 - GitHub에서 풀 리퀘스트를 확인한 뒤 다시 에디터로 돌아오는 과정처럼, 작업 중 도구를 전환하면 흐름이 끊긴다. - 가능한 경우 다음 기능을 코드 에디터에 직접 통합해야 한다. - 협업자와의 커뮤니케이션 - 코드 리뷰와 풀 리퀘스트 처리 - 프로젝트 관리와 티켓 확인 - 디자인 및 API 문서 참조 - Figma for VS Code 확장 기능을 사용하면 VS Code에서 디자인을 직접 확인하고 검사할 수 있다. - 필요한 협업이나 프로젝트 관리 작업을 현재 작업 공간에서 처리하면 불필요한 브라우저 전환을 줄일 수 있다. ## AI를 활용한 작업 흐름 보완 - 생성형 AI는 개발자가 작성 중인 코드를 분석해 다음에 필요할 가능성이 높은 코드를 미리 제안할 수 있다. - 제안이 작업 흐름을 방해하지 않는 방식으로 제공되면 코드 작성 속도와 집중력을 동시에 높일 수 있다. - 글에서는 GitHub Copilot 사용 시 코딩 속도가 55% 향상되었다는 GitHub의 보고와, AI 사용 개발자의 75%가 더 큰 성취감을 느꼈다는 조사 결과를 소개한다. - AI의 가치는 단순한 속도 향상뿐 아니라 개발자가 반복 작업에서 벗어나 더 만족스럽게 일하도록 돕는 데 있다. ## 협업도 몰입을 깨지 않는 방식으로 - 협업은 필수지만 회의와 실시간 채팅, 메시지 왕복은 개발자의 집중을 끊을 수 있다. - 이상적인 협업은 한 사람이 다른 사람의 작업을 중단시키는 방식이 아니라, 서로 각자의 이너 루프를 유지하며 진행하는 것이다. - VS Code는 GitHub 기능을 편집기에 통합해 다음 작업을 에디터를 떠나지 않고 수행하도록 지원한다. - 이슈 작업 - 코드 리뷰 - 풀 리퀘스트 작성 및 제출 - 모든 협업이 실시간이어야 하는 것은 아니며, 비동기 댓글과 리뷰를 활용하면 집중과 협업을 함께 유지할 수 있다. ## 개발자 행복으로 이어지는 선순환 - 도구 간 전환이 줄어들면 작업의 마찰과 반복적인 불편이 감소한다. - 몰입 상태가 길어질수록 생산성뿐 아니라 개발자의 에너지와 만족도도 높아진다. - 개발자 도구를 만드는 팀은 기능을 추가하는 것뿐 아니라, 개발자의 흐름을 방해하는 요소를 지속적으로 제거해야 한다. - 장기적으로는 코드 에디터가 개발에 필요한 모든 도구를 연결하는 통합 작업 공간이 되는 것이 이상적인 방향이다. 개발팀은 자주 발생하는 도구 전환 지점을 먼저 파악하고, GitHub·디자인 도구·문서·프로젝트 관리 기능을 에디터와 연동하는 것부터 시작하는 것이 좋다. 또한 알림을 줄이고 비동기 협업을 기본값으로 삼으면 집중력을 보존하면서도 협업 품질을 유지할 수 있다.

code-editorfigmagen-aigithub+3