모바일 친화적인 웹 기반 디지털 카드(청첩장) 에디터입니다.
- 싱글 클릭: 텍스트 편집 모드 진입
- 더블 클릭: 이동 모드 진입 및 드래그 시작
- 롱프레스 (500ms): 이동 모드 진입 및 드래그 시작
- 글꼴 선택 (노토 세리프, 나눔명조, 나눔고딕, 노토 산스, 고딕 A1)
- 색상 선택
- 글꼴 크기 조절 (A+/A- 버튼)
- 굵게 (Bold)
- 기울임 (Italic)
- + 버튼: 카드를 전체 너비로 확대
- - 버튼: 축소 뷰로 복귀
- 줌인 상태에서 세로 드래그로 카드 스크롤 가능
- 스크롤 범위 제한 (빈 화면 표시 방지)
- 이동: 더블클릭 또는 롱프레스 후 드래그
- 크기 조절: 네 모서리 핸들로 너비 조절
- 중앙 스냅: 가로 중앙 근처에서 자동 정렬 가이드 표시
- 폰트 크기: 휠 스크롤 또는 핀치 줌으로 조절 (이동 모드)
- 가상 키보드 대응 (스타일 바 위치 자동 조절)
- 터치 이벤트 지원
- 스타일 버튼 클릭 시 키보드 유지 (Font, Color 제외)
- CSS Container Queries (
cqw): 카드 크기에 비례하는 반응형 폰트 크기 - CSS Transform: 줌 및 패닝 효과
- Flexbox: 레이아웃 구성
- Pointer Events API: 마우스/터치 통합 처리
- Visual Viewport API: 가상 키보드 감지
- setPointerCapture: 안정적인 드래그 처리
editor/
├── digital-card.html # 메인 애플리케이션 (HTML/CSS/JS 통합)
├── server.js # 개발용 로컬 서버
└── README.md # 문서
# 서버 실행 node server.js # 브라우저에서 접속 # http://localhost:3000/
// 선택/편집 상태 let selectedElement = null; // 선택된 DOM 요소 let selectedElementData = null; // 선택된 요소 데이터 let isEditMode = false; // 텍스트 편집 모드 let isEditing = false; // contenteditable 활성화 상태 let isMoveMode = false; // 이동 모드 // 드래그 상태 let isDragging = false; let dragStartX, dragStartY; let elementStartX, elementStartY; // 줌/패닝 상태 let isZoomedIn = false; let isPanning = false; let currentPanY = 0;
| 함수 | 설명 |
|---|---|
renderTextElements() |
텍스트 요소 렌더링 |
enterEditMode() |
텍스트 편집 모드 진입 |
exitEditMode() |
편집 모드 종료 |
selectElement() |
요소 선택 및 핸들 표시 |
startEditing() |
contenteditable 활성화 |
stopEditing() |
contenteditable 비활성화 및 저장 |
zoomIn() |
카드 확대 |
zoomOut() |
카드 축소 |
scrollToEditingElement() |
편집 요소로 자동 스크롤 |
clampPanY() |
패닝 범위 제한 |
updateElementStyle() |
요소 스타일 업데이트 |
[싱글 클릭]
pointerdown → pointerup → 300ms 대기 → enterEditMode()
[더블 클릭]
pointerdown → pointerup → pointerdown (300ms 내) → isMoveMode = true, 드래그 시작
[롱프레스]
pointerdown → 500ms 대기 → isMoveMode = true, 드래그 시작
{ id: 1, // 고유 ID text: '초대합니다', // 텍스트 내용 x: 50, // X 위치 (%) y: 9, // Y 위치 (%) fontSize: 8, // 폰트 크기 (cqw) fontFamily: 'Noto Serif KR', // 폰트 color: '#8B7355', // 색상 bold: false, // 굵게 italic: false, // 기울임 centerX: true, // 가로 중앙 정렬 width: 75, // 너비 (%, 선택적) wrap: true // 줄바꿈 (선택적) }
- Chrome (권장)
- Safari
- Firefox
- Edge
모바일 브라우저 지원 (iOS Safari, Android Chrome)