Velog
나만의 아키텍처 구성하기
프론트엔드 아키텍처는 단일 정답이 없으며, 프로젝트의 규모, 팀 구성, 도메인 복잡도에 따라 최적의 구조가 달라진다. 이 아티클은 Feature-Sliced Design, Layered Architecture, 도메인 주도 설계(DDD) 등 다양한 아키텍처 패턴을 소개하고, 각각의 장단점과 적합한 사용 시나리오를 분석한다.
핵심 요약
이 아티클은 프론트엔드 아키텍처 판단를 실무 판단 기준으로 다시 정렬해 주는 읽기 자료입니다. 프론트엔드 아키텍처는 단일 정답이 없으며, 프로젝트의 규모, 팀 구성, 도메인 복잡도에 따라 최적의 구조가 달라진다. 이 아티클은 Feature-Sliced Design, Layered Architecture, 도메인 주도 설계(DDD) 등 다양한 아키텍처 패턴을 소개하고, 각각의 장단점과 적합한 사용 시나리오를 분석한다. 중요한 것은 아키텍처를 선택하는 것이 아니라 팀이 일관성 있게 따를 수 있는 원칙을 정립하는 것이다.
이 아티클은 프론트엔드 아키텍처 판단를 면접에서 바로 꺼낼 수 있는 답변 프레임으로 접어 두는 메모처럼 읽으면 좋습니다.
프론트엔드 아키텍처 판단를 설명할 때 정의만 말하면 답변이 얕아지기 쉽습니다. Feature-Sliced Design(FSD)은 기능 단위로 코드를 슬라이스하여 각 기능이 독립적으로 개발/배포될 수 있도록 하는 현대적인 프론트엔드 아키텍처다. 실무 판단 근거와 면접 답변의 밀도를 동시에 끌어올릴 수 있습니다.
학습 포인트
면접 답변으로 연결할 학습 포인트입니다.
Feature-Sliced Design
Feature-Sliced Design(FSD)은 기능 단위로 코드를 슬라이스하여 각 기능이 독립적으로 개발/배포될 수 있도록 하는 현대적인 프론트엔드 아키텍처다. 이 포인트를 알고 있으면 비슷한 상황에서 왜 이 접근을 선택하는지까지 설명할 수 있습니다.
Feature-Sliced Design를 개념으로만 기억하고 맥락 없이 적용하면 Feature-Sliced Design(FSD)은 기능 단위로 코드를 슬라이스하여 각 기능이 독립적으로 개발/배포될 수 있도록 하는 현대적인 프론트엔드 아키텍처다. 추상화만 늘리고 경계를 점검하지 않으면 구조가 커질수록 변경 비용이 급격히 커집니다.
레이어드 아키텍처는 Presentation
레이어드 아키텍처는 Presentation, Business Logic, Data Access 계층을 명확히 분리하여 의존성 방향을 단방향으로 유지한다. 이 포인트를 알고 있으면 비슷한 상황에서 왜 이 접근을 선택하는지까지 설명할 수 있습니다.
레이어드 아키텍처는 Presentation를 개념으로만 기억하고 맥락 없이 적용하면 레이어드 아키텍처는 Presentation, Business Logic, Data Access 계층을 명확히 분리하여 의존성 방향을 단방향으로 유지한다. 추상화만 늘리고 경계를 점검하지 않으면 구조가 커질수록 변경 비용이 급격히 커집니다.
아키텍처 선택 시 팀 규모
아키텍처 선택 시 팀 규모, 프로젝트 수명, 도메인 복잡도, 확장 계획을 종합적으로 고려해야 한다. 이 포인트를 알고 있으면 비슷한 상황에서 왜 이 접근을 선택하는지까지 설명할 수 있습니다.
아키텍처 선택 시 팀 규모를 개념으로만 기억하고 맥락 없이 적용하면 아키텍처 선택 시 팀 규모, 프로젝트 수명, 도메인 복잡도, 확장 계획을 종합적으로 고려해야 한다. 추상화만 늘리고 경계를 점검하지 않으면 구조가 커질수록 변경 비용이 급격히 커집니다.
읽는 순서
- 1이론
"나만의 아키텍처 구성하기"의 멘탈 모델과 요약을 먼저 읽고, 프론트엔드 아키텍처 판단와 관련된 핵심 용어 3개를 적어보세요.
- 2구현
나만의 아키텍처 구성하기에서 다룬 아이디어를 작은 예제로 직접 구현하거나 기존 코드에 대입해 보면서 적용 조건을 확인하세요.
- 3실무
현재 프로젝트에서 프론트엔드 아키텍처 판단와 연결되는 화면이나 코드 리뷰 사례를 찾아, 어디서 같은 판단이 필요한지 정리해보세요.
- 4설명
동료에게 "프론트엔드 프로젝트의 폴더 구조를 어떻게 설계하시나요? 선택의 기준은 무엇인가요?"에 대한 답을 5분 안에 설명해보세요. 막히는 부분이 아직 이해가 얕은 구간입니다.
면접 연결 질문
[감점 답변] 용어 정의만 반복하거나 "나만의 아키텍처 구성하기에서 그렇게 하더라" 수준으로 답하면 감점 포인트입니다. 면접관은 개념을 외운 사람보다 판단 근거를 말하는 사람을 찾습니다. [좋은 답변] 기능/도메인 기반(feature-based) vs 역할 기반(role-based) 구조를 비교하고, 프로젝트 규모와 팀 규모에 따른 선택 기준을 설명. 순환 참조 방지 방법도 언급. 가능하면 선택 이유, 트레이드오프, 실제로 문제가 되는 상황까지 함께 연결하세요.
[감점 답변] 용어 정의만 반복하거나 "나만의 아키텍처 구성하기에서 그렇게 하더라" 수준으로 답하면 감점 포인트입니다. 면접관은 개념을 외운 사람보다 판단 근거를 말하는 사람을 찾습니다. [좋은 답변] FSD는 app > pages > widgets > features > entities > shared 계층 구조로, 상위 계층만 하위 계층에 의존할 수 있다. 기능 단위 응집성과 재사용성 측면에서 레이어드 아키텍처와 비교. 가능하면 선택 이유, 트레이드오프, 실제로 문제가 되는 상황까지 함께 연결하세요.
[감점 답변] 용어 정의만 반복하거나 "나만의 아키텍처 구성하기에서 그렇게 하더라" 수준으로 답하면 감점 포인트입니다. 면접관은 개념을 외운 사람보다 판단 근거를 말하는 사람을 찾습니다. [좋은 답변] 서버 상태(React Query/SWR), 전역 UI 상태(Zustand/Redux), 로컬 컴포넌트 상태(useState)를 목적에 맞게 분리하는 전략을 설명. 가능하면 선택 이유, 트레이드오프, 실제로 문제가 되는 상황까지 함께 연결하세요.
자기 점검
"Feature-Sliced Design"를 기능 목록으로만 외우는 것. 실제로는 왜 이 접근이 필요한지와 적용 조건까지 설명해야 합니다.
좋은 사례만 기억하고 실패 조건을 빼먹는 것. 실제 면접에서는 언제 위험해지는지까지 함께 말해야 합니다.