2026년 한국 스타트업이 AI 코딩 시대 접근성을 지키는

lobsters에 "Don't Roll Your Own…" 글이 108점으로 올라왔어요. 핵심은 한 줄로 요약돼요. 웹 개발자가 자꾸 브라우저 기본 기능—스크롤·링크·체크박스·셀렉트박스—을 자체 구현하는데, 거의 항상 느리고, 접근성을 깨뜨리고, 비밀번호 매니저를 무력화시킨다는 거예요. 2026년 5월, 이게 단순한 옛날 잔소리가 아닌 이유가 있어요.

AI 코딩 에이전트가 화면 한 컴포넌트를 만들 때 가장 흔하게 출력하는 패턴이 이거예요. div + onClick, 자체 스크롤 리스너, 커스텀 select, 직접 만든 토글, 가짜 라디오 버튼. 5월 9일 GPT-image-2 목업을 Codex가 그대로 코드로 만든 사례, 5월 18일 줄리아 에반스 Tailwind 탈출 사례에서 공통적으로 드러난 문제예요.

왜 한국 스타트업이 이번 주에 이걸 살펴봐야 할까요?

한국에는 다른 나라보다 강한 변수가 두 가지 있어요. 첫째, 장애인차별금지법과 공공·금융 도메인의 웹 접근성(WA) 인증이 의무예요. 둘째, 카카오·네이버·삼성패스 같은 비밀번호/패스키 매니저가 표준 form 컨트롤만 인식해요. AI가 만든 div 셀렉트는 자동 입력이 안 돼서 결제 페이지에서 사용자가 그냥 이탈해요.

포텐랩이 4월~5월에 인수한 12개 프로젝트를 axe-core로 빠르게 스캔해 보니, 평균 critical 접근성 위반이 23개, serious가 47개였어요. 80%가 "div로 만든 버튼/링크"였고요. 그중 한 곳은 회원가입 폼 컨버전이 6주 동안 -18% 떨어졌는데, 원인은 커스텀 select가 카카오톡 자동 입력을 막아서였어요.

4가지 디자인 락: 이번 분기 안에 적용할 수 있는 것들

1. 락 ①: 네이티브 우선 정책을 ESLint와 Storybook 카탈로그로 강제하세요

구두 약속만으로는 안 돼요. 코드와 디자인 양쪽에 강제 게이트가 필요해요.

ESLint plugin-jsx-a11y: div + onClick 패턴, 빈 alt, 없는 label, 잘못된 role을 PR에서 차단
Storybook 컴포넌트 카탈로그: select, checkbox, radio, button, link, dialog, tabs 7종은 네이티브 우선 변형이 1순위로 노출
자체 구현 컴포넌트 PR 차단 룰: button을 새로 만들겠다면 ADR 1페이지 제출 + 디자이너 1명 + 시니어 1명 사인오프 의무

처음 한 달은 야단법석이지만, 두 달째부터 PR 리뷰 시간이 줄어요. 똑같은 자체 구현 토론을 매주 안 해도 되거든요.

2. 락 ②: 시각 회귀와 접근성 회귀를 한 파이프라인에 묶으세요

5월 9일 글에서 다룬 Playwright + Percy/Chromatic 시각 회귀에 axe-core 자동 검사를 한 단계만 더 얹으세요.

Playwright 시나리오 30개 × axe-core 자동 스캔 (PR마다)
Tab 키 순서 자동 테스트 (focusable 요소 인덱스 스냅샷)
Color contrast WCAG 2.2 AA 4.5:1 PR 차단
"prefers-reduced-motion" 사용자 대응 자동 확인

AI 코딩 에이전트는 비주얼은 잘 만들지만 키보드 순서, 포커스 표시, 콘트라스트는 자주 빼먹어요. 회귀를 코드로 잡으면 디자이너가 매번 손으로 검수하는 시간이 30~40% 줄어요.

3. 락 ③: 디자인 시스템에 '허용 패턴' 카탈로그를 명시하세요

"자체 구현 금지"라고 하면 결국 LLM이 어딘가에서 또 만들어요. 그래서 반대로 가야 해요. "이 케이스에는 이 컴포넌트를 써라"가 명시된 허용 카탈로그를 디자인 시스템 문서로 박아두세요.

