Figma/accessibility

41 개의 포스트

figma

워크플로우 랩: Figma Make로 디자인을 직접 배포하기 | Figma 블로그 (새 탭에서 열림)

디자인과 개발의 핸드오프는 일방향일 필요가 없으며, 디자이너가 Figma Make에서 실제 코드베이스를 직접 수정하고 PR까지 이어지는 작업 흐름을 제안한다. 작은 접근성·사용성 개선을 티켓과 백로그에 맡기지 않고 디자이너가 직접 처리하면, 엔지니어는 대규모 아키텍처 작업에 집중하면서도 제품의 완성도를 높일 수 있다. Figma Design, Figma Make, Figma agent, GitHub 연동을 활용해 캔버스에서 검토하고 코드로 반영하는 것이 핵심이다. ## 작은 개선이 백로그에 묻히는 문제 - “간격을 조금 줄여 달라”거나 “스크린 리더가 잘못 읽는다”와 같은 수정은 중요하지만 규모가 작아 우선순위 경쟁에서 밀리기 쉽다. - 디자이너가 요구사항을 티켓으로 작성하면 엔지니어가 의도를 해석해야 하므로, 스크린샷과 설명을 주고받는 과정에서 디자인의 뉘앙스가 손실된다. - 그 결과 엔지니어는 실제 구현보다 디자이너의 결정을 번역하는 데 시간을 쓰게 된다. - 글에서는 이러한 문제를 해결하기 위해 디자이너가 저위험·고완성도 작업을 처음부터 끝까지 맡는 방식을 제안한다. ## MOSF 웹사이트의 접근성 개선 사례 - 가상의 박물관인 ‘Museum of Speculative Futures(MOSF)’가 사례로 등장한다. - 엔지니어는 대규모 정보 구조 재작성에 집중해야 하고, 디자이너는 웹사이트의 접근성 문제를 해결하려 한다. - PM은 엔지니어가 구조 개편 같은 고난도 작업을 계속 담당하고, 디자이너가 세부적인 접근성·사용성 개선을 직접 처리하도록 역할을 나눈다. - 목표는 기술적으로 동작하는 수준을 넘어, 다양한 사용자가 실제로 편리하게 사용할 수 있는 웹사이트를 만드는 것이다. ## 캔버스에서 사용자 피드백 수집 - 디자이너는 수정 전에 현재 경험을 점검하기 위해 Figma Design의 Figma agent를 사용한다. - 첫 방문자, 재방문 회원, 스크린 리더 사용자 등 여러 합성 페르소나를 생성하고 사이트를 탐색하게 한다. - 합성 페르소나는 실제 사용자 조사나 대면 테스트를 대체하지 않지만, 초기에 명백한 마찰을 발견해 후속 사용자 조사에 집중할 여지를 만든다. - 탐색 결과 다음과 같은 문제가 확인된다. - 전시 페이지의 내비게이션 라벨이 모호함 - 주요 행동 유도 버튼(CTA)이 눈에 잘 띄지 않음 - 날짜 선택기가 한눈에 이해하기 어려움 - 검색 결과가 없을 때 빈 화면만 표시됨 - 각각은 대규모 기능 변경은 아니지만, 여러 문제가 누적되면 사이트의 접근성과 사용성이 크게 떨어질 수 있다. ## 팀 검토를 거친 디자인 수정 - 디자이너는 에이전트가 발견한 문제를 바탕으로 디자인을 수정한다. - 이후 디자이너, 엔지니어, PM이 캔버스에서 변경 사항을 함께 검토한다. - 검토 대상에는 방문 페이지의 더 명확한 라벨, 눈에 잘 띄는 CTA, 사용하기 쉬운 날짜 선택기 등이 포함된다. - 디자인 단계에서 팀의 합의를 먼저 확보하므로, 코드 수정 이후에 요구사항을 다시 해석하거나 되돌리는 일을 줄일 수 있다. ## Figma Make로 실제 코드에서 작업 - 디자이너는 프로덕션 코드와 연결된 Figma Make를 사용해 캔버스의 수정 사항을 실제 코드에 반영한다. - 기존처럼 티켓을 생성해 백로그에 넣고 엔지니어가 나중에 구현하기를 기다리지 않는 것이 핵심이다. - Figma Make, GitHub 연동, 주석과 리뷰 기능을 통해 디자인 변경을 코드 변경으로 연결하고 팀 검토를 이어간다. - 최종적으로 작업은 풀 리퀘스트(PR) 단계까지 진행되며, 디자이너가 캔버스에서 시작한 개선을 병합 가능한 코드 변경으로 전달한다. - 이 방식은 엔지니어의 책임을 없애는 것이 아니라, 엔지니어가 코드 품질과 구조를 검토하는 동안 디자이너가 세부적인 사용자 경험 개선을 주도하도록 역할을 재배치한다. 작은 접근성·사용성 개선은 별도 티켓으로 쌓아두기보다, 디자이너가 실제 코드에서 직접 수정하고 엔지니어와 PR 리뷰를 진행하는 편이 효율적이다. 다만 합성 페르소나의 결과는 초기 탐색용으로 활용하고, 중요한 접근성 판단은 실제 사용자 조사와 기술 검증으로 보완하는 것이 바람직하다.

figma

Canvas 기반 제품에 접근성 구축하기 | Figma 블로그 (새 탭에서 열림)

Figma는 캔버스 렌더링으로 무한 줌과 실시간 협업 같은 성능을 얻었지만, 브라우저의 기본 접근성 기능을 사용할 수 없게 되었다. 이를 해결하기 위해 디자인의 scenegraph를 기반으로 접근성 정보를 담은 내부 트리와 이를 반영하는 Mirror DOM을 구축했다. 그 결과 스크린 리더 사용자는 Figma 파일을 탐색·편집하고, 캔버스 선택 상태와 키보드 탐색을 연동하며, 비시각적 변경 사항도 안내받을 수 있다. ## 캔버스 기반 제품의 접근성 문제 - Figma 캔버스는 일반 HTML/DOM 대신 자체 렌더링 시스템을 사용한다. - 이 방식은 전통적인 웹 앱보다 높은 성능을 제공한다. - 무한 줌 - 실시간 멀티플레이어 협업 - 게임과 유사한 고성능 그래픽 처리 - 반면 브라우저가 자동으로 생성하는 접근성 트리를 활용할 수 없다. - 실제 캔버스에는 여러 디자인 레이어가 있어도 포커스를 유지하는 `<input>` 요소 하나만 존재하므로, 스크린 리더가 인식할 구조가 거의 없었다. ## 접근성 트리 합성 - 브라우저의 접근성 트리는 DOM, 시맨틱 HTML, ARIA 속성, 계산된 상태를 바탕으로 생성된다. - Figma는 이 기능을 되살리기 위해 실제 캔버스와 별도로 접근성용 DOM 요소를 합성했다. - 이 구조를 통해 스크린 리더가 Figma 파일의 레이어를 탐색하고 편집할 수 있게 했다. - 시각적 렌더링과 접근성 정보를 분리해, 캔버스의 성능을 유지하면서 브라우저의 보조 기술과 연동한다. ## 네 가지 핵심 시스템 Figma의 접근성 구현은 다음 시스템들이 협력하는 구조다. - **내부 접근성 트리** - 각 디자인 레이어의 접근성 정보를 캐시한다. - 변경이 발생할 때 전체를 다시 만들지 않고 필요한 부분만 갱신한다. - **Mirror DOM React 컴포넌트** - 내부 접근성 트리를 참조해 실제 DOM 요소를 생성한다. - 각 레이어에 대응하는 접근성 요소를 재귀적으로 렌더링한다. - **양방향 선택 동기화** - 캔버스에서 노드를 선택하면 대응하는 DOM 요소에 포커스를 이동한다. - 스크린 리더나 키보드로 DOM 요소를 탐색하면 캔버스 선택 상태도 갱신한다. - **공지 시스템** - 탐색 외의 변경 사항을 사용자에게 알린다. - 예를 들어 객체 이동, 도구 전환 등 시각 사용자에게는 명확하지만 스크린 리더 사용자는 놓칠 수 있는 변화를 안내한다. ## 문맥에 따른 접근성 요약 - 각 디자인 레이어마다 스크린 리더가 읽을 수 있는 **접근성 요약(accessible summary)** 을 생성한다. - 같은 디자인이라도 사용 중인 애플리케이션 문맥에 따라 요약 방식이 달라진다. - 프로토타입을 보는 상황에서는: - 편집 관련 기능을 대부분 제외한다. - 텍스트 필드의 내용이나 클릭 동작이 있는 요소의 버튼 역할처럼 최종 사용자에게 필요한 정보만 제공한다. - 문서를 편집하는 상황에서는: - 오토레이아웃 프레임처럼 편집에 필요한 구조도 접근성 트리에 포함한다. - 레이어별 요약을 만든 뒤 트리를 위에서 아래로 순회하며, 접근성에서 제외된 노드는 제거하고 하위 노드를 상위 구조에 병합한다. - 문서 최초 로딩 시에는 전체 접근성 트리를 구성하지만, 이후에는 편집된 부분만 수술적으로 갱신해 비용을 줄인다. ## Mirror DOM의 재귀적 렌더링 - React 기반 `Mirror DOM` 컴포넌트가 접근성 트리의 각 레이어를 DOM으로 변환한다. - 각 컴포넌트는 특정 레이어의 접근성 요약을 구독한다. - 요약에서 다음 정보를 가져와 DOM 요소를 생성한다. - `label`: 스크린 리더가 읽을 이름 - `role`: 버튼, 입력 필드 등 요소의 의미 - `children`: 하위 레이어 - 하위 레이어는 같은 컴포넌트를 재귀적으로 호출해 DOM 트리를 구성한다. - 내부 접근성 트리를 최소 단위로 갱신하면 React가 실제 DOM 변경도 최소화할 수 있다. ## 시각적 콘텐츠와 접근성 콘텐츠의 분리 - Mirror DOM은 화면에 보이지 않지만 보조 기술이 해석할 수 있는 구조를 제공한다. - 일반적인 visually hidden 스타일을 사용하지 않는 점이 특징이다. - 캔버스 기반 제품에서는 접근성용 DOM이 페이지 레이아웃이나 캔버스 렌더링에 영향을 주지 않도록 별도의 방식으로 관리해야 한다. - 핵심은 시각적 UI를 억지로 HTML로 대체하는 것이 아니라, 보조 기술이 필요로 하는 의미 구조를 별도로 합성하는 것이다. 캔버스 기반 제품에 접근성을 추가할 때는 브라우저가 자동으로 제공하던 기능을 직접 재구축해야 한다. 특히 내부 접근성 트리, 점진적 갱신, 시각 UI와 DOM의 양방향 상태 동기화를 함께 설계하는 것이 중요하다.

figma

스킬이 있으신가요? Figma Agent를 더 나은 협업자로 만들기 | Figma 블로그 (새 탭에서 열림)

Figma의 “스킬”은 팀의 업무 방식과 전문 지식을 자연어 지침으로 저장해 두고, `/` 명령으로 Figma 에이전트에서 반복 사용할 수 있게 하는 기능이다. 디자인 시스템이 컴포넌트와 UI 패턴을 제공한다면, 스킬은 브랜드 문체·접근성·리뷰 절차·개인별 피드백 방식 같은 조직의 맥락을 더한다. Figma는 이를 통해 에이전트를 단순한 생성 도구가 아니라 팀의 작업 방식을 이해하고 협업하는 파트너로 활용할 수 있다고 설명한다. ## 스킬과 디자인 시스템의 역할 구분 - 디자인 시스템은 에이전트가 사용할 컴포넌트, 패턴, UI 요소를 제공한다. - 스킬은 그 위에 팀의 전문 지식과 업무 규칙을 적용한다. - 적용할 수 있는 예시는 다음과 같다. - 브랜드 보이스와 UX 라이팅 규칙 - 컴플라이언스 및 접근성 기준 - 디자인 리뷰 절차 - 제품 원칙과 의사결정 기준 - 디자인 시스템을 특정 업무 흐름 안에서 호출하는 방법 - 한 번 만든 스킬은 팀이나 조직에 게시해 여러 사람이 반복 사용할 수 있다. ## 필요할 때 받는 두 번째 의견 스킬은 특정 관점으로 디자인이나 문구를 검토해 아이디어의 약점을 찾고 더 나은 질문을 하도록 돕는다. - **이해관계자의 피드백 방식 모사** - 공개 코멘트, 과거 크리틱, 파일에 남은 메모 등을 예시로 제공한다. - 에이전트가 특정 인물의 피드백 스타일을 적용하도록 만들 수 있다. - Figma는 CEO Dylan의 코멘트 방식을 반영해, 공식 리뷰 전에 작업을 점검하는 스킬을 만들었다. - **UX 라이팅 기준 적용** - 스타일 가이드에 따라 대문자 사용, 구두점 등 문구의 일관성을 1차 검토한다. - 작성자는 단순한 형식 오류보다 더 중요한 내용과 메시지에 집중할 수 있다. - **처음 사용하는 사람의 관점 제공** - 제품을 잘 아는 디자이너가 놓치기 쉬운 마찰 지점과 부족한 설명을 찾는다. - 신규 사용자가 경험을 이해할 수 있는지 점검하는 데 유용하다. ## 한 번 만들고 반복해서 사용하는 업무 팀이 매번 비슷한 방식으로 수행하는 의식이나 절차는 스킬로 만들 가치가 있다. - **`/catch-me-up`** - 파일이나 프로젝트의 최근 활동을 요약한다. - 한동안 자리를 비운 사람이 댓글과 변경 내역을 직접 추적하지 않고 빠르게 상황을 파악할 수 있다. - **크리틱 준비 체크리스트** - 에이전트가 페르소나, 작업 범위, 크리틱 참석자 등 프로젝트 맥락을 질문한다. - 수집한 정보를 바탕으로 크리틱 페이지와 토론용 질문을 만든다. - Figma의 스킬은 Nielsen Norman Group의 모범 사례를 참고해 더 깊은 논의를 유도하는 질문을 구성한다. - **크리틱 회고** - 회의에서 나온 피드백을 주제별로 정리한다. - 결정 사항, 후속 작업, 보류된 항목을 구분해 실행 계획으로 만든다. - 결과를 캔버스의 recap 카드나 Slack 스레드에 공유할 수 있어 회의 후 정보가 유실되는 것을 줄인다. ## 팀의 암묵지를 재사용 가능한 지침으로 전환 - 팀만 알고 있던 업무 방식이나 반복 프롬프트를 자연어 지침으로 문서화한다. - 매번 같은 설명을 다시 입력하지 않고 `/스킬이름`으로 호출한다. - 개인의 머릿속에 머물던 리뷰 기준과 작업 절차를 조직 전체가 사용할 수 있는 자산으로 바꾼다. - 스킬을 만들 때는 실제 피드백, 스타일 가이드, 기존 산출물처럼 구체적인 사례를 함께 제공할수록 팀의 방식에 가까운 결과를 얻을 수 있다. 팀에서 반복되는 작업이나 동일한 검토 기준이 있다면, 이를 먼저 작은 스킬로 만들어 테스트하는 것이 좋다. 특히 온보딩, 크리틱 준비·회고, 문구 검수처럼 입력과 결과가 비교적 명확한 업무부터 시작하면 효과를 확인하기 쉽다.

figma

이제 정부용 피그마 (새 탭에서 열림)

Figma Make이 Figma for Government에 추가되어 연방 기관이 보안 환경에서 대화형 프로토타입을 더 빠르게 제작할 수 있게 됐다는 내용이다. Figma는 이를 통해 정책 담당자, 디자이너, 개발자, 연구자, IT 담당자가 협업하며 시민 대상 서비스를 더 일찍 검증하고 접근성과 일관성을 높일 수 있다고 설명한다. Figma for Government는 FedRAMP Moderate 인증 환경을 기반으로 하며, 일부 클라우드 인프라의 완전한 규정 준수는 2026년에 완료될 예정이지만 Make은 현재 승인된 환경에서 사용할 수 있다. ## 공공 서비스 디지털화의 복잡성 - 정부 서비스는 시민 생활과 직접 연결되므로 사용성, 접근성, 신뢰도가 중요하다. - 정책 담당자, 기술 담당자, 운영 책임자 등 다양한 이해관계자의 요구를 조율해야 한다. - 요구사항이 계속 변하고 디자인·개발 인력이 제한적이어서 정적인 목업만으로는 빠른 검증이 어렵다. - 2024년 온라인 여권 갱신 시스템 사례에서는 2025년까지 200만 명 이상이 온라인으로 갱신했으며, 이용자의 97%가 긍정적인 경험을 보고했다. - 미국 행정명령도 시민 대상 서비스에서 사용성, 접근성, 디자인 일관성의 중요성을 강조했다. ## Figma Make의 역할 - 텍스트 프롬프트를 활용해 아이디어를 대화형 프로토타입으로 구현한다. - 기존에는 정적 시안을 주고받으며 수주가 걸리던 작업을 수시간 내에 탐색할 수 있다. - 다양한 사용자 흐름과 화면 구성을 빠르게 만들어 초기 단계에서 비교·수정할 수 있다. - 시민과 실제 사용자를 개발 전에 참여시켜 업무 흐름과 가정을 검증할 수 있다. - Figma 내부의 공유 라이브러리, 디자인 패턴, 접근성 기준과 연계해 결과물의 일관성을 유지한다. ## 협업과 서비스 품질 향상 - 디자이너, 정책 담당자, 연구자, 엔지니어, IT 담당자가 하나의 실시간 협업 공간에서 작업할 수 있다. - 아이디어 구상부터 프로토타입, 사용자 테스트, 개발 전달까지의 단절을 줄인다. - 연방 혜택, 금융 커뮤니케이션, 교육 플랫폼, 우주 임무 지원 시스템, 연구 서비스 등 복잡한 공공 업무에 적용할 수 있다. - 공유 디자인 시스템을 활용해 여러 기관과 서비스에서 접근성과 시각적 일관성을 높일 수 있다. - 시민의 피드백을 더 이른 시점에 반영해 개발 후반의 수정 비용과 실패 위험을 줄일 수 있다. ## 보안 및 규정 준수 - Figma Make은 Figma for Government의 승인된 환경에서 제공된다. - Figma for Government는 FedRAMP Moderate 권한을 기반으로 정부 기관의 보안 요구사항을 충족하도록 설계됐다. - 다만 Figma의 일부 클라우드 인프라는 2026년에 완전한 FedRAMP Moderate 규정 준수를 달성할 예정이다. - 글에서는 이러한 진행 상황과 별개로 Make 자체는 현재 승인된 환경에서 사용할 수 있다고 설명한다. ## 향후 방향 - Figma는 Figma Make을 시민 중심의 공공 서비스와 기관 내부 도구를 현대화하는 핵심 기능으로 확대하려 한다. - 정부 기관이 더 많은 아이디어를 빠르게 실험하고, 사용자 검증을 거쳐 실제 서비스로 발전시키는 것이 목표다. - 국립공원관리청의 431개 국립공원 디지털 앱 사례처럼, 작은 팀도 Figma를 활용해 대규모 공공 정보 서비스를 구축할 수 있음을 강조한다. 실무적으로는 Figma Make을 최종 서비스 개발 도구라기보다, 보안 환경에서 정책·업무 흐름을 빠르게 검증하는 프로토타이핑 도구로 활용하는 것이 적절하다. 도입 전에는 조직의 데이터 분류 기준과 FedRAMP 적용 범위, 2026년 예정된 인프라 규정 준수 일정을 별도로 확인해야 한다.

figma

Figma에서 접근성을 개선하는 (새 탭에서 열림)

Figma는 키보드만으로 캔버스와 댓글을 조작하고, 스크린 리더로 파일 내용을 더 정확히 이해할 수 있도록 15가지 이상의 접근성 기능을 출시했다. 제품별 키보드 단축키, 더 논리적인 포커스 이동, 풍부한 객체 설명과 서식 정보, 향상된 색상 대비가 포함된다. 이를 통해 장애가 있는 사용자뿐 아니라 장시간 작업하거나 다양한 환경에서 Figma를 사용하는 모든 사용자의 탐색성과 작업 흐름을 개선하는 것이 목표다. ## 캔버스 조작을 위한 키보드 기능 확대 - 키보드만으로 캔버스 객체를 이동·조정·정렬할 수 있는 기능이 제품 전반으로 확대됐다. - **Figma Slides** - 발표자 노트 크기 조정 - AI를 활용한 글쓰기 톤 변경 - **FigJam** - 표의 행과 열 추가·삭제·순서 변경 - 스탬프, 투표, 와시 테이프 추가 및 조정 - AI 요약, 임베드 링크·동영상 같은 캔버스 객체 탐색 - 마커 선과 형광펜 스트로크 선택 및 조정 - **Figma Design** - 선 추가·선택·조정 - 룰러 가이드 추가·삭제·편집 - 타원에서 호(arc) 생성 및 편집 - **공통 기능** - 편집 모드와 보기 전용 모드에서 링크 열기 - 키보드로 링크 사이를 이동 ## 댓글과 Dev Mode 주석 탐색 - 댓글을 추가하고, 위치를 옮기고, 댓글 간 이동을 키보드 단축키로 처리할 수 있다. - Dev Mode 주석도 키보드로 추가·이동·탐색할 수 있다. - 피드백을 확인하거나 답변할 때 포커스가 흐트러지지 않도록 설계되어 협업과 핸드오프 과정이 개선된다. - 댓글 관련 기능은 베타 제품에서는 제공되지 않을 수 있다. ## 사용자 설정을 통한 조작 방식 개인화 - 입력 중 Figma 전용 단축키가 동작하지 않도록 설정할 수 있다. - 다른 사용자가 스포트라이트를 사용할 때 자동으로 따라가는 기능을 켜거나 끌 수 있다. - 사용자는 작업 방식이나 보조기술 사용 환경에 맞춰 키보드 동작을 조정할 수 있다. ## 스크린 리더 지원 강화 - 버튼, 메뉴, 패널 등 인터랙티브 요소를 Tab 키로 이동할 때 더 논리적인 순서를 따른다. - 메뉴 열기, 버튼 실행, 툴바 옵션 선택 등 특정 동작으로 바로 이동할 수 있다. - 객체를 읽을 때 유형, 이름, 상태 등 더 자세한 정보가 제공된다. - 새 댓글이나 파일 변경 사항 같은 중요한 업데이트가 더 일관되게 안내된다. - 굵게, 기울임, 목록, 링크 등 서식 있는 텍스트 구조를 스크린 리더가 보존해 읽는다. - Buzz와 Slides의 캔버스 객체도 스크린 리더가 인식하고 안내한다. - 이러한 개선은 캔버스의 객체 순서를 파악하고 파일 변경 사항을 놓치지 않도록 돕는다. ## 향상된 색상 대비 - 간단한 토글로 라이트 모드와 다크 모드 모두에서 인터페이스의 색상 대비를 높일 수 있다. - 접근성 설정, Actions 메뉴, General 설정에서 기능을 활성화할 수 있다. - 텍스트와 아이콘의 가독성이 높아지고, 버튼과 외곽선이 더 뚜렷하게 표시된다. - 인터페이스 구조를 파악하고 필요한 요소를 빠르게 찾기 쉬워진다. - 햇빛이나 강한 조명 아래에서도 화면을 보기 쉬우며, 장시간 화면을 사용하는 경우 눈의 부담을 줄일 수 있다. ## 실용적인 활용 키보드 중심으로 작업하는 사용자는 Figma의 전체 키보드 컨트롤 목록을 확인해 자주 쓰는 캔버스·댓글 단축키를 익히는 것이 좋다. 스크린 리더 사용자는 객체 설명과 서식 있는 텍스트 지원을 활용하고, 일반 사용자도 색상 대비 설정을 활성화하면 장시간 작업이나 밝은 환경에서 더 편하게 Figma를 사용할 수 있다.

figma

디자인이 모두를 위한 이유 | (새 탭에서 열림)

디자인은 디자이너만의 전문 영역이 아니라 문제를 해결하고 아이디어를 전달하는 보편적인 사고방식이자 업무 방식이라는 글이다. 기술과 제품이 발전할수록 디자인은 하드웨어에서 인터페이스와 소프트웨어 경험으로 확장되었으며, 성공적인 제품은 엔지니어링뿐 아니라 사용자 조사와 접근성, 직관성이 함께 만들어낸다. 따라서 조직 전체가 디자인 지식을 공유하고 모든 구성원이 디자인 과정에 참여할 때 더 나은 제품과 시스템을 규모 있게 만들 수 있다. ## 디자인은 특정 직군의 소유물이 아니다 - 디자인은 단순한 시각적 결과물이나 전문 기술이 아니라 다음과 같은 역할을 한다. - 세상을 바라보는 관점 - 아이디어를 소통하는 언어 - 문제와 도전을 해결하는 프레임워크 - 제품과 프로세스를 개선하는 업무 방식 - 디자인은 누구의 소유도 아니며, 직함과 관계없이 누구나 활용할 수 있어야 한다. - 개인 디자이너의 역량에는 한계가 있으므로, 팀 전체가 디자인 지식을 갖추면 다음을 달성할 수 있다. - 더 뛰어난 사용자 경험 제공 - 더 효율적인 업무 프로세스 설계 - 조직 차원의 시스템 개선 - 디자인의 미래는 개별 디자이너나 디자인 부서에만 머무르지 않고, 조직 전체의 공동 실천으로 확장되는 데 있다. ## 기술 발전과 함께 진화한 디자인 - 디자인의 본질은 문제 해결이다. - 기술이 새로운 가능성을 열 때마다 디자인은 그 기술을 사람들이 이해하고 사용할 수 있는 제품과 경험으로 변환한다. - 디자인은 기술 프로토타입을 실제 시장에서 사용할 수 있는 제품으로 발전시키는 핵심 요소다. - 하드웨어 성능만으로는 제품의 성공을 보장할 수 없으며, 사용자가 제품을 어떻게 이해하고 사용하는지까지 고려해야 한다. ## 워크맨이 보여준 사용자 중심 디자인 - 1979년 소니는 기존 Pressman 테이프 레코더 기술을 바탕으로 휴대용 스테레오를 개발했다. - 엔지니어링 측면에서는 다음과 같은 개선이 이루어졌다. - 부품 소형화 - 녹음 기능 제거 - 음질 향상 - 가볍고 휴대하기 쉬운 형태 구현 - 그러나 워크맨의 대중적 성공에는 직관적인 인터페이스와 사용자 조사가 결정적인 역할을 했다. - 소니의 코조 오손은 초기 프로토타입을 출장 중 직접 테스트하며 다음과 같은 사용자 요구를 확인했다. - 더 작고 휴대하기 쉬운 기기 - 더 넓은 사용자층이 쉽게 사용할 수 있는 조작 방식 - 함께 음악을 듣는 사회적 경험 - 이러한 조사 결과로 다음 기능이 도입되었다. - 두 사람이 동시에 들을 수 있는 듀얼 헤드폰 잭 - 함께 듣는 중 대화할 수 있는 ‘핫라인’ 버튼 - 파란색과 은색 본체, 주황색 버튼의 독특한 색상 조합도 검정·회색 중심의 당시 전자제품과 차별화되어 제품의 상징성을 높였다. - 워크맨은 기술, 사용자 테스트, 접근성, 인터페이스 설계, 시각적 차별화가 결합해 문화적 아이콘이 된 사례다. ## 하드웨어에서 인터페이스 디자인으로 - 2000년대 중반부터 산업의 관심은 하드웨어 자체에서 이를 작동시키는 소프트웨어로 이동했다. - 맥북, 아이팟, 아이폰의 성공은 하드웨어 엔지니어링뿐 아니라 다음 요소에 크게 의존했다. - 사용하기 쉬운 소프트웨어 인터페이스 - 햅틱 피드백 - 터치스크린 상호작용 - 일관되고 이해하기 쉬운 조작 경험 - 앱스토어의 등장으로 모바일 소프트웨어 시장이 성장했고, 기업들은 더 혁신적이고 잘 설계된 디지털 경험을 만들기 위해 경쟁했다. - Web 2.0과 모바일 앱의 확산은 소프트웨어 중심 기업의 성장을 이끌었다. - 소프트웨어는 물리적 장치의 제약을 넘어 복잡한 디지털 기능을 사용자가 이해할 수 있도록 만드는 인터페이스 디자인을 크게 발전시켰다. ## 물리적 제품을 모방한 초기 디지털 인터페이스 - 초기 디지털 인터페이스는 스큐어모피즘을 활용해 기존의 물리적 사물을 모방했다. - 버튼, 슬라이더, 스크롤 휠처럼 사용자에게 익숙한 물리적 요소를 디지털 화면에 재현해 학습 부담을 줄였다. - 이는 새로운 디지털 환경을 낯설어하는 사용자에게 기존 경험을 연결해 주는 방식이었다. - 이후 디지털 기술이 발전하면서 인터페이스는 물리적 사물의 모방을 넘어 디지털 환경에 특화된 새로운 상호작용 방식으로 확장되기 시작했다. 조직에서는 디자인을 결과물을 만드는 마지막 단계로 한정하기보다, 문제 정의부터 사용자 조사와 의사결정까지 모든 구성원이 참여하는 공통 방식으로 다루는 것이 좋다. 디자이너뿐 아니라 엔지니어, 기획자, 마케터도 사용자 관점과 실험적 사고를 공유할 때 제품의 완성도와 조직의 실행력이 함께 높아진다.

figma

eBay가 Figma로 브랜드 (새 탭에서 열림)

eBay는 브랜드와 제품 팀이 따로 관리하던 디자인 시스템을 Figma 중심의 통합 문서 플랫폼인 ‘Evo Playbook’으로 재구축했다. 300쪽이 넘는 Playbook은 접근성, 디자인, 코드 정보를 한곳에 모으고, Figma 변경 사항을 자동 검증·게시해 문서를 살아 있는 업무 흐름으로 만들었다. 핵심은 중앙화된 문서, 라이브러리 메타데이터, Component Status API, Figma 플러그인 자동화다. ## 기존 문서화 방식의 한계 - 디자인 시스템 정보가 여러 Figma 파일에 흩어져 있었다. - 디자이너, 개발자, 접근성 담당자가 각각 별도의 문서를 관리했다. - 디자이너가 Figma의 정적 파일을 수정한 뒤, 별도 티켓을 통해 문서 사이트에 반영해야 했다. - 컴포넌트 상태를 수동 테이블로 관리해 정보가 빠르게 오래되었다. - 외부 에이전시가 만든 기존 Playbook은 실제 eBay의 디자인·개발 업무와 분리되어 유지보수가 어려웠다. ## Evo와 eBay Playbook의 통합 방향 - eBay는 기존 시스템을 부분 수정하지 않고 문서화 파이프라인을 처음부터 다시 설계했다. - 브랜드 가이드, 제품 디자인 시스템, 기술 문서를 별도 사이트가 아닌 하나의 공간에 통합했다. - 2024년 11월 공개된 Evo는 약 30년 된 eBay의 시각 언어를 현대화한 디자인 시스템이다. - 300쪽 이상의 Playbook을 통해 내부 팀과 외부 에이전시가 동일한 기준을 참고할 수 있도록 했다. - 문서를 단순한 참고 자료가 아니라 영감과 사용 경험을 제공하는 제품처럼 설계했다. ## Component Status API로 구현 상태 통합 - eBay는 모든 디자인 시스템 라이브러리의 컴포넌트 상태를 추적하는 내부 API를 만들었다. - Figma 컴포넌트 설명에 컴포넌트 이름과 버전 메타데이터를 기록한다. - API는 다음 라이브러리의 구현 여부와 버전을 통합적으로 확인한다. - Figma 컴포넌트 라이브러리 - 네이티브 라이브러리 - Skin, Marko, React 등 웹 컴포넌트 라이브러리 - Playbook의 컴포넌트 페이지에는 플랫폼별 리소스 링크, 최신 버전, 상태가 표시된다. - 개발자는 자신이 사용하는 프레임워크에 컴포넌트가 존재하는지, Figma 버전 및 문서와 일치하는지 바로 확인할 수 있다. ## Figma 기반 자동화와 게시 - 모든 컴포넌트, 가이드라인, 접근성 안내는 Figma에서 작성하고 수정한다. - eBay는 문서 내보내기 기능을 수행하는 자체 Figma 플러그인을 개발했다. - 플러그인은 변경 내용을 다음과 같이 처리한다. - 문서 구조와 콘텐츠를 추출 - 린팅을 통해 형식과 규칙을 검사 - 유효성을 검증 - CMS에 자동 게시 - 과거에는 문서 업데이트에 며칠이 걸렸지만, 자동화 이후 Figma 수정 사항이 2분 이내에 Playbook에 반영된다. - 개발자가 CMS를 직접 수정할 필요가 없어 문서 업데이트의 진입 장벽이 낮아졌다. ## 브랜드와 제품 조직 사이의 사일로 해소 - OneExperience 팀은 브랜드, 디자인 시스템, 디자인 기술, 콘텐츠를 아우르는 교차 기능 조직으로 구성됐다. - 디자인과 개발 문서가 서로 다른 원천에서 관리되지 않고 동일한 workflow에서 생성된다. - 디자인 시스템 문서가 실제 라이브러리와 자동으로 연결되므로 문서와 구현 사이의 불일치가 줄어든다. - 빠른 업데이트 덕분에 팀들이 문서화를 별도의 행정 업무가 아니라 일상적인 설계 과정의 일부로 받아들이게 되었다. ## 실용적인 적용 시사점 - 디자인 시스템 문서를 정적 웹 페이지로 관리하기보다 실제 설계 도구와 연결된 살아 있는 문서로 운영하는 것이 효과적이다. - 컴포넌트 이름과 버전을 메타데이터로 표준화하면 여러 플랫폼의 구현 상태를 자동으로 추적할 수 있다. - Figma 플러그인, 린터, API를 결합하면 문서 품질 검증과 게시를 자동화할 수 있다. - 브랜드 가이드와 제품 디자인 시스템을 분리하기보다 하나의 소스 오브 트루스로 통합하면 조직 간 협업과 일관성이 향상된다.

figma

피그마 패턴 라이브 (새 탭에서 열림)

UI3 개편은 Figma 내부 디자인 시스템이 오랜 성장 과정에서 파편화되었다는 문제를 드러냈고, 이를 해결하기 위해 Figma Pattern Library(FPL)를 처음부터 다시 구축하게 만들었습니다. 디자이너와 엔지니어가 페어 프로그래밍에 가까운 방식으로 협업해 디자인 의도와 코드 구현을 연결하고, 변수·REST API·테마 모드를 기반으로 일관되고 접근성 높은 제품 개발의 기반을 마련했습니다. FPL은 단순한 컴포넌트 모음이 아니라 조직 전체의 공통 언어이자 UI3를 확장하기 위한 단일 진실 공급원으로 설계되었습니다. ## UI3가 드러낸 내부 디자인 시스템의 문제 - Figma는 다른 팀의 디자인 시스템 구축을 돕는 제품을 만들고 있었지만, 내부 시스템은 오랜 기간의 급속한 성장과 제품 확장으로 분리되어 있었습니다. - 동일해야 할 컴포넌트가 서로 조금씩 달랐고, 연결이 끊긴 컴포넌트 인스턴스가 누적되었습니다. - UI3를 모든 Figma 제품에 적용하려면 새로운 화면 디자인만으로는 부족했습니다. - 여러 팀이 일관되고 효율적으로 작업할 수 있는 견고한 기반 시스템이 필요했습니다. ## 디자이너와 엔지니어의 페어 협업 - Wayne Sun과 Tom Williams는 디자이너와 엔지니어로 구성된 5명의 소규모 팀을 만들었습니다. - 개발에서 한 사람이 코드를 작성하고 다른 사람이 실시간 검토하는 페어 프로그래밍처럼, 디자이너와 엔지니어가 긴밀하게 짝을 이루어 작업했습니다. - 디자이너는 시각적·사용자 경험 의도를 전달하고, 엔지니어는 이를 실제 컴포넌트와 토큰 시스템으로 구현했습니다. - 이 방식은 디자인 파일과 제품 코드 사이의 간극을 줄이고, 양쪽이 공유할 수 있는 시스템 언어를 만드는 데 목적이 있었습니다. - 그 결과 새로운 내부 디자인 시스템인 Figma Pattern Library(FPL)가 탄생했습니다. ## 스타일과 스프레드시트에서 변수 중심 구조로 전환 - 기존 시스템은 Figma의 변수 기능이 등장하기 전에 만들어졌습니다. - 디자이너는 Figma 스타일을 사용했지만, 엔지니어는 별도의 Google Sheets에서 색상 토큰을 관리했습니다. - 스프레드시트가 제품 변경 사항을 즉시 반영하지 못하면서 디자인 파일과 실제 코드의 색상이 달라지는 문제가 발생했습니다. - 팀은 Figma 변수와 REST API를 활용해 디자인과 코드가 자동으로 동기화될 수 있는 구조를 만들었습니다. - 타이포그래피 변수를 새로 만들고, 기존 타이포그래피 스타일이 이 변수들을 별칭으로 참조하도록 구성했습니다. - 색상 스타일은 중앙 관리가 가능한 색상 변수로 마이그레이션했습니다. - 색상 변수에 CSS 정의도 추가해 Dev Mode의 검사 패널에서 개발자가 올바른 변수명과 코드 표현을 확인할 수 있게 했습니다. ## Primitive와 Semantic 변수로 색상 체계 정리 - 색상은 밝기와 어두움이 체계적으로 이어지는 **color ramp**를 기반으로 구성했습니다. - 기본 색상 단위인 **Primitive 변수**는 색상 계열별로 정리하고, 100부터 1000까지 단계적으로 구분했습니다. - 실제 UI 용도를 나타내는 **Semantic 변수**는 Primitive 변수를 별칭으로 참조합니다. - 예를 들어 특정 색상값을 직접 사용하는 대신 배경, 텍스트, 테두리 같은 의미 기반 변수로 연결할 수 있습니다. - Semantic 변수는 다음과 같은 테마와 제품별 모드를 지원하도록 설계되었습니다. - 라이트 모드와 다크 모드 - Figma Design - FigJam - Slides - Dev Mode - 이 구조 덕분에 하나의 공통 컴포넌트가 제품이나 테마에 따라 색상만 자연스럽게 바꿀 수 있습니다. - Primitive 변수의 값을 수정하면 이를 참조하는 Semantic 변수와 컴포넌트에 변경 사항을 일괄 적용할 수 있습니다. ## FPL의 역할 - FPL은 UI3의 시각적 스타일을 정의하는 동시에, 이를 실제 제품에 일관되게 구현하기 위한 기술적 기반입니다. - 디자인과 엔지니어링을 분리된 단계로 처리하지 않고, 초기 설계부터 함께 검증하는 협업 모델을 채택했습니다. - 변수와 모드 기반의 구조는 여러 제품과 테마를 지원하면서도 공통된 사용자 경험을 유지하도록 돕습니다. - 중앙화된 토큰과 컴포넌트는 중복 구현과 미세한 시각적 차이를 줄이고, 향후 변경 사항을 더 빠르게 확산시킬 수 있습니다. FPL 사례는 디자인 시스템을 단순한 UI 컴포넌트 저장소가 아니라 디자인 토큰, 테마, 코드 연동, 협업 방식까지 포함하는 조직의 공통 인프라로 다뤄야 한다는 점을 보여줍니다. 특히 디자인 파일과 코드가 서로 다른 토큰을 관리하지 않도록 변수와 자동 동기화를 도입하는 것이 규모가 큰 제품 조직에 실용적인 출발점입니다.

figma

Made in Figma: 국립공 (새 탭에서 열림)

미국 국립공원관리청(NPS)은 431개 국립공원과 기념지를 하나의 앱에서 다루기 위해, 과거의 인쇄 브로슈어 디자인 시스템인 매시모 비넬리의 ‘유니그리드(Unigrid)’를 디지털 인터페이스에 적용했다. GuideOne과 Twohy Design Works는 각 공원의 다양한 데이터와 서사를 수용하면서도 일관된 사용자 경험을 제공하는 앱을 만들었다. 이 사례는 오래 지속될 공공 서비스일수록 확장 가능한 디자인 시스템, 접근성, 협업 가능한 제작 환경이 중요하다는 점을 보여준다. ## 431개 공원을 하나의 앱으로 통합하기 - NPS는 요세미티 같은 대형 국립공원부터 펜실베이니아의 한 칸짜리 기념관까지 규모와 성격이 매우 다른 431개 시설을 관리한다. - 과거에는 방문객 안내를 위해 각 공원별 인쇄 브로슈어를 제작했다. - 2016년 GuideOne이 공원별 개별 앱을 개발하기 시작했지만, 이후 하나의 통합 NPS 앱으로 방향을 전환했다. - 통합 과정에서는 다음과 같은 문제가 발생했다. - 각 공원이 자체적으로 데이터를 관리하고 콘텐츠를 작성함 - 공원마다 역사, 시설, 방문 정보, 내러티브가 다름 - 서로 다른 데이터를 하나의 구조와 시스템으로 통합해야 함 - 장기간 유지될 정부 서비스이므로 내구성과 유지보수성이 필요함 - 다양한 장애와 접근성 요구를 가진 사용자를 지원해야 함 ## 인쇄 브로슈어에서 찾은 디자인의 출발점 - NPS 브로슈어는 오랫동안 공원마다 형식과 스타일이 제각각이었다. - 1977년 NPS는 디자이너 매시모 비넬리에게 모든 인쇄물의 그래픽 요소와 제작 방식을 표준화하는 시스템을 의뢰했다. - 이때 만들어진 유니그리드는 다음을 체계화했다. - 페이지 구성과 그리드 - 이미지와 텍스트의 배치 - 타이포그래피와 시각적 위계 - 브로슈어 제작 규격과 일관된 브랜드 표현 - GuideOne과 Twohy Design Works는 이 역사적 시스템을 그대로 복제하지 않고, 디지털 제품에 적합한 원칙으로 재해석했다. ## 유니그리드를 디지털 인터페이스로 확장 - 앱은 공원별 개성을 유지하면서도 전체 서비스가 하나의 제품처럼 보이도록 설계됐다. - 브로슈어에서 사용하던 구조적 일관성을 앱의 화면과 콘텐츠 구성에 적용했다. - 공식 NPS 앱은 다음 기능을 제공한다. - 공원과 시설을 탐색하는 인터랙티브 지도 - 방문객을 위한 핵심 정보 - 셀프 가이드 투어 - 공원별 장소, 활동, 안내 콘텐츠 - 디자인 시스템은 각 공원이 독자적인 콘텐츠를 제공하더라도 공통된 사용자 경험을 유지하도록 돕는다. - 즉, 유니그리드는 특정 화면의 시각적 스타일이 아니라 다양한 콘텐츠를 하나의 체계 안에 담는 운영 방식으로 활용됐다. ## 데이터와 엔지니어링을 함께 고려한 협업 - NPS 앱은 단순한 시각 디자인 프로젝트가 아니라 콘텐츠와 데이터 통합 프로젝트이기도 했다. - NPS, GuideOne의 개발팀, 디자인팀이 Figma를 통해 작업물을 공유하고 피드백을 주고받았다. - 디자인 단계에서 다음 사항을 함께 검토할 수 있었다. - 실제 NPS 데이터로 구현 가능한 화면인지 - 공원별 콘텐츠 차이를 시스템이 수용할 수 있는지 - 개발팀이 재사용 가능한 컴포넌트로 구현할 수 있는지 - 사용자의 탐색 흐름이 복잡한 공원 구조를 잘 반영하는지 - Figma는 디자인 시안을 전달하는 도구를 넘어, 기관 담당자와 디자이너, 개발자가 제약 조건을 조율하는 공동 작업 공간으로 사용됐다. ## 공공 서비스에 필요한 접근성과 지속성 - 정부용 소프트웨어는 일반적인 단기 제품보다 훨씬 긴 수명을 전제로 한다. - 따라서 유행하는 시각 효과보다 안정적인 구조와 유지 가능한 시스템이 중요하다. - 서로 다른 접근성 요구를 가진 많은 사용자가 이용하므로 정보의 명확한 위계와 예측 가능한 인터페이스가 필요하다. - 공원별 콘텐츠가 계속 추가·변경되더라도 전체 앱의 품질이 흔들리지 않도록 공통 디자인 규칙과 컴포넌트 체계가 기반이 됐다. ## 이 사례가 보여주는 디자인 시스템의 역할 - 디자인 시스템은 브랜드를 일관되게 보이게 하는 규칙에 그치지 않고, 대규모 조직의 다양한 콘텐츠를 운영하는 기반이 될 수 있다. - 역사적 디자인 자산을 디지털 환경에 적용할 때는 외형보다 그 안의 원칙을 계승하는 것이 중요하다. - 통합 서비스에서는 모든 콘텐츠를 똑같이 만드는 것보다, 차이를 수용할 수 있는 공통 구조를 만드는 것이 효과적이다. - NPS 앱은 종이 브로슈어의 시각 언어를 지도, 검색, 투어, 방문 정보가 결합된 디지털 경험으로 전환한 사례다. 장기적으로 운영될 공공 앱을 만든다면, 먼저 조직의 기존 콘텐츠와 디자인 자산에서 검증된 원칙을 찾고, 이를 재사용 가능한 컴포넌트와 명확한 데이터 구조로 변환하는 것이 좋다. 여기에 초기 단계부터 접근성과 개발 가능성을 함께 검토해야 일관되면서도 실제 운영에 강한 제품을 만들 수 있다.

figma

Framework by Figma에 여러분을 초대합니다 (새 탭에서 열림)

Figma는 디자인 시스템을 단순한 스타일 가이드가 아니라 제품 설계와 개발을 지탱하는 기반으로 보고, 이를 주제로 한 글로벌 행사 ‘Framework by Figma’를 2024년 4월 16일 개최한다고 소개했다. 행사는 새로운 기능, 운영 모범 사례, 디자인-코드 연결, 디자이너와 엔지니어 간 협업을 다룬다. 이후 행사에서는 Code Connect, 타이포그래피·그라디언트 변수, Library Analytics API 등이 공개됐다. ## 디자인 시스템의 확장과 복잡성 - 디자인 시스템은 초기의 단순한 스타일 가이드에서 제품 개발 전반의 기반으로 발전했다. - 실제 도입과 운영 과정에서는 도구 선택, 자동화, 접근성, 조직 내 채택률 관리 등 다양한 문제가 발생한다. - Figma는 현재와 미래의 복잡한 요구를 지원하는 기능과 운영 전략을 행사에서 공유하려 했다. - 시스템을 미리 구조화한 경우뿐 아니라 자유롭게 작업하는 상황도 지원해야 한다는 철학을 강조했다. ## Framework 행사에서 다룬 내용 - 새로운 디자인 시스템 기능을 심층적으로 소개한다. - 디자인 시스템을 효과적으로 구축하고 유지하는 모범 사례를 공유한다. - Verizon 등 업계 기업의 디자인 시스템 구축 및 운영 경험을 소개한다. - Figma 제품팀이 향후 개발 방향을 설명한다. - Bumble, GitHub, Hewlett Packard가 참여하는 디자인-코드 연계 라운드테이블을 진행한다. - 참가자들의 실무 질문에 답하는 전문가 Q&A를 마련한다. ## 디자이너와 엔지니어의 연결 - 성공적인 디자인 시스템에는 디자인과 개발 조직의 긴밀한 협업이 필요하다고 설명한다. - 세션은 디자인 원칙부터 기술적 구현까지 두 직군의 공통 관심사를 다룬다. - 디자인 시스템을 코드와 더 가깝게 연결하는 새로운 기능도 소개 대상에 포함됐다. - 이는 디자인 산출물이 실제 제품 코드로 이어지는 과정의 간극을 줄이려는 방향이다. ## 행사에서 공개된 기능 - **Code Connect**: 디자인 시스템 구성 요소와 개발자가 사용하는 코드 컴포넌트를 연결한다. - **타이포그래피 변수와 그라디언트 변수**: 디자인 토큰의 표현 범위를 확장하고 일관된 스타일 관리를 돕는다. - **Library Analytics API**: 조직 내 라이브러리 사용 현황과 디자인 시스템 채택 정도를 분석할 수 있도록 지원한다. - 이러한 기능은 디자인 시스템의 구축뿐 아니라 개발 연계와 조직 전체의 활용도 측정까지 지원하는 데 초점을 둔다. ## 글로벌 디자인 시스템 커뮤니티 - 본 행사는 온라인으로 진행되며 전 세계 디자인 시스템 실무자를 대상으로 했다. - 아시아 지역 온라인 행사는 4월 18일, 도쿄 행사는 4월 23일에 별도로 진행될 예정이었다. - 런던 등 여러 도시에서는 현지 밋업도 계획됐다. - 온라인 스트림을 통해 지역과 관계없이 주요 발표와 세션에 참여할 수 있도록 했다. Figma가 제시한 방향은 디자인 시스템을 엄격한 규칙만으로 운영하기보다, 구조화된 관리와 자유로운 창작을 함께 지원하는 것이다. 조직에서는 디자인 토큰과 컴포넌트 표준화뿐 아니라 코드 연결, 사용량 분석, 디자이너·엔지니어 간 협업 체계까지 함께 구축하는 것이 실용적이다.

figma

지금 바로 북마크해야 할 (새 탭에서 열림)

프로토타이핑은 제품 개발 막바지의 보조 수단이 아니라, 아이디어 검증·사용자 조사·이해관계자 피드백·프레젠테이션 등 전 과정에서 팀의 공통 비전을 만드는 핵심 도구다. 이 글은 Figma 프로토타이핑 학습을 위해 기초 강의부터 발표, 모션과 플로우, 변수, 오피스 아워까지 23개의 영상·커뮤니티 파일·콘텐츠를 단계별로 큐레이션한다. 학습자는 자신의 수준과 목적에 맞는 자료를 골라 인터랙션 구현 능력을 높이고 더 나은 제품을 설계할 수 있다. ## 프로토타이핑의 역할 - 프로토타입은 제품의 동작과 사용자 경험을 시각화해 팀이 아이디어를 공유하도록 돕는다. - 사용자 테스트와 이해관계자 피드백을 통해 문제를 조기에 발견하고 반복적으로 개선할 수 있다. - 발표 자료에도 인터랙션을 추가해 정적인 화면보다 설득력 있게 제품의 흐름과 기능을 전달할 수 있다. - Figma는 모바일·태블릿·워치 등 다양한 디바이스 화면을 고려한 프로토타이핑 기능을 강화하고 있다. ## 기초 기능 익히기 - **「Build prototypes」(8분)** - 인터랙티브 프로토타입 제작의 기본 흐름을 소개한다. - 애니메이션을 적용하고 테스트 사용자에게서 피드백을 반영하는 방법을 다룬다. - **「Prototyping playlist」(50분)** - easing curve, transition, Smart Animate, 스크롤, 디바이스 프레임 등 핵심 기능을 짧은 영상들로 학습할 수 있다. - **「Prototyping 101」(63분)** - 프레임 간 기본 내비게이션부터 인터랙티브 컴포넌트 같은 고급 기능까지 설명한다. - **제품 담당자를 위한 Figma 학습 시리즈** - 디자이너가 아닌 제품 담당자도 가벼운 프로토타입을 직접 만들 수 있도록 안내한다. - 두 번째 영상에서는 transition, Smart Animate, 스크롤 동작 등을 활용해 화면을 더 실제처럼 만드는 방법을 다룬다. - **접근 가능한 프로토타입 커뮤니티 파일** - Figma의 접근성 모드를 활용해 프로토타이핑 화면의 정보를 스크린 리더로 읽을 수 있다. - macOS의 VoiceOver와 Windows의 JAWS 같은 도구를 통한 접근성 테스트에 활용할 수 있다. ## 발표 자료를 인터랙티브하게 만들기 - **「Presenting with Figma」(70분)** - Figma 프로토타이핑 기능을 활용해 역동적인 슬라이드 프레젠테이션을 구성하는 방법을 소개한다. - **발표 팁 영상** - 슬라이드 안에 프로토타입을 중첩해 실제로 스크롤되는 모바일 화면 등 인터랙티브 요소를 넣을 수 있다. - 이 방식은 이사회 보고, 수업, 제품 소개처럼 메시지 전달이 중요한 상황에 유용하다. - **Figma 앱으로 발표하기** - 모바일 앱에서 슬라이드를 직접 클릭하며 발표하는 방법을 보여준다. ## 영상·모션·사용자 플로우 학습 - 프로토타입의 완성도를 높이려면 단순한 화면 연결뿐 아니라 전환 효과, 애니메이션, 스크롤 동작을 함께 설계해야 한다. - Smart Animate와 easing curve를 사용하면 화면 변화가 더 자연스럽고 제품의 실제 동작에 가까워진다. - 모션과 플로우를 활용하면 사용자가 어떤 순서로 기능을 경험하는지 명확하게 검증할 수 있다. ## 변수와 고급 프로토타이핑 - 변수 기능을 활용하면 하나의 프로토타입에서 상태, 값, 조건에 따른 다양한 동작을 관리할 수 있다. - 반복되는 상태나 화면을 개별 프레임으로 복제하는 대신 변수와 인터랙티브 컴포넌트로 구성해 유지보수성을 높일 수 있다. - 복잡한 사용자 플로우와 여러 상태를 표현할 때 변수 기반 설계가 특히 유용하다. ## 오피스 아워와 실습 자료 - Figma의 오피스 아워 콘텐츠는 프로토타이핑 기능과 실제 활용 사례를 보충 학습할 수 있는 자료로 제공된다. - 영상뿐 아니라 Figma 커뮤니티 파일을 직접 열어 결과물을 확인하고 따라 해볼 수 있다. - 학습 방식에 따라 짧은 영상, 장시간 강의, 실습 파일, 소셜 콘텐츠 중 적합한 자료를 선택할 수 있다. 처음 시작한다면 기초 프로토타입 제작과 프레임 간 내비게이션부터 익힌 뒤, Smart Animate·스크롤·인터랙티브 컴포넌트로 확장하는 순서가 좋다. 이후 접근성 테스트, 변수, 발표용 프로토타입을 적용하면 실무에서 검증과 커뮤니케이션을 동시에 강화할 수 있다.

figma

디자인 시스템이란 무엇 (새 탭에서 열림)

디자인 시스템은 제품의 시각적 요소와 상호작용 방식을 일관되게 유지하도록 돕는 공통 언어이자 설계·개발을 위한 체계다. 색상, 아이콘, 버튼, 문구 같은 요소를 표준화하고 재사용함으로써 제작 시간을 줄이고 사용자 경험과 브랜드 정체성을 보호한다. 단순한 스타일 가이드가 아니라 원칙, 컴포넌트, 패턴, 기술 문서와 프로세스를 포괄하는 지속적으로 발전하는 기반이다. ## 디자인 시스템이란 무엇인가 - 제품과 서비스의 디자인·개발을 안내하는 **재사용 가능한 구성 요소와 표준의 집합**이다. - 복잡한 디지털 제품을 만들 때 팀이 공유할 수 있는 통일된 언어와 구조를 제공한다. - 요소를 매번 새로 설계하지 않아도 되므로 대규모 제품 개발에서 시간과 노력을 줄인다. - 디자인 시스템이 없으면 화면마다 스타일과 동작이 달라지는 **일관성 위기**가 발생할 수 있다. - 사용자가 인터페이스를 혼란스럽게 느낄 수 있다. - 브랜드 정체성이 약화될 수 있다. - 반복적인 디자인 작업과 구현 비용이 늘어난다. ## 디자인 시스템의 계층 구조 ### 1. 디자인 시스템 - 제품 생태계 전체를 아우르는 최상위 개념이다. - 다음과 같은 자원을 포함할 수 있다. - 기술 사양 - 디자인 토큰 - 컴포넌트 및 패턴 문서 - 모범 사례 - UX 설계 원칙 - 제품 개발 프로세스 - 고정된 규칙집이 아니라 제품과 조직의 변화에 따라 계속 발전하는 기반이다. ### 2. 컴포넌트 및 패턴 라이브러리 - 제품에서 반복적으로 사용하는 시각 요소와 상호작용 방식을 모아 둔 라이브러리다. - 컴포넌트의 예: - 버튼 - 입력 필드 - 기타 UI 요소 - 패턴의 예: - 내비게이션 흐름 - 데이터 표시 방식 - 레이아웃과 템플릿 - 반복되는 사용자 상호작용 - 코드 스니펫, 기술 사양, 사용 지침을 함께 제공해 디자인 의도를 실제 구현으로 연결한다. - 디자이너와 개발자가 동일한 기준을 참고하는 협업 지점 역할을 한다. - **컴포넌트 라이브러리**가 개별 UI 요소에 집중한다면, **패턴 라이브러리**는 더 넓은 문제 해결 방식과 사용자 흐름을 다룬다. ## 디자인 시스템과 스타일 가이드의 차이 - 스타일 가이드는 주로 다음과 같은 시각적 요소를 정의한다. - 색상 - 글꼴과 타이포그래피 - 이미지와 시각적 표현 - 디자인 시스템은 스타일 가이드보다 범위가 넓다. - 코딩 표준 - 사용성 원칙 - 상호작용 패턴 - 기술 문서 - 제품 개발 프로세스까지 포함할 수 있다. - 따라서 스타일 가이드는 디자인 시스템을 구성하는 일부로 볼 수 있다. ## 3. 기초 요소 - 제품의 전반적인 시각 언어와 목소리·말투를 정의한다. - 대표적인 구성 요소는 다음과 같다. - 색상 - 타이포그래피 - 아이콘 - 로고 - 일러스트레이션 - 접근성 가이드라인 - 브랜드 가이드라인 - 단순히 화면을 예쁘게 만드는 것을 넘어, 제품이 어떤 인상을 주고 어떤 방식으로 소통할지를 결정한다. ## 디자인 시스템과 UX - 디자인 시스템이 디자이너의 창의성을 제한하고 모든 화면을 똑같이 만든다는 것은 흔한 오해다. - 실제로는 반복적인 문제를 해결해 디자이너가 더 중요한 사용자 경험과 제품 문제에 집중하도록 돕는다. - 공통 요소와 기준을 재사용하면 일관성을 확보하면서도 제품 목적에 맞는 새로운 경험을 설계할 수 있다. - 색상, 아이콘, 버튼의 형태뿐 아니라 명확한 언어와 접근성까지 관리하므로 UX 전반에 영향을 준다. 디자인 시스템을 도입할 때는 단순히 UI 컴포넌트 목록을 만드는 데 그치지 말고, 디자인 원칙·접근성·코드·문서·협업 프로세스까지 함께 정의하는 것이 좋다. 또한 처음부터 모든 요소를 완성하려 하기보다 반복적으로 사용되는 핵심 요소부터 구축하고, 제품과 팀의 변화에 맞춰 지속적으로 관리해야 한다.

figma

개발 모드 어노테 (새 탭에서 열림)

Figma의 Dev Mode 주석 기능은 디자이너와 개발자 사이에 흩어진 요구사항과 설계 의도를 하나의 공간에 모으기 위해 만들어졌다. 기존 주석은 작성에 시간이 많이 들고 디자인 변경에 따라 쉽게 낡으며 캔버스를 복잡하게 만든다는 문제가 있었다. Figma는 주석을 실제 디자인 속성·측정값·변수·컴포넌트와 연결하고, 캔버스 바깥에서 자동으로 배치해 최신 상태와 가독성을 함께 확보하려 했다. ## 디자이너와 개발자의 서로 다른 요구 - 디자이너는 시각적 결과만으로 표현하기 어려운 정보를 전달해야 한다. - 접근성 속성 - 인터랙션의 세부 동작 - 특정 디자인 결정을 내린 의도 - 개발자에게 디자인 파일은 정보가 지나치게 많아 실제 구현해야 할 부분을 찾기 어려울 수 있다. - 디자인 공유는 전체 파일을 전달하는 것과 다르며, 개발자가 집중해야 할 영역과 요구사항을 선별해 주는 과정이 필요하다. - Figma는 이러한 문제를 해결하기 위해 Dev Mode 안에 개발자용 사양을 큐레이션하는 전용 공간을 마련했다. - 디자이너도 Dev Mode에서 주석을 작성함으로써 개발자가 실제로 보게 될 화면과 맥락을 확인할 수 있고, 작업이 끝난 뒤 Dev Mode 링크를 공유할 수 있다. ## 기존 수동 주석의 한계 - 디자이너는 텍스트, 화살표, 치수선, 콜아웃 등을 직접 배치해야 하므로 주석 작성에 많은 시간이 든다. - 디자인이 변경되면 기존 주석이 수정되지 않아 실제 디자인과 설명 사이에 불일치가 생긴다. - 디자인 파일에 주석을 추가하려면 프레임을 옮기거나 주변 공간을 확보해야 한다. - 주석이 많아질수록 캔버스가 복잡해지고, 개발자가 필요한 정보를 찾기 어려워진다. - 작업이 완전히 확정된 뒤 “개발 준비 완료” 상태를 표시하는 방식에는 적합하지만, 지속적으로 변경되는 제품 개발 과정에는 한계가 있다. ## 디자인 속성과 연결되는 동적 주석 - Figma는 주석을 단순한 텍스트가 아니라 디자인의 실제 속성에 연결하는 방식을 고민했다. - 디자인 변경 시 연결된 주석과 치수선도 함께 갱신되도록 하면 디자이너가 정보를 반복해서 입력할 필요가 줄어든다. - 개발자는 디자이너가 계속 수정 중인 상황에서도 최신 디자인에 기반한 사양을 확인할 수 있다. - 디자인 시스템의 변수와 컴포넌트를 주석에서 직접 참조하면, 일반 텍스트보다 오류 가능성이 낮아진다. - 주석의 정보가 실제 디자인 요소 및 코드베이스와 가까워질수록 설계 사양과 구현 결과의 정합성이 높아진다. ## 캔버스를 어지럽히지 않는 위치 지정 - 기존 방식에서는 주석을 표시할 공간을 만들기 위해 프레임을 계속 재배치해야 했다. - Figma는 주석을 캔버스에 직접 차지시키지 않으면서도 개발자에게 충분히 잘 보이게 하는 방식을 탐색했다. - 최종 방향 중 하나는 주석을 자동으로 배치하고 표시하는 것이었다. - 자동 배치는 디자이너의 수동 정리 작업을 줄이고 개발자에게 더 깔끔한 화면을 제공할 수 있다. - 다만 확대·축소, 이동, 크기 조절, 최소화, 선택, 마우스 오버 등 다양한 상호작용을 고려해야 하므로 여러 프로토타입과 반복적인 조정이 필요했다. - 엔지니어링 팀은 주석 표시 로직을 조정해 다양한 화면 상태에서도 주석이 적절히 보이도록 하는 데 집중했다. ## 실용적인 시사점 Dev Mode의 주석은 디자인이 끝난 뒤 설명을 덧붙이는 문서화 도구라기보다, 변경 중인 디자인과 구현 요구사항을 지속적으로 연결하는 협업 기능에 가깝다. 주석을 작성할 때는 단순한 설명보다 접근성, 상태 변화, 인터랙션, 디자인 토큰처럼 실제 구현에 필요한 정보를 디자인 요소와 연결해 기록하는 것이 효과적이다.

