CausalInferenceLab.github.io/index.html at main · CausalInferenceLab/CausalInferenceLab.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' https://www.googletagmanager.com; style-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net https://fonts.googleapis.com; font-src 'self' data: https://cdn.jsdelivr.net https://fonts.gstatic.com; img-src 'self' data: blob: https://github.com https://avatars.githubusercontent.com https://*.google-analytics.com https://*.googletagmanager.com; connect-src 'self' https://api.github.com https://*.google-analytics.com https://*.analytics.google.com https://*.googletagmanager.com; object-src 'none'; base-uri 'self'; form-action 'self'">
<script src="assets/js/ga.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>Causal Inference Hub | 가짜연구소 인과추론팀</title>
<meta name="description" content="인과추론에서 AI 시대의 데이터 리터러시까지. 가짜연구소 인과추론팀이 2022년부터 함께 만든 오픈소스와 커리큘럼을 한곳에 모은 허브입니다.">
<meta property="og:title" content="Causal Inference Hub | 가짜연구소 인과추론팀">
<meta property="og:description" content="웹북, 영상, 데이터 에이전트, 강의 자료까지. 2022년부터 함께 만든 오픈소스와 자료를 Level 0–4 커리큘럼으로 엮었습니다.">
<meta property="og:image" content="https://causalinferencelab.github.io/assets/img/og-hub.png">
<meta property="og:type" content="website">
<meta name="twitter:card" content="summary_large_image">
<link rel="icon" href="assets/img/team-mark.png">
<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pretendard@1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css" integrity="sha384-/uC/GIvKJ/9RN6i1izHoBY9ubYo60OAsQRNQ3NRFiNsN+N/MVQJHD5OYcZz6wvwn" crossorigin="anonymous">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap">
<link rel="stylesheet" href="assets/css/hub.css">
</head>
<body>
<a class="skip" href="#main">본문으로 건너뛰기</a>

<header class="site-header">
  <div class="wrap header-row">
    <a class="brand" href="#top" aria-label="Causal Inference Hub 처음으로">
      <img class="brand-logo" src="assets/img/team-mark.png" alt="" width="34" height="34">
      <span class="brand-text"><span class="brand-name">Causal Inference Hub</span><span class="brand-sub">가짜연구소 인과추론팀</span></span>
    </a>
    <nav class="site-nav" aria-label="주요 메뉴">
      <a href="#curriculum" class="stn s-main">커리큘럼</a>
      <a href="#contrib" class="stn s-ml">Builder</a>
      <a href="#events" class="stn s-exp">행사</a>
      <a href="#posts" class="stn s-behavior">연재</a>
      <a href="#join" class="stn s-research">참여하기</a>
    </nav>
    <button type="button" class="pass-btn" data-passport aria-label="활동 여권 열기">여권 <b data-passport-count>0/9</b></button>
  </div>
</header>

