4인 팀의 코드 설계 기준을 합의하고, 복수 선행 학습 관계를 DAG로 설계·구현한 학습 로드맵 플랫폼
Overview
사용자별 학습 공간 생성 및 기술 기반 로드맵 구성
DAG 구조로 기술 학습 흐름 시각화
워크스페이스 공유, 좋아요, 댓글·대댓글 기능 제공
Technology
여러 선행 개념이 연결되는 학습 로드맵을 노드와 엣지로 표현했습니다. 노드 배치와 연결 등의 기본 편집 기능을 활용해 학습 관계와 워크스페이스 동작 구현에 집중했습니다.
워크스페이스 UI와 인증·데이터 조회·서버 처리를 한 프로젝트에서 관리하기 위해 사용했습니다. 서버 처리와 클라이언트의 그래프 편집 영역을 구분해 구성했습니다.
그래프 편집 상태 전체를 저장하고 복원하는 요구를 우선해 노드와 엣지를 JSONB로 저장했습니다. 개별 관계를 SQL로 조회하거나 DB 제약으로 검증하기 어려워지는 비용을 고려한 선택입니다.
선택한 노드처럼 여러 워크스페이스 컴포넌트가 함께 참조하는 편집 상태를 관리하기 위해 선택했습니다. 공통 상태를 스토어에서 관리해 컴포넌트 사이에 여러 단계로 props를 전달하는 부담을 줄였습니다.
React Flow의 노드·엣지부터 워크스페이스와 학습 데이터까지 서로 연결되는 데이터가 많아, 기능마다 사용하는 데이터의 형태를 명확하게 맞출 필요가 있었습니다. 공통 데이터 구조와 컴포넌트 간 전달 값을 타입으로 정의해 그래프와 UI 사이에서 잘못된 형태의 데이터를 사용하거나 필요한 값을 빠뜨리는 문제를 개발 단계에서 확인하기 위해 선택했습니다.
여러 팀원이 기능을 나눠 개발하는 만큼 각자 구현한 화면에서도 간격·색상·타이포그래피 등 공통된 디자인 규칙을 유지할 필요가 있었습니다. 정해진 스타일 값을 바탕으로 동일한 방식의 유틸리티 클래스를 사용해 화면마다 스타일 작성 방식이 달라지는 것을 줄이고 일관된 UI를 구현하기 위해 선택했습니다.
버튼·다이얼로그·드롭다운처럼 여러 화면에서 반복되는 UI를 기능마다 새로 구현하면 디자인과 동작 방식이 달라질 수 있었습니다. 필요한 컴포넌트의 코드를 프로젝트에 가져와 공통으로 사용하면서도 직접 수정할 수 있어, 반복 구현을 줄이고 프로젝트에 맞는 공통 UI를 만들기 위해 선택했습니다.
워크스페이스와 사용자 정보처럼 서버에서 가져오는 데이터마다 조회·로딩·오류 상태를 직접 관리하면 비동기 처리 로직이 여러 컴포넌트에 반복될 수 있었습니다. 서버 데이터의 조회 상태와 캐시를 하나의 방식으로 관리하고, 같은 데이터를 불필요하게 다시 요청하는 것을 줄이기 위해 선택했습니다.
Next.js로 구현한 화면과 서버 기능을 별도의 프론트엔드·백엔드 배포 환경으로 나누지 않고 하나의 환경에서 빌드하고 배포할 수 있어 선택했습니다. Git 기반으로 변경 사항을 배포할 수 있어 팀 개발 과정에서 배포 과정을 단순하게 유지하고, Next.js 애플리케이션을 별도 서버 인프라 관리 없이 운영하기에 적합하다고 판단했습니다.
Key Points
프론트엔드 개발자 4명이 워크스페이스·커뮤니티·커스터마이징을 병렬로 개발하기 위해 공통 구조가 필요했습니다.
FSD 도입을 제안했지만, 팀원들은 초기 학습 비용과 짧은 개발 기간에 비해 구조가 복잡해질 가능성을 우려했습니다.
실제 개발할 기능을 예시로 책임이 섞일 수 있는 지점과 공통 코드 배치 기준의 필요성을 설명했습니다.
계층별 역할과 코드 배치 기준을 정리해 공유하고, 각 담당 기능에 적용하는 방법을 논의했습니다.
팀 논의를 통해 app은 전역 설정·라우팅, widgets는 조합형 UI, features는 비즈니스 기능, shared는 공통 코드를 담당하도록 책임과 폴더 컨벤션을 합의했습니다.
공통된 책임·배치 기준을 마련해 담당 영역별 코드 위치와 변경 범위를 파악하기 쉬워졌습니다.
코드 리뷰에서 파일 위치와 배치 기준을 재확인하는 과정이 줄었습니다.
초기 Tree 구조에서는 하나의 노드가 하나의 부모만 가질 수 있어 복수 선행 학습 관계를 표현하는 데 한계가 있었습니다.
예를 들어 화면 개발의 React와 서버 기능의 Node.js를 하나의 Next.js 노드에 선행 기술로 연결할 수 있는 구조가 필요했습니다.
하나의 학습 항목에 여러 선행 개념을 연결할 수 있도록 로드맵을 DAG(방향성 비순환 그래프) 구조로 전환했습니다.
학습 항목을 노드로, 선행 학습 관계를 방향이 있는 엣지로 구분해 데이터 구조를 설계했습니다.
편집한 그래프 전체의 저장·복원을 우선해 노드와 엣지를 PostgreSQL의 JSONB로 저장했습니다.
동일한 학습 항목을 중복 생성하지 않고, 여러 선행 개념이 하나의 노드로 이어지는 관계를 표현할 수 있게 됐습니다.
노드 배치와 연결 정보를 포함한 학습 로드맵의 저장·복원을 구현했습니다.
Gallery
