개발자가 Docker 명령어 검색 시간을 제거하기 위해 브라우저 기반 대화형 치트시트 구축

Context

Docker 명령어를 찾기 위해 Google 검색, Stack Overflow, 공식 문서를 반복해서 찾아야 했다. 검색 과정에서 탭을 여러 개 열고 닫으면서 개발 흐름이 끊어졌다.

Technical Solution

• 18개 Docker 명령어 전체를 DATA.json 구조화된 스키마로 정의: id, name, syntax, parameters, examples, relatedInstructions, tags, category 필드 포함
• 3패널 대화형 UI 구현: 좌측 검색 가능한 명령어 목록, 중앙 토큰 기반 신택스 하이라이팅 Dockerfile, 우측 상세 레퍼런스
• 중앙 패널의 신택스 하이라이팅을 외부 라이브러리 없이 커스텀 토크나이저로 구현: 각 라인을 keyword, flag, string, comment, path, plain 타입으로 분류
• Next.js + Tailwind CSS 스택으로 백엔드 없이 정적 배포 구현: 모든 데이터는 DATA.json에 포함되고 빌드 타임에 임포트
• Floating UI를 활용한 툴팁 위치 조정: getBoundingClientRect() + 뷰포트 엣지 감지로 오버플로우 방지

Key Takeaway

구조화된 데이터 스키마를 먼저 설계하면 React 컴포넌트 구현이 자동으로 명확해진다. 백엔드를 추가하는 대신 정적 클라이언트 구현을 유지하면 배포 복잡도를 제거하고 오프라인 작동을 자동으로 확보할 수 있다.