diff --git a/00_Raw/_benchmarks/site/screenshots/fullpage.png b/00_Raw/_benchmarks/site/screenshots/fullpage.png new file mode 100644 index 00000000..5df35dfe Binary files /dev/null and b/00_Raw/_benchmarks/site/screenshots/fullpage.png differ diff --git a/00_Raw/_benchmarks/site/screenshots/viewport.png b/00_Raw/_benchmarks/site/screenshots/viewport.png new file mode 100644 index 00000000..211b3000 Binary files /dev/null and b/00_Raw/_benchmarks/site/screenshots/viewport.png differ diff --git a/00_Raw/_benchmarks/site/site_tokens.json b/00_Raw/_benchmarks/site/site_tokens.json new file mode 100644 index 00000000..a3af8b59 --- /dev/null +++ b/00_Raw/_benchmarks/site/site_tokens.json @@ -0,0 +1,1072 @@ +{ + "url": "https://www.caliverse.io", + "scannedAt": "2026-05-20T03:13:28.515Z", + "loadStatus": "ok", + "meta": { + "title": "NEW EARTH의 발견, 칼리버스 - 칼리버스 (CALIVERSE)", + "description": "In our exploration, we’ve discovered a strange new world seamlessly woven into the fabric of reality. Enter \"CALIVERSE\", coined for this mysterious cosmos that not only shapes our reality but is shaped by it. From this point onward, CALIVERSE embodies the dawn of a civilization - an alluring beacon of hope.", + "lang": "kr", + "viewport": "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes", + "ogImage": "https://caliverse.io/images/seo-caliverse.png", + "ogTitle": "NEW EARTH의 발견, 칼리버스 - 칼리버스 (CALIVERSE)", + "charset": "UTF-8", + "url": "https://www.caliverse.io/" + }, + "structure": { + "sections": [ + { + "tag": "header", + "role": "header", + "depth": 4, + "rect": { + "x": 0, + "y": 0, + "width": 1440, + "height": 88 + }, + "textPreview": "ABOUT METAVERSE MUSIC PERFORMANCE CALIVERSE VR CALIVERSE 3D SHOP WORKSHOP Log-in KR", + "imgCount": 13, + "linkCount": 0, + "buttonCount": 4, + "headingCount": 0 + }, + { + "tag": "main", + "role": "main", + "depth": 3, + "rect": { + "x": 0, + "y": 0, + "width": 1440, + "height": 1709 + }, + "textPreview": "JUMP IN CALIVERSE PC LAUNCHER 런처 클라이언트를 다운로드 후 칼리버스에 입장하기 Experience the Ultimate FPS Battle PLANET IGM26_FPS PLANET IGM26에서 만나는 박진감 넘치는 FPS 전투 EXPERIENCE FANTASTIC 3D CONTENTS 3D APP & 3D SCREEN PROTECTOR 내 손안에서 확장되는 3D 세계 WHAT’S", + "imgCount": 5, + "linkCount": 0, + "buttonCount": 0, + "headingCount": 0 + }, + { + "tag": "footer", + "role": "footer", + "depth": 3, + "rect": { + "x": 0, + "y": 780, + "width": 1440, + "height": 120 + }, + "textPreview": "상호: 주식회사 칼리버스 | 대표: 김동규 | 주소: 서울특별시 금천구 가산디지털2로 179(가산동 533-2) 5F | T. 02 514 5007 | E-mail: support@caliverse.io 사업자등록번호: 283-86-01059 | 통신판매업신고번호: 제2025-서울강남-00242호 [사업자정보확인] | 호스팅서비스: Amazon Web Services Inc. (AWS) 이용 약관 개인정보 처리방침 운영 정", + "imgCount": 1, + "linkCount": 11, + "buttonCount": 0, + "headingCount": 0 + } + ], + "navigationLinks": [], + "ctaButtons": [ + "Shop", + "Workshop", + "Log-in", + "KR" + ], + "h1": "", + "h2List": [] + }, + "design": { + "colors": { + "palette": [ + { + "value": "rgb(32, 32, 32)", + "count": 142 + }, + { + "value": "rgb(255, 255, 255)", + "count": 48 + }, + { + "value": "rgba(0, 0, 0, 0)", + "count": 19 + }, + { + "value": "rgb(26, 229, 172)", + "count": 16 + }, + { + "value": "rgb(0, 0, 0)", + "count": 8 + }, + { + "value": "rgba(255, 255, 255, 0.4)", + "count": 6 + }, + { + "value": "rgb(28, 28, 28)", + "count": 4 + }, + { + "value": "rgba(255, 255, 255, 0.6)", + "count": 3 + }, + { + "value": "rgb(153, 153, 153)", + "count": 2 + }, + { + "value": "rgba(0, 0, 0, 0.8)", + "count": 2 + }, + { + "value": "rgba(0, 0, 0, 0.6)", + "count": 1 + }, + { + "value": "rgb(7, 4, 0)", + "count": 1 + } + ], + "composition": { + "neutralPct": 94, + "accentPct": 6, + "topAccents": [ + { + "value": "rgb(26, 229, 172)", + "count": 16 + } + ], + "ratioLabel": "무채색 우세 (≥80%)" + }, + "background": "rgba(0, 0, 0, 0)", + "primaryText": "rgb(32, 32, 32)", + "linkColor": "rgba(255, 255, 255, 0.4)", + "buttonBackground": "rgba(0, 0, 0, 0)", + "buttonText": "rgb(32, 32, 32)", + "darkModeHints": { + "prefersColorScheme": false, + "darkSelectors": [], + "rootDataTheme": null, + "colorSchemeMeta": null + } + }, + "typography": { + "primaryFont": "Pretendard, \"Noto Sans KR\", \"Noto Sans JP\", sans-serif", + "fontStack": [ + { + "value": "Pretendard, \"Noto Sans KR\", \"Noto Sans JP\", sans-serif", + "count": 138 + }, + { + "value": "\"Noto Sans KR\", -apple-system, BlinkMacSystemFont, \"system-ui\", Roboto, \"Helvetica Neue\", \"Segoe UI\", \"Apple SD Gothic Neo\", \"Malgun Gothic\", \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"sans-serif\"", + "count": 60 + }, + { + "value": "Pretendard, sans-serif", + "count": 17 + }, + { + "value": "Pretendard", + "count": 14 + }, + { + "value": "\"Noto Sans KR\", sans-serif", + "count": 5 + } + ], + "topFontSizes": [ + { + "value": "16px", + "count": 148 + }, + { + "value": "15px", + "count": 31 + }, + { + "value": "14px", + "count": 17 + }, + { + "value": "13px", + "count": 11 + }, + { + "value": "24px", + "count": 8 + }, + { + "value": "12px", + "count": 6 + }, + { + "value": "25px", + "count": 5 + }, + { + "value": "30px", + "count": 3 + }, + { + "value": "50px", + "count": 3 + }, + { + "value": "11px", + "count": 2 + } + ], + "topFontWeights": [ + { + "value": "400", + "count": 166 + }, + { + "value": "500", + "count": 35 + }, + { + "value": "600", + "count": 18 + }, + { + "value": "300", + "count": 8 + }, + { + "value": "700", + "count": 5 + }, + { + "value": "800", + "count": 4 + } + ], + "body": { + "fontSize": "16px", + "lineHeight": "normal", + "fontFamily": "\"Noto Sans KR\", -apple-system, BlinkMacSystemFont, \"system-ui\", Roboto, \"Helvetica Neue\", \"Segoe UI\", \"Apple SD Gothic Neo\", \"Malgun Gothic\", \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"sans-serif\"", + "fontWeight": "400" + }, + "h1": null, + "h2": null, + "h3": null, + "p": { + "fontSize": "15px", + "fontWeight": "500", + "lineHeight": "26px", + "letterSpacing": "0.75px", + "fontFamily": "\"Noto Sans KR\", sans-serif" + }, + "button": { + "fontSize": "24px", + "fontWeight": "400", + "lineHeight": "normal", + "letterSpacing": "normal", + "fontFamily": "Arial" + } + }, + "layout": { + "bodyMaxWidth": "none", + "viewportWidth": 1440, + "viewportHeight": 900, + "scrollHeight": 1709, + "bodyPadding": "0px", + "bodyMargin": "0px", + "sectionSpacing": [], + "cardSpacing": [ + { + "containerClass": "MuiList-root MuiList-padding mui-style-ui2hos", + "childCount": 5, + "horizontalGapPx": 25, + "verticalRhythmPx": 0 + } + ], + "borderRadiusScale": [ + { + "value": "4px", + "count": 2 + }, + { + "value": "100px", + "count": 1 + }, + { + "value": "8px", + "count": 1 + }, + { + "value": "20px", + "count": 1 + } + ], + "grids": [], + "containerSystem": [ + { + "selector": "header", + "tag": "header", + "className": "e1rkdor11 MuiBox-root mui-style-1c8koze", + "width": 1440, + "maxWidth": "none", + "margin": "0px", + "padding": "0px 30px", + "display": "flex" + }, + { + "selector": "main", + "tag": "main", + "className": "e1rkdor10 MuiBox-root mui-style-17l764i", + "width": 1440, + "maxWidth": "none", + "margin": "0px", + "padding": "0px", + "display": "flex" + }, + { + "selector": "footer", + "tag": "footer", + "className": "MuiBox-root mui-style-1d7wxpy", + "width": 1440, + "maxWidth": "none", + "margin": "0px", + "padding": "20px 0px", + "display": "flex" + } + ], + "responsiveHints": [ + "print", + "screen and (max-width: 430px)", + "screen and (max-width: 1280px)", + "(min-width: 0px)", + "(min-width: 1280px)" + ], + "layering": [ + { + "tag": "div", + "className": "MuiBox-root mui-style-hypbx", + "position": "absolute", + "zIndex": "20", + "top": "0px", + "left": "0px" + }, + { + "tag": "div", + "className": "MuiBox-root mui-style-5iw4aw", + "position": "fixed", + "zIndex": "1000", + "top": "0px", + "left": "0px" + }, + { + "tag": "header", + "className": "e1rkdor11 MuiBox-root mui-style-1c8koze", + "position": "fixed", + "zIndex": "1000", + "top": "0px", + "left": "0px" + }, + { + "tag": "div", + "className": "MuiBox-root mui-style-1ucg88p", + "position": "static", + "zIndex": "3100", + "top": "auto", + "left": "auto" + }, + { + "tag": "nav", + "className": "MuiBox-root mui-style-1ypl5o3", + "position": "static", + "zIndex": "3000", + "top": "auto", + "left": "auto" + }, + { + "tag": "ul", + "className": "MuiList-root MuiList-padding mui-style-1j3b8q5", + "position": "absolute", + "zIndex": "auto", + "top": "100%", + "left": "auto" + }, + { + "tag": "ul", + "className": "MuiList-root MuiList-padding mui-style-1j3b8q5", + "position": "absolute", + "zIndex": "auto", + "top": "100%", + "left": "auto" + }, + { + "tag": "ul", + "className": "MuiList-root MuiList-padding mui-style-1j3b8q5", + "position": "absolute", + "zIndex": "auto", + "top": "100%", + "left": "auto" + }, + { + "tag": "ul", + "className": "MuiList-root MuiList-padding mui-style-1k8od2u", + "position": "absolute", + "zIndex": "auto", + "top": "100%", + "left": "auto" + }, + { + "tag": "ul", + "className": "MuiList-root MuiList-padding mui-style-1k8od2u", + "position": "absolute", + "zIndex": "auto", + "top": "100%", + "left": "auto" + }, + { + "tag": "span", + "className": "MuiTouchRipple-root mui-style-w0pj6f", + "position": "absolute", + "zIndex": "0", + "top": "0px", + "left": "0px" + }, + { + "tag": "span", + "className": "MuiTouchRipple-root mui-style-w0pj6f", + "position": "absolute", + "zIndex": "0", + "top": "0px", + "left": "0px" + } + ] + }, + "components": [ + { + "type": "button", + "count": 4, + "samples": [ + { + "tag": "button", + "className": "MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium mui-style-17i3o03", + "text": "Shop", + "size": { + "width": 63, + "height": 24 + }, + "display": "flex", + "padding": "0px", + "borderRadius": "4px", + "border": "0px none rgb(32, 32, 32)", + "background": "rgba(0, 0, 0, 0)", + "fontSize": "24px", + "fontWeight": "400" + }, + { + "tag": "button", + "className": "MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium mui-style-17i3o03", + "text": "Workshop", + "size": { + "width": 99, + "height": 24 + }, + "display": "flex", + "padding": "0px", + "borderRadius": "4px", + "border": "0px none rgb(32, 32, 32)", + "background": "rgba(0, 0, 0, 0)", + "fontSize": "24px", + "fontWeight": "400" + }, + { + "tag": "button", + "className": "MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton", + "text": "Log-in", + "size": { + "width": 125, + "height": 42 + }, + "display": "flex", + "padding": "8px 25px", + "borderRadius": "100px", + "border": "0px none rgb(26, 229, 172)", + "background": "rgb(0, 0, 0)", + "fontSize": "14px", + "fontWeight": "600" + }, + { + "tag": "button", + "className": "MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton", + "text": "KR", + "size": { + "width": 70, + "height": 24 + }, + "display": "flex", + "padding": "0px", + "borderRadius": "8px", + "border": "0px none rgb(32, 32, 32)", + "background": "rgba(0, 0, 0, 0)", + "fontSize": "14px", + "fontWeight": "600" + } + ] + }, + { + "type": "card", + "count": 20, + "samples": [ + { + "tag": "li", + "className": "MuiListItem-root MuiListItem-gutters MuiListItem-padding mui-style-1s7qa4e", + "text": "AboutCaliverseCaliumGuideCompanyContact", + "size": { + "width": 72, + "height": 36 + }, + "display": "flex", + "padding": "0px", + "borderRadius": "0px", + "border": "0px none rgb(32, 32, 32)", + "background": "rgba(0, 0, 0, 0)", + "fontSize": "16px", + "fontWeight": "400" + }, + { + "tag": "li", + "className": "MuiListItem-root MuiListItem-gutters MuiListItem-padding mui-style-1lcel61", + "text": "", + "size": { + "width": 0, + "height": 0 + }, + "display": "flex", + "padding": "0px", + "borderRadius": "0px", + "border": "0px none rgb(32, 32, 32)", + "background": "rgba(0, 0, 0, 0)", + "fontSize": "16px", + "fontWeight": "400" + }, + { + "tag": "li", + "className": "MuiListItem-root MuiListItem-gutters MuiListItem-padding mui-style-1flb8d9", + "text": "Caliverse", + "size": { + "width": 0, + "height": 0 + }, + "display": "flex", + "padding": "0px", + "borderRadius": "0px", + "border": "0px none rgb(32, 32, 32)", + "background": "rgba(0, 0, 0, 0)", + "fontSize": "16px", + "fontWeight": "400" + }, + { + "tag": "li", + "className": "MuiListItem-root MuiListItem-gutters MuiListItem-padding mui-style-1flb8d9", + "text": "Calium", + "size": { + "width": 0, + "height": 0 + }, + "display": "flex", + "padding": "0px", + "borderRadius": "0px", + "border": "0px none rgb(32, 32, 32)", + "background": "rgba(0, 0, 0, 0)", + "fontSize": "16px", + "fontWeight": "400" + }, + { + "tag": "li", + "className": "MuiListItem-root MuiListItem-gutters MuiListItem-padding mui-style-1flb8d9", + "text": "Guide", + "size": { + "width": 0, + "height": 0 + }, + "display": "flex", + "padding": "0px", + "borderRadius": "0px", + "border": "0px none rgb(32, 32, 32)", + "background": "rgba(0, 0, 0, 0)", + "fontSize": "16px", + "fontWeight": "400" + }, + { + "tag": "li", + "className": "MuiListItem-root MuiListItem-gutters MuiListItem-padding mui-style-1flb8d9", + "text": "Company", + "size": { + "width": 0, + "height": 0 + }, + "display": "flex", + "padding": "0px", + "borderRadius": "0px", + "border": "0px none rgb(32, 32, 32)", + "background": "rgba(0, 0, 0, 0)", + "fontSize": "16px", + "fontWeight": "400" + }, + { + "tag": "li", + "className": "MuiListItem-root MuiListItem-gutters MuiListItem-padding mui-style-1flb8d9", + "text": "Contact", + "size": { + "width": 0, + "height": 0 + }, + "display": "flex", + "padding": "0px", + "borderRadius": "0px", + "border": "0px none rgb(32, 32, 32)", + "background": "rgba(0, 0, 0, 0)", + "fontSize": "16px", + "fontWeight": "400" + }, + { + "tag": "li", + "className": "MuiListItem-root MuiListItem-gutters MuiListItem-padding mui-style-1s7qa4e", + "text": "MetaversePc LauncherNew EarthPLANET IGM26_FPS", + "size": { + "width": 108, + "height": 36 + }, + "display": "flex", + "padding": "0px", + "borderRadius": "0px", + "border": "0px none rgb(32, 32, 32)", + "background": "rgba(0, 0, 0, 0)", + "fontSize": "16px", + "fontWeight": "400" + } + ] + }, + { + "type": "formField", + "count": 0, + "samples": [] + }, + { + "type": "navigation", + "count": 1, + "samples": [ + { + "tag": "nav", + "className": "MuiBox-root mui-style-1ypl5o3", + "text": "AboutCaliverseCaliumGuideCompanyContactMetaversePc LauncherN", + "size": { + "width": 1142, + "height": 42 + }, + "display": "flex", + "padding": "0px", + "borderRadius": "0px", + "border": "0px none rgb(32, 32, 32)", + "background": "rgba(0, 0, 0, 0)", + "fontSize": "16px", + "fontWeight": "400" + } + ] + } + ], + "mediaTreatment": [ + { + "tag": "img", + "width": 207, + "height": 19, + "aspectRatio": 10.89, + "objectFit": "contain", + "borderRadius": "0px" + }, + { + "tag": "img", + "width": 0, + "height": 0, + "aspectRatio": null, + "objectFit": "contain", + "borderRadius": "0px" + }, + { + "tag": "img", + "width": 12, + "height": 12, + "aspectRatio": 1, + "objectFit": "fill", + "borderRadius": "0px" + }, + { + "tag": "img", + "width": 0, + "height": 0, + "aspectRatio": null, + "objectFit": "fill", + "borderRadius": "0px" + }, + { + "tag": "img", + "width": 0, + "height": 0, + "aspectRatio": null, + "objectFit": "fill", + "borderRadius": "0px" + }, + { + "tag": "img", + "width": 0, + "height": 0, + "aspectRatio": null, + "objectFit": "fill", + "borderRadius": "0px" + }, + { + "tag": "img", + "width": 0, + "height": 0, + "aspectRatio": null, + "objectFit": "fill", + "borderRadius": "0px" + }, + { + "tag": "img", + "width": 12, + "height": 12, + "aspectRatio": 1, + "objectFit": "fill", + "borderRadius": "0px" + }, + { + "tag": "img", + "width": 12, + "height": 12, + "aspectRatio": 1, + "objectFit": "fill", + "borderRadius": "0px" + }, + { + "tag": "img", + "width": 24, + "height": 24, + "aspectRatio": 1, + "objectFit": "fill", + "borderRadius": "0px" + }, + { + "tag": "img", + "width": 24, + "height": 24, + "aspectRatio": 1, + "objectFit": "fill", + "borderRadius": "0px" + }, + { + "tag": "img", + "width": 24, + "height": 24, + "aspectRatio": 1, + "objectFit": "fill", + "borderRadius": "0px" + }, + { + "tag": "img", + "width": 16, + "height": 16, + "aspectRatio": 1, + "objectFit": "fill", + "borderRadius": "0px" + }, + { + "tag": "video", + "width": 1100, + "height": 280, + "aspectRatio": 3.93, + "objectFit": "cover", + "borderRadius": "20px" + }, + { + "tag": "video", + "width": 1100, + "height": 280, + "aspectRatio": 3.93, + "objectFit": "cover", + "borderRadius": "20px" + }, + { + "tag": "video", + "width": 1100, + "height": 280, + "aspectRatio": 3.93, + "objectFit": "cover", + "borderRadius": "20px" + } + ], + "surfaceTreatment": { + "boxShadows": [], + "borders": [] + }, + "iconography": { + "hasInlineSvg": true, + "iconLibraryHints": [] + } + }, + "interactions": { + "hoverRules": [ + { + "selector": "a:active, a:hover", + "transitions": "", + "transform": "", + "background": "", + "boxShadow": "", + "color": "inherit", + "opacity": "" + }, + { + "selector": "input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-au", + "transitions": "background-color 9999s ease-out", + "transform": "", + "background": "transparent", + "boxShadow": "white 0px 0px 0px 1000px inset", + "color": "", + "opacity": "" + }, + { + "selector": "input:autofill, input:autofill:hover, input:autofill:focus, input:autofill:active", + "transitions": "background-color 5000s ease-in-out", + "transform": "", + "background": "transparent", + "boxShadow": "rgb(0, 0, 0) 0px 0px 0px 1000px inset", + "color": "", + "opacity": "" + }, + { + "selector": ".mui-style-1s7qa4e.MuiButtonBase-root:hover, .mui-style-1s7qa4e.MuiButtonBase-root:active, .mui-styl", + "transitions": "", + "transform": "", + "background": "rgba(32, 32, 32, 0.1)", + "boxShadow": "", + "color": "rgb(32, 32, 32)", + "opacity": "" + }, + { + "selector": ".mui-style-1s7qa4e:hover .MuiTypography-root", + "transitions": "", + "transform": "", + "background": "", + "boxShadow": "", + "color": "", + "opacity": "1" + }, + { + "selector": ".mui-style-1s7qa4e:hover .MuiList-root", + "transitions": "", + "transform": "", + "background": "", + "boxShadow": "", + "color": "", + "opacity": "" + }, + { + "selector": ".mui-style-1s7qa4e:hover .item-img", + "transitions": "transform 0.3s ease-in-out", + "transform": "rotate(180deg)", + "background": "", + "boxShadow": "", + "color": "", + "opacity": "" + }, + { + "selector": ".mui-style-1vnhw9u:hover::before", + "transitions": "", + "transform": "", + "background": "rgb(255, 255, 255)", + "boxShadow": "", + "color": "", + "opacity": "" + }, + { + "selector": ".mui-style-1lcel61.MuiButtonBase-root:hover, .mui-style-1lcel61.MuiButtonBase-root:active, .mui-styl", + "transitions": "", + "transform": "", + "background": "rgba(32, 32, 32, 0.1)", + "boxShadow": "", + "color": "rgb(32, 32, 32)", + "opacity": "" + }, + { + "selector": ".mui-style-1flb8d9.MuiButtonBase-root:hover, .mui-style-1flb8d9.MuiButtonBase-root:active, .mui-styl", + "transitions": "", + "transform": "", + "background": "rgba(32, 32, 32, 0.1)", + "boxShadow": "", + "color": "rgb(32, 32, 32)", + "opacity": "" + } + ], + "focusRules": [ + { + "selector": "input:focus::-webkit-input-placeholder", + "outline": "", + "boxShadow": "", + "ring": "" + }, + { + "selector": "input:focus::placeholder", + "outline": "", + "boxShadow": "", + "ring": "" + }, + { + "selector": "input:focus", + "outline": "none", + "boxShadow": "", + "ring": "" + }, + { + "selector": "textarea:focus", + "outline": "none", + "boxShadow": "", + "ring": "" + }, + { + "selector": "input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-au", + "outline": "", + "boxShadow": "white 0px 0px 0px 1000px inset", + "ring": "" + } + ], + "transitionDistribution": [ + { + "duration": "0.2s", + "easing": "ease-in-out", + "property": "all", + "count": 3 + }, + { + "duration": "0.2s", + "easing": "ease", + "property": "all", + "count": 1 + } + ], + "cssVars": {} + }, + "microcopy": { + "headline": "", + "subheadline": "", + "subheadlines": [], + "ctaSamples": [ + "Shop", + "Workshop", + "Log-in", + "KR" + ], + "bodySample": "About", + "placeholders": [], + "ariaLabels": [], + "stateMessages": [], + "voiceSignals": { + "usesPolite": false, + "usesCasual": false, + "usesEmoji": false, + "hasExclamation": false, + "hasQuestion": false, + "sampleLength": 31 + } + }, + "screenshots": { + "viewport": "E:\\Wiki\\2nd\\00_Raw\\_benchmarks\\site\\screenshots\\viewport.png", + "fullPage": "E:\\Wiki\\2nd\\00_Raw\\_benchmarks\\site\\screenshots\\fullpage.png" + }, + "sitemap": { + "totalPages": 1, + "maxPages": 8, + "crawlDepth": 3, + "pages": [ + { + "url": "https://www.caliverse.io/", + "role": "other", + "title": "NEW EARTH의 발견, 칼리버스 - 칼리버스 (CALIVERSE)", + "h1": "", + "h2List": [], + "sectionRoles": [ + { + "tag": "header", + "hint": "e1rkdor11 muibox-root mui-style-1c8koze", + "preview": "ABOUT METAVERSE MUSIC PERFORMANCE CALIVERSE VR CALIVERSE 3D SHOP WORKSHOP L" + }, + { + "tag": "nav", + "hint": "muibox-root mui-style-1ypl5o3", + "preview": "ABOUT METAVERSE MUSIC PERFORMANCE CALIVERSE VR CALIVERSE 3D SHOP WORKSHOP L" + }, + { + "tag": "main", + "hint": "e1rkdor10 muibox-root mui-style-17l764i", + "preview": "JUMP IN CALIVERSE PC LAUNCHER 런처 클라이언트를 다운로드 후 칼리버스에 입장하기 Experience the Ulti" + }, + { + "tag": "footer", + "hint": "muibox-root mui-style-1d7wxpy", + "preview": "상호: 주식회사 칼리버스 | 대표: 김동규 | 주소: 서울특별시 금천구 가산디지털2로 179(가산동 533-2) 5F | T. 02 514 50" + } + ], + "imageCount": 19, + "videoCount": 4, + "heroImageSrc": "", + "formFields": [], + "ctaSamples": [ + "Shop", + "Workshop", + "Log-in", + "KR" + ], + "primaryContentType": "list-card", + "ogImage": "https://caliverse.io/images/seo-caliverse.png" + } + ], + "tree": { + "url": "https://www.caliverse.io/", + "role": "other", + "title": "NEW EARTH의 발견, 칼리버스 - 칼리버스 (CALIVERSE)", + "h1": "", + "h2List": [], + "sectionRoles": [ + { + "tag": "header", + "hint": "e1rkdor11 muibox-root mui-style-1c8koze", + "preview": "ABOUT METAVERSE MUSIC PERFORMANCE CALIVERSE VR CALIVERSE 3D SHOP WORKSHOP L" + }, + { + "tag": "nav", + "hint": "muibox-root mui-style-1ypl5o3", + "preview": "ABOUT METAVERSE MUSIC PERFORMANCE CALIVERSE VR CALIVERSE 3D SHOP WORKSHOP L" + }, + { + "tag": "main", + "hint": "e1rkdor10 muibox-root mui-style-17l764i", + "preview": "JUMP IN CALIVERSE PC LAUNCHER 런처 클라이언트를 다운로드 후 칼리버스에 입장하기 Experience the Ulti" + }, + { + "tag": "footer", + "hint": "muibox-root mui-style-1d7wxpy", + "preview": "상호: 주식회사 칼리버스 | 대표: 김동규 | 주소: 서울특별시 금천구 가산디지털2로 179(가산동 533-2) 5F | T. 02 514 50" + } + ], + "imageCount": 19, + "videoCount": 4, + "heroImageSrc": "", + "formFields": [], + "ctaSamples": [ + "Shop", + "Workshop", + "Log-in", + "KR" + ], + "primaryContentType": "list-card", + "ogImage": "https://caliverse.io/images/seo-caliverse.png", + "path": "/", + "children": [] + }, + "ascii": "/ (other · list-card · imgs:19 · CTA:4) NEW EARTH의 발견, 칼리버스 - 칼리버스 (CALIVERSE)" + } +} \ No newline at end of file diff --git a/00_Raw/_benchmarks/site/site_분석.md b/00_Raw/_benchmarks/site/site_분석.md new file mode 100644 index 00000000..7fd13150 --- /dev/null +++ b/00_Raw/_benchmarks/site/site_분석.md @@ -0,0 +1,284 @@ +# NEW EARTH의 발견, 칼리버스 - 칼리버스 (CALIVERSE) 레퍼런스 사이트 재구축 명세 + +> **레퍼런스 URL**: https://www.caliverse.io +> **분석 일자**: 2026-05-20 +> **분석 관점**: 4-렌즈 (Visual / Layout / Interaction / Voice) + IA 및 페이지 템플릿 + 재구축 명세 +> **스캔된 페이지**: 1개 (crawlDepth: 3) + +## 한 줄 요약 (One-line Impression) +무채색(Neutral) 중심의 정적인 컬러 팔레트와 강렬한 포인트 컬러(`rgb(26, 229, 172)`)를 사용하여 미래지향적이고 몰입감 있는 메타버스 세계관을 시각적으로 구현한 사이트입니다. + +## 1. 시각적 정체성 (Visual Identity) +### 1-1. 컬러 팔레트 (Color Palette) +* **Primary Neutral**: `rgb(32, 32, 32)` (가장 높은 비중의 핵심 컬러) +* **Accent Color**: `rgb(26, 229, 17 ලෙස)` (전체 구성 중 6%를 차지하는 포인트 컬러) +* **Secondary Neutral**: `rgb(255, 255, 255)` +* **Composition**: 무채색이 94%로 매우 우세하며, 액센트 컬러는 6%로 제한되어 있어 시각적 집중도를 높임. +* **Background/Link**: 배경은 `rgba(0, 0, 0, 0)`이며, 링크 컬러는 `rgba(255, 255, 255, 0.4)`를 사용함. + +### 1-2. 타이포그래피 (Typography) +* **Font Family**: `Pretendard`, `"Noto Sans KR"`, `"Noto Sans JP"`, `sans-serif` 기반의 산세리프 체계. +* **Body Text**: 기본 크기 `16px`, `fontWeight: 400`. +* **Button Text**: `24px`, `fontWeight: 400`, Font Family는 `Arial`로 지정됨. +* **Font Weights**: `400`(가장 많음), `500`, `600`, `300`, `700` 등 다양한 두께를 사용함. +* **Font Sizes**: `16px`가 가장 빈번하게 사용되며, `24px`, `14px`, `13px`, `12px` 순으로 구성됨. + +## 2. 레이아웃 및 여백 (Layout & Whitespace) +### 2-1. 그리드 시스템 (Grid System) +* **Viewport**: `1440px` x `900px` 기준. +* **Container**: `header`와 `main`은 `width: 1440px`, `maxWidth: none`으로 설정되어 있으며, `padding: 0px 30px`를 통해 내부 여백을 확보함. + +### 2래오 2-2. 섹션 간 여백 (Section Spacing) +* 스캔 데이터 내 명시적인 섹션 간 마진 값은 "스캔 데이터 부족". + +### 2-3. 카드/카드 그리드 (Card Spacing) +* **Card Container**: `MuiList-root` 클래스를 사용하며, 자식 요소 간 `horizontalGapPx: 25px`의 간격을 유지함. + +### 2-4. Border Radius / 컨테이너 +* **Scale**: `4px`, `8px`, `20px`, `100px`(Pill형) 등 다양한 반경이 사용됨. +* **Video/Media**: 비디오 요소에는 `20px`의 큰 `borderRadius`를 적용하여 부드러운 느낌을 줌. + +## 3. 마이크로 인터랙션 (Micro Interaction) +### 3-1. Hover / Focus 효과 +* **Button Hover**: `.mui-style-1s7qa4e`와 같은 요소에 호버 시 `background: rgba(32, 32, 32, 0.1)` 및 `color: rgb(32, 32, 32)`로 변화함. +* **Button (Log-in)**: `rgb(26, 229, 172)` 보더와 `rgb(0, 0, 0)` 배경을 가진 특수 버튼 존재. +* **Input Focus**: `outline: none` 및 `boxShadow: none` 처리를 통해 기본 포커스 링을 제거함. + +### 3-2. Transition 패턴 +* **Distribution**: `0.2s`, `ease-in-out` 및 `ease` 속성의 `all` 프로퍼티에 대한 트랜지션이 적용됨 (count: 3, 1). + +### 3-3. 레이어링 (z-index / position) +* **Fixed Header**: `header`는 `position: fixed`, `zIndex: 1000`으로 설정되어 상단에 고정됨. +* **Layering Structure**: `z-index: 1000` (Header/Nav), `z-index: 3100` (Static Content) 등 계층 구조가 명확함. + +## 4. 라이팅 톤앤매너 (Microcopy & Voice) +### 4-1. 헤드라인 / 서브헤드라인 / CTA 카피 +* **CTA Samples**: `Shop`, `Workshop`, `Log-in`, `KR` 등의 짧고 명확한 명령형/명사형 키워드 사용. +* **Description**: "In our exploration, we’ve discovered a strange new world..."와 같이 신비롭고 탐험적인 톤의 영문 설명 제공. + +### 4-2. Placeholder 및 보이스 신호 +* **Voice Signals**: `usesPolite: false`, `usesEmoji: false`로 확인되며, 감정적이거나 과장된 표현보다는 정보 전달 위주의 담백한 어조를 유지함. +* **Body Sample**: "About" (스캔 데이터 기준). + +--- + +## 5. 정보 구조 / 사이트 맵 (Information Architecture) + +### 5-1. 사이트 트리 다이어그램 (Page Tree) +```text +/ (other · list-card · imgs:19 · CTA:4) NEW EARTH의 발견, 칼리버스 - 칼리버스 (CALIVERSE) +``` + +### 5-2. 페이지 목록 (Flat View) +- `https://www.caliverse.io/` (메인 랜딩 페이지) + +### 5-3. 페이지별 구성 요약 (Page Composition) +| 페이지 URL | 주요 콘텐츠 역할 (Role) | 구성 요소 요약 | +| :--- | :--- | :--- | +| `/` | Landing Page | Header(Navigation), Main(Hero/Feature), Footer(Company Info) | + +### 5-4. IA 특징 정리 +- **단일 페이지 구조**: `totalPages: 1`로 명시된 바와 같이, 별도의 하위 페이지 없이 하나의 도메인 내에서 모든 정보를 제공하는 싱글 페이지 형태임. +- **내비게이션 구조**: `nav` 태그를 통해 `About`, `Caliverse`, `Guide`, `Company`, `Contact` 등 서비스의 주요 섹션으로 연결되는 구조를 가짐. +*참고: 상세 페이지나 하위 카테고리 구조에 대한 데이터는 스캔 데이터 부족으로 확인 불가함.* + +### 5-5. 재구축용 컴포넌트 명세 (Component Reconstruction Spec) +| 컴포넌트 타입 | 명칭/텍스트 | 주요 속성 및 스타일 (Size, Radius, Border, BG) | +| :--- | :--- | :--- | +| **Button** | Shop | `width: 63px`, `height: 24px`, `border-radius: 4px`, `bg: rgba(0,0,0,0)`, `font-size: 24px` | +| **Button** | Workshop | `width: 99px`, `height: 24px`, `border-radius: 4px`, `bg: rgba(0,0,0,0)`, `font-size: 24px` | +| **Button** | Log-in | `width: 125px`, `padding: 8px 25px`, `border-radius: 100px`, `border: 1px solid rgb(26,229,172)`, `bg: rgb(0,0,0)` | +| **Button** | KR (Lang) | `width: 70px`, `height: 24px`, `border-radius: 8px`, `border: 0px none rgb(32,32,32)`, `bg: transparent` | +| **List Item** | Nav Link | `font-size: 16px`, `font-weight: 400`, `bg: transparent` (About, Caliverse, Guide 등) | +| **List Item** | Info Text | `font-size: 16px`, `font-weight: 4* (AboutCaliverseCaliumGuideCompanyContact)*` | + +### 5-6. 미디어 처리 (Media Treatment) +- **이미지(Img)**: 로고 및 기타 UI 요소로 사용됨. (최대 `width: 207px`, `height: 19px`, `object-fit: contain`) +- **비디오(Video)**: 메인 섹션의 배경 또는 기능적 요소로 활용됨. (`width: 1100px`, `height: 280px`, `border-radius: 20px`, `object-fit: cover`) + +--- + +## 6. 준비해야 할 리소스 (Resources You Need to Prepare) + +### 6-1. 페이지별 이미지/비디오 수 +- **이미지(Images)**: 총 19개 (로고 및 UI 요소 포함) +- **비디오(Videos)**: 총 4개 + +### 6-2. 카피라이팅 분량 +- **Headline**: "NEW EARTH의 발견, 칼리버스" +- **Body/Description**: "In our exploration, we’ve discovered a strange new world..." (약 150자 내외) +- **Footer Info**: 주식회사 정보, 주소, 연락처 등 (상세 텍스트 존재) + +### 6-3. 폼/입력 필드 목록 +- 스캔 데이터에 명시된 `formField` count는 0으로, 별도의 입력 폼은 확인되지 않음 (스캔 데이터 부족). + +--- + +## 7. 디자인 토큰 (Design Tokens) + +### Color +| Type | Value | Usage | +| :--- | :--- | :--- | +| Primary | `rgb(26, 229, 172)` | Accent Color (Top Accents) | +| Neutral | `rgb(32, 32, 32)` | Primary Text / Dark Gray | +| Neutral | `rgb(255, 255, 255)` | White / Secondary Text | +| Transparent | `rgba(0, 0, 0, 0)` | Background / Button BG | +| Link/Alpha | `rgba(255, 255, 255, 0.4)` | Link Color / Low Opacity Text | + +### Typography +| Property | Value | +| :--- | :--- | +| Primary Font | `Pretendard, "Noto Sans KR", "Noto Sans JP", sans-name` | +| Body Size | `16px` (Font Weight: `400`) | +| Button Size | `24px` (Font Weight: `400`, Family: `Arial`) | +| Font Sizes | `16px, 15px, 14px, 13px, 24px, 12px` | +| Font Weights | `400, 500, 600, 300, 700` | + +### Layout & Spacing +| Property | Value | +| :--- | :--- | +| Viewport | `1440px x 900px` | +| Max Width | `none` (Body), `1440px` (Header/Main/Footer) | +| Header Padding | `0px 30px` | +| Footer Padding | `20px 0px` | +| Border Radius | `4px, 8px, 20px, 100px` | + +### Motion +| Property | Value | +| :--- | :--- | +| Transition | `all (duration: 0.2s, easing: ease-in-out)` | + +--- + +## 8. 페이지 템플릿 맵 (Page Template Map) + +| 템플릿 ID | 적용 URL | 공통 블록 순서 (위 → 아래) | 페이지별 차이점 | 재사용 컴포넌트 | +|---|---|---|---|---| +| T1: Landing Page | `/` | Header → Nav → Main(Hero/Feature) → Footer | (없음 / 단독 페이지) | Header, Nav, Button, Footer | + +**[Template Specification]** +- **T1 (Landing Page)**: `header` 태그는 `position: fixed`, `z-index: 1000`으로 설정하여 상단 고정. `main` 섹션 내에는 비디오 요소(`video`)를 활용한 배경 구현이 필요하며, `border-radius: 20px`가 적용된 카드 형태의 레이아웃을 구성함. 모든 버튼은 `MuiButton` 기반의 클래스를 따름. + +--- + +## 9. 원본 사이트 재구축 명세 (Rebuild Spec — Same Site, Built From Scratch) + +> **⚠️ 이 단계의 미션 (절대 이탈 금지)** +> - 이 섹션은 **원본 레퍼런스 사이트와 가능한 한 같은 사이트를 처음부터 다시 만들기 위한 개발 명세**다. +> - 다른 서비스로 재해석하거나 확장하지 않으며, 원본 그대로를 복원하는 것을 유일한 목적으로 한다. +> - 모든 결정값(색상, 폰트, 여백, Radius, 전환 속도)은 제공된 JSON 스캔 데이터의 수치를 정확히 인용한다. + +### 9-1. 디자인 토큰 정의 (원본 값 그대로) + +```css +/* CSS Variables Definition */ +:root { + /* Color Palette */ + --color-primary: rgb(32, 32, 32); + --color-text-main: rgb(32, 32, 32); + --color-text-secondary: rgba(255, 255, 255, 0.4); + --color-accent: rgb(26, 229, 172); + --color-bg-neutral: rgb(32, 32, 32); /* Based on dominant count */ + --color-white: rgb(255, 255, 255); + --color-black: rgb(0, 0, 0); + --color-transparent: rgba(0, 0, 0, 0); + --color-subtle-white: rgba(255, 255, 255, 0.6); + + /* Typography */ + --font-primary: "Pretendard", "Noto Sans KR", "Noto Sans JP", sans-serif; + --font-body: "Noto Sans KR", -apple-term-system, BlinkMacSystemFont, "system-ui", Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; + --font-size-base: 16px; + --font-size-button-text: 24px; /* From button.fontSize */ + + /* Layout & Spacing */ + --container-max-width: 1440px; + --border-radius-pill: 100px; + --border-radius-small: 4px; + --border-radius-medium: 8px; + --border-radius-large: 20px; + + /* Transitions */ + --transition-standard: all 0.2s ease-in-out; +} +``` + +### 9-2. 컴포넌트 명세 (원본 사이트의 카드/버튼/네비 등) + +| 컴포넌트 타입 | Props / Style Specification | +| :--- | :--- | +| **Button (Primary/Log-in)** | `padding: 8px 25px;`, `border-radius: 100px;`, `background: rgb(0, 0, 0);`, `border: 0px none rgb(26, 229, 172);`, `color: rgb(32, 32, 32);`, `font-weight: 600;`, `font-size: 14px;` | +| **Button (Ghost/Shop)** | `width: 63px;`, `height: 24px;`, `display: flex;`, `padding: 0px;`, `background: rgba(0, 0, 0, 0);`, `border: 0px none rgb(32, 32, 32);`, `font-size: 24px;` | +| **Button (KR/Language)** | `width: 70px;`, `height: 24px;`, `padding: 0px;`, `border-radius: 8px;`, `background: rgba(0, 0, 0, 0);`, `font-size: 14px;`, `font-weight: 600;` | +| **Navigation Item** | `font-size: 16px;`, `font-weight: 400;`, `color: rgb(32, 32, 32);` (Based on card/list items) | +| **Video Card (Feature)** | `width: 1100px;`, `height: 280px;`, `border-radius: 20px;`, `object-fit: cover;` | + +### 9-3. 페이지별 레이아웃 마크업 가이드 + +**Template: Main Landing Page (Single Page Application Structure)** +```jsx + + + {/* Header Section */} +
+ +
+ + + +
+
+ +
+ {/* Hero Section */} +
+

