Portfolio/DeathNote.html at main · hyunnn12/Portfolio · 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
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta content="width=device-width, initial-scale=1.0" name="viewport" />

    <title>Hyun's Portfoio</title>
    <meta content="" name="description" />
    <meta content="" name="keywords" />

    <!-- Favicons -->
    <link href="assets/img/favicon-96x96.png" rel="icon" />
    <link href="assets/img/favicon-96x96.png" rel="apple-touch-icon" />

    <!-- Google Fonts -->
    <link
      href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i"
      rel="stylesheet"
    />

    <!-- Vendor CSS Files -->
    <link href="assets/vendor/aos/aos.css" rel="stylesheet" />
    <link
      href="assets/vendor/bootstrap/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <link
      href="assets/vendor/bootstrap-icons/bootstrap-icons.css"
      rel="stylesheet"
    />
    <link href="assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet" />
    <link
      href="assets/vendor/glightbox/css/glightbox.min.css"
      rel="stylesheet"
    />
    <link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet" />

    <!-- Template Main CSS File -->
    <link href="assets/css/style.css" rel="stylesheet" />

    <!-- =======================================================
  * Template Name: iPortfolio
  * Updated: Nov 17 2023 with Bootstrap v5.3.2
  * Template URL: https://bootstrapmade.com/iportfolio-bootstrap-portfolio-websites-template/
  * Author: BootstrapMade.com
  * License: https://bootstrapmade.com/license/
  ======================================================== -->
  </head>

  <body>
    <!-- ======= Mobile nav toggle button ======= -->
    <i class="bi bi-list mobile-nav-toggle d-xl-none"></i>

    <!-- ======= Header ======= -->
    <header id="header">
      <div class="d-flex flex-column">
        <div class="profile">
          <img
            src="assets/img/profile.jpg"
            alt=""
            class="img-fluid rounded-circle"
          />
          <h1 class="text-light"><a href="index.html">강 현</a></h1>
          <div class="social-links mt-3 text-center">
            <a href="https://github.com/hyunnn12" class="github"
              ><i class="bx bxl-github"></i
            ></a>
            <a
              href="https://mail.google.com/mail/u/0/?tab=rm&ogbl#inbox?compose=new"
              class="gmail"
              ><i class="bx bxl-gmail"></i
            ></a>
            <a href="https://www.instagram.com/hyu_ni1_/" class="instagram"
              ><i class="bx bxl-instagram"></i
            ></a>
            <a href="https://hyunleo.tistory.com/" class="pencil"
              ><i class="bx bx-pencil"></i
            ></a>
            <a
              href="https://www.notion.so/ed628d40c8004f31afdf322a0c9a7c02"
              class="folder"
              ><i class="bx bx-folder"></i
            ></a>
          </div>
        </div>

        <nav id="navbar" class="nav-menu navbar">
          <ul>
            <li>
              <a href="#portfolio-details" class="nav-link scrollto active"
                ><i class="bx bx-home"></i> <span>OutLine</span></a
              >
            </li>
            <li>
              <a href="#second" class="nav-link scrollto"
                ><i class="bx bx-user"></i> <span>Main</span></a
              >
            </li>
            <li>
              <a href="#third" class="nav-link scrollto"
                ><i class="bx bx-file-blank"></i> <span>Role</span></a
              >
            </li>
            <li>
              <a href="#forth" class="nav-link scrollto"
                ><i class="bx bx-book-content"></i> <span>Review</span></a
              >
            </li>
          </ul>
        </nav>
        <!-- .nav-menu -->
      </div>
    </header>
    <!-- End Header -->

    <main id="main">
      <!-- ======= Breadcrumbs ======= -->
      <section id="breadcrumbs" class="breadcrumbs">
        <div class="container">
          <div class="d-flex justify-content-between align-items-center">
            <h2 style="font-weight: bold"><strong>DeathNote</strong></h2>
            <ol>
              <li><a href="index.html">Home</a></li>
              <li>DeathNote</li>
            </ol>
          </div>
        </div>
      </section>
      <!-- End Breadcrumbs -->

      <!-- ======= Portfolio Details Section ======= -->
      <section id="portfolio-details" class="portfolio-details">
        <div class="container">
          <div class="section-title">
            <h2>개요</h2>
          </div>
          <div class="row gy-4">
            <div class="col-lg-8" data-aos="fade-right">
              <div class="portfolio-details-slider swiper">
                <img src="assets/img/데스노트시작.gif" alt="" />
              </div>
            </div>
            <div class="col-lg-4">
              <div class="portfolio-info" data-aos="fade-left">
                <h3>Project information</h3>
                <ul>
                  <li><strong>Title</strong>: DeathNote</li>
                  <li><strong>Role</strong>: Unity</li>
                  <li>
                    <strong>Stack</strong>: Unity, C#, Mobile
                  </li>
                  <li>
                    <strong>Summary</strong>: RPG와 리듬게임을 융합한 캐주얼 모바일 게임
                  </li>
                  <li>
                    <strong>Project date</strong>: 2023.10.10 ~ 2023.11.17
                  </li>
                  <li>
                    <div class="d-flex justify-content-between">
                      <div>
                        <strong
                          ><a
                            href="https://www.notion.so/DeathNote-44c3b640576c4594bd0c9511dccab6b1"
                            >Blog</a
                          ></strong
                        >
                      </div>
                      <div>
                        <strong
                          ><a href="https://github.com/DeathNoteUnity/deathnotev1"
                            >Git</a
                          ></strong
                        >
                      </div>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </section>
      <!-- End Portfolio Details Section -->

      <!-- ======= 구현사항 Section ======= -->
      <section id="second" class="about">
        <div class="container">
          <div class="section-title">
            <h2>주요 구현사항</h2>
          </div>
          <div class="row">
            <div class="col-lg-6" data-aos="fade-in">
              <a href="assets/img/데스노트시작스토리.gif"
              data-gallery="portfolioGallery"
              class="portfolio-lightbox"
              >
                <img src="assets/img/데스노트시작스토리.gif" class="img-fluid" alt="음악" />
              </a>
              <div class="image-description">
                <h3><strong>시작 스토리</strong></h3>
                <p>
                  악마가 악보(데스노트)를 떨어뜨리면서 시작되는 스토리
                </p>
              </div>
            </div>

            <div class="col-lg-6" data-aos="fade-in">
              <a href="assets/img/데스노트시작.gif"
              data-gallery="portfolioGallery"
              class="portfolio-lightbox"
              >
                <img src="assets/img/데스노트시작.gif" class="img-fluid" alt="음악" />
              </a>
              <div class="image-description">
                <h3><strong>메인화면부터 게임 시작 씬</strong></h3>
                <p>
                  메인화면에서부터 맵을 고르고 노래를 골라 게임 화면에 들어가고, Redis에서 랭킹을 최신화하며, 곡 별로 랭킹 경쟁 가능, offset을 사용자마다 조절하여 정확한 싱크를 맞출 수 있습니다.
                </p>
              </div>
            </div>

            <div class="col-lg-6" data-aos="fade-in">
              <a href="assets/img/데스노트게임.gif"
              data-gallery="portfolioGallery"
              class="portfolio-lightbox"
              >
                <img src="assets/img/데스노트게임.gif" class="img-fluid" alt="음악" />
              </a>
              <div class="image-description">
                <h3><strong>리듬 게임</strong></h3>
                <p>
                  장착한 세션에 따라 나오는 정령과 배경의 톤이 변경되고 장착한 세션의 확률에 따라 스킬이 발동되어 점수가 높아집니다.
                </p>
              </div>
            </div>

            <div class="col-lg-6" data-aos="fade-in">
              <a href="assets/img/데스노트정원.gif"
              data-gallery="portfolioGallery"
              class="portfolio-lightbox"
              >
                <img src="assets/img/데스노트정원.gif" class="img-fluid" alt="음악" />
              </a>
              <div class="image-description">
                <h3><strong>정령 관리</strong></h3>
                <p>
                  리듬게임을 통해 얻은 영감으로 정원 스킨을 구매
                </p>
              </div>
            </div>

            <div class="col-lg-6" data-aos="fade-in">
              <a href="assets/img/데스노트정령생성.gif"
              data-gallery="portfolioGallery"
              class="portfolio-lightbox"
              >
                <img src="assets/img/데스노트정령생성.gif" class="img-fluid" alt="음악" />
              </a>
              <div class="image-description">
                <h3><strong>정령 관리</strong></h3>
                <p>
                  리듬게임을 통해 얻은 영감으로 정령 스킨을 구매
                </p>
              </div>
            </div>

            <div class="col-lg-6" data-aos="fade-in">
              <a href="assets/img/데스노트정령집중.gif"
              data-gallery="portfolioGallery"
              class="portfolio-lightbox"
              >
                <img src="assets/img/데스노트정령집중.gif" class="img-fluid" alt="음악" />
              </a>
              <div class="image-description">
                <h3><strong>정령 관리</strong></h3>
                <p>
                  정령을 누를 경우 카메라가 계속 추적
                </p>
              </div>
            </div>

            <div class="col-lg-6" data-aos="fade-in">
              <a href="assets/img/데스노트6명의정령.gif"
              data-gallery="portfolioGallery"
              class="portfolio-lightbox"
              >
                <img src="assets/img/데스노트6명의정령.gif" class="img-fluid" alt="음악" />
              </a>
              <div class="image-description">
                <h3><strong>정령 관리</strong></h3>
                <p>
                  세션을 통해 리듬게임에 데려갈 6마리의 정령을 정할 수 있습니다.
                </p>
              </div>
            </div>

            <div class="col-lg-6" data-aos="fade-in">
              <a href="assets/img/데스노트미니게임.gif"
              data-gallery="portfolioGallery"
              class="portfolio-lightbox"
              >
                <img src="assets/img/데스노트미니게임.gif" class="img-fluid" alt="음악" />
              </a>
              <div class="image-description">
                <h3><strong>정령 관리</strong></h3>
                <p>
                  정원에서 정령을 3초 이상 누를 경우 간단한 미니게임 진행됩니다.
                </p>
              </div>
            </div>

          </div>
        </div>
      </section>
      <!-- End 구현사항 Section -->

      <!-- ======= 담당역할 Section ======= -->
      <section id="third" class="about">
        <div class="container">
          <div class="section-title">
            <h2>담당역할</h2>
          </div>
          <div class="role-content">
            <div class="portfolio-info" data-aos="fade-in">
            <div class="role-outbox">
              <div class="role-box">
              <h3><i class="role-icon fas fa-user"></i><strong>Unity를 활용한 Scene 구성</strong></h3>
              <ul>
                <li>Unity 2d Asset을 다운로드 받고 import를 하여 화면들을 구성했습니다.</li>
                <li>
                  정령들을 키울 수 있는 정원 Scene 구현했습니다.
                </li>
                <li>
                  미니게임 Scene을 맡아 제작하고 구성했습니다.
                </li>
              </ul>
              </div>

              <div class="role-box">
                <h3><i class="role-icon fas fa-network-wired"></i><strong>Unity 애니메이션 구현</strong></h3>
                <ul>
                <li>
                  Unity Particle(눈 오는 모션, 반짝이는 모션 등)
                </li>
                <li>
                  정원 씬에서 맵을 바꿀 때마다 적용 Particle, 애니메이션이 다르게 적용되도록 구현
                </li>
              </ul>
          </div>

          <div class="role-box">
            <h3><i class="role-icon fas fa-network-wired"></i><strong>음원 박자 분석 및 노트 데이터 추출</strong></h3>
            <ul>
            <li>
              리듬 게임 안에서의 나오는 노트들을 직접 듣고 박자들을 분석하고 노트 배치했습니다.
            </li>
          </ul>
      </div>
        </div>
        </div>
      </section>
      <!-- ======= End 담당역할 Section ======= -->

      <!-- ======= 성과&회고 Section ======= -->
      <section id="forth" class="about">
        <div class="container">
          <div class="section-title">
            <h2>성과&회고</h2>
          </div>
          <div class="achievement-review">
            <div class="achievement" data-aos="fade-in">
              <h3><i class="fas fa-trophy"></i><strong>프로젝트 성과</strong></h3>
              <ul>
                <li>Unity를 사용하여 사용자 인터페이스와 상호작용을 구현함으로써, 게임 플레이 Scene과 시스템을 구성할 수 있습니다.</li>
                <li>Unity에서 애니메이션, Particle을 만들어 더욱더 생동감 있고 입체감 있는 화면을 구성할 수 있습니다.</li>
                <li>음원 박자 분석 및 노트 데이터 추출 기능을 통해 플레이어에게 맞춤형 게임 콘텐츠를 제공할 수 있습니다.</li>
              </ul>
            </div>

            <div class="review" data-aos="fade-in">
              <h3><i class="fas fa-pencil-alt"></i><strong>프로젝트 리뷰</strong></h3>
              <ul>
                <li>Unity의 애니메이션 시스템을 깊이 있게 이해하며 다양한 인터랙티브 요소를 게임에 통합할 수 있었습니다.</li>
                <li>이 프로젝트를 통해 처음으로 Unity 게임 엔진을 사용해보며, 짧은 기간 내에 기본적인 사용법뿐만 아니라 고급 기능들에 대해서도 배울 수 있었습니다. </li>
                <li>Unity를 사용하며 Git을 통한 협업 과정에서 Asset이 사라지거나, 만들었던 애니메이션이 사라지는 등의 문제가 발생했지만, 이를 해결하기 위해 팀원들과 긴밀히 협력하며 문제 해결 능력과 의사소통 능력을 향상시킬 수 있었습니다.</li>
              </ul>
            </div>
          </div>
        </div>
      </section>
      <!-- ======= End 성과&회고 Section ======= -->

      <!-- End About Section -->
    </main>
    <!-- End #main -->

    <!-- ======= Footer ======= -->
    <footer id="footer">
      <div class="container">
        <div class="copyright">
          &copy; Copyright <strong><span>iPortfolio</span></strong>
        </div>
      </div>
    </footer>
    <!-- End  Footer -->

    <a
      href="#"
      class="back-to-top d-flex align-items-center justify-content-center"
      ><i class="bi bi-arrow-up-short"></i
    ></a>

    <!-- Vendor JS Files -->
    <script src="assets/vendor/purecounter/purecounter_vanilla.js"></script>
    <script src="assets/vendor/aos/aos.js"></script>
    <script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="assets/vendor/glightbox/js/glightbox.min.js"></script>
    <script src="assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
    <script src="assets/vendor/swiper/swiper-bundle.min.js"></script>
    <script src="assets/vendor/typed.js/typed.umd.js"></script>
    <script src="assets/vendor/waypoints/noframework.waypoints.js"></script>
    <script src="assets/vendor/php-email-form/validate.js"></script>

    <!-- Template Main JS File -->
    <script src="assets/js/main.js"></script>
  </body>
</html>