-
-
Perspective
-
- 클라이언트의 고유한 가치를 발견하고
-
- 차별화된 디지털 경험을 설계합니다.
-
-
-
-
-
+
+
VISION
+
우리는 고객사의 니즈를 정확히 파악하고, 우수한 기술력을 가진 인재들을 투입하여 프로젝트의 완성도와 만족도를 극대화합니다.
-
-
-
-
-
-
Expertise
-
- 10년 이상의 기술 노하우를 기반으로
-
- 최적의 솔루션을 제공합니다.
-
-
-
-
-
-
Satisfaction
-
- 고객의 만족을 최우선 가치로 삼아
-
- 완성도 높은 결과물을 만듭니다.
-
-
-
-
-
+
+
”
+
Flawless execution, absolute satisfaction. BODA Lab delivers excellence through advanced tech talent.
+
diff --git a/src/js/main.js b/src/js/main.js
index 4e13ea9..dc4ec76 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -10,16 +10,15 @@ $(function () {
const $gnb = $("#gnb");
const $hamburger = $(".gnb__hamburger");
const $mobileNav = $(".gnb__mobileNav");
+ const $mobileNavClose = $(".gnb__mobileNavClose");
// 섹션 → nav 귀속 맵
const sectionToNav = {
intro: "intro",
about: "about",
- history: "about",
- "boda-intro": "about",
- vision: "about",
+ history: "history",
+ vision: "vision",
project: "project",
- expertise: "project",
contact: "contact",
};
@@ -76,6 +75,28 @@ $(function () {
$mobileNav.removeClass("isOpen");
});
+ // 모바일 메뉴 닫기 버튼
+ $mobileNavClose.on("click", function () {
+ $hamburger.removeClass("isOpen").attr("aria-expanded", false);
+ $mobileNav.removeClass("isOpen");
+ });
+
+ // History 아코디언
+ $(".history__yearToggle").on("click", function () {
+ const $group = $(this).closest(".history__yearGroup");
+ const $list = $("#" + $(this).attr("aria-controls"));
+ const isOpen = $group.hasClass("isOpen");
+
+ $group.toggleClass("isOpen", !isOpen);
+ $(this).attr("aria-expanded", !isOpen);
+
+ if (isOpen) {
+ $list.attr("hidden", "");
+ } else {
+ $list.removeAttr("hidden");
+ }
+ });
+
// Contact 아코디언
$(".contactAccordion__header").on("click", function () {
const $item = $(this).closest(".contactAccordion__item");
diff --git a/src/scss/base/_variable.scss b/src/scss/base/_variable.scss
index 20aaa21..7fe703f 100644
--- a/src/scss/base/_variable.scss
+++ b/src/scss/base/_variable.scss
@@ -3,6 +3,7 @@ $color-bg-light: #e5e5e5;
$color-cyan: #00f0ff;
$color-purple: #8f00ff;
$color-blue: #7796ff;
+$color-badge-blue: #0071f2;
$color-white: #ffffff;
$color-dark: #0d0d0d;
$color-gray: #999;
diff --git a/src/scss/index.scss b/src/scss/index.scss
index d0012bf..1b949fc 100644
--- a/src/scss/index.scss
+++ b/src/scss/index.scss
@@ -9,6 +9,7 @@
@use "page/gnb";
@use "page/intro";
@use "page/about";
+@use "page/vision";
@use "page/projects";
@use "page/contact";
diff --git a/src/scss/page/_about.scss b/src/scss/page/_about.scss
index f7eb3de..10530fe 100644
--- a/src/scss/page/_about.scss
+++ b/src/scss/page/_about.scss
@@ -1,360 +1,290 @@
@use "../base/variable" as *;
@use "../base/mixin" as *;
-// About
+// About + Expertise
.about {
- height: 956px;
+ min-height: 100vh;
background: $color-bg;
- align-items: stretch;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ padding: clamp(80px, 6.25vw, 120px) clamp(24px, 6.25vw, 120px);
}
.about__inner {
- position: relative;
- height: 100%;
+ display: flex;
+ flex-direction: column;
+ gap: clamp(60px, 10.4vw, 200px);
}
-.about__text {
- padding: 120px 16.7% 60px;
+.about__head {
+ display: flex;
+ flex-direction: column;
+ gap: clamp(30px, 3.1vw, 60px);
.sectionTitle {
- margin: 0 0 70px;
- }
-
- .desc {
- padding: 0 0 0 80px;
- font-size: clamp(13px, 1.1vw, 16px);
- font-weight: 300;
- line-height: 1.8;
- color: $color-white;
- opacity: 0.9;
+ margin: 0;
}
}
-.about__image {
- position: absolute;
- top: 229px;
- right: 0;
- width: 42%;
-}
-
-.about__imageThumb {
- width: 100%;
- height: 100%;
- object-fit: cover;
- object-position: center;
-}
-
-.about__caption {
- position: absolute;
- bottom: 120px;
- left: 0;
- right: 0;
- padding: 0;
- background: linear-gradient(to top, rgba($color-bg, 0.7) 0%, transparent 100%);
- overflow: hidden;
-}
-
-.about__captionTrack {
- display: flex;
- width: max-content;
- animation: marquee 18s linear infinite;
-}
-
-.about__captionText {
- font-size: clamp(18px, 2.5vw, 36px);
- font-weight: 400;
+.about__desc {
+ font-size: clamp(13px, 1.1vw, 16px);
+ font-weight: 300;
+ line-height: 1.8;
color: $color-white;
- white-space: nowrap;
- padding-right: 80px;
+ opacity: 0.9;
}
-@keyframes marquee {
- from {
- transform: translateX(0);
+.about__quote {
+ display: flex;
+ align-items: flex-end;
+ gap: 10px;
+}
+
+.about__quoteMark {
+ font-size: clamp(60px, 7.6vw, 146px);
+ font-weight: 600;
+ line-height: 1;
+ color: $color-white;
+}
+
+.about__quoteText {
+ font-size: clamp(22px, 2.4vw, 46px);
+ font-weight: 100;
+ line-height: 1.2;
+ color: $color-white;
+}
+
+.about__expertiseList {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ gap: clamp(24px, 3vw, 60px);
+ list-style: none;
+}
+
+.about__expertiseItem {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+
+ .num {
+ font-size: clamp(14px, 0.85vw, 16px);
+ font-weight: 800;
+ color: $color-blue;
}
- to {
- transform: translateX(-25%);
+
+ .name {
+ font-size: clamp(24px, 2.1vw, 40px);
+ font-weight: 800;
+ text-transform: uppercase;
+ line-height: 1.2;
+ color: $color-white;
+ }
+
+ .text {
+ font-size: clamp(12px, 0.75vw, 14px);
+ font-weight: 300;
+ color: $color-white;
}
}
// History
.history {
background: $color-bg-light;
- padding: 0 0 0;
+ padding: clamp(60px, 6.25vw, 120px) clamp(24px, 6.25vw, 120px);
}
-.history__top {
- max-width: 1280px;
- padding: 120px 40px 120px;
- margin: 0 auto;
+.history__inner {
+ position: relative;
+ display: flex;
+ align-items: flex-start;
+ gap: clamp(40px, 6.25vw, 120px);
}
-.history__top .sectionTitleDark {
- margin-bottom: 88px;
+.history__photo {
+ position: relative;
+ flex: 0 0 clamp(220px, 26vw, 500px);
+ align-self: stretch;
+ overflow: hidden;
+ background: $color-dark;
+
+ .img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ }
+}
+
+.history__title {
+ position: absolute;
+ top: clamp(16px, 2vw, 32px);
+ left: clamp(16px, 2vw, 32px);
+ z-index: 1;
+ color: $color-white;
}
.history__timeline {
- display: grid;
- grid-template-columns: repeat(3, 1fr);
- gap: 60px 24px;
+ flex: 1;
+ min-width: 0;
}
.history__yearGroup {
+ border-top: 1px solid rgba($color-dark, 0.15);
+
+ &:last-child {
+ border-bottom: 1px solid rgba($color-dark, 0.15);
+ }
+}
+
+.history__yearToggle {
display: flex;
- flex-direction: column;
+ align-items: center;
+ justify-content: space-between;
+ width: 100%;
+ padding: clamp(16px, 1.8vw, 24px) 0;
+ background: none;
+ border: none;
+ cursor: pointer;
+
+ .icon {
+ position: relative;
+ width: 28px;
+ height: 28px;
+ border: 1px solid $color-dark;
+ border-radius: 50%;
+ flex-shrink: 0;
+
+ &::before,
+ &::after {
+ content: "";
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ width: 10px;
+ height: 1px;
+ background: $color-dark;
+ transform: translate(-50%, -50%);
+ }
+
+ &::after {
+ transform: translate(-50%, -50%) rotate(90deg);
+ transition: opacity 0.2s;
+ }
+ }
+}
+
+.history__yearGroup.isOpen .history__yearToggle .icon::after {
+ opacity: 0;
}
.history__year {
- font-size: clamp(24px, 2.5vw, 32px);
+ font-size: clamp(28px, 2.5vw, 40px);
font-weight: 100;
color: $color-dark;
- margin-bottom: 32px;
line-height: 1;
}
.history__list {
display: flex;
flex-direction: column;
- gap: 12px;
- border-left: 1px solid #0d0d0d;
- padding: 0 0 0 23px;
}
.history__listItem {
display: flex;
- flex-direction: column;
- gap: 4px;
-}
+ align-items: flex-start;
+ justify-content: space-between;
+ gap: 24px;
+ padding: clamp(12px, 1.2vw, 16px) 0;
+ border-top: 1px solid rgba($color-dark, 0.08);
-.history__listDate {
- font-size: 14px;
- font-weight: 700;
- color: $color-dark;
- line-height: 1.6;
-}
-
-.history__listText {
- font-size: clamp(12px, 1vw, 16px);
- font-weight: 300;
- color: $color-dark;
- line-height: 1.6;
-}
-
-.history__bottom {
- position: relative;
- background: $color-bg;
- height: 480px;
-}
-
-.history__img {
- position: absolute;
- object-fit: cover;
-
- &.history__img--1 {
- width: 16.67%;
- top: 0px;
- left: 0;
+ &:first-child {
+ border-top: none;
}
- &.history__img--2 {
- width: 27.1%;
- left: 50%;
- transform: translateX(-50%);
- top: -60px;
+ .main {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
}
- &.history__img--3 {
- width: 18.23%;
- top: 0px;
- left: 0;
+ .title {
+ font-size: clamp(14px, 1vw, 16px);
+ font-weight: 400;
+ color: $color-dark;
}
-}
-// Boda Intro
-.bodaIntro {
- 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%);
+ .badge {
+ display: inline-block;
+ margin-left: 6px;
+ padding: 2px 8px;
+ font-size: 10px;
+ font-weight: 700;
+ color: $color-badge-blue;
+ border: 1px solid $color-badge-blue;
+ border-radius: 4px;
+ vertical-align: middle;
}
-}
-.bodaIntro__content {
- display: flex;
- flex-direction: column;
- align-items: center;
- text-align: center;
+ .sub {
+ font-size: clamp(11px, 0.8vw, 13px);
+ font-weight: 300;
+ color: rgba($color-dark, 0.55);
+ line-height: 1.6;
+ }
- font-size: clamp(20px, 3vw, 56px);
- line-height: 1.5;
- font-weight: 600;
-}
-
-.bodaIntro__desc {
- color: rgba($color-white, 0.3);
-}
-
-// Vision
-.vision {
- background: $color-bg;
-}
-
-.vision__inner {
- display: flex;
- flex-direction: column;
-}
-
-.vision__item {
- display: flex;
- align-items: stretch;
- height: 33.333vh;
- min-height: 280px;
-}
-
-.vision__itemReverse {
- flex-direction: row-reverse;
-}
-
-.vision__text {
- display: flex;
- flex-direction: column;
- justify-content: center;
- width: 50%;
- padding: 40px 80px;
- gap: 20px;
-}
-
-.vision__keyword {
- font-family: $font-serif;
- font-style: italic;
- font-size: clamp(32px, 4vw, 56px);
- color: $color-white;
- line-height: 1;
-}
-
-.vision__textDesc {
- font-size: clamp(13px, 1vw, 15px);
- font-weight: 300;
- line-height: 1.8;
- color: rgba($color-white, 0.75);
-}
-
-.vision__image {
- width: 50%;
- overflow: hidden;
-}
-
-.vision__imageThumb {
- width: 100%;
- height: 100%;
- object-fit: cover;
- transition: transform 0.6s ease;
-}
-
-.vision__image:hover .vision__imageThumb {
- transform: scale(1.04);
+ .date {
+ flex-shrink: 0;
+ font-size: clamp(12px, 0.85vw, 14px);
+ font-weight: 400;
+ color: rgba($color-dark, 0.65);
+ white-space: nowrap;
+ }
}
@include mo {
.about {
height: auto;
- min-height: 100vh;
+ min-height: auto;
+ padding: calc(#{$gnb-height-mo} + 40px) 24px 60px;
+ }
+
+ .about__quote {
flex-direction: column;
+ align-items: flex-start;
+ gap: 4px;
}
- .about__inner {
+ .about__expertiseList {
flex-direction: column;
- }
-
- .about__text {
- width: 100%;
- padding: calc(#{$gnb-height-mo} + 40px) 24px 40px;
- gap: 40px;
- }
-
- .about__image {
- width: 100%;
- height: 56vw;
- min-height: 260px;
- }
-
- .about__caption {
- font-size: 16px;
- padding: 16px;
+ gap: 32px;
}
.breakLine {
display: none;
}
- .history__top {
- padding: 60px 24px 40px;
+ .history {
+ padding: 60px 24px;
}
- .history__top .sectionTitleDark {
+ .history__inner {
+ flex-direction: column;
+ }
+
+ .history__title {
+ position: static;
margin-bottom: 32px;
+ color: $color-dark;
}
- .history__timeline {
- grid-template-columns: 1fr 1fr;
- gap: 40px 20px;
+ .history__photo {
+ display: none;
}
- .history__bottom {
- padding: 0 24px 60px;
+ .history__listItem {
+ flex-direction: column;
+ gap: 6px;
}
- .history__images {
- height: 260px;
- margin-top: -40px;
- }
-
- .history__img1 {
- width: 120px;
- height: 80px;
- }
-
- .history__img2 {
- width: 180px;
- height: 200px;
- left: 50%;
- }
-
- .history__img3 {
- width: 130px;
- height: 90px;
- bottom: 20px;
- }
-
- .bodaIntro {
- min-height: 100vh;
- height: auto;
- padding: 80px 24px;
- }
-
- .vision__item {
- flex-direction: column !important;
- height: auto;
- min-height: unset;
- }
-
- .vision__text {
- width: 100%;
- padding: 32px 24px;
- }
-
- .vision__image {
- width: 100%;
- height: 56vw;
- min-height: 220px;
- }
}
diff --git a/src/scss/page/_gnb.scss b/src/scss/page/_gnb.scss
index 767c9af..046f9a7 100644
--- a/src/scss/page/_gnb.scss
+++ b/src/scss/page/_gnb.scss
@@ -51,20 +51,20 @@
.gnb__navLink {
display: block;
- padding: 24px 32px;
- font-size: 16px;
+ padding: 24px clamp(14px, 1.7vw, 32px);
+ font-size: clamp(13px, 0.85vw, 16px);
font-weight: 400;
letter-spacing: 0.05em;
color: $color-white;
transition: color 0.2s;
&:hover {
- color: $color-cyan;
+ color: $color-blue;
}
}
.gnb__navLink.isActive {
- color: $color-cyan;
+ color: $color-blue;
}
.gnb__hamburger {
@@ -102,37 +102,67 @@
.gnb__mobileNav {
display: none;
- position: absolute;
- top: $gnb-height-mo;
- left: 0;
- width: 100%;
- background: rgba($color-bg, 0.97);
- backdrop-filter: blur(16px);
- padding: 16px 0 24px;
- transform: translateY(-100%);
+ position: fixed;
+ inset: 0;
+ z-index: 200;
+ background: $color-bg;
+ padding: 32px 32px 40px;
opacity: 0;
- transition:
- transform 0.35s ease,
- opacity 0.35s ease;
pointer-events: none;
+ transition: opacity 0.35s ease;
&.isOpen {
- transform: translateY(0);
opacity: 1;
pointer-events: auto;
}
}
+.gnb__mobileNavClose {
+ position: absolute;
+ top: 28px;
+ right: 28px;
+ width: 28px;
+ height: 28px;
+ background: none;
+ border: none;
+ padding: 0;
+ cursor: pointer;
+}
+
+.gnb__mobileNavCloseLine {
+ position: absolute;
+ top: 50%;
+ left: 0;
+ width: 100%;
+ height: 1px;
+ background: $color-white;
+
+ &:nth-child(1) {
+ transform: rotate(45deg);
+ }
+ &:nth-child(2) {
+ transform: rotate(-45deg);
+ }
+}
+
.gnb__mobileNavList {
display: flex;
flex-direction: column;
+ justify-content: center;
+ height: 100%;
+ gap: clamp(20px, 6vh, 36px);
}
.gnb__mobileNavLink {
display: block;
- padding: 14px 24px;
- font-size: 18px;
+ font-family: $font-serif;
+ font-style: italic;
+ font-size: clamp(28px, 8vw, 36px);
font-weight: 400;
- letter-spacing: 0.05em;
+ letter-spacing: 0.02em;
color: $color-white;
}
+
+.gnb__mobileNavLink.isActive {
+ color: $color-blue;
+}
diff --git a/src/scss/page/_intro.scss b/src/scss/page/_intro.scss
index 8f687cc..d874a24 100644
--- a/src/scss/page/_intro.scss
+++ b/src/scss/page/_intro.scss
@@ -58,7 +58,7 @@
}
.intro__sub {
- font-size: clamp(16px, 2.5vw, 36px);
+ font-size: clamp(18px, 2.6vw, 50px);
font-weight: 100;
letter-spacing: 0.02em;
color: $color-white;
@@ -67,11 +67,12 @@
}
.intro__title {
- font-size: clamp(12px, 1.5vw, 20px);
+ font-size: clamp(32px, 5.2vw, 100px);
font-weight: 700;
- letter-spacing: 0.03em;
+ letter-spacing: 0.01em;
text-transform: uppercase;
color: $color-white;
+ line-height: 1.2;
}
@include mo {
diff --git a/src/scss/page/_vision.scss b/src/scss/page/_vision.scss
new file mode 100644
index 0000000..2a4d167
--- /dev/null
+++ b/src/scss/page/_vision.scss
@@ -0,0 +1,99 @@
+@use "../base/variable" as *;
+@use "../base/mixin" as *;
+
+// Vision
+.vision {
+ background: $color-bg;
+ padding: clamp(80px, 6.25vw, 120px) clamp(24px, 6.25vw, 120px);
+}
+
+.vision__inner {
+ display: flex;
+ flex-direction: column;
+ gap: clamp(60px, 8vw, 140px);
+}
+
+.vision__head {
+ display: flex;
+ flex-direction: column;
+ gap: clamp(16px, 1.5vw, 24px);
+
+ .sectionTitle {
+ margin: 0;
+ }
+}
+
+.vision__desc {
+ max-width: 560px;
+ font-size: clamp(13px, 1.1vw, 16px);
+ font-weight: 300;
+ line-height: 1.8;
+ color: $color-white;
+ opacity: 0.9;
+}
+
+.vision__quote {
+ display: flex;
+ align-items: flex-start;
+ gap: 12px;
+ align-self: flex-end;
+ max-width: 640px;
+
+ .mark {
+ font-size: clamp(40px, 4.2vw, 80px);
+ font-weight: 700;
+ line-height: 1;
+ color: $color-white;
+ }
+
+ .text {
+ font-size: clamp(18px, 1.9vw, 32px);
+ font-weight: 300;
+ line-height: 1.4;
+ color: $color-white;
+ }
+}
+
+.vision__keywordList {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ gap: clamp(24px, 3vw, 60px);
+ list-style: none;
+}
+
+.vision__keywordItem {
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+
+ .keyword {
+ font-size: clamp(28px, 3.1vw, 60px);
+ font-weight: 800;
+ letter-spacing: 0.01em;
+ color: $color-white;
+ line-height: 1;
+ }
+
+ .desc {
+ font-size: clamp(12px, 0.8vw, 14px);
+ font-weight: 300;
+ color: rgba($color-white, 0.75);
+ }
+}
+
+@include mo {
+ .vision {
+ padding: 60px 24px;
+ }
+
+ .vision__quote {
+ align-self: stretch;
+ max-width: none;
+ }
+
+ .vision__keywordList {
+ flex-direction: column;
+ gap: 40px;
+ }
+}