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
219
220
221
222
223
224
225
<!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년부터 함께 만든 오픈소스와 자료를 L0–L4 커리큘럼으로 엮었습니다.">
<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">커리큘럼</a>
      <a href="#contrib">Builder</a>
      <a href="#events">행사</a>
      <a href="#posts">연재</a>
      <a href="#join">참여하기</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년부터 함께 만든 오픈소스와 자료를 L0–L4 커리큘럼으로 엮었습니다.</p>
          <div class="banner-cta">
            <a class="pill solid" href="https://causalinferencelab.github.io/Causal-Inference-with-Python/">웹북으로 시작하기</a>
            <a class="pill" href="#curriculum">커리큘럼 보기</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>
      <div class="hero-grid">
        <ul class="growth" id="growth" aria-label="팀의 성장 지표"></ul>
      </div>
      <a class="next-event" id="next-event" href="#events" hidden></a>
    </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">L0부터 L4까지, 팀이 만든 오픈소스를 순서대로 엮었습니다. L0–L2는 무료 자료만으로 끝까지 갈 수 있습니다.</p>
      </div>
      <div class="goal-row">
        <span class="goal-q">무엇을 하고 싶나요?</span>
        <div class="route-chips" role="radiogroup" aria-label="목표 고르기" id="route-chips"></div>
      </div>
      <p class="route-note" id="route-note" aria-live="polite"></p>
      <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>
      <p class="tab-note" id="tab-note">단계는 배우는 순서이고, 트랙은 주제입니다. 같은 주제를 L0부터 L4까지 이어 보려면 <button type="button" class="link-btn" data-tab-go="tab-map">트랙 지도</button>를 여세요.</p>

      <div id="panel-map" role="tabpanel" aria-labelledby="tab-map" hidden>
        <div class="map-card">
          <div class="map-how" aria-label="트랙 지도 읽는 법">
            <p class="mh-t">트랙 지도 읽는 법</p>
            <ul>
              <li><svg width="30" height="10" aria-hidden="true"><path d="M2 5H28" stroke="var(--l-main)" stroke-width="5" stroke-linecap="round"/></svg><span><b>노선</b>은 주제 트랙입니다. 색마다 하나씩, 6개입니다.</span></li>
              <li><svg width="22" height="22" aria-hidden="true"><circle cx="11" cy="11" r="7" fill="var(--surface)" stroke="var(--l-main)" stroke-width="3.5"/></svg><span><b>역</b>은 자료입니다. 누르면 설명과 링크가 열립니다.</span></li>
              <li><svg width="16" height="26" aria-hidden="true"><rect x="2" y="2" width="12" height="22" rx="6" fill="var(--surface)" stroke="var(--ink)" stroke-width="3"/></svg><span><b>환승역</b>은 여러 트랙이 만나는 자료입니다.</span></li>
              <li><svg width="30" height="10" aria-hidden="true"><path d="M2 5H28" stroke="var(--l-main)" stroke-width="2.5" stroke-dasharray="5 5" stroke-linecap="round"/></svg><span><b>점선</b>은 책과 강의(유료)입니다.</span></li>
            </ul>
            <p class="mh-tip">아래 트랙 이름을 누르면 그 노선만 남겨서 볼 수 있습니다.</p>
          </div>
          <p class="map-hint" id="map-hint" hidden>지도가 화면보다 넓습니다. 옆으로 밀면 L3·L4까지 보입니다.</p>
          <div class="map-scroll" id="map-scroll">
            <svg id="metro" role="group" aria-labelledby="metro-title"><title id="metro-title">인과추론 트랙 지도: L0부터 L4까지 6개 트랙</title></svg>
          </div>
          <div class="vlines" id="vlines"></div>
          <ul class="line-legend" id="line-legend"></ul>
        </div>
      </div>

      <div id="panel-course" role="tabpanel" aria-labelledby="tab-course">
        <div class="progress" id="progress"></div>
        <div class="path-wrap">
          <p class="path-k"><span>배우기 L0–L2</span><span>만들기 L3–L4</span></p>
          <ol class="path" id="path" aria-label="단계 고르기"></ol>
        </div>
        <div class="chapters" id="chapters" hidden></div>
        <div class="shelf-wrap" id="shelf-wrap">
          <ol class="shelf" id="shelf" aria-label="단계별 자료"></ol>
        </div>
        <p class="shelf-foot" id="shelf-foot"></p>
      </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="medal-fold">
        <summary><span>메달과 발표 무대</span><small>기수가 쌓이면 메달이 바뀌고, 학회 발표로 이어집니다</small></summary>
        <section class="medal-ladder" id="medal-ladder" aria-label="Builder 메달"></section>
      </details>
      <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="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="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>