merge: origin/main 병합 (충돌 4개 파일은 원격 기준으로 해결)
src/index.html, _contact.scss, _vision.scss, doc/미완료.md 충돌을 모두 원격(origin) 쪽 값으로 덮어써서 해결함. 추후 디자인 검수 재진행 예정.
This commit is contained in:
이희원
commit
28f9dd397e
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,4 @@
|
||||||
|
# 01-home-mobile.json (node 2319:2232)
|
||||||
|
|
||||||
|
- "Our Company" — 24.0px / weight 100 / #ffffff
|
||||||
|
- "The BODA Lab" — 42.0px / weight 700 / #ffffff
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,11 @@
|
||||||
|
# 01-home-pc.json (node 2247:2094)
|
||||||
|
|
||||||
|
- "HOME" — 16.0px / weight 400 / #77a5ff
|
||||||
|
- "ABOUT US" — 16.0px / weight 400 / #ffffff
|
||||||
|
- "HISTORY" — 16.0px / weight 400 / #ffffff
|
||||||
|
- "VISION" — 16.0px / weight 400 / #ffffff
|
||||||
|
- "PROJECT" — 16.0px / weight 400 / #ffffff
|
||||||
|
- "Contact Us" — 16.0px / weight 400 / #ffffff
|
||||||
|
- "The BODA Lab" — 20.0px / weight 300 / #ffffff
|
||||||
|
- "Our Company" — 50.0px / weight 100 / #ffffff
|
||||||
|
- "The BODA Lab" — 100.0px / weight 700 / #ffffff
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,18 @@
|
||||||
|
# 02-about-mobile.json (node 2319:2288)
|
||||||
|
|
||||||
|
- "ABOUT US" — 30.0px / weight 600 / #ffffff
|
||||||
|
- "디지털 시대에 발맞춰, 차별화된 기술적 노하우로 클라이언트의 비즈니스에 " — 14.0px / weight 300 / #ffffff
|
||||||
|
- "Creative Development Company BODA.Lab" — 30.0px / weight 100 / #ffffff
|
||||||
|
- "“" — 86.0px / weight 600 / #ffffff
|
||||||
|
- "01" — 16.0px / weight 800 / #77a5ff
|
||||||
|
- "UX\nConsulting" — 24.0px / weight 800 / #ffffff
|
||||||
|
- "UX 컨설팅" — 14.0px / weight 300 / #ffffff
|
||||||
|
- "02" — 16.0px / weight 800 / #77a5ff
|
||||||
|
- "Plarform\nBuilding" — 24.0px / weight 800 / #ffffff
|
||||||
|
- "웹사이트 구축" — 14.0px / weight 300 / #ffffff
|
||||||
|
- "03" — 16.0px / weight 800 / #77a5ff
|
||||||
|
- "Mobile\nApp & Web" — 24.0px / weight 800 / #ffffff
|
||||||
|
- "모바일 앱 & 웹" — 14.0px / weight 300 / #ffffff
|
||||||
|
- "04" — 16.0px / weight 800 / #77a5ff
|
||||||
|
- "Service\nManagement" — 24.0px / weight 800 / #ffffff
|
||||||
|
- "서비스 운영" — 14.0px / weight 300 / #ffffff
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,20 @@
|
||||||
|
# 02-about-pc.json (node 2247:2230)
|
||||||
|
|
||||||
|
- "ABOUT US" — 48.0px / weight 600 / #ffffff
|
||||||
|
- "디지털 시대에 발맞춰, 차별화된 기술적 노하우로 클라이언트의 비즈니스에 " — 14.0px / weight 300 / #ffffff
|
||||||
|
- "Creative Development Company\nBODA.Lab" — 46.0px / weight 100 / #ffffff
|
||||||
|
- "“" — 146.0px / weight 600 / #ffffff
|
||||||
|
- "Expertise" — 48.0px / weight 600 / #ffffff
|
||||||
|
- "The BODA LAB은 서비스와 사용자를 고려하여 다양한 경험을 제공하" — 14.0px / weight 300 / #ffffff
|
||||||
|
- "01" — 16.0px / weight 800 / #77a5ff
|
||||||
|
- "UX\nConsulting" — 40.0px / weight 800 / #ffffff
|
||||||
|
- "UX 컨설팅" — 14.0px / weight 300 / #ffffff
|
||||||
|
- "02" — 16.0px / weight 800 / #77a5ff
|
||||||
|
- "Plarform\nBuilding" — 40.0px / weight 800 / #ffffff
|
||||||
|
- "웹사이트 구축" — 14.0px / weight 300 / #ffffff
|
||||||
|
- "03" — 16.0px / weight 800 / #77a5ff
|
||||||
|
- "Mobile\nApp & Web" — 40.0px / weight 800 / #ffffff
|
||||||
|
- "모바일 앱 & 웹" — 14.0px / weight 300 / #ffffff
|
||||||
|
- "04" — 16.0px / weight 800 / #77a5ff
|
||||||
|
- "Service\nManagement" — 40.0px / weight 800 / #ffffff
|
||||||
|
- "서비스 운영" — 14.0px / weight 300 / #ffffff
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,76 @@
|
||||||
|
# 03-history-mobile.json (node 2319:2433)
|
||||||
|
|
||||||
|
- "HISTORY" — 30.0px / weight 600 / #0d0d0d
|
||||||
|
- "2025" — 24.0px / weight 500 / #0d0d0d
|
||||||
|
- "한국전자기술연구원 대쉬보드 구축" — 14.0px / weight 400 / #0d0d0d
|
||||||
|
- "Finance" — 8.0px / weight 700 / #0071f2
|
||||||
|
- "유체기기 위험 운전 알고리즘 모니터A링 프로그램 / 송풍 제어 모듈 비정" — 12.0px / weight 400 / #7b7b7b
|
||||||
|
- "25.12- 26.02" — 12.0px / weight 400 / #696969
|
||||||
|
- "현대차 판매시스템 구축" — 14.0px / weight 400 / #0d0d0d
|
||||||
|
- "Finance" — 8.0px / weight 700 / #0071f2
|
||||||
|
- "React.js, F/E, B/E 개발" — 12.0px / weight 400 / #7b7b7b
|
||||||
|
- "25.08 - 26.06" — 12.0px / weight 400 / #696969
|
||||||
|
- "LG 개인정보삭제 프로그램개발" — 14.0px / weight 400 / #0d0d0d
|
||||||
|
- "Finance" — 8.0px / weight 700 / #0071f2
|
||||||
|
- "React.js, F/E, B/E 개발" — 12.0px / weight 400 / #7b7b7b
|
||||||
|
- "25.08 - 25.12" — 12.0px / weight 400 / #696969
|
||||||
|
- "신한투자증권_New 슈퍼SOL 통합 프로젝트" — 14.0px / weight 400 / #0d0d0d
|
||||||
|
- "Finance" — 8.0px / weight 700 / #0071f2
|
||||||
|
- "Vue.js, Publishing" — 12.0px / weight 400 / #7b7b7b
|
||||||
|
- "25.07 - 26.07" — 12.0px / weight 400 / #696969
|
||||||
|
- "신한은행_New 슈퍼SOL 통합 프로젝트" — 14.0px / weight 400 / #0d0d0d
|
||||||
|
- "Finance" — 8.0px / weight 700 / #0071f2
|
||||||
|
- "React.js, Purescript, Publishing" — 12.0px / weight 400 / #7b7b7b
|
||||||
|
- "25.07 - 26.06" — 12.0px / weight 400 / #696969
|
||||||
|
- "한화생명 신탁시스템 재구축" — 14.0px / weight 400 / #0d0d0d
|
||||||
|
- "Finance" — 8.0px / weight 700 / #0071f2
|
||||||
|
- "React.js, Pblishing, UX UI 기획, F/E 개발" — 12.0px / weight 400 / #7b7b7b
|
||||||
|
- "25.06 - 26.06" — 12.0px / weight 400 / #696969
|
||||||
|
- "SK매직 운영 개발" — 14.0px / weight 400 / #0d0d0d
|
||||||
|
- "Finance" — 8.0px / weight 700 / #0071f2
|
||||||
|
- "React.js, Vue.js, F/E, B/E 개발" — 12.0px / weight 400 / #7b7b7b
|
||||||
|
- "25.07 - 25.12" — 12.0px / weight 400 / #696969
|
||||||
|
- "롯데카드 외국인 선불카드 연계플랫폼 구축대행" — 14.0px / weight 400 / #0d0d0d
|
||||||
|
- "Finance" — 8.0px / weight 700 / #0071f2
|
||||||
|
- "Vue.js, Next.js, Publishing, F/E 개발" — 12.0px / weight 400 / #7b7b7b
|
||||||
|
- "25.04 - 25.11" — 12.0px / weight 400 / #696969
|
||||||
|
- "LG전자 홈스타일(리빙) 서비스 구축 프로젝트" — 14.0px / weight 400 / #0d0d0d
|
||||||
|
- "Finance" — 8.0px / weight 700 / #0071f2
|
||||||
|
- "UX UI 기획" — 12.0px / weight 400 / #7b7b7b
|
||||||
|
- "25.04 - 25.08" — 12.0px / weight 400 / #696969
|
||||||
|
- "에어인천 ERP 구축 프로젝트" — 14.0px / weight 400 / #0d0d0d
|
||||||
|
- "Finance" — 8.0px / weight 700 / #0071f2
|
||||||
|
- "UX UI 디자인, Publishing" — 12.0px / weight 400 / #7b7b7b
|
||||||
|
- "25.03 - 25.04" — 12.0px / weight 400 / #696969
|
||||||
|
- "하나캐피탈 자산관리시스템 재구축 프로젝트" — 14.0px / weight 400 / #0d0d0d
|
||||||
|
- "Finance" — 8.0px / weight 700 / #0071f2
|
||||||
|
- "Vue.js, Nuxt.js, Publishing, F/E 개발" — 12.0px / weight 400 / #7b7b7b
|
||||||
|
- "25.03 - 25.08" — 12.0px / weight 400 / #696969
|
||||||
|
- "현대해상 고도화 구축" — 14.0px / weight 400 / #0d0d0d
|
||||||
|
- "Finance" — 8.0px / weight 700 / #0071f2
|
||||||
|
- "React, Typescript, Scss" — 12.0px / weight 400 / #7b7b7b
|
||||||
|
- "25.02 - 26.01" — 12.0px / weight 400 / #696969
|
||||||
|
- "우리은행 전자지갑 구축" — 14.0px / weight 400 / #0d0d0d
|
||||||
|
- "Finance" — 8.0px / weight 700 / #0071f2
|
||||||
|
- "React, typescript, recoil, Spring boot" — 12.0px / weight 400 / #7b7b7b
|
||||||
|
- "25.01 - 25.07" — 12.0px / weight 400 / #696969
|
||||||
|
- "2024" — 24.0px / weight 500 / #0d0d0d
|
||||||
|
- "우리은행 로보어드바이져 구축" — 16.0px / weight 400 / #0d0d0d
|
||||||
|
- "Finance" — 8.0px / weight 700 / #0071f2
|
||||||
|
- "react, typescript, recoil" — 14.0px / weight 400 / #7b7b7b
|
||||||
|
- "24.11 - 25.07" — 14.0px / weight 400 / #696969
|
||||||
|
- "2023" — 24.0px / weight 500 / #0d0d0d
|
||||||
|
- "신한은행 슈퍼SOL 운영 계약" — 16.0px / weight 400 / #0d0d0d
|
||||||
|
- "Finance" — 8.0px / weight 700 / #0071f2
|
||||||
|
- "vue" — 14.0px / weight 400 / #7b7b7b
|
||||||
|
- "12.01" — 14.0px / weight 400 / #696969
|
||||||
|
- "2022" — 24.0px / weight 500 / #0d0d0d
|
||||||
|
- "한화금융 서비스앱 플러스 리뉴얼 \n2차 계약" — 16.0px / weight 400 / #0d0d0d
|
||||||
|
- "Finance" — 8.0px / weight 700 / #0071f2
|
||||||
|
- "12.01" — 14.0px / weight 400 / #7b7b7b
|
||||||
|
- "12.01" — 14.0px / weight 400 / #696969
|
||||||
|
- "2021" — 24.0px / weight 500 / #0d0d0d
|
||||||
|
- "롯데 렌터카 차세대 구축 계약" — 16.0px / weight 400 / #0d0d0d
|
||||||
|
- "Finance" — 8.0px / weight 700 / #0071f2
|
||||||
|
- "12.01" — 14.0px / weight 400 / #7b7b7b
|
||||||
|
- "12.01" — 14.0px / weight 400 / #696969
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,76 @@
|
||||||
|
# 03-history-pc.json (node 2247:2121)
|
||||||
|
|
||||||
|
- "HISTORY" — 48.0px / weight 600 / #ffffff
|
||||||
|
- "2025" — 32.0px / weight 500 / #0d0d0d
|
||||||
|
- "한국전자기술연구원 대쉬보드 구축" — 16.0px / weight 400 / #0d0d0d
|
||||||
|
- "Finance" — 8.0px / weight 700 / #0071f2
|
||||||
|
- "유체기기 위험 운전 알고리즘 모니터A링 프로그램 / 송풍 제어 모듈 비정" — 14.0px / weight 400 / #7b7b7b
|
||||||
|
- "25.12- 26.02" — 14.0px / weight 400 / #696969
|
||||||
|
- "현대차 판매시스템 구축" — 16.0px / weight 400 / #0d0d0d
|
||||||
|
- "Finance" — 8.0px / weight 700 / #0071f2
|
||||||
|
- "React.js, F/E, B/E 개발" — 14.0px / weight 400 / #7b7b7b
|
||||||
|
- "25.08 - 26.06" — 14.0px / weight 400 / #696969
|
||||||
|
- "LG 개인정보삭제 프로그램개발" — 16.0px / weight 400 / #0d0d0d
|
||||||
|
- "Finance" — 8.0px / weight 700 / #0071f2
|
||||||
|
- "React.js, F/E, B/E 개발" — 14.0px / weight 400 / #7b7b7b
|
||||||
|
- "25.08 - 25.12" — 14.0px / weight 400 / #696969
|
||||||
|
- "신한투자증권_New 슈퍼SOL 통합 프로젝트" — 16.0px / weight 400 / #0d0d0d
|
||||||
|
- "Finance" — 8.0px / weight 700 / #0071f2
|
||||||
|
- "Vue.js, Publishing" — 14.0px / weight 400 / #7b7b7b
|
||||||
|
- "25.07 - 26.07" — 14.0px / weight 400 / #696969
|
||||||
|
- "신한은행_New 슈퍼SOL 통합 프로젝트" — 16.0px / weight 400 / #0d0d0d
|
||||||
|
- "Finance" — 8.0px / weight 700 / #0071f2
|
||||||
|
- "React.js, Purescript, Publishing" — 14.0px / weight 400 / #7b7b7b
|
||||||
|
- "25.07 - 26.06" — 14.0px / weight 400 / #696969
|
||||||
|
- "한화생명 신탁시스템 재구축" — 16.0px / weight 400 / #0d0d0d
|
||||||
|
- "Finance" — 8.0px / weight 700 / #0071f2
|
||||||
|
- "React.js, Pblishing, UX UI 기획, F/E 개발" — 14.0px / weight 400 / #7b7b7b
|
||||||
|
- "25.06 - 26.06" — 14.0px / weight 400 / #696969
|
||||||
|
- "SK매직 운영 개발" — 16.0px / weight 400 / #0d0d0d
|
||||||
|
- "Finance" — 8.0px / weight 700 / #0071f2
|
||||||
|
- "React.js, Vue.js, F/E, B/E 개발" — 14.0px / weight 400 / #7b7b7b
|
||||||
|
- "25.07 - 25.12" — 14.0px / weight 400 / #696969
|
||||||
|
- "롯데카드 외국인 선불카드 연계플랫폼 구축대행" — 16.0px / weight 400 / #0d0d0d
|
||||||
|
- "Finance" — 8.0px / weight 700 / #0071f2
|
||||||
|
- "Vue.js, Next.js, Publishing, F/E 개발" — 14.0px / weight 400 / #7b7b7b
|
||||||
|
- "25.04 - 25.11" — 14.0px / weight 400 / #696969
|
||||||
|
- "LG전자 홈스타일(리빙) 서비스 구축 프로젝트" — 16.0px / weight 400 / #0d0d0d
|
||||||
|
- "Finance" — 8.0px / weight 700 / #0071f2
|
||||||
|
- "UX UI 기획" — 14.0px / weight 400 / #7b7b7b
|
||||||
|
- "25.04 - 25.08" — 14.0px / weight 400 / #696969
|
||||||
|
- "에어인천 ERP 구축 프로젝트" — 16.0px / weight 400 / #0d0d0d
|
||||||
|
- "Finance" — 8.0px / weight 700 / #0071f2
|
||||||
|
- "UX UI 디자인, Publishing" — 14.0px / weight 400 / #7b7b7b
|
||||||
|
- "25.03 - 25.04" — 14.0px / weight 400 / #696969
|
||||||
|
- "하나캐피탈 자산관리시스템 재구축 프로젝트" — 16.0px / weight 400 / #0d0d0d
|
||||||
|
- "Finance" — 8.0px / weight 700 / #0071f2
|
||||||
|
- "Vue.js, Nuxt.js, Publishing, F/E 개발" — 14.0px / weight 400 / #7b7b7b
|
||||||
|
- "25.03 - 25.08" — 14.0px / weight 400 / #696969
|
||||||
|
- "현대해상 고도화 구축" — 16.0px / weight 400 / #0d0d0d
|
||||||
|
- "Finance" — 8.0px / weight 700 / #0071f2
|
||||||
|
- "React, Typescript, Scss" — 14.0px / weight 400 / #7b7b7b
|
||||||
|
- "25.02 - 26.01" — 14.0px / weight 400 / #696969
|
||||||
|
- "우리은행 전자지갑 구축" — 16.0px / weight 400 / #0d0d0d
|
||||||
|
- "Finance" — 8.0px / weight 700 / #0071f2
|
||||||
|
- "React, typescript, recoil, Spring boot" — 14.0px / weight 400 / #7b7b7b
|
||||||
|
- "25.01 - 25.07" — 14.0px / weight 400 / #696969
|
||||||
|
- "2024" — 32.0px / weight 500 / #0d0d0d
|
||||||
|
- "우리은행 로보어드바이져 구축" — 16.0px / weight 400 / #0d0d0d
|
||||||
|
- "Finance" — 8.0px / weight 700 / #0071f2
|
||||||
|
- "react, typescript, recoil" — 14.0px / weight 400 / #7b7b7b
|
||||||
|
- "24.11 - 25.07" — 14.0px / weight 400 / #696969
|
||||||
|
- "2023" — 32.0px / weight 500 / #0d0d0d
|
||||||
|
- "신한은행 슈퍼SOL 운영 계약" — 16.0px / weight 400 / #0d0d0d
|
||||||
|
- "Finance" — 8.0px / weight 700 / #0071f2
|
||||||
|
- "vue" — 14.0px / weight 400 / #7b7b7b
|
||||||
|
- "23.12" — 14.0px / weight 400 / #696969
|
||||||
|
- "2022" — 32.0px / weight 500 / #0d0d0d
|
||||||
|
- "한화금융 서비스앱 플러스 리뉴얼 2차 계약" — 16.0px / weight 400 / #0d0d0d
|
||||||
|
- "Finance" — 8.0px / weight 700 / #0071f2
|
||||||
|
- "12.01" — 14.0px / weight 400 / #7b7b7b
|
||||||
|
- "22.11" — 14.0px / weight 400 / #696969
|
||||||
|
- "2021" — 32.0px / weight 500 / #0d0d0d
|
||||||
|
- "롯데 렌터카 차세대 구축 계약" — 16.0px / weight 400 / #0d0d0d
|
||||||
|
- "Finance" — 8.0px / weight 700 / #0071f2
|
||||||
|
- "12.01" — 14.0px / weight 400 / #7b7b7b
|
||||||
|
- "21.11" — 14.0px / weight 400 / #696969
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,12 @@
|
||||||
|
# 04-vision-mobile.json (node 2319:4183)
|
||||||
|
|
||||||
|
- "VISION" — 30.0px / weight 600 / #ffffff
|
||||||
|
- "우리는 고객사의 니즈를 정확히 파악하고, 우수한 기술력을 가진 인재들을 " — 14.0px / weight 300 / #ffffff
|
||||||
|
- "Flawless execution, absolute satisfactio" — 22.0px / weight 100 / #ffffff
|
||||||
|
- "“" — 86.0px / weight 600 / #ffffff
|
||||||
|
- "Perspective" — 32.0px / weight 800 / #ffffff
|
||||||
|
- "고객사의 눈으로 관점을 바라봅니다." — 14.0px / weight 300 / #ffffff
|
||||||
|
- "Expertise" — 32.0px / weight 800 / #ffffff
|
||||||
|
- "다양한 기술력을 가진 인재들을 보유하고 있습니다." — 14.0px / weight 300 / #ffffff
|
||||||
|
- "Satisfaction" — 32.0px / weight 800 / #ffffff
|
||||||
|
- "타사보다 높은 만족도와 완성도를 갖추고 있습니다." — 14.0px / weight 300 / #ffffff
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,12 @@
|
||||||
|
# 04-vision-pc.json (node 2247:2183)
|
||||||
|
|
||||||
|
- "VISION" — 48.0px / weight 600 / #ffffff
|
||||||
|
- "우리는 고객사의 니즈를 정확히 파악하고, 우수한 기술력을 가진 인재들을 " — 14.0px / weight 300 / #ffffff
|
||||||
|
- "Flawless execution, absolute satisfactio" — 46.0px / weight 100 / #ffffff
|
||||||
|
- "“" — 146.0px / weight 600 / #ffffff
|
||||||
|
- "Perspective" — 64.0px / weight 800 / #ffffff
|
||||||
|
- "고객사의 눈으로 관점을 바라봅니다." — 14.0px / weight 300 / #ffffff
|
||||||
|
- "Expertise" — 64.0px / weight 800 / #ffffff
|
||||||
|
- "다양한 기술력을 가진 인재들을 보유하고 있습니다." — 14.0px / weight 300 / #ffffff
|
||||||
|
- "Satisfaction" — 64.0px / weight 800 / #ffffff
|
||||||
|
- "타사보다 높은 만족도와 완성도를 갖추고 있습니다." — 14.0px / weight 300 / #ffffff
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,88 @@
|
||||||
|
# 05-project-mobile.json (node 2319:4231)
|
||||||
|
|
||||||
|
- "PROJECT" — 30.0px / weight 600 / #ffffff
|
||||||
|
- "신한유니버설앱 구축" — 18.0px / weight 700 / #ffffff
|
||||||
|
- "2023.12" — 16.0px / weight 300 / #b0b0b0
|
||||||
|
- "신한은행" — 14.0px / weight 400 / #b0b0b0
|
||||||
|
- "vue" — 12.0px / weight 300 / #ffffff
|
||||||
|
- "scss" — 12.0px / weight 300 / #ffffff
|
||||||
|
- "typescript" — 12.0px / weight 300 / #ffffff
|
||||||
|
- "nuxt.js" — 12.0px / weight 300 / #ffffff
|
||||||
|
- "SK그룹 콩앱 내부 모바일 vue 퍼블" — 18.0px / weight 700 / #ffffff
|
||||||
|
- "2023.12" — 16.0px / weight 300 / #b0b0b0
|
||||||
|
- "SK그룹" — 14.0px / weight 400 / #b0b0b0
|
||||||
|
- "html5" — 12.0px / weight 300 / #ffffff
|
||||||
|
- "css3" — 12.0px / weight 300 / #ffffff
|
||||||
|
- "PNS네트웍스 디지털 포워딩 플랫폼 구축 프로젝트" — 18.0px / weight 700 / #ffffff
|
||||||
|
- "2023.04" — 16.0px / weight 300 / #b0b0b0
|
||||||
|
- "PNS 네트웍스" — 14.0px / weight 400 / #b0b0b0
|
||||||
|
- "react" — 12.0px / weight 300 / #ffffff
|
||||||
|
- "scss" — 12.0px / weight 300 / #ffffff
|
||||||
|
- "typescript" — 12.0px / weight 300 / #ffffff
|
||||||
|
- "롯데렌터카 차세대" — 18.0px / weight 700 / #ffffff
|
||||||
|
- "2023.05" — 16.0px / weight 300 / #b0b0b0
|
||||||
|
- "롯데" — 14.0px / weight 400 / #b0b0b0
|
||||||
|
- "vue" — 12.0px / weight 300 / #ffffff
|
||||||
|
- "css" — 12.0px / weight 300 / #ffffff
|
||||||
|
- "css" — 12.0px / weight 300 / #ffffff
|
||||||
|
- "오뚜기 쇼핑몰 구축" — 18.0px / weight 700 / #ffffff
|
||||||
|
- "2022.07" — 16.0px / weight 300 / #b0b0b0
|
||||||
|
- "오뚜기" — 14.0px / weight 400 / #b0b0b0
|
||||||
|
- "vue" — 12.0px / weight 300 / #ffffff
|
||||||
|
- "html5" — 12.0px / weight 300 / #ffffff
|
||||||
|
- "css3" — 12.0px / weight 300 / #ffffff
|
||||||
|
- "typescript" — 12.0px / weight 300 / #ffffff
|
||||||
|
- "캐나다구스 구축" — 18.0px / weight 700 / #ffffff
|
||||||
|
- "2022.05" — 16.0px / weight 300 / #b0b0b0
|
||||||
|
- "롯데지에프알" — 14.0px / weight 400 / #b0b0b0
|
||||||
|
- "vue" — 12.0px / weight 300 / #ffffff
|
||||||
|
- "scss" — 12.0px / weight 300 / #ffffff
|
||||||
|
- "typescript" — 12.0px / weight 300 / #ffffff
|
||||||
|
- "한옥홈페이지 서버 이관" — 18.0px / weight 700 / #ffffff
|
||||||
|
- "2022.11" — 16.0px / weight 300 / #b0b0b0
|
||||||
|
- "더한옥" — 14.0px / weight 400 / #b0b0b0
|
||||||
|
- "vue" — 12.0px / weight 300 / #ffffff
|
||||||
|
- "html5" — 12.0px / weight 300 / #ffffff
|
||||||
|
- "css3" — 12.0px / weight 300 / #ffffff
|
||||||
|
- "typescript" — 12.0px / weight 300 / #ffffff
|
||||||
|
- "aws" — 12.0px / weight 300 / #ffffff
|
||||||
|
- "그린카 차세대 프로젝트" — 18.0px / weight 700 / #ffffff
|
||||||
|
- "2022.11" — 16.0px / weight 300 / #b0b0b0
|
||||||
|
- "그린카" — 14.0px / weight 400 / #b0b0b0
|
||||||
|
- "html5" — 12.0px / weight 300 / #ffffff
|
||||||
|
- "css3" — 12.0px / weight 300 / #ffffff
|
||||||
|
- "typescript" — 12.0px / weight 300 / #ffffff
|
||||||
|
- "aos" — 12.0px / weight 300 / #ffffff
|
||||||
|
- "ios" — 12.0px / weight 300 / #ffffff
|
||||||
|
- "프로스펙스 구축" — 18.0px / weight 700 / #ffffff
|
||||||
|
- "2021.01" — 16.0px / weight 300 / #b0b0b0
|
||||||
|
- "㈜LS네트웍스" — 14.0px / weight 400 / #b0b0b0
|
||||||
|
- "react" — 12.0px / weight 300 / #ffffff
|
||||||
|
- "scss" — 12.0px / weight 300 / #ffffff
|
||||||
|
- "typescript" — 12.0px / weight 300 / #ffffff
|
||||||
|
- "중소기업창업" — 18.0px / weight 700 / #ffffff
|
||||||
|
- "2021.11" — 16.0px / weight 300 / #b0b0b0
|
||||||
|
- "중소벤처기업부" — 14.0px / weight 400 / #b0b0b0
|
||||||
|
- "html5" — 12.0px / weight 300 / #ffffff
|
||||||
|
- "css3" — 12.0px / weight 300 / #ffffff
|
||||||
|
- "typescript" — 12.0px / weight 300 / #ffffff
|
||||||
|
- "롯데 GA2ck 구축 프로젝트 (롯데 엔터카)" — 18.0px / weight 700 / #ffffff
|
||||||
|
- "2021.11" — 16.0px / weight 300 / #b0b0b0
|
||||||
|
- "롯데" — 14.0px / weight 400 / #b0b0b0
|
||||||
|
- "html5" — 12.0px / weight 300 / #ffffff
|
||||||
|
- "css3" — 12.0px / weight 300 / #ffffff
|
||||||
|
- "typescript" — 12.0px / weight 300 / #ffffff
|
||||||
|
- "java" — 12.0px / weight 300 / #ffffff
|
||||||
|
- "(주)국민은행_KB국민은행\n리브 Reboot One 구축, 프론트개발" — 18.0px / weight 700 / #ffffff
|
||||||
|
- "2021.10" — 16.0px / weight 300 / #b0b0b0
|
||||||
|
- "국민은행" — 14.0px / weight 400 / #b0b0b0
|
||||||
|
- "vue" — 12.0px / weight 300 / #ffffff
|
||||||
|
- "html5" — 12.0px / weight 300 / #ffffff
|
||||||
|
- "css3" — 12.0px / weight 300 / #ffffff
|
||||||
|
- "typescript" — 12.0px / weight 300 / #ffffff
|
||||||
|
- "코나아이 PC" — 18.0px / weight 700 / #ffffff
|
||||||
|
- "2021.01" — 16.0px / weight 300 / #b0b0b0
|
||||||
|
- "코나아이" — 14.0px / weight 400 / #b0b0b0
|
||||||
|
- "html5" — 12.0px / weight 300 / #ffffff
|
||||||
|
- "css3" — 12.0px / weight 300 / #ffffff
|
||||||
|
- "more" — 16.0px / weight 400 / #ffffff
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,94 @@
|
||||||
|
# 05-project-pc.json (node 2247:2202)
|
||||||
|
|
||||||
|
- "PROJECT" — 48.0px / weight 600 / #ffffff
|
||||||
|
- "우리는 고객사의 니즈를 정확히 파악하고, 우수한 기술력을 가진 인재들을 " — 14.0px / weight 300 / #ffffff
|
||||||
|
- "신한유니버설앱 구축" — 18.0px / weight 700 / #ffffff
|
||||||
|
- "2023.12" — 16.0px / weight 300 / #b0b0b0
|
||||||
|
- "신한은행" — 14.0px / weight 400 / #b0b0b0
|
||||||
|
- "vue" — 12.0px / weight 300 / #ffffff
|
||||||
|
- "scss" — 12.0px / weight 300 / #ffffff
|
||||||
|
- "typescript" — 12.0px / weight 300 / #ffffff
|
||||||
|
- "nuxt.js" — 12.0px / weight 300 / #ffffff
|
||||||
|
- "SK그룹 콩앱 내부 모바일 vue 퍼블" — 18.0px / weight 700 / #ffffff
|
||||||
|
- "2023.12" — 16.0px / weight 300 / #b0b0b0
|
||||||
|
- "SK그룹" — 14.0px / weight 400 / #b0b0b0
|
||||||
|
- "html5" — 12.0px / weight 300 / #ffffff
|
||||||
|
- "css3" — 12.0px / weight 300 / #ffffff
|
||||||
|
- "PNS네트웍스 디지털 포워딩 플랫폼 구축 프로젝트" — 18.0px / weight 700 / #ffffff
|
||||||
|
- "2023.04" — 16.0px / weight 300 / #b0b0b0
|
||||||
|
- "PNS 네트웍스" — 14.0px / weight 400 / #b0b0b0
|
||||||
|
- "react" — 12.0px / weight 300 / #ffffff
|
||||||
|
- "scss" — 12.0px / weight 300 / #ffffff
|
||||||
|
- "typescript" — 12.0px / weight 300 / #ffffff
|
||||||
|
- "롯데렌터카 차세대" — 18.0px / weight 700 / #ffffff
|
||||||
|
- "2023.05" — 16.0px / weight 300 / #b0b0b0
|
||||||
|
- "롯데" — 14.0px / weight 400 / #b0b0b0
|
||||||
|
- "vue" — 12.0px / weight 300 / #ffffff
|
||||||
|
- "css" — 12.0px / weight 300 / #ffffff
|
||||||
|
- "css" — 12.0px / weight 300 / #ffffff
|
||||||
|
- "오뚜기 쇼핑몰 구축" — 18.0px / weight 700 / #ffffff
|
||||||
|
- "2022.07" — 16.0px / weight 300 / #b0b0b0
|
||||||
|
- "오뚜기" — 14.0px / weight 400 / #b0b0b0
|
||||||
|
- "vue" — 12.0px / weight 300 / #ffffff
|
||||||
|
- "html5" — 12.0px / weight 300 / #ffffff
|
||||||
|
- "css3" — 12.0px / weight 300 / #ffffff
|
||||||
|
- "typescript" — 12.0px / weight 300 / #ffffff
|
||||||
|
- "캐나다구스 구축" — 18.0px / weight 700 / #ffffff
|
||||||
|
- "2022.05" — 16.0px / weight 300 / #b0b0b0
|
||||||
|
- "롯데지에프알" — 14.0px / weight 400 / #b0b0b0
|
||||||
|
- "vue" — 12.0px / weight 300 / #ffffff
|
||||||
|
- "scss" — 12.0px / weight 300 / #ffffff
|
||||||
|
- "typescript" — 12.0px / weight 300 / #ffffff
|
||||||
|
- "한옥홈페이지 서버 이관" — 18.0px / weight 700 / #ffffff
|
||||||
|
- "2022.11" — 16.0px / weight 300 / #b0b0b0
|
||||||
|
- "더한옥" — 14.0px / weight 400 / #b0b0b0
|
||||||
|
- "vue" — 12.0px / weight 300 / #ffffff
|
||||||
|
- "html5" — 12.0px / weight 300 / #ffffff
|
||||||
|
- "css3" — 12.0px / weight 300 / #ffffff
|
||||||
|
- "typescript" — 12.0px / weight 300 / #ffffff
|
||||||
|
- "aws" — 12.0px / weight 300 / #ffffff
|
||||||
|
- "그린카 차세대 프로젝트" — 18.0px / weight 700 / #ffffff
|
||||||
|
- "2022.11" — 16.0px / weight 300 / #b0b0b0
|
||||||
|
- "그린카" — 14.0px / weight 400 / #b0b0b0
|
||||||
|
- "html5" — 12.0px / weight 300 / #ffffff
|
||||||
|
- "css3" — 12.0px / weight 300 / #ffffff
|
||||||
|
- "typescript" — 12.0px / weight 300 / #ffffff
|
||||||
|
- "aos" — 12.0px / weight 300 / #ffffff
|
||||||
|
- "ios" — 12.0px / weight 300 / #ffffff
|
||||||
|
- "프로스펙스 구축" — 18.0px / weight 700 / #ffffff
|
||||||
|
- "2021.01" — 16.0px / weight 300 / #b0b0b0
|
||||||
|
- "㈜LS네트웍스" — 14.0px / weight 400 / #b0b0b0
|
||||||
|
- "react" — 12.0px / weight 300 / #ffffff
|
||||||
|
- "scss" — 12.0px / weight 300 / #ffffff
|
||||||
|
- "typescript" — 12.0px / weight 300 / #ffffff
|
||||||
|
- "중소기업창업" — 18.0px / weight 700 / #ffffff
|
||||||
|
- "2021.11" — 16.0px / weight 300 / #b0b0b0
|
||||||
|
- "중소벤처기업부" — 14.0px / weight 400 / #b0b0b0
|
||||||
|
- "html5" — 12.0px / weight 300 / #ffffff
|
||||||
|
- "css3" — 12.0px / weight 300 / #ffffff
|
||||||
|
- "typescript" — 12.0px / weight 300 / #ffffff
|
||||||
|
- "롯데 GA2ck 구축 프로젝트 (롯데 엔터카)" — 18.0px / weight 700 / #ffffff
|
||||||
|
- "2021.11" — 16.0px / weight 300 / #b0b0b0
|
||||||
|
- "롯데" — 14.0px / weight 400 / #b0b0b0
|
||||||
|
- "html5" — 12.0px / weight 300 / #ffffff
|
||||||
|
- "css3" — 12.0px / weight 300 / #ffffff
|
||||||
|
- "typescript" — 12.0px / weight 300 / #ffffff
|
||||||
|
- "java" — 12.0px / weight 300 / #ffffff
|
||||||
|
- "(주)국민은행_KB국민은행\n리브 Reboot One 구축, 프론트개발" — 18.0px / weight 700 / #ffffff
|
||||||
|
- "2021.10" — 16.0px / weight 300 / #b0b0b0
|
||||||
|
- "국민은행" — 14.0px / weight 400 / #b0b0b0
|
||||||
|
- "vue" — 12.0px / weight 300 / #ffffff
|
||||||
|
- "html5" — 12.0px / weight 300 / #ffffff
|
||||||
|
- "css3" — 12.0px / weight 300 / #ffffff
|
||||||
|
- "typescript" — 12.0px / weight 300 / #ffffff
|
||||||
|
- "코나아이 PC" — 18.0px / weight 700 / #ffffff
|
||||||
|
- "2021.01" — 16.0px / weight 300 / #b0b0b0
|
||||||
|
- "코나아이" — 14.0px / weight 400 / #b0b0b0
|
||||||
|
- "html5" — 12.0px / weight 300 / #ffffff
|
||||||
|
- "css3" — 12.0px / weight 300 / #ffffff
|
||||||
|
- "SK그룹 콩앱 내부 모바일 vue 퍼블" — 18.0px / weight 700 / #ffffff
|
||||||
|
- "2023.12" — 16.0px / weight 300 / #b0b0b0
|
||||||
|
- "SK그룹" — 14.0px / weight 400 / #b0b0b0
|
||||||
|
- "html5" — 12.0px / weight 300 / #ffffff
|
||||||
|
- "css3" — 12.0px / weight 300 / #ffffff
|
||||||
|
- "more" — 24.0px / weight 400 / #ffffff
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,24 @@
|
||||||
|
# 06-contact-mobile.json (node 2319:5082)
|
||||||
|
|
||||||
|
- "Welcome BODA LAB" — 30.0px / weight 600 / #0d0d0d
|
||||||
|
- "The BODA LAB은 서비스와 사용자를 고려하여 다양한 경험을 제공하" — 14.0px / weight 300 / #0d0d0d
|
||||||
|
- "Head Office" — 32.0px / weight 400 / #0d0d0d
|
||||||
|
- "Address" — 18.0px / weight 700 / #77a5ff
|
||||||
|
- "서울시 강서구 마곡중앙로 161-8, 두산더랜드파크 C동 618호" — 16.0px / weight 300 / #0d0d0d
|
||||||
|
- "e-mail" — 18.0px / weight 700 / #77a5ff
|
||||||
|
- "koji@bodalab.co.kr" — 16.0px / weight 300 / #0d0d0d
|
||||||
|
- "tel" — 18.0px / weight 700 / #77a5ff
|
||||||
|
- "010-4169-4728" — 16.0px / weight 300 / #0d0d0d
|
||||||
|
- "Contact Us" — 32.0px / weight 400 / #0d0d0d
|
||||||
|
- "회사명*" — 14.0px / weight 400 / #737373
|
||||||
|
- "담당자 이름*" — 14.0px / weight 400 / #737373
|
||||||
|
- "연락처*" — 14.0px / weight 400 / #737373
|
||||||
|
- "이메일*" — 14.0px / weight 400 / #737373
|
||||||
|
- "문의내용" — 14.0px / weight 400 / #737373
|
||||||
|
- "[필수] 개인정보 수집 및 이용 동의" — 16.0px / weight 400 / #0d0d0d
|
||||||
|
- "send" — 16.0px / weight 400 / #000000
|
||||||
|
- "Recruitment" — 32.0px / weight 400 / #0d0d0d
|
||||||
|
- "Planner & Consulting" — 16.0px / weight 400 / #0d0d0d
|
||||||
|
- "Designer" — 16.0px / weight 400 / #0d0d0d
|
||||||
|
- "Publisher" — 16.0px / weight 400 / #0d0d0d
|
||||||
|
- "Scripter" — 16.0px / weight 400 / #0d0d0d
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,24 @@
|
||||||
|
# 06-contact-pc.json (node 2247:2253)
|
||||||
|
|
||||||
|
- "Welcome BODA LAB" — 48.0px / weight 600 / #0d0d0d
|
||||||
|
- "The BODA LAB은 서비스와 사용자를 고려하여 다양한 경험을 제공하" — 14.0px / weight 300 / #0d0d0d
|
||||||
|
- "Head Office" — 32.0px / weight 400 / #0d0d0d
|
||||||
|
- "Address" — 18.0px / weight 700 / #77a5ff
|
||||||
|
- "서울시 강서구 마곡중앙로 161-8, 두산더랜드파크 C동 618호" — 16.0px / weight 300 / #0d0d0d
|
||||||
|
- "e-mail" — 18.0px / weight 700 / #77a5ff
|
||||||
|
- "koji@bodalab.co.kr" — 16.0px / weight 300 / #0d0d0d
|
||||||
|
- "tel" — 18.0px / weight 700 / #77a5ff
|
||||||
|
- "010-4169-4728" — 16.0px / weight 300 / #0d0d0d
|
||||||
|
- "Contact Us" — 32.0px / weight 400 / #0d0d0d
|
||||||
|
- "회사명*" — 14.0px / weight 400 / #737373
|
||||||
|
- "담당자 이름*" — 14.0px / weight 400 / #737373
|
||||||
|
- "연락처*" — 14.0px / weight 400 / #737373
|
||||||
|
- "이메일*" — 14.0px / weight 400 / #737373
|
||||||
|
- "문의내용" — 14.0px / weight 400 / #737373
|
||||||
|
- "[필수] 개인정보 수집 및 이용 동의" — 16.0px / weight 400 / #0d0d0d
|
||||||
|
- "send" — 16.0px / weight 400 / #000000
|
||||||
|
- "Recruitment" — 32.0px / weight 400 / #0d0d0d
|
||||||
|
- "Planner & Consulting" — 16.0px / weight 400 / #0d0d0d
|
||||||
|
- "Designer" — 16.0px / weight 400 / #0d0d0d
|
||||||
|
- "Publisher" — 16.0px / weight 400 / #0d0d0d
|
||||||
|
- "Scripter" — 16.0px / weight 400 / #0d0d0d
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,624 @@
|
||||||
|
# 07-components.json (canvas 12:92 'Components')
|
||||||
|
|
||||||
|
## title_left (COMPONENT, id=40:119)
|
||||||
|
COMPONENT 'title_left' [pad=T24.0,B24.0, gap=10.0]
|
||||||
|
TEXT 'ABOUT US' [bg=#77a5ff, "ABOUT US" 18.0px/w700/#77a5ff]
|
||||||
|
|
||||||
|
## title_right (COMPONENT, id=92:368)
|
||||||
|
COMPONENT 'title_right' [pad=T24.0,B24.0, gap=10.0]
|
||||||
|
TEXT 'ABOUT US' [bg=#ffffff, "ABOUT US" 16.0px/w700/#ffffff]
|
||||||
|
|
||||||
|
## GNB (COMPONENT, id=42:176)
|
||||||
|
COMPONENT 'GNB' [bg=#0d0d0d]
|
||||||
|
FRAME 'logo'
|
||||||
|
GROUP 'logo'
|
||||||
|
VECTOR 'Vector' [bg=#ffffff]
|
||||||
|
VECTOR 'Vector' [bg=#ffffff]
|
||||||
|
VECTOR 'Vector' [bg=#ffffff]
|
||||||
|
VECTOR 'Vector' [bg=#ffffff]
|
||||||
|
VECTOR 'Vector' [bg=#ffffff]
|
||||||
|
VECTOR 'Vector' [bg=#ffffff]
|
||||||
|
VECTOR 'Vector' [bg=#ffffff]
|
||||||
|
VECTOR 'Vector' [bg=#ffffff]
|
||||||
|
VECTOR 'Vector' [bg=#ffffff]
|
||||||
|
VECTOR 'Vector' [bg=#ffffff]
|
||||||
|
VECTOR 'Vector' [bg=#ffffff]
|
||||||
|
VECTOR 'Vector' [bg=#ffffff]
|
||||||
|
VECTOR 'Vector' [bg=#ffffff]
|
||||||
|
VECTOR 'Vector' [bg=#ffffff]
|
||||||
|
VECTOR 'Vector' [bg=#ffffff]
|
||||||
|
INSTANCE 'menu' [gap=10.0]
|
||||||
|
FRAME 'menu' [gap=12.0]
|
||||||
|
INSTANCE 'GNB' [bg=#ffffff]
|
||||||
|
INSTANCE 'GNB' [pad=L32.0,R32.0,T24.0,B24.0, gap=10.0]
|
||||||
|
INSTANCE 'GNB' [pad=L32.0,R32.0,T24.0,B24.0, gap=10.0]
|
||||||
|
INSTANCE 'GNB' [pad=L32.0,R32.0,T24.0,B24.0, gap=10.0]
|
||||||
|
INSTANCE 'GNB' [pad=L32.0,R32.0,T24.0,B24.0, gap=10.0]
|
||||||
|
INSTANCE 'GNB' [pad=L32.0,R32.0,T24.0,B24.0, gap=10.0]
|
||||||
|
|
||||||
|
## icon/pluse (INSTANCE, id=2309:2289)
|
||||||
|
INSTANCE 'icon/pluse'
|
||||||
|
VECTOR 'Vector 1' [border=#ffffff/1.0px]
|
||||||
|
VECTOR 'Vector 2' [border=#ffffff/1.0px]
|
||||||
|
|
||||||
|
## menu (COMPONENT_SET, id=43:207)
|
||||||
|
COMPONENT_SET 'menu' [border=#9747ff/1.0px, radius=5.0, pad=L20.0,R20.0, gap=45.0]
|
||||||
|
COMPONENT 'Style=pc' [gap=10.0]
|
||||||
|
FRAME 'menu' [gap=12.0]
|
||||||
|
INSTANCE 'GNB' [bg=#ffffff]
|
||||||
|
INSTANCE 'GNB' [pad=L32.0,R32.0,T24.0,B24.0, gap=10.0]
|
||||||
|
INSTANCE 'GNB' [pad=L32.0,R32.0,T24.0,B24.0, gap=10.0]
|
||||||
|
INSTANCE 'GNB' [pad=L32.0,R32.0,T24.0,B24.0, gap=10.0]
|
||||||
|
INSTANCE 'GNB' [pad=L32.0,R32.0,T24.0,B24.0, gap=10.0]
|
||||||
|
INSTANCE 'GNB' [pad=L32.0,R32.0,T24.0,B24.0, gap=10.0]
|
||||||
|
COMPONENT 'Style=mobile' [gap=24.0]
|
||||||
|
INSTANCE 'GNB' [pad=L32.0,R32.0,T24.0,B24.0, gap=10.0]
|
||||||
|
TEXT 'HOME' [bg=#77a5ff, "HOME" 32.0px/w400/#77a5ff]
|
||||||
|
INSTANCE 'GNB' [pad=L32.0,R32.0,T24.0,B24.0, gap=10.0]
|
||||||
|
TEXT 'HOME' [bg=#ffffff, "ABOUT" 32.0px/w400/#ffffff]
|
||||||
|
INSTANCE 'GNB' [pad=L32.0,R32.0,T24.0,B24.0, gap=10.0]
|
||||||
|
TEXT 'HOME' [bg=#ffffff, "ABOUT" 32.0px/w400/#ffffff]
|
||||||
|
INSTANCE 'GNB' [pad=L32.0,R32.0,T24.0,B24.0, gap=10.0]
|
||||||
|
TEXT 'HOME' [bg=#ffffff, "ABOUT" 32.0px/w400/#ffffff]
|
||||||
|
INSTANCE 'GNB' [pad=L32.0,R32.0,T24.0,B24.0, gap=10.0]
|
||||||
|
TEXT 'HOME' [bg=#ffffff, "PROJECTS" 32.0px/w400/#ffffff]
|
||||||
|
INSTANCE 'GNB' [pad=L32.0,R32.0,T24.0,B24.0, gap=10.0]
|
||||||
|
TEXT 'HOME' [bg=#ffffff, "CONTACT" 32.0px/w400/#ffffff]
|
||||||
|
|
||||||
|
## scroll/down (COMPONENT, id=109:1117)
|
||||||
|
COMPONENT 'scroll/down'
|
||||||
|
ELLIPSE 'Ellipse 6' [border=#ffffff/1.0px]
|
||||||
|
VECTOR 'Vector 1' [border=#ffffff/1.0px]
|
||||||
|
|
||||||
|
## chip (COMPONENT, id=166:870)
|
||||||
|
COMPONENT 'chip' [bg=#2d2d2d, border=#ffffff/0.5px, radius=20.0, pad=L14.0,R14.0,T4.0,B6.0, gap=10.0]
|
||||||
|
TEXT 'typescript' [bg=#ffffff, "typescript" 12.0px/w300/#ffffff]
|
||||||
|
|
||||||
|
## chips (COMPONENT_SET, id=11:358)
|
||||||
|
COMPONENT_SET 'chips' [border=#9747ff/1.0px, radius=5.0]
|
||||||
|
COMPONENT 'number=1' [gap=4.0]
|
||||||
|
INSTANCE 'chip' [bg=#2d2d2d, border=#ffffff/0.5px, radius=20.0, pad=L14.0,R14.0,T4.0,B6.0, gap=10.0]
|
||||||
|
TEXT 'typescript' [bg=#ffffff, "text" 12.0px/w300/#ffffff]
|
||||||
|
COMPONENT 'number=2' [gap=4.0]
|
||||||
|
INSTANCE 'chip' [bg=#2d2d2d, border=#ffffff/0.5px, radius=20.0, pad=L14.0,R14.0,T4.0,B6.0, gap=10.0]
|
||||||
|
TEXT 'typescript' [bg=#ffffff, "text" 12.0px/w300/#ffffff]
|
||||||
|
INSTANCE 'chip' [bg=#2d2d2d, border=#ffffff/0.5px, radius=20.0, pad=L14.0,R14.0,T4.0,B6.0, gap=10.0]
|
||||||
|
TEXT 'typescript' [bg=#ffffff, "text" 12.0px/w300/#ffffff]
|
||||||
|
COMPONENT 'number=3' [gap=4.0]
|
||||||
|
INSTANCE 'chip' [bg=#2d2d2d, border=#ffffff/0.5px, radius=20.0, pad=L14.0,R14.0,T4.0,B6.0, gap=10.0]
|
||||||
|
TEXT 'typescript' [bg=#ffffff, "text" 12.0px/w300/#ffffff]
|
||||||
|
INSTANCE 'chip' [bg=#2d2d2d, border=#ffffff/0.5px, radius=20.0, pad=L14.0,R14.0,T4.0,B6.0, gap=10.0]
|
||||||
|
TEXT 'typescript' [bg=#ffffff, "text" 12.0px/w300/#ffffff]
|
||||||
|
INSTANCE 'chip' [bg=#2d2d2d, border=#ffffff/0.5px, radius=20.0, pad=L14.0,R14.0,T4.0,B6.0, gap=10.0]
|
||||||
|
TEXT 'typescript' [bg=#ffffff, "text" 12.0px/w300/#ffffff]
|
||||||
|
COMPONENT 'number=4' [gap=4.0]
|
||||||
|
INSTANCE 'chip' [bg=#2d2d2d, border=#ffffff/0.5px, radius=20.0, pad=L14.0,R14.0,T4.0,B6.0, gap=10.0]
|
||||||
|
TEXT 'typescript' [bg=#ffffff, "text" 12.0px/w300/#ffffff]
|
||||||
|
INSTANCE 'chip' [bg=#2d2d2d, border=#ffffff/0.5px, radius=20.0, pad=L14.0,R14.0,T4.0,B6.0, gap=10.0]
|
||||||
|
TEXT 'typescript' [bg=#ffffff, "text" 12.0px/w300/#ffffff]
|
||||||
|
INSTANCE 'chip' [bg=#2d2d2d, border=#ffffff/0.5px, radius=20.0, pad=L14.0,R14.0,T4.0,B6.0, gap=10.0]
|
||||||
|
TEXT 'typescript' [bg=#ffffff, "text" 12.0px/w300/#ffffff]
|
||||||
|
INSTANCE 'chip' [bg=#2d2d2d, border=#ffffff/0.5px, radius=20.0, pad=L14.0,R14.0,T4.0,B6.0, gap=10.0]
|
||||||
|
TEXT 'typescript' [bg=#ffffff, "text" 12.0px/w300/#ffffff]
|
||||||
|
COMPONENT 'number=5' [gap=4.0]
|
||||||
|
INSTANCE 'chip' [bg=#2d2d2d, border=#ffffff/0.5px, radius=20.0, pad=L14.0,R14.0,T4.0,B6.0, gap=10.0]
|
||||||
|
TEXT 'typescript' [bg=#ffffff, "text" 12.0px/w300/#ffffff]
|
||||||
|
INSTANCE 'chip' [bg=#2d2d2d, border=#ffffff/0.5px, radius=20.0, pad=L14.0,R14.0,T4.0,B6.0, gap=10.0]
|
||||||
|
TEXT 'typescript' [bg=#ffffff, "text" 12.0px/w300/#ffffff]
|
||||||
|
INSTANCE 'chip' [bg=#2d2d2d, border=#ffffff/0.5px, radius=20.0, pad=L14.0,R14.0,T4.0,B6.0, gap=10.0]
|
||||||
|
TEXT 'typescript' [bg=#ffffff, "text" 12.0px/w300/#ffffff]
|
||||||
|
INSTANCE 'chip' [bg=#2d2d2d, border=#ffffff/0.5px, radius=20.0, pad=L14.0,R14.0,T4.0,B6.0, gap=10.0]
|
||||||
|
TEXT 'typescript' [bg=#ffffff, "text" 12.0px/w300/#ffffff]
|
||||||
|
INSTANCE 'chip' [bg=#2d2d2d, border=#ffffff/0.5px, radius=20.0, pad=L14.0,R14.0,T4.0,B6.0, gap=10.0]
|
||||||
|
TEXT 'typescript' [bg=#ffffff, "text" 12.0px/w300/#ffffff]
|
||||||
|
|
||||||
|
## Project card (COMPONENT_SET, id=11:410)
|
||||||
|
COMPONENT_SET 'Project card' [border=#9747ff/1.0px, radius=5.0, pad=L20.0,R20.0,T20.0,B20.0, gap=36.0]
|
||||||
|
COMPONENT 'size=XL' [gap=24.0]
|
||||||
|
INSTANCE 'Thumbnails' [radius=8.0]
|
||||||
|
RECTANGLE 'markus-winkler-tUEnyweZjEU-unsplash 2'
|
||||||
|
GROUP 'Mask group'
|
||||||
|
FRAME 'title_wrap' [gap=24.0]
|
||||||
|
FRAME 'text' [gap=18.0]
|
||||||
|
INSTANCE 'chips' [gap=4.0]
|
||||||
|
COMPONENT 'size=L' [gap=24.0]
|
||||||
|
INSTANCE 'Thumbnails' [radius=8.0]
|
||||||
|
RECTANGLE 'markus-winkler-tUEnyweZjEU-unsplash 2'
|
||||||
|
GROUP 'Mask group'
|
||||||
|
FRAME 'title_wrap' [gap=24.0]
|
||||||
|
FRAME 'text' [gap=18.0]
|
||||||
|
INSTANCE 'chips' [gap=4.0]
|
||||||
|
COMPONENT 'size=M' [gap=24.0]
|
||||||
|
INSTANCE 'Thumbnails' [radius=8.0]
|
||||||
|
RECTANGLE 'markus-winkler-tUEnyweZjEU-unsplash 2'
|
||||||
|
GROUP 'Mask group'
|
||||||
|
FRAME 'title_wrap' [gap=24.0]
|
||||||
|
FRAME 'text' [gap=18.0]
|
||||||
|
INSTANCE 'chips' [gap=4.0]
|
||||||
|
COMPONENT 'size=S' [gap=24.0]
|
||||||
|
INSTANCE 'Thumbnails' [radius=8.0]
|
||||||
|
RECTANGLE 'markus-winkler-tUEnyweZjEU-unsplash 2'
|
||||||
|
GROUP 'Mask group'
|
||||||
|
FRAME 'title_wrap' [gap=24.0]
|
||||||
|
FRAME 'text' [gap=18.0]
|
||||||
|
INSTANCE 'chips' [gap=4.0]
|
||||||
|
|
||||||
|
## Input (COMPONENT_SET, id=74:2556)
|
||||||
|
COMPONENT_SET 'Input' [border=#9747ff/1.0px, radius=5.0]
|
||||||
|
COMPONENT 'type=enabled' [bg=#ffffff, border=#0d0d0d/1.0px, radius=8.0, pad=L16.0,R16.0,T16.0,B16.0, gap=10.0]
|
||||||
|
TEXT '회사명' [bg=#0d0d0d, "회사명" 14.0px/w400/#0d0d0d]
|
||||||
|
COMPONENT 'type=focus' [bg=#ffffff, border=#8f00ff/1.0px, radius=8.0, pad=L16.0,R16.0,T16.0,B16.0, gap=10.0]
|
||||||
|
TEXT '회사명' [bg=#0d0d0d, "회사명" 14.0px/w400/#0d0d0d]
|
||||||
|
COMPONENT 'type=disabled' [bg=#ffffff, border=#0d0d0d/1.0px, radius=8.0, pad=L16.0,R16.0,T16.0,B16.0, gap=10.0]
|
||||||
|
TEXT '회사명' [bg=#737373, "회사명" 14.0px/w400/#737373]
|
||||||
|
|
||||||
|
## btn/large (COMPONENT_SET, id=74:2574)
|
||||||
|
COMPONENT_SET 'btn/large' [border=#9747ff/1.0px, radius=5.0, pad=L20.0,R20.0,T20.0,B20.0, gap=20.0]
|
||||||
|
COMPONENT 'style=large' [bg=#d9d9d9, border=#ffffff/1.0px, radius=36.0, pad=L32.0,R32.0,T24.0,B24.0, gap=10.0]
|
||||||
|
FRAME 'Frame 37' [gap=12.0]
|
||||||
|
INSTANCE 'icon/pluse'
|
||||||
|
TEXT 'view more' [bg=#ffffff, "view more" 24.0px/w400/#ffffff]
|
||||||
|
COMPONENT 'style=medium' [bg=#d9d9d9, border=#ffffff/1.0px, radius=24.0, pad=L32.0,R32.0,T16.0,B16.0, gap=10.0]
|
||||||
|
FRAME 'Frame 37' [gap=12.0]
|
||||||
|
INSTANCE 'icon/pluse'
|
||||||
|
TEXT 'view more' [bg=#ffffff, "view more" 16.0px/w400/#ffffff]
|
||||||
|
COMPONENT 'style=small' [bg=#77a5ff, radius=24.0, pad=L32.0,R32.0,T16.0,B16.0, gap=10.0]
|
||||||
|
FRAME 'Frame 37' [gap=12.0]
|
||||||
|
TEXT 'view more' [bg=#000000, "view more" 16.0px/w400/#000000]
|
||||||
|
|
||||||
|
## Check box (COMPONENT_SET, id=74:2630)
|
||||||
|
COMPONENT_SET 'Check box' [border=#9747ff/1.0px, radius=5.0]
|
||||||
|
COMPONENT 'state=off' [border=#0d0d0d/1.0px, radius=4.0, pad=L7.0,R7.0,T9.0,B9.0, gap=10.0]
|
||||||
|
VECTOR 'Vector' [bg=#00f0ff]
|
||||||
|
COMPONENT 'state=on' [bg=#77a5ff, radius=4.0, pad=L7.0,R7.0,T9.0,B9.0, gap=10.0]
|
||||||
|
VECTOR 'Vector' [bg=#0d0d0d]
|
||||||
|
|
||||||
|
## Checked/on (COMPONENT, id=74:2636)
|
||||||
|
COMPONENT 'Checked/on' [bg=#ffffff, pad=T3.0,B3.0, gap=14.0]
|
||||||
|
INSTANCE 'Check box' [bg=#77a5ff, radius=4.0, pad=L7.0,R7.0,T9.0,B9.0, gap=10.0]
|
||||||
|
VECTOR 'Vector' [bg=#0d0d0d]
|
||||||
|
TEXT 'Text' [bg=#ffffff, "Text" 16.0px/w400/#ffffff]
|
||||||
|
|
||||||
|
## btn/small (COMPONENT_SET, id=91:3384)
|
||||||
|
COMPONENT_SET 'btn/small' [border=#9747ff/1.0px, radius=5.0]
|
||||||
|
COMPONENT 'state=Default' [bg=#d9d9d9, border=#0d0d0d/1.0px, radius=40.0, pad=L24.0,R24.0,T8.0,B8.0, gap=10.0]
|
||||||
|
FRAME 'Frame 37' [gap=8.0]
|
||||||
|
TEXT 'text' [bg=#0d0d0d, "text" 16.0px/w400/#0d0d0d]
|
||||||
|
INSTANCE 'icon' [bg=#ffffff]
|
||||||
|
COMPONENT 'state=disabled' [bg=#dadada, border=#686868/1.0px, radius=40.0, pad=L24.0,R24.0,T8.0,B8.0, gap=10.0]
|
||||||
|
FRAME 'Frame 37' [gap=8.0]
|
||||||
|
TEXT 'text' [bg=#606060, "text" 16.0px/w400/#606060]
|
||||||
|
INSTANCE 'icon' [bg=#ffffff]
|
||||||
|
COMPONENT 'state=hover' [bg=#d9d9d9, border=#77a5ff/1.0px, radius=40.0, pad=L24.0,R24.0,T8.0,B8.0, gap=10.0]
|
||||||
|
FRAME 'Frame 37' [gap=8.0]
|
||||||
|
TEXT 'text' [bg=#77a5ff, "text" 16.0px/w400/#77a5ff]
|
||||||
|
INSTANCE 'icon' [bg=#ffffff]
|
||||||
|
|
||||||
|
## icon (COMPONENT_SET, id=91:3399)
|
||||||
|
COMPONENT_SET 'icon' [border=#9747ff/1.0px, radius=5.0]
|
||||||
|
COMPONENT 'state=Default' [bg=#ffffff]
|
||||||
|
GROUP 'Group'
|
||||||
|
VECTOR 'Vector'
|
||||||
|
GROUP 'Group'
|
||||||
|
VECTOR 'Vector' [bg=#ffffff]
|
||||||
|
COMPONENT 'state=hover' [bg=#ffffff]
|
||||||
|
GROUP 'Group'
|
||||||
|
VECTOR 'Vector'
|
||||||
|
GROUP 'Group'
|
||||||
|
VECTOR 'Vector' [bg=#77a5ff]
|
||||||
|
|
||||||
|
## logo (COMPONENT_SET, id=147:1118)
|
||||||
|
COMPONENT_SET 'logo' [border=#9747ff/1.0px, radius=5.0, pad=L10.0,R10.0,T10.0,B10.0, gap=20.0]
|
||||||
|
COMPONENT 'Style=PC-1'
|
||||||
|
GROUP 'logo'
|
||||||
|
VECTOR 'Vector' [bg=#ffffff]
|
||||||
|
VECTOR 'Vector' [bg=#ffffff]
|
||||||
|
VECTOR 'Vector' [bg=#ffffff]
|
||||||
|
VECTOR 'Vector' [bg=#ffffff]
|
||||||
|
VECTOR 'Vector' [bg=#ffffff]
|
||||||
|
VECTOR 'Vector' [bg=#ffffff]
|
||||||
|
VECTOR 'Vector' [bg=#ffffff]
|
||||||
|
VECTOR 'Vector' [bg=#ffffff]
|
||||||
|
VECTOR 'Vector' [bg=#ffffff]
|
||||||
|
VECTOR 'Vector' [bg=#ffffff]
|
||||||
|
VECTOR 'Vector' [bg=#ffffff]
|
||||||
|
VECTOR 'Vector' [bg=#ffffff]
|
||||||
|
VECTOR 'Vector' [bg=#ffffff]
|
||||||
|
VECTOR 'Vector' [bg=#ffffff]
|
||||||
|
VECTOR 'Vector' [bg=#ffffff]
|
||||||
|
COMPONENT 'Style=PC-2'
|
||||||
|
FRAME 'Frame 82' [gap=-1.0]
|
||||||
|
FRAME 'Frame 78' [border=#ffffff/1.0px]
|
||||||
|
FRAME 'Frame 79' [border=#ffffff/1.0px]
|
||||||
|
FRAME 'Frame 80' [border=#ffffff/1.0px]
|
||||||
|
FRAME 'Frame 81' [border=#ffffff/1.0px]
|
||||||
|
FRAME 'Frame 83' [gap=-1.0]
|
||||||
|
FRAME 'Frame 78' [border=#ffffff/1.0px]
|
||||||
|
FRAME 'Frame 79' [border=#ffffff/1.0px]
|
||||||
|
FRAME 'Frame 80' [border=#ffffff/1.0px]
|
||||||
|
COMPONENT 'Style=MO'
|
||||||
|
GROUP 'logo'
|
||||||
|
VECTOR 'Vector' [bg=#ffffff]
|
||||||
|
VECTOR 'Vector' [bg=#ffffff]
|
||||||
|
|
||||||
|
## logo (FRAME, id=152:1265)
|
||||||
|
FRAME 'logo'
|
||||||
|
GROUP 'logo'
|
||||||
|
VECTOR 'Vector 3' [border=#ffffff/1.0px]
|
||||||
|
VECTOR 'Vector' [bg=#ffffff]
|
||||||
|
VECTOR 'Vector' [bg=#ffffff]
|
||||||
|
|
||||||
|
## icon (COMPONENT_SET, id=152:1386)
|
||||||
|
COMPONENT_SET 'icon' [border=#9747ff/1.0px, radius=5.0]
|
||||||
|
COMPONENT 'Style=white, Type=open'
|
||||||
|
VECTOR 'Vector 2' [border=#ffffff/1.0px]
|
||||||
|
COMPONENT 'Style=white, Type=close'
|
||||||
|
VECTOR 'Vector 2' [border=#ffffff/1.0px]
|
||||||
|
COMPONENT 'Style=black, Type=close'
|
||||||
|
VECTOR 'Vector 2' [border=#0d0d0d/1.0px]
|
||||||
|
COMPONENT 'Style=black, Type=open'
|
||||||
|
VECTOR 'Vector 2' [border=#0d0d0d/1.0px]
|
||||||
|
|
||||||
|
## Navigation icon (COMPONENT_SET, id=152:1689)
|
||||||
|
COMPONENT_SET 'Navigation icon' [border=#9747ff/1.0px, radius=5.0]
|
||||||
|
COMPONENT 'Style=menu-open'
|
||||||
|
RECTANGLE 'Rectangle 6' [bg=#ffffff, radius=2.0]
|
||||||
|
RECTANGLE 'Rectangle 7' [bg=#ffffff, radius=2.0]
|
||||||
|
RECTANGLE 'Rectangle 8' [bg=#ffffff, radius=2.0]
|
||||||
|
COMPONENT 'Style=menu-close'
|
||||||
|
RECTANGLE 'Rectangle 7' [bg=#ffffff, radius=2.0]
|
||||||
|
RECTANGLE 'Rectangle 8' [bg=#ffffff, radius=2.0]
|
||||||
|
|
||||||
|
## GNB (COMPONENT_SET, id=152:1737)
|
||||||
|
COMPONENT_SET 'GNB' [border=#9747ff/1.0px, radius=5.0, pad=L11.0,R11.0,T20.0,B20.0, gap=10.0]
|
||||||
|
COMPONENT 'Style=pc, Type=Inative' [pad=L32.0,R32.0,T24.0,B24.0, gap=10.0]
|
||||||
|
TEXT 'HOME' [bg=#ffffff, "HOME" 16.0px/w400/#ffffff]
|
||||||
|
COMPONENT 'Style=pc, Type=Active' [bg=#ffffff]
|
||||||
|
INSTANCE 'GNB' [pad=L32.0,R32.0,T24.0,B24.0, gap=10.0]
|
||||||
|
TEXT 'HOME' [bg=#77a5ff, "HOME" 16.0px/w400/#77a5ff]
|
||||||
|
COMPONENT 'Style=mobile, Type=Inative' [pad=L32.0,R32.0,T24.0,B24.0, gap=10.0]
|
||||||
|
TEXT 'HOME' [bg=#ffffff, "HOME" 32.0px/w400/#ffffff]
|
||||||
|
COMPONENT 'Style=mobile, Type=Active' [pad=L32.0,R32.0,T24.0,B24.0, gap=10.0]
|
||||||
|
TEXT 'HOME' [bg=#77a5ff, "HOME" 32.0px/w400/#77a5ff]
|
||||||
|
|
||||||
|
## footer (COMPONENT_SET, id=154:1945)
|
||||||
|
COMPONENT_SET 'footer' [border=#9747ff/1.0px, radius=5.0]
|
||||||
|
COMPONENT 'Style=pc' [bg=#0d0d0d, pad=L120.0,R120.0,T60.0,B60.0, gap=325.0]
|
||||||
|
TEXT 'THE BODA LAB' [bg=#ffffff, "THE\nBODA LAB" 32.0px/w600/#ffffff]
|
||||||
|
FRAME 'Frame 39' [gap=20.0]
|
||||||
|
FRAME 'Frame 40' [gap=8.0]
|
||||||
|
FRAME 'Frame 41' [gap=8.0]
|
||||||
|
TEXT '© 2026 BODA LAB' [bg=#ffffff, "© 2026 BODA LAB" 14.0px/w400/#ffffff]
|
||||||
|
COMPONENT 'Style=mobile' [bg=#0d0d0d]
|
||||||
|
FRAME 'Frame 42' [pad=L40.0,R40.0,T40.0,B40.0, gap=46.0]
|
||||||
|
TEXT 'THE BODA LAB' [bg=#ffffff, "THE\nBODA LAB" 32.0px/w600/#ffffff]
|
||||||
|
FRAME 'Frame 39' [gap=20.0]
|
||||||
|
TEXT '© 2026 BODA LAB' [bg=#ffffff, "© 2026 BODA LAB" 14.0px/w400/#ffffff]
|
||||||
|
|
||||||
|
## List (COMPONENT, id=168:719)
|
||||||
|
COMPONENT 'List' [gap=24.0]
|
||||||
|
FRAME 'Frame 31' [gap=912.0]
|
||||||
|
TEXT 'Front-end developer' [bg=#ffffff, "프로젝트 문의" 32.0px/w400/#ffffff]
|
||||||
|
INSTANCE 'icon'
|
||||||
|
VECTOR 'Vector 2' [border=#ffffff/1.0px]
|
||||||
|
LINE 'Line 4' [border=#ffffff/1.0px]
|
||||||
|
|
||||||
|
## icon/pluse (COMPONENT_SET, id=154:2118)
|
||||||
|
COMPONENT_SET 'icon/pluse' [border=#9747ff/1.0px, radius=5.0, pad=L20.0,R20.0,T20.0,B20.0, gap=18.0]
|
||||||
|
COMPONENT 'Style=large, Name=Plus'
|
||||||
|
VECTOR 'Vector 1' [border=#ffffff/2.0px]
|
||||||
|
VECTOR 'Vector 2' [border=#ffffff/2.0px]
|
||||||
|
COMPONENT 'Style=medium, Name=Plus'
|
||||||
|
VECTOR 'Vector 1' [border=#ffffff/1.0px]
|
||||||
|
VECTOR 'Vector 2' [border=#ffffff/1.0px]
|
||||||
|
COMPONENT 'Style=small, Name=Plus'
|
||||||
|
VECTOR 'Vector 1' [border=#ffffff/1.399999976158142px]
|
||||||
|
VECTOR 'Vector 2' [border=#ffffff/1.399999976158142px]
|
||||||
|
COMPONENT 'Style=large, Name=Minus'
|
||||||
|
VECTOR 'Vector 2' [border=#ffffff/2.0px]
|
||||||
|
COMPONENT 'Style=medium, Name=Minus'
|
||||||
|
VECTOR 'Vector 2' [border=#ffffff/1.0px]
|
||||||
|
COMPONENT 'Style=small, Name=Minus'
|
||||||
|
VECTOR 'Vector 2' [border=#ffffff/1.399999976158142px]
|
||||||
|
|
||||||
|
## Map (COMPONENT_SET, id=168:598)
|
||||||
|
COMPONENT_SET 'Map' [border=#9747ff/1.0px, radius=5.0, pad=L20.0,R20.0,T20.0,B20.0, gap=20.0]
|
||||||
|
COMPONENT 'Style=pc' [bg=#0d0d0d]
|
||||||
|
GROUP 'map'
|
||||||
|
GROUP 'Group 33'
|
||||||
|
FRAME 'Location pin' [bg=#ffffff]
|
||||||
|
TEXT 'Gasan Digital Complex Station' [bg=#4c64c6, "Gasan \nDigital Complex \nStatio" 12.0px/w400/#4c64c6]
|
||||||
|
TEXT 'BODA Lab' [bg=#ffffff, "BODA Lab" 14.0px/w600/#ffffff]
|
||||||
|
TEXT 'Gasan Digital Complex Station' [bg=#697215, "Gasan \nDigital Complex \nStatio" 12.0px/w400/#697215]
|
||||||
|
RECTANGLE 'Rectangle 1'
|
||||||
|
RECTANGLE 'Rectangle 2'
|
||||||
|
RECTANGLE 'Rectangle 3'
|
||||||
|
COMPONENT 'Style=mobile' [bg=#0d0d0d]
|
||||||
|
GROUP 'map'
|
||||||
|
GROUP 'Group 33'
|
||||||
|
FRAME 'Location pin' [bg=#ffffff]
|
||||||
|
TEXT 'Gasan Digital Complex Station' [bg=#4c64c6, "Gasan \nDigital Complex \nStatio" 12.0px/w400/#4c64c6]
|
||||||
|
TEXT 'BODA Lab' [bg=#ffffff, "BODA Lab" 14.0px/w600/#ffffff]
|
||||||
|
TEXT 'Gasan Digital Complex Station' [bg=#697215, "Gasan \nDigital Complex \nStatio" 12.0px/w400/#697215]
|
||||||
|
RECTANGLE 'Rectangle 1'
|
||||||
|
RECTANGLE 'Rectangle 2'
|
||||||
|
|
||||||
|
## Indicator (COMPONENT, id=168:816)
|
||||||
|
COMPONENT 'Indicator' [gap=8.0]
|
||||||
|
ELLIPSE 'Ellipse 8' [bg=#77a5ff]
|
||||||
|
ELLIPSE 'Ellipse 9' [bg=#ffffff]
|
||||||
|
ELLIPSE 'Ellipse 10' [bg=#ffffff]
|
||||||
|
|
||||||
|
## markus-winkler-tUEnyweZjEU-unsplash 1 (RECTANGLE, id=284:672)
|
||||||
|
RECTANGLE 'markus-winkler-tUEnyweZjEU-unsplash 1'
|
||||||
|
|
||||||
|
## sarah-dorweiler-gIx3YO42hpM-unsplash 1 (RECTANGLE, id=284:676)
|
||||||
|
RECTANGLE 'sarah-dorweiler-gIx3YO42hpM-unsplash 1'
|
||||||
|
|
||||||
|
## Thumbnails (COMPONENT_SET, id=293:685)
|
||||||
|
COMPONENT_SET 'Thumbnails' [border=#9747ff/1.0px, radius=5.0, pad=L20.0,R20.0,T20.0,B20.0, gap=70.0]
|
||||||
|
COMPONENT '프로젝트=신한은행, 사이즈=XL' [radius=8.0]
|
||||||
|
RECTANGLE 'markus-winkler-tUEnyweZjEU-unsplash 2'
|
||||||
|
GROUP 'Mask group'
|
||||||
|
VECTOR 'Vector 4' [bg=#d9d9d9]
|
||||||
|
RECTANGLE 'IMG_6977 1'
|
||||||
|
COMPONENT '프로젝트=신한은행, 사이즈=L' [radius=8.0]
|
||||||
|
RECTANGLE 'markus-winkler-tUEnyweZjEU-unsplash 2'
|
||||||
|
GROUP 'Mask group'
|
||||||
|
VECTOR 'Vector 4' [bg=#d9d9d9]
|
||||||
|
RECTANGLE 'IMG_6977 1'
|
||||||
|
COMPONENT '프로젝트=신한은행, 사이즈=M' [radius=8.0]
|
||||||
|
RECTANGLE 'markus-winkler-tUEnyweZjEU-unsplash 2'
|
||||||
|
GROUP 'Mask group'
|
||||||
|
VECTOR 'Vector 4' [bg=#d9d9d9]
|
||||||
|
RECTANGLE 'IMG_6977 1'
|
||||||
|
COMPONENT '프로젝트=신한은행, 사이즈=S' [radius=8.0]
|
||||||
|
RECTANGLE 'markus-winkler-tUEnyweZjEU-unsplash 2'
|
||||||
|
GROUP 'Mask group'
|
||||||
|
VECTOR 'Vector 4' [bg=#d9d9d9]
|
||||||
|
RECTANGLE 'IMG_6977 1'
|
||||||
|
COMPONENT '프로젝트=SK그룹, 사이즈=XL' [radius=8.0]
|
||||||
|
RECTANGLE 'unsplash:LqBCBH7b1k8'
|
||||||
|
FRAME 'Frame 44' [radius=11.53125]
|
||||||
|
RECTANGLE 'image 1'
|
||||||
|
COMPONENT '프로젝트=SK그룹, 사이즈=L' [radius=8.0]
|
||||||
|
RECTANGLE 'unsplash:LqBCBH7b1k8'
|
||||||
|
FRAME 'Frame 44' [radius=9.75]
|
||||||
|
RECTANGLE 'image 1'
|
||||||
|
COMPONENT '프로젝트=SK그룹, 사이즈=M' [radius=8.0]
|
||||||
|
RECTANGLE 'unsplash:LqBCBH7b1k8'
|
||||||
|
FRAME 'Frame 44' [radius=7.96875]
|
||||||
|
RECTANGLE 'image 1'
|
||||||
|
COMPONENT '프로젝트=SK그룹, 사이즈=S' [radius=8.0]
|
||||||
|
RECTANGLE 'unsplash:LqBCBH7b1k8'
|
||||||
|
FRAME 'Frame 44' [radius=5.234375]
|
||||||
|
RECTANGLE 'image 1'
|
||||||
|
COMPONENT '프로젝트=PNS네트웍스, 사이즈=XL' [radius=8.0]
|
||||||
|
RECTANGLE 'unsplash:iABDznUDy6c'
|
||||||
|
FRAME 'Frame 52'
|
||||||
|
RECTANGLE 'image 2'
|
||||||
|
COMPONENT '프로젝트=PNS네트웍스, 사이즈=L' [radius=8.0]
|
||||||
|
RECTANGLE 'unsplash:iABDznUDy6c'
|
||||||
|
FRAME 'Frame 52'
|
||||||
|
RECTANGLE 'image 2'
|
||||||
|
COMPONENT '프로젝트=PNS네트웍스, 사이즈=M' [radius=8.0]
|
||||||
|
RECTANGLE 'unsplash:iABDznUDy6c'
|
||||||
|
FRAME 'Frame 52'
|
||||||
|
RECTANGLE 'image 2'
|
||||||
|
COMPONENT '프로젝트=PNS네트웍스, 사이즈=S' [radius=8.0]
|
||||||
|
RECTANGLE 'unsplash:iABDznUDy6c'
|
||||||
|
FRAME 'Frame 52'
|
||||||
|
RECTANGLE 'image 2'
|
||||||
|
COMPONENT '프로젝트=롯데렌터카1, 사이즈=XL' [radius=8.0]
|
||||||
|
RECTANGLE 'brian-mcgowan-WJ0WWNdmJ3Y-unsplash 1'
|
||||||
|
FRAME 'Frame 54'
|
||||||
|
RECTANGLE 'image 4'
|
||||||
|
COMPONENT '프로젝트=롯데렌터카1, 사이즈=L' [radius=8.0]
|
||||||
|
RECTANGLE 'brian-mcgowan-WJ0WWNdmJ3Y-unsplash 1'
|
||||||
|
FRAME 'Frame 54'
|
||||||
|
RECTANGLE 'image 4'
|
||||||
|
COMPONENT '프로젝트=롯데렌터카1, 사이즈=M' [radius=8.0]
|
||||||
|
RECTANGLE 'brian-mcgowan-WJ0WWNdmJ3Y-unsplash 1'
|
||||||
|
FRAME 'Frame 54'
|
||||||
|
RECTANGLE 'image 4'
|
||||||
|
COMPONENT '프로젝트=롯데렌터카1, 사이즈=S' [radius=8.0]
|
||||||
|
RECTANGLE 'brian-mcgowan-WJ0WWNdmJ3Y-unsplash 1'
|
||||||
|
FRAME 'Frame 54'
|
||||||
|
RECTANGLE 'image 4'
|
||||||
|
COMPONENT '프로젝트=오뚜기, 사이즈=XL' [radius=8.0]
|
||||||
|
RECTANGLE 'unsplash:zFOm6KzA-7g'
|
||||||
|
FRAME 'Frame 56'
|
||||||
|
RECTANGLE 'image 5'
|
||||||
|
FRAME 'Frame 76' [bg=#ebecee]
|
||||||
|
COMPONENT '프로젝트=오뚜기, 사이즈=L' [radius=8.0]
|
||||||
|
RECTANGLE 'unsplash:zFOm6KzA-7g'
|
||||||
|
FRAME 'Frame 76' [bg=#ebecee]
|
||||||
|
FRAME 'Frame 56'
|
||||||
|
RECTANGLE 'image 5'
|
||||||
|
COMPONENT '프로젝트=오뚜기, 사이즈=M' [radius=8.0]
|
||||||
|
RECTANGLE 'unsplash:zFOm6KzA-7g'
|
||||||
|
FRAME 'Frame 76' [bg=#ebecee]
|
||||||
|
FRAME 'Frame 56'
|
||||||
|
RECTANGLE 'image 5'
|
||||||
|
COMPONENT '프로젝트=오뚜기, 사이즈=S' [radius=8.0]
|
||||||
|
RECTANGLE 'unsplash:zFOm6KzA-7g'
|
||||||
|
FRAME 'Frame 76' [bg=#ebecee]
|
||||||
|
FRAME 'Frame 56'
|
||||||
|
RECTANGLE 'image 5'
|
||||||
|
COMPONENT '프로젝트=구스다운, 사이즈=XL' [radius=8.0]
|
||||||
|
RECTANGLE 'tech-daily-dr9Dp1RVYgQ-unsplash 1'
|
||||||
|
FRAME 'Frame 60'
|
||||||
|
RECTANGLE 'image 7'
|
||||||
|
COMPONENT '프로젝트=구스다운, 사이즈=L' [radius=8.0]
|
||||||
|
RECTANGLE 'tech-daily-dr9Dp1RVYgQ-unsplash 1'
|
||||||
|
FRAME 'Frame 60'
|
||||||
|
RECTANGLE 'image 7'
|
||||||
|
COMPONENT '프로젝트=구스다운, 사이즈=M' [radius=8.0]
|
||||||
|
RECTANGLE 'tech-daily-dr9Dp1RVYgQ-unsplash 1'
|
||||||
|
FRAME 'Frame 60'
|
||||||
|
RECTANGLE 'image 7'
|
||||||
|
COMPONENT '프로젝트=구스다운, 사이즈=S' [radius=8.0]
|
||||||
|
RECTANGLE 'tech-daily-dr9Dp1RVYgQ-unsplash 1'
|
||||||
|
FRAME 'Frame 60'
|
||||||
|
RECTANGLE 'image 7'
|
||||||
|
COMPONENT '프로젝트=더한옥헤리티지하우스, 사이즈=XL' [radius=8.0]
|
||||||
|
RECTANGLE 'daniel-korpai-oWiEeTIxYvk-unsplash 1'
|
||||||
|
FRAME 'Frame 58' [bg=#e5cdcd, radius=32.0]
|
||||||
|
RECTANGLE 'image 6'
|
||||||
|
COMPONENT '프로젝트=더한옥헤리티지하우스, 사이즈=L' [radius=8.0]
|
||||||
|
RECTANGLE 'daniel-korpai-oWiEeTIxYvk-unsplash 1'
|
||||||
|
FRAME 'Frame 58' [bg=#e5cdcd, radius=27.05691146850586]
|
||||||
|
RECTANGLE 'image 6'
|
||||||
|
COMPONENT '프로젝트=더한옥헤리티지하우스, 사이즈=M' [radius=8.0]
|
||||||
|
RECTANGLE 'daniel-korpai-oWiEeTIxYvk-unsplash 1'
|
||||||
|
FRAME 'Frame 58' [bg=#e5cdcd, radius=22.11382293701172]
|
||||||
|
RECTANGLE 'image 6'
|
||||||
|
COMPONENT '프로젝트=더한옥헤리티지하우스, 사이즈=S' [radius=8.0]
|
||||||
|
RECTANGLE 'daniel-korpai-oWiEeTIxYvk-unsplash 1'
|
||||||
|
FRAME 'Frame 58' [bg=#e5cdcd, radius=14.52574634552002]
|
||||||
|
RECTANGLE 'image 6'
|
||||||
|
COMPONENT '프로젝트=그린카, 사이즈=XL' [radius=8.0]
|
||||||
|
RECTANGLE 'unsplash:mO-uPVwGVI0'
|
||||||
|
FRAME 'Frame 63' [radius=20.0]
|
||||||
|
RECTANGLE 'image 10'
|
||||||
|
COMPONENT '프로젝트=그린카, 사이즈=L' [radius=8.0]
|
||||||
|
RECTANGLE 'unsplash:mO-uPVwGVI0'
|
||||||
|
FRAME 'Frame 63' [radius=16.91057014465332]
|
||||||
|
RECTANGLE 'image 10'
|
||||||
|
COMPONENT '프로젝트=그린카, 사이즈=M' [radius=8.0]
|
||||||
|
RECTANGLE 'unsplash:mO-uPVwGVI0'
|
||||||
|
FRAME 'Frame 63' [radius=13.821139335632324]
|
||||||
|
RECTANGLE 'image 10'
|
||||||
|
COMPONENT '프로젝트=그린카, 사이즈=S' [radius=8.0]
|
||||||
|
RECTANGLE 'unsplash:mO-uPVwGVI0'
|
||||||
|
FRAME 'Frame 63' [radius=9.078591346740723]
|
||||||
|
RECTANGLE 'image 10'
|
||||||
|
COMPONENT '프로젝트=프로스펙스, 사이즈=XL' [radius=8.0]
|
||||||
|
RECTANGLE 'unsplash:QeJ943yEd1E'
|
||||||
|
FRAME 'Frame 68' [bg=#000000]
|
||||||
|
RECTANGLE 'image 11'
|
||||||
|
COMPONENT '프로젝트=프로스펙스, 사이즈=L' [radius=8.0]
|
||||||
|
RECTANGLE 'unsplash:QeJ943yEd1E'
|
||||||
|
FRAME 'Frame 68' [bg=#000000]
|
||||||
|
RECTANGLE 'image 11'
|
||||||
|
COMPONENT '프로젝트=프로스펙스, 사이즈=M' [radius=8.0]
|
||||||
|
RECTANGLE 'unsplash:QeJ943yEd1E'
|
||||||
|
FRAME 'Frame 68' [bg=#000000]
|
||||||
|
RECTANGLE 'image 11'
|
||||||
|
COMPONENT '프로젝트=프로스펙스, 사이즈=S' [radius=8.0]
|
||||||
|
RECTANGLE 'unsplash:QeJ943yEd1E'
|
||||||
|
FRAME 'Frame 68' [bg=#000000]
|
||||||
|
RECTANGLE 'image 11'
|
||||||
|
COMPONENT '프로젝트=중소기업창업, 사이즈=XL' [bg=#7893c6, radius=8.0]
|
||||||
|
FRAME 'Frame 69' [bg=#000000, radius=16.0]
|
||||||
|
FRAME 'Frame 70' [bg=#ffffff, radius=12.0]
|
||||||
|
COMPONENT '프로젝트=중소기업창업, 사이즈=L' [bg=#7893c6, radius=8.0]
|
||||||
|
FRAME 'Frame 69' [bg=#000000, radius=13.52845573425293]
|
||||||
|
FRAME 'Frame 70' [bg=#ffffff, radius=10.146341323852539]
|
||||||
|
COMPONENT '프로젝트=중소기업창업, 사이즈=M' [bg=#7893c6, radius=8.0]
|
||||||
|
FRAME 'Frame 69' [bg=#000000, radius=11.056910514831543]
|
||||||
|
FRAME 'Frame 70' [bg=#ffffff, radius=8.292682647705078]
|
||||||
|
COMPONENT '프로젝트=중소기업창업, 사이즈=S' [bg=#7893c6, radius=8.0]
|
||||||
|
FRAME 'Frame 69' [bg=#000000, radius=7.26287317276001]
|
||||||
|
FRAME 'Frame 70' [bg=#ffffff, radius=5.447154521942139]
|
||||||
|
COMPONENT '프로젝트=롯데렌터카2, 사이즈=XL' [radius=8.0]
|
||||||
|
RECTANGLE 'unsplash:15LQr2QttqU'
|
||||||
|
FRAME 'Frame 72' [bg=#ffffff, radius=8.0]
|
||||||
|
RECTANGLE 'image 13'
|
||||||
|
COMPONENT '프로젝트=롯데렌터카2, 사이즈=L' [radius=8.0]
|
||||||
|
RECTANGLE 'unsplash:15LQr2QttqU'
|
||||||
|
FRAME 'Frame 72' [bg=#ffffff, radius=6.857142925262451]
|
||||||
|
RECTANGLE 'image 13'
|
||||||
|
COMPONENT '프로젝트=롯데렌터카2, 사이즈=M' [radius=8.0]
|
||||||
|
RECTANGLE 'unsplash:15LQr2QttqU'
|
||||||
|
FRAME 'Frame 72' [bg=#ffffff, radius=5.604395866394043]
|
||||||
|
RECTANGLE 'image 13'
|
||||||
|
COMPONENT '프로젝트=롯데렌터카2, 사이즈=S' [radius=8.0]
|
||||||
|
RECTANGLE 'unsplash:15LQr2QttqU'
|
||||||
|
FRAME 'Frame 72' [bg=#ffffff, radius=3.681318759918213]
|
||||||
|
RECTANGLE 'image 13'
|
||||||
|
COMPONENT '프로젝트=KB국민은행, 사이즈=XL' [radius=8.0]
|
||||||
|
RECTANGLE 'unsplash:A1V4vwaYJoU'
|
||||||
|
FRAME 'Frame 74' [bg=#ffffff, radius=10.0]
|
||||||
|
RECTANGLE 'image 14'
|
||||||
|
COMPONENT '프로젝트=KB국민은행, 사이즈=L' [radius=8.0]
|
||||||
|
RECTANGLE 'unsplash:A1V4vwaYJoU'
|
||||||
|
FRAME 'Frame 74' [bg=#ffffff, radius=8.45528507232666]
|
||||||
|
RECTANGLE 'image 14'
|
||||||
|
COMPONENT '프로젝트=KB국민은행, 사이즈=M' [radius=8.0]
|
||||||
|
RECTANGLE 'unsplash:A1V4vwaYJoU'
|
||||||
|
FRAME 'Frame 74' [bg=#ffffff, radius=6.910569667816162]
|
||||||
|
RECTANGLE 'image 14'
|
||||||
|
COMPONENT '프로젝트=KB국민은행, 사이즈=S' [radius=8.0]
|
||||||
|
RECTANGLE 'unsplash:A1V4vwaYJoU'
|
||||||
|
FRAME 'Frame 74' [bg=#ffffff, radius=4.539295673370361]
|
||||||
|
RECTANGLE 'image 14'
|
||||||
|
COMPONENT '프로젝트=코나아이, 사이즈=XL' [radius=8.0]
|
||||||
|
RECTANGLE 'unsplash:fj31I5HoOIQ'
|
||||||
|
FRAME 'Frame 75' [bg=#ffffff]
|
||||||
|
RECTANGLE 'image 15'
|
||||||
|
FRAME 'Frame 77' [bg=#b9babc]
|
||||||
|
COMPONENT '프로젝트=코나아이, 사이즈=L' [radius=8.0]
|
||||||
|
RECTANGLE 'unsplash:fj31I5HoOIQ'
|
||||||
|
FRAME 'Frame 75' [bg=#ffffff]
|
||||||
|
RECTANGLE 'image 15'
|
||||||
|
FRAME 'Frame 77' [bg=#b9babc]
|
||||||
|
COMPONENT '프로젝트=코나아이, 사이즈=M' [radius=8.0]
|
||||||
|
RECTANGLE 'unsplash:fj31I5HoOIQ'
|
||||||
|
FRAME 'Frame 75' [bg=#ffffff]
|
||||||
|
RECTANGLE 'image 15'
|
||||||
|
FRAME 'Frame 77' [bg=#b9babc]
|
||||||
|
COMPONENT '프로젝트=코나아이, 사이즈=S' [radius=8.0]
|
||||||
|
RECTANGLE 'unsplash:fj31I5HoOIQ'
|
||||||
|
FRAME 'Frame 75' [bg=#ffffff]
|
||||||
|
RECTANGLE 'image 15'
|
||||||
|
FRAME 'Frame 77' [bg=#b9babc]
|
||||||
|
|
||||||
|
## 썸네일 사이즈 (FRAME, id=294:1713)
|
||||||
|
FRAME '썸네일 사이즈' [gap=80.0]
|
||||||
|
FRAME 'Thumnail' [bg=#924f4f]
|
||||||
|
FRAME 'Frame 45' [gap=40.0]
|
||||||
|
TEXT 'XL' [bg=#ffffff, "XL" 100.0px/w400/#ffffff]
|
||||||
|
TEXT '738 x 489' [bg=#ffffff, "738 x 489" 100.0px/w400/#ffffff]
|
||||||
|
FRAME 'Thumnail' [bg=#924f4f]
|
||||||
|
FRAME 'Frame 46' [gap=34.0]
|
||||||
|
TEXT 'L' [bg=#ffffff, "L" 84.55284881591797px/w400/#ffffff]
|
||||||
|
TEXT '624 x 396' [bg=#ffffff, "624 x 396" 84.55284881591797px/w400/#ffffff]
|
||||||
|
FRAME 'Thumnail' [bg=#924f4f]
|
||||||
|
FRAME 'Frame 48' [gap=24.0]
|
||||||
|
TEXT 'M' [bg=#ffffff, "M" 69.10569763183594px/w400/#ffffff]
|
||||||
|
FRAME 'Frame 47' [pad=L10.0,R10.0,T10.0,B10.0, gap=10.0]
|
||||||
|
FRAME 'Thumnail' [bg=#924f4f]
|
||||||
|
FRAME 'Frame 50' [gap=13.0]
|
||||||
|
TEXT 'S' [bg=#ffffff, "S" 45.3929557800293px/w400/#ffffff]
|
||||||
|
FRAME 'Frame 49' [pad=L10.0,R10.0,T10.0,B10.0, gap=10.0]
|
||||||
|
|
||||||
|
## history (COMPONENT_SET, id=2065:989)
|
||||||
|
COMPONENT_SET 'history' [border=#8a38f5/1.0px, radius=5.0]
|
||||||
|
COMPONENT 'Style=horizontal-pc' [gap=16.0]
|
||||||
|
FRAME 'Frame 84' [gap=2.0]
|
||||||
|
FRAME 'Frame 87' [gap=8.0]
|
||||||
|
TEXT '12.01' [bg=#7b7b7b, "12.01" 14.0px/w400/#7b7b7b]
|
||||||
|
TEXT '12.01' [bg=#696969, "12.01" 14.0px/w400/#696969]
|
||||||
|
COMPONENT 'Style=horizontal-mo' [gap=16.0]
|
||||||
|
FRAME 'Frame 84' [gap=2.0]
|
||||||
|
FRAME 'Frame 87' [gap=8.0]
|
||||||
|
TEXT '12.01' [bg=#7b7b7b, "12.01" 12.0px/w400/#7b7b7b]
|
||||||
|
TEXT '12.01' [bg=#696969, "12.01" 12.0px/w400/#696969]
|
||||||
|
|
||||||
|
## Badge (COMPONENT, id=2128:1700)
|
||||||
|
COMPONENT 'Badge' [bg=#ffffff, border=#0071f2/1.0px, radius=4.0, pad=L6.0,R6.0,T4.0,B4.0, gap=10.0]
|
||||||
|
TEXT 'Finance' [bg=#0071f2, "Finance" 8.0px/w700/#0071f2]
|
||||||
|
|
||||||
|
## Icon_button (COMPONENT_SET, id=2076:1353)
|
||||||
|
COMPONENT_SET 'Icon_button' [border=#8a38f5/1.0px, radius=5.0]
|
||||||
|
COMPONENT 'Style=Default' [bg=#ffffff]
|
||||||
|
ELLIPSE 'Ellipse 11' [border=#0d0d0d/0.9375px]
|
||||||
|
INSTANCE 'icon/pluse'
|
||||||
|
VECTOR 'Vector 1' [border=#0d0d0d/1.399999976158142px]
|
||||||
|
VECTOR 'Vector 2' [border=#0d0d0d/1.399999976158142px]
|
||||||
|
COMPONENT 'Style=Hover' [bg=#ffffff]
|
||||||
|
ELLIPSE 'Ellipse 11' [bg=#0d0d0d]
|
||||||
|
INSTANCE 'icon/pluse'
|
||||||
|
VECTOR 'Vector 1' [border=#ffffff/1.399999976158142px]
|
||||||
|
VECTOR 'Vector 2' [border=#ffffff/1.399999976158142px]
|
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,47 @@
|
||||||
|
# 동작(인터랙션) 주석 — `NEW` 섹션에 흩어져 있던 디자이너 노트
|
||||||
|
|
||||||
|
`Screen Pages` 캔버스의 `NEW` 섹션 안에는 `MAIN_NEW_PC` / `MAIN_NEW_MO` 프레임 외에도, 같은 레벨에 동작 스펙을 적은 TEXT 노드와 별도 모달/팝업 프레임이 형제로 놓여 있었다. 화면 자체(`01-home-pc.json` 등)만 봐서는 안 보이는 내용이라 따로 정리한다.
|
||||||
|
|
||||||
|
이 폴더의 13개 섹션 `.txt` 안에는 이런 주석이 **섞여 있지 않음**을 확인함 (`grep`으로 "노출/더보기/유효성/동의/인터렉션/참조/롤오버" 검색 — 매칭된 건 06-contact의 체크박스 라벨 텍스트("[필수] 개인정보 수집 및 이용 동의") 하나뿐이고, 이미 알고 있던 화면 텍스트임).
|
||||||
|
|
||||||
|
## 구현에 영향 있는 것
|
||||||
|
|
||||||
|
- **HISTORY 아코디언은 단일 열림(exclusive)** (`id 2319:2231`)
|
||||||
|
> 아코디언으로 구성. 해당 영역 진입 시 2025년도 히스토리 펼쳐진 상태가 디폴트. 다른 연도 + 버튼 선택 시 펼쳐 있던 영역 닫고 열기.
|
||||||
|
|
||||||
|
현재 `src/js/main.js`의 `.history__yearToggle` 클릭 핸들러는 클릭된 그룹만 토글하고 다른 그룹은 안 건드림 → 여러 연도를 동시에 열 수 있음. 스펙대로면 한 그룹을 열 때 다른 그룹은 닫혀야 함.
|
||||||
|
|
||||||
|
- **PROJECT 더보기 = 페이지네이션** (`id 2319:2116`, PROJECT 섹션 근처)
|
||||||
|
> 처음 10개 노출, 더보기 시 10개.
|
||||||
|
|
||||||
|
현재 `index.html`의 `.project__grid`는 전체 카드를 한번에 렌더링하고 `.btnMore`는 그냥 정적 버튼. 10개만 보이게 하고 클릭 시 10개씩 추가 노출하는 JS가 없음.
|
||||||
|
|
||||||
|
- **Recruitment 태그 더보기 = 페이지네이션** (`id 2319:5680`, mobile Expertise 근처)
|
||||||
|
> 처음 6개 노출, 더보기 시 6개.
|
||||||
|
|
||||||
|
`.careerTags`도 마찬가지로 전부 렌더링되어 있고 더보기 동작 없음.
|
||||||
|
|
||||||
|
- **개인정보 수집·이용 동의 모달** (`09-privacy-modal-pc.json` = node `2319:2118`, `09-privacy-modal-mobile.json` = node `2376:2184`)
|
||||||
|
PC/모바일 둘 다 `06_Expertise_popup`(또는 mobile `06_Expertise`) 프레임 안에 `MODAL` 자식으로 풀텍스트 약관 + "동의합니다" 버튼이 디자인되어 있음. 텍스트 내용(PC/모바일 동일):
|
||||||
|
> 1. 개인정보의 수집 및 이용 목적 — 회사는 고객 문의에 대한 답변 제공 및 원활한 의사소통 경로 확보를 목적으로 개인정보를 수집 및 이용합니다.
|
||||||
|
> 2. 수집하는 개인정보의 항목 — 필수항목: 회사명, 담당자 이름, 연락처, 이메일
|
||||||
|
> 3. 개인정보의 보유 및 이용 기간 — 원칙적으로 개인정보 수집 및 이용목적이 달성된 후에는 해당 정보를 지체 없이 파기. 소비자 불만/분쟁처리 기록: 3년, 기타 문의사항: 처리완료 후 6개월(또는 1년).
|
||||||
|
> 4. 동의를 거부할 권리 및 동의 거부에 따른 불이익 — 거부 시 문의 접수 및 답변 서비스 이용이 제한될 수 있음.
|
||||||
|
|
||||||
|
현재 `_contact.scss`/`index.html`의 `.contactForm__checkbox`는 라벨 텍스트만 있고, 클릭 시 이 내용을 보여주는 모달이 없음.
|
||||||
|
|
||||||
|
- **SEND 버튼 유효성 검증** (`id 2319:5997`, Contact 영역 근처)
|
||||||
|
> SEND버튼 선택 시 입력 항목·개인정보 동의 필수 항목 유효성 체크. 미입력 항목 있을 경우 Alert "필수 항목을 확인해 주세요". 모두 완료 시 Alert "전송 완료".
|
||||||
|
|
||||||
|
현재 `main.js`에는 `.btnSend` 클릭 시 폼 검증/알럿 로직이 없음 (폼 자체도 실제 전송 엔드포인트가 없어 프론트만으로는 "전송 완료"가 무엇을 의미하는지도 확인 필요).
|
||||||
|
|
||||||
|
## 참고용, 영향 없음
|
||||||
|
|
||||||
|
- **footer 전용 노드 존재 확인** (`08-footer-instance-pc.json` = node `2247:2294`). 예전 기록("footer 전용 노드 없음")이 사실과 달랐음. 내용(THE BODA LAB / Mail·Tel / © 2026 BODA LAB) 확인해보니 현재 구현과 이미 일치 — 수정 불필요.
|
||||||
|
- **HISTORY 중복 프레임** (`10-history-duplicate-ref.json` = node `2301:1896`). 주석 옆에 참고용으로 복제해둔 사본으로 추정, 내용은 원본(`03-history-pc.json`)과 동일.
|
||||||
|
- **외부 레퍼런스 링크** (홈/ABOUT 인터랙션 참조용 외부 사이트, `id 2317:2106`/`2319:2110`/`2378:2292`) — 애니메이션 영감용 링크일 뿐 직접 가져올 사양은 아님.
|
||||||
|
- **"썸네일 롤오버시 크기 변화 효과"** (`id 2378:2293`) — 이미 `_project.scss`의 `.project__card:hover .project__thumbImg { transform: scale(1.04); }`로 구현되어 있음. 일치.
|
||||||
|
|
||||||
|
## 결론
|
||||||
|
|
||||||
|
스타일(폰트/색상/간격/보더)은 이제 거의 다 받았다고 봐도 되지만, **동작(behavior) 스펙은 이번에 처음 발견**했고 위 4가지(아코디언 단일열림, PROJECT/태그 더보기 페이지네이션, 개인정보 동의 모달, SEND 유효성 검증)는 아직 구현 안 됨. 구현 여부는 별도로 우선순위 정해서 진행.
|
||||||
|
|
@ -0,0 +1,99 @@
|
||||||
|
# Figma 섹션별 스펙 JSON 모음
|
||||||
|
|
||||||
|
## 왜 이 폴더가 있는가
|
||||||
|
|
||||||
|
`figma-mcp`의 `add_figma_file` 도구는 **항상 문서 전체**(`01_HOME`부터)를 JSON으로 덤프하고, URL에 `node-id`를 넣어도 무시한다. 파일이 커서 도구 결과 토큰 한도(약 25,000 토큰)에 걸려 `03_HISTORY` 중반에서 항상 잘리기 때문에, `04_VISION`부터는 이 방법으로 데이터를 받은 적이 없었다.
|
||||||
|
|
||||||
|
대신 Figma REST API의 `nodes` 엔드포인트는 `ids` 파라미터로 **노드 하나만 스코프해서** 받을 수 있다. `.mcp.json`에 이미 설정된 `FIGMA_API_KEY`로 직접 호출하면 섹션당 수십 KB 수준이라 잘리지 않는다.
|
||||||
|
|
||||||
|
```bash
|
||||||
|
curl -s -H "X-Figma-Token: $FIGMA_API_KEY" \
|
||||||
|
"https://api.figma.com/v1/files/MnwN1Uzg5F6ks9Clr1brLW/nodes?ids=<node-id>" \
|
||||||
|
-o "<name>.json"
|
||||||
|
```
|
||||||
|
|
||||||
|
`$FIGMA_API_KEY`는 프로젝트 루트 `.mcp.json`의 `mcpServers.figma.env.FIGMA_API_KEY` 값이다 (`.mcp.json`은 `.gitignore` 대상이라 이 문서에는 실제 키를 적지 않는다).
|
||||||
|
|
||||||
|
## 파일 구성
|
||||||
|
|
||||||
|
섹션마다 두 파일이 있다:
|
||||||
|
- `*.json` — Figma REST API 원본 응답 (필요시 정확한 수치를 다시 뽑을 수 있는 원천 데이터)
|
||||||
|
- `*.txt` — 그 안의 모든 TEXT 노드를 `"내용" — 폰트크기 / weight / 색상` 형태로 평탄화한 요약 (빠르게 훑어볼 때 사용)
|
||||||
|
|
||||||
|
`.txt`는 아래 스크립트로 재생성한다 (JSON을 재호출할 필요 없이 로컬에서 즉시 재실행 가능):
|
||||||
|
|
||||||
|
```bash
|
||||||
|
python3 << 'EOF'
|
||||||
|
import json, glob
|
||||||
|
|
||||||
|
def rgb(c):
|
||||||
|
a = c.get('a', 1)
|
||||||
|
return f"#{round(c['r']*255):02x}{round(c['g']*255):02x}{round(c['b']*255):02x}" + (f" a{a}" if a < 1 else "")
|
||||||
|
|
||||||
|
def walk(node, depth=0, out=None):
|
||||||
|
out = out if out is not None else []
|
||||||
|
if node.get('type') == 'TEXT':
|
||||||
|
style = node.get('style', {})
|
||||||
|
fills = node.get('fills', [])
|
||||||
|
color = rgb(fills[0]['color']) if fills and fills[0].get('color') else '?'
|
||||||
|
chars = node.get('characters', '')[:40].replace('\n', '\\n')
|
||||||
|
out.append(f"{' '*depth}- \"{chars}\" — {style.get('fontSize')}px / weight {style.get('fontWeight')} / {color}")
|
||||||
|
for child in node.get('children', []):
|
||||||
|
walk(child, depth + 1, out)
|
||||||
|
return out
|
||||||
|
|
||||||
|
for f in sorted(glob.glob("*.json")):
|
||||||
|
with open(f) as fh:
|
||||||
|
data = json.load(fh)
|
||||||
|
node_id = list(data['nodes'].keys())[0]
|
||||||
|
doc = data['nodes'][node_id]['document']
|
||||||
|
lines = walk(doc)
|
||||||
|
with open(f.replace('.json', '.txt'), 'w') as fh:
|
||||||
|
fh.write(f"# {f} (node {node_id})\n\n")
|
||||||
|
fh.write('\n'.join(lines))
|
||||||
|
EOF
|
||||||
|
```
|
||||||
|
|
||||||
|
## 섹션 / 노드 ID 매핑
|
||||||
|
|
||||||
|
File key: `MnwN1Uzg5F6ks9Clr1brLW`
|
||||||
|
|
||||||
|
| 섹션 | PC node-id | PC 파일 | Mobile node-id | Mobile 파일 |
|
||||||
|
|---|---|---|---|---|
|
||||||
|
| 01 HOME | `2247:2094` | [01-home-pc.json](01-home-pc.json) / [.txt](01-home-pc.txt) | `2319:2232` | [01-home-mobile.json](01-home-mobile.json) / [.txt](01-home-mobile.txt) |
|
||||||
|
| 02 ABOUT US (Expertise 포함) | `2247:2230` | [02-about-pc.json](02-about-pc.json) / [.txt](02-about-pc.txt) | `2319:2288` | [02-about-mobile.json](02-about-mobile.json) / [.txt](02-about-mobile.txt) |
|
||||||
|
| 03 HISTORY | `2247:2121` | [03-history-pc.json](03-history-pc.json) / [.txt](03-history-pc.txt) | `2319:2433` | [03-history-mobile.json](03-history-mobile.json) / [.txt](03-history-mobile.txt) |
|
||||||
|
| 04 VISION | `2247:2183` | [04-vision-pc.json](04-vision-pc.json) / [.txt](04-vision-pc.txt) | `2319:4183` | [04-vision-mobile.json](04-vision-mobile.json) / [.txt](04-vision-mobile.txt) |
|
||||||
|
| 05 PROJECT | `2247:2202` | [05-project-pc.json](05-project-pc.json) / [.txt](05-project-pc.txt) | `2319:4231` | [05-project-mobile.json](05-project-mobile.json) / [.txt](05-project-mobile.txt) |
|
||||||
|
| 06 CONTACT/FOOTER (문서상 라벨은 "Expertise"지만 실제 내용은 CONTACT/FOOTER) | `2247:2253` | [06-contact-pc.json](06-contact-pc.json) / [.txt](06-contact-pc.txt) | `2319:5082` | [06-contact-mobile.json](06-contact-mobile.json) / [.txt](06-contact-mobile.txt) |
|
||||||
|
| GNB 모바일 드로어 (열린 상태) | — | — | `2319:5998` | [gnb-drawer-mobile.json](gnb-drawer-mobile.json) / [.txt](gnb-drawer-mobile.txt) |
|
||||||
|
|
||||||
|
## Components 캔버스 (디자인 시스템 원본)
|
||||||
|
|
||||||
|
문서에는 `Screen Pages` 캔버스 말고 **`Components` 캔버스(id `12:92`)**가 별도로 있다. 버튼/인풋/체크박스/GNB/footer/프로젝트 카드/배지/아이콘 등 32개 컴포넌트의 "원본" 정의가 여기 있고, 페이지 정적 렌더에는 안 보이는 호버/액티브 같은 variant도 포함되어 있다.
|
||||||
|
|
||||||
|
- [07-components.json](07-components.json) — 캔버스 전체 원본 (32개 컴포넌트, ~600KB)
|
||||||
|
- [07-components.txt](07-components.txt) — 컴포넌트별로 배경색/보더/radius/padding/gap/텍스트 스타일을 평탄화한 요약
|
||||||
|
|
||||||
|
`.txt`는 위 스크립트와 다른(배경·보더·radius·padding까지 같이 뽑는) 별도 스크립트로 생성했다 — 필요하면 같은 패턴으로 재생성 가능 (`fills`/`strokes`/`cornerRadius`/`paddingLeft` 등 노드 속성을 그대로 읽으면 됨).
|
||||||
|
|
||||||
|
## NEW 섹션의 형제 노드 (footer / 팝업 모달 / 동작 주석)
|
||||||
|
|
||||||
|
`MAIN_NEW_PC`, `MAIN_NEW_MO` 프레임 말고도 `NEW` 섹션 바로 아래에 화면에는 안 보이는 노드들이 더 있었다 (문서 전체를 `depth=4`로 한 번 훑어서 발견함). 자세한 내용과 구현 영향은 **[11-interaction-notes.md](11-interaction-notes.md)** 참고.
|
||||||
|
|
||||||
|
- [08-footer-instance-pc.json](08-footer-instance-pc.json) — footer 전용 인스턴스 (`2247:2294`). 예전 기록엔 "footer 전용 노드 없음"이라 되어있었는데 실제로는 있었음 (내용은 기존 구현과 일치, 수정 불필요).
|
||||||
|
- [09-privacy-modal-pc.json](09-privacy-modal-pc.json) / [09-privacy-modal-mobile.json](09-privacy-modal-mobile.json) — 개인정보 수집·이용 동의 모달 (`2319:2118` / `2376:2184`). **현재 코드에 미구현.**
|
||||||
|
- [10-history-duplicate-ref.json](10-history-duplicate-ref.json) — HISTORY 중복 프레임(`2301:1896`, 참고용 사본으로 추정, 내용은 03-history-pc와 동일).
|
||||||
|
- [11-interaction-notes.md](11-interaction-notes.md) — 디자이너가 텍스트 노트로 남긴 동작 스펙 모음 (아코디언 단일열림, PROJECT/태그 더보기 페이지네이션, SEND 버튼 유효성 검증 등). **다수가 현재 코드에 미구현 상태.**
|
||||||
|
|
||||||
|
## 완전성 체크 (2026-06-28 기준)
|
||||||
|
|
||||||
|
- `GET /v1/files/:key?depth=4` 로 문서 전체 캔버스/섹션 구조를 확인함 → 캔버스는 `Screen Pages`, `Components` 2개뿐, `NEW` 섹션의 직계 자식도 전부 나열해서 확인함 (위 footer/모달/주석 포함).
|
||||||
|
- 이미 받은 13개 섹션 `.txt` 안에 동작 주석이 섞여있는지 `grep`으로 재검색함 → 없음 (06-contact의 "동의" 매칭은 이미 아는 체크박스 라벨 텍스트).
|
||||||
|
- 즉 **스타일(폰트/색상/간격/보더) 스펙은 사실상 전부 확보**, **동작(behavior) 스펙도 이번에 전부 찾아서 11-interaction-notes.md에 정리**. 단, 이미지/비트맵 자산은 여전히 미포함(사용자가 직접 export), 이 모든 건 캡처 시점 스냅샷이라 Figma 원본이 바뀌면 재동기화 필요.
|
||||||
|
|
||||||
|
## 사용 시 주의
|
||||||
|
|
||||||
|
- 좌표는 모두 Figma 캔버스 절대좌표(`absoluteBoundingBox`)다. CSS 값으로 옮길 때는 같은 프레임 안의 다른 좌표와의 **차이**(간격, 오프셋)로 환산해서 써야 한다 — 절대값 자체를 그대로 px로 쓰면 안 된다.
|
||||||
|
- 프레임 폭은 PC 1920px / Mobile 390px 캔버스 기준이다. `clamp()`로 반응형 값을 만들 때는 `(figma px / 캔버스 폭) * 100` 으로 `vw` 비율을 환산한다.
|
||||||
|
- 이 JSON은 캡처 시점(2026-06-28) 스냅샷이다. Figma 원본이 그 뒤에 수정됐다면 재호출해서 갱신해야 한다.
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,8 @@
|
||||||
|
# gnb-drawer-mobile.json (node 2319:5998)
|
||||||
|
|
||||||
|
- "HOME" — 32.0px / weight 400 / #77a5ff
|
||||||
|
- "ABOUT US" — 32.0px / weight 400 / #ffffff
|
||||||
|
- "HISTORY" — 32.0px / weight 400 / #ffffff
|
||||||
|
- "VISION" — 32.0px / weight 400 / #ffffff
|
||||||
|
- "PROJECTS" — 32.0px / weight 400 / #ffffff
|
||||||
|
- "Contact Us" — 32.0px / weight 400 / #ffffff
|
||||||
|
|
@ -36,11 +36,8 @@ src/ # Vite root
|
||||||
│ ├── base/ # reset, variable, mixin, font
|
│ ├── base/ # reset, variable, mixin, font
|
||||||
│ └── page/ # 페이지별 SCSS
|
│ └── page/ # 페이지별 SCSS
|
||||||
├── font/
|
├── font/
|
||||||
│ ├── SUIT/
|
│ └── SUIT/
|
||||||
│ │ └── SUIT-Variable.woff2
|
│ └── SUIT-Variable.woff2
|
||||||
│ └── DMSerifDisplay/
|
|
||||||
│ ├── DMSerifDisplay-Italic-latin.woff2
|
|
||||||
│ └── DMSerifDisplay-Italic-latin-ext.woff2
|
|
||||||
└── assets/ # 이미지 등 정적 파일
|
└── assets/ # 이미지 등 정적 파일
|
||||||
|
|
||||||
dist/ # 빌드 결과물 (git 제외)
|
dist/ # 빌드 결과물 (git 제외)
|
||||||
|
|
@ -85,4 +82,3 @@ doc/ # 프로젝트 문서
|
||||||
| 폰트 | 용도 |
|
| 폰트 | 용도 |
|
||||||
|---|---|
|
|---|---|
|
||||||
| SUIT Variable | 기본 본문 폰트 (weight 100~900) |
|
| SUIT Variable | 기본 본문 폰트 (weight 100~900) |
|
||||||
| DM Serif Display Italic | 포인트 serif 폰트 |
|
|
||||||
|
|
|
||||||
73
doc/미완료.md
73
doc/미완료.md
|
|
@ -36,6 +36,21 @@ https://www.figma.com/design/MnwN1Uzg5F6ks9Clr1brLW/%EB%94%94%EC%9E%90%EC%9D%B80
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
# 전체검수 결과 (2026-06-26)
|
||||||
|
|
||||||
|
`.mcp.json` figma 연결 정상 동작 확인 후 재검수함.
|
||||||
|
|
||||||
|
- **GNB 모바일 폰트** — 어제 "업라이트 세리프 vs 산세리프" 의문으로 남겨뒀던 건, 사용자가 Figma 인스펙터에서 실측값(`font-family: SUIT, font-style: normal, font-weight: 400`)을 직접 확인해줌. 세리프 추측이 틀렸던 것으로 확인. `_gnb.scss`의 `.gnb__mobileNavLink`에서 `font-family: $font-serif; font-style: italic;` 제거(기본 SUIT 상속). → **해결**
|
||||||
|
- **VISION 인용구 폰트** — 마찬가지로 사용자가 Figma에서 별도 지정 폰트가 없음(SUIT)을 확인해줌. 기존 코드가 이미 SUIT를 쓰고 있어서 코드 변경 불필요. → **해결**
|
||||||
|
- **DM Serif Display Italic 폰트 완전 삭제** — 위 GNB 수정으로 코드 전체에서 더 이상 안 쓰이게 되어 사용자 확인 후 정리함: `_font.scss`의 `@font-face`(Italic latin/latin-ext) 삭제, `_variable.scss`의 `$font-serif` 변수 삭제, `src/font/DMSerifDisplay/` 폴더(woff2 2개) 삭제, `doc/개발환경.md`의 디렉터리 구조·웹폰트 표에서도 제거.
|
||||||
|
- **HISTORY 모바일 레이아웃** — 어제 "별도 크롭 못 받아서 추정 구현"이라 남겨뒀던 항목, 사용자가 알려준 모바일 링크(`node-id 2319-2433`)로 직접 확인함. 모바일 디자인엔 좌측 사진 영역 자체가 없고 타임라인만 존재 — 현재 `.history__photo { display: none; }` 구현이 추측이 아니라 실제 디자인과 정확히 일치함을 확인. → **해결(추측 아니었음, 확인 완료)**
|
||||||
|
- **빌드 회귀(이미지 압축 깨짐) 발견 및 수정** — 이 검수 도중 `npm run build`에서 거의 모든 jpg/png가 압축 없이 원본 그대로 나가는 걸 발견(`project-4.jpg` 2.2MB 등). 원인은 같은 세션에서 별도 작업(pnpm 권한 이슈 해결)으로 `pnpm install`을 실행했다가 `node_modules`가 pnpm 구조로 바뀌면서 pnpm이 기본 정책상 `mozjpeg`/`optipng-bin`/`gifsicle` 등 이미지 압축 바이너리의 postinstall 빌드 스크립트를 건너뛴 것. `node_modules`, `pnpm-lock.yaml` 삭제 후 `npm ci` 재설치로 복구, 압축률 64~94% 정상 확인. (CI는 `npm ci`만 쓰므로 pnpm으로 설치하면 안 됨 — 어제 메모 그대로 재확인됨.)
|
||||||
|
- **HISTORY 섹션 타이틀 색상 버그 발견 및 수정** — 사용자가 "타이틀과 배경이미지가 잘못 코딩됨"이라고 지적. 확인해보니 `index.html`의 `<h2>`에 `sectionTitle sectionTitleDark history__title` 3개 클래스가 같이 붙어있었는데, `_about.scss`의 `.history__title { color: $color-white; }`보다 `index.scss`의 `.sectionTitleDark { color: $color-dark; }`가 컴파일 순서상 나중에 와서 이겨버림 — 결과적으로 다크 사진 배경 위에 거의 같은 색(다크) 텍스트가 깔려 "HISTORY" 글자가 안 보이는 상태였음. `sectionTitleDark` 클래스를 제거해서 해결(모바일은 별도 미디어쿼리에서 이미 다크 컬러를 주고 있어서 영향 없음). 배경 이미지(`history-1.jpg`)는 기존에 기록된 임시 placeholder 이슈 그대로(자산 미전달, 새 버그 아님).
|
||||||
|
- **FOOTER 글씨 배치 차이 수정** — 사용자가 "footer 글씨 배치가 디자인과 다르다"고 지적. footer 전용 Figma 노드가 없어서 사용자에게 "Copy link to selection" 링크(`node-id=2247-2294`)를 요청해 직접 확인함. 큰 구조(좌측 브랜드 2줄 / 중앙 연락처 / 우측 카피라이트, `space-between`)는 이미 일치했고, 차이는 두 가지: (1) "Mail"/"Tel" 라벨이 디자인엔 bold인데 코드는 전체 regular weight였음 → `<strong class="footer__contactLabel">`로 감싸고 `font-weight: 700` 추가. (2) 카피라이트가 디자인엔 "© 2026 BODA LAB"인데 코드엔 "© 2024 BODA LAB"로 오래된 값이 남아있었음 → 2026으로 수정. (연락처 값 자체는 2026-06-24에 사용자가 "현행 유지"로 이미 결정한 사항이라 손대지 않음.)
|
||||||
|
- **HISTORY 좌측 사진 레이아웃 — 풀블리드 구조로 재수정** — 위 색상 버그를 고친 후에도 사용자가 "여전히 디자인과 다르다"고 지적. Figma(`node-id 2247:2121`)를 다시 정밀 비교해보니, 좌측 사진이 섹션의 좌/상/하 끝(뷰포트 가장자리)까지 풀블리드로 깔리고 텍스트(타이틀/타임라인)만 일반 패딩을 따르는 구조인데, 기존 코드는 `.history__inner`가 photo까지 포함해서 flex로 묶고 섹션 패딩을 photo에도 동일하게 적용하고 있어 photo가 좌측 패딩만큼 안으로 들어가 있었음(풀블리드가 아니었음). `.history__inner` 래퍼를 없애고 `.history__photo`를 `.history`(position:relative, padding-left:0)에 대해 `position:absolute; top:0; left:0; bottom:0`으로 풀블리드시키고, `.history__title`은 `left/top`을 일반 섹션 패딩값(`clamp(24px,6.25vw,120px)`/`clamp(60px,6.25vw,120px)`)으로 키우고, `.history__timeline`은 `margin-left: photo폭+gap`으로 밀어내는 구조로 변경(`_about.scss`, `index.html`). 모바일은 영향 없음(`.history__timeline { margin-left: 0; }` 추가, photo는 기존처럼 숨김).
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
# 전체검수 결과 (2026-06-25)
|
# 전체검수 결과 (2026-06-25)
|
||||||
|
|
||||||
이전 세션(어제) 작업물을 전체 점검함. 6개 섹션 모두 마크업/스타일/JS 반영되어 있고 `npm run build` 통과 확인.
|
이전 세션(어제) 작업물을 전체 점검함. 6개 섹션 모두 마크업/스타일/JS 반영되어 있고 `npm run build` 통과 확인.
|
||||||
|
|
@ -47,48 +62,23 @@ https://www.figma.com/design/MnwN1Uzg5F6ks9Clr1brLW/%EB%94%94%EC%9E%90%EC%9D%B80
|
||||||
|
|
||||||
검수 후에도 남아있는 미해결 항목은 아래 그대로.
|
검수 후에도 남아있는 미해결 항목은 아래 그대로.
|
||||||
|
|
||||||
## 추가 검수 (같은 날, 이어서) — GNB 위치 문제 제보 후 전체 섹션 재검수
|
|
||||||
|
|
||||||
사용자가 "GNB 메뉴/로고 위치가 새 디자인과 안 맞는다"고 제보 → Figma 토큰을 새로 발급받아 `.mcp.json` 갱신, Claude Code 재시작 후 figma-mcp 재연결. 이후 PC/모바일 전 섹션을 Figma 노드 JSON과 좌표 단위로 대조함.
|
|
||||||
|
|
||||||
**중요 발견 — Figma REST API 직접 호출로 기존 제약 다수 해결.** 자세한 내용은 맨 아래 "Figma MCP 연결 관련 메모" 갱신분 참고. 요약하면, MCP 도구(`add_figma_file`/`view_node`)의 한계(전체 덤프 시 토큰 잘림, 이미지 export 불가)를 `.mcp.json`에 있는 `FIGMA_API_KEY`로 Figma REST API를 직접 호출해서 우회함. 이번 세션부터는 이 방법을 우선적으로 써야 함.
|
|
||||||
|
|
||||||
고친 것:
|
|
||||||
- **GNB(PC) 좌우 패딩/로고/메뉴 간격** — Figma 좌표 추출 결과 헤더 좌우 패딩 100px(현재 48px이었음), 로고 lockup 126px(현재 90px), 메뉴 아이템 간 itemSpacing 12px(현재 없음)로 확인. `_gnb.scss`에서 `.gnb__inner` 패딩을 `clamp(24px, 5.2vw, 100px)`로, `.gnb__logoImg` width를 126px로, `.gnb__navList`에 `gap: 12px` 추가. 모바일은 로고가 60px 높이 헤더에서 넘치는 걸 막기 위해 `_intro.scss`의 모바일 분기에서 90px로 별도 고정.
|
|
||||||
- **VISION 배경 이미지 — "에셋 추출 불가"였던 항목 해결.** Figma REST API로 VISION 노드 JSON을 직접 조회해보니 ABOUT US와 **동일한 이미지**(`unsplash:Cq5NaI0yKBE`, opacity 0.5)를 재사용하고 있었음. 이미 로컬에 있는 `unsplash_Cq5NaI0yKBE.png`를 그대로 `.vision__bg`에 적용(about과 동일 패턴: `position:absolute; inset:0; background-size:cover; opacity:0.5`). 새 에셋 작업 불필요했음.
|
|
||||||
- **PROJECT 이미지 9~13번 누락 — "에셋 추출 불가"였던 항목 해결.** Figma REST API의 `GET /v1/images/:file_key?ids=...` 렌더 엔드포인트로 각 카드의 "Thumbnails" 노드(목업+스크린샷 합성)를 JPG로 직접 export 받음(9=프로스펙스 ONE SPEC, 10=중소벤처기업부, 11=롯데렌터카, 12=KB리브모바일, 13=코나아이 PC, 전부 회사명과 내용 일치 확인). `src/images/project-9.jpg` ~ `project-13.jpg`로 저장하고 HTML의 빈 `project__thumbEmpty` 박스를 `<img>`로 교체, 이제 안 쓰는 `.project__thumbEmpty` CSS 규칙 삭제.
|
|
||||||
- **PROJECT 카드 제목 누락 텍스트 복원** — Figma 원문과 전수 대조해서 2건 발견: 3번 카드 "PNS네트웍스 디지털 플랫폼 구축" → "PNS네트웍스 디지털 포워딩 플랫폼 구축 프로젝트"(포워딩/프로젝트 누락), 8번 카드 "그린카 차세대" → "그린카 차세대 프로젝트"(프로젝트 누락). alt 텍스트도 함께 수정.
|
|
||||||
- **sectionTitle 전역 폰트 크기** — Contact의 "Head Office" 라벨이 Figma는 32px 헤딩인데 사이트는 12px 회색 소문자 라벨(`.contact__label`)로 잘못 스타일링되어 있던 걸 발견하면서, 같이 쓰이는 `.sectionTitle`(ABOUT US/HISTORY/VISION/PROJECT 타이틀 공통 클래스) 자체가 Figma 48px 대비 40px로 작게 잡혀 있던 것도 함께 발견. `index.scss`의 `.sectionTitle`과 `_contact.scss`의 `.contact__heading` 모두 `clamp(28px, 3vw, 48px)`로 상한 수정 — **전 섹션 타이틀 크기에 영향 있는 변경.**
|
|
||||||
- **Contact 라벨 스타일 정리** — `.contact__label`("Head Office")을 32px/weight 400/다크 컬러로, `.contact__infoLabel`("Address"/"e-mail"/"tel")을 12px→18px·weight 600→700으로, `.contactAccordion__header`("Contact Us"/"Recruitment")를 20px→32px로 Figma 수치에 맞춰 수정.
|
|
||||||
|
|
||||||
확인 후 "현행 유지"로 사용자가 확정한 것 (Figma 쪽이 오타/메모성 텍스트로 판단):
|
|
||||||
- PROJECT 2번 카드(SK그룹) 제목·태그 — Figma 원문 "SK그룹 콩앱 내부 모바일 vue 퍼블"보다 현재 "SK그룹 공식앱 내부 모바일"(+vue 태그)가 더 정돈된 것으로 보여 현행 유지.
|
|
||||||
- PROJECT 6번 카드 회사명 — Figma "롯데지에프알" vs 현재 "캐나다구스 코리아", 현행 유지.
|
|
||||||
|
|
||||||
재확인해서 "이미 정확함"으로 확인 닫은 것:
|
|
||||||
- ABOUT US 배경(별빛 텍스처, opacity 처리 포함), 콘텐츠/카피 전부 일치.
|
|
||||||
- HISTORY 2025년 그룹 13개 항목 전부 Figma와 제목·날짜·태그까지 정확히 일치(이전엔 누락 의심했으나 재확인 결과 모두 있었음). 좌측 사진/2024~2021 collapsed 항목은 기존 미해결 상태 그대로.
|
|
||||||
- CONTACT 텍스트 콘텐츠(주소/이메일/폼 placeholder/체크박스 문구/Recruitment 태그) 전부 일치.
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
# 미완료 / 확인 필요 항목 (위에서부터 확인)
|
# 미완료 / 확인 필요 항목 (위에서부터 확인)
|
||||||
|
|
||||||
추측해서 임의로 채운 값이 아니라, 실제로 막힌 지점만 기록한다. 아래 항목들은 자산(이미지/폰트) 전달이나 사용자 결정이 필요해서 남아있다.
|
추측해서 임의로 채운 값이 아니라, 실제로 막힌 지점만 기록한다. 아래 항목들은 자산(이미지/폰트) 전달이나 사용자 결정이 필요해서 남아있다.
|
||||||
|
|
||||||
## GNB (모바일 드로어)
|
## PROJECT
|
||||||
|
|
||||||
- **폰트 확인 필요** — 모바일 메뉴 항목 폰트가 처음엔 Figma 렌더에서 업라이트(정체) 세리프로 보인다고 판단해서 프로젝트에 있는 `DM Serif Display Italic`(이탤릭)으로 대체 적용했었음. 그런데 다시 렌더(`2319:5998`)를 보니 오히려 **민무늬 산세리프**(획 두께 균일, O/A가 기하학적 원형)처럼 보여서 기존 판단이 맞는지 의문이 생김. 사용자에게 (1) 지금처럼 이탤릭 세리프 유지 (2) 산세리프(SUIT 등)로 변경 (3) 별도 업라이트 세리프 폰트 파일 구해서 교체, 셋 중 결정 필요.
|
- **이미지 9~13번 누락** — 9(프로스펙스)·10(중소기업창업)·11(롯데 GA2ck)·12(국민은행)·13(코나아이 PC) 카드는 Figma 새 디자인엔 실제 목업 이미지가 있는데, figma-mcp로는 이미지 export가 안 돼서 빈 박스(`project__thumbEmpty`)로 남아있음. **사용자가 Figma에서 직접 5개 이미지를 export 해서 `src/images/project-9.jpg` ~ `project-13.jpg`로 전달해야 적용 가능.**
|
||||||
|
|
||||||
## HISTORY
|
## HISTORY
|
||||||
|
|
||||||
- 좌측 세로 사진(나선형 건축물 텍스처)은 에셋 추출이 안 돼서 기존 `images/history-1.jpg`를 임시로 대체 사용 중. 실제 Figma 이미지로 교체 필요.
|
|
||||||
- 2024/2023/2022/2021년 그룹은 Figma 렌더에서 아코디언이 collapsed 상태로 보여서 항목이 1개씩만 보인다(2024: 우리은행 로보어드바이저 구축, 2023: 신한은행 슈퍼SOL 운영 계약, 2022: 한화금융 서비스앱 플러스 리뉴얼 2차 계약, 2021: 롯데 렌터카 차세대 구축 계약). 펼쳤을 때 추가 항목이 더 있는지 정적 렌더로는 확인이 안 돼서 일단 보이는 1개씩만 반영함. 펼침 상태의 전체 목록 확인 필요.
|
- 2024/2023/2022/2021년 그룹은 Figma 렌더에서 아코디언이 collapsed 상태로 보여서 항목이 1개씩만 보인다(2024: 우리은행 로보어드바이저 구축, 2023: 신한은행 슈퍼SOL 운영 계약, 2022: 한화금융 서비스앱 플러스 리뉴얼 2차 계약, 2021: 롯데 렌터카 차세대 구축 계약). 펼쳤을 때 추가 항목이 더 있는지 정적 렌더로는 확인이 안 돼서 일단 보이는 1개씩만 반영함. 펼침 상태의 전체 목록 확인 필요.
|
||||||
- HISTORY 섹션의 모바일 레이아웃은 별도 figma 크롭을 못 받아서, 좌측 사진을 숨기고 타임라인만 세로로 쌓는 형태로 추정 구현함. 실제 모바일 디자인 확인 필요.
|
|
||||||
|
|
||||||
## VISION
|
## VISION
|
||||||
|
|
||||||
- **인용구 폰트 결정 필요** — 인용구("Flawless execution...") 텍스트의 Figma 렌더 폰트가 라운드체 산세리프로 보이는데, 프로젝트에 등록된 폰트(SUIT, DM Serif Display Italic) 중 일치하는 게 없음. 일단 SUIT로 대체했음. (1) 지금처럼 SUIT 유지 (2) 라운드체 산세리프 폰트 파일을 구해서 교체, 둘 중 결정 필요.
|
- 배경의 별빛/우주 텍스처 이미지는 ABOUT US와 마찬가지로 에셋 추출이 안 돼서 단색 `$color-bg`로 대체함. **(사용자가 직접 이미지 전달 예정)**
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|
@ -115,6 +105,23 @@ https://www.figma.com/design/MnwN1Uzg5F6ks9Clr1brLW/%EB%94%94%EC%9E%90%EC%9D%B80
|
||||||
|
|
||||||
- **점검 완료(2026-06-24)** — playwright로 769px~1440px 전 구간 데스크톱 nav 줄바꿈/overflow 없음 확인, 스크롤에 따른 `isActive` 전환(섹션 진입 시 해당 메뉴로 자동 전환) 정상 동작 확인, 모바일 풀스크린 드로어도 정상.
|
- **점검 완료(2026-06-24)** — playwright로 769px~1440px 전 구간 데스크톱 nav 줄바꿈/overflow 없음 확인, 스크롤에 따른 `isActive` 전환(섹션 진입 시 해당 메뉴로 자동 전환) 정상 동작 확인, 모바일 풀스크린 드로어도 정상.
|
||||||
- 모바일 드로어 메뉴 라벨 "PROJECTS"(복수형)가 데스크톱 nav·PROJECT 섹션 타이틀("PROJECT", 단수형)과 다른 것처럼 보였으나, Figma 모바일 드로어 렌더(`2319:5998`)에도 "PROJECTS"로 되어 있어서 **현행 유지**(불일치 아니라 Figma 의도).
|
- 모바일 드로어 메뉴 라벨 "PROJECTS"(복수형)가 데스크톱 nav·PROJECT 섹션 타이틀("PROJECT", 단수형)과 다른 것처럼 보였으나, Figma 모바일 드로어 렌더(`2319:5998`)에도 "PROJECTS"로 되어 있어서 **현행 유지**(불일치 아니라 Figma 의도).
|
||||||
|
- **모바일 드로어 폰트 → 완료(2026-06-26)**. 사용자가 Figma 인스펙터로 실측한 값(`font-family: SUIT, normal, 400`)을 확인해줌 — 세리프 추측 틀렸음. `.gnb__mobileNavLink`의 `font-family: $font-serif; font-style: italic;` 제거, 기본 SUIT 상속. 더 안 쓰게 된 `DM Serif Display Italic` 폰트(@font-face, woff2 파일, `$font-serif` 변수)는 전체 삭제함.
|
||||||
|
|
||||||
|
## HISTORY (모바일)
|
||||||
|
|
||||||
|
- **모바일 레이아웃 → 완료(2026-06-26)**. 사용자가 알려준 모바일 링크(`node-id 2319-2433`)로 확인 — 모바일 디자인엔 좌측 사진 영역이 원래 없고 타임라인만 존재. 기존 `.history__photo { display: none; }` 구현이 추측이 아니라 실제 디자인과 일치했음.
|
||||||
|
|
||||||
|
## CONTACT (Contact Us/Recruitment 너비·구분선)
|
||||||
|
|
||||||
|
- **완료(2026-06-26)**. 사용자가 "선이 전체를 차지한다", "입력창 스타일이 디자인과 다르다"고 지적. 원인은 두 가지였음. (1) `.contactAccordion__header`에 `border-bottom`이 없어서 "Contact Us" 펼침 상태일 때 헤딩-폼 사이 구분선이 비어있었음(닫힌 Recruitment는 우연히 같은 위치에 `.contactAccordion__item`의 border-bottom이 겹쳐서 괜찮아 보였던 것) → `border-bottom: 1px solid rgba($color-dark,0.08)` 추가. (2) 더 큰 원인: `.contactAccordion`이 `.contact__inner`(max-width:1200px, margin:auto로 가운데 정렬)의 형제 요소라서 그 제한을 안 받고 뷰포트 전체 너비(패딩 48px만 제외)로 퍼져 있었음 — 와이드 화면(1440px+)에서 "WELCOME BODA LAB" 컬럼보다 Contact Us/입력폼/구분선이 훨씬 넓게 늘어나 보인 것. `.contactAccordion`에도 동일하게 `max-width:1200px; margin:0 auto; width:100%;`를 추가해서 헤딩 섹션과 같은 컬럼 너비로 정렬함. `npm run build` 통과, 1920px/모바일(390px) 스크린샷으로 Figma 렌더와 일치 확인.
|
||||||
|
|
||||||
|
## HISTORY (좌측 사진 — 실제 에셋 교체)
|
||||||
|
|
||||||
|
- **완료(2026-06-26)**. 사용자가 "배경이미지가 왜 이렇게 나와?"라고 지적(레이아웃 수정 후 사진 영역이 텍스처 없이 거의 단색 검정으로 보임). 원인 조사 중 `git log -p`로 확인해보니, 기존 `history-1.jpg`는 git 히스토리상 원래 3504×2336(코드 에디터 화면 사진)이었다가 `57aac80 fix: about`(2026-06-19) 커밋에서 완전히 다른 사진(손으로 폰 만지는 사진)으로 통째로 교체되면서 320×190(겨우 25KB)짜리 초소형 파일로 들어간 것 — "다운스케일 회귀"가 아니라 처음부터 이 레이아웃에 쓰기엔 너무 작은 placeholder였음. 세로로 긴 사진 칸(약 374×1800px)에 `object-fit: cover`로 늘리면서 ~10배 확대돼 뭉개진 단색처럼 보인 것. 사용자가 실제 Figma 에셋(나선형 건축물 텍스처, `unsplash_BSDebo0-UAo.png`, 919×1424)을 전달해줘서 `index.html`의 `<img>` `src`를 교체하고 기존 `history-1.jpg`는 삭제함. `npm run build` 통과, PC/모바일 스크린샷으로 Figma 렌더와 일치 확인.
|
||||||
|
|
||||||
|
## VISION (인용구 폰트)
|
||||||
|
|
||||||
|
- **인용구 폰트 → 완료(2026-06-26)**. 사용자가 Figma에서 별도 지정 폰트 없음(SUIT)을 확인해줌. 기존 코드가 이미 SUIT라 변경 불필요.
|
||||||
|
|
||||||
## 최종 정리
|
## 최종 정리
|
||||||
|
|
||||||
|
|
@ -131,7 +138,7 @@ https://www.figma.com/design/MnwN1Uzg5F6ks9Clr1brLW/%EB%94%94%EC%9E%90%EC%9D%B80
|
||||||
- 02_ABOUT US (PC, EXPERTISE 포함): `2247:2230`
|
- 02_ABOUT US (PC, EXPERTISE 포함): `2247:2230`
|
||||||
- 03_HISTORY (PC): `2247:2121`
|
- 03_HISTORY (PC): `2247:2121`
|
||||||
- VISION PC: `2247:2183` / VISION 모바일: `2319:4183`
|
- VISION PC: `2247:2183` / VISION 모바일: `2319:4183`
|
||||||
- PROJECT PC: `2247:2202` / PROJECT 모바일: `2319:4231` — 렌더 확인·반영 완료(이미지 9~13 포함 전체)
|
- PROJECT PC: `2247:2202` / PROJECT 모바일: `2319:4231` — 렌더 확인 완료, 반영 완료(이미지 9~13 제외)
|
||||||
- CONTACT/FOOTER (문서 상단 "06_Expertise" 링크가 실제 이 내용임) PC: `2247:2253` / 모바일: `2319:5082` — 렌더 확인·반영 완료(footer 영역 제외)
|
- CONTACT/FOOTER (문서 상단 "06_Expertise" 링크가 실제 이 내용임) PC: `2247:2253` / 모바일: `2319:5082` — 렌더 확인·반영 완료(footer 영역 제외)
|
||||||
- 모바일 전체 페이지(컴포지트): `2319:5243`
|
- 모바일 전체 페이지(컴포지트): `2319:5243`
|
||||||
- 모바일 GNB 드로어(열린 상태): `2319:5998`
|
- 모바일 GNB 드로어(열린 상태): `2319:5998`
|
||||||
|
|
@ -147,9 +154,5 @@ https://www.figma.com/design/MnwN1Uzg5F6ks9Clr1brLW/%EB%94%94%EC%9E%90%EC%9D%B80
|
||||||
|
|
||||||
# 참고: 공통 / 도구 제약
|
# 참고: 공통 / 도구 제약
|
||||||
|
|
||||||
- `add_figma_file`이 파일 전체를 한 번에 JSON 덤프하는 방식이라 토큰 한도에 걸려 `01_HOME` ~ `03_HISTORY` 중반 이후 노드는 JSON으로 못 받았다. `view_node(file_key, node_id)`로 노드 ID를 알 때만 PNG 렌더로 확인 가능.
|
- `add_figma_file`이 파일 전체를 한 번에 JSON 덤프하는 방식이라 토큰 한도에 걸려 `01_HOME` ~ `03_HISTORY` 중반 이후 노드는 JSON으로 못 받았다. `view_node(file_key, node_id)`로 노드 ID를 알 때만 PNG 렌더로 확인 가능. VISION/PROJECT/CONTACT 등 이후 섹션은 작업 시점에 사용자에게 "Copy link to selection" 링크를 요청해서 진행한다.
|
||||||
- `view_node`는 이미지를 대화창에 렌더만 해줄 뿐, 파일로 저장(export)하는 기능이 없다.
|
- `view_node`는 이미지를 대화창에 렌더만 해줄 뿐, 파일로 저장(export)하는 기능이 없다. 따라서 Figma 안의 사진/목업 이미지 에셋(배경 텍스처, 프로젝트 카드 스크린샷 등)은 이 MCP로 직접 추출이 불가능하다. 실제 자산은 Figma에서 직접 "Export" 해서 `src/images/`에 받아와야 한다.
|
||||||
- **위 두 제약은 Figma REST API를 직접 호출하면 둘 다 우회된다 (2026-06-25 확인).** `.mcp.json`의 `FIGMA_API_KEY` 값을 그대로 가져다 `curl`로 직접 호출하면 됨:
|
|
||||||
- **특정 노드만 JSON으로 받기** (전체 덤프 토큰 한도 문제 없음): `GET https://api.figma.com/v1/files/{file_key}/nodes?ids={node_id}` + 헤더 `X-Figma-Token: {key}`. VISION/PROJECT/CONTACT처럼 `add_figma_file`로 못 받던 후반 섹션도 이 방식으로 전체 서브트리(좌표/색상/텍스트/이미지 ref 전부)를 받을 수 있었음.
|
|
||||||
- **노드를 합성 이미지로 export 받기** (이게 핵심): `GET https://api.figma.com/v1/images/{file_key}?ids={node_id}&format=jpg&scale=2` + 같은 헤더 → `{images: {node_id: "https://figma-alpha-api.s3...": ...}}` 형태로 S3 다운로드 URL을 줌. 이 URL을 `curl`/`https.get`으로 받으면 그 노드가 화면에 렌더된 모습 그대로(마스크·합성·필터 다 적용된 상태) 파일로 저장 가능. PROJECT 카드 9~13번의 "Thumbnails" 노드(목업+스크린샷 합성)를 이 방법으로 export해서 `project-9.jpg`~`project-13.jpg`로 확보함. "Figma에서 사용자가 직접 export 해줘야 한다"던 기존 제약은 더 이상 유효하지 않음 — 노드 ID만 알면 이 흐름으로 바로 받을 수 있다.
|
|
||||||
- 순서: ① 텍스트로 대상 노드 찾기(JSON에서 `characters` 검색) → ② 그 노드의 적절한 조상 프레임 id 확인(카드/섹션 단위) → ③ images 엔드포인트로 export → ④ 다운로드 후 `src/images/`에 저장.
|
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,9 @@
|
||||||
|
allowBuilds:
|
||||||
|
'@parcel/watcher': true
|
||||||
|
cwebp-bin: true
|
||||||
|
esbuild: true
|
||||||
|
gifsicle: true
|
||||||
|
jpegtran-bin: true
|
||||||
|
mozjpeg: true
|
||||||
|
optipng-bin: true
|
||||||
|
pngquant-bin: true
|
||||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 328 KiB |
367
src/index.html
367
src/index.html
|
|
@ -14,7 +14,7 @@
|
||||||
<header class="gnb" id="gnb">
|
<header class="gnb" id="gnb">
|
||||||
<div class="gnb__inner">
|
<div class="gnb__inner">
|
||||||
<a href="#intro" class="gnb__logo">
|
<a href="#intro" class="gnb__logo">
|
||||||
<img class="gnb__logoImg" src="images/logo.png" alt="BODA LAB" />
|
<img class="gnb__logoImg" src="images/logo.svg" alt="BODA LAB" />
|
||||||
</a>
|
</a>
|
||||||
<nav class="gnb__nav">
|
<nav class="gnb__nav">
|
||||||
<ul class="gnb__navList">
|
<ul class="gnb__navList">
|
||||||
|
|
@ -37,7 +37,7 @@
|
||||||
<button class="gnb__mobileNavClose" aria-label="메뉴 닫기">
|
<button class="gnb__mobileNavClose" aria-label="메뉴 닫기">
|
||||||
<span class="gnb__mobileNavCloseLine"></span>
|
<span class="gnb__mobileNavCloseLine"></span>
|
||||||
<span class="gnb__mobileNavCloseLine"></span>
|
<span class="gnb__mobileNavCloseLine"></span>
|
||||||
</button>1
|
</button>
|
||||||
<ul class="gnb__mobileNavList">
|
<ul class="gnb__mobileNavList">
|
||||||
<li class="gnb__mobileNavItem"><a class="gnb__mobileNavLink isActive" href="#intro">HOME</a></li>
|
<li class="gnb__mobileNavItem"><a class="gnb__mobileNavLink isActive" href="#intro">HOME</a></li>
|
||||||
<li class="gnb__mobileNavItem"><a class="gnb__mobileNavLink" href="#about">ABOUT US</a></li>
|
<li class="gnb__mobileNavItem"><a class="gnb__mobileNavLink" href="#about">ABOUT US</a></li>
|
||||||
|
|
@ -108,176 +108,170 @@
|
||||||
|
|
||||||
<!-- 03. HISTORY -->
|
<!-- 03. HISTORY -->
|
||||||
<section id="history" class="history">
|
<section id="history" class="history">
|
||||||
<div class="history__inner">
|
<h2 class="sectionTitle history__title">HISTORY</h2>
|
||||||
<h2 class="sectionTitle sectionTitleDark history__title">HISTORY</h2>
|
<div class="history__photo">
|
||||||
<div class="history__photo">
|
<img class="img" src="images/unsplash_BSDebo0-UAo.png" alt="" />
|
||||||
<img class="img" src="images/history-1.jpg" alt="" />
|
</div>
|
||||||
|
<div class="history__timeline">
|
||||||
|
<div class="history__yearGroup isOpen">
|
||||||
|
<button class="history__yearToggle" aria-expanded="true" aria-controls="history2025">
|
||||||
|
<span class="history__year">2025</span>
|
||||||
|
<div class="history__listItem">
|
||||||
|
<div class="main">
|
||||||
|
<h3 class="title">한국전자기술연구원 대쉬보드 구축</h3>
|
||||||
|
<p class="sub">
|
||||||
|
유체기기 위험 운전 알고리즘 모니터링 프로그램 / 송풍 제어 모듈 비정상 운전 상태 진단 프로그램<br />
|
||||||
|
윈도우 프로그래밍 개발, 대시보드 UX UI 기획/디자인
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<span class="date">25.12 - 26.02</span>
|
||||||
|
</div>
|
||||||
|
<span class="icon" aria-hidden="true"></span>
|
||||||
|
</button>
|
||||||
|
<ul class="history__list" id="history2025">
|
||||||
|
<li class="history__listItem">
|
||||||
|
<div class="main">
|
||||||
|
<h3 class="title">현대차 판매시스템 구축</h3>
|
||||||
|
<p class="sub">React.Js, F/E, B/E 개발</p>
|
||||||
|
</div>
|
||||||
|
<span class="date">25.08 - 26.06</span>
|
||||||
|
</li>
|
||||||
|
<li class="history__listItem">
|
||||||
|
<div class="main">
|
||||||
|
<h3 class="title">LG 개인정보삭제 프로그램개발</h3>
|
||||||
|
<p class="sub">React.Js, F/E, B/E 개발</p>
|
||||||
|
</div>
|
||||||
|
<span class="date">25.08 - 25.12</span>
|
||||||
|
</li>
|
||||||
|
<li class="history__listItem">
|
||||||
|
<div class="main">
|
||||||
|
<h3 class="title">신한투자증권_New 슈퍼SOL 통합 프로젝트 <span class="badge">Finance</span></h3>
|
||||||
|
<p class="sub">Vue.Js, Publishing</p>
|
||||||
|
</div>
|
||||||
|
<span class="date">25.07 - 26.07</span>
|
||||||
|
</li>
|
||||||
|
<li class="history__listItem">
|
||||||
|
<div class="main">
|
||||||
|
<h3 class="title">신한은행_New 슈퍼SOL 통합 프로젝트 <span class="badge">Finance</span></h3>
|
||||||
|
<p class="sub">React.Js, Purescript, Publishing</p>
|
||||||
|
</div>
|
||||||
|
<span class="date">25.07 - 26.06</span>
|
||||||
|
</li>
|
||||||
|
<li class="history__listItem">
|
||||||
|
<div class="main">
|
||||||
|
<h3 class="title">한화생명 신탁시스템 재구축 <span class="badge">Finance</span></h3>
|
||||||
|
<p class="sub">React.Js, Pblishing, UX UI 기획, F/E 개발</p>
|
||||||
|
</div>
|
||||||
|
<span class="date">25.06 - 26.06</span>
|
||||||
|
</li>
|
||||||
|
<li class="history__listItem">
|
||||||
|
<div class="main">
|
||||||
|
<h3 class="title">SK매직 운영 개발</h3>
|
||||||
|
<p class="sub">React.Js, Vue.Js, F/E, B/E 개발</p>
|
||||||
|
</div>
|
||||||
|
<span class="date">25.07 - 25.12</span>
|
||||||
|
</li>
|
||||||
|
<li class="history__listItem">
|
||||||
|
<div class="main">
|
||||||
|
<h3 class="title">롯데카드 외국인 선불카드 연계플랫폼 구축대행 <span class="badge">Finance</span></h3>
|
||||||
|
<p class="sub">Vue.Js, Next.Js, Publishing, F/E 개발</p>
|
||||||
|
</div>
|
||||||
|
<span class="date">25.04 - 25.11</span>
|
||||||
|
</li>
|
||||||
|
<li class="history__listItem">
|
||||||
|
<div class="main">
|
||||||
|
<h3 class="title">LG전자 홈스타일(리빙) 서비스 구축 프로젝트</h3>
|
||||||
|
<p class="sub">UX UI 기획</p>
|
||||||
|
</div>
|
||||||
|
<span class="date">25.04 - 25.08</span>
|
||||||
|
</li>
|
||||||
|
<li class="history__listItem">
|
||||||
|
<div class="main">
|
||||||
|
<h3 class="title">에어인천 ERP 구축 프로젝트</h3>
|
||||||
|
<p class="sub">UX UI 디자인, Publishing</p>
|
||||||
|
</div>
|
||||||
|
<span class="date">25.03 - 25.04</span>
|
||||||
|
</li>
|
||||||
|
<li class="history__listItem">
|
||||||
|
<div class="main">
|
||||||
|
<h3 class="title">하나캐피탈 자산관리시스템 재구축 프로젝트 <span class="badge">Finance</span></h3>
|
||||||
|
<p class="sub">Vue.Js, Nuxt.Js, Publishing, F/E 개발</p>
|
||||||
|
</div>
|
||||||
|
<span class="date">25.03 - 25.08</span>
|
||||||
|
</li>
|
||||||
|
<li class="history__listItem">
|
||||||
|
<div class="main">
|
||||||
|
<h3 class="title">현대해상 고도화 구축 <span class="badge">Finance</span></h3>
|
||||||
|
<p class="sub">React, Typescript, Scss</p>
|
||||||
|
</div>
|
||||||
|
<span class="date">25.02 - 26.01</span>
|
||||||
|
</li>
|
||||||
|
<li class="history__listItem">
|
||||||
|
<div class="main">
|
||||||
|
<h3 class="title">우리은행 전자지갑 구축 <span class="badge">Finance</span></h3>
|
||||||
|
<p class="sub">React, Typescript, Recoil, Spring Boot</p>
|
||||||
|
</div>
|
||||||
|
<span class="date">25.01 - 25.07</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div class="history__timeline">
|
|
||||||
<div class="history__yearGroup isOpen">
|
|
||||||
<button class="history__yearToggle" aria-expanded="true" aria-controls="history2025">
|
|
||||||
<span class="history__year">2025</span>
|
|
||||||
<span class="icon" aria-hidden="true"></span>
|
|
||||||
</button>
|
|
||||||
<ul class="history__list" id="history2025">
|
|
||||||
<li class="history__listItem">
|
|
||||||
<div class="main">
|
|
||||||
<h3 class="title">한국전자기술연구원 대쉬보드 구축</h3>
|
|
||||||
<p class="sub">
|
|
||||||
유체기기 위험 운전 알고리즘 모니터링 프로그램 / 송풍 제어 모듈 비정상 운전 상태 진단 프로그램<br />
|
|
||||||
윈도우 프로그래밍 개발, 대시보드 UX UI 기획/디자인
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<span class="date">25.12 - 26.02</span>
|
|
||||||
</li>
|
|
||||||
<li class="history__listItem">
|
|
||||||
<div class="main">
|
|
||||||
<h3 class="title">현대차 판매시스템 구축</h3>
|
|
||||||
<p class="sub">React.Js, F/E, B/E 개발</p>
|
|
||||||
</div>
|
|
||||||
<span class="date">25.08 - 26.06</span>
|
|
||||||
</li>
|
|
||||||
<li class="history__listItem">
|
|
||||||
<div class="main">
|
|
||||||
<h3 class="title">LG 개인정보삭제 프로그램개발</h3>
|
|
||||||
<p class="sub">React.Js, F/E, B/E 개발</p>
|
|
||||||
</div>
|
|
||||||
<span class="date">25.08 - 25.12</span>
|
|
||||||
</li>
|
|
||||||
<li class="history__listItem">
|
|
||||||
<div class="main">
|
|
||||||
<h3 class="title">신한투자증권_New 슈퍼SOL 통합 프로젝트 <span class="badge">Finance</span></h3>
|
|
||||||
<p class="sub">Vue.Js, Publishing</p>
|
|
||||||
</div>
|
|
||||||
<span class="date">25.07 - 26.07</span>
|
|
||||||
</li>
|
|
||||||
<li class="history__listItem">
|
|
||||||
<div class="main">
|
|
||||||
<h3 class="title">신한은행_New 슈퍼SOL 통합 프로젝트 <span class="badge">Finance</span></h3>
|
|
||||||
<p class="sub">React.Js, Purescript, Publishing</p>
|
|
||||||
</div>
|
|
||||||
<span class="date">25.07 - 26.06</span>
|
|
||||||
</li>
|
|
||||||
<li class="history__listItem">
|
|
||||||
<div class="main">
|
|
||||||
<h3 class="title">한화생명 신탁시스템 재구축 <span class="badge">Finance</span></h3>
|
|
||||||
<p class="sub">React.Js, Pblishing, UX UI 기획, F/E 개발</p>
|
|
||||||
</div>
|
|
||||||
<span class="date">25.06 - 26.06</span>
|
|
||||||
</li>
|
|
||||||
<li class="history__listItem">
|
|
||||||
<div class="main">
|
|
||||||
<h3 class="title">SK매직 운영 개발</h3>
|
|
||||||
<p class="sub">React.Js, Vue.Js, F/E, B/E 개발</p>
|
|
||||||
</div>
|
|
||||||
<span class="date">25.07 - 25.12</span>
|
|
||||||
</li>
|
|
||||||
<li class="history__listItem">
|
|
||||||
<div class="main">
|
|
||||||
<h3 class="title">롯데카드 외국인 선불카드 연계플랫폼 구축대행 <span class="badge">Finance</span></h3>
|
|
||||||
<p class="sub">Vue.Js, Next.Js, Publishing, F/E 개발</p>
|
|
||||||
</div>
|
|
||||||
<span class="date">25.04 - 25.11</span>
|
|
||||||
</li>
|
|
||||||
<li class="history__listItem">
|
|
||||||
<div class="main">
|
|
||||||
<h3 class="title">LG전자 홈스타일(리빙) 서비스 구축 프로젝트</h3>
|
|
||||||
<p class="sub">UX UI 기획</p>
|
|
||||||
</div>
|
|
||||||
<span class="date">25.04 - 25.08</span>
|
|
||||||
</li>
|
|
||||||
<li class="history__listItem">
|
|
||||||
<div class="main">
|
|
||||||
<h3 class="title">에어인천 ERP 구축 프로젝트</h3>
|
|
||||||
<p class="sub">UX UI 디자인, Publishing</p>
|
|
||||||
</div>
|
|
||||||
<span class="date">25.03 - 25.04</span>
|
|
||||||
</li>
|
|
||||||
<li class="history__listItem">
|
|
||||||
<div class="main">
|
|
||||||
<h3 class="title">하나캐피탈 자산관리시스템 재구축 프로젝트 <span class="badge">Finance</span></h3>
|
|
||||||
<p class="sub">Vue.Js, Nuxt.Js, Publishing, F/E 개발</p>
|
|
||||||
</div>
|
|
||||||
<span class="date">25.03 - 25.08</span>
|
|
||||||
</li>
|
|
||||||
<li class="history__listItem">
|
|
||||||
<div class="main">
|
|
||||||
<h3 class="title">현대해상 고도화 구축 <span class="badge">Finance</span></h3>
|
|
||||||
<p class="sub">React, Typescript, Scss</p>
|
|
||||||
</div>
|
|
||||||
<span class="date">25.02 - 26.01</span>
|
|
||||||
</li>
|
|
||||||
<li class="history__listItem">
|
|
||||||
<div class="main">
|
|
||||||
<h3 class="title">우리은행 전자지갑 구축 <span class="badge">Finance</span></h3>
|
|
||||||
<p class="sub">React, Typescript, Recoil, Spring Boot</p>
|
|
||||||
</div>
|
|
||||||
<span class="date">25.01 - 25.07</span>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="history__yearGroup">
|
<div class="history__yearGroup">
|
||||||
<button class="history__yearToggle" aria-expanded="false" aria-controls="history2024">
|
<button class="history__yearToggle" aria-expanded="false" aria-controls="history2024">
|
||||||
<span class="history__year">2024</span>
|
<span class="history__year">2024</span>
|
||||||
<span class="icon" aria-hidden="true"></span>
|
<div class="history__listItem">
|
||||||
</button>
|
<div class="main">
|
||||||
<ul class="history__list" id="history2024" hidden>
|
<h3 class="title">우리은행 로보어드바이저 구축 <span class="badge">Finance</span></h3>
|
||||||
<li class="history__listItem">
|
<p class="sub">React, Typescript, Recoil</p>
|
||||||
<div class="main">
|
</div>
|
||||||
<h3 class="title">우리은행 로보어드바이저 구축 <span class="badge">Finance</span></h3>
|
<span class="date">24.11 - 25.07</span>
|
||||||
<p class="sub">React, Typescript, Recoil</p>
|
</div>
|
||||||
</div>
|
<span class="icon" aria-hidden="true"></span>
|
||||||
<span class="date">24.11 - 25.07</span>
|
</button>
|
||||||
</li>
|
<ul class="history__list" id="history2024" hidden></ul>
|
||||||
</ul>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="history__yearGroup">
|
<div class="history__yearGroup">
|
||||||
<button class="history__yearToggle" aria-expanded="false" aria-controls="history2023">
|
<button class="history__yearToggle" aria-expanded="false" aria-controls="history2023">
|
||||||
<span class="history__year">2023</span>
|
<span class="history__year">2023</span>
|
||||||
<span class="icon" aria-hidden="true"></span>
|
<div class="history__listItem">
|
||||||
</button>
|
<div class="main">
|
||||||
<ul class="history__list" id="history2023" hidden>
|
<h3 class="title">신한은행 슈퍼SOL 운영 계약 <span class="badge">Finance</span></h3>
|
||||||
<li class="history__listItem">
|
<p class="sub">Vue</p>
|
||||||
<div class="main">
|
</div>
|
||||||
<h3 class="title">신한은행 슈퍼SOL 운영 계약 <span class="badge">Finance</span></h3>
|
<span class="date">23.12</span>
|
||||||
<p class="sub">Vue</p>
|
</div>
|
||||||
</div>
|
<span class="icon" aria-hidden="true"></span>
|
||||||
<span class="date">23.12</span>
|
</button>
|
||||||
</li>
|
<ul class="history__list" id="history2023" hidden></ul>
|
||||||
</ul>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="history__yearGroup">
|
<div class="history__yearGroup">
|
||||||
<button class="history__yearToggle" aria-expanded="false" aria-controls="history2022">
|
<button class="history__yearToggle" aria-expanded="false" aria-controls="history2022">
|
||||||
<span class="history__year">2022</span>
|
<span class="history__year">2022</span>
|
||||||
<span class="icon" aria-hidden="true"></span>
|
<div class="history__listItem">
|
||||||
</button>
|
<div class="main">
|
||||||
<ul class="history__list" id="history2022" hidden>
|
<h3 class="title">한화금융 서비스앱 플러스 리뉴얼 2차 계약 <span class="badge">Finance</span></h3>
|
||||||
<li class="history__listItem">
|
</div>
|
||||||
<div class="main">
|
<span class="date">22.11</span>
|
||||||
<h3 class="title">한화금융 서비스앱 플러스 리뉴얼 2차 계약 <span class="badge">Finance</span></h3>
|
</div>
|
||||||
</div>
|
<span class="icon" aria-hidden="true"></span>
|
||||||
<span class="date">22.11</span>
|
</button>
|
||||||
</li>
|
<ul class="history__list" id="history2022" hidden></ul>
|
||||||
</ul>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="history__yearGroup">
|
<div class="history__yearGroup">
|
||||||
<button class="history__yearToggle" aria-expanded="false" aria-controls="history2021">
|
<button class="history__yearToggle" aria-expanded="false" aria-controls="history2021">
|
||||||
<span class="history__year">2021</span>
|
<span class="history__year">2021</span>
|
||||||
<span class="icon" aria-hidden="true"></span>
|
<div class="history__listItem">
|
||||||
</button>
|
<div class="main">
|
||||||
<ul class="history__list" id="history2021" hidden>
|
<h3 class="title">롯데 렌터카 차세대 구축 계약</h3>
|
||||||
<li class="history__listItem">
|
</div>
|
||||||
<div class="main">
|
<span class="date">21.11</span>
|
||||||
<h3 class="title">롯데 렌터카 차세대 구축 계약</h3>
|
</div>
|
||||||
</div>
|
<span class="icon" aria-hidden="true"></span>
|
||||||
<span class="date">21.11</span>
|
</button>
|
||||||
</li>
|
<ul class="history__list" id="history2021" hidden></ul>
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
@ -285,7 +279,6 @@
|
||||||
<!-- 04. VISION -->
|
<!-- 04. VISION -->
|
||||||
<section id="vision" class="vision">
|
<section id="vision" class="vision">
|
||||||
<div class="vision__bg" aria-hidden="true"></div>
|
<div class="vision__bg" aria-hidden="true"></div>
|
||||||
|
|
||||||
<div class="vision__inner">
|
<div class="vision__inner">
|
||||||
<div class="vision__head">
|
<div class="vision__head">
|
||||||
<h2 class="sectionTitle">VISION</h2>
|
<h2 class="sectionTitle">VISION</h2>
|
||||||
|
|
@ -348,10 +341,10 @@
|
||||||
</article>
|
</article>
|
||||||
<article class="project__card">
|
<article class="project__card">
|
||||||
<div class="project__thumb">
|
<div class="project__thumb">
|
||||||
<img class="project__thumbImg" src="images/project-3.jpg" alt="PNS네트웍스 디지털 포워딩 플랫폼 구축 프로젝트" />
|
<img class="project__thumbImg" src="images/project-3.jpg" alt="PNS네트웍스 디지털 플랫폼 구축" />
|
||||||
</div>
|
</div>
|
||||||
<div class="project__info">
|
<div class="project__info">
|
||||||
<h3 class="project__name">PNS네트웍스 디지털 포워딩 플랫폼 구축 프로젝트</h3>
|
<h3 class="project__name">PNS네트웍스 디지털 플랫폼 구축</h3>
|
||||||
<p class="project__company">PNS 네트웍스</p>
|
<p class="project__company">PNS 네트웍스</p>
|
||||||
<div class="project__stack">
|
<div class="project__stack">
|
||||||
<span class="project__tag">react</span>
|
<span class="project__tag">react</span>
|
||||||
|
|
@ -420,10 +413,10 @@
|
||||||
</article>
|
</article>
|
||||||
<article class="project__card">
|
<article class="project__card">
|
||||||
<div class="project__thumb">
|
<div class="project__thumb">
|
||||||
<img class="project__thumbImg" src="images/project-8.jpg" alt="그린카 차세대 프로젝트" />
|
<img class="project__thumbImg" src="images/project-8.jpg" alt="그린카 차세대" />
|
||||||
</div>
|
</div>
|
||||||
<div class="project__info">
|
<div class="project__info">
|
||||||
<h3 class="project__name">그린카 차세대 프로젝트</h3>
|
<h3 class="project__name">그린카 차세대</h3>
|
||||||
<p class="project__company">그린카</p>
|
<p class="project__company">그린카</p>
|
||||||
<div class="project__stack">
|
<div class="project__stack">
|
||||||
<span class="project__tag">html5</span>
|
<span class="project__tag">html5</span>
|
||||||
|
|
@ -435,9 +428,7 @@
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="project__card">
|
<article class="project__card">
|
||||||
<div class="project__thumb">
|
<div class="project__thumb project__thumbEmpty"></div>
|
||||||
<img class="project__thumbImg" src="images/project-9.jpg" alt="프로스펙스 구축" />
|
|
||||||
</div>
|
|
||||||
<div class="project__info">
|
<div class="project__info">
|
||||||
<h3 class="project__name">프로스펙스 구축</h3>
|
<h3 class="project__name">프로스펙스 구축</h3>
|
||||||
<p class="project__company">(주)LS네트웍스</p>
|
<p class="project__company">(주)LS네트웍스</p>
|
||||||
|
|
@ -449,9 +440,7 @@
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="project__card">
|
<article class="project__card">
|
||||||
<div class="project__thumb">
|
<div class="project__thumb project__thumbEmpty"></div>
|
||||||
<img class="project__thumbImg" src="images/project-10.jpg" alt="중소기업창업" />
|
|
||||||
</div>
|
|
||||||
<div class="project__info">
|
<div class="project__info">
|
||||||
<h3 class="project__name">중소기업창업</h3>
|
<h3 class="project__name">중소기업창업</h3>
|
||||||
<p class="project__company">중소벤처기업부</p>
|
<p class="project__company">중소벤처기업부</p>
|
||||||
|
|
@ -463,9 +452,7 @@
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="project__card">
|
<article class="project__card">
|
||||||
<div class="project__thumb">
|
<div class="project__thumb project__thumbEmpty"></div>
|
||||||
<img class="project__thumbImg" src="images/project-11.jpg" alt="롯데 GA2ck 구축 프로젝트 (롯데 렌터카)" />
|
|
||||||
</div>
|
|
||||||
<div class="project__info">
|
<div class="project__info">
|
||||||
<h3 class="project__name">롯데 GA2ck 구축 프로젝트 (롯데 렌터카)</h3>
|
<h3 class="project__name">롯데 GA2ck 구축 프로젝트 (롯데 렌터카)</h3>
|
||||||
<p class="project__company">롯데</p>
|
<p class="project__company">롯데</p>
|
||||||
|
|
@ -478,9 +465,7 @@
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="project__card">
|
<article class="project__card">
|
||||||
<div class="project__thumb">
|
<div class="project__thumb project__thumbEmpty"></div>
|
||||||
<img class="project__thumbImg" src="images/project-12.jpg" alt="국민은행 리브 Reboot One 구축" />
|
|
||||||
</div>
|
|
||||||
<div class="project__info">
|
<div class="project__info">
|
||||||
<h3 class="project__name">
|
<h3 class="project__name">
|
||||||
(주)국민은행_KB국민은행
|
(주)국민은행_KB국민은행
|
||||||
|
|
@ -497,9 +482,7 @@
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="project__card">
|
<article class="project__card">
|
||||||
<div class="project__thumb">
|
<div class="project__thumb project__thumbEmpty"></div>
|
||||||
<img class="project__thumbImg" src="images/project-13.jpg" alt="코나아이 PC" />
|
|
||||||
</div>
|
|
||||||
<div class="project__info">
|
<div class="project__info">
|
||||||
<h3 class="project__name">코나아이 PC</h3>
|
<h3 class="project__name">코나아이 PC</h3>
|
||||||
<p class="project__company">코나아이</p>
|
<p class="project__company">코나아이</p>
|
||||||
|
|
@ -622,12 +605,12 @@
|
||||||
BODA LAB
|
BODA LAB
|
||||||
</p>
|
</p>
|
||||||
<p class="footer__contact">
|
<p class="footer__contact">
|
||||||
Mail
|
<strong class="footer__contactLabel">Mail</strong>
|
||||||
<a class="footer__contactLink" href="mailto:bodalab@bodalab.com">bodalab@bodalab.com</a>
|
<a class="footer__contactLink" href="mailto:koji@bodalab.co.kr">koji@bodalab.co.kr</a>
|
||||||
Tel
|
<strong class="footer__contactLabel">Tel</strong>
|
||||||
<a class="footer__contactLink" href="tel:010-1234-5678">010-1234-5678</a>
|
<a class="footer__contactLink" href="tel:010-4169-4728">010-4169-4728</a>
|
||||||
</p>
|
</p>
|
||||||
<p class="footer__copy">© 2024 BODA LAB</p>
|
<p class="footer__copy">© 2026 BODA LAB</p>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</section>
|
</section>
|
||||||
|
|
|
||||||
|
|
@ -6,6 +6,6 @@ export function initIntroAnimation() {
|
||||||
|
|
||||||
// 텍스트 순차 등장
|
// 텍스트 순차 등장
|
||||||
gsap.set([".intro__sub", ".intro__title"], { opacity: 0, y: 30 });
|
gsap.set([".intro__sub", ".intro__title"], { opacity: 0, y: 30 });
|
||||||
gsap.to(".intro__sub", { opacity: 1, y: 0, duration: 0.9, ease: "power3.out", delay: 1.0 });
|
gsap.to(".intro__sub", { opacity: 1, y: 0, duration: 0.9, ease: "power3.out", delay: 0.3 });
|
||||||
gsap.to(".intro__title", { opacity: 1, y: 0, duration: 0.9, ease: "power3.out", delay: 1.3 });
|
gsap.to(".intro__title", { opacity: 1, y: 0, duration: 0.9, ease: "power3.out", delay: 0.5 });
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -5,23 +5,3 @@
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-display: swap;
|
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;
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -16,8 +16,8 @@ html {
|
||||||
|
|
||||||
body {
|
body {
|
||||||
font-family: $기본글꼴;
|
font-family: $기본글꼴;
|
||||||
background-color: $color-bg;
|
background-color: #0d0d0d;
|
||||||
color: $color-white;
|
color: #ffffff;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,17 +1,5 @@
|
||||||
$color-bg: #0d0d0d;
|
|
||||||
$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;
|
|
||||||
|
|
||||||
$기본글꼴: "SUIT Variable", "SUIT", sans-serif;
|
$기본글꼴: "SUIT Variable", "SUIT", sans-serif;
|
||||||
$font-serif: "DM Serif Display", serif;
|
|
||||||
|
|
||||||
$gnb-height: 60px;
|
|
||||||
$gnb-height-mo: 60px;
|
$gnb-height-mo: 60px;
|
||||||
|
|
||||||
$bp-mo: 768px;
|
$bp-mo: 768px;
|
||||||
|
|
|
||||||
|
|
@ -18,12 +18,12 @@
|
||||||
font-size: clamp(28px, 3vw, 48px);
|
font-size: clamp(28px, 3vw, 48px);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
letter-spacing: 0.02em;
|
letter-spacing: 0.02em;
|
||||||
color: $color-white;
|
color: #ffffff;
|
||||||
line-height: 1;
|
line-height: 0.8;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sectionTitleDark {
|
.sectionTitleDark {
|
||||||
color: $color-dark;
|
color: #0d0d0d;
|
||||||
}
|
}
|
||||||
|
|
||||||
.scrollDown {
|
.scrollDown {
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,7 @@
|
||||||
.about {
|
.about {
|
||||||
position: relative;
|
position: relative;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
background: $color-bg;
|
background: #0d0d0d;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
@ -30,26 +30,24 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.about__head {
|
.about__head {
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: clamp(30px, 3.1vw, 60px);
|
|
||||||
|
|
||||||
.sectionTitle {
|
.sectionTitle {
|
||||||
margin: 0;
|
margin: 0 0 57px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.about__desc {
|
.about__desc {
|
||||||
|
margin: 0 0 70px;
|
||||||
font-size: clamp(13px, 1.1vw, 16px);
|
font-size: clamp(13px, 1.1vw, 16px);
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
line-height: 1.8;
|
line-height: 150%;
|
||||||
color: $color-white;
|
color: #ffffff;
|
||||||
opacity: 0.9;
|
opacity: 0.9;
|
||||||
}
|
}
|
||||||
|
|
||||||
.about__quote {
|
.about__quote {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: flex-end;
|
align-items: flex-end;
|
||||||
|
justify-content: flex-end;
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -57,14 +55,14 @@
|
||||||
font-size: clamp(60px, 7.6vw, 146px);
|
font-size: clamp(60px, 7.6vw, 146px);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
color: $color-white;
|
color: #ffffff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.about__quoteText {
|
.about__quoteText {
|
||||||
font-size: clamp(22px, 2.4vw, 46px);
|
font-size: clamp(22px, 2.4vw, 46px);
|
||||||
font-weight: 100;
|
font-weight: 100;
|
||||||
line-height: 1.2;
|
line-height: 1.2;
|
||||||
color: $color-white;
|
color: #ffffff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.about__expertiseList {
|
.about__expertiseList {
|
||||||
|
|
@ -83,7 +81,7 @@
|
||||||
.num {
|
.num {
|
||||||
font-size: clamp(14px, 0.85vw, 16px);
|
font-size: clamp(14px, 0.85vw, 16px);
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
color: $color-blue;
|
color: #7796ff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.name {
|
.name {
|
||||||
|
|
@ -91,79 +89,97 @@
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
line-height: 1.2;
|
line-height: 1.2;
|
||||||
color: $color-white;
|
color: #ffffff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.text {
|
.text {
|
||||||
font-size: clamp(12px, 0.75vw, 14px);
|
font-size: clamp(12px, 0.75vw, 14px);
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
color: $color-white;
|
color: #ffffff;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// History
|
// History
|
||||||
.history {
|
.history {
|
||||||
background: $color-bg-light;
|
|
||||||
padding: clamp(60px, 6.25vw, 120px) clamp(24px, 6.25vw, 120px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.history__inner {
|
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
background: #fff;
|
||||||
align-items: flex-start;
|
padding: clamp(60px, 6.25vw, 120px) clamp(24px, 6.25vw, 120px) clamp(60px, 6.25vw, 120px) 0;
|
||||||
gap: clamp(40px, 6.25vw, 120px);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.history__photo {
|
.history__photo {
|
||||||
position: relative;
|
position: absolute;
|
||||||
flex: 0 0 clamp(220px, 26vw, 500px);
|
top: 0;
|
||||||
align-self: stretch;
|
left: 0;
|
||||||
overflow: hidden;
|
bottom: 0;
|
||||||
background: $color-dark;
|
width: clamp(220px, 34vw, 500px);
|
||||||
|
|
||||||
.img {
|
.img {
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.history__title {
|
.history__title {
|
||||||
position: absolute;
|
position: sticky;
|
||||||
top: clamp(16px, 2vw, 32px);
|
top: 180px;
|
||||||
left: clamp(16px, 2vw, 32px);
|
margin-left: clamp(24px, 6vw, 120px);
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
color: $color-white;
|
color: #ffffff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.history__timeline {
|
.history__timeline {
|
||||||
flex: 1;
|
margin-left: clamp(220px, 34vw, 500px);
|
||||||
min-width: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.history__yearGroup {
|
.history__yearGroup {
|
||||||
border-top: 1px solid rgba($color-dark, 0.15);
|
border-top: 1px solid #000;
|
||||||
|
|
||||||
&:last-child {
|
&.isOpen {
|
||||||
border-bottom: 1px solid rgba($color-dark, 0.15);
|
.history__yearToggle {
|
||||||
|
.icon::after {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:has(.history__list:empty) {
|
||||||
|
.icon {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.history__yearToggle {
|
.history__yearToggle {
|
||||||
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: flex-start;
|
||||||
justify-content: space-between;
|
gap: 24px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: clamp(16px, 1.8vw, 24px) 0;
|
padding: 30px 100px 30px 0;
|
||||||
background: none;
|
background: none;
|
||||||
border: none;
|
border: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
text-align: left;
|
||||||
|
|
||||||
|
.history__year {
|
||||||
|
flex-shrink: 0;
|
||||||
|
width: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.history__listItem {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
.icon {
|
.icon {
|
||||||
position: relative;
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
right: 0;
|
||||||
width: 28px;
|
width: 28px;
|
||||||
height: 28px;
|
height: 28px;
|
||||||
border: 1px solid $color-dark;
|
transform: translateY(-50%);
|
||||||
|
border: 1px solid #0d0d0d;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
|
|
||||||
|
|
@ -175,7 +191,7 @@
|
||||||
left: 50%;
|
left: 50%;
|
||||||
width: 10px;
|
width: 10px;
|
||||||
height: 1px;
|
height: 1px;
|
||||||
background: $color-dark;
|
background: #0d0d0d;
|
||||||
transform: translate(-50%, -50%);
|
transform: translate(-50%, -50%);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -186,32 +202,37 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.history__yearGroup.isOpen .history__yearToggle .icon::after {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.history__year {
|
.history__year {
|
||||||
font-size: clamp(28px, 2.5vw, 40px);
|
font-size: clamp(24px, 2vw, 32px);
|
||||||
font-weight: 100;
|
font-weight: 500;
|
||||||
color: $color-dark;
|
color: #0d0d0d;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.history__list {
|
.history__list {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
gap: 16px;
|
||||||
|
margin-left: 104px;
|
||||||
|
margin-right: 100px;
|
||||||
|
|
||||||
|
&[hidden] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.history__listItem {
|
.history__listItem {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: flex-start;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
gap: 24px;
|
gap: 24px;
|
||||||
padding: clamp(12px, 1.2vw, 16px) 0;
|
|
||||||
border-top: 1px solid rgba($color-dark, 0.08);
|
|
||||||
|
|
||||||
&:first-child {
|
&:first-child {
|
||||||
border-top: none;
|
margin-top: -14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.main {
|
.main {
|
||||||
|
|
@ -223,25 +244,25 @@
|
||||||
.title {
|
.title {
|
||||||
font-size: clamp(14px, 1vw, 16px);
|
font-size: clamp(14px, 1vw, 16px);
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
color: $color-dark;
|
color: #0d0d0d;
|
||||||
}
|
}
|
||||||
|
|
||||||
.badge {
|
.badge {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin-left: 6px;
|
vertical-align: top;
|
||||||
|
margin-left: 5px;
|
||||||
padding: 2px 8px;
|
padding: 2px 8px;
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: $color-badge-blue;
|
color: #0071f2;
|
||||||
border: 1px solid $color-badge-blue;
|
border: 1px solid #0071f2;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sub {
|
.sub {
|
||||||
font-size: clamp(11px, 0.8vw, 13px);
|
font-size: 14px;
|
||||||
font-weight: 300;
|
color: #7b7b7b;
|
||||||
color: rgba($color-dark, 0.55);
|
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -249,7 +270,7 @@
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
font-size: clamp(12px, 0.85vw, 14px);
|
font-size: clamp(12px, 0.85vw, 14px);
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
color: rgba($color-dark, 0.65);
|
color: rgba(13, 13, 13, 0.65);
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -280,20 +301,28 @@
|
||||||
padding: 60px 24px;
|
padding: 60px 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.history__inner {
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.history__title {
|
.history__title {
|
||||||
position: static;
|
position: static;
|
||||||
margin-bottom: 32px;
|
margin-bottom: 32px;
|
||||||
color: $color-dark;
|
color: #0d0d0d;
|
||||||
}
|
}
|
||||||
|
|
||||||
.history__photo {
|
.history__photo {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.history__timeline {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.history__yearToggle {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.history__list {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.history__listItem {
|
.history__listItem {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 6px;
|
gap: 6px;
|
||||||
|
|
|
||||||
|
|
@ -4,10 +4,10 @@
|
||||||
// Contact
|
// Contact
|
||||||
// 이 섹션만 Figma 디자인이 라이트 테마(흰 배경/검은 텍스트)임 — 다른 섹션과 색상 반전
|
// 이 섹션만 Figma 디자인이 라이트 테마(흰 배경/검은 텍스트)임 — 다른 섹션과 색상 반전
|
||||||
.contact {
|
.contact {
|
||||||
background: $color-white;
|
background: #ffffff;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
border-top: 1px solid rgba($color-dark, 0.08);
|
border-top: 1px solid rgba(13, 13, 13, 0.08);
|
||||||
}
|
}
|
||||||
|
|
||||||
.contact__inner {
|
.contact__inner {
|
||||||
|
|
@ -19,10 +19,10 @@
|
||||||
|
|
||||||
.contact__heading {
|
.contact__heading {
|
||||||
font-family: $기본글꼴;
|
font-family: $기본글꼴;
|
||||||
font-size: clamp(28px, 3vw, 48px);
|
font-size: clamp(28px, 3vw, 40px);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
letter-spacing: 0.02em;
|
letter-spacing: 0.02em;
|
||||||
color: $color-dark;
|
color: #0d0d0d;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -31,13 +31,15 @@
|
||||||
margin-bottom: 48px;
|
margin-bottom: 48px;
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
color: rgba($color-dark, 0.6);
|
color: rgba(13, 13, 13, 0.6);
|
||||||
}
|
}
|
||||||
|
|
||||||
.contact__label {
|
.contact__label {
|
||||||
font-size: clamp(22px, 2vw, 32px);
|
font-size: 12px;
|
||||||
font-weight: 400;
|
font-weight: 600;
|
||||||
color: $color-dark;
|
letter-spacing: 0.1em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: rgba(13, 13, 13, 0.5);
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -54,16 +56,17 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.contact__infoLabel {
|
.contact__infoLabel {
|
||||||
font-size: clamp(15px, 1.2vw, 18px);
|
font-size: 12px;
|
||||||
font-weight: 700;
|
font-weight: 600;
|
||||||
color: $color-blue;
|
letter-spacing: 0.08em;
|
||||||
|
color: #7796ff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.contact__infoValue {
|
.contact__infoValue {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
line-height: 1.7;
|
line-height: 1.7;
|
||||||
color: rgba($color-dark, 0.85);
|
color: rgba(13, 13, 13, 0.85);
|
||||||
}
|
}
|
||||||
|
|
||||||
.contact__infoLink {
|
.contact__infoLink {
|
||||||
|
|
@ -77,11 +80,14 @@
|
||||||
|
|
||||||
// Contact accordion
|
// Contact accordion
|
||||||
.contactAccordion {
|
.contactAccordion {
|
||||||
border-top: 1px solid rgba($color-dark, 0.08);
|
max-width: 1200px;
|
||||||
|
width: 100%;
|
||||||
|
margin: 0 auto;
|
||||||
|
border-top: 1px solid rgba(13, 13, 13, 0.08);
|
||||||
}
|
}
|
||||||
|
|
||||||
.contactAccordion__item {
|
.contactAccordion__item {
|
||||||
border-bottom: 1px solid rgba($color-dark, 0.08);
|
border-bottom: 1px solid rgba(13, 13, 13, 0.08);
|
||||||
}
|
}
|
||||||
|
|
||||||
.contactAccordion__header {
|
.contactAccordion__header {
|
||||||
|
|
@ -92,9 +98,10 @@
|
||||||
padding: 28px 48px;
|
padding: 28px 48px;
|
||||||
background: none;
|
background: none;
|
||||||
border: none;
|
border: none;
|
||||||
|
border-bottom: 1px solid rgba(13, 13, 13, 0.08);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
color: $color-dark;
|
color: #0d0d0d;
|
||||||
font-size: clamp(24px, 2vw, 32px);
|
font-size: clamp(16px, 1.4vw, 20px);
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-family: $기본글꼴;
|
font-family: $기본글꼴;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
|
|
@ -156,9 +163,9 @@
|
||||||
.contactForm__input,
|
.contactForm__input,
|
||||||
.contactForm__textarea {
|
.contactForm__textarea {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background: $color-white;
|
background: #ffffff;
|
||||||
border: 1px solid rgba($color-dark, 0.2);
|
border: 1px solid rgba(13, 13, 13, 0.2);
|
||||||
color: $color-dark;
|
color: #0d0d0d;
|
||||||
font-family: $기본글꼴;
|
font-family: $기본글꼴;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
|
|
@ -167,10 +174,10 @@
|
||||||
transition: border-color 0.2s;
|
transition: border-color 0.2s;
|
||||||
|
|
||||||
&::placeholder {
|
&::placeholder {
|
||||||
color: rgba($color-dark, 0.35);
|
color: rgba(13, 13, 13, 0.35);
|
||||||
}
|
}
|
||||||
&:focus {
|
&:focus {
|
||||||
border-color: rgba($color-dark, 0.4);
|
border-color: rgba(13, 13, 13, 0.4);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -191,7 +198,7 @@
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
color: rgba($color-dark, 0.6);
|
color: rgba(13, 13, 13, 0.6);
|
||||||
}
|
}
|
||||||
|
|
||||||
.contactForm__checkboxInput {
|
.contactForm__checkboxInput {
|
||||||
|
|
@ -199,8 +206,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.contactForm__checkboxInput:checked + .contactForm__checkboxBox {
|
.contactForm__checkboxInput:checked + .contactForm__checkboxBox {
|
||||||
background: $color-blue;
|
background: #7796ff;
|
||||||
border-color: $color-blue;
|
border-color: #7796ff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.contactForm__checkboxInput:checked + .contactForm__checkboxBox::after {
|
.contactForm__checkboxInput:checked + .contactForm__checkboxBox::after {
|
||||||
|
|
@ -208,15 +215,15 @@
|
||||||
display: block;
|
display: block;
|
||||||
width: 10px;
|
width: 10px;
|
||||||
height: 6px;
|
height: 6px;
|
||||||
border-left: 1.5px solid $color-white;
|
border-left: 1.5px solid #ffffff;
|
||||||
border-bottom: 1.5px solid $color-white;
|
border-bottom: 1.5px solid #ffffff;
|
||||||
transform: rotate(-45deg) translateY(-2px);
|
transform: rotate(-45deg) translateY(-2px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.contactForm__checkboxBox {
|
.contactForm__checkboxBox {
|
||||||
width: 18px;
|
width: 18px;
|
||||||
height: 18px;
|
height: 18px;
|
||||||
border: 1px solid rgba($color-dark, 0.3);
|
border: 1px solid rgba(13, 13, 13, 0.3);
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
@ -234,10 +241,10 @@
|
||||||
|
|
||||||
.btnSend {
|
.btnSend {
|
||||||
padding: 12px 48px;
|
padding: 12px 48px;
|
||||||
background: $color-blue;
|
background: #7796ff;
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 100px;
|
border-radius: 100px;
|
||||||
color: $color-white;
|
color: #ffffff;
|
||||||
font-family: $기본글꼴;
|
font-family: $기본글꼴;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
|
|
@ -263,18 +270,18 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
padding: 10px 20px;
|
padding: 10px 20px;
|
||||||
border: 1px solid rgba($color-dark, 0.25);
|
border: 1px solid rgba(13, 13, 13, 0.25);
|
||||||
border-radius: 100px;
|
border-radius: 100px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
color: $color-dark;
|
color: #0d0d0d;
|
||||||
transition:
|
transition:
|
||||||
border-color 0.2s,
|
border-color 0.2s,
|
||||||
color 0.2s;
|
color 0.2s;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
border-color: $color-blue;
|
border-color: #7796ff;
|
||||||
color: $color-blue;
|
color: #7796ff;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -286,13 +293,14 @@
|
||||||
|
|
||||||
// Footer
|
// Footer
|
||||||
.footer {
|
.footer {
|
||||||
border-top: 1px solid rgba($color-dark, 0.08);
|
background: #0d0d0d;
|
||||||
padding: 32px 48px;
|
padding: 32px 48px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer__inner {
|
.footer__inner {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
align-items: flex-end;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
gap: 24px;
|
gap: 24px;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
|
|
@ -302,30 +310,33 @@
|
||||||
font-size: clamp(18px, 2vw, 28px);
|
font-size: clamp(18px, 2vw, 28px);
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
letter-spacing: 0.08em;
|
letter-spacing: 0.08em;
|
||||||
color: rgba($color-dark, 0.4);
|
color: #fff;
|
||||||
line-height: 1.2;
|
line-height: 1.2;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer__contact {
|
.footer__contact {
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: 300;
|
// font-weight: 300;
|
||||||
color: rgba($color-dark, 0.5);
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer__contactLabel {
|
||||||
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer__contactLink {
|
.footer__contactLink {
|
||||||
color: rgba($color-dark, 0.5);
|
color: #fff;
|
||||||
transition: color 0.2s;
|
transition: color 0.2s;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: $color-dark;
|
color: #0d0d0d;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer__copy {
|
.footer__copy {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
font-weight: 300;
|
color: #fff;
|
||||||
color: rgba($color-dark, 0.3);
|
|
||||||
letter-spacing: 0.03em;
|
letter-spacing: 0.03em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,3 @@
|
||||||
@use "../base/variable" as *;
|
|
||||||
@use "../base/mixin" as *;
|
@use "../base/mixin" as *;
|
||||||
|
|
||||||
// GNB
|
// GNB
|
||||||
|
|
@ -11,7 +10,7 @@
|
||||||
transition: background 0.4s;
|
transition: background 0.4s;
|
||||||
|
|
||||||
&.isScrolled {
|
&.isScrolled {
|
||||||
// background: rgba($color-bg, 0.92);
|
// background: rgba(13, 13, 13, 0.92);
|
||||||
// backdrop-filter: blur(12px);
|
// backdrop-filter: blur(12px);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -20,7 +19,7 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
padding: 80px clamp(24px, 5.2vw, 100px);
|
padding: 80px clamp(24px, 5.2vw, 100px) 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.gnb__logo {
|
.gnb__logo {
|
||||||
|
|
@ -54,16 +53,16 @@
|
||||||
font-size: clamp(13px, 0.85vw, 16px);
|
font-size: clamp(13px, 0.85vw, 16px);
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
letter-spacing: 0.05em;
|
letter-spacing: 0.05em;
|
||||||
color: $color-white;
|
color: #ffffff;
|
||||||
transition: color 0.2s;
|
transition: color 0.2s;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: $color-blue;
|
color: #7796ff;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.gnb__navLink.isActive {
|
.gnb__navLink.isActive {
|
||||||
color: $color-blue;
|
color: #7796ff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.gnb__hamburger {
|
.gnb__hamburger {
|
||||||
|
|
@ -83,7 +82,7 @@
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 1px;
|
height: 1px;
|
||||||
background: $color-white;
|
background: #ffffff;
|
||||||
transition:
|
transition:
|
||||||
transform 0.3s,
|
transform 0.3s,
|
||||||
opacity 0.3s;
|
opacity 0.3s;
|
||||||
|
|
@ -104,7 +103,7 @@
|
||||||
position: fixed;
|
position: fixed;
|
||||||
inset: 0;
|
inset: 0;
|
||||||
z-index: 200;
|
z-index: 200;
|
||||||
background: $color-bg;
|
background: #0d0d0d;
|
||||||
padding: 32px 32px 40px;
|
padding: 32px 32px 40px;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
|
|
@ -134,7 +133,7 @@
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 1px;
|
height: 1px;
|
||||||
background: $color-white;
|
background: #ffffff;
|
||||||
|
|
||||||
&:nth-child(1) {
|
&:nth-child(1) {
|
||||||
transform: rotate(45deg);
|
transform: rotate(45deg);
|
||||||
|
|
@ -154,14 +153,12 @@
|
||||||
|
|
||||||
.gnb__mobileNavLink {
|
.gnb__mobileNavLink {
|
||||||
display: block;
|
display: block;
|
||||||
font-family: $font-serif;
|
|
||||||
font-style: italic;
|
|
||||||
font-size: clamp(28px, 8vw, 36px);
|
font-size: clamp(28px, 8vw, 36px);
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
letter-spacing: 0.02em;
|
letter-spacing: 0.02em;
|
||||||
color: $color-white;
|
color: #ffffff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.gnb__mobileNavLink.isActive {
|
.gnb__mobileNavLink.isActive {
|
||||||
color: $color-blue;
|
color: #7796ff;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,3 @@
|
||||||
@use "../base/variable" as *;
|
|
||||||
@use "../base/mixin" as *;
|
@use "../base/mixin" as *;
|
||||||
|
|
||||||
// Intro
|
// Intro
|
||||||
|
|
@ -8,7 +7,7 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
background: $color-bg;
|
background: #0d0d0d;
|
||||||
}
|
}
|
||||||
|
|
||||||
.intro__bg {
|
.intro__bg {
|
||||||
|
|
@ -29,9 +28,9 @@
|
||||||
font-size: clamp(18px, 2.6vw, 50px);
|
font-size: clamp(18px, 2.6vw, 50px);
|
||||||
font-weight: 100;
|
font-weight: 100;
|
||||||
letter-spacing: 0.02em;
|
letter-spacing: 0.02em;
|
||||||
color: $color-white;
|
color: #ffffff;
|
||||||
margin-bottom: clamp(16px, 2vw, 32px);
|
margin-bottom: clamp(16px, 2vw, 32px);
|
||||||
line-height: 1.2;
|
line-height: 0.8;
|
||||||
}
|
}
|
||||||
|
|
||||||
.intro__title {
|
.intro__title {
|
||||||
|
|
@ -39,14 +38,14 @@
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
letter-spacing: 0.01em;
|
letter-spacing: 0.01em;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
color: $color-white;
|
color: #ffffff;
|
||||||
line-height: 1.2;
|
line-height: 0.8;
|
||||||
}
|
}
|
||||||
|
|
||||||
@include mo {
|
@include mo {
|
||||||
.gnb__inner {
|
.gnb__inner {
|
||||||
padding: 0 20px;
|
padding: 0 20px;
|
||||||
height: $gnb-height-mo;
|
height: 60px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.gnb__logoImg {
|
.gnb__logoImg {
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,7 @@
|
||||||
@use "../base/variable" as *;
|
|
||||||
@use "../base/mixin" as *;
|
@use "../base/mixin" as *;
|
||||||
|
|
||||||
.project {
|
.project {
|
||||||
background: $color-bg;
|
background: #0d0d0d;
|
||||||
padding: 100px 48px;
|
padding: 100px 48px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -54,14 +53,14 @@
|
||||||
.project__name {
|
.project__name {
|
||||||
font-size: clamp(14px, 1.1vw, 16px);
|
font-size: clamp(14px, 1.1vw, 16px);
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
color: $color-white;
|
color: #ffffff;
|
||||||
line-height: 1.4;
|
line-height: 1.4;
|
||||||
}
|
}
|
||||||
|
|
||||||
.project__company {
|
.project__company {
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
color: rgba($color-white, 0.5);
|
color: rgba(255, 255, 255, 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
.project__stack {
|
.project__stack {
|
||||||
|
|
@ -74,10 +73,10 @@
|
||||||
.project__tag {
|
.project__tag {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 3px 10px;
|
padding: 3px 10px;
|
||||||
border: 1px solid rgba($color-white, 0.2);
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
color: rgba($color-white, 0.55);
|
color: rgba(255, 255, 255, 0.55);
|
||||||
letter-spacing: 0.03em;
|
letter-spacing: 0.03em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -93,21 +92,21 @@
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
gap: 6px;
|
gap: 6px;
|
||||||
padding: 14px 40px;
|
padding: 14px 40px;
|
||||||
border: 1px solid rgba($color-white, 0.4);
|
border: 1px solid rgba(255, 255, 255, 0.4);
|
||||||
border-radius: 100px;
|
border-radius: 100px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
letter-spacing: 0.1em;
|
letter-spacing: 0.1em;
|
||||||
color: $color-white;
|
color: #ffffff;
|
||||||
transition:
|
transition:
|
||||||
background 0.3s,
|
background 0.3s,
|
||||||
border-color 0.3s,
|
border-color 0.3s,
|
||||||
color 0.3s;
|
color 0.3s;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background: $color-white;
|
background: #ffffff;
|
||||||
color: $color-dark;
|
color: #0d0d0d;
|
||||||
border-color: $color-white;
|
border-color: #ffffff;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,13 @@
|
||||||
@use "../base/variable" as *;
|
|
||||||
@use "../base/mixin" as *;
|
@use "../base/mixin" as *;
|
||||||
|
|
||||||
// Vision
|
// Vision
|
||||||
.vision {
|
.vision {
|
||||||
position: relative;
|
position: relative;
|
||||||
background: $color-bg;
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
background: #0d0d0d;
|
||||||
padding: clamp(80px, 6.25vw, 120px) clamp(24px, 6.25vw, 120px);
|
padding: clamp(80px, 6.25vw, 120px) clamp(24px, 6.25vw, 120px);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
@ -13,7 +16,6 @@
|
||||||
position: absolute;
|
position: absolute;
|
||||||
inset: 0;
|
inset: 0;
|
||||||
background: url("../../images/unsplash_Cq5NaI0yKBE.png") center / cover no-repeat;
|
background: url("../../images/unsplash_Cq5NaI0yKBE.png") center / cover no-repeat;
|
||||||
opacity: 0.5;
|
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -22,7 +24,7 @@
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: clamp(60px, 8vw, 140px);
|
gap: clamp(80px, 6.25vw, 120px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.vision__head {
|
.vision__head {
|
||||||
|
|
@ -37,32 +39,32 @@
|
||||||
|
|
||||||
.vision__desc {
|
.vision__desc {
|
||||||
max-width: 560px;
|
max-width: 560px;
|
||||||
font-size: clamp(13px, 1.1vw, 16px);
|
font-size: clamp(13px, 0.73vw, 14px);
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
line-height: 1.8;
|
line-height: 1.8;
|
||||||
color: $color-white;
|
color: #ffffff;
|
||||||
opacity: 0.9;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.vision__quote {
|
.vision__quote {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
gap: 12px;
|
gap: 0;
|
||||||
align-self: flex-end;
|
align-self: flex-end;
|
||||||
max-width: 640px;
|
max-width: 740px;
|
||||||
|
|
||||||
.mark {
|
.mark {
|
||||||
font-size: clamp(40px, 4.2vw, 80px);
|
font-size: clamp(60px, 7.6vw, 146px);
|
||||||
font-weight: 700;
|
font-weight: 600;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
color: $color-white;
|
margin-top: -0.34em;
|
||||||
|
color: #ffffff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.text {
|
.text {
|
||||||
font-size: clamp(18px, 1.9vw, 32px);
|
font-size: clamp(22px, 2.4vw, 46px);
|
||||||
font-weight: 300;
|
font-weight: 100;
|
||||||
line-height: 1.4;
|
line-height: 1.2;
|
||||||
color: $color-white;
|
color: #ffffff;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -80,17 +82,17 @@
|
||||||
gap: 12px;
|
gap: 12px;
|
||||||
|
|
||||||
.keyword {
|
.keyword {
|
||||||
font-size: clamp(28px, 3.1vw, 60px);
|
font-size: clamp(28px, 3.33vw, 64px);
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
letter-spacing: 0.01em;
|
letter-spacing: 0.01em;
|
||||||
color: $color-white;
|
color: #ffffff;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.desc {
|
.desc {
|
||||||
font-size: clamp(12px, 0.8vw, 14px);
|
font-size: clamp(12px, 0.73vw, 14px);
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
color: rgba($color-white, 0.75);
|
color: #ffffff;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue