GitHub의 오픈 소스 Annotation Toolkit을 사용하여 디자인-코드 협업 수준을 높이세요.
혹시 디자인 파일을 건네받고 생각해보셨다면, “잠깐만요. 이게 정확히 무슨 일을 하는 거죠?” 당신은 혼자가 아닙니다.
디자이너와 개발자 간의 핸드오프는 제품 워크플로가 중단되는 가장 일반적인 지점 중 하나입니다. 당신은 구성 요소를 보고 무엇이 대화형인지, 무엇이 반응형인지, 텍스트가 커지면 어떤 일이 일어나는지 파악하려고 노력하고 있습니다. 디자이너는 캔버스에 직접적으로 명시되지 않은 것을 표현하려고 합니다. 그 격차 어딘가에서 접근성 고려 사항이 누락됩니다. 지식은 잃어버린 Slack 스레드를 통해 문 밖으로 나갑니다. 그런 다음 메시지가 누락되지 않았거나 사전에 기대치가 더 명확했다면 예방할 수 있었던 버그로 나중에 다시 나타납니다.
GitHub의 접근성 디자인 팀은 내부적으로 바로 이 문제에 직면했습니다. 그들은 자체 접근성 감사 데이터를 살펴보고 놀라운 사실을 깨달았습니다. 접근성 감사 문제의 절반(48%) WCAG(웹 콘텐츠 접근성 지침) 고려 사항을 주석에 직접 통합하여 설계 의도를 더 잘 문서화했다면 이러한 문제를 방지할 수 있었습니다. 그래서 그들은 그것을 고치기 위해 무언가를 만들었습니다. 그리고 이제 그들은 그것을 오픈소스로 공개했습니다.
Annotation Toolkit이라고 하며, 핸드오프를 더 쉽게 하도록 설계된 Figma 라이브러리입니다. 프레임워크는 모든 디자인-코드 상호 작용에 구조, 명확성 및 접근성 우선 사례를 제공합니다.
Annotation Toolkit의 핵심은 다음과 같습니다. 피그마 라이브러리 디자인에 넣을 수 있는 스탬프(주석)입니다. 각 주석을 사용하면 다음을 수행할 수 있습니다.
- 디자인 의도 표현 캔버스에 시각적으로 보이는 것 이상으로 말이죠.
- 문서 접근성 동작 반응형 리플로우나 테이블 처리 같은 거죠.
- 엔지니어에게 명확하게 안내 번호가 매겨진 스탬프를 설명에 연결하여.
이 모든 것을 Figma 댓글(분실됨), Slack 스레드(사라짐) 또는 흩어져 있는 일회성 설명(나중에 아무도 기억할 수 없음)에 문서화하는 대신 주석이 디자인 파일 내부에 바로 표시됩니다. 번호가 매겨져 있고 휴대가 가능하며 작업과 함께 사용할 수 있습니다.
핸드오프에 명확성을 직접 포함시키는 것과 같다고 생각하십시오.
중요한 이유: 기본적으로 접근성
이 툴킷은 접근성 고려 사항을 마지막에 추가할 필요가 없도록 특별히 GitHub의 접근성 디자인 팀에 의해 구축되었습니다. 처음부터 디자인 작업 흐름에 포함되어 있습니다.
각 주석에는 기본 제공 지침이 제공됩니다. 테이블에 표시를 하고 싶으신가요? 이 툴킷은 리플로우 동작 등을 포함하여 WCAG 지침에 따라 디자인으로 인해 방지할 수 있는 거의 모든 접근성 문제를 해결합니다. 이미지를 추가하시나요? 개발자가 적절한 대체 텍스트를 작성할 수 있도록 컨텍스트를 문서화하라는 메시지가 표시됩니다. 툴킷을 사용하면 접근성을 문서화할 수 있을 뿐만 아니라 진행 과정에 대해 배울 수 있습니다.
그것은 작은 일이 아닙니다. 이는 개발자가 추측을 중단한다는 의미입니다. 이는 접근성이 더 이상 전문가의 관심사가 아니라 첫날부터 대화의 일부가 된다는 것을 의미합니다.
실제 적용: 문제점부터 생산성까지
이 툴킷 이전에 GitHub 팀은 Figma 댓글, Slack 스레드 및 일회성 설명 패치워크에 의존했습니다. 이러한 패치된 접근 방식은 지식 격차와 반복적인 접근성 감독을 초래했습니다.
하지만 이제 주석은 다음을 제공합니다.
- 규모에 따른 명확성: 엔지니어는 더 이상 의도된 동작을 추측하지 않습니다.
팀 간 일관성: 디자이너, 제품 관리자(PM), 개발자는 모두 공통 언어를 공유합니다. - 예방적 QA: 빌드 후가 아닌 설계 단계에서 많은 문제가 해결됩니다.
주석을 사용하면 Figma는 단순한 캔버스 이상의 역할을 할 수 있습니다. 훨씬 더 깊은 수준의 정보를 표현하기 위한 도구입니다.
@hellojanehere, GitHub 제품 관리자
시작하는 방법
여기에는 두 가지 경로가 있으므로 더 쉬운 방법을 선택하세요.
옵션 1: Figma 커뮤니티에서(가장 빠름)
- Figma(figma.com/@github)의 @github 프로필로 이동하세요.
- Annotation Toolkit을 찾아 링크를 클릭하여 복제하세요.
- 초안으로 바로 이동됩니다.
- 자산 탭에서 언제든지 구성요소에 액세스하세요.
옵션 2: GitHub에서(모든 문서를 한 번에 원하는 경우)
- github.com/github/annotation-toolkit을 방문하세요.
- 리포지토리에서 내보낸 Figma 파일을 다운로드합니다.
- Figma에서 열고 작업 공간에 복제하세요.
- 동일한 거래 – 자산 탭에서 구성요소를 찾으세요.
툴킷이 있으면 첫 번째 주석을 추가하는 것은 간단합니다. 디자인 파일을 열고 주석 스탬프(예: 프로필 사진의 이미지 주석)를 끌어다 놓으면 번호가 붙은 라벨이 표시됩니다. 해당 번호를 설명 블록과 짝을 이루고 필요한 것을 작성하십시오. 그게 다야. 일반적으로 Slack 스레드로 사라지는 내용을 문서화했습니다.
툴킷에는 기본적으로 작업할 때 접근성을 최우선으로 생각하는 대화형 체크리스트인 디자인 체크포인트가 함께 제공됩니다. 더 깊이 들어가고 싶다면 모든 것이 문서화되어 있습니다. 저장소에는 모든 주석 유형에 대한 튜토리얼, WCAG 규정 준수에 대한 심층 분석, 일반적인 핸드오프 마찰 방지에 대한 지침이 있습니다. 확인해보시고 부족한 점이 있으면 다시 기여해 주세요.
더 큰 그림
Annotation Toolkit은 협업에 대한 생각의 변화입니다. 의도, 접근성 및 명확성을 Figma에 직접 내장함으로써 GitHub는 개발자-디자이너 파트너십에 새로운 기반을 제공하고 있습니다.
대화를 대체하는 것이 아닙니다. 그것은 그것들을 더욱 의미있게 만드는 것입니다. 의도가 명확하면 작업 흐름이 더 빨라지고 최종 결과는 모두에게 더 좋습니다.
이 툴킷은 GitHub 직원이 적극적으로 유지 관리하며 기여할 수 있습니다. 더 나은 점을 발견했다면 github.com/github/annotation-toolkit으로 가서 문제를 열어주세요. 버그를 보고하고, 기능을 제안하고, 새로운 주석 유형을 제공하세요. 팀은 귀하가 어떻게 사용하고 있는지, 무엇이 누락되었는지에 대한 피드백을 적극적으로 찾고 있습니다.
👉 @GitHub에서 Figma의 툴킷을 살펴보거나 GitHub의 저장소를 살펴보세요. 먼저 실제로 작동하는 모습을 보려면 연습을 확인하세요. 시도해 보고, 기여하고, 접근 가능한 협업 디자인의 미래를 만들어가는 데 도움을 주세요.
작성자:
Post Comment