AI가 코드를 쓰는 것은 이제 놀랍지 않다. 하지만 AI가 디자인 시스템을 스캔하고, 브랜드 톤을 학습하고, 인터랙티브 프로토타입을 대화 한 번으로 뽑아내기 시작했다면? 그건 '코딩 도구'의 이야기가 아니다. Anthropic이 Claude Design을 출시하면서 그 경계가 실제로 무너지기 시작했다.
설계가 대화가 되는 순간
Claude Design은 Anthropic Labs에서 나온 첫 번째 퍼블릭 제품이다. Claude Opus 4.7 기반으로 동작하며, 텍스트 프롬프트 하나로 인터랙티브 프로토타입, 피치덱, 마케팅 소재, 심지어 3D·쉐이더·음성까지 포함한 코드 기반 프로토타입을 생성한다. Figma가 캔버스 위에서 손으로 끄는 방식이었다면, Claude Design은 말로 지시하고 AI가 편집한다. 편집 주체가 뒤집힌 것이다.
특히 주목할 지점은 온보딩 방식이다. 첫 세션에서 팀의 코드베이스와 기존 디자인 파일을 스캔해 팔레트·타이포그래피·컴포넌트를 자동으로 흡수하고, 이후 모든 프로젝트에 그 디자인 시스템을 자동 적용한다. Brilliant(교육 플랫폼)는 복잡한 인터랙티브 페이지 제작에 필요했던 20회 이상의 프롬프트를 2회로 줄였다고 밝혔다. 일주일짜리 디자인-개발 사이클이 회의 중 한 번의 대화로 수렴되는 것이다.
통제권의 역설
그런데 여기서 불편한 질문이 생긴다. AI가 설계 단계부터 개입한다면, 개발자는 지금 AI가 무엇을 보고 어떤 판단을 내리는지 실제로 알고 있는가?
이 문제를 정면으로 겨냥한 것이 국내 고등학생 팀(부산소프트웨어마이스터고 소프트웨어개발과)이 오픈소스로 공개한 Contexty다. 이 도구는 AI 코딩 에이전트가 현재 참조하고 있는 컨텍스트를 VSCode 패널에서 트리 형태로 실시간 시각화한다. 어떤 파일, 어떤 코드 라인이 AI의 시야에 들어와 있는지 보여주고, 불필요한 부분은 즉시 제거하거나 필요한 코드 영역을 직접 추가할 수 있다.
Contexty가 제안하는 핵심 개념은 HSCMM(Human-supervised Context Management)이다. AI가 컨텍스트를 알아서 관리하도록 두는 것이 아니라, 개발자가 직접 그 경계를 설정하고 감시하자는 것이다. 여기에 더해 AASM(Active Agent-supervised Architecture)은 프롬프트 단계에서 아키텍처 안티패턴—God Object 생성, 전역 가변 상태 남용, 로직 파일 집중—을 AI가 코드를 생성하기 전에 감지해 경고한다. DCP(Dynamic Context Pruning)는 컨텍스트 한계 도달 시 무엇을 압축했고 토큰을 얼마나 절약했는지를 투명하게 드러낸다.
두 제품이 함께 가리키는 것
Claude Design과 Contexty는 언뜻 전혀 다른 레이어에 있는 것처럼 보인다. 하나는 디자인-개발 워크플로우를 AI 중심으로 재편하고, 다른 하나는 AI 에이전트의 작동 컨텍스트를 개발자가 직접 들여다볼 수 있게 한다. 그런데 이 두 방향은 사실 같은 문제의 양면이다.
AI가 설계와 구현 사이의 경계를 지울수록, 개발자는 더욱 명확하게 "AI가 지금 무엇을 근거로 이 결정을 내렸는가"를 알아야 한다. Claude Design의 handoff bundle이 디자인 의도를 Claude Code로 넘기는 파이프라인을 만든다면, 그 파이프라인 안에서 AI가 보는 컨텍스트를 개발자가 감시하고 개입할 수 있는 레이어가 반드시 필요하다. Addy Osmani가 지적한 것처럼, AI가 빠르게 코드를 만들어낼수록 아키텍처 품질과 컨텍스트 관리는 오히려 사람이 더 적극적으로 챙겨야 하는 영역이 된다.
개발자가 설계해야 할 것
이제 프론트엔드 개발자의 역할은 단순히 AI가 생성한 코드를 검수하는 것이 아니다. AI가 어떤 컨텍스트를 가지고 설계 판단을 내리는지를 설계하는 일 자체가 핵심 역량이 됐다. Claude Design처럼 AI가 설계 주체가 되는 도구를 쓸수록, Contexty처럼 그 AI의 시야를 명시적으로 통제하는 레이어도 함께 갖춰야 한다.
실용적으로 정리하면 세 가지다. 첫째, AI에게 디자인 시스템을 학습시킬 때 어떤 파일과 컴포넌트를 포함시킬지 명시적으로 선별하라. AI가 스캔하는 범위가 곧 결과물의 품질을 결정한다. 둘째, AI가 코드를 생성하기 전에 아키텍처 의도를 명확히 주입하라. 프롬프트 단계에서 안티패턴을 차단하는 것이 사후 리팩터링보다 훨씬 저렴하다. 셋째, AI의 컨텍스트를 블랙박스로 두지 마라. 무엇을 참조하고 무엇을 압축했는지 투명하게 볼 수 있는 도구를 워크플로우에 통합하라.
전망: 통제권 설계가 경쟁력이 된다
AI 도구의 성능 격차는 빠르게 좁혀지고 있다. 하지만 AI가 생성한 결과물의 품질을 결정하는 컨텍스트 설계 능력은 쉽게 따라잡히지 않는다. Claude Design이 디자인-개발 파이프라인을 통합하는 속도가 빨라질수록, 그 파이프라인 안에서 개발자가 어떤 레이어를 직접 통제하는지가 팀의 실질적인 역량 차이를 만들 것이다. AI가 더 많은 것을 자동화할수록, 개발자가 명시적으로 설계해야 하는 통제 지점은 오히려 늘어난다.