CAD/BIM 엔지니어를 위한 100% 정적 전문 디렉터리를 만든 이유와 비용이 전혀 들지 않는 운영 방법
Source: Dev.to
전문 분야에서 적합한 소프트웨어를 찾는 일은 생각보다 어렵습니다. CAD와 BIM 분야를 예로 들면, 디자이너·건축가·엔지니어링 매니저들은 표준 드래프팅 툴에 대한 연간 구독료가 천정부지에 달하는 상황에 직면해 있습니다. 많은 사람들이 1:1 대안을 찾고 싶어 하지만, 파편화된 오래된 비교 포럼이나 유료 광고로 가득 찬 디렉터리만 마주하게 됩니다.
이를 해결하고자 우리는 CADGuide.tools를 만들었습니다. 무료이면서 인터랙티브하고 데이터 기반으로 설계된 디렉터리로, 사용자의 운영 체제, 예산 유형, 동적 블록 기능, AutoLISP API 지원 여부 등에 따라 가장 적합한 CAD 소프트웨어를 매칭해 줍니다.
개발자로서 가장 큰 제약은 호스팅 비용과 서버 유지보수였습니다. 우리는 사이트가 즉시 로드되고, 수천 개의 페이지를 처리하면서도 월 0달러로 운영되길 원했습니다.
아래는 제로 서버 부하 플랫폼을 구현하기 위해 선택한 기술 스택과 아키텍처입니다.
- Framework: Next.js 16 (App Router)
- Styling: Tailwind CSS v4 (맞춤형 HSL 기반 글래스모피즘 및 최신 UI 전환 효과)
- Interactivity: React 19 + Lucide Icons + Base UI
- Deployment: Static Site Generation (SSG) – Vercel에 호스팅
관계형 데이터베이스를 운영하면 매달 발생하는 클라우드 DB 비용과 서버‑사이드 라운드트립으로 인한 페이지 로드 지연이 발생합니다. 대신 우리는 모든 소프트웨어 사양, 기능 매트릭스 정의, 비교 기록을 **typed JSON‑like 데이터 구조(data.ts)**에 집중시켰습니다.
빌드 시점에 Next.js가 이 로컬 데이터셋을 크롤링해 수천 개의 정적 HTML 페이지를 미리 렌더링합니다.
- 비교 페이지 (예:
/compare/zwcad-vs-gstarcad) - 대안 디렉터리 (예:
/alternatives/autocad) - 기능별 목록 (예:
/features/autolisp-api)
정적 파일이기 때문에 바로 엣지 CDN에 배포됩니다. 그 결과 사이트는 거의 완벽에 가까운 Lighthouse 점수를 기록하고, 전 세계 어디서든 밀리초 단위로 로드됩니다.
보통 “소프트웨어 추천 마법사”나 매치메이커는 백엔드 데이터베이스를 통해 필터링된 결과를 조회합니다. 우리는 모든 추천 로직을 클라이언트‑사이드 React 훅으로 옮겼습니다. 데이터셋이 매우 구조화되고 가볍기 때문에 필터링된 데이터 리스트를 클라이언트 번들에 직접 포함시켰습니다. 사용자가 체크박스를 클릭할 때마다 50개가 넘는 데스크톱·클라우드 기반 CAD 엔진을 즉시 필터링합니다—API 호출도, 로딩 스피너도, 데이터베이스 쿼리 비용도 없습니다.
트래픽과 백링크를 유도하기 위해 클라이언트‑사이드 엔지니어링 유틸리티 모음도 구축했습니다. 예를 들어, DWG Version Checker는 디자이너가 DWG 파일을 만든 AutoCAD 연도를 확인하도록 도와줍니다(호환성 오류를 일으키는 경우가 많음).
대용량 바이너리 도면을 서버에 업로드하면 지식재산권 보안 문제가 크게 발생하고 대역폭 비용도 상승합니다. 우리는 파일을 전적으로 사용자의 브라우저에서 처리합니다. HTML5 File API와 JavaScript의 DataView를 활용해 바이너리 헤더의 첫 6바이트를 클라이언트 측에서 직접 읽어냅니다:
const reader = new FileReader();
reader.onload = function(e) {
const arr = new Uint8Array(e.target.result);
const header = String.fromCharCode.apply(null, arr.slice(0, 6));
// "AC1032" → AutoCAD 2018‑2027, "AC1027" → AutoCAD 2013‑2017 등
console.log("DWG Version Header:", header);
};
reader.readAsArrayBuffer(file.slice(0, 6));