springrunner.github.io/index.html at main · springrunner/springrunner.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
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SpringRunner - 스프링 기반 애플리케이션 개발 트레이닝</title>
    <meta name="description" content="스프링러너는 스프링 기반 애플리케이션을 개발하는데 필요한 지식과 경험을 쌓을 수 있도록 돕는 트레이닝 팀입니다.">
    <meta name="keywords" content="SpringRunner, 스프링러너, 교육, 트레이닝, 워크샵, 강의">
    <meta name="author" content="SpringRunner">

    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://springrunner.dev/">
    <meta property="og:title" content="SpringRunner - 스프링 기반 애플리케이션 개발 트레이닝 팀">
    <meta property="og:description" content="스프링러너는 스프링 기반 애플리케이션을 개발하는데 필요한 지식과 경험을 쌓을 수 있도록 돕는 트레이닝 팀입니다.">
    <meta property="og:image" content="https://springrunner.dev/springrunner.webp">

    <!-- Twitter -->
    <meta property="twitter:card" content="summary_large_image">
    <meta property="twitter:url" content="https://springrunner.dev/">
    <meta property="twitter:title" content="SpringRunner - 스프링 기반 애플리케이션 개발 트레이닝 팀">
    <meta property="twitter:description" content="스프링러너는 스프링 기반 애플리케이션을 개발하는데 필요한 지식과 경험을 쌓을 수 있도록 돕는 트레이닝 팀입니다.">
    <meta property="twitter:image" content="https://springrunner.dev/springrunner.webp">

    <link rel="icon" type="image/x-icon" href="/favicon.ico">
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100">
    <div class="flex flex-col lg:flex-row min-h-screen">
        <!-- Left Sidebar -->
        <aside class="bg-slate-800 text-white lg:w-1/3 p-8">
            <!-- Profile Image -->
            <div class="flex justify-center mb-6">
                <div class="w-32 h-32 rounded-full bg-white overflow-hidden">
                    <img src="springrunner.webp" alt="SpringRunner Logo" class="w-full h-full object-cover">
                </div>
            </div>

            <!-- Name -->
            <div class="text-center mb-8">
                <h1 class="text-3xl font-bold mb-4">스프링러너</h1>
                <p class="text-sm uppercase tracking-wider text-gray-400">Spring Training Team</p>
            </div>

            <div class="text-center mb-8">
                <div class="flex items-center justify-center mb-4">
                    <div class="h-px bg-gray-600 w-16"></div>
                </div>
            </div>

            <!-- Links Section -->
            <div class="mb-8">
                <div class="flex justify-center items-center gap-6">
                    <!-- GitHub -->
                    <a href="https://github.com/springrunner" target="_blank" rel="noopener noreferrer" class="text-white hover:text-gray-300 transition-colors">
                        <svg class="w-10 h-10" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
                        </svg>
                    </a>

                    <!-- LinkedIn -->
                    <a href="https://www.linkedin.com/company/springrunner" target="_blank" rel="noopener noreferrer" class="text-white hover:text-gray-300 transition-colors">
                        <svg class="w-10 h-10" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
                        </svg>
                    </a>

                    <!-- Facebook -->
                    <a href="https://www.facebook.com/springrunner.kr" target="_blank" rel="noopener noreferrer" class="text-white hover:text-gray-300 transition-colors">
                        <svg class="w-10 h-10" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
                        </svg>
                    </a>

                    <!-- YouTube -->
                    <a href="https://www.youtube.com/channel/UCmI9C7nDP_rrd0lyCdI7qbA" target="_blank" rel="noopener noreferrer" class="text-white hover:text-gray-300 transition-colors">
                        <svg class="w-10 h-10" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/>
                        </svg>
                    </a>

                    <!-- Email -->
                    <a href="mailto:springrunner.kr@gmail.com" class="text-white hover:text-gray-300 transition-colors">
                        <svg class="w-10 h-10" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path d="M0 3v18h24v-18h-24zm6.623 7.929l-4.623 5.712v-9.458l4.623 3.746zm-4.141-5.929h19.035l-9.517 7.713-9.518-7.713zm5.694 7.188l3.824 3.099 3.83-3.104 5.612 6.817h-18.779l5.513-6.812zm9.208-1.264l4.616-3.741v9.348l-4.616-5.607z"/>
                        </svg>
                    </a>
                </div>
            </div>
        </aside>

        <!-- Right Main Content -->
        <main class="bg-white lg:w-2/3 p-8 lg:p-12">
            <!-- About Me Section -->
            <section class="mb-10">
                <p class="text-gray-700 leading-relaxed mb-4">
                    <strong>스프링러너</strong>는 스프링 기반 애플리케이션을 개발하는데 필요한 지식과 경험을 쌓을 수 있도록 돕는 트레이닝 팀입니다.
                </p>
                <p class="text-gray-700 leading-relaxed mb-4">
                    스프링 기반 애플리케이션을 개발하기 위해서는 생각보다 많은 학습과 노력이 필요합니다. 서적과 온라인 교육 등을 통해 스프링의 기술적인 측면을 학습할 수 있습니다.
                    하지만 이렇게 학습을 통해 쌓은 지식만으로 애플리케이션을 개발하려고 하면 막막함을 느끼게됩니다. 스프링이 제공하는 기능 사용법은 배웠지만, 스프링 기반 애플리케이션 개발 경험을 가지지 못했기 때문입니다.
                </p>
                <p class="text-gray-700 leading-relaxed mb-4">
                    참가자가 스프링 프레임워크(Spring Framework), 스프링 부트(Spring Boot) 등 스프링 생태계에서 스프링 작동원리와 사용법을 배우고 거기서 더 나아가 실무에 적용 가능한
                    <strong>스프링 기반 애플리케이션 프로그래밍을 익힐 수 있도록</strong> 스프링러너가 도와드립니다.
                </p>
                <div class="bg-gray-50 border-l-4 border-slate-800 p-4 mb-4">
                    <p class="text-gray-700 leading-relaxed italic">
                        가이드 러너(Guide Runner)란, 스포츠 경기에서 선수들이 안전하게 경기를 끝낼 수 있도록 함께 뛰는 도우미를 뜻합니다.
                    </p>
                    <br/>
                    <p class="text-gray-700 leading-relaxed italic">
                        스프링러너는 트레이너로서 탄탄히 스프링 관련 지식을 전달하는 것을 넘어 참가자 곁에서 함께 달리며 개발자의 길을 함께 달리는 가이드 러너입니다.
                    </p>
                </div>
                <p class="text-gray-700 leading-relaxed">
                    <strong>스프링러너(SpringRunner)</strong>는 스프링(<code class="bg-gray-100 px-1 py-0.5 rounded">Spring</code>) + 가이드 러너(<code class="bg-gray-100 px-1 py-0.5 rounded">Guide Runner</code>)를 합해 만들어진 이름입니다.
                </p>
            </section>

            <!-- Training Section -->
            <section class="mb-10">
                <h2 class="text-2xl font-bold mb-6">훈련 프로그램</h2>

                <div class="mb-6 opacity-60">
                    <h3 class="text-lg text-gray-500">
                        스프링 핵심 프로그래밍(Learn Essence of Spring Workshop)
                        <span class="ml-2 text-sm">(개정 중)</span>
                    </h3>
                    <p class="text-sm text-gray-500 mb-3">May 2020</p>
                    <ul class="list-disc list-inside space-y-1 text-gray-700 mb-3">
                        <li>제어의 역전(IoC)과 의존관계 주입(DI), 스프링 컨테이너와 빈 관리의 핵심 개념을 학습합니다.</li>
                        <li>관점지향 프로그래밍(AOP)의 원리와 스프링 AOP 모듈 활용 방법을 익힙니다.</li>
                        <li>이식 가능한 서비스 추상화(PSA)를 통해 기술 독립적인 애플리케이션 설계 방법을 다룹니다.</li>
                        <li>소프트웨어 복잡성을 이해하고, 설계 원칙과 디자인 패턴을 적용하여 변경에 유연한 코드를 작성합니다.</li>
                        <li>순수 자바 애플리케이션에 스프링을 도입하고 점진적 리팩토링을 통해 코드를 개선하는 경험을 쌓습니다.</li>
                    </ul>
                    <p class="text-sm text-amber-700 italic">더 나은 내용으로 개정 작업 중입니다. 곧 다시 만나요!</p>
                </div>

                <div class="mb-6">
                    <h3 class="text-lg font-bold">
                        <a href="https://edu.nextstep.camp/c/ygVWPEgo" target="_blank" rel="noopener noreferrer" class="text-gray-900 hover:text-blue-600 transition-colors">
                            스프링 웹 마스터하기(Mastering Spring Web 101 Workshop)
                        </a>
                    </h3>
                    <p class="text-sm text-gray-500 mb-3">November 2019</p>
                    <ul class="list-disc list-inside space-y-1 text-gray-700">
                        <li>Spring MVC와 Spring Boot로 웹 애플리케이션 서버 사이드를 직접 개발하며 실무 경험을 쌓습니다.</li>
                        <li>HTTP 요청 연결, 데이터 바인딩, 응답 및 예외 처리 등 Spring MVC의 핵심 기능을 학습합니다.</li>
                        <li>인증과 인가, 국제화, 파일 처리 등 엔터프라이즈 환경의 복잡한 요구 사항을 다룹니다.</li>
                        <li>변화하는 요구 사항에 유연하게 대응할 수 있는 소프트웨어 설계 역량과 아키텍처 구조를 익힙니다.</li>
                    </ul>
                </div>
            </section>

            <!-- Lectures Section -->
            <section class="mb-10">
                <h2 class="text-2xl font-bold mb-6">강의 프로그램</h2>

                <div class="mb-6">
                    <h3 class="text-lg font-bold">
                        <a href="https://www.inflearn.com/course/확장성있는-시스템-설계하기" target="_blank" rel="noopener noreferrer" class="text-gray-900 hover:text-blue-600 transition-colors">
                            확장성 있는 시스템 설계하기
                        </a>
                    </h3>
                    <p class="text-sm text-gray-500">February 2025</p>
                    <ul class="list-disc list-inside text-gray-700">
                        <li>소규모에서 대규모 서비스로 성장하기 위한 확장성 있는 시스템 설계의 기본 원리를 익힙니다.</li>
                        <li>가용성, 성능, 확장성을 고려한 단계별 설계 전략과 실천 방안을 학습합니다.</li>
                        <li>플랫폼, 서버, 클라이언트 엔지니어링의 역할과 협업 방식을 알아봅니다.</li>
                    </ul>
                </div>

                <div class="mb-6 opacity-60">
                    <h3 class="text-lg text-gray-500">
                        모듈형 모놀리스란 무엇인가
                        <span class="ml-2 text-sm">(개정 중)</span>
                    </h3>
                    <p class="text-sm text-gray-500 mb-3">September 2024</p>
                    <ul class="list-disc list-inside text-gray-700 mb-3">
                        <li>단일 코드베이스를 유지하면서도 명확한 책임과 경계를 가진 자율적인 모듈로 시스템을 구성하는 방법을 익힙니다.</li>
                        <li>모듈을 비즈니스 기능 단위로 수직 분할하고, 각 모듈 내부를 계층화하여 복잡성을 관리하는 전략을 학습합니다.</li>
                        <li>모듈화를 통해 유지 보수성과 유연성을 확보하면서도 시스템 복잡성을 효과적으로 관리하는 실천법을 알아봅니다.</li>
                    </ul>
                    <p class="text-sm text-amber-700 italic">더 나은 내용으로 개정 작업 중입니다. 곧 다시 만나요!</p>
                </div>

                <div class="mb-6">
                    <h3 class="text-lg font-bold">
                        <a href="https://www.inflearn.com/course/코틀린-멀티플랫폼" target="_blank" rel="noopener noreferrer" class="text-gray-900 hover:text-blue-600 transition-colors">
                            코틀린 멀티플랫폼, 미지와의 조우
                        </a>
                    </h3>
                    <p class="text-sm text-gray-500 mb-2">September 2022</p>
                    <ul class="list-disc list-inside text-gray-700">
                        <li>Kotlin/JS 기반 리액트와 Kotlin/JVM 기반 스프링을 활용하여 단일 코드베이스로 풀스택 웹 애플리케이션을 개발합니다.</li>
                        <li>클라이언트와 서버 간 공유 로직을 작성하고, 도메인 모델과 저장소 로직을 멀티플랫폼으로 구현합니다.</li>
                        <li>할 일 관리 애플리케이션을 실습하며 클린 아키텍처 기반의 웹 애플리케이션 구조를 경험합니다.</li>
                        <li>코틀린 멀티플랫폼의 실용성과 한계를 파악하고, 실무 적용 가능성을 탐구합니다.</li>
                    </ul>
                </div>
            </section>

            <!-- Footer -->
            <footer class="mt-16 pt-8 border-t border-gray-200">
                <p class="text-center text-sm text-gray-500">© 2018 SpringRunner. All rights reserved.</p>
            </footer>
        </main>
    </div>
</body>
</html>