figma

Thumbtack이 디자인 (새 탭에서 열림)

Thumbtack은 디자인 시스템 **Thumbprint**를 토큰, Atomic CSS, 컴포넌트의 3계층으로 구성해 유연성과 생산성을 함께 확보한다. 하위 계층일수록 세밀한 제어와 확장성이 높고, 상위 계층일수록 접근성·일관성·개발 생산성이 높아진다. 필요한 경우 각 계층 내부에도 추가 계층을 두어, 개발자가 일반적인 상황에서는 간편한 추상화를 사용하면서도 특수한 요구에는 더 낮은 계층으로 내려갈 수 있게 했다. ## 3단계 계층 구조 - **Thumbprint Tokens** - 시스템의 가장 낮은 추상화 계층이다. - 색상, 타이포그래피, 모서리 반경, 간격, 크기, 그림자 등 세부 디자인 속성을 변수로 정의한다. - 웹과 네이티브 클라이언트 모두에서 사용된다. - 가장 세밀하고 유연하지만, 이를 직접 조합해야 하므로 개발 생산성은 상대적으로 낮다. - **Thumbprint Atomic** - Thumbprint Tokens 위에 구축된 원자적 CSS 라이브러리다. - 개발자가 별도의 커스텀 CSS를 작성하지 않고도 UI를 구성할 수 있다. - 예를 들어 `aspect ratio` 클래스를 사용하면 YouTube나 Vimeo 같은 외부 미디어의 가로세로 비율을 일정하게 유지할 수 있다. - 토큰보다 생산성이 높지만, 완전히 자유롭게 스타일을 제어하는 것보다는 유연성이 낮다. - **Thumbprint Components** - 가장 높은 추상화 계층으로, 자주 사용하는 UI 패턴을 접근성까지 고려해 미리 구현한다. - 알림, 버튼, 날짜 선택기, 별점 등 공통 컴포넌트를 제공한다. - 개발자는 반복적인 UI 구현보다 핵심 제품 기능에 집중할 수 있다. - 제공되지 않는 컴포넌트가 필요하면 Atomic CSS를 사용해 직접 구성하고, 그보다 더 낮은 수준의 제어가 필요하거나 네이티브 환경이라면 디자인 토큰을 직접 사용할 수 있다. ## 계층에 따른 트레이드오프 - 하위 계층으로 내려갈수록: - 디자인 속성을 세밀하게 제어할 수 있다. - 새로운 제품 요구사항에 유연하게 대응할 수 있다. - 대신 구현과 유지보수에 더 많은 개발 노력이 필요하다. - 상위 계층으로 올라갈수록: - 접근성, 시각적 일관성, 개발 생산성이 높아진다. - 공통 UI를 빠르고 안정적으로 구현할 수 있다. - 대신 사전에 정해진 동작과 스타일이 많아져 특수한 요구에는 덜 유연할 수 있다. ## 계층 안의 계층 - 하나의 계층도 목적에 따라 여러 하위 계층으로 나눌 수 있다. - Thumbprint의 React 모달은 다음처럼 구성된다. - `ModalCurtain`: 시각적 스타일보다 사용성·기능에 집중한 낮은 계층 컴포넌트 - `Modal`: `ModalCurtain`을 기반으로 시각적 스타일과 일반적인 모달 사용 방식을 제공하는 상위 컴포넌트 - 대부분의 개발자는 바로 사용할 수 있는 `Modal`을 사용한다. - `Modal`이 지나치게 제한적일 때는 `ModalCurtain`으로 내려가 더 자유롭게 구성할 수 있다. - 이후 반복적으로 필요한 기능은 다시 상위 `Modal`에 추가해 시스템을 발전시킬 수 있다. ## 디자인 토큰의 다단계 추상화 - 디자인 토큰도 여러 단계로 상속·추상화할 수 있다. - Adobe Spectrum의 예처럼: - `button-cta-background-color` - `cta-background-color` - `blue-400` - 토큰이 구체적인 의미에서 일반적인 색상 값으로 이어지는 구조다. - 개발자는 자신의 상황에 적용 가능한 가장 높은 수준의 토큰을 사용하는 것이 일반적이다. - 이를 통해 제품별 요구에는 대응하면서도 디자인 언어의 일관성을 유지할 수 있다. ## 실용적인 적용 방향 Thumbprint의 방식은 모든 개발자가 가장 낮은 수준의 API를 직접 다루게 하는 대신, 기본적으로는 접근성과 생산성이 높은 컴포넌트를 제공하고 필요할 때만 Atomic CSS와 토큰으로 내려가도록 설계한다. 따라서 디자인 시스템을 만들 때는 단일 추상화 계층에 모든 요구를 담기보다, **일반적인 사용 사례를 위한 높은 계층과 예외적인 요구를 위한 낮은 계층을 함께 제공하는 구조**가 효과적이다.

figma

4년이 지난 지금, Config가 (새 탭에서 열림)

Config 2023 발표 제안 1,000여 건을 분석한 결과, 디자인 업계는 어려운 환경 속에서도 예상보다 낙관적인 태도를 보였다. 디자인 시스템은 창의성을 제한하기보다 반복 작업을 줄이고 새로운 아이디어를 위한 여유를 만드는 도구로 받아들여지고 있다. 다만 이 분석은 Config 제출작의 경향을 바탕으로 하므로 업계 전체를 대표하는 조사라기보다는 커뮤니티의 관심사를 보여주는 지표에 가깝다. ## Config 제안 수 증가와 분석 방식 - 발표 제안 수는 2021년 420건에서 2022년 520건, 2023년 1,000건 이상으로 크게 늘었다. - Figma는 제안서의 주제와 표현을 전년 대비 분석해 디자인·기술·제품 개발 분야의 관심 변화를 파악했다. - 제안 주제는 AI를 활용한 미래 구상, 디자인 시스템, 접근성, 협업 등 폭넓은 영역을 포함했다. - 많은 사람이 발표를 제안했다는 사실 자체가 커뮤니티의 참여 의욕과 관심이 높다는 신호로 해석됐다. ## 예상 밖의 낙관적 분위기 - 긍정적인 내용의 제안 비율은 2021년 63%에서 2023년 72%로 증가했다. - “지금이야말로 더 나은 시기다”, “이 방법 덕분에 성장할 수 있었다”와 같은 표현이 많이 등장했다. - 반대로 낡고 일관성 없는 디자인이나 해결되지 않는 문제를 비판하는 표현은 상대적으로 줄었다. - 팬데믹 관련 언급은 2021년의 6분의 1 수준으로 감소했다. - “remote”라는 단어의 등장도 2021년보다 약 20% 줄어들어, 업계 대화의 중심이 팬데믹과 원격근무의 충격에서 점차 이동했음을 보여준다. - 지난 몇 년의 혼란이 완전히 사라진 것은 아니지만, 사람들은 새로운 환경에 적응하며 문제보다 가능성에 더 집중하기 시작했다. ## 디자인 시스템과 창의성의 결합 - 디자인 시스템을 중시하는 사람과 자유로운 창작을 중시하는 사람 사이의 경계가 점차 약해지고 있다. - 디자인 시스템은 창의성을 억누르는 규칙이 아니라 반복적이고 소모적인 작업을 줄여 창작에 더 많은 시간을 쓰게 하는 기반으로 인식된다. - 디자인 토큰을 비롯한 시스템 자산을 축적하면 팀이 빠른 속도와 큰 규모로 작업하면서도 일관성을 유지할 수 있다. - 2021년 제안서는 디자인 시스템의 구축, 감사, 확장성 같은 기본 운영 문제를 주로 다뤘다. - 2023년에는 디자인 시스템과 함께 `art`, `transition`, `color`, `creating`처럼 표현적이고 시각적인 언어가 더 자주 등장했다. - 이는 디자인 시스템이 단순한 관리·표준화 도구를 넘어 새로운 아이디어를 생산하는 창의적 자산으로 발전하고 있음을 의미한다. ## 실용적인 시사점 디자인 조직은 시스템을 창의성의 반대편에 두기보다, 반복 업무를 자동화하고 일관성을 확보해 디자이너가 더 중요한 문제와 새로운 표현에 집중하도록 만드는 기반으로 활용할 수 있다. 또한 업계의 분위기를 판단할 때는 문제의 규모만 보기보다, 사람들이 어떤 해결책을 제안하고 어떤 가능성을 이야기하는지도 함께 살펴볼 필요가 있다.