안녕하세요! 이번에는 **"소프트웨어 아키텍처(Software Architecture)"**라는 조금 거창해 보이는 단어에 대해 이야기해 볼 거예요.
이 문서는 **"FSD가 생각하는 좋은 건축 설계란 무엇인가?"**에 대한 철학을 담고 있습니다. 어렵게 들리지만, **"복잡한 이어폰 줄 풀기"**에 비유하면 아주 쉽습니다.
🏗️ 아키텍처 vs 파일 구조: 무엇이 다를까?
많은 초보 개발자가 오해하는 게 있어요.
"폴더 예쁘게 만들고 파일 이름 잘 지으면 그게 아키텍처 아닌가요?"
FSD 문서는 **"아니요!"**라고 말합니다.
- 파일 구조 (File Structure): 파일이 어디에 놓여 있는지 (위치)
- 비유: 도서관 책장에 책이 'ㄱ, ㄴ, ㄷ' 순서로 꽂혀 있는 것.
- 아키텍처 (Architecture): 파일들이 어떻게 서로 연결되어 있는지 (관계/규칙)
- 비유: 도서관에서 "학생은 책을 빌릴 수 있지만, 책이 학생을 빌릴 수는 없다" 같은 규칙.
FSD는 단순히 폴더 정리법이 아니라, **"코드들 사이의 관계(화살표)를 통제하는 규칙"**입니다.
🤯 왜 아키텍처가 필요할까?: "스파게티 코드와의 전쟁"
여러분이 코딩하다가 "어? 이거 하나 고쳤는데 왜 저기서 에러가 나지?" 하는 경험, 해보셨나요?
이걸 개발자들은 코드가 스파게티 면발처럼 엉켜있다고 해서 **'스파게티 코드'**라고 부릅니다.
FSD 아키텍처의 목표는 딱 하나입니다.
"줄 꼬인 유선 이어폰을, 깔끔한 무선 이어폰으로 만드는 것!"
이걸 어려운 말로 **"결합도(Coupling)를 낮춘다"**고 합니다.
1. 엉킨 이어폰 (나쁜 아키텍처)
- 로그인 기능을 고쳤는데, 갑자기 장바구니 기능이 고장 남.
- 서로 너무 꽉 붙잡고 있어서 하나만 건드려도 다 흔들림.
2. 무선 이어폰 (좋은 아키텍처 - FSD)
- 왼쪽 이어폰을 잃어버려도 오른쪽 이어폰은 잘 들림.
- 각 부품이 독립적이라서 하나를 고쳐도 다른 곳에 피해를 안 줌.
📐 FSD가 제시하는 "엉킴 방지 3대 원칙"
FSD는 코드가 엉키지 않게 하기 위해 3가지 강력한 규칙을 만들었습니다.
① 계층화 (Layers): "군대 계급 사회"
- 규칙: "명령은 위에서 아래로만 흐른다."
- 설명: 장군(App/Pages)은 병사(Shared)에게 명령할 수 있지만, 병사가 장군에게 이래라저래라할 수 없습니다.
- 효과: 에러가 났을 때 범인을 찾기 쉽습니다. (화살표가 한 방향이니까요!)
② 슬라이스 분리 (Slices): "옆 반 친구와 거리두기"
- 규칙: "같은 층에 사는 옆집끼리는 서로 아는 척하지 않는다."
- 설명: '로그인 기능'과 '쇼핑몰 장바구니 기능'은 서로 몰라야 합니다. 서로 얽히는 순간 지옥이 시작됩니다.
- 효과: 장바구니 기능을 통째로 삭제해도 로그인 기능은 멀쩡하게 돌아갑니다.
③ 명시적 연결 (Public API): "공식 창구 이용하기"
- 규칙: "뒷문으로 몰래 들어오지 말고, 정문(index.ts)으로만 다녀라."
- 설명: 아까 설명했던 '매점 키오스크' 이야기 기억나시죠? 내부 구조를 몰라도 쓸 수 있게 입구를 하나로 통일합니다.
- 효과: 내부 코드를 마음껏 뜯어고쳐도 밖에서는 아무 문제 없이 쓸 수 있습니다.
🧠 인지 부하(Cognitive Load) 줄이기
이 말이 참 멋진데요, 쉽게 말하면 **"개발자 머리 덜 아프게 하기"**입니다.
- 아키텍처가 없을 때:
- "이 함수를 고치면... A파일도 고장 나고, B파일도 영향받고... 으악 기억할 게 너무 많아!" (머리 터짐 🤯)
- FSD 아키텍처 적용 후:
- "이건 Features 층이니까, 아래층인 Entities만 신경 쓰면 되네. 위층은 알 바 아님!" (마음 편안 😌)
"내가 지금 당장 작업하는 부분에만 집중할 수 있게 해주는 것", 이것이 FSD 아키텍처가 주는 최고의 선물입니다.
📝 세 줄 요약
- 아키텍처는 폴더 정리가 아니라 '관계 정리'다. (누가 누구를 가져다 쓸 수 있는지 정하는 규칙)
- 코드가 스파게티처럼 꼬이는 걸 막기 위해 '일방통행(위→아래)' 규칙을 쓴다.
- 이렇게 규칙을 정해두면, 나중에 코드가 엄청 많아져도 머리가 덜 아프다.
* 본 문서는 google AI studio 로 생성되었습니다. ( 원문 : https://feature-sliced.github.io/documentation/docs/about/understanding/architecture )
'요즘 관심 분야' 카테고리의 다른 글
| FSD : Public API (0) | 2025.12.03 |
|---|---|
| FSD : Slices and segments (0) | 2025.12.02 |
| FSD : Layers (0) | 2025.12.02 |
| FSD : Usage with Next.js (1) | 2025.12.02 |
| FSD : Handling API Requests (0) | 2025.12.02 |
댓글