DTM — 반응형 미리보기

내 사이트를 데스크탑·태블릿·모바일로 한눈에 보고, 폭을 줄여가며 레이아웃이 바뀌는 모습을 확인하는 도구입니다.

온라인으로 보기 (GitHub Pages)

• 웹 효과 도감: https://hoikjeon.github.io/dtm/effects.html — 설치 없이 전부 동작해요.
• DTM 미리보기: https://hoikjeon.github.io/dtm/ — 주소창에 localhost:3000 처럼 내 컴퓨터의 개발 서버를 넣으면 기기별로 볼 수 있어요(Chrome 권장). 단, 스크롤·이동 동기화와 캡처는 로컬 서버가 필요해서 아래처럼 직접 실행할 때만 돼요.

실행

npm install              # 처음 한 번 (캡처 기능용 playwright-core)
npm run dev              # http://localhost:4321 이 자동으로 열림
node server.mjs 3000     # localhost:3000 을 바로 띄우기
npm start -- 3000        # 위와 같음

index.html 을 그냥 더블클릭해서 열어도 되지만, 이때는 스크롤·이동 동기화를 쓸 수 없습니다.

모드

모드	하는 일
한눈에 보기	세 기기를 같은 배율로 나란히 표시합니다(실제 크기 비율 유지). 칩으로 켜고 끄고, 단독이나 기기 이름을 누르면 그 기기만 크게 보여요.
리사이즈	프레임 하나의 폭을 실시간으로 바꿉니다. 재생(왕복 애니메이션), 핸들 드래그, 슬라이더, 기기 폭으로 부드럽게 이동하는 기능이 있습니다. 브레이크포인트를 지날 때마다 표시해 줘요.

웹 효과 도감

툴바의 효과 도감 버튼 또는 http://localhost:4321/effects 로 엽니다.

