fix: 폰트 내재화, 일부 마크업 변경

src/index.html

@@ -269,6 +269,7 @@
       <!-- 04. BODA INTRO -->
       <section id="boda-intro" class="bodaIntro">
         <div class="bodaIntro__content">
+        
           <h2 class="bodaIntro__title">BODA Lab Co., Ltd.</h2>
           <p class="bodaIntro__desc">
             accurately identifies customer needs to<br class="breakLine" />
@@ -276,8 +277,10 @@
             We are working on a project with talented<br class="breakLine" />
             people with high technology.
           </p>
-          <a href="#vision" class="scrollDown scrollDownSm" aria-label="아래로 스크롤"><img src="images/icon-scroll-down.svg" alt="" /></a>
+          
         </div>
+        <a href="#vision" class="scrollDown scrollDownSm" aria-label="아래로 스크롤"><img src="images/icon-scroll-down.svg" alt="" /></a>
+
       </section>
 
       <!-- 05. VISION -->

src/scss/base/_font.scss

@@ -1,2 +1,27 @@
-@import url("https://cdn.jsdelivr.net/gh/sunn-us/SUIT/fonts/variable/woff2/SUIT-Variable.css");
+@font-face {
-@import url("https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@1&display=swap");
+  font-family: "SUIT Variable";
+  src: url("/font/SUIT/SUIT-Variable.woff2") format("woff2-variations");
+  font-weight: 100 900;
+  font-style: normal;
+  font-display: swap;
+}
+
+/* latin-ext */
+@font-face {
+  font-family: "DM Serif Display";
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: url("/font/DMSerifDisplay/DMSerifDisplay-Italic-latin-ext.woff2") format("woff2");
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+@font-face {
+  font-family: "DM Serif Display";
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: url("/font/DMSerifDisplay/DMSerifDisplay-Italic-latin.woff2") format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}

src/scss/base/_reset.scss

@@ -15,7 +15,7 @@ html {
 }
 
 body {
-  font-family: $font-sans;
+  font-family: $기본글꼴;
   background-color: $color-bg;
   color: $color-white;
   overflow-x: hidden;
@@ -45,55 +45,3 @@ address {
 section {
   position: relative;
 }
-
-.sectionTitle {
-  font-family: $font-sans;
-  font-size: clamp(28px, 3vw, 40px);
-  font-weight: 600;
-  letter-spacing: 0.02em;
-  color: $color-white;
-  line-height: 1;
-}
-
-.sectionTitleDark {
-  color: $color-dark;
-}
-
-.scrollDown {
-  position: absolute;
-  bottom: 40px;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 72px;
-  height: 72px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: opacity 0.3s;
-
-  &:hover {
-    opacity: 0.6;
-  }
-
-  img {
-    width: 100%;
-    height: 100%;
-    object-fit: unset;
-  }
-}
-
-.scrollDownSm {
-  position: relative;
-  bottom: auto;
-  left: auto;
-  transform: none;
-  margin-top: 40px;
-}
-
-@include mo {
-  .scrollDown {
-    width: 52px;
-    height: 52px;
-    bottom: 24px;
-  }
-}

src/scss/base/_variable.scss

@@ -7,7 +7,7 @@ $color-white: #ffffff;
 $color-dark: #0d0d0d;
 $color-gray: #999;
 
-$font-sans: "SUIT Variable", "SUIT", sans-serif;
+$기본글꼴: "SUIT Variable", "SUIT", sans-serif;
 $font-serif: "DM Serif Display", serif;
 
 $gnb-height: 80px;

src/scss/index.scss

@@ -1,3 +1,6 @@
+@use "base/variable" as *;
+@use "base/mixin" as *;
+
 // Base
 @use "base/font";
 @use "base/reset";
@@ -8,3 +11,55 @@
 @use "page/about";
 @use "page/projects";
 @use "page/contact";
+
+.sectionTitle {
+  font-family: $기본글꼴;
+  font-size: clamp(28px, 3vw, 40px);
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  color: $color-white;
+  line-height: 1;
+}
+
+.sectionTitleDark {
+  color: $color-dark;
+}
+
+.scrollDown {
+  position: absolute;
+  bottom: 40px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 72px;
+  height: 72px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: opacity 0.3s;
+
+  &:hover {
+    opacity: 0.6;
+  }
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: unset;
+  }
+}
+
+.scrollDownSm {
+  position: relative;
+  bottom: auto;
+  left: auto;
+  transform: none;
+  margin-top: 40px;
+}
+
+@include mo {
+  .scrollDown {
+    width: 52px;
+    height: 52px;
+    bottom: 24px;
+  }
+}

src/scss/page/_about.scss

@@ -172,33 +172,35 @@
 
 // Boda Intro
 .bodaIntro {
-  height: 100vh;
+  position: relative;
+  padding: 120px 0 210px;
   background: $color-bg;
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
+
+  .scrollDown {
+    position: absolute;
+    left: 50%;
+    bottom: 0;
+    transform: translateX(-50%);
+  }
 }
 
 .bodaIntro__content {
   display: flex;
   flex-direction: column;
   align-items: center;
-}
+  text-align: center;
 
-.bodaIntro__title {
+  font-size: clamp(20px, 3vw, 56px);
-  font-size: clamp(20px, 2vw, 28px);
+  line-height: 1.5;
   font-weight: 600;
-  letter-spacing: 0.02em;
-  margin-bottom: 32px;
 }
 
 .bodaIntro__desc {
-  font-size: clamp(14px, 1.3vw, 18px);
+  color: rgba($color-white, 0.3);
-  font-weight: 300;
-  line-height: 1.8;
-  color: rgba($color-white, 0.8);
-  text-align: center;
 }
 
 // Vision

src/scss/page/_contact.scss

@@ -97,7 +97,7 @@
 .contact__greetingBrand {
   display: block;
   font-size: clamp(16px, 1.5vw, 22px);
-  font-family: $font-sans;
+  font-family: $기본글꼴;
   font-style: normal;
   font-weight: 900;
   letter-spacing: 0.15em;
@@ -188,7 +188,7 @@
   color: $color-white;
   font-size: clamp(16px, 1.4vw, 20px);
   font-weight: 400;
-  font-family: $font-sans;
+  font-family: $기본글꼴;
   text-align: left;
   transition: opacity 0.2s;
 
@@ -244,7 +244,7 @@
   background: rgba($color-white, 0.04);
   border: 1px solid rgba($color-white, 0.1);
   color: $color-white;
-  font-family: $font-sans;
+  font-family: $기본글꼴;
   font-size: 14px;
   font-weight: 300;
   padding: 14px 16px;
@@ -322,7 +322,7 @@
   border: none;
   border-radius: 100px;
   color: $color-dark;
-  font-family: $font-sans;
+  font-family: $기본글꼴;
   font-size: 14px;
   font-weight: 700;
   letter-spacing: 0.1em;