react

디자인 시스템 다시 생각해보기 (새 탭에서 열림)

디자인 시스템은 성장에 따라 경직되기 마련이며, 시스템이 제품 팀의 변화하는 요구사항을 제때 수용하지 못할 경우 팀은 시스템을 우회하거나 파편화된 코드를 생성하게 됩니다. 토스의 디자인 시스템(TDS)은 디자인 시스템을 통제 수단이 아닌 '하나의 제품'으로 정의하고, 수요자의 니즈에 따라 유연하게 대응할 수 있는 설계 구조를 지향합니다. 이를 위해 단순함과 유연함을 동시에 잡을 수 있는 하이브리드 API 전략을 도입하여 일관성과 생산성을 모두 확보하는 해결책을 제시합니다. ### 시스템의 경직성과 파편화 문제 * 조직이 커지고 제품이 다양해지면 기존 시스템의 제약 내에서 해결할 수 없는 UI 요구사항이 빈번하게 발생합니다. * 제품 팀은 빠른 해결을 위해 피그마 컴포넌트를 해제(detach)하거나 라이브러리 코드를 복제(fork)하여 로컬에서 수정해 사용하게 됩니다. * 이러한 우회 방식은 시스템 업데이트와의 연결을 끊어버려 UI 불일치를 초래하고, 장기적으로 디자인 시스템의 핵심 가치를 무너뜨립니다. * 결국 디자인 시스템이 팀의 속도를 늦추는 장애물이 되지 않으려면, 강력한 규칙보다 '우회할 이유를 줄이는 유연한 설계'가 필요합니다. ### 확장성을 고려한 컴포넌트 API 패턴 비교 * **Flat 패턴**: 내부 구조를 숨기고 모든 변형을 props로 처리하는 방식입니다. 사용이 직관적이고 간결하지만, 예외적인 요구사항이 늘어날수록 props가 기하급수적으로 증가하여 유지보수가 어려워집니다. * **Compound 패턴**: 하위 컴포넌트(Header, Body, Footer 등)를 제공하여 사용자가 직접 조합하는 방식입니다. 시스템이 예측하지 못한 레이아웃도 유연하게 구현할 수 있으나, 코드량이 늘어나고 구조에 대한 학습 비용이 발생한다는 단점이 있습니다. * 두 패턴은 상충하는 장단점을 가지고 있으므로, 단순히 하나의 패턴을 강요하는 것은 사용자의 이탈을 막기에 부족합니다. ### TDS의 하이브리드 전략과 Primitive 레이어 * TDS는 단순하고 빈번한 케이스를 위한 **Flat API**와 복잡한 커스텀을 위한 **Compound API**를 동시에 제공합니다. * 사용자는 별도의 커스텀이 필요 없을 때는 간결한 Flat 형식을 선택하고, 세밀한 제어가 필요할 때는 Compound 형식을 선택하여 시스템 내부에서 문제를 해결할 수 있습니다. * 디자인 시스템 팀은 관리 효율을 위해 **Primitive(기초 단위)** 레이어를 먼저 구축합니다. * 내부적으로는 동일한 Primitive 컴포넌트를 공유하면서 외부로 드러나는 API만 두 가지 형태로 노출함으로써, 유지보수 부담을 최소화하면서도 사용자 경험을 극대화합니다. 디자인 시스템은 팀을 가두는 울타리가 아니라 안전하게 안내하는 가드레일이 되어야 합니다. 중앙에서 모든 것을 통제하려 하기보다, 규칙에서 벗어난 예외 상황까지 시스템 안에서 지원할 수 있는 유연한 설계를 갖출 때 진정한 일관성을 유지할 수 있습니다.

세금 환급 자동화 : AI-driven UI 테스트 자동화 일지 (새 탭에서 열림)