<main id="main">
  <section class="hero" id="top" aria-labelledby="hero-title">
    <div class="wrap">
      <div class="banner">
        <div class="banner-main">
          <p class="banner-kicker"><span>Pseudo-Lab</span><span class="sep" aria-hidden="true"></span>인과추론팀 <b>Causal-Lab</b></p>
          <h1 id="hero-title">Causal Inference Hub</h1>
          <p class="banner-lede">인과추론에서 시작해 AI 시대의 데이터 리터러시까지. <br>2022년부터 함께 만든 오픈소스와 자료를 Level 0–4 커리큘럼으로 엮었습니다.</p>
          <div class="banner-cta">
            <a class="pill solid" href="https://www.youtube.com/@CausalStudio" target="_blank" rel="noopener" data-event="start_click" data-event-params='{"target":"youtube","placement":"hero"}'><svg class="yt" viewBox="0 0 24 24" width="18" height="18" aria-hidden="true"><rect x="1.5" y="4.5" width="21" height="15" rx="4.5" fill="#FF0033"/><path d="M10 8.8v6.4l5.4-3.2z" fill="#fff"/></svg>YouTube 영상으로 시작하기</a>
            <a class="pill" href="https://causalinferencelab.github.io/Causal-Inference-with-Python/" data-event="start_click" data-event-params='{"target":"webbook","placement":"hero"}'>웹북으로 시작하기</a>
            <a class="cta-text" href="?level" data-test-open="hero" data-event="start_click" data-event-params='{"target":"level_test","placement":"hero"}'>내 레벨 진단하기</a>
          </div>
          <div class="partner" aria-labelledby="partner-title">
            <p class="partner-k" id="partner-title"><b>With 한빛미디어 · 팀이 옮긴 책과 그 책으로 만든 강의</b><span>팀이 옮긴 책과 그 내용을 실무로 잇는 강의입니다. 둘 다 커리큘럼 L2에 들어 있습니다.</span></p>
            <ul class="partner-list" id="partner-list"></ul>
          </div>
          <p class="academy" id="academy"></p>
        </div>
        <div class="banner-side">
          <img class="banner-mark" src="assets/img/team-mark.png" alt="" width="132" height="132">
          <ul class="featured" id="featured" aria-label="대표 사이트"></ul>
        </div>
      </div>
      <a class="next-event" id="next-event" href="#events" data-event="click_event" data-event-params='{"action":"next_strip","placement":"hero"}' hidden></a>
      <div class="hero-grid">
        <ul class="growth" id="growth" aria-label="팀의 성장 지표"></ul>
      </div>
    </div>
  </section>

  <section class="band" id="curriculum" aria-labelledby="curriculum-title">
    <div class="wrap">
      <div class="section-head">
        <h2 id="curriculum-title">커리큘럼</h2>
        <p id="curriculum-sub">Level 0부터 4까지, 레벨마다 정해진 순서대로 보면 됩니다. Level 0–2는 무료 자료만으로 끝까지 갈 수 있습니다.</p>
      </div>
      <div class="lt-card" id="lt-card" aria-live="polite"></div>
      <div class="tabs-row">
        <div class="tabs big" role="tablist" aria-label="보기 방식">
          <button type="button" role="tab" id="tab-course" aria-controls="panel-course" aria-selected="true">레벨별 코스<span class="tab-n" id="n-course"></span></button>
          <button type="button" role="tab" id="tab-map" aria-controls="panel-map" aria-selected="false" tabindex="-1"><span class="tab-lines" aria-hidden="true"><i></i><i></i><i></i></span>주제별 노선도</button>
        </div>
        <div class="quest-hud" id="quest-hud"></div>
      </div>

      <div id="panel-course" role="tabpanel" aria-labelledby="tab-course">
        <div class="progress" id="progress"></div>
        <div class="lv-rail" id="lv-rail"></div>
        <div class="lv-panel" id="shelf"></div>
        <p class="shelf-foot" id="shelf-foot"></p>
      </div>

      <div id="panel-map" role="tabpanel" aria-labelledby="tab-map" hidden>
        <div class="map-card">
          <ul class="map-how" aria-label="트랙 지도 읽는 법">
            <li><svg width="26" height="10" aria-hidden="true"><path d="M2 5H24" stroke="var(--l-main)" stroke-width="5" stroke-linecap="round"/></svg><span><b>노선</b> 주제 트랙</span></li>
            <li><svg width="18" height="18" aria-hidden="true"><circle cx="9" cy="9" r="6" fill="var(--surface)" stroke="var(--l-main)" stroke-width="3"/></svg><span><b>역</b> 자료, 누르면 열림</span></li>
            <li><svg width="14" height="22" aria-hidden="true"><rect x="2" y="2" width="10" height="18" rx="5" fill="var(--surface)" stroke="var(--ink)" stroke-width="2.5"/></svg><span><b>환승역</b> 여러 트랙이 만나는 자료</span></li>
            <li><svg width="26" height="10" aria-hidden="true"><path d="M2 5H24" stroke="var(--l-main)" stroke-width="2.5" stroke-dasharray="5 5" stroke-linecap="round"/></svg><span><b>점선</b> 교재 (유료)</span></li>
            <li><svg width="18" height="18" aria-hidden="true"><circle cx="9" cy="9" r="6" fill="#FFC93C" stroke="var(--l-main)" stroke-width="3"/></svg><span><b>노란 역</b> 클리어한 퀘스트</span></li>
          </ul>
          <ul class="line-legend" id="line-legend"></ul>
          <p class="map-hint" id="map-hint" hidden>옆으로 밀면 Level 3·4까지 보입니다 →</p>
          <div class="map-scroll" id="map-scroll">
            <svg id="metro" role="group" aria-labelledby="metro-title"><title id="metro-title">인과추론 트랙 지도: Level 0부터 4까지 6개 트랙</title></svg>
          </div>
          <details class="vl-fold"><summary>노선별 목록으로 보기</summary><div class="vlines" id="vlines"></div></details>
        </div>
      </div>


    </div>
  </section>

  <section class="band" id="contrib" aria-labelledby="contrib-title">
    <div class="wrap">
      <div class="section-head">
        <h2 id="contrib-title">가장 많이 기여한 사람들</h2>
        <p id="contrib-sub"></p>
      </div>
      <ol class="top3" id="top3"></ol>
      <div class="crew-row">
        <div class="people-rail" id="people-rail" aria-label="함께한 Builder"></div>
        <div class="contrib-cta"><a class="btn" href="#join" data-event="click_join" data-event-params='{"target":"join_section","source":"builder_section"}'>다음 기수 Builder 되기</a></div>
      </div>
      <details class="fold" id="roster-fold">
        <summary><span>전체 Builder 이력</span><small>누가 어느 기수에 무엇을 열었는지</small></summary>
        <ul class="roster-legend" id="roster-legend"></ul>
        <div class="roster" id="roster"></div>
      </details>
    </div>
  </section>

  <section class="band" id="events" aria-labelledby="events-title">
    <div class="wrap">
      <div class="section-head">
        <h2 id="events-title">행사</h2>
        <p>현업과 학계가 만나는 Data Forum을 열고, 학회 행사에 협력합니다.</p>
      </div>
      <ol class="events" id="event-list"></ol>
      <section class="stage" id="stage" aria-labelledby="stage-title"></section>
    </div>
  </section>

  <section class="band" id="posts" aria-labelledby="posts-title">
    <div class="wrap">
      <div class="section-head">
        <h2 id="posts-title">연재</h2>
        <p>팀원이 쓰는 인과추론 이야기입니다. 이번 주 포스트는 월요일마다 바뀝니다.</p>
      </div>
      <div id="post-box"></div>
    </div>
  </section>


  <section class="band" id="join" aria-labelledby="join-title">
    <div class="wrap join">
      <div class="section-head">
        <h2 id="join-title">참여하기</h2>
        <p>러너로 시작해 기여를 쌓고, Builder로 다음 기수의 프로젝트를 엽니다.</p>
      </div>
      <ol class="loop" id="loop" aria-label="허브가 도는 방식"></ol>
      <ol class="steps">
        <li>
          <h3>러너로 참여</h3>
          <p>가짜연구소는 반기마다 기수를 모집합니다. 인과추론팀 프로젝트에 러너로 들어와 14주 동안 함께 공부하고 만듭니다.</p>
          <a class="btn" href="https://pseudo-lab.com/" target="_blank" rel="noopener">가짜연구소 프로젝트 보기</a>
        </li>
        <li>
          <h3>첫 기여 남기기</h3>
          <p>오탈자 하나, 예제 하나도 기여입니다. 진행 중인 레포의 이슈를 보고 PR을 보내 주세요.</p>
          <a class="btn" href="https://github.com/search?q=org%3ACausalInferenceLab+is%3Aissue+is%3Aopen&type=issues" target="_blank" rel="noopener">열린 이슈 보기</a>
        </li>
        <li>
          <h3>Builder로 프로젝트 열기</h3>
          <p>다음 기수에 직접 프로젝트를 열어 보세요. 레포는 템플릿으로 시작하고, 이 허브에는 데이터 파일 PR 한 번으로 올라갑니다.</p>
          <a class="btn" href="https://github.com/CausalInferenceLab/Project-template" target="_blank" rel="noopener">프로젝트 템플릿</a>
        </li>
      </ol>
      <p class="join-foot">질문은 <a href="https://discord.gg/HeHbFAvmSZ" target="_blank" rel="noopener">가짜연구소 디스코드</a>에 남겨 주세요.</p>
    </div>
  </section>
