wcag

일회성 프롬프트에서 워크플로로: GitHub Copilot CLI에서 커스텀 에이전트를 사용하는 방법 (새 탭에서 열림)

GitHub Copilot CLI의 커스텀 에이전트는 반복적인 터미널 작업과 팀의 개발 규칙을 Markdown 기반 워크플로로 표준화하는 기능이다. 저장소에 에이전트 프로필을 두면 팀의 도구, 코딩·보안·접근성 기준, 출력 형식을 버전 관리하며 CLI·IDE·GitHub 전반에서 일관되게 사용할 수 있다. 따라서 일회성 프롬프트를 반복하는 대신 검토 가능하고 재사용 가능한 전문 에이전트를 구축할 수 있다. ## 커스텀 에이전트의 개념 - 커스텀 에이전트는 특정 작업에 특화된 Copilot 에이전트다. - Markdown 파일인 에이전트 프로필에 다음 내용을 정의한다. - 에이전트의 역할과 전문 영역 - 사용할 수 있는 도구 - 따라야 할 개발·보안·접근성 기준 - 실행 범위와 안전장치 - 결과물의 형식 - 일반적인 코드 정리 에이전트와 달리, 팀의 포맷 규칙·접근성 표준·리뷰 절차·보안 요구사항을 매번 동일하게 적용할 수 있다. - 프로필이 저장소에 포함되므로 코드처럼 리뷰·수정·공유·버전 관리가 가능하다. ## 에이전트 프로필 구성 프로필은 YAML frontmatter와 지침 본문으로 구성된다. - `name`: 에이전트 이름 - `description`: 에이전트의 목적과 역할 - `model`: 사용할 Copilot 모델 - `tools`: 코드베이스 검색, 파일 수정, 테스트 실행, 터미널, 웹 요청 등 허용할 도구 - 본문 지침: - 에이전트의 전문성 - 작업 절차 - 출력 형식 - 금지 사항과 안전 규칙 예를 들어 접근성 전문가 에이전트는 WCAG 2.1/2.2의 A·AA·AAA 등급을 기준으로 웹 UI를 검토하고, 디자인·개발·QA에 적용 가능한 실무 지침을 제공하도록 설정할 수 있다. ## GitHub Copilot CLI에서 사용하는 방법 - 터미널에서 GitHub Copilot CLI를 실행한다. - `/agent` 슬래시 명령을 사용해 원하는 커스텀 에이전트를 선택한다. - 대상 저장소의 `.github/agents` 디렉터리에 프로필을 만든다. - 파일 확장자는 `.agent.md`를 사용한다. 예: - `.github/agents/accessibility.agent.md` - `.github/agents/security-audit.agent.md` - CLI는 정의된 도구와 지침에 따라 스크립트 실행, API 호출, 저장소 분석 등을 반복 가능한 방식으로 수행한다. ## 자동화할 수 있는 보안 감사 글에서는 보안 점검을 대표적인 커스텀 에이전트 활용 사례로 제시한다. - 여러 저장소에서 팀의 표준 보안 도구를 실행한다. - `gitleaks`: 비밀·자격 증명 탐지 - `trivy`: 파일 시스템 및 컨테이너 취약점 검사 - `semgrep`: 정적 분석 - `gh`: GitHub 설정 및 의존성 검토 - `jq`, `git`: 결과 처리와 저장소 작업 - 결과를 `Critical`, `High`, `Medium`, `Low` 심각도로 분류한다. - 담당자와 다음 조치를 포함한 PR용 체크리스트로 출력한다. - 저장소에 이미 존재하는 설정 파일을 우선 사용한다. - `.semgrep.yml` - `.trivyignore` - `.gitleaks.toml` - 도구가 설치되지 않은 경우 결과를 추측하지 않고 “검사 범위의 공백”으로 기록한다. - 토큰이나 자격 증명 등 민감한 정보는 출력에서 마스킹한다. - `CODEOWNERS`가 없으면 경로별 기본 담당 팀을 매핑해 후속 조치를 명확히 한다. ## 커스텀 에이전트의 장점 - 반복 작업을 자동화해 명령어 재실행과 컨텍스트 재설명을 줄인다. - 팀 표준을 프롬프트가 아닌 저장소 파일로 관리할 수 있다. - 결과 형식과 품질 기준이 일관된다. - CLI에서 시작한 작업을 IDE와 GitHub의 리뷰·PR 흐름으로 자연스럽게 연결할 수 있다. - 에이전트 설정 자체를 코드 리뷰 대상으로 삼아 변경 이력과 책임 소재를 남길 수 있다. 반복적으로 수행하는 보안 검사, 접근성 검토, 테스트 실행, 로그 분석 같은 작업부터 `.github/agents`에 에이전트로 정의하는 것이 좋다. 특히 허용 도구, 민감 정보 처리, 실패 시 동작, 결과 형식을 명확히 작성하면 Copilot CLI를 단순한 명령어 생성기가 아니라 팀 표준을 실행하는 재사용 가능한 워크플로 엔진으로 활용할 수 있다.

범용 접근성 에이전트 구축과 그 과정에서 얻은 교훈 (새 탭에서 열림)

