사이트 점검하기

AI로 만든 내 사이트에 떠 있는 버튼과 메뉴를 읽어 와, 약 40개 이상 기기에서 괜찮은지 확인해요. 읽어 온 자리는 myBoard 레이아웃이 되고, 편집기가 기기마다 겹치거나 잘리거나 누르기엔 작은 곳을 알려 줘요.

북마클릿

myBoard 담기북마크바로 끌어다 놓아요

북마크바가 안 보이면 ⌘⇧B(윈도우는 Ctrl+Shift+B)로 켜요.
위 단추를 북마크바로 끌어다 놓아요.
점검할 사이트에서 북마크를 누르면 작은 창이 떠요. “지금 크기 담기”를 누르고, 창 크기를 바꿔 한 번 더 담은 뒤 “myBoard로 보내기”를 눌러요.

처음이면 예시 페이지에서 먼저 해 볼 수 있어요.

크롬 확장 프로그램

보안 정책이 엄격해서 북마클릿이 막히는 사이트에서도 돼요.

확장 프로그램 받기 (zip)버전 1.0.0

받은 zip 파일을 풀어요. myboard-extension 폴더가 생겨요.
크롬 주소창에 chrome://extensions를 쳐서 열어요.
오른쪽 위의 “개발자 모드”를 켜요.
“압축해제된 확장 프로그램을 로드합니다”를 누르고 myboard-extension 폴더를 골라요.
주소창 옆 퍼즐 조각 아이콘에서 myBoard를 고정해 두면 편해요. 점검할 사이트에서 아이콘을 누르면 같은 창이 떠요.

휴대폰

아이폰 사파리

이 페이지에서 공유 단추를 눌러 “북마크 추가”로 북마크를 하나 만들어요.
위의 “북마클릿 주소 복사”를 눌러요.
북마크 목록에서 편집을 눌러 방금 만든 북마크를 열고, 이름은 myBoard로, 주소는 지우고 복사한 주소를 붙여 넣어요.
점검할 사이트에서 북마크 목록을 열고 myBoard를 눌러요.

안드로이드 크롬

“북마클릿 주소 복사”를 눌러요.
⋮ 메뉴의 ☆로 이 페이지를 북마크에 넣고, 북마크 수정에서 이름은 myBoard로, 주소는 복사한 주소로 바꿔요.
점검할 사이트의 주소창에 myBoard를 쳐서, 목록에 뜬 북마크를 눌러요.

콘솔 코드

사파리나, 북마클릿을 눌러도 창이 뜨지 않는 사이트에서 써요.

점검할 사이트에서 개발자 도구의 콘솔을 열어요. 크롬은 ⌥⌘J(윈도우 Ctrl+Shift+J), 사파리는 설정의 고급에서 “웹 개발자를 위한 기능 보기”를 켠 뒤 ⌥⌘C예요.
아래 코드를 복사해서 콘솔에 붙여 넣고 Enter를 눌러요. 크롬이 붙여 넣기를 막으면 allow pasting을 먼저 쳐요.