• 웹페이지에 자주 쓰는 효과 64개(8개 카테고리)를 카드 안에서 실제로 움직이는 데모로 보여줘요.
• 즐겨찾기: 카드 오른쪽 위(또는 상세보기)의 ☆ 를 누르면 ★ 가 되고, 그 효과가 목록 맨 위에 고정돼요. ★ 즐겨찾기 칩으로 모아 볼 수 있고, 이 브라우저에 저장돼 다시 열어도 유지돼요.
• 카드에 한글 이름 · 영문 이름 · 사용 기술 · 난이도가 있고, 한글/영문/별명으로 검색할 수 있어요.
• 상세보기: 큰 데모 + 설명 / 코드(HTML·CSS·JS, 한 파일로 복사) / 프롬프트(AI 에게 붙여넣는 구현 요청문) 탭. 주소 뒤에 #glitch 처럼 붙이면 바로 열려요.
• 효과 추가: effects-data.js 에 객체 하나를 추가하면 카드·코드·프롬프트가 자동으로 만들어집니다.
• 이미지: Codex 로 생성 → assets/raw/effects/*.png → python3 scripts/build-assets.py 로 assets/effects/*.webp 변환

  scripts/codex-image.sh "이미지 설명 프롬프트" assets/raw/effects/새이미지.png
  

영상 샷 도감

툴바의 샷 도감 버튼 또는 http://localhost:4321/shots (온라인: https://hoikjeon.github.io/dtm/shots.html)

• AI 영상 도구에 샷을 정확한 용어로 요청하기 위한 도감이에요. 8개 분류(샷 크기 · 앵글 · 무빙 · 구도 · 인물·대화 · 렌즈·초점 · 시간·속도 · 편집·연결) 75개 샷 (예시 이미지가 준비된 69개가 먼저 보여요).
• 모든 예시는 같은 주인공(노란 우비) · 같은 장소(비 오는 네온 거리) 로 샷만 바꿔서 차이가 잘 보여요.
  • 이미지: Codex 로 생성(기준 이미지를 참조로 첨부해 인물 고정)
  • 카메라 무빙 · 시간 샷 7개: Higgsfield(Seedance 2.5)로 만든 5초 영상
  • 매치 컷 · 점프 컷 · 샷-리버스 샷 등: 컷이 실제로 바뀌는 시퀀스 (컷마다 이름 표시, 디졸브는 겹치며 전환)
  • 틸트 · 크레인 · 돌리 줌 같은 무빙: 지금은 시작 → 끝 장면 이미지("영상 준비 중"), 나중에 영상으로 교체
• 상세보기: 어떤 느낌을 주는지 · 언제 쓰는지 · 주의점 · 잘 어울리는 샷, 카메라 배치 도식(크기·앵글·무빙), 구도 가이드 선
• AI 프롬프트: 영어 키워드 + 완성 프롬프트. 대상·장소를 바꾸면 프롬프트에 바로 반영돼요.
• 샷 조합기: 크기 · 앵글 · 무빙 · 구도 · 렌즈 · 속도를 하나씩 골라 한 문장 영어 프롬프트로 합쳐 줘요.
• 즐겨찾기·검색(한글/영문/약어)은 효과 도감과 같아요.
• 이미지 추가: scripts/codex-image.sh "프롬프트" assets/raw/shots/이름.png assets/raw/shots/ref-hero.png → python3 scripts/build-assets.py
• draft: true 인 샷은 예시 이미지가 없어서 아직 숨겨져 있어요. 이미지를 만든 뒤 그 줄을 지우면 보여요.
• 영상 추가: assets/raw/shots/video/이름.mp4 에 넣고 node scripts/video-posters.mjs (영상 복사 + 포스터 이미지 생성)

4K

데스크탑 기종 목록에 4K UHD (3840×2160) 와 QHD (2560×1440) 가 있습니다. 리사이즈 모드에서 데스크탑 폭 버튼을 누르면 최대 폭이 자동으로 늘어나 4K 까지 이동해요.

캡처

툴바의 빨간 카메라 버튼 또는 C 키를 누르면 캡처 창이 열립니다.

• 저장 위치: 캡처할 때마다 창에서 확인합니다. 폴더 선택… 을 누르면 Finder 창이 열리고, 그 안의 새로운 폴더 버튼으로 폴더를 만들 수도 있어요. 마지막으로 고른 폴더를 기억합니다.
• 하위 폴더를 만들지 않고 고른 폴더에 사진만 바로 저장합니다. 같은 이름이 있으면 덮어쓰지 않고 -2 를 붙여요.

  고른 폴더/
    localhost-3000_2026-10-05_00-23-58_desktop-1440x900.jpg
    localhost-3000_2026-10-05_00-23-58_tablet-820x1180.jpg
    localhost-3000_2026-10-05_00-23-58_mobile-393x852.jpg
    localhost-3000_2026-10-05_00-23-58_overview.jpg
  

• 캡처 범위: 카메라 버튼 옆 화면 / 전체 버튼(캡처 창 안에도 같은 버튼)으로 바꿉니다. 화면 = 보이는 화면만(기본), 전체 = 스크롤 끝까지
• 합본 이미지: 체크하면 기기들을 나란히 붙인 overview.jpg 도 만듭니다.
• 파일 형식은 JPG (품질 92) 입니다.
• 리사이즈 모드에서는 지금 폭 그대로 한 장을 캡처합니다.
• 캡처는 서버가 보이지 않는 Google Chrome(playwright-core)으로 각 기기 크기 그대로 찍습니다. 파일은 기본 2배 해상도(레티나)이고, 결과 폭이 4K(4000px)를 넘으면 1배로 저장해요. (Full HD → 3840×2160, 4K UHD → 3840×2160, QHD → 2560×1440) 로그인이 필요한 페이지는 로그인 전 화면으로 찍혀요.
• 처음 한 번 npm install 이 필요합니다.

단축키

C 캡처 · 1 2 3 기기 단독 보기 (리사이즈 모드에서는 그 기기 폭으로 이동) · Shift+1~3 켜기/끄기 · 0 모두 보기 · M 모드 전환 · Space 재생/정지 · ← → 폭 10px (Shift 100px) · R 새로고침 · / 주소창

미리보기 화면 안을 클릭하면 키 입력이 그 사이트로 가므로, 단축키를 쓰려면 툴바나 빈 곳을 한 번 클릭하세요.

동기화 원리

server.mjs 는 포트 두 개를 엽니다.

• 4321 — 도구 화면
• 4322 — 대상 사이트를 그대로 중계하는 프록시. HTML의 <head> 에 bridge.js 를 넣고, 넣은 스크립트 태그는 실행 직후 스스로 지워서 React 하이드레이션에 영향을 주지 않습니다.

bridge.js 가 스크롤 비율과 경로 변경을 postMessage 로 도구에 알리면, 도구가 나머지 기기 화면에 그대로 전달합니다. HMR 웹소켓도 중계하므로 코드를 고치면 모든 기기 화면이 함께 갱신돼요. 미리보기 화면 안에서는 X-Frame-Options / CSP 헤더를 떼어내기 때문에, iframe 삽입을 막아 둔 사이트도 볼 수 있습니다.

한계

• iframe 은 폭만 바꿉니다. User-Agent, 터치 입력, hover 미디어쿼리는 실제 기기와 다를 수 있어요.
• 스크롤 동기화는 window 스크롤 기준입니다. 내부 컨테이너만 스크롤되는 페이지는 따라오지 않아요.
• 포트 번호를 PORT=4400 node server.mjs 처럼 바꿀 수 있습니다(프록시는 +1 포트).

디자인 에셋

• 스타일: 레트로 픽셀 (굵은 검정 테두리 · 오프셋 그림자 · 노랑/빨강 포인트), 라이트/다크 모드
• 폰트: 얇은 글자 Mona, 굵은 글자 Galmuri — jsDelivr CDN 에서 불러옴 (인터넷 연결 필요)
• 이미지·아이콘: Codex(이미지 생성)로 제작
  • assets/raw/ 원본 PNG (로고, 기기 아이콘 3종, 히어로 일러스트)
  • assets/icons/*.svg 16×16 픽셀 UI 아이콘
  • assets/preview.html 전체 에셋 미리보기
• 원본을 바꾼 뒤 python3 scripts/build-assets.py 를 실행하면 배경 제거·리사이즈·assets/icons.js 묶음이 다시 만들어집니다.