GitHub는 개발자가 접근성 질문에 즉시 답을 얻고, 배포 전 단순하고 객관적인 접근성 문제를 자동 수정하도록 실험적인 범용 접근성 에이전트를 운영하고 있습니다. 이 에이전트는 3,535개의 풀 리퀘스트를 검토해 68%의 해결률을 기록했지만, 접근성을 자동으로 “해결”하는 만능 도구가 아니라 기존 엔지니어링 노력을 보완하는 역할로 설계되었습니다. 특히 조직이 축적한 구조화된 접근성 이슈와 수정 사례가 에이전트의 정확도와 실용성을 높이는 핵심 자산이 되었습니다. ## 접근성 에이전트의 목표와 성과 - GitHub Copilot CLI와 VS Code 통합 환경에서 접근성 관련 질문에 신뢰할 수 있는 답변을 제공합니다. - 프런트엔드 코드가 변경된 풀 리퀘스트를 자동으로 검사합니다. - 단순하고 판단 기준이 명확한 접근성 문제는 코드 제안 형태로 자동 수정할 수 있습니다. - 현재까지 3,535개의 풀 리퀘스트를 검토했으며, 68%의 해결률을 기록했습니다. - 가장 많이 발견된 문제는 다음과 같습니다. - 구조와 관계를 보조공학 기술이 명확히 이해하도록 표현하지 못한 문제 - 대화형 컨트롤의 이름이 불명확한 문제 - 중요한 상태 변화나 공지를 사용자에게 전달하지 못한 문제 - 이미지 등 비텍스트 콘텐츠에 텍스트 대안이 없는 문제 - 키보드 포커스 이동 순서가 논리적이지 않은 문제 예를 들어 시각적 배치와 DOM·스크린 리더 읽기 순서가 서로 다른 경우, 에이전트는 `row-reverse` 대신 DOM 요소 순서를 바꾸고 일반적인 `flex-direction: row`를 사용하라고 제안할 수 있습니다. ## 접근성을 바라보는 관점 - 사회적 장애 모델에 따르면 장애와 사용 장벽은 개인뿐 아니라 환경의 설계 방식에서도 발생합니다. - 디지털 서비스에서도 잘못 구성된 UI가 보조공학 사용자에게 장벽을 만들 수 있습니다. - 따라서 에이전트의 목표는 접근성을 독립적으로 완성하는 것이 아니라, 동료 개발자가 장벽을 더 빠르게 발견하고 제거하도록 돕는 것입니다. - 모든 상황을 자동으로 처리할 수 있는 “실버 불릿”으로 에이전트를 홍보하지 않았습니다. - 에이전트의 책임 범위를 현실적으로 정의한 덕분에 실험을 빠르게 시작하고 조직 내 동의를 얻을 수 있었습니다. ## 규제와 사전 투자 - 유럽 접근성법(EAA)이 시행되었고, 미국 장애인법(ADA) Title II도 2027년 4월부터 WCAG 2.1 AA 준수를 법적 완료 기준으로 삼을 예정입니다. - LLM 기반 에이전트는 접근성 트리를 읽고 이를 바탕으로 UI를 분석하거나 조작할 수 있습니다. - 조직이 아직 수동으로 접근성 문제를 식별하고 수정하는 체계를 마련하지 않았다면, 향후 에이전트를 구축할 때도 불리해집니다. - 자동화는 기존의 접근성 품질 관리 체계를 대체하는 것이 아니라, 이미 검증된 문제와 해결 방식을 활용해 확장하는 방식으로 효과를 냅니다. ## 구조화된 이슈 데이터의 가치 GitHub는 에이전트 도입 이전부터 접근성 문제를 일관되게 기록하고 검증하는 시스템을 운영했습니다. - 문제 신고용 구조화된 템플릿 - 재현 절차 - 심각도, 담당 서비스 영역, 적용 가능한 WCAG 성공 기준 등의 메타데이터 - 문제를 해결한 풀 리퀘스트와의 연결 - 수정 완료를 판단하는 명확한 수용 기준 - 모든 접근성 이슈를 하나의 저장소에 중앙화 이처럼 일관된 형식으로 축적된 이슈와 코드 변경 내역은 에이전트가 참고할 수 있는 고품질 학습·검색 자료가 되었습니다. LLM의 비결정적이고 유연한 매칭 능력도 비슷한 코드와 문구를 찾아내는 데에는 장점으로 작용했습니다. ## 일반적인 지침만으로는 부족한 이유 - 전문 영역에서 “접근성 모범 사례를 따르라”는 식의 짧고 추상적인 지침만으로는 충분하지 않습니다. - 주요 LLM은 접근성이 부족한 코드가 포함된 수십 년간의 자료로 학습되었기 때문에, 접근성 안티패턴을 생성하는 편향을 보일 수 있습니다. - 따라서 에이전트가 실제 조직의 코드 스타일과 문제 해결 관례를 반영한 구체적인 사례를 참고해야 합니다. - 수동으로 접근성 문제를 분류하고 수정한 기록은 다음 요소를 함께 포함합니다. - 실제 제품 맥락 - 조직의 코딩·문서화 규칙 - 적용된 WCAG 기준 - 문제를 해결한 코드 - 수정 여부를 검증하는 조건 - 이런 사례 기반 자료는 단순한 체크리스트보다 에이전트의 판단과 코드 제안에 훨씬 강력한 기반이 됩니다. ## 실용적인 결론 접근성 에이전트를 도입하려면 먼저 사람이 접근성 문제를 일관되게 기록하고, 재현 절차와 WCAG 기준, 실제 수정 사례를 축적하는 것이 좋습니다. 에이전트는 전문가의 판단을 대체하기보다 반복적이고 객관적인 문제를 빠르게 발견·수정하는 보조 수단으로 운영해야 하며, 그 한계를 명확히 정의할수록 조직 내 신뢰와 도입 효과가 커집니다.

접근성을 위한 지속적인 AI: GitHub이 피드백을 포용으로 전환하는 방법 (새 탭에서 열림)