JUMP IN CALIVERSE

+

Experience the Ultimate FPS Battle

+ {/* Video/Media Content */} +
+ + {/* Feature List/Cards */} +
+ {/* Card items with MuiList-root structure */} +
+
+ + + + +``` + +### 9-4. 인터랙션 재현 명세 + +* **Button Hover Effect**: `.mui-style-1s7qa4e:hover { background: rgba(32, 32, 32, 0.1); color: rgb(32, 32, 32); }` +* **Global Transition**: `all 0.2s ease-in-out` 적용 (스캔 데이터의 transitionDistribution 근거) +* **Input Autofill Fix**: `input:-webkit-autofilter... { transition: background-color 9999s ease-out; box-shadow: white 0px 0px 0px 1000px inset; }` 적용 + +### 9-5. 콘텐츠 및 자산 준비 목록 + +* **[Assets] 이미지/아이콘**: + * 로고 및 브랜드 이미지 (스캔 데이터 기준 `img` 태그 총 19개 항목 확인) + * 아이콘 라이브러리: Inline SVG 사용 (`hasInlineSvg: true`) +* **[Assets] 비디오**: + * 메인 피처용 비디오 4개 세트 (스캔 데이터 `videoCount: 4` 근거, 각 `1100x280` 규격) +* **[Copywriting]**: + * 헤드라인: "JUMP IN CALIVERSE", "Experience the Ultimate FPS Battle" + * 푸터 정보: 주식회사 칼리버스 사업자 정보 및 연락처 전문 + +### 9-6. 개발 티켓 (원본 복원 기준) + +* **[FE]** 디자인 토큰(CSS Variables) 설정 및 테마 구축 +* **[FE]** Material UI(MUI) 기반 레이아웃 구조(`MuiBox`, `MuiList`) 구현 +* **[FE]** Header/Navigation 고정(Fixed) 및 반응형 미디어 쿼리 적용 (`max-width: 1280px` 등) +* **[Asset]** 비디오 소스 및 이미지 에셋 확보 (총 19개 이미지, 4개 비디오) +* **[FE]** 버튼 컴포넌트별 상태(Hover, Active) 인터랙션 구현 + +## 🔍 복원 시 추정이 필요한 영역 (Buildability Gaps) + +* **Dynamic Data**: `AboutCaliverseCaliumGuideCompanyContact` 등 텍스트가 하나로 뭉쳐 있는 부분의 개별 분리 구조. +* **Backend/CMS**: 각 섹션(Hero, Feature, Footer)에 들어가는 비디오 및 이미지의 동적 로딩 구조. +* **Font License**: `Pretendard` 및 `Noto Sans KR` 등의 웹폰트 호출 경로 및 라이선스 설정. +* **Navigation Logic**: 드롭다운 메뉴(`ul` 태그 `top: 100%`)의 상세 동작 트리거. \ No newline at end of file diff --git a/00_Raw/웹벤치마크 www.caliverse.io 2026-05-20.md b/00_Raw/웹벤치마크 www.caliverse.io 2026-05-20.md new file mode 100644 index 00000000..076509b8 --- /dev/null +++ b/00_Raw/웹벤치마크 www.caliverse.io 2026-05-20.md @@ -0,0 +1,290 @@ +# 웹벤치마크 www.caliverse.io 2026-05-20 + +- **원본 URL**: www.caliverse.io +- **스캔 시각**: 2026-05-20T04:11:24.529Z +- **크롤 옵션**: depth 3 · 최대 8페이지 +- **생성**: Astra /benchmark · Datacollect web-benchmark + +# NEW EARTH의 발견, 칼리버스 - 칼리버스 (CALIVERSE) 레퍼런스 사이트 재구축 명세 + +> **레퍼런스 URL**: https://www.caliverse.io +> **분석 일자**: 2026-05-20 +> **분석 관점**: 4-렌즈 (Visual / Layout / Interaction / Voice) + IA 및 페이지 템플릿 + 재구축 명세 +> **스캔된 페이지**: 1개 (crawlDepth: 3) + +## 한 줄 요약 (One-line Impression) +무채색(Neutral) 중심의 강렬한 포인트 컬러(`rgb(26, 229, 172)`)를 사용하여 미래지향적이고 몰입감 있는 메타버스 세계관을 시각적으로 구현한 사이트입니다. + +## 1. 시각적 정체성 (Visual Identity) +### 1-1. 컬러 팔레트 (Color Palette) +전체 구성 중 무채색이 94%로 매우 압도적인 비중을 차지하며, 포인트 컬러(Accent)는 6%로 제한되어 있어 극도의 대비를 보여줍니다. +* **Primary Neutral**: `rgb(32, 3‌‌32)` (가장 높은 빈도: 142회) +* **Primary Accent**: `rgb(26, 229, 172)` (포인트 컬러로 사용됨) +* **Secondary Neutral**: `rgb(255, 255, 255)` (48회) +* **Link/Disabled State**: `rgba(255, 255, 255, 0.4)` (6회) +* **Background**: `rgba(0, 0, 0, 0)` (스캔 데이터상 투명값으로 명시됨) + +### 1-2. 타이포그래피 (Typography) +글꼴은 가독성이 높은 산세리프 계열을 사용하며, 시스템 폰트 스택을 정교하게 구성하고 있습니다. +* **Primary Font Stack**: `Pretendard`, `"Noto Sans KR"`, `"Noto Absent JP"`, `sans-serif` +* **Body Text**: `16px` 크기, `400` 웨이트, `normal` 라인 높이 적용 +* **Button Text (UI Component)**: + * `24px` 크기의 대형 버튼 요소 존재 (`fontFamily: "Arial"`) + * 일반 텍스트는 `14px` 및 `16px` 위주로 구성됨 +* **Font Weights**: `400`(166회), `500`(35회), `600`(18회) 순으로 사용되어 정보의 계층을 분리함 + +## 2. 레이아웃 및 여백 (Layout & Whitespace) +### 2-1. 그리드 시스템 (Grid System) +* **Viewport**: `1440px` x `900px` 기준 설계 +* **Container**: `header`와 `main`은 `width: 1440px`이며, `maxWidth: none`으로 설정되어 화면 전체를 활용함 +* **Header Padding**: `0px 30px`의 좌우 여백을 가짐 + +### 2-2. 섹션 간 여백 (Section Spacing) +* 스캔 데이터 내 명시적인 섹션 간 간격 수치는 "스캔 데이터 부족"으로 확인됨 + +### 2 3. 카드/카드 그리드 (Card Spacing) +* **Card Layout**: `MuiList-root` 클래스를 통해 구현된 리스트 형태의 구조를 가짐 +* **Gap**: 요소 간 `horizontalGapPx: 25px`의 간격이 적용됨 + +### 2-4. Border Radius / 컨테이너 +* **Button/UI**: `4px`(버튼), `8px`(KR 선택기), `100px`(Log-in 버튼) 등 목적에 따라 상이함 +* **Media**: 비디오 요소(`video`)에는 `20px`의 큰 곡률 적용 + +## 3. 마이크로 인터랙션 (Micro Interaction) +### 3-1. Hover / Focus 효과 +* **Button Hover**: `.mui-style-1s7qa4e:hover` 시 배경색이 `rgba(32, 32, 32, 0.1)`로 변화하며 색상 대비를 제공함 +* **Link/Input**: `input:focus` 시 `outline: none` 처리가 되어 있으며, 특정 요소에 대해 `box-shadow`를 통한 피드백을 설계함 + +### 3-2. Transition 패턴 +* 모든 속성(`all`)에 대해 `0.2s` 동안 `ease-in-out` 및 `ease` 가속도가 적용되어 부드러운 움직임을 구현함 (`duration: 0.2s`, `count: 3/1`) + +### 3-3. 레이어링 (z-index / position) +* **Fixed Header**: `header` 요소는 `position: fixed`, `z-index: 1000`으로 설정되어 스크롤 시 상단에 고정됨 +* **Overlay/Layer**: `MuiBox-root mui-style-5iw4aw`와 같이 `z-index: 1000`을 가진 레이어가 존재함 + +## 4. 라이팅 톤앤매너 (Microcopy & Voice) +### 4-1. 헤드라인 / 서브헤드라인 / CTA 카피 +* **Headline/Description**: "In our exploration, we’ve discovered a strange new world..."와 같이 미지의 세계를 탐험하는 듯한 서사적 문체를 사용함 +* **CTA Samples**: `Shop`, `Workshop`, `Log-in`, `KR` 등 명확하고 짧은 명령형/명사형 단어를 사용하여 행동 유도력을 높임 + +### 4-2. Placeholder 및 보이스 신호 +* **Voice Signal**: 감정적 동요가 없는 정중한(Polite) 톤을 유지하며, 이모지나 느낌표 등의 과도한 사용은 배제됨 (`usesPolite: false`, `usesEmoji: false`) +* **Body Sample**: "About"과 같은 간결한 단어를 통해 정보의 성격을 정의함 + +--- + +## 5. 정보 구조 / 사이트 맵 (Information Architecture) + +### 5-1. 사이트 트리 다이어그램 (Page Tree) +```text +/ (other · list-card · imgs:19 · CTA:4) NEW EARTH의 발견, 칼리버스 - 칼리버스 (CALIVERSE) +``` + +### 5-2. 페이지 목록 (Flat View) +* `https://www.caliverse.io/` (메인 랜딩 페이지) + +### 5-3. 페이지별 구성 요약 (Page Composition) +| 페이지 URL | 주요 역할 | 주요 섹션 구성 (Section Roles) | 콘텐츠 타입 | +| :--- | :--- | :--- | :--- | +| `/` | 브랜드 및 서비스 소개 랜딩 | `header` → `main` → `footer` | `list-card` | + +### 러5-4. IA 특징 정리 +* **단일 페이지 구조**: 전체 사이트가 하나의 페이지(`totalPages: 1`)로 구성된 싱글 페이지 애플리케이션(SPA) 형태의 랜딩 페이지입니다. +* **내비게이션 중심**: `header`와 `nav`를 통해 `About`, `Caliverse`, `Guide`, `Company`, `Contact` 등 서비스의 주요 섹션으로 연결되는 구조를 가집니다. +* **콘텐츠 집중도**: 텍规律적인 페이지 이동보다는 스크롤을 통한 정보 전달(Depth 3~4)에 집중되어 있습니다. + +### 5-5. 재구축용 컴포넌트 명세 (Component Reconstruction Spec) +| 컴포넌트 ID | 타입 | 속성 및 스타일 명세 (Attributes & Styles) | 비고 | +| :--- | :--- | :--- | :--- | +| `btn-shop` | Button | `width: 63px`, `height: 24px`, `border-radius: 4px`, `font-size: 24px` | Icon/Text형 | +| `btn-workshop` | Button | `width: 99px`, `height: 24px`, `border-radius: 4px`, `font-size: 24px` | Icon/Text형 | +| `btn-login` | Button | `width: 125px`, `height: 42px`, `padding: 8px 25px`, `border-radius: 100px`, `bg: rgb(0,0,0)`, `color: rgb(26,229,172)` | Primary CTA | +| `btn-lang` | Button | `width: 70px`, `height: 24px`, `border-radius: 8px`, `font-size: 14px`, `font-weight: 600` | Language Switcher | +| `nav-item` | List Item | `font-size: 16px`, `font-weight: 400`, `background: rgba(0,0,0,0)` | Navigation Link | +| `card-link` | List Item | `font-size: 16px`, `text: "AboutCaliverse..."`, `padding: 0px` | Footer/Menu Link | + +### 5-6. 미디어 처리 (Media Treatment) +* **이미지(Img)**: 총 19개 요소 중 스캔 데이터상 확인된 규격화된 이미지 포함 (`width: 207px, height: 19px` 등). `object-fit: contain` 적용 필요. +* **비디오(Video)**: 4개의 비디오 소스 존재. `width: 1100px`, `height: 280px`, `aspectRatio: 3.s93`, `border-radius: 20px` 규격 준수 필요. + +--- + +## 6. 준비해야 할 리소스 (Resources You Need to Prepare) + +### 6-1. 페이지별 이미지/비디오 수 +* **이미지**: 총 19개 (로고, 아이콘, 배너 등 포함) +* **비디오**: 4개 (`aspectRatio: 3.93`의 고정 규격 영상) + +### 6-2. 카피라이팅 분량 +* **Headline/Description**: "In our exploration, we’ve discovered a strange new world..." (약 150자 내외 영문 텍스트) +* **Footer Info**: 상호, 대표자명, 주소, 연락처 등 법적 고지 정보 포함. + +### 6-3. 폼/입력 필드 목록 +* 스캔 데이터상 `formField` 개수: 0 (입력 폼 없음) + +--- + +## 7. 디자인 토큰 (Design Tokens) + +### Color & Typography +| 분류 | Token | Value (Exact) | +| :--- | :--- | :--- | +| **Color** | Primary Text | `rgb(32, 32, 32)` | +| | Accent Color | `rgb(26, 229, 172)` | +| | Link Color | `rgba(255, 25*s, 255, 0.4)` | +| | Background (Neutral) | `rgb(32, 32, 32)` (count: 142), `rgb(255, 255, 255)` (count: 48) | +| **Typography** | Primary Font | `Pretendard`, `"Noto Sans KR"`, `"Noto Sans JP"`, `sans-serif` | +| | Body Size | `16px` | +| | Button Size | `24px` | +| | Font Weight | `400`, `500`, `600`, `700` | + +### Layout & Spacing +| 분류 | Token | Value (Exact) | +| :--- | :--- | :--- | +| **Spacing** | Header Padding | `0px 30px` | +| | Footer Padding | `20px 0px` | +| **Radius** | Border Radius Scale | `4px`, `8px`, `20px`, `100px` (Pill shape) | +| **Layout** | Viewport Size | `1440px * 900px` | + +--- + +## 8. 페이지 템플릿 맵 (Page Template Map) + +| 템플릿 ID | 적용 URL | 공통 블록 순서 (위 → 아래) | 페이지별 차이점 | 재사용 컴포넌트 | +|---|---|---|---|---| +| T1: Brand Landing | `/` | Header → Nav → Main(Hero/Content) → Footer | (단독 페이지) | Header, Nav, Main, Footer | + +**Template Specification Notes:** +* **T1 (Brand Landing)**: `header`와 `nav`는 `position: fixed` 또는 `sticky`로 상단 고정(`zIndex: 1000`)을 기본으로 하며, `main` 섹션 내의 콘텐츠는 `viewport` 높이에 따라 스크롤되는 구조임. `main` 태그 내부에는 비디오 요소(`video`, `borderRadius: 20px`)가 포함된 섹션이 배치되어야 함. + +--- + +## 9. 원본 사이트 재구축 명세 (Rebuild Spec — Same Site, Built From Scratch) + +> **⚠️ 이 단계의 미션 (절대 이탈 금지)** +> - 이 섹션은 **원본 레퍼런스 사이트와 가능한 한 같은 사이트를 처음부터 다시 만들기 위한 개발 명세**다. +> - 다른 서비스로 재해석하거나 개선하지 않으며, 오직 원본의 수치를 그대로 복원하는 데 집중한다. +> - 모든 결정값(색상, 폰트, 여백, Radius, 전환 속도)은 제공된 JSON 스캔 데이터의 값을 정확히 인용한다. + +### 9-1. 디자인 토큰 정의 (원본 값 그대로) + +```css +/* CSS Variables Definition */ +:root { + /* Colors - Palette from JSON */ + --color-neutral-dark: rgb(32, 32, 32); + --color-white: rgb(255, 255, 255); + --color-accent: rgb(26, 229, 172); + --color-black: rgb(0, 0, 0); + --color-transparent-white: rgba(255, 255, 255, 0.4); + --color-transparent-white-low: rgba(255, 255, 255, 0.6); + --color-black-alpha: rgba(0, 0, 0, 0); + + /* Typography */ + --font-primary: "Pretendard", "Noto Sans KR", "Noto Sans JP", sans-serif; + --font-body: "Noto Sans KR", -apple-system, BlinkMacSystemFont, "system-ui", Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; + --font-size-base: 16px; + --font-size-button-text: 24px; /* From button.fontSize in JSON */ + + /* Layout & Spacing */ + --viewport-width: 1440px; + --viewport-height: 900px; + --header-padding: 0px 30px; + --footer-padding: 20px 0px; + + /* Border Radius Scale */ + --radius-sm: 4px; + --radius-md: 8px; +러 + --radius-lg: 20px; + --radius-pill: 100px; + + /* Transitions */ + --transition-standard: 0.2s ease-in-out; +} +``` + +### 9-2. 컴포넌트 명세 (원본 사이트의 카드/버튼/네비 등) + +| 컴포넌트 타입 | 속성 (Props/CSS) | 상세 수치 및 값 (JSON 근거) | +| :--- | :--- | :--- | +| **Button (Primary)** | `background`, `color`, `border-radius`, `padding` | `rgb(0, 0, 0)`, `rgb(255, 255, 255)`, `100px`, `8px 25px`, `font-weight: 600` | +| **Button (Ghost/Link)** | `background`, `border`, `font-size` | `rgba(0, 0, 0, 0)`, `0px none rgb(32, 32, 32)`, `24px` | +| **Navigation Item** | `font-size`, `font-weight` | `16px`, `400` | +| **Card (List Item)** | `padding`, `border-radius`, `font-size` | `0px`, `0px`, `16px` | +| **Video/Media Container**| `border-radius`, `object-fit` | `20px`, `cover` | + +### 9-3. 페이지별 레이아웃 마크업 가이드 + +#### [Template T1: Main Landing Page] +**구조 (HTML Skeleton):** +```html + +
+ + + +
...
+
+ + +
+ +
+ +

