${p.rank <= 3 ? `Top ${p.rank} ` : ""}
${avatarHTML(p.name, "lg")}
${esc(p.name)} ${info.linkedin ? `
LinkedIn ` : ""}
+ ${awardHTML(p)}
${info.slug ? `
` : ""}
${info.intro ? `
${esc(info.intro)}
` : ""}
${p.projects} 프로젝트${p.cohorts.length} 기수${fmt(p.runners)} 함께한 러너${repos.length} 레포
@@ -657,6 +726,7 @@
x.tabIndex = on ? 0 : -1;
$("#" + x.getAttribute("aria-controls")).hidden = !on;
});
+ if (state.mapScroll) state.mapScroll();
if (id === "tab-course") shelfSpy();
paintNav();
}
@@ -723,6 +793,21 @@
}
/* ---------- events ---------- */
+ /* academic events the team works on with 한국경영정보학회 */
+ function renderStages() {
+ const st = state.stages, box = $("#stage");
+ if (!st || !box || !st.items.length) return;
+ const evp = (x, placement) => esc(JSON.stringify({ conference: x.id, placement }));
+ box.innerHTML = `
With ${esc(st.host)}
학회와 함께 여는 무대 ${esc(st.note)}
+
${st.items.map((x) => `
+ ${x.year} ${esc(x.name)} ${esc(x.en)} ${esc(x.about)} ${esc(x.when)} · ${esc(x.place)} 행사 사이트 `;
+ const hl = $("#academy");
+ if (hl) {
+ const years = (re) => st.items.filter((x) => re.test(x.id)).map((x) => x.year).sort().join("·");
+ hl.innerHTML = `
With ${esc(st.host)} 비즈니스 실험 심포지엄 ${years(/^kbes/)} · 인과추론 여름 워크숍 ${years(/^kswci/)} `;
+ }
+ }
+
function renderEvents() {
const list = [...state.events].sort((a, b) => (b.upcoming ? 1 : 0) - (a.upcoming ? 1 : 0) || b.order - a.order);
const max = Math.max(...list.map((e) => e.participants || 0)) || 1;
@@ -1003,6 +1088,67 @@
const mark = $(".banner-mark");
if (mark && mark.complete && mark.naturalWidth) c.drawImage(mark, W - 300, 70, 210, 210);
}
+ function drawMedal(c, cx, cy, r, m, n) {
+ const g = c.createLinearGradient(cx - r, cy - r, cx + r, cy + r);
+ g.addColorStop(0, m.c[0]); g.addColorStop(1, m.c[1]);
+ if (m.min) {
+ const k = r / 26, top = cy - 56 * k, x = (v) => cx + (v - 32) * k, y = (v) => top + v * k;
+ c.fillStyle = "#2A2E7A"; c.beginPath(); c.moveTo(x(15), y(0)); c.lineTo(x(30), y(0)); c.lineTo(x(38), y(32)); c.lineTo(x(23), y(32)); c.fill();
+ c.fillStyle = "#A9A4F5"; c.beginPath(); c.moveTo(x(49), y(0)); c.lineTo(x(34), y(0)); c.lineTo(x(26), y(32)); c.lineTo(x(41), y(32)); c.fill();
+ }
+ c.fillStyle = g; c.beginPath(); c.arc(cx, cy, r, 0, Math.PI * 2); c.fill();
+ c.strokeStyle = "rgba(255,255,255,.6)"; c.lineWidth = r * 0.06; c.beginPath(); c.arc(cx, cy, r * 0.79, 0, Math.PI * 2); c.stroke();
+ c.fillStyle = "rgba(255,255,255,.28)"; c.beginPath(); c.ellipse(cx - r * 0.35, cy - r * 0.45, r * 0.35, r * 0.19, -0.5, 0, Math.PI * 2); c.fill();
+ if (!m.min) return;
+ c.fillStyle = m.ink; c.textAlign = "center";
+ c.font = `800 ${Math.round(r * 0.72)}px "Pretendard Variable", Pretendard, sans-serif`; c.fillText(String(n), cx, cy + r * 0.2);
+ c.font = `700 ${Math.round(r * 0.28)}px "Pretendard Variable", Pretendard, sans-serif`; c.fillText("기수", cx, cy + r * 0.6);
+ c.textAlign = "left";
+ }
+ function drawMedalCard(canvas, p) {
+ const W = 1200, H = 630, c = canvas.getContext("2d"), t = tierOf(p), sp = specialsOf(p), info = builderInfo(p.name);
+ canvas.width = W; canvas.height = H;
+ const g = c.createLinearGradient(0, 0, W, H);
+ g.addColorStop(0, "#1C1F57"); g.addColorStop(0.55, "#333689"); g.addColorStop(1, "#6E68BC");
+ c.fillStyle = g; c.fillRect(0, 0, W, H);
+ const glow = c.createRadialGradient(930, 300, 0, 930, 300, 360);
+ glow.addColorStop(0, "rgba(255,255,255,.22)"); glow.addColorStop(1, "rgba(255,255,255,0)");
+ c.fillStyle = glow; c.fillRect(0, 0, W, H);
+ const font = (w, px) => `${w} ${px}px "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif`;
+ c.fillStyle = "rgba(255,255,255,.82)"; c.font = font(600, 26); c.fillText("Causal Inference Hub Builder · 가짜연구소 인과추론팀", 80, 104);
+ c.fillStyle = "#FFD54A"; c.font = font(800, 34); c.fillText(t.name, 80, 186);
+ c.fillStyle = "#fff"; c.font = font(800, 96); c.fillText(p.name, 80, 292);
+ c.fillStyle = "rgba(255,255,255,.88)"; c.font = font(600, 30);
+ c.fillText(`${tenure(p)}`, 80, 352);
+ c.fillText(`프로젝트 ${p.projects}개 · 함께한 러너 ${fmt(p.runners)}명`, 80, 398);
+ sp.forEach((m, i) => {
+ const x = 80 + i * 300, y = 470;
+ drawMedal(c, x + 22, y, 22, m);
+ c.fillStyle = m.ink; c.font = font(800, 15); c.textAlign = "center"; c.fillText(m.id === "mentor" ? "20+" : "↑", x + 22, y + 6); c.textAlign = "left";
+ c.fillStyle = "#fff"; c.font = font(700, 24); c.fillText(m.name, x + 56, y + 9);
+ });
+ c.fillStyle = "rgba(255,255,255,.7)"; c.font = font(500, 22);
+ c.fillText(`causalinferencelab.github.io/builders/${info.slug || ""}`, 80, H - 56);
+ drawMedal(c, 930, 330, 150, t, p.cohorts.length);
+ }
+ async function openMedalCard(name) {
+ const p = (state.people || []).find((x) => x.name === name);
+ if (!p) return;
+ const info = builderInfo(name);
+ track("medal_card_open", { builder: info.slug || name, tier: tierOf(p).id });
+ $("#station-body").innerHTML = `
+
${icons.close}
+
+
‹ ${esc(p.name)} 이력으로
+
${esc(p.name)} · ${esc(tierOf(p).name)} 메달 카드
+
+
링크드인이나 블로그, 발표 자료에 올려 보세요. Builder 페이지 링크를 함께 붙이면 이력이 바로 열립니다.
+
${navigator.canShare ? "이미지 저장·공유" : "이미지 저장"} ${info.slug ? `Builder 페이지 링크 복사 ` : ""}
+
`;
+ showDialog();
+ try { if (document.fonts) await document.fonts.load('800 96px "Pretendard Variable"'); } catch (e) { /* draw with fallback fonts */ }
+ drawMedalCard($("#station-body .card-canvas"), p);
+ }
async function openCard(levelId) {
const lv = state.levels.find((l) => l.id === levelId);
if (!lv || !levelDone(levelId)) return;
@@ -1027,19 +1173,20 @@
function saveCard(levelId) {
const canvas = $("#station-body .card-canvas");
if (!canvas) return;
- const name = `causal-inference-hub-${levelId}.png`;
+ const medal = levelId.startsWith("medal:"), content = medal ? "medal_card" : "finish_card";
+ const name = medal ? `causal-inference-hub-builder-${levelId.slice(6)}.png` : `causal-inference-hub-${levelId}.png`;
canvas.toBlob(async (blob) => {
if (!blob) return;
const file = typeof File === "function" ? new File([blob], name, { type: "image/png" }) : null;
/* phones: hand the image to the share sheet; elsewhere download it */
if (file && navigator.canShare && navigator.canShare({ files: [file] })) {
- try { await navigator.share({ files: [file], title: "Causal Inference Hub 완주 카드" }); track("share", { content: "finish_card", method: "share_sheet" }); return; } catch (e) { if (e && e.name === "AbortError") return; }
+ try { await navigator.share({ files: [file], title: medal ? "Causal Inference Hub Builder 메달" : "Causal Inference Hub 완주 카드" }); track("share", { content, method: "share_sheet" }); return; } catch (e) { if (e && e.name === "AbortError") return; }
}
const a = document.createElement("a");
a.download = name; a.href = URL.createObjectURL(blob);
document.body.appendChild(a); a.click(); a.remove();
setTimeout(() => URL.revokeObjectURL(a.href), 4000);
- track("share", { content: "finish_card", method: "download" });
+ track("share", { content, method: "download" });
}, "image/png");
}
@@ -1107,6 +1254,20 @@
$("#station-body .station-close").focus();
}
+ /* tell people the map continues to the right when it is wider than the screen */
+ function watchMapScroll() {
+ const box = $("#map-scroll"), hint = $("#map-hint");
+ if (!box) return;
+ const update = () => {
+ const more = box.scrollWidth - box.clientWidth > 4;
+ hint.hidden = !more;
+ box.classList.toggle("more", more && box.scrollLeft + box.clientWidth < box.scrollWidth - 4);
+ };
+ box.addEventListener("scroll", update, { passive: true });
+ window.addEventListener("resize", update);
+ state.mapScroll = update;
+ update();
+ }
function closeStation() { const d = dialog(); if (d.open) d.close(); }
/* Deep links: #station=
opens that entry, so other team sites (the web book, for one) can link straight to it. */
@@ -1161,6 +1322,8 @@
if (card) { openCard(card.dataset.card); return; }
const nl = e.target.closest("[data-next-level]");
if (nl) { closeStation(); gotoLevel(nl.dataset.nextLevel); return; }
+ const mc = e.target.closest("[data-medal-card]");
+ if (mc) { openMedalCard(mc.dataset.medalCard); return; }
const dl = e.target.closest("[data-card-save]");
if (dl) { saveCard(dl.dataset.cardSave); return; }
const ride = e.target.closest("[data-ride]");
@@ -1239,7 +1402,7 @@
$("#shelf").addEventListener("scroll", shelfSpy, { passive: true });
renderContrib();
renderLegend(); renderMap(); wireTabs();
- renderFeatured(); renderPartner(); renderEvents(); renderArticles(); renderDaily();
+ renderFeatured(); renderPartner(); renderEvents(); renderStages(); renderArticles(); renderDaily(); watchMapScroll();
if (location.hash === "#contrib") { selectTab("tab-contrib"); requestAnimationFrame(() => $("#curriculum").scrollIntoView()); }
openFromHash();
if (location.hash === "#start" || new URLSearchParams(location.search).has("quiz")) openQuiz();
diff --git a/assets/og/builders/bang-taemo.jpg b/assets/og/builders/bang-taemo.jpg
index f9a0b53..0107f1f 100644
Binary files a/assets/og/builders/bang-taemo.jpg and b/assets/og/builders/bang-taemo.jpg differ
diff --git a/assets/og/builders/cho-haechang.jpg b/assets/og/builders/cho-haechang.jpg
index cc57a76..8aea1d5 100644
Binary files a/assets/og/builders/cho-haechang.jpg and b/assets/og/builders/cho-haechang.jpg differ
diff --git a/assets/og/builders/choi-seyoung.jpg b/assets/og/builders/choi-seyoung.jpg
index ee69b1c..f69df2f 100644
Binary files a/assets/og/builders/choi-seyoung.jpg and b/assets/og/builders/choi-seyoung.jpg differ
diff --git a/assets/og/builders/kim-sangwon.jpg b/assets/og/builders/kim-sangwon.jpg
index a45c67d..feb2b2c 100644
Binary files a/assets/og/builders/kim-sangwon.jpg and b/assets/og/builders/kim-sangwon.jpg differ
diff --git a/assets/og/builders/kim-seongsu.jpg b/assets/og/builders/kim-seongsu.jpg
index 48d296b..9a9414e 100644
Binary files a/assets/og/builders/kim-seongsu.jpg and b/assets/og/builders/kim-seongsu.jpg differ
diff --git a/assets/og/builders/kwon-myeongseok.jpg b/assets/og/builders/kwon-myeongseok.jpg
index e7a79a0..935ef1d 100644
Binary files a/assets/og/builders/kwon-myeongseok.jpg and b/assets/og/builders/kwon-myeongseok.jpg differ
diff --git a/assets/og/builders/kwon-namtaek.jpg b/assets/og/builders/kwon-namtaek.jpg
index a043fe8..11e48b0 100644
Binary files a/assets/og/builders/kwon-namtaek.jpg and b/assets/og/builders/kwon-namtaek.jpg differ
diff --git a/assets/og/builders/lee-dongwook.jpg b/assets/og/builders/lee-dongwook.jpg
index 768c1b3..46b6b50 100644
Binary files a/assets/og/builders/lee-dongwook.jpg and b/assets/og/builders/lee-dongwook.jpg differ
diff --git a/assets/og/builders/park-isak.jpg b/assets/og/builders/park-isak.jpg
index a183f91..42a7ea1 100644
Binary files a/assets/og/builders/park-isak.jpg and b/assets/og/builders/park-isak.jpg differ
diff --git a/assets/og/builders/park-sangho.jpg b/assets/og/builders/park-sangho.jpg
index 2d8aa3b..b4ce9ba 100644
Binary files a/assets/og/builders/park-sangho.jpg and b/assets/og/builders/park-sangho.jpg differ
diff --git a/assets/og/builders/shin-jinsoo.jpg b/assets/og/builders/shin-jinsoo.jpg
index 1cb1a2c..3b877aa 100644
Binary files a/assets/og/builders/shin-jinsoo.jpg and b/assets/og/builders/shin-jinsoo.jpg differ
diff --git a/data/stages.json b/data/stages.json
new file mode 100644
index 0000000..56080c2
--- /dev/null
+++ b/data/stages.json
@@ -0,0 +1,36 @@
+{
+ "host": "한국경영정보학회",
+ "note": "한국경영정보학회가 주최하는 학회 행사에 가짜연구소 인과추론팀이 협력하고 있습니다. 오래 함께한 Builder에게는 이런 학회와 Data Forum에서 발표할 기회가 열립니다.",
+ "items": [
+ {
+ "id": "kbes2026",
+ "year": 2026,
+ "name": "한국 비즈니스 실험 심포지엄 2026",
+ "en": "Korea Business Experimentation Symposium 2026",
+ "when": "2026.07.11",
+ "place": "한국과학기술회관",
+ "about": "생성형 AI 시대의 데이터 사이언스와 실험",
+ "url": "https://sites.google.com/view/business-experimentation2026/home"
+ },
+ {
+ "id": "kbes2025",
+ "year": 2025,
+ "name": "한국 비즈니스 실험 심포지엄 2025",
+ "en": "Korea Business Experimentation Symposium 2025",
+ "when": "2025.07.12",
+ "place": "고려대학교 LG-POSCO 경영관",
+ "about": "A/B 테스트와 현장 실험을 다루는 국내 첫 산학 심포지엄",
+ "url": "https://sites.google.com/view/business-experimentation2025/home"
+ },
+ {
+ "id": "kswci2024",
+ "year": 2024,
+ "name": "인과추론 여름 워크숍 2024",
+ "en": "Korea Summer Workshop on Causal Inference 2024",
+ "when": "2024.06.13 – 06.28",
+ "place": "온라인",
+ "about": "실무를 위한 인과추론과 의사결정을 위한 데이터과학",
+ "url": "https://sites.google.com/view/causal-inference2024/home"
+ }
+ ]
+}
diff --git a/index.html b/index.html
index 5574ced..629b4c3 100644
--- a/index.html
+++ b/index.html
@@ -55,6 +55,7 @@ Causal Inference Hub
With 한빛미디어 팀이 옮긴 책과 그 내용을 실무로 잇는 강의입니다. 둘 다 커리큘럼 L2에 들어 있습니다.
+