토스 / react

3 개의 포스트

toss

Embracing the Software 3.0 Era (새 탭에서 열림)

소프트웨어 개발은 명시적 코딩(1.0)과 데이터 기반 학습(2.0)을 거쳐, 자연어 프롬프트가 프로그램이 되는 '소프트웨어 3.0' 시대로 진입하고 있습니다. 하지만 강력한 LLM 모델이라도 실질적인 업무를 수행하기 위해서는 모델의 능력을 제어하고 연결하는 '하네스(Harness)'라는 도구적 환경이 필수적이며, 이를 설계하는 데 있어 기존 소프트웨어 1.0의 계층형 아키텍처 원칙은 여전히 유효한 가이드가 됩니다. 결국 미래의 개발은 전통적인 설계 원칙을 유지하면서도, 에이전트가 인간과 소통하며 의사결정을 내리는 'Human-in-the-Loop(HITL)' 모델을 결합하는 방향으로 진화할 것입니다. **소프트웨어 3.0과 하네스의 필요성** - 안드레 카파시는 소프트웨어 3.0을 자연어로 된 프롬프트가 코드를 대신하는 시대로 정의하며, 이것이 이전 세대의 패러다임을 흡수할 것이라고 예측했습니다. - 하지만 LLM 단독으로는 코드베이스를 읽거나 데이터베이스에 접근하는 등의 실질적인 작업을 수행할 수 없다는 한계가 있습니다. - 이를 해결하기 위해 등장한 것이 '하네스(Harness)' 개념으로, 앤스로픽의 'Claude Code'처럼 모델이 도구(Skills)를 사용하고 외부와 통신하며 에이전트로 동작하게 만드는 실행 환경을 의미합니다. **계층형 아키텍처로 매핑한 에이전트 구조** - **슬래시 커맨드(Slash Command) = 컨트롤러(Controller):** `/review`, `/refactor`와 같은 명령어는 사용자 요청을 받아 적절한 워크플로우를 실행하는 서비스의 진입점 역할을 합니다. - **서브 에이전트(Sub-agent) = 서비스 계층(Service Layer):** 여러 기술(Skills)을 조합해 특정 비즈니스 로직을 완수하며, 독립적인 컨텍스트를 유지하는 단위입니다. - **기술(Skills) = 도메인 컴포넌트:** 단일 책임 원칙(SRP)에 따라 코드 리뷰, 테스트 생성 등 명확한 한 가지 기능만 수행하는 가장 작은 단위의 기능 모듈입니다. - **MCP(Model Context Protocol) = 인프라/어댑터:** 외부 API나 DB와의 연결을 추상화하여 내부 로직이 외부 시스템의 구현 상세를 몰라도 동작하게 돕습니다. - **CLAUDE.md = 프로젝트 헌장:** 기술 스택, 코딩 컨벤션 등 프로젝트의 변하지 않는 근간 원칙을 정의하며 시스템의 안정성을 보장합니다. **에이전트 설계에서 경계해야 할 안티패턴** - **God Sub-agent:** 하나의 서브 에이전트가 너무 많은 역할과 권한을 가지게 되면 관리 효율이 떨어지므로 적절한 분리가 필요합니다. - **기능 편애(Feature Envy):** 특정 기술이 자신의 역할 범위를 벗어나 다른 기술의 데이터나 프롬프트에 과도하게 의존하는 경우입니다. - **프롬프트 중복:** 동일한 프롬프트 내용이 여러 기술에 중복되어 포함될 경우 유지보수가 어려워지므로 공통화가 필요합니다. **에이전트만의 핵심 차별점: 질문하는 능력(HITL)** - 전통적인 소프트웨어는 예외 상황에서 미리 정의된 에러를 던지지만, 3.0 시대의 에이전트는 `UserAskQuestion` 기술을 통해 모호한 상황에서 사용자에게 직접 질문을 던질 수 있습니다. - 에이전트는 삭제나 배포처럼 되돌리기 어려운 작업, 혹은 여러 대안 중 선택이 필요한 고위험 상황에서 인간의 판단을 구하는 'Human-in-the-Loop' 구조를 가집니다. - 반면, 관습적으로 처리 가능한 일이나 안전한 반복 작업은 질문 없이 자율적으로 수행함으로써 효율성과 안정성 사이의 균형을 맞춥니다. 소프트웨어 3.0 시대에 적응하기 위해서는 모든 로직을 명시적으로 작성하려는 강박에서 벗어나야 합니다. 대신 계층 분리, 추상화, 단일 책임 원칙과 같은 전통적인 소프트웨어 공학의 정수를 에이전트 설계에 투영하여, LLM을 단순한 자동완성 도구가 아닌 신뢰할 수 있는 협력자로 구축하는 능력이 핵심 경쟁력이 될 것입니다.

toss

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

디자인 시스템은 성장에 따라 경직되기 마련이며, 시스템이 제품 팀의 변화하는 요구사항을 제때 수용하지 못할 경우 팀은 시스템을 우회하거나 파편화된 코드를 생성하게 됩니다. 토스의 디자인 시스템(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만 두 가지 형태로 노출함으로써, 유지보수 부담을 최소화하면서도 사용자 경험을 극대화합니다. 디자인 시스템은 팀을 가두는 울타리가 아니라 안전하게 안내하는 가드레일이 되어야 합니다. 중앙에서 모든 것을 통제하려 하기보다, 규칙에서 벗어난 예외 상황까지 시스템 안에서 지원할 수 있는 유연한 설계를 갖출 때 진정한 일관성을 유지할 수 있습니다.

toss

세금 환급 자동화 : 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를 도구가 아닌 실제 팀원으로 대우할 때 자동화의 본질인 '안정적인 반복 실행'을 달성할 수 있음을 보여줍니다.