네이티브 우선 7종: select → <select>, radio → <input type="radio">, checkbox → <input type="checkbox">, button → <button>, link → <a>, dialog → <dialog>, tabs → role="tablist" + WAI-ARIA
라이브러리 우선 3종: 복잡한 콤보박스 → Radix UI Combobox, 드래그앤드롭 → dnd-kit, 데이트픽커 → react-aria-components
자체 구현 허용 시 ADR 4줄 필수: 컨텍스트(왜 네이티브 안 됨)·결정·대안 2개·접근성 보강 방법

이 카탈로그를 .claude/skills 또는 AGENTS.md에 그대로 붙여두면 AI 코딩 에이전트도 따라가요. AI 시대 디자인 시스템은 "AI가 읽을 수 있는 형태"여야 효과가 나요. AI 기능을 깊게 끼워야 하는 프로젝트라면 트리숲(TreeSoop)도 좋은 선택이에요.

4. 락 ④: 외주 RFP에 3줄을 박으세요

외주 계약에 다음 3줄을 추가하세요.

"산출물은 WCAG 2.2 AA + 한국형 KS X 6201 통과를 최소 기준으로 한다. axe-core critical 0건 + tab navigation 100%가 잔금 조건이다."
"자체 구현 컴포넌트(select/dialog/tabs/dropdown 등)는 단가 +30%, 사고 시 1차 책임은 외주사가 진다. 라이선스가 있는 라이브러리(Radix/react-aria) 사용은 기본 단가 안에 포함한다."
"인계 시 Storybook + axe 스냅샷 + 접근성 트리 JSON을 함께 제출한다. 인계 후 30일은 critical 위반 무상 hot-patch 한다."

실패 사례 3가지: 우리 회사도 겪을 수 있는 시나리오

사례 1: 커스텀 select가 비밀번호 매니저를 무시해서 결제 컨버전 -18%. 한 D2C 스타트업이 디자인 통일 차원에서 모든 select를 커스텀으로 바꿨는데, 카카오 자동 채움이 동작 안 해서 주소·전화번호 입력에서 사용자가 이탈했어요. 복원에 몇 주가 걸렸고, 그동안의 이탈은 되돌릴 수 없었어요.

사례 2: 무한 스크롤이 검색엔진에 안 잡혀서 organic 트래픽 -40%. 콘텐츠 사이트가 페이지네이션을 직접 만든 무한 스크롤로 바꿨는데, Googlebot이 첫 화면 이후 콘텐츠를 못 봤어요. 3개월 만에 복구.

사례 3: div 버튼이 스크린리더에 안 잡혀서 장차법 시정 권고. 공공 부문 외주 프로젝트가 인수 후 한국정보화진흥원 점검에서 시정 권고를 받았어요. 재작업 비용 800만원 + 3주 일정 지연.

30분 4점검 체크리스트

1) 메인 화면 한 페이지를 axe-core로 스캔해 보세요. critical이 5개 넘으면 빨간불이에요.
2) Tab 키만으로 회원가입 → 결제까지 완주할 수 있는지 테스트하세요. 한 번이라도 막히면 키보드 함정이에요.
3) 디자인 시스템 문서에 "이 케이스에는 이 컴포넌트" 표가 있는지 보세요. 없으면 이번 주 안에 7종이라도 만드세요.
4) 외주 RFP 템플릿에 위 락 ④의 3줄을 복사해 넣으세요.

마무리: AI 코딩 시대일수록 네이티브로 돌아가야 하는 이유

AI는 동작은 만들지만 책임은 못 져요. 자체 구현 컴포넌트의 사고 비용을 6개월 단위로 계산하면, 매번 네이티브 우선을 강제하는 30분 락이 압도적으로 싸요. "디자인 통일을 위해서"라는 명분이 들리면 한 번 더 생각해 보세요. 그 통일이 비밀번호 매니저, 스크린리더, 검색엔진까지 통일을 깨뜨리는 비용을 동반하는지.

포텐랩은 인수 프로젝트에서 네이티브 우선 + Storybook + axe 자동화 + ADR 4줄을 표준으로 운영해 왔어요. WA 인증을 한 번도 놓친 적 없고, 잔금 조건에 접근성 메트릭을 박은 사례가 12건 있어요. AI 코딩 시대에 맞는 디자인 시스템을 다시 짜야 한다면 포텐랩 상담으로 한 번 얘기해 보세요.