카카오페이지, SOLID 원칙 기반 프론트엔드 아키텍처 설계 사례 공개

카카오페이지 개발자가 SOLID 원칙을 프론트엔드 아키텍처에 적용한 실무 사례를 공유했다. 저자는 SOLID가 단순한 코딩 규칙이 아닌, 조직의 커뮤니케이션 구조와 연결된 아키텍처 설계의 핵심 가치임을 강조하며, 각 원칙이 리액트 환경에서 어떻게 구현되는지 구체적으로 설명했다.

SRP와 OCP를 통한 컴포넌트 설계

**SRP(단일 책임 원칙)**는 '동작'이 아닌 '책무' 단위로 컴포넌트를 분리하는 것을 의미한다. 저자는 기획, 디자인, 개발 등 조직 내 커뮤니케이션 흐름에 맞춰 컴포넌트 경계를 설정해야 사이드 이펙트를 최소화할 수 있다고 조언한다. **OCP(개방 폐쇄 원칙)**의 경우, 애플의 Compositional Layout 패턴을 차용해 Section, Group, Item 계층으로 구조화함으로써 API 스펙 변경 시 기존 코드를 수정하지 않고 확장할 수 있도록 설계했다.

LSP, ISP, DIP의 실전 적용

LSP(리스코프 치환 법칙) 위반은 정의된 인터페이스와 실제 구현이 불일치할 때 발생하며, 이는 디버깅 난이도를 높이는 주요 원인이 된다. 저자는 ApiErrorBoundary 같은 컴포넌트에 의도치 않은 로직을 추가하는 것을 경계해야 한다고 지적한다.

**ISP(인터페이스 분리 원칙)**와 **DIP(의존성 역전 원칙)**은 컴포넌트 조합 시 활용된다. 리액트의 children prop을 이용해 데이터 fetching 로직을 Fetcher 컴포넌트로 분리하고, Compound Pattern을 적용해 TicketInfo 컴포넌트가 필요한 props만 받도록 구성했다. 이를 통해 의존성을 역전하고 테스트 용이성을 확보했다.

BFF와 GraphQL을 통한 아키텍처 확장

프론트엔드 영역을 넘어 **BFF(Backend-For Frontend)**와 GraphQL 도입 시 SOLID 원칙이 어떻게 적용되는지도 다루었다. BFF 레이어를 도입하면 클라이언트 관점에서 불필요한 데이터를 제외(ISP)하고, 서버 구현체 변경으로부터 독립적(DIP)인 인터페이스를 제공할 수 있다. 또한 GraphQL의 Fragment 기능을 활용해 다형성을 지원함으로써 여러 플랫폼(Web, iOS, Android)에서 OCP를 만족시키는 구조를 만들 수 있다.