(function () {
"use strict";
const CLASS_NAMES = { watch: "워치", phone: "휴대폰", tablet: "태블릿", desktop: "데스크톱", board: "전자칠판" };
function classOf(W, H, pointer) {
const s = Math.min(W, H), l = Math.max(W, H);
if (s < 300) return "watch";
if (s < 600) return "phone";
if (pointer === "fine" && l >= 1024) return "desktop";
if (pointer === "coarse" && l >= 1900) return "board";
if (l > 1400) return "desktop";
return "tablet";
}
function detectPointer(win) {
try {
if (!win || typeof win.matchMedia !== "function") return undefined;
if (win.matchMedia("(pointer: fine)").matches) return "fine";
if (win.matchMedia("(pointer: coarse)").matches) return "coarse";
} catch (e) { /* matchMedia를 못 쓰는 환경 */ }
return undefined;
}
const CAPTURE_TOOL_VERSION = 1;
const CAPTURE_DEFAULT_ORIGIN = "https://myboard.my";
function captureShape(radii, w, h) {
const m = Math.min(w, h);
let lo = radii.length ? Infinity : 0, hi = 0;
for (let i = 0; i < radii.length; i++) {
const r = +radii[i] || 0;
if (r < lo) lo = r;
if (r > hi) hi = r;
}
if (Math.abs(w - h) <= 2 && lo >= m / 2 - 1) return "circle";
return hi >= 1 ? "rounded" : "rect";
}
function captureFlags(vw, vh, W, H) {
const o = {};
if (vw >= W * 0.9 && vh <= H * 0.25) o.bar = "x";
else if (vh >= H * 0.9 && vw <= W * 0.25) o.bar = "y";
if (vw * vh > W * H * 0.5) o.cover = true;
return o;
}
function captureInsetValue(v) {
if (v === null || v === undefined) return null;
const s = String(v).trim();
if (!s) return null;
if (s === "auto") return "auto";
let m = /^(-?(?:\d+\.?\d*|\.\d+)(?:e[-+]?\d+)?)px$/i.exec(s);
if (m) return Math.round(parseFloat(m[1]) * 10) / 10;
m = /^(-?(?:\d+\.?\d*|\.\d+)(?:e[-+]?\d+)?)%$/i.exec(s);
if (m) return Math.round(parseFloat(m[1]) * 10) / 10 + "%";
return s.slice(0, 60);
}
function startPageCapture(win, opts) {
opts = opts || {};
const doc = win.document;
if (!doc || !doc.documentElement) return null;
const ORIGIN = typeof opts.origin === "string" && opts.origin ? opts.origin : CAPTURE_DEFAULT_ORIGIN;
const TOOL = (typeof opts.tool === "string" && opts.tool ? opts.tool : "console") + "@" + CAPTURE_TOOL_VERSION;
const WAIT = typeof opts.timeoutMs === "number" && opts.timeoutMs > 0 ? opts.timeoutMs : 4000;
const BUILD = typeof opts.build === "string" ? opts.build.slice(0, 40) : "";
const KIND = "myboard-capture";
const prev = win.__myboardCapture;
if (prev && typeof prev === "object" && prev.kind === KIND) {
try {
if (prev.version === CAPTURE_TOOL_VERSION && prev.build === BUILD && prev.origin === ORIGIN && typeof prev.show === "function" && prev.show() === true) return prev;
} catch (e) {
}
try {
if (typeof prev.close === "function") prev.close();
} catch (e) {
}
}
const MAX_NODES = 40000, MAX_ITEMS = 400, MAX_KIDS = 60, MAX_CAPTURES = 12, MIN = 4, TEXT_MAX = 40;
const REJECT = 2, SKIP = 3;
const INTERACTIVE = 'button, a[href], input:not([type="hidden"]), select, textarea, summary, [role="button"], [role="link"], [role="tab"], [role="menuitem"], [role="switch"], [role="checkbox"]';
const FOCUSABLE = '[tabindex]:not([tabindex="-1"])';
const EDITABLE = 'input, textarea, select, [contenteditable]:not([contenteditable="false"])';
const VIS_OPTS = { checkOpacity: true, checkVisibilityCSS: true, opacityProperty: true, visibilityProperty: true };
const keys = new WeakMap(), usedKeys = new Set();
let nextKey = 0;
const captures = [];
const pending = new Set();
let host = null, shadow = null, ui = null, pointerQuery = null, placeTimer = 0;
const cutText = s => Array.from(String(s == null ? "" : s).slice(0, TEXT_MAX * 4)).slice(0, TEXT_MAX).join("");
const clean = s => cutText(String(s == null ? "" : s).slice(0, 2000).replace(/\s+/g, " ").trim());
const r1 = v => Math.round(v * 10) / 10;
const tagOf = el => String(el.tagName || "").toUpperCase();
const attr = (el, name) => (el.getAttribute && el.getAttribute(name)) || "";
const styleOf = el => {
const v = el.ownerDocument && el.ownerDocument.defaultView;
try {
return v ? v.getComputedStyle(el) : null;
} catch (e) {
return null;
}
};
const matchesSafe = (el, sel) => {
try {
return el.matches(sel);
} catch (e) {
return false;
}
};
const shadowOf = el => {
try {
return (typeof opts.shadowRootOf === "function" ? opts.shadowRootOf(el) : el.shadowRoot) || null;
} catch (e) {
return null;
}
};
const parentOf = el => el.parentElement || (el.parentNode && el.parentNode.host) || null;
const viewport = () => {
const se = doc.compatMode === "BackCompat" && doc.body ? doc.body : doc.documentElement;
return { W: se.clientWidth, H: se.clientHeight };
};
const zoomOf = () => {
const vv = win.visualViewport;
return vv && isFinite(vv.scale) && vv.scale > 0 ? Math.round(vv.scale * 100) / 100 : 1;
};
const isVisible = (el, cs) => {
if (typeof el.checkVisibility === "function") {
try {
return el.checkVisibility(VIS_OPTS);
} catch (e) {
return false;
}
}
return cs.visibility !== "hidden" && cs.visibility !== "collapse" && parseFloat(cs.opacity) > 0;
};
const rectOf = (el, ctx) => {
const r = el.getBoundingClientRect();
return { x: r.left + ctx.ox, y: r.top + ctx.oy, w: r.width, h: r.height };
};
const visiblePart = (b, clip) => ({ w: Math.min(b.x + b.w, clip.x1) - Math.max(b.x, clip.x0), h: Math.min(b.y + b.h, clip.y1) - Math.max(b.y, clip.y0) });
const onScreen = (b, clip) => {
if (b.w < MIN || b.h < MIN) return false;
const v = visiblePart(b, clip);
return v.w >= MIN && v.h >= MIN;
};
const keyOf = el => {
let k = keys.get(el);
if (k) return k;
const scope = el.getRootNode ? el.getRootNode() : el.ownerDocument;
const esc = win.CSS && typeof win.CSS.escape === "function" ? win.CSS.escape : null;
const unique = sel => {
try {
return !!scope.querySelectorAll && scope.querySelectorAll(sel).length === 1;
} catch (e) {
return false;
}
};
const id = attr(el, "id"), tid = attr(el, "data-testid");
if (esc && id && id.length <= 60 && unique("#" + esc(id))) k = "#" + id;
else if (esc && tid && tid.length <= 60 && unique('[data-testid="' + esc(tid) + '"]')) k = "t:" + tid;
if (!k || usedKeys.has(k)) k = "n" + (++nextKey);
usedKeys.add(k);
keys.set(el, k);
return k;
};
const roleOf = (el, cs) => {
const r = attr(el, "role").trim().split(/\s+/)[0].toLowerCase();
if (/^[a-z][a-z-]{0,23}$/.test(r)) return r;
const t = tagOf(el);
if (t === "BUTTON" || t === "SUMMARY") return "button";
if (t === "A" && el.hasAttribute("href")) return "link";
if (t === "INPUT") {
const ty = attr(el, "type").toLowerCase();
if (/^(button|submit|reset|image)$/.test(ty)) return "button";
if (ty === "checkbox" || ty === "radio") return ty;
if (ty === "range") return "slider";
return "textbox";
}
if (t === "SELECT") return "combobox";
if (t === "TEXTAREA") return "textbox";
if (t === "IFRAME") return "iframe";
if (t === "CANVAS") return "canvas";
if (t === "VIDEO") return "video";
if (t === "IMG") return "img";
if (t === "NAV") return "navigation";
if (t === "HEADER") return "banner";
if (t === "FOOTER") return "contentinfo";
if (t === "ASIDE") return "complementary";
if (t === "DIALOG") return "dialog";
return cs && cs.cursor === "pointer" ? "button" : "";
};
const labelledBy = el => {
const ids = attr(el, "aria-labelledby").trim();
if (!ids) return "";
const scope = el.getRootNode ? el.getRootNode() : el.ownerDocument;
const out = [];
ids.split(/\s+/).slice(0, 5).forEach(id => {
const n = scope && typeof scope.getElementById === "function" ? scope.getElementById(id) : null;
if (!n || n.isContentEditable || matchesSafe(n, EDITABLE) || (n.querySelector && n.querySelector(EDITABLE))) return;
out.push(n.textContent || "");
});
return out.join(" ");
};
const nameOf = (el, leaf) => {
let s = attr(el, "aria-label") || labelledBy(el) || attr(el, "title");
const t = tagOf(el);
if (!s && t === "IMG") s = attr(el, "alt");
if (!s && (t === "INPUT" || t === "TEXTAREA")) s = attr(el, "placeholder");
if (!s && leaf && el.querySelector) {
const img = el.querySelector("img[alt]");
if (img) s = attr(img, "alt");
if (!s) {
const st = el.querySelector("svg title");
if (st) s = st.textContent || "";
}
}
return clean(s);
};
const shadowText = sr => {
if (sr.querySelector && sr.querySelector(EDITABLE)) return "";
const out = [];
const kids = sr.children || [];
for (let i = 0; i < kids.length; i++) {
const t = tagOf(kids[i]);
if (t === "STYLE" || t === "SCRIPT" || t === "TEMPLATE" || t === "LINK") continue;
if (typeof kids[i].innerText === "string") out.push(kids[i].innerText);
}
return out.join(" ");
};
const textOf = el => {
const t = tagOf(el);
if (t === "INPUT" || t === "TEXTAREA" || t === "SELECT" || el.isContentEditable) return "";
if (el.querySelector && el.querySelector(EDITABLE)) return "";
let s = typeof el.innerText === "string" ? el.innerText : "";
if (!s.trim()) {
const sr = shadowOf(el);
if (sr) s = shadowText(sr);
}
return clean(s);
};
const radiusPx = (v, m) => {
const s = String(v || "0").trim().split(/\s+/)[0];
const n = parseFloat(s);
if (!isFinite(n)) return 0;
return /%$/.test(s) ? n / 100 * m : n;
};
const shapeOf = (cs, w, h) => {
const m = Math.min(w, h);
return captureShape([cs.borderTopLeftRadius, cs.borderTopRightRadius, cs.borderBottomRightRadius, cs.borderBottomLeftRadius].map(v => radiusPx(v, m)), w, h);
};
const insetsOf = el => {
if (typeof el.computedStyleMap !== "function") return null;
try {
const map = el.computedStyleMap();
return { top: captureInsetValue(map.get("top")), right: captureInsetValue(map.get("right")), bottom: captureInsetValue(map.get("bottom")), left: captureInsetValue(map.get("left")) };
} catch (e) {
return null;
}
};
const hintOf = el => {
const id = attr(el, "id");
const cls = attr(el, "class").trim().split(/\s+/).filter(Boolean).slice(0, 8).map(c => "." + c).join(" ");
return Array.from(((id ? "#" + id + " " : "") + cls).trim()).slice(0, 80).join("");
};
const alphaOf = c => {
const s = String(c || "").trim();
if (!s || s === "transparent") return 0;
const m = /\/\s*([\d.]+)(%?)\s*\)$/.exec(s) || /^rgba\([^,]+,[^,]+,[^,]+,\s*([\d.]+)(%?)\s*\)$/.exec(s);
if (!m) return 1;
return m[2] ? parseFloat(m[1]) / 100 : parseFloat(m[1]);
};
const isBlank = cs => {
if (alphaOf(cs.backgroundColor) > 0.02) return false;
if (cs.backgroundImage && cs.backgroundImage !== "none") return false;
if (cs.boxShadow && cs.boxShadow !== "none") return false;
if (cs.backdropFilter && cs.backdropFilter !== "none") return false;
const sides = ["Top", "Right", "Bottom", "Left"];
for (let i = 0; i < sides.length; i++) {
if (parseFloat(cs["border" + sides[i] + "Width"]) > 0 && !/^(none|hidden)$/.test(cs["border" + sides[i] + "Style"])) return false;
}
return true;
};
const startsPointer = (el, cs) => {
if (cs.cursor !== "pointer") return false;
const p = parentOf(el);
const pcs = p ? styleOf(p) : null;
return !pcs || pcs.cursor !== "pointer";
};
const isInteractive = (el, cs) => {
if (matchesSafe(el, INTERACTIVE)) return true;
if (!matchesSafe(el, FOCUSABLE) && !startsPointer(el, cs)) return false;
return !(el.querySelector && el.querySelector(INTERACTIVE));
};
const isPositioned = cs => cs.position === "absolute" || cs.position === "fixed";
const pushItem = (ctx, it) => {
if (ctx.st.items.length >= MAX_ITEMS) {
ctx.st.warn.truncated = true;
return false;
}
ctx.st.items.push(it);
return true;
};
const makeItem = (el, cs, kind, b, ctx, parentKey) => {
const v = visiblePart(b, ctx.clip);
const it = { key: keyOf(el), kind: kind, role: roleOf(el, cs), name: "", text: "", shape: shapeOf(cs, b.w, b.h), box: [r1(b.x), r1(b.y), r1(b.w), r1(b.h)], z: (parseInt(cs.zIndex, 10) || 0), hint: hintOf(el) };
if (parentKey) it.parent = parentKey;
const f = captureFlags(Math.max(0, v.w), Math.max(0, v.h), ctx.W, ctx.H);
if (f.bar) it.bar = f.bar;
if (f.cover) it.cover = true;
return it;
};
const frameDoc = el => {
try {
const d = el.contentDocument;
return d && d.documentElement ? d : null;
} catch (e) {
return null;
}
};
const noteFrame = (el, ctx) => {
if (ctx.st.frames.has(el)) return;
ctx.st.frames.add(el);
if (!frameDoc(el)) ctx.st.warn.closedFrames++;
};
const noteCanvas = (el, cs, ctx) => {
if (!isVisible(el, cs)) return;
const v = visiblePart(rectOf(el, ctx), ctx.clip);
if (v.w <= 0 || v.h <= 0) return;
const a = v.w * v.h / (ctx.W * ctx.H);
if (a > ctx.st.canvas) ctx.st.canvas = a;
};
const engineOf = () => {
try {
if (win.createUnityInstance || win.UnityLoader || doc.querySelector("#unity-canvas, #unity-container")) return "unity";
if (doc.querySelector("flutter-view, flt-glass-pane, flt-scene-host")) return "flutter";
if (win.Phaser) return "phaser";
if (win.PIXI) return "pixi";
if (win.cc && win.cc.game) return "cocos";
if (win.BABYLON) return "babylon";
if (win.pc && win.pc.Application) return "playcanvas";
if (win.THREE) return "three";
} catch (e) {
return "unknown";
}
return "unknown";
};
const cannotScroll = d => {
const de = d.documentElement, body = d.body;
const se = d.compatMode === "BackCompat" && body ? body : de;
if (se.scrollHeight <= se.clientHeight + 2) return true;
const v = d.defaultView;
if (!v) return false;
const o1 = v.getComputedStyle(de).overflowY, o2 = body ? v.getComputedStyle(body).overflowY : "";
return /^(hidden|clip)$/.test(o1) || /^(hidden|clip)$/.test(o2);
};
const scrolls = (a, st) => {
let v = st.scrollers.get(a);
if (v !== undefined) return v;
const cs = styleOf(a);
v = !!cs && ((/^(auto|scroll|overlay)$/.test(cs.overflowY) && a.scrollHeight > a.clientHeight + 2) || (/^(auto|scroll|overlay)$/.test(cs.overflowX) && a.scrollWidth > a.clientWidth + 2));
st.scrollers.set(a, v);
return v;
};
const inScroller = (el, st) => {
for (let a = parentOf(el); a; a = parentOf(a)) {
const d = a.ownerDocument;
if (!d || a === d.documentElement) return false;
if (a === d.body) {
const ds = styleOf(d.documentElement);
if (ds && ds.overflowX === "visible" && ds.overflowY === "visible") continue;
}
if (scrolls(a, st)) return true;
}
return false;
};
const rootKind = (el, cs, ctx) => {
const p = cs.position;
if ((p === "fixed" || p === "absolute") && (matchesSafe(el, ":modal") || matchesSafe(el, ":popover-open"))) return "top-layer";
if (p === "fixed") return "fixed";
if (p === "sticky" || p === "-webkit-sticky") return "sticky";
if (ctx.noScroll && p === "absolute" && cs.zIndex !== "auto" && parseInt(cs.zIndex, 10) > 0 && !inScroller(el, ctx.st)) return "absolute";
return null;
};
const collectChildren = (rootEl, ctx, hud) => {
const out = [], st = ctx.st;
let more = false;
const visitKid = el => {
if (st.stop || more) return REJECT;
if (++st.nodes > MAX_NODES) {
st.warn.truncated = true;
st.stop = true;
return REJECT;
}
if (el === host) return REJECT;
const tag = tagOf(el);
if (out.length >= MAX_KIDS) {
const strong = tag === "IFRAME" || matchesSafe(el, INTERACTIVE) || matchesSafe(el, FOCUSABLE);
const cs = strong || hud ? styleOf(el) : null;
if (strong || (cs && isPositioned(cs))) {
if (cs && isVisible(el, cs) && onScreen(rectOf(el, ctx), ctx.clip)) more = true;
return REJECT;
}
} else {
const cs = styleOf(el);
if (!cs || cs.display === "none") return REJECT;
if (tag === "CANVAS") noteCanvas(el, cs, ctx);
const frame = tag === "IFRAME";
if (frame || isInteractive(el, cs) || (hud && isPositioned(cs))) {
if (isVisible(el, cs)) {
const b = rectOf(el, ctx);
if (onScreen(b, ctx.clip)) {
out.push({ el: el, cs: cs, b: b });
if (frame) noteFrame(el, ctx);
}
}
return REJECT;
}
}
const sr = shadowOf(el);
if (sr) walkKids(sr);
return SKIP;
};
const walkKids = node => {
const d = node.ownerDocument || node;
const tw = d.createTreeWalker(node, 1, { acceptNode: visitKid });
let n = tw.nextNode();
while (n) n = tw.nextNode();
};
walkKids(rootEl);
const rsr = shadowOf(rootEl);
if (rsr) walkKids(rsr);
if (more) st.warn.truncated = true;
return out;
};
const pushLeaf = (k, kind, parentKey, ctx, z) => {
const it = makeItem(k.el, k.cs, kind, k.b, ctx, parentKey);
it.name = nameOf(k.el, true);
it.text = textOf(k.el);
if (kind !== "child") {
it.insets = null;
it.z = z || 0;
}
return pushItem(ctx, it);
};
const takeRoot = (el, cs, kind, ctx) => {
if (!isVisible(el, cs)) return false;
if (tagOf(el) === "CANVAS") noteCanvas(el, cs, ctx);
const b = rectOf(el, ctx);
if (b.w < MIN || b.h < MIN) {
const kids = collectChildren(el, ctx, true);
kids.forEach(k => pushLeaf(k, kind, null, ctx, parseInt(cs.zIndex, 10) || 0));
return kids.length > 0;
}
if (!onScreen(b, ctx.clip)) return false;
const it = makeItem(el, cs, kind, b, ctx, null);
it.insets = ctx.depth ? null : insetsOf(el);
if (!/^(IFRAME|IMG|CANVAS|VIDEO|SVG|OBJECT|EMBED|PICTURE)$/.test(tagOf(el)) && isBlank(cs)) it.blank = true;
const kids = collectChildren(el, ctx, !!(it.blank && it.cover));
it.name = nameOf(el, !kids.length);
it.text = textOf(el);
if (tagOf(el) === "IFRAME") noteFrame(el, ctx);
if (!pushItem(ctx, it)) return true;
kids.forEach(k => pushLeaf(k, "child", it.key, ctx));
return true;
};
const enterFrame = (el, cs, ctx) => {
if (!isVisible(el, cs)) return;
const b = rectOf(el, ctx);
if (!onScreen(b, ctx.clip)) return;
noteFrame(el, ctx);
const d = frameDoc(el);
if (!d) return;
const pl = parseFloat(cs.paddingLeft) || 0, pt = parseFloat(cs.paddingTop) || 0;
const ox = b.x + el.clientLeft + pl, oy = b.y + el.clientTop + pt;
const iw = el.clientWidth - pl - (parseFloat(cs.paddingRight) || 0), ih = el.clientHeight - pt - (parseFloat(cs.paddingBottom) || 0);
const clip = { x0: Math.max(ctx.clip.x0, ox), y0: Math.max(ctx.clip.y0, oy), x1: Math.min(ctx.clip.x1, ox + iw), y1: Math.min(ctx.clip.y1, oy + ih) };
if (clip.x1 - clip.x0 < MIN || clip.y1 - clip.y0 < MIN) return;
const still = ctx.noScroll && !inScroller(el, ctx.st) && cannotScroll(d);
walkNode(d, Object.assign({}, ctx, { ox: ox, oy: oy, clip: clip, noScroll: still, depth: ctx.depth + 1 }));
};
const visit = (el, ctx) => {
const st = ctx.st;
if (st.stop) return REJECT;
if (++st.nodes > MAX_NODES) {
st.warn.truncated = true;
st.stop = true;
return REJECT;
}
if (el === host) return REJECT;
const cs = styleOf(el);
if (!cs || cs.display === "none") return REJECT;
const tag = tagOf(el);
if (tag === "CANVAS") noteCanvas(el, cs, ctx);
const kind = rootKind(el, cs, ctx);
if (kind && takeRoot(el, cs, kind, ctx)) return REJECT;
if (tag === "IFRAME") {
enterFrame(el, cs, ctx);
return REJECT;
}
const sr = shadowOf(el);
if (sr) walkNode(sr, ctx);
return SKIP;
};
const walkNode = (node, ctx) => {
const d = node.ownerDocument || node;
const tw = d.createTreeWalker(node, 1, { acceptNode: el => visit(el, ctx) });
let n = tw.nextNode();
while (n) n = tw.nextNode();
};
const safeAreaOf = () => {
const o = { top: 0, right: 0, bottom: 0, left: 0 };
if (!shadow) return o;
const p = doc.createElement("div");
try {
p.style.position = "fixed";
p.style.visibility = "hidden";
p.style.pointerEvents = "none";
p.style.paddingTop = "env(safe-area-inset-top)";
p.style.paddingRight = "env(safe-area-inset-right)";
p.style.paddingBottom = "env(safe-area-inset-bottom)";
p.style.paddingLeft = "env(safe-area-inset-left)";
shadow.appendChild(p);
const cs = win.getComputedStyle(p);
o.top = r1(parseFloat(cs.paddingTop) || 0);
o.right = r1(parseFloat(cs.paddingRight) || 0);
o.bottom = r1(parseFloat(cs.paddingBottom) || 0);
o.left = r1(parseFloat(cs.paddingLeft) || 0);
} catch (e) {
return o;
} finally {
if (p.parentNode) p.parentNode.removeChild(p);
}
return o;
};
const snapshot = () => {
const vp = viewport();
const st = { nodes: 0, stop: false, items: [], frames: new Set(), scrollers: new Map(), canvas: 0, warn: { canvas: null, closedFrames: 0, zoom: zoomOf(), truncated: false } };
const ctx = { st: st, W: vp.W, H: vp.H, ox: 0, oy: 0, depth: 0, clip: { x0: 0, y0: 0, x1: vp.W, y1: vp.H }, noScroll: cannotScroll(doc) };
walkNode(doc, ctx);
if (st.canvas >= 0.4) st.warn.canvas = engineOf();
return {
W: vp.W, H: vp.H, innerW: win.innerWidth, innerH: win.innerHeight,
pointer: detectPointer(win) || null, dpr: Math.round((win.devicePixelRatio || 1) * 1000) / 1000,
safeArea: safeAreaOf(), items: st.items, warn: st.warn
};
};
const payload = () => JSON.stringify({ myboardCapture: 1, tool: TOOL, host: String(win.location && win.location.hostname || ""), captures: captures });
const dark = (() => {
try {
return !!(win.matchMedia && win.matchMedia("(prefers-color-scheme: dark)").matches);
} catch (e) {
return false;
}
})();
const COLOR = dark
? { bg: "#24272d", fg: "#e6e8ec", muted: "#a3a9b4", line: "#474d57", btn: "#2f333a", accent: "#7a9cf0", onAccent: "#0f1626", warn: "#e0a43a" }
: { bg: "#ffffff", fg: "#1d2127", muted: "#5b626e", line: "#c4c9d1", btn: "#f3f4f6", accent: "#2b59c3", onAccent: "#ffffff", warn: "#9a5b00" };
const FONT = '-apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif';
const setStyle = (el, o) => {
Object.keys(o).forEach(k => {
el.style[k] = o[k];
});
return el;
};
const make = (tag, o, text) => {
const el = doc.createElement(tag);
if (o) setStyle(el, o);
if (text !== undefined && text !== null) el.textContent = text;
return el;
};
const say = (msg, isWarn) => {
if (!ui) return;
ui.status.textContent = msg || "";
ui.status.style.color = isWarn ? COLOR.warn : COLOR.fg;
ui.status.style.display = msg ? "block" : "none";
};
const showManual = text => {
if (!ui) return;
ui.manual.textContent = text;
ui.manual.style.display = "block";
};
const refresh = () => {
if (!ui) return;
const vp = viewport(), p = detectPointer(win);
ui.size.textContent = "지금 화면 " + vp.W + " × " + vp.H + " (" + CLASS_NAMES[classOf(vp.W, vp.H, p)] + ")";
ui.list.textContent = captures.length
? "담은 크기 " + captures.length + "개: " + captures.map(c => c.W + " × " + c.H).join(", ")
: "창 크기를 바꿔 가며 여러 번 담을 수 있어요.";
};
const selectionCopy = text => {
const holder = make("pre", { position: "fixed", left: "-10000px", top: "0", whiteSpace: "pre", opacity: "0" }, text);
let ok = false;
try {
panelParent().appendChild(holder);
const sel = win.getSelection ? win.getSelection() : null;
const range = doc.createRange();
range.selectNodeContents(holder);
if (sel) {
sel.removeAllRanges();
sel.addRange(range);
}
ok = !!doc.execCommand && doc.execCommand("copy");
if (sel) sel.removeAllRanges();
} catch (e) {
ok = false;
} finally {
if (holder.parentNode) holder.parentNode.removeChild(holder);
}
return ok;
};
const copyText = text => {
const cb = win.navigator && win.navigator.clipboard;
if (cb && typeof cb.writeText === "function" && win.isSecureContext) {
let p;
try {
p = cb.writeText(text);
} catch (e) {
p = Promise.reject(e);
}
return Promise.resolve(p).then(() => true, () => selectionCopy(text));
}
return Promise.resolve(selectionCopy(text));
};
const capture = () => {
const snap = snapshot();
const same = captures.findIndex(c => c.W === snap.W && c.H === snap.H && c.pointer === snap.pointer);
if (same >= 0) captures[same] = snap;
else if (captures.length >= MAX_CAPTURES) {
say("크기는 " + MAX_CAPTURES + "개까지 담을 수 있어요.", true);
return null;
} else captures.push(snap);
refresh();
const n = snap.items.length;
let msg = n ? snap.W + " × " + snap.H + " 화면에서 요소 " + n + "개를 담았어요." : "이 화면에서는 떠 있는 요소를 찾지 못했어요.";
if (same >= 0) msg = "같은 크기라 새로 담은 것으로 바꿨어요. " + msg;
if (snap.warn.canvas) msg += " 화면 대부분이 canvas라서 그 안에 그린 버튼은 담지 못해요.";
say(msg, !n || !!snap.warn.canvas);
return snap;
};
const copyOnly = () => {
if (!captures.length) capture();
const data = payload();
return copyText(data).then(ok => {
if (ok) say("클립보드에 복사했어요. myBoard에서 붙여 넣어 주세요.");
else {
say("복사하지 못했어요. 아래 내용을 직접 복사해 주세요.", true);
showManual(data);
}
return ok;
});
};
const BOARD_URL = ORIGIN + "/#capture";
const openBoard = () => {
let w = null;
try {
w = win.open("", "_blank");
} catch (e) {
w = null;
}
if (!w) return { w: null, blocked: true };
try {
const d = w.document;
const a = d.createElement("a");
a.referrerPolicy = "no-referrer";
a.setAttribute("href", BOARD_URL);
const box = d.body || d.documentElement;
if (box) box.appendChild(a);
a.click();
return { w: w, blocked: false };
} catch (e) {
try {
w.close();
} catch (err) {
}
return { w: null, blocked: false };
}
};
const send = () => {
if (!captures.length) capture();
const data = payload();
const copied = copyText(data);
const opened = openBoard();
const w = opened.w;
const fallback = (first, where) => {
copied.then(ok => {
if (ok) say(first + " myBoard" + where + " 붙여 넣어 주세요. 클립보드에 복사해 뒀어요.", true);
else {
say(first + " 아래 내용을 복사해서 myBoard" + where + " 붙여 넣어 주세요.", true);
showManual(data);
}
});
};
if (!w) {
fallback(opened.blocked ? "새 창이 막혔어요." : "자동으로 보내지 못했어요.", "를 직접 열고");
return;
}
say("myBoard를 여는 중이에요…");
const job = { timer: 0, onMessage: null };
const finish = () => {
win.removeEventListener("message", job.onMessage);
clearTimeout(job.timer);
pending.delete(job);
};
job.onMessage = e => {
if (e.origin !== ORIGIN || e.source !== w) return;
const m = e.data;
if (!m || typeof m !== "object" || m.type !== "ab-ready") return;
finish();
try {
w.postMessage({ type: "ab-capture", v: 1, data: data }, ORIGIN);
say("myBoard로 보냈어요.");
} catch (err) {
fallback("자동으로 보내지 못했어요.", "에서");
}
};
win.addEventListener("message", job.onMessage);
job.timer = setTimeout(() => {
finish();
fallback("자동으로 보내지 못했어요.", "에서");
}, WAIT);
pending.add(job);
};
const panelParent = () => {
const fs = doc.fullscreenElement || doc.webkitFullscreenElement || null;
if (fs && !/^(CANVAS|VIDEO|IFRAME|IMG)$/.test(tagOf(fs))) return fs;
let modal = null;
try {
const list = doc.querySelectorAll("dialog:modal");
modal = list.length ? list[list.length - 1] : null;
} catch (e) {
modal = null;
}
return modal || doc.documentElement;
};
const place = () => {
if (!host) return;
const p = panelParent();
if (host.parentNode !== p) p.appendChild(host);
};
const close = () => {
pending.forEach(job => {
win.removeEventListener("message", job.onMessage);
clearTimeout(job.timer);
});
pending.clear();
clearInterval(placeTimer);
win.removeEventListener("resize", refresh);
if (pointerQuery && typeof pointerQuery.removeEventListener === "function") pointerQuery.removeEventListener("change", refresh);
if (host && host.parentNode) host.parentNode.removeChild(host);
ui = null;
if (win.__myboardCapture === api) {
try {
delete win.__myboardCapture;
} catch (e) {
win.__myboardCapture = undefined;
}
}
};
const show = () => {
if (!host || !ui) return false;
place();
refresh();
return true;
};
const build = () => {
host = doc.createElement("div");
host.setAttribute("data-myboard-capture", "1");
setStyle(host, { all: "initial", position: "fixed", left: "12px", top: "12px", zIndex: "2147483647", display: "block" });
try {
shadow = host.attachShadow({ mode: "open" });
} catch (e) {
shadow = host;
}
const box = make("div", {
boxSizing: "border-box", width: "352px", maxWidth: "calc(100vw - 24px)", padding: "10px 12px 12px",
background: COLOR.bg, color: COLOR.fg, border: "1px solid " + COLOR.line, borderRadius: "5px",
boxShadow: "0 4px 16px rgba(0, 0, 0, 0.16)", font: "13px/1.45 " + FONT, textAlign: "left", wordBreak: "keep-all"
});
box.setAttribute("role", "dialog");
box.setAttribute("aria-label", "myBoard 사이트 점검");
const head = make("div", { display: "flex", alignItems: "center", gap: "8px", margin: "0 0 2px", cursor: "move", userSelect: "none", webkitUserSelect: "none", touchAction: "none" });
head.title = "끌어서 옮길 수 있어요";
head.appendChild(make("div", { fontWeight: "600", fontSize: "13px" }, "myBoard"));
const size = make("div", { fontSize: "12px", color: COLOR.muted, fontVariantNumeric: "tabular-nums" });
const list = make("div", { fontSize: "12px", color: COLOR.muted, fontVariantNumeric: "tabular-nums", margin: "2px 0 0" });
const row = make("div", { display: "flex", flexWrap: "wrap", gap: "6px", margin: "10px 0 0" });
const button = (text, tip, primary, fn) => {
const b = make("button", {
font: "12px/1.2 " + FONT, margin: "0", padding: "6px 10px", borderRadius: "4px", cursor: "pointer", whiteSpace: "nowrap",
border: "1px solid " + (primary ? COLOR.accent : COLOR.line), background: primary ? COLOR.accent : COLOR.btn, color: primary ? COLOR.onAccent : COLOR.fg
}, text);
b.type = "button";
b.title = tip;
b.addEventListener("click", e => {
e.preventDefault();
e.stopPropagation();
fn();
});
row.appendChild(b);
return b;
};
button("지금 크기 담기", "지금 화면에 떠 있는 요소의 위치와 크기를 담아요. 페이지를 새로 고치면 담은 내용이 사라져요.", false, capture);
button("myBoard로 보내기", "클립보드에 복사하고 myBoard를 새 창으로 열어요.", true, send);
button("복사만", "myBoard에 붙여 넣을 내용을 클립보드에 복사해요.", false, copyOnly);
button("닫기", "이 창을 닫아요. 담은 내용도 지워져요.", false, close);
const status = make("div", { display: "none", fontSize: "12px", margin: "8px 0 0" });
status.setAttribute("role", "status");
status.setAttribute("aria-live", "polite");
const manual = make("pre", {
display: "none", boxSizing: "border-box", maxHeight: "96px", overflow: "auto", margin: "8px 0 0", padding: "6px",
font: "11px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace", whiteSpace: "pre-wrap", wordBreak: "break-all",
userSelect: "all", webkitUserSelect: "all", background: COLOR.btn, color: COLOR.fg, border: "1px solid " + COLOR.line, borderRadius: "4px"
});
[head, size, list, row, status, manual].forEach(n => box.appendChild(n));
shadow.appendChild(box);
ui = { box: box, size: size, list: list, status: status, manual: manual };
let drag = null;
head.addEventListener("pointerdown", e => {
if (e.button !== 0) return;
const r = host.getBoundingClientRect();
drag = { dx: e.clientX - r.left, dy: e.clientY - r.top };
try {
head.setPointerCapture(e.pointerId);
} catch (err) {
}
e.preventDefault();
});
head.addEventListener("pointermove", e => {
if (!drag) return;
const vp = viewport(), r = host.getBoundingClientRect();
const x = Math.max(0, Math.min(vp.W - r.width, e.clientX - drag.dx)), y = Math.max(0, Math.min(vp.H - r.height, e.clientY - drag.dy));
host.style.left = Math.round(x) + "px";
host.style.top = Math.round(y) + "px";
});
const endDrag = () => {
drag = null;
};
head.addEventListener("pointerup", endDrag);
head.addEventListener("pointercancel", endDrag);
box.addEventListener("keydown", e => {
if (e.key === "Escape") {
e.stopPropagation();
close();
}
});
win.addEventListener("resize", refresh);
try {
pointerQuery = win.matchMedia ? win.matchMedia("(pointer: coarse)") : null;
if (pointerQuery && typeof pointerQuery.addEventListener === "function") pointerQuery.addEventListener("change", refresh);
} catch (e) {
pointerQuery = null;
}
place();
placeTimer = setInterval(place, 500);
};
const api = { kind: KIND, version: CAPTURE_TOOL_VERSION, build: BUILD, show: show, close: close, capture: capture, snapshot: snapshot, payload: payload, captures: captures, tool: TOOL, origin: ORIGIN };
build();
try {
win.__myboardCapture = api;
} catch (e) {
}
refresh();
return api;
}
startPageCapture(window, {"origin":"https://myboard.my","tool":"console","build":"e35e49d37f35"});
})();

개인정보

누른 페이지에 떠 있는 요소의 위치, 크기, 모양과 위치를 정한 CSS 값, 요소를 알아보는 데 쓰는 역할, id, 클래스 이름, data-testid를 읽어요. 페이지 전체로는 도메인 이름, 화면 크기와 배율, 입력 장치 종류, 게임 엔진 이름을 읽어요.
떠 있는 요소에 보이는 글자와 접근성 이름도 요소마다 40자까지 읽어요. 패널이나 알림 띠에 이름이나 이메일 주소가 보이고 있었다면 섞일 수 있어요. 미리보기에서 지우고 저장할 수 있어요.
입력칸에 쓴 값, 쿠키, 방문 기록, 페이지 주소의 경로는 읽지 않아요.
읽은 내용은 이 기기 안에서 클립보드와 myBoard 창으로만 넘어가요. 서버로 보내지 않고, myBoard 창을 열 때도 읽던 페이지 주소를 보내지 않아요.
쿠키, 광고, 분석 도구를 쓰지 않아요.

읽는 값의 전체 목록은 개인정보처리방침에 있어요.