GitHub는 접근성 피드백이 여러 팀과 채널에 흩어져 처리되지 못하던 문제를 해결하기 위해, 피드백을 지속적으로 수집·분류·추적하는 AI 기반 워크플로를 구축했다. GitHub Actions, GitHub Copilot, GitHub Models를 결합해 반복적인 분석과 라우팅은 자동화하되, 우선순위와 해결 판단은 사람이 맡는다. 그 결과 접근성 문제를 일회성 감사가 아니라 지속적으로 개선되는 운영 시스템으로 전환했다. ## 접근성 피드백이 기존 방식에서 겪은 문제 - 접근성 문제는 내비게이션, 인증, 설정, 공통 컴포넌트 등 여러 영역에 걸쳐 발생해 단일 팀이 소유하기 어렵다. - 피드백이 여러 백로그와 버그 목록에 분산되면서 담당자가 정해지지 않거나 장기간 방치됐다. - 사용자가 반복해서 진행 상황을 문의해야 했고, 개선 사항이 막연한 “2단계 작업”으로 미뤄지는 경우가 많았다. - 따라서 단순한 버그 관리가 아니라, 접수부터 해결과 후속 안내까지 연결하는 조정 체계가 필요했다. ## Continuous AI: 접근성을 살아 있는 시스템으로 관리 - GitHub가 말하는 Continuous AI는 단일 제품이나 일회성 자동 검사 도구가 아니다. - 자동화, 인공지능, 사람의 전문성을 결합해 소프트웨어 개발 과정에 접근성을 지속적으로 포함시키는 방법론이다. - 코드 스캐너만으로는 실제 사용자가 겪는 장벽을 충분히 발견하기 어렵기 때문에, 사용자와 고객의 경험을 중심 데이터로 삼는다. - 피드백을 명확한 구조의 데이터로 바꾸고, 적절한 팀에 전달하며, 구현 가능한 이슈로 발전시키는 것이 핵심이다. - 이는 2025년 GAAD pledge의 방향인 오픈소스 생태계 전반의 접근성 개선과도 연결된다. ## 사용자와 조직 구성원을 위한 설계 시스템은 세 가지 주요 사용자를 기준으로 설계됐다. - **이슈 제출자** - 커뮤니티 관리자, 지원 담당자, 영업 담당자가 사용자를 대신해 문제를 등록한다. - 이들이 반드시 접근성 전문가일 필요는 없으므로, 입력 과정에서 접근성 개념과 필요한 정보를 안내해야 한다. - **접근성·서비스 팀** - 엔지니어와 디자이너가 재현 단계, WCAG 기준, 심각도, 담당 팀 등 실행 가능한 정보를 받아야 한다. - **프로그램·제품 관리자** - 문제 유형별 현황, 반복되는 추세, 해결 진행률을 파악해 리소스와 우선순위를 결정해야 한다. - 이를 위해 피드백을 단순 티켓이 아니라 파이프라인을 따라 흐르는 데이터로 취급하고, 변화에 맞춰 확장 가능한 구조를 선택했다. ## 이벤트 기반 피드백 워크플로 - 각 단계가 GitHub Action을 실행하는 이벤트 기반 구조로 설계됐다. - 이슈가 생성되면 GitHub Models API를 통해 GitHub Copilot이 피드백을 분석한다. - 상태가 변경되면 다음 담당 팀으로 자동 인계된다. - 문제가 해결되면 최초 제출자에게 후속 안내를 보내 사용자와의 소통을 마무리한다. - 모든 Action은 수동 실행하거나 재실행할 수 있어, 자동화가 처리하지 못하는 경우 사람이 언제든 개입할 수 있다. - 전체 흐름은 다음 일곱 단계로 구성된다. - 접수(Actioning intake) - Copilot 분석 - 제출자 검토 - 접근성 팀 검토 - 링크 감사 - 사용자와의 마무리 소통 - 개선 및 프롬프트 업데이트 - 제출자 검토에서 Copilot 분석을 다시 실행하거나, 마무리 단계에서 접근성 팀 검토로 되돌아가는 식의 피드백 루프도 포함된다. - 2024년 중반에는 이 시스템을 주로 직접 구축했지만, 현재는 자연어로 GitHub Actions를 생성할 수 있는 Agentic Workflows를 이용하면 유사한 시스템을 더 빠르게 만들 수 있다. ## 다양한 채널에서의 접수와 표준화 - 접근성 피드백은 지원 티켓, 소셜 미디어, 이메일, 직접 연락 등 다양한 경로에서 들어온다. - 현재 약 90%는 GitHub 접근성 Discussion 게시판을 통해 접수된다. - 공개 게시판에서는 다른 사용자가 문제를 확인하거나 추가 맥락과 우회 방법을 제공할 수 있어, 일반 지원 티켓보다 풍부한 정보가 모이는 장점이 있다. - 모든 피드백에는 영업일 기준 5일 이내에 응답한다. - 즉시 조치할 수 없는 내용도 관련 자료나 도움을 받을 수 있는 경로를 안내해 응답이 끊기지 않도록 한다. - 내부 팀의 조치가 필요한 경우 담당자가 사용자 보고 내용, 출처, 관련 컴포넌트를 담은 전용 접근성 피드백 이슈 템플릿으로 추적 이슈를 만든다. - 이슈 템플릿은 접수 정보를 표준화해 초기 맥락이 트리아지 과정에서 사라지는 것을 방지한다. ## 운영 방식에서 얻는 시사점 - AI는 접근성 문제의 최종 판단자라기보다 반복적인 분류·요약·전달을 담당하는 보조 수단으로 사용된다. - 실제 해결 여부, 우선순위, 담당 지정에는 사람의 전문성과 판단이 계속 필요하다. - 효과적인 자동화의 전제는 AI 모델 자체가 아니라, 먼저 피드백 채널을 정리하고 입력 형식을 표준화하는 일이다. - 접근성 문제를 개별 팀의 선택적 업무가 아니라 지속적으로 측정하고 개선해야 하는 제품 운영 데이터로 다뤄야 한다. 실무적으로는 먼저 접근성 피드백을 한곳으로 모으고, 재현 단계·영향 범위·WCAG 기준·심각도·소유 팀을 포함한 템플릿을 마련하는 것이 좋다. 그 기반 위에서 AI와 워크플로 자동화를 도입해야 자동 분류가 실제 해결과 사용자 후속 안내로 이어질 수 있다.

