figma2024년 2월 13일

원활한 핸드오프를 (새 탭에서 열림)

핸드오프는 디자인이 끝나는 한순간의 전달이 아니라, 작업 중인 디자인과 맥락·커뮤니케이션이 지속적으로 오가는 과정이다. 원활한 협업을 위해서는 개발자가 필요한 정보를 명확히 확인할 수 있도록 주석을 정리하고, 디자인·개발 간 공통 언어를 만들며, 파일 구조를 체계적으로 정리해야 한다. 특히 “Ready for dev”가 실제 구현 가능한 상태를 의미하도록 팀의 기준과 작업 방식을 맞추는 것이 중요하다. ## 주석과 콜아웃을 간결하고 명확하게 정리하기 - 주석은 디자인 결정의 의도와 개발자가 놓치기 쉬운 세부 사항을 전달하는 수단이다. - 모든 간격이나 색상을 반복해서 설명하기보다, 이미 변수나 스타일로 정의된 정보는 생략하고 다음과 같은 내용을 우선적으로 표시한다. - 새로 사용하는 컴포넌트 - 프로토타입만으로는 명확하지 않은 인터랙션 - 플랫폼별로 다르게 보여야 하는 요소 - 특정 레이어의 속성, 크기, 동작 방식 - 개발자와 먼저 어떤 정보가 유용한지 합의하면 불필요한 주석을 줄일 수 있다. - Figma의 annotations와 Dev Mode를 활용하면 스펙, 측정값, 설명을 최종 디자인에 직접 고정할 수 있다. - 주석은 디자이너와 개발자 간 대화를 대체하는 것이 아니라, 대화가 필요한 지점을 명확하게 해 커뮤니케이션을 개선한다. ## 디자인과 개발의 공통 언어 만들기 - 디자인과 개발은 서로 다른 분야이므로 같은 용어가 다른 의미로 해석될 수 있다. - 예를 들어 디자이너가 “toggle”이라고 했을 때 개발자가 “switch”를 떠올릴 수 있다. - 프로젝트 초기에 컴포넌트와 속성의 명칭을 합의하면 이후 구현 논의에서 불필요한 혼선을 줄일 수 있다. - 색상, 폰트, 간격처럼 기초적인 디자인 요소는 변수와 스타일로 관리해 디자인과 코드가 동일한 기준을 사용하도록 한다. - 개발팀에 이미 네이밍 규칙이 있다면 디자인 시스템에도 이를 반영하는 것이 좋다. - 예를 들어 `bg-primary-active`, `body text`처럼 공유된 명칭을 사용하면 특정 색상의 헥스 코드나 폰트 세부 정보를 매번 설명하지 않아도 된다. - 디자인 시스템의 색상 휠과 같은 도구를 활용하면 색조와 명도를 일관되게 선택하고 적용할 수 있다. ## 파일과 캔버스를 라벨로 정리하기 - Figma의 무한 캔버스는 아이디어를 자유롭게 펼치기 좋지만, 개발자가 처음 파일을 열었을 때 필요한 화면을 찾기 어렵게 만들 수 있다. - 브레인스토밍과 반복 작업 단계에서는 파일이 다소 복잡해도 괜찮지만, 개발에 넘길 시점에는 구조를 정리해야 한다. - 관련 디자인을 섹션으로 묶어 캔버스 내 탐색 범위를 좁힌다. - 구현이 준비된 섹션이나 프레임에는 “Ready for dev” 상태를 표시해 개발자가 우선 확인할 대상을 알 수 있게 한다. - 팀 차원에서 동일한 파일 템플릿을 사용하면 매번 구조를 새로 파악해야 하는 부담과 컨텍스트 전환을 줄일 수 있다. 실무에서는 주석을 많이 다는 것보다 필요한 정보만 남기고, 변수·스타일·공통 명칭을 디자인 시스템에 정착시키는 것이 효과적이다. 또한 개발 전달 전에는 파일을 정리하고 구현 범위를 명확히 표시해 “Ready for dev”가 팀 내에서 실제로 신뢰할 수 있는 상태가 되도록 관리하는 것이 좋다.

design-development-handofffigmadesign-systemsdesign-tokens+3

figma2023년 12월 6일

피그마의 20 (새 탭에서 열림)

2023년을 돌아보며 Figma가 출시한 제품과 조직·업무에 관한 생각을 정리한 연말 회고 글이다. 글의 중심 주장은 협업을 단순한 업무 전달이나 최적화된 절차가 아니라, 서로 다른 역할이 지속적으로 대화하고 함께 문제를 해결하는 과정으로 봐야 한다는 것이다. Dev Mode와 FigJam AI는 이러한 협업을 강화하기 위한 도구로 소개되며, 인간 간 연결과 기술의 발전을 함께 추구해야 한다는 결론으로 이어진다. ## 2023년을 관통한 두 가지 흐름 - 2023년은 한편으로는 AI가 세상을 바꾼 해였고, 다른 한편으로는 팬데믹 이후 사람들이 다시 직접 연결되기 시작한 해로 묘사된다. - 이 두 흐름은 모순처럼 보이지만, Figma는 오히려 기술이 인간 간의 관계와 협업을 더 의미 있게 만들어야 한다고 본다. - 복잡한 세계와 자신의 생각을 이해하기 위해서는 다른 사람과의 상호작용이 필수적이라는 관점이 글 전체를 관통한다. ## ‘핸드오프’에서 지속적인 협업으로 - 제품 개발에서 핸드오프는 디자이너가 개발자에게 결과물을 넘기는 일회성 전달을 뜻하는 경우가 많았다. - 이 과정은 때때로 “벽 너머로 작업물을 던지는 것”처럼 변질되어, 디자이너와 개발자가 서로 다른 공간에서 일하는 문제를 만들었다. - Figma는 미식축구의 핸드오프처럼, 다음 담당자에게 공을 넘긴 뒤에도 플레이가 이어지는 협력적 과정으로 재해석한다. - 디자이너와 개발자는 서로 다른 관점을 갖지만 강하게 의존하는 관계이므로, 같은 작업 공간에서 지속적으로 의견을 주고받아야 한다. - 이러한 방식은 반복 작업과 피드백을 빠르게 하고, 각자의 강점을 살리며, 제품의 목표를 더 명확하게 만든다. ## Dev Mode와 개발자 관점의 디자인 도구 - Figma는 개발자가 필요한 정보를 필요한 시점에 얻을 수 있도록 Dev Mode를 새로운 작업 공간으로 도입했다. - Dev Mode는 디자인 도구 안에 개발자의 관점을 추가해, 기존의 일방적인 디자인 전달 방식을 개선하려는 기능이다. - 글에서는 핸드오프를 일회성 “배턴 패스”가 아니라 지속적인 대화로 다루면 반복 속도가 빨라지고 결과물의 품질도 향상된다고 설명한다. - 목표는 디자이너와 개발자 사이의 ‘핸드오프 장벽’을 없애고, 두 역할이 같은 경기장에서 협업하도록 만드는 것이다. ## FigJam AI와 인간 중심의 협업 - Figma는 FigJam에 AI 기능을 추가해 아이디어 발상과 시각적 협업을 지원한다. - AI는 회의와 브레인스토밍의 준비 및 정리 같은 작업을 보조해, 사람들이 더 중요한 논의와 관계 형성에 집중하도록 돕는 역할을 한다. - Figma가 말하는 “진입 장벽을 낮추고 가능성의 상한을 높인다”는 방향은 초보자도 쉽게 사용하면서 숙련자는 더 많은 일을 할 수 있게 하는 것을 의미한다. - AI가 협업자를 대체한다기보다, 인간 사이의 연결과 의사결정을 강화하는 도구로 활용되어야 한다는 시각이 드러난다. ## 협업에는 도구뿐 아니라 조직적 연습이 필요하다 - 모든 사람이 같은 역할을 하거나 같은 방식으로 일하면 협업이 오히려 경직될 수 있다. - 반복되는 아이디어와 역할 집중은 팀의 창의성과 발전을 제한할 수 있으므로, 새로운 인재와 다양한 관점이 필요하다. - 좋은 협업은 도구 하나로 완성되지 않으며, 서로의 요구를 이해하고 함께 일하는 연습과 충분한 역량의 “깊은 벤치”가 필요하다. - 글의 후반부는 이러한 관점에서 제품 출시, AI 기능, 회의, 업무 언어, 커리어 전환, 기계식 키보드 등 2023년의 주요 주제를 회고한다. ## 글에서 다루는 회고 주제 - 2023년에 출시한 주요 기능과 제품 10가지 - AI 기능을 시장에 출시하기 위해 제품 관리자가 고려한 과정 - 기술에 대한 관심과 애정을 되찾기 위한 질문들 - 더 나은 회의를 만들기 위한 멀티플레이어 협업 방식 - Slack-lash, Toggle Tax 등 변화하는 업무 용어 - 커리어에서 전문적으로 방향을 전환하는 방법 - 기계식 키보드를 통한 업무의 즐거움 실무적으로는 디자인과 개발을 분리된 단계로 운영하기보다, Dev Mode 같은 공유 환경에서 초기부터 함께 검토하는 방식이 효과적이다. AI 역시 아이디어 정리와 반복 작업에 활용하되, 최종적인 판단과 의미 있는 대화는 사람이 담당하도록 설계하는 것이 글의 방향과 맞는다.

design-development-handofffigmaaifigjam+2