Skip to content

Commit 98f6443

Browse files
author
SpringRunner
committed
SpringRunner 랜딩 페이지 초기 구현
이력서 형식의 단일 페이지 랜딩 사이트를 구현했습니다. 주요 구현 내용: - HTML5 + Tailwind CSS CDN 기반 반응형 레이아웃 - 2-컬럼 구조 (사이드바 + 메인 컨텐츠) - 프로필 이미지, 이름, 소셜 링크 (GitHub, LinkedIn, Facebook, YouTube, Email) - About Me 섹션: 스프링러너 소개 및 가이드 러너 철학 - Training 섹션: Learn Essence of Spring, Mastering Spring Web 101 - Lectures 섹션: 확장성 있는 시스템 설계하기, 모듈형 모놀리스, 코틀린 멀티플랫폼 - 개정 중인 프로그램 상태 표시 (투명도 + 안내 메시지) - 각 프로그램별 상세 링크 (넥스트스텝, 인프런) - 카피라이트 푸터 파일 구성: - index.html: 메인 페이지 - springrunner.webp: 로고 이미지 - favicon.ico: 파비콘 - CNAME: 도메인 설정
0 parents  commit 98f6443

4 files changed

Lines changed: 195 additions & 0 deletions

File tree

‎CNAME‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
springrunner.dev

‎favicon.ico‎

15 KB
Binary file not shown.

‎index.html‎