디자인에 마우스가 필요 (새 탭에서 열림)

Figma는 마우스 없이도 디자인 작업을 수행할 수 있도록 키보드 접근성 기능을 대폭 강화했다. 이제 키보드만으로 캔버스 이동, 객체 삽입, 정밀한 선택이 가능하며, 스크린 리더가 작업 내용을 읽어줘 사용자가 현재 위치와 상태를 파악하기 쉬워졌다. 이는 키보드나 스크린 리더를 주로 사용하는 디자이너도 디자인 프로세스에 온전히 참여할 수 있도록 장벽을 낮추려는 업데이트다. ## 키보드만으로 이어지는 디자인 작업 - 기존에는 키보드만 사용할 경우 프레임 간 이동, 컴포넌트 선택, 새 요소 추가가 어려웠다. - 캔버스 상단에 갇히거나 잘못된 영역으로 확대·축소되는 등 작업 흐름이 끊기는 문제가 있었다. - 이번 업데이트는 기존 단축키에 더해 패닝, 삽입, 선택 기능을 보완해 디자인 스프린트, 공동 작업, 디자인 리뷰까지 마우스 없이 수행할 수 있게 한다. - 기능 개발 과정에서 키보드와 스크린 리더를 사용하는 디자이너 및 알파 사용자들의 피드백을 반영했다. ## 방향키 기반 캔버스 이동 - 방향키로 캔버스를 상하좌우로 이동할 수 있다. - `Shift` 키를 함께 사용하면 더 빠르게 이동하거나 스크롤할 수 있다. - 새 키보드 단축키를 통해 확대·축소를 세밀하게 조정할 수 있다. - 이동 도구와 손 도구에도 키보드로 접근할 수 있어 캔버스 탐색의 유연성이 높아졌다. ## 키보드로 객체 삽입과 배치 - 도형, 텍스트 등 대부분의 객체 유형을 키보드만으로 캔버스에 추가할 수 있다. - 프레임은 키보드 단축키와 십자선 형태의 안내 화면을 이용해 원하는 위치에 삽입할 수 있다. - `Enter` 키를 사용하면 화면 중앙에 텍스트를 배치할 수 있다. - 마우스 포인터 없이도 삽입 위치를 확인하고 객체를 생성할 수 있다. ## 키보드 기반 객체 선택 - 새로운 키보드 박스 선택 도구로 캔버스의 객체를 선택할 수 있다. - 방향키로 분홍색 커서를 이동해 객체 위에 놓은 뒤 `Enter`를 누르면 해당 객체를 선택한다. - 객체를 하나씩 선택하거나 선택 상자를 이용해 여러 객체를 동시에 선택할 수 있다. - 선택한 객체의 위치 조정 역시 키보드 중심으로 처리할 수 있다. ## 스크린 리더와 포용적인 디자인 - 사용자가 수행하는 작업을 스크린 리더가 읽어주므로 현재 상태와 위치를 파악하기 쉬워졌다. - 이번 기능은 단순히 Figma 사용성을 개선하는 것을 넘어, 더 많은 사람이 창작 과정에 참여하도록 하는 데 목적이 있다. - Figma는 색상 선택기의 대비 검사기를 통해 텍스트와 그래픽이 WCAG 기준을 충족하는지 확인할 수 있도록 지원한다. - 디자인에서 의미 있는 HTML 시맨틱 태그를 지정할 수 있어 스크린 리더를 지원하는 제품 설계에도 활용할 수 있다. - 접근성을 일회성 점검 항목이 아니라 지속적으로 개선해야 할 제품 개발 원칙으로 보고 있다. 마우스 사용이 어렵거나 키보드·스크린 리더를 선호하는 사용자는 Figma의 키보드 단축키와 스크린 리더 지원을 활성화해 작업 흐름을 점검해볼 만하다. 팀 차원에서도 이러한 기능을 활용하면 접근성을 고려한 디자인 협업 환경을 더 쉽게 구축할 수 있다.

Figma에서 디자인 시스템 워 (새 탭에서 열림)

