8e3cdb0d3b
Some checks are pending
ci / build (push) Waiting to run
Measured convergence before: split hero 13/19, top-bar nav 19/19, one-line notice footer 14/19, body Pretendard 17/21, 10 similarity pairs above 0.78. Each showcase got a pre-assigned hero family, nav form, footer form, type pair, background, accent hue, radius, motion grammar and material from outputs/rework-2026-10-06/plan.md; direction cards and the chosen reason are recorded in every design.md. After: 0 similarity warnings, 19 distinct display faces, 7 hero families, 5 nav forms, 5 footer forms, no scroll reveals, 5 showcases with SVG filter materials. Example contact values replace bracket placeholders under the existing fictional-brand notices. Thumbnails, OG images, card copy and three e2e assertions updated; dead CSS in dure-enrollment and hannam-jari removed; similarity.mjs learns the new font families.
263 lines
12 KiB
HTML
263 lines
12 KiB
HTML
<!doctype html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Synapse BCI Lab · 신경 인터페이스 연구 개념서</title>
|
|
<meta
|
|
name="description"
|
|
content="64채널 표면 전극 연구에서 기록할 신호와 기록하지 않을 신호, 데이터 권리, 보고 항목을 정리한 신경 인터페이스 연구 개념서."
|
|
/>
|
|
<meta property="og:title" content="Synapse BCI Lab · 신경 인터페이스 연구 개념서" />
|
|
<meta property="og:description" content="64채널 표면 전극 연구의 동의 절차, 데이터 권리, 보고 항목을 정리한 연구 개념서." />
|
|
<meta property="og:type" content="website" />
|
|
<meta property="og:image" content="./og.png" />
|
|
<meta name="twitter:card" content="summary_large_image" />
|
|
<meta name="theme-color" content="#dbe5cb" />
|
|
|
|
<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=Gowun+Batang:wght@400;700&family=Hahmlet:wght@400;600;700&display=swap"
|
|
/>
|
|
<link rel="stylesheet" href="./styles/main.css?v=20261006" />
|
|
<link
|
|
rel="icon"
|
|
href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='%23DBE5CB'/%3E%3Cpath d='M0 8h32M0 16h32M0 24h32M8 0v32M16 0v32M24 0v32' stroke='%23D88F7F' stroke-width='.6'/%3E%3Cpath d='M3 18h7l2-9 3 15 3-11 2 5h9' fill='none' stroke='%2317201A' stroke-width='2'/%3E%3C/svg%3E"
|
|
/>
|
|
</head>
|
|
|
|
<body>
|
|
<a class="skip" href="#main">본문으로 건너뛰기</a>
|
|
|
|
<header class="site-head">
|
|
<div class="wrap head-inner">
|
|
<a class="wordmark" href="#main">Synapse BCI Lab<span>연구 개념서</span></a>
|
|
</div>
|
|
</header>
|
|
<div class="scope-note">
|
|
<p class="wrap">개념 페이지입니다. 임상시험·참여자·실제 기기가 없으며, 아래 기록지의 신호는 시뮬레이션입니다.</p>
|
|
</div>
|
|
|
|
<main id="main">
|
|
<section class="title-block" aria-labelledby="hero-h">
|
|
<div class="doc">
|
|
<p class="doc-id">연구 개념서 SYN-64 · 2026년 10월판</p>
|
|
<h1 id="hero-h">신호 기록 전에<br />동의부터 받습니다</h1>
|
|
<p class="lead">
|
|
64채널 표면 전극으로 기록할 신호와 기록하지 않을 신호, 기록을 볼 수 있는 사람과
|
|
보관 기간을 먼저 정리했습니다. 신호 기록 예시는 그 아래에 있습니다.
|
|
</p>
|
|
<nav class="toc" aria-labelledby="toc-h">
|
|
<h2 id="toc-h" class="toc-title">차례</h2>
|
|
<ol class="toc-list">
|
|
<li><a href="#recorder"><span class="toc-no">그림 1</span><span class="toc-name">64채널 스파이크 기록지</span></a></li>
|
|
<li><a href="#device"><span class="toc-no">제1장</span><span class="toc-name">뇌를 뚫지 않는 표면 전극</span></a></li>
|
|
<li><a href="#numbers"><span class="toc-no">제2장</span><span class="toc-name">보고서 필수 항목</span></a></li>
|
|
<li><a href="#ethics"><span class="toc-no">제3장</span><span class="toc-name">기록하기 전에 정하는 세 가지</span></a></li>
|
|
</ol>
|
|
</nav>
|
|
</div>
|
|
</section>
|
|
|
|
<figure id="recorder" class="recorder">
|
|
<canvas id="raster" aria-label="시뮬레이션한 64채널 스파이크 기록지: 붉은 눈금 위에 검은 세로 눈금이 2초 창을 따라 흘러가고, 가끔 여러 채널이 함께 튀는 동기 발화가 지나갑니다."></canvas>
|
|
<figcaption class="wrap">
|
|
<span><b>그림 1</b> · 64채널 스파이크 기록 · 시뮬레이션</span>
|
|
<span>눈금 하나 = 검출된 스파이크 하나 · 세로로 겹친 줄 = 채널 동기 발화 · 2초 창</span>
|
|
</figcaption>
|
|
</figure>
|
|
|
|
<section id="device" class="section" aria-labelledby="device-h">
|
|
<div class="doc">
|
|
<div class="article-head">
|
|
<span class="article-no">제1장</span>
|
|
<h2 id="device-h">뇌를 뚫지 않는 표면 전극</h2>
|
|
</div>
|
|
<p>
|
|
SYN-64는 뇌를 뚫지 않고 표면에 얹는 얇은 전극판입니다. 신호 품질보다 먼저
|
|
전극이 닿는 조직, 접촉 기간, 제거한 뒤 남는 물질을 확인합니다.
|
|
</p>
|
|
<figure class="plate">
|
|
<img
|
|
src="./assets/chip-macro.webp"
|
|
alt="금색 배선이 촘촘한 신경 인터페이스 개념 판, 한쪽 끝에 미세 전극 격자가 보이는 참고 이미지"
|
|
width="900"
|
|
height="1200"
|
|
loading="lazy"
|
|
/>
|
|
<figcaption>그림 2 · SYN-64 개념 판 — 오른쪽 아래 금색 격자가 전극 64개 자리</figcaption>
|
|
</figure>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="numbers" class="section" aria-labelledby="numbers-h">
|
|
<div class="doc">
|
|
<div class="article-head">
|
|
<span class="article-no">제2장</span>
|
|
<h2 id="numbers-h">보고서 필수 항목</h2>
|
|
</div>
|
|
<p>
|
|
아직 측정하지 않은 값은 비워 두고, 비워 둔 이유를 함께 적습니다.
|
|
</p>
|
|
<div class="table-wrap plate">
|
|
<table class="report-table">
|
|
<caption class="sr-only">연구 보고 항목 — 지표, 보고 값, 비워 둔 이유</caption>
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">지표</th>
|
|
<th scope="col" class="num">값</th>
|
|
<th scope="col">비워 둔 이유</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr><th scope="row">해독 지연</th><td class="num">—</td><td>참여자 기록 없음</td></tr>
|
|
<tr><th scope="row">원신호 표본 주기</th><td class="num">—</td><td>기기 사양 미확정</td></tr>
|
|
<tr><th scope="row">신호 대 잡음비</th><td class="num">—</td><td>측정 안 함</td></tr>
|
|
<tr><th scope="row">동작 분류 수와 정확도</th><td class="num">—</td><td>참여자 기록 없음</td></tr>
|
|
<tr><th scope="row">무선 전송 방식</th><td class="num">—</td><td>시스템 설계 전</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="ethics" class="section" aria-labelledby="ethics-h">
|
|
<div class="doc">
|
|
<div class="article-head">
|
|
<span class="article-no">제3장</span>
|
|
<h2 id="ethics-h">기록하기 전에 정하는 세 가지</h2>
|
|
</div>
|
|
<ol class="clauses">
|
|
<li>
|
|
<h3>연구 목적 외에는 쓰지 않습니다</h3>
|
|
<p>신경 신호는 광고·프로파일링에 쓰지 않습니다. 사용 범위는 수집 전에 문서로 정합니다.</p>
|
|
</li>
|
|
<li>
|
|
<h3>언제든 참여를 중단할 수 있습니다</h3>
|
|
<p>중단 방법, 중단 뒤 지원과 추적 관찰을 등록 전에 설명합니다. 그만둔 사람의 기록이 어떻게 처리되는지도 함께 적습니다.</p>
|
|
</li>
|
|
<li>
|
|
<h3>원자료 열람 권한을 밝힙니다</h3>
|
|
<p>원신호의 보관 기간, 열람 권한, 그리고 발표할 때 집계 결과와 신원을 어떻게 떼어 놓는지를 밝힙니다.</p>
|
|
</li>
|
|
</ol>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="closing" aria-labelledby="closing-h">
|
|
<div class="doc">
|
|
<h2 id="closing-h">기록하지 않을 신호도<br />미리 정해 둡니다</h2>
|
|
<a class="back-link" href="#recorder">기록지로 돌아가기</a>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer class="site-foot">
|
|
<div class="wrap foot-inner">
|
|
<p>Synapse BCI Lab · 연구 개념서 SYN-64</p>
|
|
<p>designpaca 쇼케이스</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
// 기록지: 붉은 인쇄 눈금 위에 검은 잉크로 스파이크를 찍고 종이처럼 왼쪽으로 흘린다.
|
|
// 화면 밖이면 멈추고, 움직임 줄이기면 한 장만 그린다.
|
|
const canvas = document.getElementById("raster");
|
|
const reduced = matchMedia("(prefers-reduced-motion: reduce)").matches;
|
|
const CH = 64;
|
|
const PAPER = "#dbe5cb";
|
|
const GRID = "rgba(216, 143, 127, 0.55)";
|
|
const GRID_MAJOR = "rgba(196, 98, 80, 0.7)";
|
|
const INK = "rgba(23, 32, 26, 0.82)";
|
|
const INK_BURST = "rgba(163, 39, 28, 1)";
|
|
let ctx, w, h, dpr, running = false, feed = 0;
|
|
|
|
function paperColumn(x, width) {
|
|
ctx.fillStyle = PAPER;
|
|
ctx.fillRect(x, 0, width, h);
|
|
ctx.fillStyle = GRID;
|
|
for (let row = 0; row <= 8; row++) {
|
|
ctx.fillRect(x, Math.round((row * h) / 8), width, 1);
|
|
}
|
|
}
|
|
|
|
function fit() {
|
|
dpr = Math.min(devicePixelRatio || 1, 1.5);
|
|
w = canvas.clientWidth;
|
|
h = canvas.clientHeight;
|
|
canvas.width = Math.round(w * dpr);
|
|
canvas.height = Math.round(h * dpr);
|
|
ctx = canvas.getContext("2d");
|
|
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
|
|
paperColumn(0, w);
|
|
for (let x = 0; x < w; x += 24) {
|
|
ctx.fillStyle = x % 120 === 0 ? GRID_MAJOR : GRID;
|
|
ctx.fillRect(x, 0, 1, h);
|
|
}
|
|
}
|
|
|
|
const rate = () => 0.015 + Math.random() * 0.04;
|
|
|
|
function column(x) {
|
|
const burst = Math.random() < 0.006;
|
|
const rowH = h / CH;
|
|
for (let ch = 0; ch < CH; ch++) {
|
|
const fire = burst ? Math.random() < 0.55 : Math.random() < rate();
|
|
if (!fire) continue;
|
|
ctx.strokeStyle = burst ? INK_BURST : INK;
|
|
ctx.lineWidth = burst ? 1.4 : 1;
|
|
ctx.beginPath();
|
|
const y = ch * rowH + rowH / 2;
|
|
ctx.moveTo(x, y - rowH * 0.38);
|
|
ctx.lineTo(x, y + rowH * 0.38);
|
|
ctx.stroke();
|
|
}
|
|
}
|
|
|
|
function step() {
|
|
if (!running) return;
|
|
const dx = 2;
|
|
// 장치 픽셀 단위로 옮긴다. 변환 행렬(dpr)을 그대로 두면 매 프레임 그림이
|
|
// dpr 배로 늘어나 고밀도 화면에서 기록지가 눈금색으로 번진다(390@2x 실측).
|
|
ctx.save();
|
|
ctx.setTransform(1, 0, 0, 1, 0, 0);
|
|
ctx.drawImage(canvas, -Math.round(dx * dpr), 0);
|
|
ctx.restore();
|
|
paperColumn(w - dx - 1, dx + 2);
|
|
feed += dx;
|
|
if (feed % 24 < dx) {
|
|
ctx.fillStyle = feed % 120 < dx ? GRID_MAJOR : GRID;
|
|
ctx.fillRect(w - 1, 0, 1, h);
|
|
}
|
|
column(w - 1);
|
|
requestAnimationFrame(step);
|
|
}
|
|
|
|
function staticFrame() {
|
|
for (let x = 0; x < w; x += 3) column(x);
|
|
}
|
|
|
|
// 첫 장은 이미 기록된 종이로 시작한다. 빈 눈금만 보이는 구간을 두지 않는다.
|
|
fit();
|
|
staticFrame();
|
|
addEventListener("resize", () => {
|
|
fit();
|
|
staticFrame();
|
|
}, { passive: true });
|
|
if (!reduced) {
|
|
const io = new IntersectionObserver((entries) => {
|
|
const on = entries[0].isIntersecting;
|
|
if (on && !running) {
|
|
running = true;
|
|
requestAnimationFrame(step);
|
|
} else if (!on) {
|
|
running = false;
|
|
}
|
|
});
|
|
io.observe(canvas);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|