Lines changed: 194 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,194 @@
1+
<!DOCTYPE html>
2+
<html lang="ko">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>SpringRunner</title>
7+
<link rel="icon" type="image/x-icon" href="/favicon.ico">
8+
<script src="https://cdn.tailwindcss.com"></script>
9+
</head>
10+
<body class="bg-gray-100">
11+
<div class="flex flex-col lg:flex-row min-h-screen">
12+
<!-- Left Sidebar -->
13+
<aside class="bg-slate-800 text-white lg:w-1/3 p-8">
14+
<!-- Profile Image -->
15+
<div class="flex justify-center mb-6">
16+
<div class="w-32 h-32 rounded-full bg-white overflow-hidden">
17+
<img src="springrunner.webp" alt="SpringRunner Logo" class="w-full h-full object-cover">
18+
</div>
19+
</div>
20+
21+
<!-- Name -->
22+
<div class="text-center mb-8">
23+
<h1 class="text-3xl font-bold mb-4">스프링러너</h1>
24+
<p class="text-sm uppercase tracking-wider text-gray-400">Spring Training Team</p>
25+
</div>
26+
27+
<div class="text-center mb-8">
28+
<div class="flex items-center justify-center mb-4">
29+
<div class="h-px bg-gray-600 w-16"></div>
30+
</div>
31+
</div>
32+
33+
<!-- Links Section -->
34+
<div class="mb-8">
35+
<div class="flex justify-center items-center gap-6">
36+
<!-- GitHub -->
37+
<a href="https://github.com/springrunner" target="_blank" rel="noopener noreferrer" class="text-white hover:text-gray-300 transition-colors">
38+
<svg class="w-10 h-10" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
39+
<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"/>
40+
</svg>
41+
</a>
42+
43+
<!-- LinkedIn -->
44+
<a href="https://www.linkedin.com/company/springrunner" target="_blank" rel="noopener noreferrer" class="text-white hover:text-gray-300 transition-colors">
45+
<svg class="w-10 h-10" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
46+
<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"/>
47+
</svg>
48+
</a>
49+
50+
<!-- Facebook -->
51+
<a href="https://www.facebook.com/springrunner.kr" target="_blank" rel="noopener noreferrer" class="text-white hover:text-gray-300 transition-colors">
52+
<svg class="w-10 h-10" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
53+
<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"/>
54+
</svg>
55+
</a>
56+
57+
<!-- YouTube -->
58+
<a href="https://www.youtube.com/channel/UCmI9C7nDP_rrd0lyCdI7qbA" target="_blank" rel="noopener noreferrer" class="text-white hover:text-gray-300 transition-colors">
59+
<svg class="w-10 h-10" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
60+
<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"/>
61+
</svg>
62+
</a>
63+
64+
<!-- Email -->
65+
<a href="mailto:springrunner.kr@gmail.com" class="text-white hover:text-gray-300 transition-colors">
66+
<svg class="w-10 h-10" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
67+
<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"/>
68+
</svg>
69+
</a>
70+
</div>
71+
</div>
72+
</aside>
73+
74+
<!-- Right Main Content -->
75+
<main class="bg-white lg:w-2/3 p-8 lg:p-12">
76+
<!-- About Me Section -->
77+
<section class="mb-10">
78+
<p class="text-gray-700 leading-relaxed mb-4">
79+
<strong>스프링러너</strong>는 스프링 기반 애플리케이션을 개발하는데 필요한 지식과 경험을 쌓을 수 있도록 돕는 트레이닝 팀입니다.
80+
</p>
81+
<p class="text-gray-700 leading-relaxed mb-4">
82+
스프링 기반 애플리케이션을 개발하기 위해서는 생각보다 많은 학습과 노력이 필요합니다. 서적과 온라인 교육 등을 통해 스프링의 기술적인 측면을 학습할 수 있습니다.
83+
하지만 이렇게 학습을 통해 쌓은 지식만으로 애플리케이션을 개발하려고 하면 막막함을 느끼게됩니다. 스프링이 제공하는 기능 사용법은 배웠지만, 스프링 기반 애플리케이션 개발 경험을 가지지 못했기 때문입니다.
84+
</p>
85+
<p class="text-gray-700 leading-relaxed mb-4">
86+
참가자가 스프링 프레임워크(Spring Framework), 스프링 부트(Spring Boot) 등 스프링 생태계에서 스프링 작동원리와 사용법을 배우고 거기서 더 나아가 실무에 적용 가능한
87+
<strong>스프링 기반 애플리케이션 프로그래밍을 익힐 수 있도록</strong> 스프링러너가 도와드립니다.
88+
</p>
89+
<div class="bg-gray-50 border-l-4 border-slate-800 p-4 mb-4">
90+
<p class="text-gray-700 leading-relaxed italic">
91+
가이드 러너(Guide Runner)란, 스포츠 경기에서 선수들이 안전하게 경기를 끝낼 수 있도록 함께 뛰는 도우미를 뜻합니다.
92+
</p>
93+
<br/>
94+
<p class="text-gray-700 leading-relaxed italic">
95+
스프링러너는 트레이너로서 탄탄히 스프링 관련 지식을 전달하는 것을 넘어 참가자 곁에서 함께 달리며 개발자의 길을 함께 달리는 가이드 러너입니다.
96+
</p>
97+
</div>
98+
<p class="text-gray-700 leading-relaxed">
99+
<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>)를 합해 만들어진 이름입니다.
100+
</p>
101+
</section>
102+
103+
<!-- Training Section -->
104+
<section class="mb-10">
105+
<h2 class="text-2xl font-bold mb-6">훈련 프로그램</h2>
106+
107+
<div class="mb-6 opacity-60">
108+
<h3 class="text-lg text-gray-500">
109+
스프링 핵심 프로그래밍(Learn Essence of Spring Workshop)
110+
<span class="ml-2 text-sm">(개정 중)</span>
111+
</h3>
112+
<p class="text-sm text-gray-500 mb-3">May 2020</p>
113+
<ul class="list-disc list-inside space-y-1 text-gray-700 mb-3">
114+
<li>제어의 역전(IoC)과 의존관계 주입(DI), 스프링 컨테이너와 빈 관리의 핵심 개념을 학습합니다.</li>
115+
<li>관점지향 프로그래밍(AOP)의 원리와 스프링 AOP 모듈 활용 방법을 익힙니다.</li>
116+
<li>이식 가능한 서비스 추상화(PSA)를 통해 기술 독립적인 애플리케이션 설계 방법을 다룹니다.</li>
117+
<li>소프트웨어 복잡성을 이해하고, 설계 원칙과 디자인 패턴을 적용하여 변경에 유연한 코드를 작성합니다.</li>
118+
<li>순수 자바 애플리케이션에 스프링을 도입하고 점진적 리팩토링을 통해 코드를 개선하는 경험을 쌓습니다.</li>
119+
</ul>
120+
<p class="text-sm text-amber-700 italic">더 나은 내용으로 개정 작업 중입니다. 곧 다시 만나요!</p>
121+
</div>
122+
123+
<div class="mb-6">
124+
<h3 class="text-lg font-bold">
125+
<a href="https://edu.nextstep.camp/c/ygVWPEgo" target="_blank" rel="noopener noreferrer" class="text-gray-900 hover:text-blue-600 transition-colors">
126+
스프링 웹 마스터하기(Mastering Spring Web 101 Workshop)
127+
</a>
128+
</h3>
129+
<p class="text-sm text-gray-500 mb-3">November 2019</p>
130+
<ul class="list-disc list-inside space-y-1 text-gray-700">
131+
<li>Spring MVC와 Spring Boot로 웹 애플리케이션 서버 사이드를 직접 개발하며 실무 경험을 쌓습니다.</li>
132+
<li>HTTP 요청 연결, 데이터 바인딩, 응답 및 예외 처리 등 Spring MVC의 핵심 기능을 학습합니다.</li>
133+
<li>인증과 인가, 국제화, 파일 처리 등 엔터프라이즈 환경의 복잡한 요구 사항을 다룹니다.</li>
134+
<li>변화하는 요구 사항에 유연하게 대응할 수 있는 소프트웨어 설계 역량과 아키텍처 구조를 익힙니다.</li>
135+
</ul>
136+
</div>
137+
</section>
138+
139+
<!-- Lectures Section -->
140+
<section class="mb-10">
141+
<h2 class="text-2xl font-bold mb-6">강의 프로그램</h2>
142+
143+
<div class="mb-6">
144+
<h3 class="text-lg font-bold">
145+
<a href="https://www.inflearn.com/course/확장성있는-시스템-설계하기" target="_blank" rel="noopener noreferrer" class="text-gray-900 hover:text-blue-600 transition-colors">
146+
확장성 있는 시스템 설계하기
147+
</a>
148+
</h3>
149+
<p class="text-sm text-gray-500">February 2025</p>
150+
<ul class="list-disc list-inside text-gray-700">
151+
<li>소규모에서 대규모 서비스로 성장하기 위한 확장성 있는 시스템 설계의 기본 원리를 익힙니다.</li>
152+
<li>가용성, 성능, 확장성을 고려한 단계별 설계 전략과 실천 방안을 학습합니다.</li>
153+
<li>플랫폼, 서버, 클라이언트 엔지니어링의 역할과 협업 방식을 알아봅니다.</li>
154+
</ul>
155+
</div>
156+
157+
<div class="mb-6 opacity-60">
158+
<h3 class="text-lg text-gray-500">
159+
모듈형 모놀리스란 무엇인가
160+
<span class="ml-2 text-sm">(개정 중)</span>
161+
</h3>
162+
<p class="text-sm text-gray-500 mb-3">September 2024</p>
163+
<ul class="list-disc list-inside text-gray-700 mb-3">
164+
<li>단일 코드베이스를 유지하면서도 명확한 책임과 경계를 가진 자율적인 모듈로 시스템을 구성하는 방법을 익힙니다.</li>
165+
<li>모듈을 비즈니스 기능 단위로 수직 분할하고, 각 모듈 내부를 계층화하여 복잡성을 관리하는 전략을 학습합니다.</li>
166+
<li>모듈화를 통해 유지 보수성과 유연성을 확보하면서도 시스템 복잡성을 효과적으로 관리하는 실천법을 알아봅니다.</li>
167+
</ul>
168+
<p class="text-sm text-amber-700 italic">더 나은 내용으로 개정 작업 중입니다. 곧 다시 만나요!</p>
169+
</div>
170+
171+
<div class="mb-6">
172+
<h3 class="text-lg font-bold">
173+
<a href="https://www.inflearn.com/course/코틀린-멀티플랫폼" target="_blank" rel="noopener noreferrer" class="text-gray-900 hover:text-blue-600 transition-colors">
174+
코틀린 멀티플랫폼, 미지와의 조우
175+
</a>
176+
</h3>
177+
<p class="text-sm text-gray-500 mb-2">September 2022</p>
178+
<ul class="list-disc list-inside text-gray-700">
179+
<li>Kotlin/JS 기반 리액트와 Kotlin/JVM 기반 스프링을 활용하여 단일 코드베이스로 풀스택 웹 애플리케이션을 개발합니다.</li>
180+
<li>클라이언트와 서버 간 공유 로직을 작성하고, 도메인 모델과 저장소 로직을 멀티플랫폼으로 구현합니다.</li>
181+
<li>할 일 관리 애플리케이션을 실습하며 클린 아키텍처 기반의 웹 애플리케이션 구조를 경험합니다.</li>
182+
<li>코틀린 멀티플랫폼의 실용성과 한계를 파악하고, 실무 적용 가능성을 탐구합니다.</li>
183+
</ul>
184+
</div>
185+
</section>
186+
187+
<!-- Footer -->
188+
<footer class="mt-16 pt-8 border-t border-gray-200">
189+
<p class="text-center text-sm text-gray-500">© 2018 SpringRunner. All rights reserved.</p>
190+
</footer>
191+
</main>
192+
</div>
193+
</body>
194+
</html>

‎springrunner.webp‎

7.32 KB
Loading

0 commit comments

Comments
 (0)