Figma의 디자인 시스템 구축은 색상·타이포그래피·간격·문서화·개발 전달을 반복해야 해 시간이 많이 걸리지만, 최신 기능과 커뮤니티 플러그인을 조합하면 작업을 크게 단축할 수 있다. 특히 모드와 컬렉션을 안전하게 재정렬하고, 변수·스타일·컴포넌트 관리를 자동화함으로써 디자인 시스템을 개념 설계부터 코드 변환까지 효율적으로 연결하는 것이 글의 핵심이다. ## 모드와 컬렉션을 안전하게 재정렬 - 라이브러리의 모드와 컬렉션을 드래그 앤 드롭으로 재배치할 수 있다. - 삭제 후 재생성할 필요가 없어 디자인이 다른 모드와 동기화되지 않는 문제를 줄인다. - 재정렬해도 모드 ID와 연결 정보가 유지된다. - 기본 모드도 간단히 변경할 수 있다. - 자주 사용하는 컬렉션을 위로 올리거나, 관련 모드를 그룹화하거나, 제품 라인 변경에 활용할 수 있다. ## 작업 흐름을 개선하는 9가지 업데이트 - 메인 컴포넌트로 바로 이동하는 단축키가 추가됐다. - 스타일을 복제하거나 복사해 반복 작업을 줄일 수 있다. - 변수 페인트를 숨기거나 다시 표시해 작업 공간을 정리할 수 있다. - 컴포넌트 설명 UI가 개선되어 내용을 빠르게 확인할 수 있다. - 변수 모달의 헤더 전체를 드래그할 수 있다. - 변수 변경 사항이 자동 저장된다. - 컴포넌트 이름에 마우스를 올리면 툴팁으로 추가 정보를 볼 수 있다. - 편집 버튼 정렬이 개선됐다. - 스타일 창에서 긴 이름이 잘리지 않도록 텍스트 오버플로 처리가 개선됐다. ## 색상 팔레트와 색상 토큰 만들기 - **CSS color-mix()** - CSS의 `color-mix()`를 활용해 색상 팔레트와 그라디언트를 생성한다. - **Colorbox** - 전체 색상 램프를 빠르게 만든다. - **The Genome Color Tool** - WCAG 접근성 기준을 만족하는 색상 스케일을 구축한다. - 색상 시스템을 수작업으로 하나씩 조정하는 대신, 다양한 명도 단계와 조합을 빠르게 실험할 수 있다. - 접근성 기준을 초기 단계부터 반영해 후속 수정 비용을 줄일 수 있다. ## 타이포그래피와 변수 문서화 - **Peppercorn** - 디자인 시스템 전체의 타입 시스템을 설정하는 데 사용된다. - **Print Variables** - 변수 컬렉션을 스티커 시트 형태로 캔버스에 출력한다. - **Auto Documentation** - 모든 변수를 시각적인 스티커 시트로 만들어 문서화한다. - **Variables and Styles List** - 변수와 스타일 목록을 캔버스 위젯으로 생성해 팀이 한눈에 확인하도록 돕는다. - 이러한 도구는 색상, 글꼴, 크기, 간격 등 토큰의 이름과 값을 시각적으로 검토하는 데 유용하다. ## 컴포넌트 구조와 스펙 정리 - **Propstar** - 컴포넌트의 프로퍼티와 가능한 변형 조합을 시각적으로 정리한다. - **Specs** - 컴포넌트 사양을 생성해 디자인 의도와 구현 정보를 전달한다. - **Similayer** - 특정 레이어나 속성을 기준으로 요소를 필터링한다. - **Style Finder** - 여러 페이지에 흩어진 스타일을 찾아 관리할 수 있게 한다. - 컴포넌트 변형이 많아질수록 어떤 조합을 지원하는지 파악하고 중복 또는 누락을 발견하는 데 도움이 된다. ## 변수와 디자인 토큰을 코드로 연결 - **CTRL Var** - 변수를 일괄적으로 이름 변경할 수 있다. - **Export Import Variables** - Figma 안팎으로 변수를 가져오고 내보낸다. - **Handoff** - CSS 변수를 즉시 복사해 개발 전달을 단순화한다. - **Variables Converter** - Figma 변수를 코드 형식으로 변환한다. - **Shaper** - 토큰 아키텍처를 관리하고 CSS 코드를 생성한다. - 디자인 토큰을 Figma에만 고립시키지 않고 개발 환경의 변수와 연결할 수 있다. ## 디자인 시스템 구축 단계별 접근 - **기초 설계** - 색상 팔레트, 색상 램프, 타이포그래피 스케일, 변수 컬렉션을 구성한다. - **문서화** - 변수와 스타일을 스티커 시트나 목록으로 정리해 팀이 쉽게 탐색하도록 만든다. - **구현과 핸드오프** - 컴포넌트 사양을 생성하고, 변수와 토큰을 CSS 등 코드로 변환한다. - Figma의 기본 기능과 플러그인을 각 단계에 맞게 조합하면 디자인 시스템을 처음부터 코드 전달까지 일관되게 관리할 수 있다. 실무에서는 먼저 모드·컬렉션 구조와 변수 명명 규칙을 정한 뒤, 색상·타이포그래피 플러그인으로 토큰을 만들고, 문서화 및 코드 변환 도구를 선택적으로 도입하는 방식이 효과적이다.

디자인 시스템의 미래는 접근 (새 탭에서 열림)

