칸 아카데미가 최근 자사의 디자인 시스템인 원더 블록을 전면 개편하며, 경직되고 제한적이었던 기존의 컬러 팔레트를 정교한 시맨틱 아키텍처로 전환했다. 이번 개편은 전 세계 교육구의 다양한 학습자들을 지원하는 동시에 엄격한 웹 접근성 표준을 준수해야 한다는 필요성에서 비롯되었다. 특히 색상을 구체적인 외형이 아닌 기능적 역할에 따라 정의하는 Semantic Tokens로 전환함으로써, 다양한 테마와 인터페이스 요구 사항에 유연하게 대응할 수 있는 프레임워크를 구축했다.

이 시스템의 핵심인 인텐시티 스케일은 색상을 Subtle(미묘함), Default(기본), Strong(강함)의 세 단계로 분류하는 계층적 접근 방식을 취한다. 이러한 체계는 배경이나 맥락에 관계없이 시각적 무게감과 대비를 일정하게 유지해 준다. 실제로 텍스트의 최소 대비율을 4.5:1로 유지하기 위해 접근성 표준에 따른 엄격한 스트레스 테스트를 거쳤다. 이러한 수학적 접근 방식은 시각 장애가 있는 학생이나 교실 내 저화질 디스플레이를 사용하는 학습자들에게도 최적의 가독성을 보장하는 역할을 한다.

디자인과 인공지능의 주목할 만한 결합 사례로, 엔지니어링 팀은 Claude를 활용해 커스텀 생성 도구를 개발했다. 이 도구는 새로운 스키마를 기반으로 기본 팔레트와 Semantic Tokens 생성을 자동화하며, 이를 통해 신속한 반복 작업과 코드 내보내기가 가능해졌다. 칸 아카데미는 HSL Space의 복잡한 간격 계산에 AI를 활용함으로써 시각적 디자인과 실제 소프트웨어 엔지니어링 사이의 가교를 효율화했으며, 플랫폼 성장에 맞춰 시스템을 안정적으로 확장할 수 있는 기반을 마련했다.

칸 아카데미가 최근 자사의 디자인 시스템인 원더 블록을 전면 개편하며, 경직되고 제한적이었던 기존의 컬러 팔레트를 정교한 시맨틱 아키텍처로 전환했다. 이번 개편은 전 세계 교육구의 다양한 학습자들을 지원하는 동시에 엄격한 웹 접근성 표준을 준수해야 한다는 필요성에서 비롯되었다. 특히 색상을 구체적인 외형이 아닌 기능적 역할에 따라 정의하는 Semantic Tokens로 전환함으로써, 다양한 테마와 인터페이스 요구 사항에 유연하게 대응할 수 있는 프레임워크를 구축했다.

이 시스템의 핵심인 인텐시티 스케일은 색상을 Subtle(미묘함), Default(기본), Strong(강함)의 세 단계로 분류하는 계층적 접근 방식을 취한다. 이러한 체계는 배경이나 맥락에 관계없이 시각적 무게감과 대비를 일정하게 유지해 준다. 실제로 텍스트의 최소 대비율을 4.5:1로 유지하기 위해 접근성 표준에 따른 엄격한 스트레스 테스트를 거쳤다. 이러한 수학적 접근 방식은 시각 장애가 있는 학생이나 교실 내 저화질 디스플레이를 사용하는 학습자들에게도 최적의 가독성을 보장하는 역할을 한다.

디자인과 인공지능의 주목할 만한 결합 사례로, 엔지니어링 팀은 Claude를 활용해 커스텀 생성 도구를 개발했다. 이 도구는 새로운 스키마를 기반으로 기본 팔레트와 Semantic Tokens 생성을 자동화하며, 이를 통해 신속한 반복 작업과 코드 내보내기가 가능해졌다. 칸 아카데미는 HSL Space의 복잡한 간격 계산에 AI를 활용함으로써 시각적 디자인과 실제 소프트웨어 엔지니어링 사이의 가교를 효율화했으며, 플랫폼 성장에 맞춰 시스템을 안정적으로 확장할 수 있는 기반을 마련했다.