토스인컴의 복잡한 세금 환급 서비스 QA를 위해 1명의 매니저가 AI를 팀원으로 활용하여 4~5명 규모의 자동화 성과를 낸 과정을 다룹니다. AI 에이전트에게 코드 작성과 설계를 맡기고 사람은 문제 정의와 검증에 집중함으로써, 5개월 만에 35개의 고난도 E2E 테스트 시나리오를 성공적으로 구축하고 운영화했습니다. 이 실험은 기술적 난도가 높은 환경에서도 AI와의 협업을 통해 자동화 효율을 극대화할 수 있음을 입증했습니다. **AI 자동화 도입 배경과 도구 구성** * 복잡한 환급 플로우(15~20단계)와 빈번한 UI/정책 변경, 외부 연동 시스템의 불안정성 때문에 전통적인 수동 자동화 방식으로는 대응이 불가능했습니다. * 메인 개발자인 Claude Sonnet 4.5를 비롯해 Cursor(IDE 페어 프로그래밍), Codex(코드 분석) 등 각기 다른 강점을 가진 AI 도구들을 조합하여 사용했습니다. * AI를 SDET 에이전트(설계), 문서화 전문가(기록), Git 마스터(형상 관리)라는 세 가지 페르소나로 분리하여 역할 분담을 명확히 했습니다. **기술적 문제 해결과 아키텍처 고도화** * **Page Object Model(POM) 도입:** 중복 셀렉터 문제를 해결하고 유지보수성을 높이기 위해 AI와 협업하여 모든 페이지 요소를 객체화하는 POM 구조를 설계했습니다. * **React 타이밍 이슈 해결:** 요소가 화면에는 보이지만 이벤트 핸들러가 바인딩되지 않아 발생하는 클릭 실패를 해결하기 위해, UI 안정화와 상호작용 준비 상태를 분리해 감지하는 'Interaction Readiness' 전략을 구현했습니다. * **Fallback 클릭 로직:** 표준 클릭 실패 시 키보드 엔터 입력, 자바스크립트 직접 클릭 순으로 시도하는 안전한 클릭 함수를 만들어 테스트의 견고함을 높였습니다. * **동적 약관 처리:** 서비스별로 상이하고 복잡한 약관 동의 플로우를 AI가 자동으로 감지하고 처리하도록 설계하여, 약관이 변경되어도 테스트가 중단되지 않는 구조를 만들었습니다. **운영 효율화를 위한 협업 시스템 구축** * **문서화 및 일지 자동 생성:** 매일 커밋 기록을 기반으로 AI가 회고 일지와 가이드 문서를 작성하게 하여, 수십 분이 걸리던 기록 업무를 1~2분 내외의 검토 수준으로 단축했습니다. * **메신저 기반 리포팅 루프:** 테스트 결과, 실패 지점 스크린샷, 오류 로그(EventID 등)를 사내 메신저에 자동으로 연동하여 개발팀과의 빠른 논의가 가능하도록 환경을 조성했습니다. * **테스트 격리 및 리팩토링:** 수천 줄의 단일 파일을 분리하고 테스트 데이터(userNo) 충돌 방지 로직을 도입하여 자동화 품질을 관리 가능한 수준으로 끌어올렸습니다. 단순히 AI에게 코드를 짜게 하는 수준을 넘어, 아키텍처 설계와 운영 프로세스 전반을 AI와 함께 고민하는 'AI-First' 접근 방식은 리소스가 제한된 환경에서 QA 품질을 혁신적으로 높일 수 있는 실질적인 해법이 됩니다. 6개월간의 여정은 AI를 도구가 아닌 실제 팀원으로 대우할 때 자동화의 본질인 '안정적인 반복 실행'을 달성할 수 있음을 보여줍니다.

FE News 25년 12월 소식을 전해드립니다! (새 탭에서 열림)

