Download index.html from quantid/home: direct link, hf CLI and curl.
- Browser
- Download file 78.8 kB
-
https://huggingface.co/spaces/quantid/home/resolve/main/index.html
- Command line
-
hf download hf://spaces/quantid/home/index.html
-
curl -L -o index.html https://huggingface.co/spaces/quantid/home/resolve/main/index.html
78.8 kB
| <html lang="ko"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>ํํธID ยท ํ ํฐ ๊ฒ์นจ ยท AI ์๊ฐ๋ฅผ ์ฌ๊ณ ๋ฑ๊ธ์ ๋งค๊น๋๋ค</title> | |
| <meta name="description" content="AI์ ๋์ด ์ผ๋ง ๋๊ฐ๋์ง๋ ์์๋ ์ด๋๋ก ๋๊ฐ๋์ง๋ ๋ชจ๋ฆ ๋๋ค. ํํธID๋ ์ ๋ฌด ํ ๊ฑด์ด ํ ํฐ ๋ช ๊ฐ๋ฅผ ๋จน๋์ง๋ถํฐ ์ฌ ๋๋ฆฝ๋๋ค. ํ ํฐ ์์ฅ ยท ํ ํฐ ๋ฑ๊ธ ยท ํํธ 4ํ์ . ๋ง ์์์ ๋์๊ฐ๋๋ค."> | |
| <meta property="og:title" content="ํํธID ยท ํ ํฐ ๊ฒ์นจ"> | |
| <meta property="og:description" content="๋ฒ๋ ๊ฑด ์, ์ฐ๋ ๊ฑด ํ ํฐ. ๊ทธ ์ฌ์ด ํ์จ์ ์๋ ํ์ฌ๊ฐ ์์ต๋๋ค. ํํธID๊ฐ ๊ทธ ํ์จ์ ์ฝ๋๋ค."> | |
| <meta property="og:type" content="website"> | |
| <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' fill='%23141820'/%3E%3Crect x='24' y='24' width='52' height='52' fill='none' stroke='%23F7F3EA' stroke-width='6' transform='rotate(5 50 50)'/%3E%3Crect x='42' y='42' width='16' height='16' fill='%233963CF'/%3E%3C/svg%3E"> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans+KR:wght@400;500;600;700&display=swap"> | |
| <link rel="stylesheet" href="brand.css"> | |
| <style> | |
| *{box-sizing:border-box} | |
| html{scroll-behavior:smooth} | |
| body{ | |
| margin:0; background:var(--ground); color:var(--ink); | |
| font-family:"IBM Plex Sans KR","IBM Plex Sans",system-ui,-apple-system,sans-serif; | |
| font-size:16px; line-height:1.75; -webkit-font-smoothing:antialiased; | |
| } | |
| .wrap{max-width:var(--max); margin:0 auto; padding:0 24px} | |
| h1,h2,h3,h4{margin:0; text-wrap:balance; letter-spacing:-.02em} | |
| p{margin:0} | |
| .mono{font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums} | |
| .en{display:block; font-family:"IBM Plex Mono",monospace; font-size:12px; font-weight:400; | |
| letter-spacing:.1em; color:var(--ink3); text-transform:uppercase; margin-top:7px} | |
| /* โโ ๋ก๊ณ โโ */ | |
| .mark{width:30px; height:30px; flex:none} | |
| .wordmark{font-weight:600; font-size:17px; letter-spacing:.24em; text-transform:uppercase} | |
| .logo{display:flex; align-items:center; gap:11px; color:inherit; text-decoration:none} | |
| .logo .tl{font-family:"IBM Plex Mono",monospace; font-size:9px; letter-spacing:.2em; | |
| color:var(--ink3); display:block; margin-top:2px; text-transform:uppercase} | |
| /* โโ nav โโ */ | |
| nav{position:sticky; top:0; z-index:50; background:rgba(247,243,234,.92); | |
| backdrop-filter:blur(10px); border-bottom:1px solid var(--line)} | |
| nav .wrap{display:flex; align-items:center; justify-content:space-between; height:66px} | |
| nav .links{display:flex; gap:24px; font-size:13.5px; color:var(--ink2)} | |
| nav .links a{color:inherit; text-decoration:none} | |
| nav .links a:hover{color:var(--blue)} | |
| @media(max-width:860px){nav .links{display:none}} | |
| /* โโ section โโ */ | |
| section{padding:96px 0; border-bottom:1px solid var(--line)} | |
| .eyebrow{font-family:"IBM Plex Mono",monospace; font-size:11.5px; font-weight:600; | |
| letter-spacing:.2em; text-transform:uppercase; color:var(--blue); margin-bottom:18px} | |
| .h2{font-size:clamp(26px,3.6vw,38px); font-weight:700; line-height:1.28} | |
| .lead{margin-top:20px; max-width:64ch; font-size:17px; color:var(--ink2)} | |
| .note{margin-top:28px; padding:18px 22px; border-left:3px solid var(--blue); | |
| background:var(--surface); font-size:14.5px; color:var(--ink2)} | |
| .note strong{color:var(--ink)} | |
| /* ์ด๋์ด ๋ */ | |
| .dark{background:var(--obsidian); color:var(--ivory); border-bottom:none} | |
| .dark .h2{color:var(--ivory)} | |
| .dark .lead{color:#B9BEC7} | |
| .dark .eyebrow{color:#7E9BE0} | |
| /* โโ hero โโ */ | |
| .hero{padding:104px 0 92px; border-bottom:1px solid var(--line)} | |
| .hero-grid{display:grid; gap:56px; align-items:center} | |
| @media(min-width:900px){.hero-grid{grid-template-columns:1.1fr .9fr}} | |
| .hero .kicker{font-family:"IBM Plex Mono",monospace; font-size:12.5px; letter-spacing:.2em; | |
| text-transform:uppercase; color:var(--blue); margin-bottom:24px} | |
| .hero h1{font-size:clamp(30px,5.6vw,52px); font-weight:700; line-height:1.2} | |
| .hero h1 .sub{display:block; color:var(--ink3); font-size:clamp(19px,2.6vw,26px); | |
| font-weight:500; margin-bottom:14px; letter-spacing:-.01em} | |
| .hero .tagline{margin-top:26px; font-size:18px; color:var(--ink2); max-width:52ch} | |
| .cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:34px} | |
| .btn{display:inline-block; padding:13px 24px; font-size:14.5px; font-weight:600; | |
| text-decoration:none; border:1px solid transparent; cursor:pointer; border-radius:2px} | |
| .btn-p{background:var(--blue); color:#fff} | |
| .btn-p:hover{background:var(--blue-deep)} | |
| .btn-s{border-color:var(--line2); color:var(--ink); background:transparent} | |
| .btn-s:hover{border-color:var(--blue); color:var(--blue)} | |
| /* โโ cards โโ */ | |
| .grid{display:grid; gap:16px; margin-top:40px} | |
| .g3,.g4{grid-template-columns:1fr} | |
| @media(min-width:720px){.g4{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)}} | |
| @media(min-width:1000px){.g4{grid-template-columns:repeat(4,1fr)}} | |
| .card{background:var(--surface); border:1px solid var(--line); padding:24px} | |
| .card h3{font-size:17px; font-weight:600; margin-bottom:10px} | |
| .card p{font-size:14.5px; color:var(--ink2)} | |
| .card .num{font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--blue); | |
| letter-spacing:.12em; margin-bottom:14px} | |
| .card .cut{margin-top:16px; padding-top:12px; border-top:1px solid var(--line); | |
| font-size:12.5px; color:var(--ink3)} | |
| .q-card{background:var(--surface); border:1px solid var(--line); padding:26px; | |
| position:relative; overflow:hidden} | |
| .q-card::before{content:""; position:absolute; inset:0 auto 0 0; width:4px; background:var(--blue)} | |
| .q-card .verb{font-size:13px; color:var(--blue); font-weight:600} | |
| .q-card h3{font-size:21px; font-weight:700; margin:8px 0 5px} | |
| .q-card .romaji{font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.16em; | |
| color:var(--ink3); text-transform:uppercase} | |
| .q-card p{margin-top:15px; font-size:14.5px; color:var(--ink2)} | |
| .q-card .cut{margin-top:18px; padding-top:14px; border-top:1px solid var(--line); | |
| font-size:12.5px; color:var(--ink3)} | |
| .q-card .cut b{color:var(--blue); font-weight:600} | |
| /* โโ ์ธ์ฆ ๋งํฌ โโ */ | |
| .marks{display:grid; gap:14px; margin-top:38px} | |
| .markrow{display:flex; align-items:center; gap:0; border:1px solid var(--line2); | |
| background:var(--surface); border-radius:14px; overflow:hidden} | |
| .markrow.inv{background:var(--obsidian); border-color:var(--blue)} | |
| .markrow .mk{flex:none; width:118px; display:flex; align-items:center; justify-content:center; padding:22px 0} | |
| .markrow .bar{width:1px; align-self:stretch; background:var(--line2); margin:18px 0} | |
| .markrow.inv .bar{background:var(--blue)} | |
| .markrow .mt{padding:20px 24px; flex:1} | |
| .markrow .mt h4{font-size:clamp(17px,2.4vw,24px); font-weight:700; letter-spacing:.06em; text-transform:uppercase} | |
| .markrow .mt .ms{font-family:"IBM Plex Mono",monospace; font-size:11.5px; letter-spacing:.12em; | |
| color:var(--blue); text-transform:uppercase; margin-top:6px} | |
| .markrow .mt .mk-ko{font-size:14px; color:var(--ink2); margin-top:10px} | |
| .markrow.inv .mt h4{color:var(--ivory)} | |
| .markrow.inv .mt .mk-ko{color:#B9BEC7} | |
| .markrow.inv .mt .ms{color:#7E9BE0} | |
| /* โโ table โโ */ | |
| .tw{overflow-x:auto; margin-top:34px; border:1px solid var(--line); background:var(--surface)} | |
| table{border-collapse:collapse; width:100%; min-width:560px; font-size:14.5px} | |
| th,td{padding:13px 16px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top} | |
| thead th{background:var(--surface2); font-family:"IBM Plex Mono",monospace; font-size:11.5px; | |
| font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink2); white-space:nowrap} | |
| td.n,th.n{text-align:right; font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums; white-space:nowrap} | |
| tbody tr:last-child td{border-bottom:none} | |
| tr.tot td{background:var(--blue-soft); font-weight:600} | |
| tr.tot td.n{color:var(--blue-deep)} | |
| /* โโ grade โโ */ | |
| .grades{display:grid; gap:12px; margin-top:36px} | |
| @media(min-width:720px){.grades{grid-template-columns:repeat(4,1fr)}} | |
| .grade{background:var(--surface); border:1px solid var(--line); padding:22px; border-top:3px solid var(--g)} | |
| .grade .lt{font-family:"IBM Plex Mono",monospace; font-size:34px; font-weight:600; color:var(--g); line-height:1} | |
| .grade h4{margin:12px 0 8px; font-size:15px; font-weight:600} | |
| .grade p{font-size:13.5px; color:var(--ink2)} | |
| /* โโ meter โโ */ | |
| .meter{display:grid; gap:28px; margin-top:38px} | |
| @media(min-width:980px){.meter{grid-template-columns:1fr 1fr}} | |
| .panel{background:var(--surface); border:1px solid var(--line); padding:26px} | |
| .dark .panel{background:#1C222C; border-color:#2E3642} | |
| .field{margin-bottom:18px} | |
| .field label{display:block; font-size:13px; color:var(--ink2); margin-bottom:7px} | |
| .dark .field label{color:#B9BEC7} | |
| .field input{width:100%; padding:11px 13px; background:var(--ground); color:var(--ink); | |
| border:1px solid var(--line2); font-size:14.5px; font-family:"IBM Plex Mono",monospace} | |
| .dark .field input{background:#141820; color:var(--ivory); border-color:#39424F} | |
| .field input:focus{outline:2px solid var(--blue); outline-offset:1px; border-color:var(--blue)} | |
| .checks{display:grid; gap:10px; margin:22px 0} | |
| .chk{display:flex; gap:11px; align-items:flex-start; font-size:14px; color:var(--ink2); cursor:pointer} | |
| .dark .chk{color:#B9BEC7} | |
| .chk input{margin:4px 0 0; accent-color:var(--blue); width:16px; height:16px; flex:none} | |
| .result{display:none} | |
| .result.on{display:block} | |
| .rg{display:flex; align-items:center; gap:18px; padding-bottom:20px; border-bottom:1px solid var(--line)} | |
| .dark .rg{border-color:#2E3642} | |
| .rg .letter{font-family:"IBM Plex Mono",monospace; font-size:58px; font-weight:600; line-height:.9} | |
| .rg .txt{font-size:14px; color:var(--ink2)} | |
| .dark .rg .txt{color:#B9BEC7} | |
| .rows{margin-top:20px; display:grid; gap:11px} | |
| .row{display:flex; justify-content:space-between; gap:14px; font-size:14px} | |
| .row span{color:var(--ink2)} | |
| .dark .row span{color:#B9BEC7} | |
| .row b{font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums; font-weight:600} | |
| .cav{margin-top:22px; padding-top:18px; border-top:1px solid var(--line); font-size:12.5px; color:var(--ink3)} | |
| .dark .cav{border-color:#2E3642; color:#8C93A0} | |
| .cav li{margin-bottom:7px} | |
| .hint{font-size:12.5px; color:var(--ink3); margin:-8px 0 18px} | |
| /* โโ partners / steps โโ */ | |
| .partners{display:grid; gap:14px; margin-top:30px} | |
| @media(min-width:720px){.partners{grid-template-columns:repeat(2,1fr)}} | |
| .pt{background:var(--surface); border:1px solid var(--line); padding:20px 22px} | |
| .pt h4{font-size:16px; font-weight:600} | |
| .pt p{margin-top:8px; font-size:13.5px; color:var(--ink2)} | |
| .pt .tags{margin-top:12px; display:flex; flex-wrap:wrap; gap:7px} | |
| .tag{font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.06em; | |
| padding:3px 10px; border:1px solid var(--line2); border-radius:99px; color:var(--ink2)} | |
| .steps{display:grid; gap:14px; margin-top:36px} | |
| @media(min-width:900px){.steps{grid-template-columns:repeat(4,1fr)}} | |
| .step{background:var(--surface); border:1px solid var(--line); padding:22px} | |
| .step .sn{font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--blue); letter-spacing:.12em} | |
| .step h4{margin:10px 0 8px; font-size:16px; font-weight:600} | |
| .step p{font-size:13.5px; color:var(--ink2)} | |
| .step .dur{margin-top:12px; font-family:"IBM Plex Mono",monospace; font-size:11.5px; color:var(--ink3)} | |
| footer{padding:64px 0 80px; background:var(--obsidian); color:#8C93A0; font-size:13.5px} | |
| footer .fg{display:grid; gap:34px} | |
| @media(min-width:820px){footer .fg{grid-template-columns:1.3fr 1fr}} | |
| footer b{color:#B9BEC7; font-weight:600} | |
| footer .wordmark{color:var(--ivory)} | |
| footer .tl{color:#6E7480} | |
| .legal{margin-top:34px; padding-top:22px; border-top:1px solid #2E3642; font-size:12.5px; line-height:1.85; color:#7A818D} | |
| .legal b{color:#B9BEC7} | |
| svg{display:block; max-width:100%; height:auto} | |
| .grid.g2{grid-template-columns:repeat(2,1fr)} | |
| .card.chart svg{width:100%;height:auto;display:block;margin:16px 0 6px} | |
| .card.chart h3{font-size:17px;line-height:1.45} | |
| @media(max-width:880px){.grid.g2{grid-template-columns:1fr}} | |
| .board{display:grid;grid-template-columns:minmax(260px,340px) 1fr;gap:20px;margin-top:30px;align-items:start} | |
| .bpanel .f2{display:grid;grid-template-columns:1fr 1fr;gap:12px} | |
| .bpanel .f3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px} | |
| .bpanel select,.bpanel input{width:100%;padding:10px 12px;border:1px solid var(--line2); | |
| background:var(--surface);color:var(--ink);font:inherit;font-size:14px;border-radius:0} | |
| .bpanel select:focus,.bpanel input:focus{outline:2px solid var(--blue);outline-offset:-2px} | |
| .plotwrap{padding:14px 12px 10px} | |
| .plotwrap svg{width:100%;height:auto;display:block} | |
| .legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:10px;font-size:11.5px;color:var(--ink2)} | |
| .legend i.d{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px;vertical-align:middle} | |
| .legend i.gold{background:#B8B0A0}.legend i.ours{background:var(--blue)}.legend i.you{background:#2A7A4F} | |
| .legend i.ln{display:inline-block;width:16px;border-top:2px dashed #B0432C;margin-right:5px;vertical-align:middle} | |
| .bcards{margin-top:24px} | |
| .card.kpi .big{font-size:29px;font-weight:700;line-height:1.15;margin:8px 0 4px;letter-spacing:-.02em} | |
| .card.kpi .sub{font-size:11.5px;color:var(--ink3);line-height:1.5} | |
| table.brank tr.mine{background:var(--blue-soft)} | |
| table.brank tr.mine td{font-weight:600} | |
| .gr{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.06em; | |
| padding:2px 6px;border:1px solid var(--line2);color:var(--ink2)} | |
| .gr.g-GOLD{border-color:#B07A1E;color:#8A5E13} | |
| .gr.g-VERIFIED{border-color:var(--blue);color:var(--blue-deep)} | |
| @media(max-width:900px){.board{grid-template-columns:1fr}} | |
| .band{background:var(--obsidian);color:var(--ivory);border-bottom:none;padding:56px 0 60px} | |
| .band .bandline{border-bottom:1px solid #2C333F;padding-bottom:26px;margin-bottom:34px} | |
| .band .beq{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:16px} | |
| .band .bt{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.18em; | |
| text-transform:uppercase;border:1px solid #4A5262;padding:7px 14px;color:#B9BEC7} | |
| .band .bt.bgain{border-color:var(--blue);color:#9DB6EE} | |
| .band .bop{font-size:19px;color:#6E7686} | |
| .band .bh{font-size:clamp(25px,3.4vw,40px);font-weight:700;letter-spacing:-.025em;line-height:1.25} | |
| .band .bgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px} | |
| .band .bnum{font-size:34px;font-weight:700;color:#7E9BE0;letter-spacing:-.03em;line-height:1} | |
| .band .bcol h3{font-size:16.5px;font-weight:700;margin:12px 0 9px} | |
| .band .bcol p{font-size:14px;line-height:1.72;color:#B9BEC7} | |
| .band .bcol p strong{color:var(--ivory)} | |
| .band .bcut{margin-top:12px;padding-top:10px;border-top:1px solid #2C333F; | |
| font-size:11.5px;color:#8C93A0} | |
| @media(max-width:880px){.band .bgrid{grid-template-columns:1fr;gap:30px}} | |
| .bstat{margin-top:30px} | |
| .bench2{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px} | |
| .bench2 svg{width:100%;height:auto;margin-top:16px} | |
| .bench2 .card h3{font-size:18px;font-weight:700;margin:8px 0 10px;line-height:1.45} | |
| table.bscore td.n,table.bscore th.n{text-align:right;font-family:'IBM Plex Mono',monospace} | |
| table.bscore tbody td.n{font-weight:700;color:var(--blue-deep)} | |
| .bcta{margin-top:24px;padding:26px 28px;background:var(--obsidian);color:var(--ivory); | |
| display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between} | |
| .bcta .bk{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.16em; | |
| text-transform:uppercase;color:#7E9BE0} | |
| .bcta h3{font-size:20px;font-weight:700;margin:8px 0 6px} | |
| .bcta p{font-size:14px;color:#B9BEC7;max-width:52ch} | |
| .press{margin-top:22px;padding:22px 24px;border:1px solid var(--line);background:var(--surface)} | |
| .press .pk{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.16em; | |
| text-transform:uppercase;color:var(--ink3);margin-bottom:8px} | |
| .press .ptitle{display:block;font-size:18px;font-weight:700;line-height:1.5; | |
| color:var(--ink);text-decoration:none;border-bottom:2px solid var(--blue-soft)} | |
| .press .ptitle:hover{border-bottom-color:var(--blue)} | |
| .press .pmeta{margin-top:8px;font-size:12.5px;color:var(--ink3)} | |
| .press p{margin-top:10px;font-size:14px;color:var(--ink2)} | |
| @media(max-width:900px){.bench2{grid-template-columns:1fr}} | |
| </style> | |
| </head> | |
| <body> | |
| <svg width="0" height="0" style="position:absolute" aria-hidden="true"><defs> | |
| <symbol id="qmark" viewBox="0 0 100 100"> | |
| <g fill="none" stroke="currentColor" stroke-width="5.2" stroke-linecap="butt"> | |
| <path d="M89.58 33.20 A43 43 0 0 1 86.06 73.42"/> | |
| <path d="M66.80 89.58 A43 43 0 0 1 26.58 86.06"/> | |
| <path d="M10.42 66.80 A43 43 0 0 1 13.94 26.58"/> | |
| <path d="M33.20 10.42 A43 43 0 0 1 73.42 13.94"/> | |
| <rect x="21" y="21" width="58" height="58" transform="rotate(5 50 50)"/> | |
| </g> | |
| <ellipse cx="50" cy="50" rx="27" ry="13.5" transform="rotate(-40 50 50)" | |
| fill="none" stroke="currentColor" stroke-width="1.5" opacity=".85"/> | |
| <circle cx="70.68" cy="32.64" r="4.2" fill="#3963CF"/> | |
| <rect x="44.5" y="44.5" width="11" height="11" fill="#3963CF"/> | |
| </symbol> | |
| </defs></svg> | |
| <nav><div class="wrap"> | |
| <a class="logo" href="#top"> | |
| <svg class="mark" aria-hidden="true"><use href="#qmark"/></svg> | |
| <span><span class="wordmark">Quantid</span><span class="tl">The Trust Layer</span></span> | |
| </a> | |
| <div class="links"> | |
| <a href="#metering">ํ ํฐ ๊ฒ์นจ</a> | |
| <a href="#products">ํํธ 4ํ์ </a> | |
| <a href="#ledger">ํ ํฐ ์์ฅ</a> | |
| <a href="#marks">์ธ์ฆ ๋งํฌ</a> | |
| <a href="#proof">์ค์ธก</a> | |
| <a href="#board">์ ๊ณ ๋์กฐ</a> | |
| <a href="#bench">๊ณต์ธ ์ฑ์ </a> | |
| <a href="#self">์๊ฐ ๊ฒ์นจ</a> | |
| <a href="#contact">๋ฌธ์</a> | |
| </div> | |
| </div></nav> | |
| <!-- HERO --> | |
| <header class="hero" id="top"><div class="wrap hero-grid"> | |
| <div> | |
| <div class="kicker">Token Metering ยท ํ ํฐ ๊ฒ์นจ</div> | |
| <h1><span class="sub">AI ์๋์ ์๊ฐ ๋จ์</span>๋ฒ๋ ๊ฑด ์<br>์ฐ๋ ๊ฑด ํ ํฐ</h1> | |
| <p class="tagline">๋งค์ถ์ ์์ผ๋ก ์กํ๋๋ฐ ์๊ฐ๋ ํ ํฐ์ผ๋ก ๋๊ฐ๋๋ค. | |
| <strong>๊ทธ ์ฌ์ด ํ์จ์ ์๋ ํ์ฌ๊ฐ ์์ต๋๋ค.</strong> ํํธID๋ ์ ๋ฌด ํ ๊ฑด์ด ํ ํฐ ๋ช ๊ฐ๋ฅผ ๋จน๋์ง, | |
| ๊ทธ๊ฒ ์ผ๋ง์ธ์ง๋ฅผ ์ฌ ๋๋ฆฝ๋๋ค.</p> | |
| <div class="cta"> | |
| <a class="btn btn-p" href="#self">1๋ถ์ด๋ฉด ๋ฑ๊ธ ๋์ต๋๋ค</a> | |
| <a class="btn btn-s" href="#products">ํํธ 4ํ์ </a> | |
| </div> | |
| </div> | |
| <div style="display:flex; justify-content:center"> | |
| <svg viewBox="0 0 100 100" style="width:min(300px,70vw); color:var(--obsidian)" role="img" | |
| aria-label="ํํธID ์ฌ๋ณผ. ๊ถค๋ ํ๋, ์ ์ ํ๋, ๊ฒ์ฆ๋ ์ ์ฒด ํ๋"> | |
| <use href="#qmark"/> | |
| </svg> | |
| </div> | |
| </div></header> | |
| <!-- ๊ฐ์น ๋ฑ์ --> | |
| <section class="band"><div class="wrap"> | |
| <div class="bandline"> | |
| <div class="beq"> | |
| <span class="bt">ํ ํฐ ์ ๊ฐ</span> | |
| <span class="bop">=</span> | |
| <span class="bt bgain">์์ต ์ฆ๊ฐ</span> | |
| </div> | |
| <h2 class="bh">ํ ํฐ์ ์ ๊ฐํ๋ฉด ์์ต์ด ์ฆ๊ฐํฉ๋๋ค</h2> | |
| </div> | |
| <div class="bgrid"> | |
| <div class="bcol"> | |
| <div class="bnum">3.93๋ฐฐ</div> | |
| <h3>๊ฐ์ ์ผ์ ๋ ์ ์ ํ ํฐ์ผ๋ก</h3> | |
| <p>ํ๋ฉด ํ ์ฅ์ ์ฝ๋ ๋ฐ 4,444ํ ํฐ ์ฐ๋ ๊ฒ์ 1,132ํ ํฐ์ผ๋ก ์ค์์ต๋๋ค. | |
| ๋๊ฐ๋ ๋์ด ๊ทธ๋งํผ ์ค์ด๋ญ๋๋ค.</p> | |
| <div class="bcut">์ค์ธก ยท ์์ด ํ๋ฉด ๊ธฐ์ค</div> | |
| </div> | |
| <div class="bcol"> | |
| <div class="bnum">2.6๋ฐฐ</div> | |
| <h3>๊ฐ์ ์ฅ๋น๋ก ๋ ๋ง์ด ๋ฐ์ต๋๋ค</h3> | |
| <p>GPU๋ฅผ ํ ์ฅ๋ ๋ ์ฌ์ง ์๊ณ ์ฒ๋ฆฌ๋์ด ๋์ด๋ฉ๋๋ค. | |
| <strong>์ฅ๋น๊ฐ ํ๊ณ๋ผ ๋ชป ๋ฐ๋ ์ผ์ ๋ฐ์ ์ ์๋ค๋ ๋ป์ ๋๋ค.</strong> | |
| ์ฌ๊ธฐ์ ๋์ด๋๋ ๊ฑด ์๋ ๋์ด ์๋๋ผ <strong>์๋ก ๋ฒ๋ ๋</strong>์ ๋๋ค.</p> | |
| <div class="bcut">์ค์ธก ยท ๋์ 8๋ช 2.6๋ฐฐ ~ 256๋ช 1.33๋ฐฐ</div> | |
| </div> | |
| <div class="bcol"> | |
| <div class="bnum">1์ฅ</div> | |
| <h3>์ค์ธ ๋งํผ์ด ๊ทธ๋๋ก ๋จ์ต๋๋ค</h3> | |
| <p>ํ ํฐ์ด ์ค๋ฉด ๊ฐ์ ์ ๋ฌด์ ํ์ํ GPU ์ฅ์๊ฐ ์ค๊ณ , | |
| ๋จ์ ์ฅ๋น๋ ๋ค๋ฅธ ์ ๋ฌด์ ์๋๋ค. ์ฌ๋๊ณ ๋ชป ์ฐ๋ ์๋ฆฌ๊ฐ ์ด๋ฆฝ๋๋ค.</p> | |
| <div class="bcut">09 ยท ๋์กฐ์์ ๊ท์ฌ ์ฅ์๋ก ๊ณ์ฐํด ๋๋ฆฝ๋๋ค</div> | |
| </div> | |
| </div> | |
| </div></section> | |
| <!-- ๋ฌธ์ --> | |
| <section id="problem"><div class="wrap"> | |
| <div class="eyebrow">01 ยท ๋ฌธ์ </div> | |
| <h2 class="h2">์ฒญ๊ตฌ์์ ์ด์ก ํ ์ค๋ฟ์ ๋๋ค<span class="en">The bill arrives as one number</span></h2> | |
| <p class="lead">์ฒญ๊ตฌ์๋ ์์ผ๋ก ์ต๋๋ค. ๊ทธ๋ฐ๋ฐ ๋์ด ๋๊ฐ ๊ฑด ํ ํฐ ๋จ์์์ต๋๋ค. | |
| <strong>๋ ๋จ์ ์ฌ์ด๋ฅผ ์ด์ด์ฃผ๋ ํ๊ฐ ์์ผ๋</strong> ใ์ค์ด๋ผใ๋ ์ง์๋ ๋ด๋ ค์๋ | |
| ์ด๋๋ฅผ ์ค์ฌ์ผ ํ ์ง๋ฅผ ๋ชจ๋ฆ ๋๋ค.</p> | |
| <div class="grid g3"> | |
| <div class="card"><div class="num">01</div><h3>๋จ์๊ฐ ์์ต๋๋ค</h3> | |
| <p>์์ผ๋ก ์ผ๋ง์ธ์ง๋ ์๋๋ค. ์ ๋ฌด ํ ๊ฑด์ด ํ ํฐ ๋ช ๊ฐ์ธ์ง๋ ๋ชจ๋ฆ ๋๋ค. | |
| ํ์ฐํ ํ๊ฐ ์์ผ๋ ์ด๋๋ฅผ ์๋ณผ์ง ๋ชป ๊ณ ๋ฅด๊ณ , ์๋ด๋ ํจ๊ณผ๋ฅผ ์ฆ๋ช ํ ๋ฐฉ๋ฒ์ด ์์ต๋๋ค.</p></div> | |
| <div class="card"><div class="num">02</div><h3>ํ ๋ฌ ๋ค์์ผ ์๋๋ค</h3> | |
| <p>์ฒญ๊ตฌ์๊ฐ ์ค๋ฉด ์ด๋ฏธ ์ด ๋์ ๋๋ค. ๊ฒ์นจ์ ์ฐ๋ ์ค์ ํด์ผ ์ธ๋ชจ๊ฐ ์์ต๋๋ค.</p></div> | |
| <div class="card"><div class="num">03</div><h3>๊ฐ์ ๊ฑธ ์ค๋ฌด ๋ฒ ์ฝํ๋๋ค</h3> | |
| <p>ํ๋ณด ์๋ฐฑ ๊ฐ๋ฅผ ๋จ๊ณ๋ง๋ค ํต์งธ๋ก ๋ค์ ๋ณด๋ ๋๋ค. ํ๋ฉด ํ๋ ์ฒ๋ฆฌํ๋ ๋ฐ ๋ํ ๋ชจ๋ธ์ ์ค๋ฌด ๋ฒ ๋ถ๋ฆ ๋๋ค.</p></div> | |
| </div> | |
| <div class="note"><p><strong>์ต์ ํ ๋ฌธ์ ๊ฐ ์๋๋ผ ํ๊ณ ๋ฌธ์ ์ ๋๋ค.</strong> | |
| ์ ๊ธฐ๋ ์๋๋ ๊ณ๋๊ธฐ์ ๋จ๊ฐํ๊ฐ ์์ผ๋ ๊ด๋ฆฌ๊ฐ ๋ฉ๋๋ค. | |
| AI๋ง <b>๊ณ๋๊ธฐ๋ ๋จ๊ฐํ๋ ์์ด</b> ์ฐ๊ณ ์์ต๋๋ค.</p></div> | |
| </div></section> | |
| <!-- ํ ํฐ ๊ฒ์นจ --> | |
| <section id="metering"><div class="wrap"> | |
| <div class="eyebrow">02 ยท ๋ฒ์ฃผ</div> | |
| <h2 class="h2">ํ ํฐ ๊ฒ์นจ<span class="en">Token Metering</span></h2> | |
| <p class="lead">ํ ํฐ์ผ๋ก ์ฌ์ ์์ผ๋ก ํ์ฐํ๊ณ , ์์ฅ์ ์ ๊ณ , ๋ฑ๊ธ์ ๋งค๊ธฐ๊ณ , ๊ทธ๋ค์์ ์ค์ ๋๋ค. | |
| ํํ ใ๋น์ฉ ์ ๊ฐใ๊ณผ๋ ์์๊ฐ ๋ฐ๋์ ๋๋ค. | |
| <strong>์ค์ด๋ ๊ฒ ๋จผ์ ๊ฐ ์๋๋ผ ๋ ๋จ์ ์ฌ์ด ํ์จ์ ์ ํ๋ ๊ฒ ๋จผ์ ์ ๋๋ค.</strong></p> | |
| <svg viewBox="0 0 900 150" role="img" aria-label="๊ฒ์นจ์์ ํต์ ๊น์ง 4๋จ๊ณ" style="margin-top:38px"> | |
| <defs><marker id="ar" markerWidth="9" markerHeight="9" refX="7" refY="4.5" orient="auto"> | |
| <path d="M0 0 L9 4.5 L0 9 z" fill="#3963CF"/></marker></defs> | |
| <g font-family="IBM Plex Sans KR, sans-serif"> | |
| <g><rect x="4" y="34" width="190" height="82" fill="#fff" stroke="#3963CF" stroke-width="2"/> | |
| <text x="99" y="68" text-anchor="middle" fill="#141820" font-size="17" font-weight="700">โ ๊ฒ์นจ</text> | |
| <text x="99" y="92" text-anchor="middle" fill="#4A515C" font-size="12">๊ฑด๋น ํ ํฐ์ ์ฐ๋ค</text></g> | |
| <line x1="200" y1="75" x2="228" y2="75" stroke="#3963CF" stroke-width="1.6" marker-end="url(#ar)"/> | |
| <g><rect x="236" y="34" width="190" height="82" fill="#fff" stroke="#DCD6C9"/> | |
| <text x="331" y="68" text-anchor="middle" fill="#141820" font-size="17" font-weight="700">โก ์์ฅ</text> | |
| <text x="331" y="92" text-anchor="middle" fill="#4A515C" font-size="12">์ ๋ฌดยท๋จ๊ณยท๋ชจ๋ธ๋ก ๋ถํด</text></g> | |
| <line x1="432" y1="75" x2="460" y2="75" stroke="#3963CF" stroke-width="1.6" marker-end="url(#ar)"/> | |
| <g><rect x="468" y="34" width="190" height="82" fill="#fff" stroke="#DCD6C9"/> | |
| <text x="563" y="68" text-anchor="middle" fill="#141820" font-size="17" font-weight="700">โข ๋ฑ๊ธ</text> | |
| <text x="563" y="92" text-anchor="middle" fill="#4A515C" font-size="12">A ยท B ยท C ยท D ํ์ </text></g> | |
| <line x1="664" y1="75" x2="692" y2="75" stroke="#3963CF" stroke-width="1.6" marker-end="url(#ar)"/> | |
| <g><rect x="700" y="34" width="196" height="82" fill="#fff" stroke="#DCD6C9"/> | |
| <text x="798" y="68" text-anchor="middle" fill="#141820" font-size="17" font-weight="700">โฃ ํต์ </text> | |
| <text x="798" y="92" text-anchor="middle" fill="#4A515C" font-size="12">ํํธ 4ํ์ ๋ก ์ค์ธ๋ค</text></g> | |
| </g> | |
| </svg> | |
| <div class="note"><p><strong>ํ์จ์ ํ ๋ฒ ์ ํ๊ณ ๋๋์ง ์์ต๋๋ค.</strong> | |
| ์ ๋ฌด๊ฐ ๋ฐ๋๋ฉด ๊ฑด๋น ํ ํฐ์ด ๋ฐ๋๊ณ , ๋ชจ๋ธ์ด ๋ฐ๋๋ฉด ํ ํฐ๋น ๊ฐ์ด ๋ฐ๋๋๋ค. | |
| ๊ณ๋๊ธฐ๋ ๊ณ์ ๋์์ผ ๊ณ๋๊ธฐ์ฃ .</p></div> | |
| </div></section> | |
| <!-- ํํธ 4ํ์ --> | |
| <section id="products"><div class="wrap"> | |
| <div class="eyebrow">03 ยท ์ ํ</div> | |
| <h2 class="h2">ํ ํฐ๊ฐ์ด ์๋ ๊ณณ์ ๋ค ๊ตฐ๋ฐ์ ๋๋ค<span class="en">Four places where token cost is born</span></h2> | |
| <p class="lead">์ฝ๊ณ , ์ฐ๊ณ , ๋ด๊ณ , ๋๋ฅด๋ ๋ฐ์ ๊ฐ๊ฐ ํ ํฐ๊ฐ์ด ๋๊ฐ๋๋ค. | |
| ๋ค ๊ตฐ๋ฐ๊ฐ ์์ฅ์์ ์๋ก ๋ค๋ฅธ ๊ณ์ ์ด๋ผ | |
| <strong>ํจ๊ณผ๊ฐ ๋ํด์ง๋ ๊ฒ ์๋๋ผ ๊ณฑํด์ง๋๋ค.</strong> ๋ฌผ๋ก ํ ๊ตฐ๋ฐ๋ง ๋ง์๋ ๊ทธ๋งํผ์ ๋งํ๋๋ค.</p> | |
| <div class="grid g4"> | |
| <div class="q-card"><div class="verb">๋ ์ฝ๋๋ค</div><h3>ํํธ ํ์ </h3><div class="romaji">Quant Judge</div> | |
| <p>ํ๋ณด๋ฅผ ํ๊บผ๋ฒ์ ์ฑ์ ํด์ ์ธ ๊ฒ๋ง ๋๊น๋๋ค. <strong>๊ธ์๋ฅผ ํ ์๋ ๋ง๋ค์ง ์์ผ๋</strong> ์๋ ๋ต์ ์ง์ด๋ผ ๋ฐฉ๋ฒ ์์ฒด๊ฐ ์์ต๋๋ค.</p> | |
| <div class="cut">์๋ผ๋ ๊ฒ ยท <b>์ ๋ ฅ ํ ํฐ</b></div></div> | |
| <div class="q-card"><div class="verb">๋ ๋นจ๋ฆฌ ์ด๋ค</div><h3>ํํธ ๊ฐ์</h3><div class="romaji">Quant Accel</div> | |
| <p>์ฐ๋ GPU์ ์ฐ๋ ๋ชจ๋ธ ๊ทธ๋๋ก ๋๊ณ ์์ฑ ์๋๋ง ์ฌ๋ฆฝ๋๋ค. ๋์ค๋ ๋ต์ ๋ฐ์ดํธ๊น์ง ๋๊ฐ์ต๋๋ค.</p> | |
| <div class="cut">์๋ผ๋ ๊ฒ ยท <b>์๊ฐ ยท GPU ์ฅ์</b></div></div> | |
| <div class="q-card"><div class="verb">๋ ์๊ฒ ๋ด๋๋ค</div><h3>ํํธ ์์ถ</h3><div class="romaji">Quant Pack</div> | |
| <p>๋ฑ๊ธ์ ๋ด๋ฆด์๋ก ์์์ง๊ณ , ์์์ง์๋ก ๋ญ๊ฐ๋ ์์ต๋๋ค. ใ์์ค ์๋คใ๊ณ ํ์ง ์๊ณ <strong>์ผ๋ง๋ ์๋์ง ์ฌ์</strong> ๋ณด์ฌ๋๋ฆฝ๋๋ค.</p> | |
| <div class="cut">์๋ผ๋ ๊ฒ ยท <b>VRAM ยท GPU ๋จ๊ฐ</b></div></div> | |
| <div class="q-card"><div class="verb">๋ ๊ฐ๊น์ด ๋๋ค</div><h3>ํํธ ์ฃ์ง</h3><div class="romaji">Quant Edge</div> | |
| <p>ํฐ GPU ์๋ฒ ์์ด ํ์ฅ ์ฅ๋น์์ ๋๋ฆฝ๋๋ค. ๋งํ๋ ๊ฑด ์ฉ๋์ด ์๋๋ผ <strong>๋ฉ๋ชจ๋ฆฌ ๋์ญํญ</strong>์ด๋ผ, ๊ทธ ์ ์ด ์ด๋์ธ์ง๋ฅผ ์ฌ ๋๋ฆฝ๋๋ค.</p> | |
| <div class="cut">์๋ผ๋ ๊ฒ ยท <b>์ ์ก ยท ์ง์ฐ ยท ํด๋ผ์ฐ๋</b></div></div> | |
| </div> | |
| <div class="note"><p><strong>์์ถ์ ๋์ ์๋ผ๊ณ , ๊ฐ์์ ์๊ฐ์ ์๋๋๋ค. ์๋ก ํ๋ ์ผ์ด ๋ค๋ฆ ๋๋ค.</strong> | |
| ์ค์ ๋ก ์ฌ๋ณด๋ฉด ํ๋ณด๋ฅผ 3.9๋ฐฐ ์ค์ฌ๋ ํ ๊ฑด ๊ฑธ๋ฆฌ๋ ์๊ฐ์ 3.205์ด์์ 3.159์ด๋ก ๊ฑฐ์ ์ ์ค์์ต๋๋ค. | |
| ์ฝ๋ ๋ฐ 0.033์ด, ์ฐ๋ ๋ฐ 3.17์ด๊ฐ ๊ฑธ๋ฆฌ๋๊น์. ๊ทธ๋์ ๋ ๋ค ํ์ํฉ๋๋ค.</p></div> | |
| </div></section> | |
| <!-- ํ ํฐ ์์ฅ --> | |
| <section id="ledger"><div class="wrap"> | |
| <div class="eyebrow">04 ยท ์ฐ์ถ๋ฌผ</div> | |
| <h2 class="h2">ํ ํฐ ์์ฅ<span class="en">Token Ledger</span></h2> | |
| <p class="lead">์ด๋ ์ ๋ฌด๊ฐ ์ด๋ ๋จ๊ณ์์ ํ ํฐ์ ๋ช ๊ฐ ์ผ๊ณ ๊ทธ๊ฒ ์์ผ๋ก ์ผ๋ง์ธ์ง, | |
| <strong>๋ ๋จ์๋ฅผ ๋๋ํ ์ ์ ์์ฅ</strong>์ ๋๋ค. ํ๊ณ ์์ฅ๊ณผ ๊ฐ์ ๋ฌผ๊ฑด์ด๋ผ๊ณ ๋ณด์๋ฉด ๋ฉ๋๋ค. | |
| ์์ผ๋ฉด ๊ฐ์ฌ์์ ์ค ๋จ์๋ก ๋ตํ ์ ์๊ณ , ์์ผ๋ฉด ์ด์ก ํ ์ค๋ฐ์ ๋ชป ๋๋๋ค.</p> | |
| <div class="tw"><table> | |
| <thead><tr><th>์ ๋ฌด</th><th>๋จ๊ณ</th><th class="n">ํ๋ณด</th><th class="n">์ ๋ ฅ ํ ํฐ/๊ฑด</th><th class="n">์ ๊ฑด์</th><th>๋ฑ๊ธ</th></tr></thead> | |
| <tbody> | |
| <tr><td>์ฌ์ ์์ฅ ํ๋ฉด ์กฐ์</td><td>๋์ ์ ๋ณ</td><td class="n">212</td><td class="n">4,708</td><td class="n">180,000</td><td>C</td></tr> | |
| <tr><td>์๋ด ๊ธฐ๋ก ๋ฏผ๊ฐ์ ๋ณด ์ ๊ฒ</td><td>๊ตฌ๊ฐ ํ์ </td><td class="n">96</td><td class="n">2,148</td><td class="n">420,000</td><td>B</td></tr> | |
| <tr><td>๊ด์ ์๋ ์ ๋ณ</td><td>์ฐ์ ์์</td><td class="n">1,340</td><td class="n">29,615</td><td class="n">31,000</td><td>D</td></tr> | |
| <tr><td>์ฌ๋ด ๊ฒ์ ์ฌ์์</td><td>ํ๋ณด ์์ถ</td><td class="n">50</td><td class="n">1,132</td><td class="n">610,000</td><td>A</td></tr> | |
| <tr class="tot"><td colspan="4">์ ํฉ๊ณ</td><td class="n">1,241,000</td><td>C</td></tr> | |
| </tbody> | |
| </table></div> | |
| <p style="margin-top:14px; font-size:12.5px; color:var(--ink3)">๋ณด์๊ธฐ ์ฝ๊ฒ ๋ง๋ ์์์ ๋๋ค. ์ค์ ์์ฅ์ ์ฐ์๋ ๋ก๊ทธ์์ ๋ฝ์ต๋๋ค.</p> | |
| </div></section> | |
| <!-- ํ ํฐ ๋ฑ๊ธ --> | |
| <section id="grade"><div class="wrap"> | |
| <div class="eyebrow">05 ยท ์งํ</div> | |
| <h2 class="h2">ํ ํฐ ๋ฑ๊ธ<span class="en">Token Grade</span></h2> | |
| <p class="lead">๋ชจ๋ธ ์ฑ๋ฅ ๋ฑ๊ธ์ด ์๋๋๋ค. ์ ์ฉ๋ฑ๊ธ์ด ๋น ๊ฐ๋ ๋ฅ๋ ฅ์ ๋งค๊ธฐ๋ฏ, | |
| ํ ํฐ ๋ฑ๊ธ์ <strong>AI ์๊ฐ๋ฅผ ์ฅ๊ณ ์๋๋</strong>๋ฅผ ๋งค๊น๋๋ค. | |
| D๋ฅผ ๋ฐ์๋ ๋ชจ๋ธ์ด ๋์๋ค๋ ๋ป์ด ์๋๋ผ, ์์ง ํ์ฐํด ๋ณธ ์ ์ด ์๋ค๋ ๋ป์ ๋๋ค.</p> | |
| <div class="grades"> | |
| <div class="grade" style="--g:var(--gA)"><div class="lt">A</div><h4>๊ณ์ ๋ณด๊ณ ์์</h4> | |
| <p>๊ฑด๋น ํ ํฐ๋ ์๊ณ , ๋ถํด๋ ๋๊ณ , ์ค์ด๊ณ ์๊ณ , ๊ณ๋๊ธฐ๊น์ง ๋๊ณ ์์ต๋๋ค.</p></div> | |
| <div class="grade" style="--g:var(--gB)"><div class="lt">B</div><h4>์กํ ์์</h4> | |
| <p>๋ถํด๋ ์ค์ด๊ธฐ๋ ํ๋๋ฐ ๊ณ๋๊ธฐ๊ฐ ์์ต๋๋ค. ์ ๋ฌด ๋ฐ๋๋ฉด ์ฌ๊ทธ๋จธ๋ ๋๋์๊ฐ๋๋ค.</p></div> | |
| <div class="grade" style="--g:var(--gC)"><div class="lt">C</div><h4>์ด์ก๋ง ์</h4> | |
| <p>์์ผ๋ก ์ผ๋ง ๋๊ฐ๋์ง๋ ์๋๋ค. ๊ทธ ์์์ ์ด๋ ์ ๋ฌด๊ฐ ๋จน์๋์ง๋ ๋ชจ๋ฆ ๋๋ค.</p></div> | |
| <div class="grade" style="--g:var(--gD)"><div class="lt">D</div><h4>์์ง ์ ์ฌ๋ด</h4> | |
| <p>๊ฑด๋น ํ ํฐ๋, ๊ทธ๊ฒ ์์ผ๋ก ์ผ๋ง์ธ์ง๋ ๋ชจ๋ฆ ๋๋ค. ์ค์ผ ๋์ ์์ฒด๊ฐ ์์ง ์ ์ ํด์ง ์ํ์ ๋๋ค.</p></div> | |
| </div> | |
| </div></section> | |
| <!-- ์ธ์ฆ ๋งํฌ --> | |
| <section id="marks"><div class="wrap"> | |
| <div class="eyebrow">06 ยท ์ธ์ฆ</div> | |
| <h2 class="h2">๊ฒ์นจ์ ๋ง์น๋ฉด ๋งํฌ๊ฐ ๋๊ฐ๋๋ค<span class="en">Certification Marks</span></h2> | |
| <p class="lead">๋ฑ๊ธ๋ง ์๋ ค๋๋ฆฌ๊ณ ๋๋์ง ์์ต๋๋ค. ๊ฒ์นจ์ ๋ฐ์ ๊ธฐ์ ์ ์๋ ๋งํฌ๋ฅผ ์ฐ์ค ์ ์์ต๋๋ค. | |
| ๊ฐ์ฌยท์ ์์ยทํํ์ด์ง์ ๋ถ์ด์๋ฉด ใ์๊ฐ๋ฅผ ์ฌ๊ณ ์๋ ํ์ฌใ๋ผ๋ ํ์๊ฐ ๋ฉ๋๋ค.</p> | |
| <div class="marks"> | |
| <div class="markrow"> | |
| <div class="mk"><svg style="width:64px; color:var(--obsidian)" viewBox="0 0 100 100" aria-hidden="true"><use href="#qmark"/></svg></div> | |
| <div class="bar"></div> | |
| <div class="mt"><h4>Quantid Verified</h4><div class="ms">Measured Identity ยท Verified Trust</div> | |
| <p class="mk-ko">ํ ํฐ ์์ฅ์ ๋ฐ๊ณ ๋ฑ๊ธ ํ์ ๊น์ง ๋ง์น ๊ธฐ์ </p></div> | |
| </div> | |
| <div class="markrow inv"> | |
| <div class="mk"><svg style="width:64px; color:var(--ivory)" viewBox="0 0 100 100" aria-hidden="true"><use href="#qmark"/></svg></div> | |
| <div class="bar"></div> | |
| <div class="mt"><h4>Grade A ยท B</h4><div class="ms">Verified by Quantid</div> | |
| <p class="mk-ko">A ๋๋ B ๋ฑ๊ธ์ ๋ฐ์ ๊ธฐ์ . ๋ฑ๊ธ๊ณผ ํ์ ์ผ์ ํจ๊ป ํ๊ธฐํฉ๋๋ค</p></div> | |
| </div> | |
| <div class="markrow"> | |
| <div class="mk"><svg style="width:64px; color:var(--obsidian)" viewBox="0 0 100 100" aria-hidden="true"><use href="#qmark"/></svg></div> | |
| <div class="bar"></div> | |
| <div class="mt"><h4>Quantid Trusted</h4><div class="ms">Continuous Trust Assurance</div> | |
| <p class="mk-ko">๊ฒ์นจ ๊ตฌ๋ ์ค์ธ ๊ธฐ์ . ๊ณ๋๊ธฐ๊ฐ ๊ณ์ ๋๊ณ ์๋ค๋ ํ์์ ๋๋ค</p></div> | |
| </div> | |
| </div> | |
| <div class="note"><p><strong>๋งํฌ๋ ๋ฑ๊ธ์ด ์ ํจํ ๋์๋ง ์๋๋ค.</strong> | |
| ๊ฒ์นจ์ ๋ฉ์ถ๋ฉด ๋งํฌ๋ ๋ด๋ ค๊ฐ๋๋ค. ๊ทธ๋์ผ ๋งํฌ๊ฐ ๊ฐ์ ํฉ๋๋ค.</p></div> | |
| </div></section> | |
| <!-- ๊ธฐ์ ๋ฐฐ๊ฒฝ --> | |
| <section id="basis"><div class="wrap"> | |
| <div class="eyebrow">07 ยท ๊ทผ๊ฑฐ</div> | |
| <h2 class="h2">๋ฌด์์ ์ด๋ป๊ฒ ์๋์ง ๋จผ์ ๊ณต๊ฐํฉ๋๋ค<span class="en">Technical basis</span></h2> | |
| <p class="lead">์์น๋ง ์ ์ด๋๊ณ ใ๋ฏฟ์ด๋ฌ๋ผใ๊ณ ํ์ง ์๊ฒ ์ต๋๋ค. ์ด๋ค ํ์์ ๋ฌด์๊ณผ ๋น๊ตํด ์๋์ง, | |
| ๊ทธ๋ฆฌ๊ณ <strong>์ด๋๊น์ง๊ฐ ์์ง ์ ์ฌ์ง ์์ญ์ธ์ง</strong>๋ฅผ ๊ฐ์ด ์ ์์ต๋๋ค.</p> | |
| <div class="grid g3"> | |
| <div class="card"><div class="num">ํ์ ์ ํ๋</div><h3>๊ฐ์ ์ํ์ง, ๊ฐ์ ์ฑ์ ์ฝ๋</h3> | |
| <p>2,018๋ฌธํญ 5๊ฐ ๋ถ์ผ๋ฅผ ๊ฐ์ ์ฝ๋๋ก ์ฑ์ ํ์ต๋๋ค. ๋ฌด์์ฑ ํ์ ๊ธฐ๋ผ๋ฆฌ๋ง ๋ถ์๊ณ , ๊ณต๊ฐ ํ์ ๊ธฐ๋ ๊ณต๊ฐ๋ ๊ฐ์ค์น๋ฅผ ๊ทธ๋๋ก ์ผ์ต๋๋ค.</p> | |
| <div class="cut">์ฐ๋ฆฌ ์ํ ํ๊ฒฝ ๊ธฐ์ค. ๊ท์ฌ ์ ๋ฌด์์๋ ํ๋กํ์ผ์ ์๋ก ๋ง๋ค์ด ๋ค์ ์ฝ๋๋ค</div></div> | |
| <div class="card"><div class="num">์ ๋ ฅ ํ ํฐ</div><h3>์ค์ ๋ก ์ฐ ๋ ์ </h3> | |
| <p>ํ๋ณด 200๊ฐ์ผ ๋ 4,444ํ ํฐ, 50๊ฐ๋ก ์ค์์ ๋ 1,132ํ ํฐ. ๊ฐ์ ์ฅ๋น์์ ์ฐ ๊ฐ์ด๊ณ , ์๊ฐ ๊ฒ์นจ ๊ณ์ฐ๊ธฐ๋ ์ด ๋ ์ ์ ๋ง์ถฐ ๋์๊ฐ๋๋ค.</p> | |
| <div class="cut">๊ทธ ์ฌ์ด ๊ตฌ๊ฐ์ ๋ ์ ์ ์ด์ด ๊ณ์ฐํ ๊ฐ์ ๋๋ค</div></div> | |
| <div class="card"><div class="num">๊ฐ์</div><h3>๊ฐ์ ๊ฐ์ค์นยท๊ฐ์ ์ฅ๋น, ์ง์ง์ด ์ธก์ </h3> | |
| <p>์บ์ ์ ์ค 0%์์ ์๊ณ , ์จ๋ 0์ผ๋ก ๋๋ฆฐ ์ถ๋ ฅ์ด ๋ฐ์ดํธ๊น์ง ๊ฐ์ ๊ฒ์ ํ์ธํ์ต๋๋ค. ํ์ง์ ๊น์์ ์ป์ ์๋๊ฐ ์๋๋๋ค.</p> | |
| <div class="cut">๋์ ์ฌ์ฉ์ 8๋ช 2.60๋ฐฐ โ 256๋ช 1.33๋ฐฐ. ๊ตฌ๊ฐ์ ๊ผญ ๊ฐ์ด ๋ณด์ญ์์ค</div></div> | |
| </div> | |
| <div class="tw"><table> | |
| <thead><tr><th>ํญ๋ชฉ</th><th>์ด๋์ ์ฐ ๊ฐ์ธ๊ฐ</th><th>์์ง ์ ์ฐ ๊ฒ</th></tr></thead> | |
| <tbody> | |
| <tr><td>ํ๋ฉด ํ๋ณด ์ถ๋ฆฌ๊ธฐ</td><td>์์ด ํ๋ฉด ๋ฐ์ดํฐ์ </td><td><b>ํ๊ตญ์ด ํ๋ฉด</b>. ๋์ ๊ฒ์ฆ ๋ ์ฐ์๋ ๋ฐ์ดํฐ๋ก ์ฝ๋๋ค</td></tr> | |
| <tr><td>ํ์ ์ ํ๋</td><td>์ฐ๋ฆฌ 2,018๋ฌธํญ ๋ณด๋</td><td>์ฐ์๋ ์ ๋ฌด ๋ถํฌ. ํ๋กํ์ผ ์ฌ์์ฑ ํ ์ฌ์ธก์ </td></tr> | |
| <tr><td>๊ฐ์ ๋ฐฐ์</td><td>๋์ ์ฌ์ฉ์ 8 / 32 / 128 / 256๋ช </td><td>๊ทธ ๋ฐ์ ๊ตฌ๊ฐ, ๊ท์ฌ ํธ๋ํฝ ํ์</td></tr> | |
| <tr><td>์์ถ ๋ฑ๊ธ</td><td>Q8์ ์ฌ์ค์ ๊ทธ๋๋ก, Q4๋ ํ๋กํ์ผ ์ฌ์์ฑ ํ์</td><td>๋ ๋ฎ์ ๋ฑ๊ธ์ ์ ๋ฌด๋ณ ํ์ฉ์ </td></tr> | |
| <tr><td>์ฃ์ง ๊ตฌ๋</td><td>ํ๊ณ๋ ์ฉ๋์ด ์๋๋ผ ๋ฉ๋ชจ๋ฆฌ ๋์ญํญ</td><td>๊ท์ฌ ํ์ฅ ์ฅ๋น์์์ ์ค์ ์ํ</td></tr> | |
| </tbody> | |
| </table></div> | |
| <div class="note"><p><strong>์ค๋ฅธ์ชฝ ์นธ์ ๋น์๋์ง ์์ ๊ฒ์ด ์ด ํ์ ํต์ฌ์ ๋๋ค.</strong> | |
| ์ ์ฐ ๊ฑธ ์ ์๋ค๊ณ ์ ์ด๋๋ฉด, ์ฐ ๊ฒ๋ ๋ฏฟ์ผ์ค ์ ์์ต๋๋ค. | |
| ์์ธํ ๊ทผ๊ฑฐ๋ ์๋ ์๊ฐ์์ ์ค์์ต๋๋ค.</p></div> | |
| <div style="margin-top:32px; padding:28px; background:var(--obsidian); color:var(--ivory); | |
| display:flex; flex-wrap:wrap; gap:22px; align-items:center; justify-content:space-between"> | |
| <div style="flex:1; min-width:260px"> | |
| <div style="font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:.16em; | |
| color:#7E9BE0; text-transform:uppercase">Company Profile ยท PDF & PPT</div> | |
| <h3 style="font-size:21px; font-weight:700; margin:10px 0 8px">ํํธID ์๊ฐ์ ยท 24์ฅ</h3> | |
| <p style="font-size:14px; color:#B9BEC7">๋ฐฐ๊ฒฝ๊ณผ ๊ท์ ์งํ๋ถํฐ ์ ํ ์ ์, ์ ๋ฉด ๋น๊ต, ๊ตฌ๋งค ๊ทผ๊ฑฐ, ํ ํฐ ์์ฅยท๋ฑ๊ธยท์ธ์ฆ, | |
| ROI, ์ฐ์ ๋ณ ์ฉ์ฒ, ๊ทธ๋ฆฌ๊ณ <strong style="color:var(--ivory)">๊ทผ๊ฑฐ์ ํ๊ณ</strong>๊น์ง ๋ด์์ต๋๋ค. ๋ก๊ทธ์ธ ์์ด ๋ฐ์ผ์ค ์ ์์ต๋๋ค.<br> | |
| <span style="color:#8C93A0">๋ณด๊ธฐ์ฉ์ PDF, ์ฌ๋ด ์๋ฃ๋ก ๊ณ ์ณ ์ฐ์๋ ค๋ฉด PPT ๋ฅผ ๋ฐ์ผ์ญ์์ค. ๋ด์ฉ์ ๊ฐ์ต๋๋ค.</span></p> | |
| </div> | |
| <div style="display:flex; flex-wrap:wrap; gap:10px"> | |
| <a class="btn btn-p" href="deck/quantid-profile.pdf" download | |
| style="white-space:nowrap">PDF ๋ด๋ ค๋ฐ๊ธฐ</a> | |
| <a class="btn" href="deck/quantid-profile.pptx" download | |
| style="white-space:nowrap; border-color:#4A5262; color:var(--ivory)">PPT ๋ด๋ ค๋ฐ๊ธฐ</a> | |
| </div> | |
| </div> | |
| </div></section> | |
| <!-- ์ค์ธก --> | |
| <section id="proof"><div class="wrap"> | |
| <div class="eyebrow">08 ยท ์ค์ธก</div> | |
| <h2 class="h2">์์ต๋๋ค. ๊ทธ๋์ ์ด๋ ๊ฒ ๋์์ต๋๋ค<span class="en">Measured results</span></h2> | |
| <p class="lead">์๋ ๋ท์ ์ ๋ถ ์ ํฌ๊ฐ ์ง์ ์ฐ ๊ฐ์ ๋๋ค. ํ์ด ๋ฌด์์ด์๊ณ ๋ฌด์๊ณผ ๋ถ์๋์ง ๊ทธ๋ฆผ ๋ฐ์ ๊ฐ์ด ์ ์์ต๋๋ค. | |
| <strong>๋์กฐ๊ตฐ ์์ด ๊ทธ๋ฆฐ ๊ทธ๋ํ๋ ํ๋๋ ์์ต๋๋ค.</strong></p> | |
| <div class="grid g2"> | |
| <div class="card chart"> | |
| <div class="num">① ์ ๋ ฅ ํ ํฐ</div><h3>ํ๋ฉด ํ ์ฅ์ ์ฝ๋ ๊ฐ</h3> | |
| <svg viewBox="0 0 400 210" role="img" aria-label="์ ๋ ฅ ํ ํฐ 4444์์ 1132๋ก ๊ฐ์"> | |
| <g font-family="IBM Plex Sans KR, sans-serif"> | |
| <line x1="58" y1="172" x2="392" y2="172" stroke="#C4BCAB"/> | |
| <rect x="88" y="30" width="86" height="142" fill="#C4BCAB"/> | |
| <text x="131" y="22" text-anchor="middle" font-size="16" font-weight="700" fill="#141820">4,444</text> | |
| <text x="131" y="190" text-anchor="middle" font-size="11.5" fill="#4A515C">ํ๋ณด 200๊ฐ</text> | |
| <rect x="248" y="136" width="86" height="36" fill="#3963CF"/> | |
| <text x="291" y="128" text-anchor="middle" font-size="16" font-weight="700" fill="#2A4CA8">1,132</text> | |
| <text x="291" y="190" text-anchor="middle" font-size="11.5" fill="#4A515C">ํ๋ณด 50๊ฐ</text> | |
| <text x="196" y="74" text-anchor="middle" font-size="19" font-weight="700" fill="#2A7A4F">3.93๋ฐฐ</text> | |
| <text x="196" y="94" text-anchor="middle" font-size="11" fill="#8A8F98">↓ ์ค์ด๋ฆ</text> | |
| <text x="52" y="35" text-anchor="end" font-size="10.5" fill="#8A8F98">ํ ํฐ</text> | |
| </g> | |
| </svg> | |
| <div class="cut">๊ฐ์ ์ฅ๋น·๊ฐ์ ํ๋ฉด ๋ฐ์ดํฐ์ (<b>์์ด</b>)์์ ์ฐ ๋ ์ . | |
| ์๊ฐ ๊ฒ์นจ ๊ณ์ฐ๊ธฐ๋ ์ด ๋ ์ ์ผ๋ก ๋์๊ฐ๋๋ค · ํ๊ตญ์ด ํ๋ฉด์ ์์ง ์ ์์ต๋๋ค</div> | |
| </div> | |
| <div class="card chart"> | |
| <div class="num">② ์์ฑ ๊ฐ์</div><h3>๋ถ๋ฒผ๋ 25%, ํ๊ฐํ๋ฉด 62% ์ค์ด๋ญ๋๋ค</h3> | |
| <svg viewBox="0 0 400 210" role="img" aria-label="๋์ ์ฌ์ฉ์๋ณ ๊ฐ์ ๋ฐฐ์ 2.60์์ 1.33๋ก ๊ฐ์"> | |
| <g font-family="IBM Plex Sans KR, sans-serif"> | |
| <line x1="58" y1="172" x2="392" y2="172" stroke="#C4BCAB"/> | |
| <line x1="58" y1="24" x2="58" y2="172" stroke="#C4BCAB"/> | |
| <line x1="58" y1="164" x2="392" y2="164" stroke="#DCD6C9" stroke-dasharray="3 3"/> | |
| <text x="52" y="167" text-anchor="end" font-size="10" fill="#8A8F98">1.0๋ฐฐ</text> | |
| <path d="M92 40 L192 92 L292 137 L360 157 L360 172 L92 172 Z" fill="#E4EAF8"/> | |
| <polyline points="92,40 192,92 292,137 360,157" fill="none" stroke="#3963CF" stroke-width="2.4"/> | |
| <g fill="#3963CF"><circle cx="92" cy="40" r="4.6"/><circle cx="192" cy="92" r="4.6"/> | |
| <circle cx="292" cy="137" r="4.6"/><circle cx="360" cy="157" r="4.6"/></g> | |
| <g font-size="13" font-weight="700" fill="#141820" text-anchor="middle"> | |
| <text x="92" y="30">2.60๋ฐฐ</text><text x="192" y="82">2.02๋ฐฐ</text> | |
| <text x="292" y="127">1.57๋ฐฐ</text><text x="360" y="147">1.33๋ฐฐ</text></g> | |
| <g font-size="11.5" fill="#4A515C" text-anchor="middle"> | |
| <text x="92" y="190">8๋ช </text><text x="192" y="190">32๋ช </text> | |
| <text x="292" y="190">128๋ช </text><text x="360" y="190">256๋ช </text></g> | |
| <text x="225" y="206" text-anchor="middle" font-size="10.5" fill="#8A8F98">๋์ ์ฌ์ฉ์</text> | |
| </g> | |
| </svg> | |
| <div class="cut">๊ฐ์ ๊ฐ์ค์น·๊ฐ์ ์ฅ๋น, ์บ์ ์ ์ค 0%, ์จ๋ 0์์ ์ถ๋ ฅ์ด <b>๋ฐ์ดํธ๊น์ง ๋์ผ</b>ํจ์ ํ์ธ. | |
| <b>์ ๊ตฌ๊ฐ์ด ์ด๋์ด๋ฉฐ, ๊ฐ์ฅ ๋ถ๋น๋ 256๋ช ์์๋ GPU 4์ฅ์ด 3์ฅ์ผ๋ก ์ค๋๋ค</b>. ๊ตฌ๊ฐ์ ๊ผญ ๊ฐ์ด ๋ณด์ญ์์ค</div> | |
| </div> | |
| <div class="card chart"> | |
| <div class="num">③ ํ์ ์ ํ๋</div><h3>ํ๋ฉด์์ ์ธ ์์ 50๊ฐ ๊ณจ๋ผ๋ด๊ธฐ</h3> | |
| <svg viewBox="0 0 400 210" role="img" aria-label="ํํธ ํ์ 91.5ํผ์ผํธ ๋ ๊ณต๊ฐ ๋์กฐ๊ตฐ 49.5ํผ์ผํธ"> | |
| <g font-family="IBM Plex Sans KR, sans-serif"> | |
| <text x="14" y="46" font-size="12" fill="#141820" font-weight="700">ํํธ ํ์ </text> | |
| <rect x="14" y="56" width="372" height="30" fill="#EFEADF"/> | |
| <rect x="14" y="56" width="340" height="30" fill="#3963CF"/> | |
| <text x="344" y="77" text-anchor="end" font-size="16" font-weight="700" fill="#fff">91.5%</text> | |
| <text x="14" y="122" font-size="12" fill="#141820" font-weight="700">๊ณต๊ฐ ๋ฌด์์ฑ ํ์ ๊ธฐ (๋์กฐ๊ตฐ)</text> | |
| <rect x="14" y="132" width="372" height="30" fill="#EFEADF"/> | |
| <rect x="14" y="132" width="184" height="30" fill="#8A8F98"/> | |
| <text x="188" y="153" text-anchor="end" font-size="16" font-weight="700" fill="#fff">49.5%</text> | |
| <line x1="14" y1="176" x2="386" y2="176" stroke="#DCD6C9"/> | |
| <text x="14" y="196" font-size="11" fill="#8A8F98">๊ฐ์ ์ํ์ง · ๊ฐ์ ์ฑ์ ์ฝ๋ · ๊ณต๊ฐ ๊ฐ์ค์น ๊ทธ๋๋ก</text> | |
| </g> | |
| </svg> | |
| <div class="cut">๊ณต๊ฐ ๊ฐ์ค์น๋ฅผ ๊ทธ๋๋ก ๋ฐ์ ๊ฐ์ ์ฝ๋๋ก ์ฑ์ . <b>์์ด ํ๋ฉด ๊ธฐ์ค</b>์ด๋ฉฐ | |
| ใํ๊ตญ์ด์์ ์ฐ์ใ๋ผ๊ณ ๋ ๋งํ์ง ์์ต๋๋ค · ๊ท์ฌ ์ ๋ฌด๋ ํ๋กํ์ผ ์ฌ์์ฑ ํ ๋ค์ ์ฝ๋๋ค</div> | |
| </div> | |
| <div class="card chart"> | |
| <div class="num">④ ํ์ ์ ์ ์งํจ</div><h3>์ ํ๋๋ก๋ ์ ๊ฐ๋ฆฝ๋๋ค. ๊ฐ๋ฆฌ๋ ๊ฑด ์ฌ๊ธฐ์ ๋๋ค</h3> | |
| <svg viewBox="0 0 400 210" role="img" aria-label="๋ณด์ ์ค์ฐจ 0.001 ๋ 0.10"> | |
| <g font-family="IBM Plex Sans KR, sans-serif"> | |
| <line x1="58" y1="164" x2="392" y2="164" stroke="#C4BCAB"/> | |
| <rect x="96" y="158" width="84" height="6" fill="#2A7A4F"/> | |
| <text x="138" y="148" text-anchor="middle" font-size="16" font-weight="700" fill="#2A7A4F">0.001</text> | |
| <text x="138" y="182" text-anchor="middle" font-size="11.5" fill="#4A515C">ํํธ ํ์ </text> | |
| <rect x="256" y="44" width="84" height="120" fill="#B0432C"/> | |
| <text x="298" y="34" text-anchor="middle" font-size="16" font-weight="700" fill="#B0432C">0.10</text> | |
| <text x="298" y="182" text-anchor="middle" font-size="11.5" fill="#4A515C">๋์กฐ๊ตฐ</text> | |
| <text x="52" y="48" text-anchor="end" font-size="10.5" fill="#8A8F98">์ค์ฐจ</text> | |
| <text x="8" y="204" font-size="10.5" fill="#8A8F98">์์์๋ก ์ข์</text> | |
| <text x="218" y="100" text-anchor="middle" font-size="13" font-weight="700" fill="#141820">100๋ฐฐ</text> | |
| </g> | |
| </svg> | |
| <div class="cut"><b>์ด ์ํ์ง๋ ์ ํ๋๋ก ๊ฐ๋ฆฌ์ง ์์ต๋๋ค</b>. ๊ธ์ n-gram ๊ฐ์ ์ผ ๋ฐฉ๋ฒ๋ ๋ง์ ์ด ๋์์ต๋๋ค. | |
| ๊ทธ๋์ ๋ง์ ์ ์๋ํ์ง ์๊ณ , ๋์ <b>ใ90%๋ผ๊ณ ๋งํ ๋ ์ ๋ง 90%์ธ์งใ</b>๋ฅผ ์ฝ๋๋ค. ํฉ์ฑ ํ๊ตญ์ด ๊ฐ์ธ์ ๋ณด ํ ๊ธฐ์ค</div> | |
| </div> | |
| </div> | |
| <div style="margin-top:34px; padding:26px 28px; background:var(--surface2); border:1px solid var(--line)"> | |
| <div style="font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.16em; | |
| color:var(--ink3); text-transform:uppercase; margin-bottom:6px">⑤ ์ฅ๋น๋ก ํ์ฐํ๋ฉด</div> | |
| <h3 style="font-size:19px; font-weight:700; margin-bottom:16px">๊ฐ์ ์ฒ๋ฆฌ๋์ GPU ๋ช ์ฅ์ผ๋ก ๋ด๋๊ฐ</h3> | |
| <svg viewBox="0 0 900 132" role="img" aria-label="GPU ์ฅ์ 100ํผ์ผํธ ๋๋น 38์์ 75ํผ์ผํธ" style="width:100%;height:auto"> | |
| <g font-family="IBM Plex Sans KR, sans-serif"> | |
| <text x="0" y="26" font-size="12" font-weight="700" fill="#141820">์ง๊ธ</text> | |
| <rect x="70" y="8" width="740" height="26" fill="#8A8F98"/> | |
| <text x="822" y="27" font-size="13" font-weight="700" fill="#4A515C">100%</text> | |
| <text x="0" y="74" font-size="12" font-weight="700" fill="#141820">8๋ช </text> | |
| <rect x="70" y="56" width="281" height="26" fill="#2A7A4F"/> | |
| <text x="363" y="75" font-size="13" font-weight="700" fill="#2A7A4F">38%</text> | |
| <text x="0" y="122" font-size="12" font-weight="700" fill="#141820">256๋ช </text> | |
| <rect x="70" y="104" width="555" height="26" fill="#3963CF"/> | |
| <text x="637" y="123" font-size="13" font-weight="700" fill="#2A4CA8">75%</text> | |
| </g> | |
| </svg> | |
| <p style="font-size:13.5px; color:var(--ink2); margin-top:12px"> | |
| ํ๊ฐํ ๋๋ 62%, ๋ถ๋น ๋๋ 25% ์ค์ด๋ญ๋๋ค. | |
| <strong>๋์ ๊ฒํ ๋ ๋ถ๋น ๋ ์ซ์๋ก ํ์ญ์์ค.</strong> ํ๊ฐํ ๋ ์ซ์๋ก ๊ณํ์ ์ธ์ฐ๋ฉด ์ฅ๋น๊ฐ ๋ชจ์๋๋๋ค.</p> | |
| </div> | |
| <div class="note"><p><strong>์ฌ๊ธฐ ์๋ ๊ฒ๋ ๋ง์๋๋ฆฝ๋๋ค.</strong> | |
| ์์ถ(์์ํ)์ ์ ํฌ ์์ฒด ๋ฐฉ์๋ณด๋ค <b>๊ณต๊ฐ๋ ๋ฐฉ์์ด ๋ ๋์ ๊ตฌ๊ฐ์ด ์ค์ธก์ผ๋ก ํ์ธ๋์ต๋๋ค.</b> | |
| ๊ทธ๋์ ใ์ฐ๋ฆฌ ์์ถ์ด ์ต๊ณ ใ๋ผ๊ณ ์ฐ์ง ์๊ณ , ๊ท์ฌ ์ ๋ฌด์์ ์ด๋ ์ชฝ์ด ๋์์ง ์ฌ์ ๋์ ์ชฝ์ ๋ถ์ ๋๋ค. | |
| ํ๋ ๊ฒ์ ๋ฐฉ์์ด ์๋๋ผ <b>์ฌ๋ ๋ฅ๋ ฅ</b>์ ๋๋ค.</p></div> | |
| </div></section> | |
| <!-- ๋์กฐ --> | |
| <section id="board"><div class="wrap"> | |
| <div class="eyebrow">09 ยท ๋์กฐ</div> | |
| <h2 class="h2">๋จ์ ์ซ์ 395๊ฑด ์์ ์ฐ์ด ๋ดค์ต๋๋ค<span class="en">Industry benchmark</span></h2> | |
| <p class="lead">์ฐ๋ฆฌ ์๋๋ถํฐ ํ์ง ์๊ฒ ์ต๋๋ค. MLCommons ๊ฐ์ฌ๋ฅผ ํต๊ณผํ ๊ธฐ๋ก๊ณผ | |
| NVIDIA ยท HPE ยท Dell ยท AMD ๊ฐ ์ง์ ๋ฐํํ ์ซ์๋ฅผ ๊น์๋๊ณ , | |
| <strong>์ง๊ธ ์ฐ์๋ ์ค์ ์ด ๊ทธ ์ฌ์ด ์ด๋์ฏค์ธ์ง</strong> ์ฐ์ด ๋ณด์ฌ๋๋ฆฝ๋๋ค. | |
| <span class="mono" id="bMeta" style="color:var(--ink3);font-size:12.5px"></span></p> | |
| <div class="board"> | |
| <div class="panel bpanel"> | |
| <div class="field"><label for="bGpu">์ฐ์๋ GPU</label> | |
| <select id="bGpu"></select></div> | |
| <div class="f3"> | |
| <div class="field"><label for="bQ">์์ํ</label><select id="bQ"></select></div> | |
| <div class="field"><label for="bTot">๋ชจ๋ธ ํฌ๊ธฐ (์ญ์ต)</label> | |
| <input id="bTot" type="number" value="35" min="0.1" step="0.1"></div> | |
| <div class="field"><label for="bAct">๊ทธ์ค ํ์ฑ (์ญ์ต)</label> | |
| <input id="bAct" type="number" value="3" min="0.1" step="0.1"></div> | |
| </div> | |
| <div class="f2"> | |
| <div class="field"><label for="bCon">๋์ ์ฌ์ฉ์</label> | |
| <input id="bCon" type="number" value="32" min="1" max="4096"></div> | |
| <div class="field"><label for="bGn">๊ฐ๊ณ ๊ณ์ ์ฅ์</label> | |
| <input id="bGn" type="number" value="1" min="1" max="1024"></div> | |
| </div> | |
| <div class="field"><label for="bMon">์ ํ์ ๊ฑด์</label> | |
| <input id="bMon" type="number" value="1000000" min="1"></div> | |
| <div class="f2"> | |
| <div class="field"><label for="bOut">ํ ๊ฑด๋น ์ถ๋ ฅ ํ ํฐ</label> | |
| <input id="bOut" type="number" value="256" min="1"></div> | |
| <div class="field"><label for="bKwh">์ ๊ธฐ ๋จ๊ฐ (์/kWh)</label> | |
| <input id="bKwh" type="number" value="130" min="0"></div> | |
| </div> | |
| <p class="hint">130์์ ํ๊ตญ ์ฐ์ ์ฉ ํ๊ท ์ฏค ๋๋ ๊ฐ์ ๋๋ค. ์ฐ์๋ ๋จ๊ฐ๋ฅผ ๋ฃ์ผ๋ฉด ๊ทธ๊ฑธ๋ก ๋ค์ ๊ณ์ฐํฉ๋๋ค.</p> | |
| </div> | |
| <div class="panel plotwrap"> | |
| <svg id="plot" viewBox="0 0 560 400" role="img" aria-label="์ ๊ณ ๊ธฐ๋ก ์ฐ์ ๋์ ๊ท์ฌ ์์น"></svg> | |
| <div class="legend"> | |
| <span><i class="d gold"></i>๊ฐ์ฌ๋ฐ์ ๊ธฐ๋ก</span> | |
| <span><i class="d ours"></i>์ฐ๋ฆฌ๊ฐ ์ง์ ์ฐ ๊ฒ</span> | |
| <span><i class="d you"></i>์ง๊ธ ์ค์ </span> | |
| <span><i class="ln"></i>๋ฌผ๋ฆฌ์ ์ผ๋ก ๋์ ์ ์๋ ์ </span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid g4 bcards"> | |
| <div class="card kpi"><div class="num">์์</div> | |
| <div class="big" id="kRank">-</div><div class="sub" id="kRankSub">GPU๋ฅผ ๊ณ ๋ฅด๋ฉด ๊ณ์ฐ๋ฉ๋๋ค</div></div> | |
| <div class="card kpi"><div class="num">ํ์ ์ฅ์</div> | |
| <div class="big" id="kGpu">-</div><div class="sub" id="kGpuSub">์ด ๋ฌผ๋์ ๊ฐ๋นํ๋ ค๋ฉด</div></div> | |
| <div class="card kpi"><div class="num">์ ์ ๊ธฐ์๊ธ</div> | |
| <div class="big" id="kPow">-</div><div class="sub" id="kPowSub">GPU๋ง ยท ์ ๊ฒฉ ๊ธฐ์ค</div></div> | |
| <div class="card kpi"><div class="num">์ ํด๋ผ์ฐ๋</div> | |
| <div class="big" id="kUsd">-</div><div class="sub" id="kUsdSub">๋น๋ ค ์ด๋ค๋ฉด</div></div> | |
| </div> | |
| <div class="note" id="bNote"><p>GPU๋ฅผ ๊ณ ๋ฅด๋ฉด ๊ณ์ฐํฉ๋๋ค.</p></div> | |
| <div class="tw"><table class="brank"> | |
| <thead><tr><th>#</th><th>๋ชจ๋ธ</th><th>์ฐ ๊ณณ</th><th class="n">ํฌ๊ธฐ</th> | |
| <th class="n">GPU๋น tok/s</th><th>๋ฑ๊ธ</th></tr></thead> | |
| <tbody id="bTop"></tbody> | |
| </table></div> | |
| <p class="hint" id="bSrc"></p> | |
| </div></section> | |
| <!-- ์ฑ์ --> | |
| <section id="bench"><div class="wrap"> | |
| <div class="eyebrow">10 ยท ์ฑ์ </div> | |
| <h2 class="h2">๊ณต์ธ ๋ฒค์น๋งํฌ 49๊ฐ๋ฅผ ํ ์ฅ์ ๋ชจ์์ต๋๋ค<span class="en">Official benchmarks, one map</span></h2> | |
| <p class="lead">ํ๊น ํ์ด์ค ๊ณต์ธ ๋ฆฌ๋๋ณด๋๋ 49๊ฐ๋ก ํฉ์ด์ ธ ์์ด์, ์ ์ฒด ํ์ ๋ณด๋ ค๋ฉด 48๊ตฐ๋ฐ๋ฅผ ๋ฐ๋ก ์ด์ด์ผ ํ์ต๋๋ค. | |
| ํํธID๊ฐ <strong>ํ ์ฅ์ง๋ฆฌ ์ค์๊ฐ ์ง๋</strong>๋ก ๋ชจ์์ต๋๋ค. | |
| ์ด ๋๋ง๋ค ๊ณต๊ฐ API์์ ์๋ก ์ฝ์ผ๋ ์ ํฌ๊ฐ ์๋ ์ ์๋ ์ซ์๊ฐ ์๋๋๋ค.</p> | |
| <div class="grid g4 bstat"> | |
| <div class="card kpi"><div class="num">๊ณต์ธ ๋ฒค์น๋งํฌ</div><div class="big">49๊ฐ</div> | |
| <div class="sub">๋ฆฌ๋๋ณด๋๊ฐ ์๋ ๊ฒ 44๊ฐ</div></div> | |
| <div class="card kpi"><div class="num">๋ฑ์ฌ ๊ธฐ๋ก</div><div class="big">1,108๊ฑด</div> | |
| <div class="sub">2026๋ 10์ 21์ผ ๊ธฐ์ค</div></div> | |
| <div class="card kpi"><div class="num">๋ชจ๋ธ</div><div class="big">429๊ฐ</div> | |
| <div class="sub">102๊ฐ ์กฐ์ง์ด ์ฌ๋ฆผ</div></div> | |
| <div class="card kpi"><div class="num">ํ๊ตญ ๋น์ค</div><div class="big">4%</div> | |
| <div class="sub">์ค๊ตญ 55% ยท ๋ฏธ๊ตญ 21%</div></div> | |
| </div> | |
| <div class="bench2"> | |
| <div class="card"> | |
| <div class="num">์ง๋๊ฐ ๋ณด์ฌ์ฃผ๋ ๊ฒ</div> | |
| <h3>1์๋ฅผ ๊ฐ์ฅ ๋ง์ด ๊ฐ์ง ๊ณณ์ ํ๊ตญ ์กฐ์ง์ ๋๋ค</h3> | |
| <p>์กฐ์ง๋ณ 1์ ๊ฐ์๋ฅผ ์ธ๋ฉด <strong>FINAL-Bench(๋น๋๋ํํธ)๊ฐ 11๊ฐ๋ก ์ ์ฒด 1์</strong>์ ๋๋ค. | |
| ์๋ฆฌ๋ฐ๋ฐ Qwen, ์งํธAI, ๋ฅ์ํฌ, ๋ฌธ์ทAI, ์๋น๋์๊ฐ ๋ชจ๋ ์๋์ ์์ต๋๋ค. | |
| ํํธID๋ ์ด ์ง๋๋ฅผ ๋ง๋ ์ชฝ์ด๊ณ , ์ฑ์ ์ ์ ๋ต์ ์ ํด์ฌ์ธ ๋น๋๋ํํธ๊ฐ ๋ธ ๊ฒ์ ๋๋ค.</p> | |
| <svg viewBox="0 0 460 200" role="img" aria-label="๋ถ์ผ๋ณ 1์ ๊ฐ์"> | |
| <g font-family="IBM Plex Sans KR, sans-serif" font-size="12"> | |
| <text x="0" y="16" fill="#4A515C">๋ฌธ์ ยท OCR</text><rect x="118" y="5" width="96" height="14" fill="#3963CF"/><text x="222" y="16" fill="#2A4CA8" font-weight="700">2</text> | |
| <text x="0" y="46" fill="#4A515C">๋ฒ๋ฅ ยท ๊ธ์ต</text><rect x="118" y="35" width="96" height="14" fill="#3963CF"/><text x="222" y="46" fill="#2A4CA8" font-weight="700">2</text> | |
| <text x="0" y="76" fill="#4A515C">์ํ</text><rect x="118" y="65" width="96" height="14" fill="#3963CF"/><text x="222" y="76" fill="#2A4CA8" font-weight="700">2</text> | |
| <text x="0" y="106" fill="#4A515C">๊ณผํ ยท ์ง์</text><rect x="118" y="95" width="96" height="14" fill="#3963CF"/><text x="222" y="106" fill="#2A4CA8" font-weight="700">2</text> | |
| <text x="0" y="136" fill="#4A515C">์์ด์ ํธ ยท ํฐ๋ฏธ๋</text><rect x="118" y="125" width="96" height="14" fill="#3963CF"/><text x="222" y="136" fill="#2A4CA8" font-weight="700">2</text> | |
| <text x="0" y="166" fill="#4A515C">๋น์ ยท ๋น๋์ค</text><rect x="118" y="155" width="48" height="14" fill="#7E9BE0"/><text x="174" y="166" fill="#2A4CA8" font-weight="700">1</text> | |
| <line x1="118" y1="180" x2="440" y2="180" stroke="#DCD6C9"/> | |
| <text x="0" y="195" fill="#141820" font-weight="700">ํฉ๊ณ</text><text x="118" y="195" fill="#141820" font-weight="700">1์ 11๊ฐ</text> | |
| </g> | |
| </svg> | |
| </div> | |
| <div class="card"> | |
| <div class="num">1์๋ฅผ ๋ฐ์ ์ ์</div> | |
| <h3>์ฑ์ ์ ๊ฐ ๋ณด๋๊ฐ ํฉ๋๋ค</h3> | |
| <div class="tw"><table class="bscore"> | |
| <thead><tr><th>๋ฒค์น๋งํฌ</th><th class="n">์ ์</th></tr></thead> | |
| <tbody> | |
| <tr><td>AIME 2026 (์ํ)</td><td class="n">100</td></tr> | |
| <tr><td>HMMT 2026 (์ํ)</td><td class="n">100</td></tr> | |
| <tr><td>GPQA Diamond (๊ณผํ)</td><td class="n">94.44</td></tr> | |
| <tr><td>MMLU-Pro (์ง์)</td><td class="n">88.12</td></tr> | |
| </tbody> | |
| </table></div> | |
| <p style="margin-top:14px">์ ์๋ฅผ ๋งค๊ธด ๊ฒ์ ์ ํฌ๊ฐ ์๋๋ผ ๊ฐ ๋ฒค์น๋งํฌ ์ด์ ์ฃผ์ฒด์ ๋๋ค. | |
| ์ง๋๋ ๊ทธ ๊ฒฐ๊ณผ๋ฅผ ์ฝ์ด ์ฎ๊ธธ ๋ฟ์ด๊ณ , ๋งํฌ๋ฅผ ๋ฐ๋ผ๊ฐ๋ฉด ์๋ณธ ๋ณด๋์์ ๋ฐ๋ก ํ์ธํ์ค ์ ์์ต๋๋ค.</p> | |
| <div class="cut">1์์ 2์ ์ฐจ์ด๋ ์ค์๊ฐ 5.5% ยท ๊ฐ์ฅ ๋ถ๋น๋ 5๊ฐ ๋ณด๋๊ฐ ์ ์ฒด ๋ฑ์ฌ์ 44%</div> | |
| </div> | |
| </div> | |
| <div class="bcta"> | |
| <div> | |
| <div class="bk">Live map</div> | |
| <h3>์ง๋๋ฅผ ์ง์ ์ด์ด ๋ณด์ญ์์ค</h3> | |
| <p>ํ๋๋ณ ๋ถํฌ, ์ฐธ์ฌ ์กฐ์ง, 1์ ํํฉ, ์์ง ๋น์ด ์๋ ์๋ฆฌ๊น์ง ๋ณผ ์ ์์ต๋๋ค. ๋ก๊ทธ์ธ ์์ด ์ด๋ฆฝ๋๋ค.</p> | |
| </div> | |
| <a class="btn btn-p" href="https://huggingface.co/spaces/quantid/huggingface-official-benchmark-leaderboards" target="_blank" rel="noopener">์ค์๊ฐ ์ง๋ ์ด๊ธฐ</a> | |
| </div> | |
| <div class="press"> | |
| <div class="pk">๋ณด๋</div> | |
| <a class="ptitle" href="https://www.dt.co.kr/article/12087570" target="_blank" rel="noopener"> | |
| ํํธID, ํ๊น ํ์ด์ค ๊ณต์ธ AI ๋ฒค์น๋งํฌ 48๊ฐ 'ํ๋์' ... ์ค์๊ฐ ์ง๋ ๊ณต๊ฐ</a> | |
| <div class="pmeta">๋์งํธํ์์ค ยท 2026๋ 10์ 6์ผ ยท ๋ฐ์์ ๋ ผ์ค์์</div> | |
| <p>ํฉ์ด์ ธ ์๋ ๊ณต์ธ ๋ฆฌ๋๋ณด๋๋ฅผ ํ ์ฅ์ผ๋ก ๋ชจ์ ์ง๋๋ฅผ ์๊ฐํ๋ฉด์, | |
| ์กฐ์ง๋ณ 1์ ์ง๊ณ์ ๊ตญ๊ฐ๋ณ ์ฐธ์ฌ ๋น์ค์ ํจ๊ป ๋ค๋ค์ต๋๋ค.</p> | |
| </div> | |
| </div></section> | |
| <!-- ์๊ฐ ๊ฒ์นจ --> | |
| <section id="self"><div class="wrap"> | |
| <div class="eyebrow">11 ยท ๋ฌด๋ฃ</div> | |
| <h2 class="h2">์๊ฐ ๊ฒ์นจ<span class="en">Self-Metering</span></h2> | |
| <p class="lead">์ซ์ ์ธ ๊ฐ, ์ง๋ฌธ ๋ค ๊ฐ๋ฉด ์ง๊ธ ๋ฑ๊ธ์ด ๋์ต๋๋ค. ์ ๋ ฅํ์ ๊ฑด ์ ์ฅํ์ง ์์ต๋๋ค.</p> | |
| <div class="meter"> | |
| <div class="panel"> | |
| <div class="field"><label for="cand">ํ์ 1๊ฑด๋น ํ๊ท ํ๋ณด ์</label> | |
| <input id="cand" type="number" value="200" min="1" max="100000"></div> | |
| <div class="field"><label for="mon">์ ํ์ ๊ฑด์</label> | |
| <input id="mon" type="number" value="1000000" min="1"></div> | |
| <div class="field"><label for="usr">๋์ ์ฌ์ฉ์ ์</label> | |
| <input id="usr" type="number" value="32" min="1" max="100000"></div> | |
| <div class="field"><label for="pri">์ ๋ ฅ 100๋ง ํ ํฐ๋น ๋จ๊ฐ (์, ์ ํ)</label> | |
| <input id="pri" type="number" placeholder="๋น์๋๋ฉด ํ์ฐํ์ง ์์ต๋๋ค" min="0"></div> | |
| <p class="hint">๋ง ์์์ ์ง์ ๋๋ฆฌ์๋ฉด ํ ํฐ ๋จ๊ฐ๋ผ๋ ๊ฒ ์์ต๋๋ค. ๋น์๋์๋ฉด ํ ํฐ ๊ฐ์๋ก๋ง ๋ณด์ฌ๋๋ฆฝ๋๋ค.</p> | |
| <div class="checks"> | |
| <label class="chk"><input type="checkbox" id="c1"><span>์ ๋ฌด 1๊ฑด๋น ํ ํฐ์ ์๊ณ ์๋ค</span></label> | |
| <label class="chk"><input type="checkbox" id="c2"><span>๋จ๊ณยท๋ชจ๋ธ๋ณ ์ง์ถ ๋ถํด๊ฐ ์๋ค</span></label> | |
| <label class="chk"><input type="checkbox" id="c3"><span>ํ๋ณด๋ฅผ ์ค์ฌ์ ๋ชจ๋ธ์ ๋๊ธฐ๊ณ ์๋ค</span></label> | |
| <label class="chk"><input type="checkbox" id="c4"><span>์์ ๊ฒ์นจ(๋ชจ๋ํฐ๋ง)์ด ๋๊ณ ์๋ค</span></label> | |
| </div> | |
| <button class="btn btn-p" id="run" style="width:100%">๊ฒ์นจํ๊ธฐ</button> | |
| </div> | |
| <div class="panel result" id="res"> | |
| <div class="rg"><div class="letter" id="rLetter">-</div><div class="txt" id="rNote"></div></div> | |
| <div class="rows"> | |
| <div class="row"><span>ํ์ฌ ์ ๋ ฅ ํ ํฐ / ๊ฑด</span><b id="rBefore">-</b></div> | |
| <div class="row"><span>ํํธ ํ์ ์ ์ฉ ํ / ๊ฑด</span><b id="rAfter">-</b></div> | |
| <div class="row"><span>์์ถ ๋ฐฐ์</span><b id="rRatio">-</b></div> | |
| <div class="row"><span>์ ์ ๊ฐ ํ ํฐ</span><b id="rSaved">-</b></div> | |
| <div class="row"><span>ํํธ ๊ฐ์ ๋ฐฐ์ <span id="rUsers" class="mono" style="color:var(--ink3)"></span></span><b id="rMult">-</b></div> | |
| <div class="row"><span>๊ฐ์ ์ ๋ฌด๋์ GPU ์ฅ์</span><b id="rGpu">-</b></div> | |
| <div class="row" id="rMoneyRow" style="display:none"><span>์ ์ ๊ฐ์ก</span><b id="rMoney">-</b></div> | |
| </div> | |
| <ul class="cav" id="rCav"></ul> | |
| </div> | |
| </div> | |
| </div></section> | |
| <!-- ์ฐ์ ๋ณ --> | |
| <section id="sectors"><div class="wrap"> | |
| <div class="eyebrow">12 ยท ์ฉ์ฒ</div> | |
| <h2 class="h2">๋ฐ์ผ๋ก ๋ชป ๋ด๋ณด๋ด๋ ์ผ์ด ๋ง์ ๊ณณ๋ถํฐ<span class="en">Where the work cannot leave the network</span></h2> | |
| <div class="grid g4"> | |
| <div class="card"><h3>๊ธ์ต</h3><p>์ฌ์ ยท์์ ์์ฅ ํ๋ฉด ์กฐ์, ๊ฐ์ธ์ ์ฉ์ ๋ณด ๊ตฌ๊ฐ ํ์ , ์๋ํ ๊ฒฐ์ ์ค๋ช ๊ทผ๊ฑฐ, ์ด์๊ฑฐ๋ ์๋ ์ ๋ณ.</p> | |
| <div class="cut">์ ์๊ธ์ต๊ฐ๋ ๊ท์ ๋ง๋ถ๋ฆฌ. ๊ฐ์ธ์ ์ฉ์ ๋ณด๋ ์์ธ ๋ถ๊ฐ</div></div> | |
| <div class="card"><h3>๋ณด๊ฑด ยท ์๋ฃ</h3><p>EMRยทOCS ํ๋ฉด ์ ๋ฌด, ๊ฑด๊ฐ์ ๋ณด ๋น์๋ณํ, ๋์์ ์กฐํญ ์ ๋ณ, ์๋ฌด๊ธฐ๋ก ๊ฒ์ ์ฌ์์.</p> | |
| <div class="cut">๊ฐ์ธ์ ๋ณด ๋ณดํธ๋ฒ ์ 23์กฐ ๋ฏผ๊ฐ์ ๋ณด</div></div> | |
| <div class="card"><h3>๊ณต๊ณต ยท ๊ตญ๋ฐฉ</h3><p>์์ ํ์๋ง ๋ฌธ์ยทํ์ , ๋น๊ณต๊ฐ ์ฌ์ ํ๋ณด ๋ถ๋ฅ, ๋ฐ์ถ ์ ์ ๊ฒ, ์ฌ์ด๋ฒ ๊ด์ ์๋ ์ ๋ณ.</p> | |
| <div class="cut">AI ๊ธฐ๋ณธ๋ฒ ์ 35์กฐ. ์ํฅํ๊ฐ ์ ํ ์ฐ์ ๊ณ ๋ ค</div></div> | |
| <div class="card"><h3>IT ยท ์ ์กฐ</h3><p>๋๋๋ฆด ์ ์๋ ๋ช ๋ น์ ์คํ ์ง์ ํ์ , ERPยท๊ทธ๋ฃน์จ์ด ํ๋ฉด ์ ๋ฌด, ๋น๋ฐ์ ๋ณด ํ์ง, ๊ด์ ์ ๋ณ.</p> | |
| <div class="cut">๊ธฐ์กด ๋๊ตฌยท๋ชจ๋ธ ๊ต์ฒด ์์ด ํ ์ผ๋ก ์ฝ์ </div></div> | |
| </div> | |
| <div class="note"><p><strong>์ด๊ฑด ์ ํฌ๊ฐ ์ ํฉ๋๋ค.</strong> | |
| ๋์ถ ์น์ธ ์ฌ๋ถ๋ฅผ ํ๋จํ์ง ์์ต๋๋ค. ์ง๋จ๋ ์ฒ๋ฐฉ๋ ํ์ง ์์ต๋๋ค(๊ทธ๋์ ์๋ฃ๊ธฐ๊ธฐ ์ํํธ์จ์ด ์ธ์ฆ ๋์์ด ์๋๋๋ค). | |
| ์ฝ๋๋ฅผ ๋์ ์ง์ง ์๊ณ , ๊ต์ ์ด๋ ํ์ ๊ด๋ จ ํ๋จ์ ์์ ๋ฒ์ ๋ฐ์ ๋๋ค. | |
| ์ ํฌ๊ฐ ํ๋ ๊ฑด <strong>ํ๋ณด๋ฅผ ์ฌ์ ๊ณจ๋ผ๋ด๋ ๋ฐ๊น์ง</strong>๊ณ , ๋ง์ง๋ง ๊ฒฐ์ ์ ์๋ ์ฐ์๋ ์ฒด๊ณ์ ๊ทธ๋๋ก ๋จ์ต๋๋ค.</p></div> | |
| </div></section> | |
| <!-- ๊ฒ์นจ ๊ตฌ๋ --> | |
| <section id="engage"><div class="wrap"> | |
| <div class="eyebrow">13 ยท ๋์ </div> | |
| <h2 class="h2">๊ฒ์นจ ๊ตฌ๋ <span class="en">Metering Subscription</span></h2> | |
| <div class="steps"> | |
| <div class="step"><div class="sn">STEP 1</div><h4>์๊ฐ ๊ฒ์นจ</h4><p>์ด ํ์ด์ง์์ ๋ฑ๊ธ๋ถํฐ ๋ณด์ญ์์ค. ์๋ฃ ์ฃผ์ค ๊ฒ ์์ต๋๋ค.</p><div class="dur">๋ฐ๋ก ยท ๋ฌด๋ฃ</div></div> | |
| <div class="step"><div class="sn">STEP 2</div><h4>์์ฅ ๋ง๋ค๊ธฐ</h4><p>์ฐ๊ณ ๊ณ์ ๋ก๊ทธ๋ก ์ฅ๋ถ๋ฅผ ๋ฝ์ต๋๋ค. ์ด๋ ์ ๋ฌด๊ฐ ์ผ๋ง๋ฅผ ๋จน๋์ง ์ฌ๊ธฐ์ ๋๋ฌ๋ฉ๋๋ค.</p><div class="dur">1~2์ฃผ</div></div> | |
| <div class="step"><div class="sn">STEP 3</div><h4>๋ง ์์์ ํ์ธ</h4><p>GPU ํ ์ฅ์ง๋ฆฌ ์ฅ๋น๋ฅผ ๋ค๊ณ ์ฐพ์๋ต๋๋ค. ์๋ฃ๋ ๋ฐ์ผ๋ก ์ ๋ด๋ณด๋ด๊ณ ๊ทธ ์๋ฆฌ์์ ๋ค์ ์ฝ๋๋ค.</p><div class="dur">ํ๋ฃจ</div></div> | |
| <div class="step"><div class="sn">STEP 4</div><h4>๊ตฌ๋ ์์</h4><p>ํฉ๊ฒฉ์ ์ ๊ณ์ฝ ์ ์ ๊ฐ์ด ์ ํ๊ณ , ๋์จ ์ซ์๋ก ํ๋จํ์ญ์์ค. ๊ทธ๋ค์๋ถํฐ ๊ณ๋๊ธฐ๋ฅผ ์์๋ก ๋๋ฆฝ๋๋ค.</p><div class="dur">2~4์ฃผ</div></div> | |
| </div> | |
| <div class="note"><p><strong>ํฉ๊ฒฉ์ ์ ์ ํฌ๊ฐ ์ ํ์ง ์์ต๋๋ค.</strong> | |
| STEP 3์์ ๊ท์ฌ ํ๋ฉด, ๊ท์ฌ ๋ฌธ์๋ก ๋ค์ ์ฌ๊ณ ๊ทธ ์ซ์๊ฐ ๊ธฐ์ค์ ๋๋์ง ๋ณด์๋ฉด ๋ฉ๋๋ค. | |
| ์ฌ๊ธฐ ์ ํ ์์น๋ ์ด๋๊น์ง๋ ์ ํฌ ์ํ ํ๊ฒฝ ๊ฐ์ ๋๋ค. ๊ท์ฌ ์ซ์๋ ๊ท์ฌ ๋ฐ์ดํฐ๋ก๋ง ๋์ต๋๋ค.</p></div> | |
| </div></section> | |
| <!-- ๊ธฐ์ ๊ธฐ๋ฐ --> | |
| <section id="tech"><div class="wrap"> | |
| <div class="eyebrow">14 ยท ๊ธฐ์ ๊ธฐ๋ฐ</div> | |
| <h2 class="h2">์ ๋ต์ ์ ํด<span class="en">Strategic alliances</span></h2> | |
| <p class="lead">์์ฒ ๊ธฐ์ ์ ์ ํด๋ก ํ๋ณดํ๊ณ , ๋ฌถ์ด์ ๊ณต๊ธํ๊ณ ์ฑ ์์ง๋ ๊ฑด ์ ํฌ๊ฐ ํฉ๋๋ค. | |
| ๋ค ๊ฐ์ง ๊ธฐ์ ๋๋ฌธ์ <strong>๋ค ๊ตฐ๋ฐ์ ๋ฐ๋ก ๊ณ์ฝํ์ค ์ผ์ ์์ต๋๋ค.</strong></p> | |
| <div class="partners"> | |
| <div class="pt"><h4>๋น๋๋ํํธ ยท VIDRAFT</h4> | |
| <p>๋ฌด์์ฑ ํ์ ์์ง๊ณผ ์ถ๋ก ๊ฐ์. ์ ๋ต์ ์ ํด ๋ฐ ๊ฐ๋ฐ ์ง์์ผ๋ก ํ๋ณดํ์ต๋๋ค.</p> | |
| <div class="tags"><span class="tag">ํํธ ํ์ </span><span class="tag">ํํธ ๊ฐ์</span></div></div> | |
| <div class="pt"><h4>์ง๋์ AI ยท GINIGEN AI</h4> | |
| <p>๋ชจ๋ธ ์์ํ์ ์ฃ์ง ๊ตฌ๋. ์ ๋ต์ ์ ํด ๋ฐ ๊ฐ๋ฐ ์ง์์ผ๋ก ํ๋ณดํ์ต๋๋ค.</p> | |
| <div class="tags"><span class="tag">ํํธ ์์ถ</span><span class="tag">ํํธ ์ฃ์ง</span></div></div> | |
| </div> | |
| </div></section> | |
| <!-- ๋ฌธ์ --> | |
| <section id="contact" style="border-bottom:none"><div class="wrap"> | |
| <div class="eyebrow">15 ยท ๋ฌธ์</div> | |
| <h2 class="h2">์ฅ๋ถ๋ถํฐ ๋ฝ์๋ณด์์ฃ <span class="en">Start with the ledger</span></h2> | |
| <p class="lead">๋ญ ๋์ ํ ์ง ์ ํ๊ธฐ ์ ์, ์ง๊ธ ์ด๋์ ์ฐ๊ณ ๊ณ์ ์ง๋ถํฐ ๋ณด๋ ๊ฒ ์์์ ๋๋ค.</p> | |
| <div class="panel" style="margin-top:34px; max-width:620px"> | |
| <div class="field"><label for="f-org">๊ธฐ๊ด ยท ํ์ฌ๋ช </label><input id="f-org" type="text"></div> | |
| <div class="field"><label for="f-name">๋ด๋น์</label><input id="f-name" type="text"></div> | |
| <div class="field"><label for="f-mail">์ด๋ฉ์ผ</label><input id="f-mail" type="email"></div> | |
| <div class="field"><label for="f-msg">๋ด์ฉ (์ ํ)</label><input id="f-msg" type="text"></div> | |
| <input id="f-hp" type="text" tabindex="-1" autocomplete="off" aria-hidden="true" style="position:absolute;left:-9999px;width:1px;height:1px;opacity:0"> | |
| <button class="btn btn-p" id="send" style="width:100%">๋ฌธ์ ๋ณด๋ด๊ธฐ</button> | |
| <p class="hint" id="sendMsg" style="margin:14px 0 0"></p> | |
| </div> | |
| </div></section> | |
| <footer><div class="wrap"> | |
| <div class="fg"> | |
| <div> | |
| <div class="logo" style="margin-bottom:16px; color:var(--ivory)"> | |
| <svg class="mark" aria-hidden="true"><use href="#qmark"/></svg> | |
| <span><span class="wordmark">Quantid</span><span class="tl">The Trust Layer</span></span> | |
| </div> | |
| <p>AI ์๊ฐ๋ฅผ ๊ฒ์นจํ๋ ํ์ฌ์ ๋๋ค. ์ ํฌ๋ ๋ง๋ค์ง ์์ต๋๋ค. ๊ทธ๋์ ์ฝ๋๋ค.</p> | |
| </div> | |
| <div> | |
| <p><b>๊ณต๊ธ ยท ํ๋งค</b><br>ํํธID</p> | |
| <p style="margin-top:12px"><b>๊ธฐ์ ๊ธฐ๋ฐ</b><br>๋น๋๋ํํธ ยท ์ง๋์ AI ์ ๋ต์ ์ ํด</p> | |
| </div> | |
| </div> | |
| <div class="legal"> | |
| ์ด ํ์ด์ง์ ์์น๋ ์ ๋ถ ์ ํฌ ์ํ ํ๊ฒฝ์์ ์ฐ ๊ฐ์ ๋๋ค. | |
| ํ๋ฉด ํ๋ณด๋ฅผ ์ถ๋ฆด ๋์ ์ ๋ต ๋ณด์กด์จ์ <b>์์ด ํ๋ฉด ๋ฐ์ดํฐ๋ก ์ฐ ๊ฐ</b>์ ๋๋ค. ํ๊ตญ์ด ํ๋ฉด์ ๋์ ๊ฒ์ฆ ๋ ๊ท์ฌ ๋ฐ์ดํฐ๋ก ๋ค์ ์ฝ๋๋ค. | |
| ๊ฐ์ ๋ฐฐ์๋ ๋์ ์ฌ์ฉ์ ์์ ๋ฐ๋ผ ํฌ๊ฒ ๋ฌ๋ผ์ง๋๋ค(8๋ช ์ด๋ฉด 2.60๋ฐฐ, 256๋ช ์ด๋ฉด 1.33๋ฐฐ). ํ ์ซ์๋ง ๋ผ์ด ์ธ์ฉํ์ง ๋ง์ ์ฃผ์ญ์์ค. | |
| ์์ถ ๋ฑ๊ธ์ ์์ค์ด ์๋ค๋ ๋ป์ด ์๋๋๋ค. ์ผ๋ง๋ ์๋์ง ์ฌ์ ๋ฑ๊ธ์ผ๋ก ์ ์ด๋๋ค๋ ๋ป์ ๋๋ค. | |
| <br><br>ยฉ 2026 ํํธID ยท QUANTID | |
| </div> | |
| </div></footer> | |
| <script> | |
| const $ = id => document.getElementById(id); | |
| const fmt = n => Math.round(n).toLocaleString('ko-KR'); | |
| const GC = {A:'var(--gA)', B:'var(--gB)', C:'var(--gC)', D:'var(--gD)'}; | |
| /* ์ค์ธก 2์ ์ ๋ง์ถ ๋ณด์ ๊ฐ. ํ๋ณด 200๊ฐ 4,444ํ ํฐ ยท 50๊ฐ 1,132ํ ํฐ | |
| ๊ธฐ์ธ๊ธฐ (4444-1132)/(200-50)=22.08 tok/ํ๋ณด ยท ์ ํธ โ 28 */ | |
| const TOK_PER_CAND = 22.08, TOK_BASE = 28.0, KEEP = 50; | |
| /* ๋์ ์ฌ์ฉ์๋ณ ์ค์ธก ์ฒ๋ฆฌ๋ ๋ฐฐ์ */ | |
| const ACCEL = [[8,2.60],[32,2.02],[128,1.57],[256,1.33]]; | |
| function accel(u){ | |
| if (u <= ACCEL[0][0]) return ACCEL[0][1]; | |
| if (u >= ACCEL[ACCEL.length-1][0]) return ACCEL[ACCEL.length-1][1]; | |
| for (let i=0;i<ACCEL.length-1;i++){ | |
| const [u0,m0]=ACCEL[i], [u1,m1]=ACCEL[i+1]; | |
| if (u>=u0 && u<=u1) return m0 + (m1-m0)*((u-u0)/(u1-u0)); | |
| } | |
| return ACCEL[ACCEL.length-1][1]; | |
| } | |
| function grade(c1,c2,c3,c4){ | |
| if(!c1) return ['D','์์ง ์ ์ฌ๋ณด์ ์ํ์ ๋๋ค. ๊ฑด๋น ํ ํฐ์ ๋ชจ๋ฅด๋ฉด ์ค์ผ ๋์ ์์ฒด๊ฐ ์ ์กํ๋๋ค.']; | |
| if(!c2) return ['C','์ด์ก์ ์๊ณ ๊ณ์๋๊ตฐ์. ๊ทธ ์์์ ์ด๋๊ฐ ๋จน๋์ง๋ ์์ง ์ ๋ณด์ด๋ ์ํ์ ๋๋ค.']; | |
| if(!c3) return ['C','์ด๋๊ฐ ๋จน๋์ง๋ ๋ณด์ด๋๋ฐ ํ๋ณด๋ฅผ ๊ทธ๋๋ก ๋๊ธฐ๊ณ ๊ณ์ญ๋๋ค. ์ค์ผ ์ฌ์ง๊ฐ ๋ง์ด ๋จ์์ต๋๋ค.']; | |
| if(!c4) return ['B','์ ์กํ ์์ต๋๋ค. ๋ค๋ง ๊ณ๋๊ธฐ๊ฐ ์ ๋์์ ์ ๋ฌด ๋ฐ๋๋ฉด ๋๋์๊ฐ๋๋ค.']; | |
| return ['A','์ฌ๊ณ , ๋๋๊ณ , ์ค์ด๋ ๊ฒ ๋ค ๋๊ณ ์์ต๋๋ค.']; | |
| } | |
| const CAVEATS = [ | |
| '์ ๋ ฅ ํ ํฐ์ ์ค์ ๋ก ์ฐ ๋ ์ (ํ๋ณด 200๊ฐ 4,444ํ ํฐ, 50๊ฐ 1,132ํ ํฐ)์ ๋ง์ถฐ ๊ณ์ฐํ ๊ฐ์ ๋๋ค.', | |
| '๊ฐ์ ๋ฐฐ์๋ ๋์ ์ฌ์ฉ์์ ๋ฐ๋ผ ๋ง์ด ๋ฌ๋ผ์ง๋๋ค. 8๋ช ์ด๋ฉด 2.60๋ฐฐ, 256๋ช ์ด๋ฉด 1.33๋ฐฐ์ ๋๋ค.', | |
| 'ํ๋ณด๋ฅผ ์ถ๋ฆด ๋์ ์ ๋ต ๋ณด์กด์จ์ ์์ด ํ๋ฉด์ผ๋ก ์ฐ ๊ฐ์ ๋๋ค. ํ๊ตญ์ด ํ๋ฉด์ ๋์ ๊ฒ์ฆ ๋ ๊ท์ฌ ๋ฐ์ดํฐ๋ก ๋ค์ ์ฝ๋๋ค.', | |
| '์์ถ์ ๋์ ์๋ผ์ง ์๊ฐ์ ์๋ผ์ง ์์ต๋๋ค. ์๊ฐ์ ๊ฐ์ ์ชฝ์ด ๋งก์ต๋๋ค.' | |
| ]; | |
| $('run').addEventListener('click', () => { | |
| const cand = Math.max(1, +$('cand').value || 1); | |
| const mon = Math.max(1, +$('mon').value || 1); | |
| const usr = Math.max(1, +$('usr').value || 1); | |
| const price = $('pri').value.trim() === '' ? null : +$('pri').value; | |
| const kept = Math.min(KEEP, cand); | |
| const before = TOK_PER_CAND*cand + TOK_BASE; | |
| const after = TOK_PER_CAND*kept + TOK_BASE; | |
| const saved = Math.max(0, before-after) * mon; | |
| const mult = accel(usr); | |
| const [g, note] = grade($('c1').checked,$('c2').checked,$('c3').checked,$('c4').checked); | |
| $('rLetter').textContent = g; | |
| $('rLetter').style.color = GC[g]; | |
| $('rNote').textContent = note; | |
| $('rBefore').textContent = fmt(before) + ' ํ ํฐ'; | |
| $('rAfter').textContent = fmt(after) + ' ํ ํฐ'; | |
| $('rRatio').textContent = (before/after).toFixed(2) + '๋ฐฐ'; | |
| $('rSaved').textContent = fmt(saved) + ' ํ ํฐ'; | |
| $('rUsers').textContent = '(' + usr + '๋ช )'; | |
| $('rMult').textContent = mult.toFixed(2) + '๋ฐฐ'; | |
| $('rGpu').textContent = Math.round(100/mult) + '%'; | |
| if (price !== null && !isNaN(price)) { | |
| $('rMoneyRow').style.display = 'flex'; | |
| $('rMoney').textContent = fmt(saved/1e6*price) + '์'; | |
| } else { | |
| $('rMoneyRow').style.display = 'none'; | |
| } | |
| $('rCav').innerHTML = CAVEATS.map(c => '<li>'+c+'</li>').join(''); | |
| $('res').classList.add('on'); | |
| }); | |
| /* ๋ฌธ์. ์์ ๋ถ(quantid/QUANTID)๋ก ๋ณด๋ด ๋น๊ณต๊ฐ ๋ฐ์ดํฐ์ ์ ์๋๋ค */ | |
| const INBOX = 'https://quantid-quantid.hf.space/api/contact'; | |
| $('send').addEventListener('click', async () => { | |
| const btn=$('send'), out=$('sendMsg'); | |
| const org=$('f-org').value.trim(), name=$('f-name').value.trim(), | |
| mail=$('f-mail').value.trim(), msg=$('f-msg').value.trim(); | |
| if(!org || !name || !mail){ out.textContent='๊ธฐ๊ด๋ช , ๋ด๋น์, ์ด๋ฉ์ผ์ ์ฑ์์ฃผ์ญ์์ค.'; return; } | |
| if(!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(mail)){ out.textContent='์ด๋ฉ์ผ ์ฃผ์๋ฅผ ๋ค์ ํ์ธํด ์ฃผ์ญ์์ค.'; return; } | |
| btn.disabled=true; out.textContent='๋ณด๋ด๋ ์ค์ ๋๋คโฆ'; | |
| try{ | |
| const r = await fetch(INBOX, {method:'POST', headers:{'Content-Type':'application/json'}, | |
| body: JSON.stringify({org, name, mail, msg, website: $('f-hp') ? $('f-hp').value : ''})}); | |
| const d = await r.json(); | |
| if(d.ok){ | |
| out.textContent='์ ์๋์ต๋๋ค. ์์ ์ผ ๊ธฐ์ค ํ๋ฃจ ์์ ๋ต ๋๋ฆฌ๊ฒ ์ต๋๋ค. (์ ์๋ฒํธ '+(d.id||'-')+')'; | |
| ['f-org','f-name','f-mail','f-msg'].forEach(k=>{ if($(k)) $(k).value=''; }); | |
| } else { | |
| out.textContent = d.error || '๋ณด๋ด์ง ๋ชปํ์ต๋๋ค. ์ ์ ํ ๋ค์ ์๋ํด ์ฃผ์ญ์์ค.'; | |
| btn.disabled=false; | |
| } | |
| }catch(e){ | |
| out.textContent='๋ณด๋ด์ง ๋ชปํ์ต๋๋ค. ๋คํธ์ํฌ๋ฅผ ํ์ธํ์๊ฑฐ๋ ์ ์ ํ ๋ค์ ์๋ํด ์ฃผ์ญ์์ค.'; | |
| btn.disabled=false; | |
| } | |
| }); | |
| /* ===== 09 ยท ๋์กฐ. ์ ๊ณ ๊ธฐ๋ก ์์ ์ง๊ธ ์ค์ ์ฐ๊ธฐ ===== */ | |
| (function(){ | |
| var B=null, $b=function(i){return document.getElementById(i)}; | |
| var W=560,H=400, L=58,R=14,T=18,Bm=44; | |
| var FX=function(n){return n.toLocaleString('ko-KR')}; | |
| function han(n){ if(n>=1e12) return (n/1e12).toFixed(1)+'์กฐ'; | |
| if(n>=1e8) return (n/1e8).toFixed(n>=1e9?0:1)+'์ต'; | |
| if(n>=1e4) return Math.round(n/1e4).toLocaleString('ko-KR')+'๋ง'; | |
| return FX(Math.round(n)); } | |
| fetch('board.json').then(function(r){return r.json()}).then(function(d){B=d; init();}) | |
| .catch(function(){ $b('bNote').innerHTML='<p>๋์กฐ ์๋ฃ๋ฅผ ๋ถ๋ฌ์ค์ง ๋ชปํ์ต๋๋ค.</p>'; }); | |
| function init(){ | |
| var gs=Object.keys(B.hw).filter(function(k){ | |
| return B.records.some(function(r){return r.g===k}); }).sort(); | |
| $b('bGpu').innerHTML=gs.map(function(k){ | |
| var n=B.records.filter(function(r){return r.g===k}).length; | |
| return '<option value="'+k+'">'+k+' ('+n+'๊ฑด)</option>'; }).join(''); | |
| $b('bGpu').value=gs.slice().sort(function(a,b){ | |
| return B.records.filter(function(r){return r.g===b}).length | |
| - B.records.filter(function(r){return r.g===a}).length; })[0]; | |
| $b('bQ').innerHTML=Object.keys(B.bpp).map(function(q){ | |
| return '<option value="'+q+'"'+(q==='FP8'?' selected':'')+'>'+q+'</option>'; }).join(''); | |
| var withC=B.records.filter(function(r){return r.c}).length; | |
| $b('bMeta').textContent='ยท ๊ธฐ๋ก '+B.records.length+'๊ฑด ยท GPU '+Object.keys(B.hw).length+'์ข ยท ๊ธฐ์ค์ผ '+B.updated; | |
| $b('bSrc').textContent='์ ๋ ฅ์ ์ ์กฐ์ฌ๊ฐ ์ ์ด๋ ์ ๊ฒฉ์ด๋ผ ์ค์ ์ฐ๋ ์๋ณด๋ค ๋๋ํ๊ฒ ์กํ๋๋ค. CPU์ ๋๊ฐ์ ์ ๋ค์ด๊ฐ์ต๋๋ค. '+ | |
| 'ํด๋ผ์ฐ๋ ๊ฐ์ '+(B.src.price_by||[]).join(' ยท ')+'๊ฐ '+B.src.as_of+'์ ๋ด๊ฑด ์ ๊ฐ๊ณ , ์ฝ์ ํ๋ฉด ์ด๋ณด๋ค ์๋๋ค. '+ | |
| '๋์ ์ฌ์ฉ์ ์๋ '+B.records.length+'๊ฑด ๊ฐ์ด๋ฐ '+withC+'๊ฑด๋ง ๊ณต๊ฐ๋ผ ์์ด(MLPerf๋ ๋ฐฐ์น ํฌ๊ธฐ๋ฅผ ์ ๋ฐํ๋๋ค) '+ | |
| '๊ฐ๋ก์ถ์ ๋ชจ๋๊ฐ ๋ฐํ ๋ชจ๋ธ ํฌ๊ธฐ๋ก ์ก์์ต๋๋ค. ๋ ๋ค ๊ฒฌ์ ์ด ์๋๋ผ ์๋ก ๊ฒฌ์ฃผ๋ ์ฃ๋๋ก ๋ด์ฃผ์ญ์์ค.'; | |
| ['bGpu','bQ','bTot','bAct','bCon','bGn','bMon','bOut','bKwh'].forEach(function(id){ | |
| var e=$b(id); if(!e) return; | |
| e.addEventListener('input', calc); e.addEventListener('change', calc); }); | |
| calc(); | |
| } | |
| /* ๋ฌผ๋ฆฌ ์ํ. ๋์ฝ๋ ํ ์คํ ์ ํ์ฑ ๊ฐ์ค์น๋ฅผ ํ ๋ฒ ์ฝ๋๋ค */ | |
| function ceil(hw, actB, q, con){ | |
| if(!hw||!hw.bw||!actB) return null; | |
| return con*(hw.bw*1e12)/(actB*1e9*(B.bpp[q]||1)); | |
| } | |
| function calc(){ | |
| var g=$b('bGpu').value; if(!g||!B) return; | |
| var hw=B.hw[g], q=$b('bQ').value, | |
| tot=+$b('bTot').value||1, act=+$b('bAct').value||1, | |
| con=+$b('bCon').value||1, mon=+$b('bMon').value||1, | |
| out=+$b('bOut').value||1, kwh=+$b('bKwh').value||0; | |
| var peers=B.records.filter(function(r){return r.g===g}); | |
| var cap=ceil(hw, act, q, con); | |
| /* ๋น์ทํ ํฌ๊ธฐ ๋ชจ๋ธ์ ์ค์ธก์ ๊ฒฌ์ค๋ค */ | |
| var near=peers.filter(function(r){return r.tb && r.tb>=tot/2.5 && r.tb<=tot*2.5}); | |
| var basis=near.length>=3?near:peers; | |
| var est=null; | |
| if(basis.length){ | |
| var a=basis.map(function(r){return r.pg}).sort(function(x,y){return x-y}); | |
| est=a[Math.floor(a.length/2)]; | |
| } | |
| var cut=false; | |
| if(est&&cap&&est>cap){ est=cap; cut=true; } | |
| draw(peers, cap, tot, est); | |
| if(!est){ | |
| $b('bNote').innerHTML='<p>์ด GPU๋ ๊ธฐ๋ก์ด ๋ชจ์๋ผ์ ์ถ์ ํ์ง ์๊ฒ ์ต๋๋ค. ์๋ ์ซ์๋ฅผ ์ง์ด๋ด๋ ๊ฒ๋ณด๋ค ๋ซ์ต๋๋ค.</p>'; | |
| ['kRank','kGpu','kPow','kUsd'].forEach(function(i){$b(i).textContent='-'}); | |
| return; | |
| } | |
| var better=peers.filter(function(r){return r.pg>est}).length; | |
| $b('kRank').textContent='์์ '+Math.max(1,Math.round((better+1)/peers.length*100))+'%'; | |
| $b('kRankSub').textContent=g+' ๊ธฐ๋ก '+peers.length+'๊ฑด ๊ฐ์ด๋ฐ'; | |
| var needTok=mon*out, need=Math.max(1, Math.ceil(needTok/(est*3600*24*30.4))); | |
| $b('kGpu').textContent=FX(need)+'์ฅ'; | |
| $b('kGpuSub').textContent='ํ ๋ฌ '+han(needTok)+' ํ ํฐ์ ๋๊ธฐ๋ ค๋ฉด'; | |
| if(hw.w){ var kW=need*hw.w/1000, mWh=kW*730; | |
| $b('kPow').textContent=FX(Math.round(mWh*kwh))+'์'; | |
| $b('kPowSub').textContent=FX(Math.round(mWh))+' kWh ยท '+kW.toFixed(1)+' kW'; | |
| } else { $b('kPow').textContent='-'; $b('kPowSub').textContent='์ด GPU๋ ์ ๊ฒฉ์ด ๊ณต๊ฐ ์ ๋จ'; } | |
| if(hw.usd){ var usd=need*hw.usd*730; | |
| $b('kUsd').textContent=FX(Math.round(usd*1380/1e4))+'๋ง์'; | |
| $b('kUsdSub').textContent='$'+FX(Math.round(usd))+' ยท ํ์จ 1,380์'; | |
| } else { $b('kUsd').textContent='-'; $b('kUsdSub').textContent='๊ณต๊ฐ๋ ์๊ฐ๋น ๋จ๊ฐ๊ฐ ์์'; } | |
| var others=basis.filter(function(r){return !r.own}).length; | |
| $b('bNote').innerHTML='<p>์ด ์ค์ ์ด๋ฉด <strong>GPU ํ ์ฅ์ ์ด๋น '+FX(Math.round(est))+'ํ ํฐ</strong>์ฏค ๋์ต๋๋ค. '+ | |
| tot+'B ์ํ ๋ชจ๋ธ์ '+g+'์์ ๋๋ฆฐ ๊ธฐ๋ก '+basis.length+'๊ฑด'+ | |
| (others?'(๋จ์ด ์ฐ ๊ฒ '+others+'๊ฑด ํฌํจ)':'')+'์ ํ๊ฐ์ด๋ฐ ๊ฐ์ ๋๋ค'+ | |
| (cut?'. ์๋ ์ค์๊ฐ์ ๋ฌผ๋ฆฌ์ ์ผ๋ก ๋ถ๊ฐ๋ฅํ ์์ค์ด๋ผ ์ํ๊น์ง ๋ฎ์ท์ต๋๋ค':'')+'. '+ | |
| '<b>์ง์ ์ฐ ๊ฒ ์๋๋ผ ๋จ์ ๊ธฐ๋ก์ ๊ฒฌ์ค ๋ณธ ๊ฐ</b>์ด๋ผ ๋ชจ๋ธ์ด๋ ์๋ฒ ์ค์ ์ด ๋ค๋ฅด๋ฉด ๋ฌ๋ผ์ง๋๋ค. '+ | |
| '๋์ ๊ฒํ ํ์ค ๋ ์ฐ์๋ ์ฅ๋น์์ ์ง์ ์ฌ ๋๋ฆฝ๋๋ค.'+ | |
| (cap?' ์ฐธ๊ณ ๋ก ์ด ์กฐํฉ์ด ๋ฌผ๋ฆฌ์ ์ผ๋ก ๋์ ์ ์๋ ์ ์ ์ด๋น '+FX(Math.round(cap))+'ํ ํฐ์ ๋๋ค.':'')+'</p>'; | |
| $b('bTop').innerHTML=peers.slice().sort(function(a,b){return b.pg-a.pg}).slice(0,8) | |
| .map(function(r,i){ | |
| return '<tr'+(r.own?' class="mine"':'')+'><td>'+(i+1)+'</td><td>'+(r.m||'-')+ | |
| '</td><td>'+(r.by||'-')+'</td><td class="n">'+(r.tb?r.tb+'B':'-')+ | |
| '</td><td class="n">'+FX(r.pg)+'</td><td><span class="gr g-'+(r.gr||'')+'">'+(r.gr||'-')+'</span></td></tr>'; | |
| }).join(''); | |
| } | |
| function draw(peers, cap, tot, est){ | |
| var pts=peers.filter(function(r){return r.tb}); | |
| var xs=pts.map(function(r){return r.tb}).concat([tot]), | |
| ys=pts.map(function(r){return r.pg}).concat(est?[est]:[]); | |
| if(!xs.length) { $b('plot').innerHTML=''; return; } | |
| var x0=Math.max(.3,Math.min.apply(null,xs)), x1=Math.max.apply(null,xs), | |
| y0=Math.max(.5,Math.min.apply(null,ys)), y1=Math.max.apply(null,ys); | |
| x1=Math.max(x1,x0*2); y1=Math.max(y1,y0*2); | |
| var lx=function(v){return L+(Math.log10(Math.min(Math.max(v,x0),x1))-Math.log10(x0))/(Math.log10(x1)-Math.log10(x0))*(W-L-R)}, | |
| ly=function(v){return H-Bm-(Math.log10(Math.min(Math.max(v,y0),y1))-Math.log10(y0))/(Math.log10(y1)-Math.log10(y0))*(H-T-Bm)}; | |
| var s='<g font-family="IBM Plex Sans KR, sans-serif">', p; | |
| for(p=Math.ceil(Math.log10(y0)); p<=Math.floor(Math.log10(y1)); p++){ | |
| var yy=ly(Math.pow(10,p)), lab=Math.pow(10,p); | |
| s+='<line x1="'+L+'" y1="'+yy+'" x2="'+(W-R)+'" y2="'+yy+'" stroke="#DCD6C9" stroke-dasharray="2 3"/>'+ | |
| '<text x="'+(L-7)+'" y="'+(yy+4)+'" text-anchor="end" font-size="9.5" fill="#8A8F98">'+ | |
| (lab>=1000?(lab/1000)+'k':lab)+'</text>'; | |
| } | |
| for(p=Math.ceil(Math.log10(x0)); p<=Math.floor(Math.log10(x1)); p++){ | |
| var xx=lx(Math.pow(10,p)); | |
| s+='<text x="'+xx+'" y="'+(H-Bm+16)+'" text-anchor="middle" font-size="9.5" fill="#8A8F98">'+Math.pow(10,p)+'B</text>'; | |
| } | |
| s+='<line x1="'+L+'" y1="'+(H-Bm)+'" x2="'+(W-R)+'" y2="'+(H-Bm)+'" stroke="#C4BCAB"/>'+ | |
| '<line x1="'+L+'" y1="'+T+'" x2="'+L+'" y2="'+(H-Bm)+'" stroke="#C4BCAB"/>'+ | |
| '<text x="'+((W+L)/2)+'" y="'+(H-8)+'" text-anchor="middle" font-size="11" fill="#4A515C">๋ชจ๋ธ ํฌ๊ธฐ ยท ์ด ํ๋ผ๋ฏธํฐ (๋ก๊ทธ)</text>'+ | |
| '<text x="14" y="'+((H-Bm+T)/2)+'" text-anchor="middle" font-size="11" fill="#4A515C" transform="rotate(-90 14 '+((H-Bm+T)/2)+')">GPU ํ ์ฅ๋น ์ด๋น ํ ํฐ (๋ก๊ทธ)</text>'; | |
| if(cap){ | |
| var off=cap>y1, cy=off?T+4:ly(cap); | |
| s+='<line x1="'+L+'" y1="'+cy+'" x2="'+(W-R)+'" y2="'+cy+'" stroke="#B0432C" stroke-width="1.6" stroke-dasharray="6 4" opacity="'+(off?'.4':'1')+'"/>'+ | |
| '<text x="'+(W-R-4)+'" y="'+(cy+(off?14:-6))+'" text-anchor="end" font-size="10" font-weight="700" fill="#B0432C">'+ | |
| '๋์ ์ ์๋ ์ '+FX(Math.round(cap))+(off?' (์ถ ๋ฐ)':'')+'</text>'; | |
| } | |
| pts.forEach(function(r){ | |
| s+='<circle cx="'+lx(r.tb).toFixed(1)+'" cy="'+ly(r.pg).toFixed(1)+'" r="'+(r.own?4.6:3.2)+ | |
| '" fill="'+(r.own?'#3963CF':'#B8B0A0')+'" opacity="'+(r.own?'.95':'.5')+'"><title>'+ | |
| (r.m||'')+' ยท '+(r.by||'')+' ยท '+(r.tb||'?')+'B ยท '+FX(r.pg)+' tok/s/GPU ยท '+(r.gr||'')+'</title></circle>'; | |
| }); | |
| if(est){ | |
| var px=lx(tot), py=ly(est); | |
| s+='<circle cx="'+px+'" cy="'+py+'" r="13" fill="#2A7A4F" opacity=".15"/>'+ | |
| '<circle cx="'+px+'" cy="'+py+'" r="6" fill="#2A7A4F" stroke="#fff" stroke-width="2"/>'+ | |
| '<text x="'+(px<W-90?px+14:px-14)+'" y="'+(py-11)+'" text-anchor="'+(px<W-90?'start':'end')+ | |
| '" font-size="11.5" font-weight="700" fill="#2A7A4F">์ง๊ธ ์ค์ </text>'; | |
| } | |
| $b('plot').innerHTML=s+'</g>'; | |
| } | |
| })(); | |
| </script> | |
| </body> | |
| </html> | |