발표 모드 소개
Dooray! 프론트엔드 개발자가 협업 도구 Dooray!의 사이드 프로젝트인 '발표 모드'를 소개한다. 마크다운으로 작성된 업무·위키를 별도 작업 없이 그대로 웹 프레젠테이션으로 만들어주는 도구라는 점과, 동작 원리부터 개발 어려움까지 공개하겠다는 방향을 밝힌다.
발표 모드가 자료를 만드는 서버와 보여주는 클라이언트로 나뉘는 전체 구성을 설명한다. 마크다운을 변경 없이 발표 자료로 쓰고 슬라이드 생성 과정을 외부에 노출하지 않으려는 요구에서 서버 사이드 렌더링이 필요해진 배경을 소개한다.
서버가 마크다운을 HTML로 변환하는 렌더러를 다룬다. CommonMark 표준을 준수하면서 체크박스·코드 하이라이팅을 지원하고, 코드 블록 문법을 재정의해 라텍스·차트·유튜브 등 임베디드 기능을 다른 사이트로 옮겨도 깨지지 않게 만든 방식을 설명한다.
변환된 HTML을 슬라이드로 가공하는 파서를 다룬다. 헤딩 #1은 챕터, #2는 내용 슬라이드 분리 기준으로 삼고 #3은 단락을 순차 노출한다. 이미지 비율에 따른 배치, 대비되는 단어의 좌우 배치, 다섯 가지 템플릿 지원까지 설명한다.
웹 프레젠테이션을 실제로 보여주는 클라이언트의 슬라이드 컨트롤러를 다룬다. SPA 프레임워크의 노후화·인스턴스 생성 비용에 회의를 느껴 바닐라 JS로 구현하기로 한 판단과, 슬라이드 이동·확대 등 상태를 담당하는 컨트롤러 설계를 소개한다.
슬라이드 비율과 콘텐츠 크기를 자바스크립트 없이 CSS로만 처리한 방법을 설명한다. vw/vh와 min·max, calc 조합으로 화면 크기에 맞춰 16:9 비율을 유지하고, 픽셀 대신 rem으로 콘텐츠 크기를 통일해 상대적으로 반응형 스케일을 조절한다.
발표를 돕는 플러그인을 소개한다. radial-gradient 기반 스포트라이트, transform scale 줌, d3 보간 레이저 포인터, 정규식으로 텍스트만 추출하는 구글 번역, 그리고 소켓과 Redis 어댑터로 발표자 화면을 실시간 공유하는 기능을 구현 방식과 함께 설명한다.
플러그인이 늘며 스크립트 안 HTML 코드가 많아지자 템플릿 관리를 위해 Svelte를 도입한 과정을 다룬다. 컴파일 타임에 퓨어 자바스크립트로 변환돼 가상 DOM 없이 리액티브가 가능한 특징을 설명하고, 작은 플러그인 단위에 적합했다는 판단을 공유한다.
Node.js 서버를 Docker로 컨테이너화해 배포한 경험을 공유한다. 도커파일 작성 순서로 package.json을 먼저 복사해 npm install 레이어 캐싱을 활용하는 팁과 컨테이너 오케스트레이션 적용을 설명하고, 남은 개선 과제로 발표를 마친다.