2025년 12월 FE News는 LLM의 영향력 확대와 웹 표준 기술의 진화로 인해 급변하는 프런트엔드 생태계의 핵심 흐름을 짚어줍니다. React가 LLM 학습 데이터와의 피드백 루프를 통해 독점적 플랫폼으로 굳어지는 현상과 함께, 브라우저 표준 API의 발전이 프레임워크의 의존도를 낮추는 상반된 양상을 동시에 조명합니다. 또한, Wasm의 본질과 Vercel의 언어적 비전 등 기술적 깊이를 더하는 소식들을 다루고 있습니다. ### WebAssembly에 대한 오해와 진실 * Wasm은 이름과 달리 웹 전용 기술도, 어셈블리 언어도 아닙니다. * 실체는 가상 머신에서 실행되는 바이트코드이며, 성격상 JVM이나 .NET 바이트코드와 유사한 범용 실행 환경을 지향합니다. * 'WebAssembly'라는 명칭은 프로젝트 초기 펀딩을 위해 전략적으로 채택된 네이밍일 뿐입니다. ### LLM 피드백 루프와 React의 독주 * LLM 학습 데이터와 개발 도구(Replit, Bolt 등)가 React를 기본값으로 설정하면서 React가 사실상의 표준 플랫폼으로 자리 잡았습니다. * 새로운 프레임워크가 LLM 학습 데이터에 충분히 반영되기까지는 최소 12~18개월이 소요되며, 그 사이 React는 수천만 개의 사이트를 추가로 생성하며 격차를 벌립니다. * 이러한 자기 강화 루프로 인해 신규 프레임워크가 시장을 점유하기 극도로 어려워지는 'Dead framework theory' 현상이 나타나고 있습니다. ### 분산 시스템을 처리하는 언어로의 진화 * Vercel은 'use cache', 'use workflow' 등의 디렉티브를 통해 분산 시스템의 복잡성을 프로그래밍 언어 수준에서 해결하려는 비전을 제시합니다. * 직렬화 가능한 클로저, 대수적 효과, 점진적 계산이라는 세 가지 핵심 개념을 기반으로 단순한 라이브러리를 넘어선 새로운 언어 구조처럼 작동합니다. * 향후 프로그래밍 언어는 어셈블리와 동시성을 넘어 데이터 관리와 분산 환경의 복잡성을 네이티브로 다루는 방향으로 진화할 전망입니다. ### 프레임워크를 대체하는 네이티브 웹 플랫폼 * Shadow DOM, ES 모듈, Navigation API, View Transitions API 등 브라우저 표준 기능이 과거 프레임워크의 핵심 역할을 대체하기 시작했습니다. * 라우팅, 상태 관리, 컴포넌트 격리 등을 표준 API로 해결함으로써 무거운 번들과 복잡한 추상화 없이도 고성능 애플리케이션 구축이 가능해졌습니다. * 프레임워크는 이제 개발의 필수 요건이 아닌, 필요에 따라 선택하는 영역으로 이동하고 있습니다. ### 집단 지성 기반의 AI 의사결정 시스템: LLM Council * Andrej Karpathy가 개발한 이 시스템은 여러 AI 모델이 민주적으로 협업하여 복잡한 문제를 해결하는 새로운 패러다임을 제시합니다. * '독립적 의견 제시 → 상호 검토 및 순위 매김 → 의장 LLM의 최종 종합'이라는 3단계 프로세스를 통해 단일 모델의 한계를 극복합니다. * GPT-5.1, Claude 4.5 등 다양한 최신 모델의 강점을 결합하여 더 신뢰할 수 있는 답변을 도출하며, 로컬 환경에서 Python과 React 기반으로 간편하게 실행할 수 있습니다. 개발자는 특정 프레임워크의 숙련도에 안주하기보다, 브라우저 표준 기술의 진화를 주시하고 LLM이 주도하는 개발 환경 변화에 유연하게 대응하는 전략이 필요합니다. 웹 기술의 근본적인 변화를 이해하고 표준 API를 적극적으로 활용하는 능력이 더욱 중요해질 것입니다.