디자인 시스템은 접근성을 제품 전반에 일관되게 적용할 수 있는 가장 강력한 기반이다. 공통 컴포넌트와 가이드에 접근성 기준을 내장하면 색상, 구조, 상호작용 등의 품질을 규모 있게 관리하고 변경 사항도 전체 제품에 전파할 수 있다. 앞으로는 WCAG 같은 표준과 AI 도구를 활용하되, 접근성을 사후 점검이 아닌 제품 개발 초기부터 우선순위로 삼아야 한다. ### 디자인 시스템과 접근성의 결합 - 전 세계 약 10억 명이 장애를 가지고 있으며, 이들의 연간 가처분소득은 약 1조 2천억 달러로 추정된다. - 접근성은 법적 의무나 체크리스트를 넘어 사용자 신뢰, 기업의 신뢰도, 성장 기회를 만드는 요소다. - 디자인 시스템에는 다음과 같은 접근성 기준을 포함할 수 있다. - 충분한 전경색·배경색 대비 - 접근성을 고려해 설계하고 테스트한 UI 컴포넌트 - 일관된 상호작용 규칙 - 구현자와 디자이너를 위한 구체적인 문서 - 공통 컴포넌트를 사용하면 한 번 수정한 접근성 개선 사항을 제품 전체의 컴포넌트 인스턴스에 확산할 수 있다. - 일관성, 문서화, 지속적인 피드백 구조가 접근성 실천을 조직 전체로 확장하는 기반이 된다. ### 접근성 확산을 돕는 디자인 시스템의 성장 - 2020년 Material Design 조사에서 기업 내부 디자인 시스템 구축은 전년 대비 22% 증가했다. - 응답자의 47%는 자신의 디자인 시스템에 접근성 가이드라인이 포함되어 있다고 답했다. - 디자인 시스템에 포함되는 대표 산출물은 다음과 같다. - 아이콘 라이브러리: 84% - UI 키트: 83% - 스타일 가이드: 75% - 컴포넌트 코드 라이브러리: 74% - WCAG 같은 표준, 접근성 도구의 발전, 법적·상업적 요구가 접근성 적용을 촉진하고 있다. - 그럼에도 2022년 기준 웹의 접근성 수준은 약 3%에 불과해, 실제 적용에는 여전히 큰 격차가 남아 있다. ### 접근성 분야의 책임 있는 AI 활용 - 디자인 시스템 팀은 AI를 활용해 접근성 문제를 더 빠르게 발견하고 개선하려 하고 있다. - 기사에서 언급하는 AI 기반 도구는 다음과 같은 작업을 자동화하는 것을 목표로 한다. - 이미지에 대체 설명 자동 생성 - 레이블이 없는 버튼에 적절한 레이블 추가 - 시맨틱 구조 도입 - 웹 접근성 문제 탐지 및 수정 - AI 도구는 접근성 검수와 반복 작업을 보조할 수 있지만, 자동화만으로 포괄적인 접근성을 보장할 수는 없다. - 생성된 설명이나 수정 결과가 실제 맥락에 적합한지 사람이 검토하고, 장애 당사자의 피드백과 표준 검사를 함께 활용해야 한다. ### 처음부터 접근 가능한 제품 만들기 - 접근성은 개발 완료 후 결함을 수정하는 단계가 아니라 디자인 시스템과 제품 설계 초기부터 포함해야 한다. - 공통 컴포넌트에 접근성 요구사항을 내장하면 개별 팀이 매번 같은 문제를 다시 해결하지 않아도 된다. - 색상, 컴포넌트 동작, 의미 구조, 문서화 등 모든 시스템 구성 요소에서 접근성을 점검해야 한다. - 접근성을 기본값으로 만들수록 제품 팀의 부담은 줄고, 전체 제품 생태계의 품질은 높아진다. ### 실용적인 적용 방향 - 디자인 토큰과 컴포넌트에 색상 대비, 키보드 탐색, 포커스 상태, 시맨틱 구조를 기본 규칙으로 포함한다. - WCAG 기준에 따라 자동 검사와 수동 테스트를 함께 운영한다. - AI는 반복적인 탐지·생성 작업에 활용하되 최종 판단은 전문가와 실제 사용자 검증을 거친다. - 접근성을 디자인 시스템의 부가 기능이 아니라 모든 컴포넌트의 필수 품질 기준으로 관리해야 한다.

다크 모드 밝히 (새 탭에서 열림)

