목적
며칠 전, 친구들과 함께 교내 학생 점수 관리 시스템을 학생과 선생님이 더욱 쉽게 관리할 수 있도록 웹페이지로 개발하는 프로젝트를 진행하게 되었다. 하지만 나는 동아리 친구들과 진행 중이던 프로젝트가 있어 다소 늦게 합류하게 되었다.
그런데 프로젝트의 폴더 구조를 살펴보니, 말로만 들어봤던 FSD 패턴이 적용되어 있었다. 이전까지 한 번도 직접 사용해본 적이 없던 터라, 오히려 내가 프로젝트에 방해만 되는 게 아닐까 걱정되기도 했다. 순간 포기할까 고민했지만, 회피하면 오히려 친구들에게 더 큰 부담을 줄 것 같았고, 내 성장도 멈출 것만 같았다.
그래서 어렵더라도 시간을 들여 공부하고, 간단하게라도 직접 적용해본 뒤 친구들에게 도움을 줄 수 있다면 좋겠다는 생각이 들어 이렇게 정리해보았다.
FSD?
FSD(Feature-Sliced Design)는 기능 분할 설계라는 뜻으로, 말 그대로 기능 개발을 중심으로 구조를 나누어 설계하는 아키텍처이다.
솔직히 아직 완벽하게 이해한 것은 아니지만, 기존 아키텍처와의 차이를 생각해보면, 두 방식 모두 기능을 분할하지만 파일을 어디에, 어떻게 배치하느냐에서 차이가 있는 것 같다.
위 사진은 FSD를 검색했을 때 가장 먼저 나오는 대표적인 자료이다. 찾아보니 이 구조가 가장 정석적이며, FSD의 이상적인 형태라고 보는 것 같은데, 학교 선배님들의 프로젝트나 FSD를 적용한 친구들의 프로젝트를 살펴보면, entities, widgets, views(pages), shared 정도만 사용되는 경우가 많았다.
그래서 든 생각이, 아키텍처가 엄격하게 정해져 있긴 하지만 굳이 필요하지 않은 부분까지 억지로 맞출 필요는 없다는 것이다. 결국 중요한 건 프로젝트에 맞게 효율적으로 적용하는 것이 아닐까 싶다.
개념 정리
FSD의 개념을 예시를 통해 살펴보자. 가장 자주 등장하는 예제 중 하나인 댓글 창 컴포넌트를 예시로 들어서 기존 아키텍처와의 차이를 비교해보겠다.
기존 아키텍처
기존 방식에서는 댓글 UI를 한 번에 만들어 components 폴더에 넣는 식으로 개발하게 된다. 즉, 댓글과 관련된 모든 요소가 하나의 컴포넌트로 묶여 관리되는 구조이다.
FSD 사용
FSD에서는 기존 아키텍쳐보다 더 세분화하여 폴더를 나누는데, 그중에서도 entities, widgets, views 폴더가 가장 많이 사용된다.
위 폴더들은 다음과 같이 점점 더 큰 단위로 확장된다고 생각하면 된다.
entities (토핑) → widgets (피자 조각) → views (피자)
entities (가장 작은 단위)
댓글 UI에서 독립적인 작은 요소들을 만든다.
예시: entities/comment/ui
widgets (entities를 조합한 중간 단위)
entities 폴더에서 만든 요소들을 조합하여 더 큰 단위의 UI를 제작한다.
예시: widgets/comment/ui
views (가장 큰 단위, 페이지 구성)
entities와 widgets을 조합하여 페이지의 전체적인 UI 구조를 설계한다. 기존 아키텍처에서 pageContainer 역할과 비슷하다.
예시: views/comment/ui
간단 사용 후기
솔직히 처음에는 "왜 이렇게까지 해야 하지?"라는 생각이 더 컸다. 하지만 점점 익숙해지면서 이제는 예전보다는 거리감이 줄어든 느낌이다.
아직까지는 UI적인 부분에만 FSD를 적용해봤고, 기능적인 부분에는 제대로 활용해보지 못했지만, 앞으로 적용해볼 기회가 생긴다면 생각보다 유용하게 사용할 수 있을 것 같다.
마무리
오늘은 FSD에 대해 공부하고, 간단하게 적용도 시켜봤다. 솔직히 아직도 완벽하게 이해하지는 못 했지만, 그래도 직접 사용해보면서 개념이 조금은 잡힌 것 같다. 앞으로 제대로 활용할 기회가 생긴다면, 배운 내용을 실제 프로젝트에서 적용해보고 싶다.