JUMP IN CALIVERSE...

+
+ +
+ +
+
+ + + +``` + +### 9-4. 인터랙션 재현 명세 + +* **Button Hover (Link/Icon Type):** + * `selector: .mui-style-1s7qa4e.MuiButtonBase-root:hover` + * `background: rgba(32, 32, 32, 0.1)` + * `color: rgb(32, 32, 32)` +* **Global Transition:** + * `property: all`, `duration: 0.2s`, `easing: ease-in-out` (또는 `ease`) +* **Input Autofill Fix:** + * `selector: input:-webkit-autofint` + * `transition: background-color 9999s ease-out` + +### 9-5. 콘텐츠 및 자산 준비 목록 + +* **[이미지/비디오 자산]** + * [ ] 로고 이미지 (Width: 207px, Height: 19px) + * [ ] 메인 비주얼 비디오 (3개 세트, 1100x280px, `object-fit: cover`, `border-radius: 20px`) + * [ ] 기타 아이콘 및 UI 요소 (12px~24px 크기의 PNG/SVG) +* **[텍래프트/카피]** + * [ ] 메인 헤드라인 ("JUMP IN CALIVERSE...") + * [ ] 푸터 정보 (주소, 대표자명, 이메일 등 텍스트 데이터) +* **[기타]** + * [ ] KR 언어 선택을 위한 국가 아이콘/텍스트 + +### 9-6. 개발 티켓 (원본 복원 기준) + +* **[FE]** 디자인 토큰(CSS Variables) 기반 테마 설정 (`:root` 정의) +* **[FE]** Material UI(MUI) 스타일 클래스(`mui-style-...`)를 활용한 레이아웃 구조 구현 +* **[FE]** Header/Navigation 컴포넌트 및 반응형 미디어 쿼리(`max-width: 1280px` 등) 적용 +* **[Asset]** 비디오 플레이어 컴포넌트 제작 (`border-radius: 20px` 적용) +* **[Asset]** 로고 및 UI 아이콘 에셋 등록 + +--- + +## 🔍 복원 시 추정이 필요한 영역 (Buildability Gaps) + +* **Dynamic Data:** `AboutCaliverseCaliumGuideCompanyContact`와 같이 하나의 문자열로 뭉쳐 있는 리스트 항목들의 개별 분리 구조. +* **Video Source:** 비디오 태그(`video`) 내부에 실제 재생될 소스 파일의 경로 및 포맷. +* **Navigation Logic:** `nav` 태프트 내의 각 메뉴 클릭 시 이동할 내부/외부 링크(URL) 매핑 정보. +* **Font Files:** `Pretendable`, `Noto Sans KR` 등의 웹폰트 호스팅 및 `@font-face` 선언 경로. diff --git a/00_Raw/웹벤치마크 www.caliverse.io 분석해줘. 2026-05-20.md b/00_Raw/웹벤치마크 www.caliverse.io 분석해줘. 2026-05-20.md new file mode 100644 index 00000000..649f3890 --- /dev/null +++ b/00_Raw/웹벤치마크 www.caliverse.io 분석해줘. 2026-05-20.md @@ -0,0 +1,25 @@ +# 웹벤치마크 www.caliverse.io 분석해줘. 2026-05-20 + +- **원본 URL**: www.caliverse.io 분석해줘. +- **스캔 시각**: 2026-05-20T03:04:08.592Z +- **생성**: Astra /benchmark · Datacollect web-benchmark + +### 메타 +- **title**: (없음) +- **description**: (없음) +- **lang**: (없음) + +### 디자인 토큰 (상위) +- **컬러 팔레트 Top 5**: (없음) +- **컬러 비율**: (없음) +- **Primary Font**: `(없음)` +- **그리드**: (없음) + +### 사이트맵 (1페이지, depth 1) +``` +/ (unknown) +``` + +### 마이크로카피 +- **헤드라인**: (없음) +- **CTA Top 5**: (없음) diff --git a/10_Wiki/Topics_meeting/memory/episodes/ep_2026-05-19_회의록_작성해줘_참석자_김원일_pd_기획팀_오경득팀장_김성회_신혜진_강성.json b/10_Wiki/Topics_meeting/memory/episodes/ep_2026-05-19_회의록_작성해줘_참석자_김원일_pd_기획팀_오경득팀장_김성회_신혜진_강성.json new file mode 100644 index 00000000..5019a596 --- /dev/null +++ b/10_Wiki/Topics_meeting/memory/episodes/ep_2026-05-19_회의록_작성해줘_참석자_김원일_pd_기획팀_오경득팀장_김성회_신혜진_강성.json @@ -0,0 +1,26 @@ +{ + "id": "28fc0a7c-563c-406f-a6fa-7fc21cbc23ed", + "sessionId": "task_1779179713679", + "title": "회의록 작성해줘. 참석자 : 김원일 PD, 기획팀: 오경득팀장, 김성회, 신혜진, 강성규. PM 한에...", + "summary": "시작: 회의록 작성해줘. \n\n참석자 : 김원일 PD, 기획팀: 오경득팀장, 김성회, 신혜진, 강성규. PM 한에성. \n\n일시 ; 2026년 5월 19일 @ 14시 \n장소 : 5층 회의실\n → 최종: 그러면 내 컴퓨터가 i7 12세대, RTX3080 이라고 할경우, 제일 적합한 모델과 세팅값을 알려줄 수 있어?", + "keyDecisions": [ + "전체 영상에 적용 하는 것으로 하되 자막 제공이 안되는 영상도 있을 수 있다.", + "게스트 로그인을 삭제하면 약관 동의 절차도 최소화 가능하며, UUID 관리 방식에 대한 법무 검토 필요.", + "사항 및 Action Items (TO-DO)", + "(A/B 테스트) | 김성회 | 개발팀 |" + ], + "topics": [ + "참석자", + "게스트", + "그러니까", + "로그인", + "그래서", + "저희가", + "이렇게", + "그리고" + ], + "projectContext": "e:\\Wiki", + "timestamp": 1779186665422, + "duration": 0, + "messageCount": 8 +} \ No newline at end of file diff --git a/10_Wiki/Topics_meeting/memory/long_term.json b/10_Wiki/Topics_meeting/memory/long_term.json index f03d1126..d250fdb4 100644 --- a/10_Wiki/Topics_meeting/memory/long_term.json +++ b/10_Wiki/Topics_meeting/memory/long_term.json @@ -300,7 +300,137 @@ "createdAt": 1778145104617, "lastReferencedAt": 1778145104617, "referenceCount": 0 + }, + { + "id": "99d505ae-b031-44b7-90a6-bc3d9696a09c", + "category": "rule", + "content": "무조건 오른쪽 되는 거잖아요. 연동되면 네 맞습니다.", + "source": "session:task_1779179713679", + "confidence": 0.7, + "createdAt": 1779186665369, + "lastReferencedAt": 1779186665369, + "referenceCount": 0 + }, + { + "id": "849506dc-5450-4338-a25c-005cd25e3226", + "category": "rule", + "content": "무조건 로그인해야지만 돌아가는 건 아니고 그러면 그건 필요가 없다.", + "source": "session:task_1779179713679", + "confidence": 0.7, + "createdAt": 1779186665370, + "lastReferencedAt": 1779186665370, + "referenceCount": 0 + }, + { + "id": "d290c0e5-7415-488a-9ab1-3caa5c175442", + "category": "rule", + "content": "무조건 넘어가 뒤쪽은", + "source": "session:task_1779179713679", + "confidence": 0.7, + "createdAt": 1779186665371, + "lastReferencedAt": 1779186665371, + "referenceCount": 0 + }, + { + "id": "793ffed2-ab1c-420a-a1b1-c59c4ef4b14a", + "category": "rule", + "content": "이후에 이제 홈으로 진입을 하게 되는데요.", + "source": "session:task_1779179713679", + "confidence": 0.7, + "createdAt": 1779186665377, + "lastReferencedAt": 1779186665377, + "referenceCount": 0 + }, + { + "id": "dbb321eb-34f4-4f08-a5c9-bddf1ee7f7bb", + "category": "rule", + "content": "이후에 이제 이동 이용 약관 동의 화면으로 넘어가고요.", + "source": "session:task_1779179713679", + "confidence": 0.7, + "createdAt": 1779186665381, + "lastReferencedAt": 1779186665381, + "referenceCount": 0 + }, + { + "id": "2ba0dc07-f537-4649-926a-0de484b91a46", + "category": "rule", + "content": "이후에 해야 될지 앞에서 해야 될지 고민이다라고 말씀을 드렸던 상태고요.", + "source": "session:task_1779179713679", + "confidence": 0.7, + "createdAt": 1779186665385, + "lastReferencedAt": 1779186665385, + "referenceCount": 0 + }, + { + "id": "4cea1972-02c4-4bcb-b9a3-dc60024a05af", + "category": "rule", + "content": "이후에 하는 게 확실하다라고 답변을 주기는 했었거든요.", + "source": "session:task_1779179713679", + "confidence": 0.7, + "createdAt": 1779186665389, + "lastReferencedAt": 1779186665389, + "referenceCount": 0 + }, + { + "id": "191f32b7-271d-45dd-a24d-0fe9c08aed6a", + "category": "rule", + "content": "이후에 계정 연동을 하기 위해서는 이제 이 마이 페이지에서 옵션 화면으로 진입을 해야 되고요.", + "source": "session:task_1779179713679", + "confidence": 0.7, + "createdAt": 1779186665394, + "lastReferencedAt": 1779186665394, + "referenceCount": 0 + }, + { + "id": "b27407ff-7bb7-4dc6-aaf5-dc541181f8b8", + "category": "goal", + "content": "목표 가 될 것 같고 나머지 소셜 쪽 기능들은 일단 저희가 게스트 로그인을 하는 순간에 막 많은 숫자의 계정들이 생길 거고 게시되는 자료들이 많아지면 사실 저희는 다 스토리지 이슈가 있을 것 같아서 막는 게 맞지 않을까", + "source": "session:task_1779179713679", + "confidence": 0.7, + "createdAt": 1779186665398, + "lastReferencedAt": 1779186665398, + "referenceCount": 0 + }, + { + "id": "82fd1db5-7c22-4345-8f53-4d6f119c9c57", + "category": "goal", + "content": "결국에는 위버스 쪽에서 어떻게 했는지를 체크해 보면 되는데 enko JP 이에 따라 폰트가 달라지게 되거나", + "source": "session:task_1779179713679", + "confidence": 0.7, + "createdAt": 1779186665402, + "lastReferencedAt": 1779186665402, + "referenceCount": 0 + }, + { + "id": "53ff4274-200f-4f0d-8622-a03ec1e72ca1", + "category": "goal", + "content": "결국에 게스트는 막아야 되는 게 맞는 것 같습니다.", + "source": "session:task_1779179713679", + "confidence": 0.7, + "createdAt": 1779186665406, + "lastReferencedAt": 1779186665406, + "referenceCount": 0 + }, + { + "id": "b4825160-9df6-4e99-b668-fe2b4ad2fb5e", + "category": "decision", + "content": "결론 : 전체 영상에 적용 하는 것으로 하되 자막 제공이 안되는 영상도 있을 수 있다.", + "source": "session:task_1779179713679", + "confidence": 0.7, + "createdAt": 1779186665411, + "lastReferencedAt": 1779186665411, + "referenceCount": 0 + }, + { + "id": "e1127369-133f-4db6-8d99-3335b29f666a", + "category": "decision", + "content": "으로 결정", + "source": "session:task_1779179713679", + "confidence": 0.7, + "createdAt": 1779186665416, + "lastReferencedAt": 1779186665416, + "referenceCount": 0 } ], - "lastUpdated": 1778145104617 + "lastUpdated": 1779186665416 } \ No newline at end of file