</main>

<footer class="site-footer">
  <div class="wrap footer-row">
    <div>
      <p class="footer-brand">가짜연구소 인과추론팀</p>
      <p id="footer-note">러너 수는 팀 프로젝트 기록에서, 스타와 기여자 수는 GitHub에서 집계합니다. 방문 통계는 Google Analytics로 이름 없이 집계합니다.</p>
    </div>
    <ul class="footer-links">
      <li><a href="https://github.com/CausalInferenceLab" target="_blank" rel="noopener">GitHub</a></li>
      <li><a href="https://pseudo-lab.com/" target="_blank" rel="noopener">가짜연구소</a></li>
      <li><a href="https://discord.gg/HeHbFAvmSZ" target="_blank" rel="noopener">Discord</a></li>
      <li><a href="builders/">Builder</a></li>
      <li><a href="game.html">상관일까, 인과일까?</a></li>
      <li><a href="lab.html">교란 실험실</a></li>
      <li><a href="https://github.com/CausalInferenceLab/CausalInferenceLab.github.io" target="_blank" rel="noopener">이 허브 고치기</a></li>
    </ul>
  </div>
</footer>

<dialog class="sheet" id="lt-sheet" aria-labelledby="lt-title">
  <div class="sh" id="lt-body"></div>
</dialog>

<dialog class="station" id="station-dialog" aria-labelledby="station-title">
  <div class="station-inner" id="station-body"></div>
</dialog>

<script src="assets/js/track.js" defer></script>
<script src="assets/js/passport.js" defer></script>
<script src="assets/js/hub.js" defer></script>
</body>
</html>