LMS 마이페이지

상황 대시보드 하나의 화면에서 학기 정보, 과목 목록, 할 일, 타임라인, 공지, 게시물, 학습 부진자, 평가 현황 등 다수의 API를 호출해야 했다. 여기에 학생/교수 역할에 따라 필요한 데이터가 완전히 달랐고, 학기 선택이나 필터 변경 시 관련 데이터만 다시 가져와야 했다.

사고 역할별 메인 섹션(학생 뷰, 교수 뷰, 과목별 뷰)을 React.lazy로 코드 스플리팅하여 현재 선택된 역할의 코드만 로드. 각 역할 탭이 독립된 필터 상태와 API 호출을 가지도록 분리하고, 학기 변경 시 이전 필터가 남아있는 문제를 방지하기 위해 필터 초기화 로직을 추가. 사용자 설정(필터, 접기/펴기)은 서버에 계정 단위로 저장하여 기기 간 동기화.

결과 역할 전환 시 불필요한 데이터 로딩 없이 즉각적으로 뷰가 전환되고, 필요한 데이터만 효율적으로 호출하는 구조를 확보.

상황 입사 직후 받은 첫 대규모 프로젝트였다. 대규모 기존 코드베이스를 파악하면서 동시에 12종의 뷰와 API를 3개월 안에 개발해야 했고, 기획자/QA와의 협업, Jira 기반 이슈 관리, 코드 리뷰 프로세스 등 실무 워크플로우도 처음 경험했다.

사고 처음에는 기존 코드를 이해하는 데 시간이 많이 걸렸지만, 기존 컨벤션과 패턴을 먼저 파악하고 그에 맞춰 개발하는 것이 결국 더 빠르다는 걸 깨달았다. QA에서 2주간 132건의 이슈가 쏟아졌을 때는 카테고리별로 분류하고 우선순위(데이터 정합성 → 기능 → UX)를 정해 체계적으로 처리하는 방법을 배웠다.

배운 점 프로젝트 종료 후 Post-Mortem을 작성하면서 "잘한 점 / 아쉬운 점 / 개선할 점"을 정리하는 습관을 들였다. 이 회고 습관이 이후 프로젝트에서의 의사결정 품질을 높이는 기반이 됐고, "개발자가 괜찮다고 생각하는 것"과 "사용자가 자연스럽다고 느끼는 것"의 간극을 체감한 경험이었다.

상황 마이페이지는 Canvas LMS의 Global LTI로 동작하기 때문에 iframe 안에서 렌더링된다. 이로 인해 일반적인 웹 페이지에서는 당연한 동작들 — 콘텐츠 높이에 맞는 프레임 리사이즈, 모달/팝업의 화면 중앙 배치, 스크롤 위치 동기화 등이 자동으로 처리되지 않았다.

사고 iframe과 부모 창(LMS) 사이의 통신이 필요했다. window.parent.postMessage를 활용하여 대시보드의 콘텐츠 높이가 변경될 때마다 부모 프레임에 알려 iframe 크기를 동적으로 조정하고, 모달이 열릴 때 부모 창의 스크롤 위치를 기반으로 팝업을 화면 중앙에 배치했다. 마이페이지가 LMS 내부에 직접 삽입되는 경우와 외부 수강 관리 시스템에서 별도로 임베딩하는 경우, 부모 창의 DOM 구조가 달라서 메시지를 수신하는 측의 처리 방식을 각각 대응해야 했다.

결과 iframe 안에서도 일반 페이지와 동일한 수준의 UX를 제공. 사용자가 iframe 안에 있다는 것을 느끼지 못하는 자연스러운 경험을 확보.