Figma의 다크 모드는 색상만 어둡게 바꾸는 단순한 프런트엔드 작업이 아니라, 제품 전반의 UI 상태와 접근성, 향후 테마 확장성을 함께 해결해야 하는 시스템 구축 프로젝트였다. Figma는 사용자 요청에 대응하는 동시에 시각적 접근성을 높이고, 새로운 기능이 처음부터 다크 모드를 지원하도록 만드는 것을 목표로 했다. 이를 위해 전체 UI를 조사하고 여러 팀의 공통 컴포넌트를 체계적으로 refactoring하는 방식을 택했다. ## 다크 모드가 필요했던 이유 - 다크 모드는 Figma 사용자들이 가장 많이 요청한 기능 중 하나였다. - 야간 작업 시 밝은 화면으로 인한 불편을 줄일 수 있었다. - 시각 장애나 특정 시각적 질환이 있는 사용자에게 다크 모드가 더 읽기 쉬울 수 있었다. - 색상 대비는 WCAG 접근성 지침의 핵심 요소이므로, 다크 모드는 Figma의 “디자인을 모두에게 accessible하게 만든다”는 목표와도 연결됐다. - 일반적으로는 라이트 모드가 시각적 수행 능력에 유리하지만, 백내장 등 특정 질환이 있는 사람은 다크 모드에서 더 나은 성능을 보일 수 있다. ## 단순한 색상 교체가 아니었던 이유 - 처음에는 모든 밝은 색을 어두운 색으로 바꾸면 된다고 생각했지만, 실제로는 UI의 상태와 맥락을 함께 고려해야 했다. - 다크 모드 전환 시 다음 요소를 결정해야 했다. - 밝은 편집기 패널을 어둡게 바꾸고 아이콘과 텍스트를 밝게 할지 - 라이트 모드에서도 이미 어두운 툴바와 메뉴를 그대로 유지할지 - 캔버스 배경처럼 사용자가 만든 콘텐츠까지 테마에 따라 변경할지 - C++ 렌더링 엔진이 그리는 투명도 격자 등의 색상도 변경할지 - Figma 전체가 아니라 편집기 등 특정 영역만 지원할지에 대한 제품 범위 결정도 필요했다. ## 전체 UI 감사와 범위 설정 - 개발에 앞서 각 팀원이 Figma 앱의 UI 표면을 조사하고, 다크 모드로 재구성하기 어려운 부분을 파악했다. - 프로젝트 시작 당시 Figma에는 10개의 제품 엔지니어링 팀이 있었고, 각 팀이 모달, 패널, 툴바 등 주요 UI 영역을 담당했다. - 하나의 UI 요소도 여러 상태와 복잡한 예외 상황을 포함할 수 있었다. - 특정 조건에서만 나타나는 상태 - 여러 뷰와 화면 - 숨겨진 서브모달과 드롭다운 - 따라서 표면적으로 보이는 화면뿐 아니라 모든 상태와 엣지 케이스까지 다크 모드 범위에 포함해야 했다. ## 확장 가능한 테마 시스템의 목표 - 목표는 현재 다크 모드만 구현하는 것이 아니었다. - 두 가지 장기 목표를 세웠다. - 개발자가 새로운 기능을 다크 모드 지원과 함께 바로 만들 수 있도록 하기 - 향후 Figma와 FigJam에 새로운 테마를 쉽게 추가할 수 있도록 하기 - 공통 UI 컴포넌트는 다크 모드를 지원해야 하지만, 다크 모드가 적용되지 않는 화면에서는 기존 동작과 외관을 유지해야 했다. - 구현 과정에서 기존 기능을 깨뜨리지 않는 회귀 방지(regression-proof) 구조가 중요했다. - 새로운 엔지니어의 온보딩과 향후 예측하지 못한 요구사항 대응까지 고려해, 적용과 유지보수가 쉬운 방식이 필요했다. ## 프로젝트 규모가 만든 엔지니어링 과제 - Figma의 UI가 여러 팀에 분산되어 있어 소수의 엔지니어만으로 전체를 처리하기 어려웠다. - 각 팀이 소유한 컴포넌트와 화면을 공통 원칙에 맞게 바꿔야 했다. - 단순히 색상 값을 교체하는 것이 아니라, 컴포넌트가 어떤 표면과 상태에서 사용되는지까지 체계적으로 분리해야 했다. - 이 경험은 개별 기능을 추가하는 방식보다, 제품 전체에서 재사용할 수 있는 디자인·엔지니어링 시스템을 구축하는 접근이 필요하다는 점을 보여준다. 다크 모드처럼 겉보기에는 간단한 기능도 실제로는 UI 상태, 접근성, 팀 간 소유권, 공통 컴포넌트, 향후 확장성을 함께 설계해야 한다. 유사한 기능을 구현할 때는 특정 화면의 색상부터 바꾸기보다 전체 범위를 먼저 감사하고, 테마 토큰과 공통 컴포넌트를 중심으로 회귀를 방지할 수 있는 구조를 마련하는 것이 바람직하다.

접근성 향상을 위한 (새 탭에서 열림)

Figma는 디자인을 모든 사람이 참여할 수 있게 만드는 것을 목표로 하며, 이를 위해 시각장애·저시력 사용자를 위한 프로토타입 스크린 리더 베타를 발표했다. Figma 디자인은 일반 HTML이 아니어서 기존 스크린 리더가 내용을 읽기 어려웠지만, 프로토타입을 스크린 리더 전용 HTML로 변환하는 방식으로 문제를 해결했다. 이는 중요한 진전이지만, ARIA 역할·탭 순서·대체 텍스트 설정 등 접근성 지원을 확대하기 위한 추가 과제가 남아 있다. ## 프로토타입 스크린 리더 베타 - 기존에는 시각장애 사용자가 Figma 프로토타입을 열어도 스크린 리더에 “빈 캔버스” 레이블만 표시됐다. - 텍스트, 이미지, 버튼 등 프로토타입의 핵심 콘텐츠를 스크린 리더가 인식하지 못하는 문제가 있었다. - 베타 기능은 다음을 지원한다. - 텍스트 노트 읽기 - 이미지 대체 텍스트(alt text) 읽기 - 버튼과 키보드 동작을 통한 프로토타입 탐색 - Tab 키 등을 이용한 키보드 내비게이션 - 2022년 8월 업데이트를 통해 이 기능은 모든 사용자가 이용할 수 있는 오픈 베타로 전환됐다. ## Figma 디자인을 HTML로 변환하는 방식 - Figma는 웹 기반 애플리케이션이지만 디자인 결과물이 일반적인 HTML 요소로 그려지지 않는다. - 따라서 대부분의 스크린 리더가 Figma 캔버스의 텍스트와 인터페이스 구조를 직접 해석할 수 없었다. - Figma는 프로토타입을 스크린 리더 전용 HTML 표현으로 변환해 보조공학 기술에 제공하는 구조를 구현했다. - 이 변환 계층을 통해 스크린 리더가 화면에 표시된 콘텐츠와 상호작용 요소를 읽고 탐색할 수 있게 됐다. ## 함께 진행된 접근성 개선 - 다크 모드와 색상 대비 개선을 통해 다양한 시각적 요구를 지원했다. - WCAG 3.0 초안 기준에 부합하도록 색상 대비 준수를 강화했다. - Figma 데스크톱 앱과 Pro·Org·Enterprise 요금제에서 오디오 채팅 실시간 자막 기능을 오픈 베타로 제공했다. - Deque의 플랫폼 전반 접근성 평가를 받아 다음과 같은 개선 영역을 확인했다. - 키보드만으로 기능을 사용할 수 있도록 개선 - ARIA 레이블을 모범 사례에 맞게 적용 - Adee, Deque, Stark 등의 플러그인과 커뮤니티 파일을 통해 색상 대비 검사 등 접근성 도구 생태계도 확대되고 있다. ## 개발 프로세스에 접근성을 내재화 - Figma는 팀이 접근성을 고려하도록 권장하는 수준을 넘어, 제품을 설계·개발할 때 접근성을 필수적으로 반영하도록 하고 있다. - 키보드 전용 사용자와 스크린 리더 사용자를 지원하는 재사용 가능한 UI 컴포넌트를 제작하고 있다. - 새 기능과 코드가 접근성 모범 사례를 따르는지 확인할 수 있는 내부 도구도 개발 중이다. - 알파·베타 테스트에 접근성 사용자를 조기에 참여시켜 실제 사용 경험을 설계 과정에 반영하고 있다. ## 남은 과제 - 사용자가 디자인 요소에 직접 대체 텍스트를 지정할 수 있도록 해야 한다. - 컴포넌트에 ARIA 역할을 설정하는 기능이 필요하다. - 프로토타입 요소의 키보드 탭 순서를 지정할 수 있어야 한다. - 스크린 리더 지원은 시작 단계이며, 커뮤니티와 지속적으로 테스트하고 피드백을 받아 개선해야 한다. 실용적으로는 Figma에서 프로토타입을 제작할 때 이미지에 의미 있는 대체 텍스트를 제공하고, 키보드만으로 탐색 가능한 흐름과 충분한 색상 대비를 함께 검토하는 것이 권장된다.

