~/csslab.dev/notes $ ls

// note

결과 파일 뷰어 — 확장자별 뷰어를 인터페이스 하나로

  • AI 에이전트 채팅 서비스에서 분석 결과 파일을 브라우저로 바로 보는 뷰어 패널

증상

  • 지원하지 않는 확장자가 전부 "미지원"으로 떨어져 다운로드해야만 볼 수 있음 — 텍스트로 열면 되는 파일까지
  • 3D 구조 뷰어가 파싱에 실패하면 원본조차 못 보는 상태가 됨
  • 실패한 뒤에도 옆 컨트롤 패널에 쓸 수 없는 3D 조작 도구가 그대로 노출

원인

  • 확장자별 뷰어가 호출부에 흩어져 있고, 실패했을 때 넘어갈 경로가 정의돼 있지 않음
  • 로드 실패 여부가 뷰어 컴포넌트 안에만 있어 형제인 컨트롤 패널이 알 수 없었음

조치

  • 확장자 → 뷰어 매핑을 한 곳에 모으고 각 뷰어가 같은 계약만 지키게 함 — 뷰어 추가가 레지스트리 등록 한 줄로 줄고 호출부는 어떤 핸들러인지 모름
  • 실패 경로를 계약에 포함 — 각 뷰어가 자기 폴백 대상을 선언. 3D 파싱이 실패하면 텍스트 뷰어로 떨어져 원문은 보이게
  • 텍스트 뷰어를 기본 폴백으로 두고 화이트리스트를 넓혀 36종을 열람 가능하게. 전체를 받지 않고 앞부분만 부분 요청해 큰 파일도 즉시 열림
  • 실패 상태를 상위 스토어로 승격해 컨트롤 패널이 구독 → 실패 시 도구를 숨김. 파일 열기·닫기·대화 전환 시점에 리셋
  • 특수 포맷은 외부 라이브러리를 걷어내고 자체 구현으로 대체 — 실제 필요한 건 원문 확인과 격자 표시인데 라이브러리가 안 쓰는 기능까지 번들에 얹고 있었음

결과

  • 미지원으로 막히던 파일이 폴백으로 대부분 열람 가능해짐
  • 포맷 추가가 등록 한 줄로 축소 — 런칭 후에도 구조 변경 없이 증설