완료된 것:
- ✅ 디바이스 모드(PC/iPad/Mobile) 전환 시 도형(원형 등) 비율 왜곡 — 폭 비율만큼 높이도 같이 조정하도록 수정
- ✅ 새 모듈 추가 시 게시물 모듈 뒤로 숨는 문제 — 모든 레이어에 명시적 z-index를 부여해 항상 마지막 추가한 게 최상단에 오도록 수정 (기존 "맨 앞/뒤로" 레이어 순서 버튼도 z-index와 어긋나지 않게 같이 손봄)
- ✅ Ctrl+G 그룹 박스에 좌측 상단 그룹 아이콘 추가 — 클릭하면 그룹 해제 (기존 저장된 웹진/매거진의 그룹에도 소급 적용)
- ✅ 미리보기/저장 버튼을 상단 PC/iPad/Mobile 아이콘 옆으로 이동 (매거진 에디터는 이미 이렇게 되어 있어서, 그 구조를 웹진 에디터에도 맞춤)
4번(모바일 최적화)에서 발견한 문제:
에디터의 "Mobile" 미리보기와 실제 공개된 웹진 페이지의 모바일 화면이 서로 다른 방식으로 동작하고 있어요.
- 에디터 안에서 Mobile 버튼을 누르면 캔버스 자체가 375px로 좁아지고 요소들이 그 안에서 재배치됩니다 (텍스트 폰트 크기는 그대로 유지).
- 실제 방문자가 폰으로 볼 때는 그게 아니라, 900px짜리 데스크톱 캔버스 전체를 사진처럼 통째로 축소(
transform: scale)해서 보여주고 있어요. 텍스트도 같이 비율로 줄어듭니다.
즉 지금 에디터에서 "모바일에서 이렇게 보이겠구나" 하고 확인하는 화면이, 실제 방문자가 폰으로 보는 화면과 다릅니다. 그래서 "모바일에서 폰트 크기를 조정하면 그게 유지되게" 기능
---
완료 (웹진 + 매거진 에디터 공통 적용):
- 도형 비율 왜곡 — PC/iPad/Mobile 전환 시 폭이 바뀌는 비율만큼 도형(원형 등)의 높이도 같이 조정해 찌그러지지 않게 함
- 새 모듈이 게시물 뒤로 가는 문제 — 모든 레이어에 명시적 z-index를 부여해 항상 마지막에 추가한 게 최상단에 오도록 수정. 기존 "맨 앞/뒤로" 레이어 순서 버튼도 z-index 체계와 충돌하지 않게 같이 손봄
- 그룹 아이콘 — Ctrl+G로 그룹 묶으면 좌측 상단에 작은 아이콘이 생기고, 클릭하면 그룹 해제. 기존에 저장된 웹진/매거진의 그룹에도 소급 적용됨
- 모바일 전용 스타일 분리 — 아래 상세 설명
- 미리보기/저장 버튼 위치 — 상단 PC/iPad/Mobile 아이콘 옆으로 이동 (매거진 에디터는 이미 그렇게 되어 있어서, 웹진 에디터를 거기 맞춤)
4번 상세:
- 텍스트 요소의 폰트 크기/자간/행간을 Mobile 모드에서 조정하면
data-mobile-size/ls/lh라는 별도 속성에 저장되고, PC 모드로 돌아가면 원래 PC 값이 그대로 유지됩니다. 다시 Mobile로 가면 저장해둔 모바일 값이 적용됩니다. - 실제 공개 웹진 페이지()도 지금까지의 "900px 캔버스를 사진처럼 통째로 축소" 방식에서, 에디터의 Mobile 미리보기와 동일한 "캔버스 폭 자체가 좁아지며 재배치"되는 방식으로 바꿨고, 폰에서 볼 때(
@media max-width:768px) 위에서 저장한 모바일 전용 값이 자동으로 적용되도록 스타일을 주입하게 했습니다. - 범위를 폰트 크기/자간/행간으로만 한정했어요 (말씀하신 예시 그대로). 위치·크기(top/left/height)까지 모바일 전용으로 분리하는 건 이번 범위에 넣지 않았습니다.
- 알아두실 점: 요소들의 세로 위치(top)는 원래 px로 고정돼 있어서, 좁은 화면에서 텍스트가 줄바꿈으로 늘어나면 아래 요소와 겹칠 수 있어요. 샘플 작업하시다가 그런 경우가 보이면, 지금 만든 것과 같은 방식으로 위치/높이도 모바일 전용 오버라이드를 추가하는 게 다음 단계가 될 것 같습니다.
- 매거진은 아직 공개 뷰어(퍼블릭 페이지)가 없어서, 에디터 쪽 로직만 웹진과 동일하게 맞춰뒀습니다.
새 구조 (웹진 + 매거진 에디터 공통):
각 레이어(텍스트/이미지/도형/아이콘/동영상/표/모듈/그룹 전부)마다 PC 전용 스냅샷과 Mobile 전용 스냅샷을 따로 저장합니다 — 위치(top/left), 크기(width/height), 텍스트는 추가로 내용(줄바꿈 포함)·폰트크기·자간·행간까지.
PC ↔ Mobile 전환 시: 지금 보이는 상태를 "떠나는 모드"의 스냅샷으로 저장 → 화면 폭 변경 → "들어가는 모드"의 스냅샷이 있으면 그대로 복원, 없으면 지금 상태 그대로 둠(반응형 기본값 유지).
즉 Mobile에서 도형 크기·위치·텍스트 줄바꿈을 직접 수정하면, 그 값은 PC 값과 완전히 무관하게 별도로 기억되고, PC로 돌아가도 PC 값은 전혀 건드려지지 않습니다. 말씀하신 "이중 작업"이 정확히 이렇게 동작하게 됩니다.
기존에 있던 "폭 비율만큼 도형 높이를 자동 계산해서 늘리는" 로직은 완전히 제거했습니다 — 이게 바로 "엉뚱하게 바뀌는" 원인이었어서, 이제는 자동 계산 없이 각 모드에서 마지막으로 사람이 설정한 값을 그대로 씁니다.
저장 버튼을 누르면, 지금 보고 있는 모드의 상태를 먼저 스냅샷으로 확정한 뒤 저장하므로 모드를 안 바꾸고 바로 저장해도 최신값이 반영됩니다.
공개 웹진 페이지도 동일한 방식으로 변경: 화면 폭이 768px 이하면 저장된 Mobile 스냅샷을, 아니면 PC 스냅샷을 적용합니다. 방문자가 창 크기를 바꾸거나 폰을 회전해도 실시간으로 재적용됩니다. (매거진은 아직 공개 뷰어가 없어 에디터 쪽만 동일하게 적용됨.)
PHP 문법 검사와 각 <script> 블록의 JS 문법 검사 모두 다시 통과했습니다. 이전 버전에서 남아있던 applyDeviceStyleMode 참조(삭제된 함수를 계속 호출해서 에러 났을 부분)도 이번에 찾아서 고쳤습니다.