유용한 플러그인으로 디자인 (새 탭에서 열림)

접근성을 디자인 초기부터 반영하지 않으면 시각·운동 능력 등에 제약이 있는 많은 사용자가 제품에서 배제될 수 있다. 이 글은 Figma에서 색상 대비와 키보드 포커스 순서를 점검할 수 있는 네 가지 플러그인을 소개하며, WCAG 기준을 디자인·개발 과정에 적용할 것을 권한다. 접근성 검사를 별도 단계가 아니라 디자인 워크플로의 일부로 만드는 것이 핵심이다. ## 색상 대비와 WCAG 기준 - 텍스트와 배경 사이의 충분한 대비는 다양한 시각 능력을 가진 사용자가 콘텐츠를 읽는 데 필수적이다. - WCAG는 색상 대비를 AA 또는 AAA 등급으로 평가하는 기준을 제공한다. - 소개된 플러그인들은 선택한 두 객체의 색상을 분석해 대비 비율과 기준 충족 여부를 확인한다. - 단순히 색상을 고르는 데 그치지 않고, 실제 텍스트 크기와 배경 조합을 고려해 가독성을 검증할 수 있다. ## Able: 대비 검사와 색각 이상 시뮬레이션 - 선택한 두 객체의 색상 대비를 분석한다. - 선택 영역이 바뀌면 결과도 자동으로 업데이트된다. - 텍스트와 배경 조합을 미리 볼 수 있는 프리뷰를 제공한다. - 다양한 색각 이상 유형에서 색상이 어떻게 보이는지 시뮬레이션할 수 있다. - 텍스트 색상과 배경 색상을 서로 바꿔 비교할 수 있다. - 각 색각 이상 유형별 영향을 받는 인구 비율도 확인할 수 있다. ## Contrast Checker: 대비 비율과 등급 확인 - 선택한 두 객체의 정확한 색상 대비 비율을 표시한다. - 선택된 레이어 중 텍스트 레이어가 있는지에 따라 상황에 맞는 미리보기를 제공한다. - AA/AA+와 AAA/AAA+ 등 여러 접근성 등급별 충족 여부를 보여준다. - 글꼴 크기가 18pt를 초과하는 경우에 적용되는 대비 기준도 별도로 확인할 수 있다. - Sketch 사용자에게 익숙한 Stark의 Figma용 대비 검사 도구다. ## Color Blind: 캔버스에서 보는 색각 이상 결과 - 선택한 디자인 요소가 여러 색각 이상 유형에서 어떻게 보이는지 확인한다. - 단순한 미리보기 대신, 선택한 요소를 복제해 캔버스에 직접 결과물을 생성한다. - 각 복제본은 해당 시각 유형을 나타내는 이름의 그룹으로 정리된다. - 완성된 화면 전체의 색상 체계와 정보 전달 방식이 색각 이상 사용자에게도 충분히 구분되는지 검토하는 데 유용하다. ## Focus Orderer: 키보드 탐색 순서 설계 - 브라우저가 키보드 포커스를 이동시킬 요소와 순서를 디자인에 표시한다. - 요소를 선택해 포커스 지점을 만들고, 캔버스에 순번을 표시할 수 있다. - 플러그인 UI에서 항목을 드래그하면 포커스 순서가 변경되고 캔버스의 번호도 자동으로 갱신된다. - 실제로 모든 요소를 탭 키로 순회하며 포커스 흐름을 테스트할 수 있다. - 디자인 단계에서 키보드 내비게이션을 고려하게 해, 구현 과정에서 접근성 요구사항이 누락되는 것을 줄인다. ## 접근성을 워크플로에 포함하기 - 색상 대비 검사는 시각적 가독성을, 포커스 순서 검사는 키보드 사용성을 다룬다. - 두 영역 모두 개발 완료 후 수정하기보다 디자인 단계에서 문제를 발견하는 편이 효율적이다. - WCAG 문서를 기준으로 플러그인 결과를 해석하고, 실제 사용자 환경에서의 사용성도 함께 검증해야 한다. - Figma 플러그인 API와 개발자 커뮤니티를 활용하면 팀에 맞는 접근성 검사 도구를 직접 만들 수도 있다. 이 플러그인들을 디자인 시스템과 리뷰 과정에 포함하면 접근성을 일회성 점검이 아니라 지속적인 품질 기준으로 운영할 수 있다. 특히 텍스트·배경 대비, 색각 이상 시뮬레이션, 키보드 포커스 순서를 모든 주요 화면에서 반복적으로 확인하는 것이 실용적인 접근이다.