Compare commits
3 Commits
7924041e84
...
3415a8c7ab
| Author | SHA1 | Date |
|---|---|---|
이희원
|
3415a8c7ab | |
|
이희원
|
aa396739bc | |
|
이희원
|
9b197626ab |
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
|
||||||
|
|
@ -116,10 +116,7 @@
|
||||||
<div class="history__yearGroup isOpen">
|
<div class="history__yearGroup isOpen">
|
||||||
<button class="history__yearToggle" aria-expanded="true" aria-controls="history2025">
|
<button class="history__yearToggle" aria-expanded="true" aria-controls="history2025">
|
||||||
<span class="history__year">2025</span>
|
<span class="history__year">2025</span>
|
||||||
<span class="icon" aria-hidden="true"></span>
|
<div class="history__listItem">
|
||||||
</button>
|
|
||||||
<ul class="history__list" id="history2025">
|
|
||||||
<li class="history__listItem">
|
|
||||||
<div class="main">
|
<div class="main">
|
||||||
<h3 class="title">한국전자기술연구원 대쉬보드 구축</h3>
|
<h3 class="title">한국전자기술연구원 대쉬보드 구축</h3>
|
||||||
<p class="sub">
|
<p class="sub">
|
||||||
|
|
@ -128,7 +125,10 @@
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<span class="date">25.12 - 26.02</span>
|
<span class="date">25.12 - 26.02</span>
|
||||||
</li>
|
</div>
|
||||||
|
<span class="icon" aria-hidden="true"></span>
|
||||||
|
</button>
|
||||||
|
<ul class="history__list" id="history2025">
|
||||||
<li class="history__listItem">
|
<li class="history__listItem">
|
||||||
<div class="main">
|
<div class="main">
|
||||||
<h3 class="title">현대차 판매시스템 구축</h3>
|
<h3 class="title">현대차 판매시스템 구축</h3>
|
||||||
|
|
@ -219,69 +219,66 @@
|
||||||
<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>
|
|
||||||
<ul class="history__list" id="history2024" hidden>
|
|
||||||
<li class="history__listItem">
|
|
||||||
<div class="main">
|
<div class="main">
|
||||||
<h3 class="title">우리은행 로보어드바이저 구축 <span class="badge">Finance</span></h3>
|
<h3 class="title">우리은행 로보어드바이저 구축 <span class="badge">Finance</span></h3>
|
||||||
<p class="sub">React, Typescript, Recoil</p>
|
<p class="sub">React, Typescript, Recoil</p>
|
||||||
</div>
|
</div>
|
||||||
<span class="date">24.11 - 25.07</span>
|
<span class="date">24.11 - 25.07</span>
|
||||||
</li>
|
</div>
|
||||||
</ul>
|
<span class="icon" aria-hidden="true"></span>
|
||||||
|
</button>
|
||||||
|
<ul class="history__list" id="history2024" hidden></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>
|
|
||||||
<ul class="history__list" id="history2023" hidden>
|
|
||||||
<li class="history__listItem">
|
|
||||||
<div class="main">
|
<div class="main">
|
||||||
<h3 class="title">신한은행 슈퍼SOL 운영 계약 <span class="badge">Finance</span></h3>
|
<h3 class="title">신한은행 슈퍼SOL 운영 계약 <span class="badge">Finance</span></h3>
|
||||||
<p class="sub">Vue</p>
|
<p class="sub">Vue</p>
|
||||||
</div>
|
</div>
|
||||||
<span class="date">23.12</span>
|
<span class="date">23.12</span>
|
||||||
</li>
|
</div>
|
||||||
</ul>
|
<span class="icon" aria-hidden="true"></span>
|
||||||
|
</button>
|
||||||
|
<ul class="history__list" id="history2023" hidden></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>
|
|
||||||
<ul class="history__list" id="history2022" hidden>
|
|
||||||
<li class="history__listItem">
|
|
||||||
<div class="main">
|
<div class="main">
|
||||||
<h3 class="title">한화금융 서비스앱 플러스 리뉴얼 2차 계약 <span class="badge">Finance</span></h3>
|
<h3 class="title">한화금융 서비스앱 플러스 리뉴얼 2차 계약 <span class="badge">Finance</span></h3>
|
||||||
</div>
|
</div>
|
||||||
<span class="date">22.11</span>
|
<span class="date">22.11</span>
|
||||||
</li>
|
</div>
|
||||||
</ul>
|
<span class="icon" aria-hidden="true"></span>
|
||||||
|
</button>
|
||||||
|
<ul class="history__list" id="history2022" hidden></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>
|
|
||||||
<ul class="history__list" id="history2021" hidden>
|
|
||||||
<li class="history__listItem">
|
|
||||||
<div class="main">
|
<div class="main">
|
||||||
<h3 class="title">롯데 렌터카 차세대 구축 계약</h3>
|
<h3 class="title">롯데 렌터카 차세대 구축 계약</h3>
|
||||||
</div>
|
</div>
|
||||||
<span class="date">21.11</span>
|
<span class="date">21.11</span>
|
||||||
</li>
|
</div>
|
||||||
</ul>
|
<span class="icon" aria-hidden="true"></span>
|
||||||
|
</button>
|
||||||
|
<ul class="history__list" id="history2021" hidden></ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- 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__inner">
|
<div class="vision__inner">
|
||||||
<div class="vision__head">
|
<div class="vision__head">
|
||||||
<h2 class="sectionTitle">VISION</h2>
|
<h2 class="sectionTitle">VISION</h2>
|
||||||
|
|
|
||||||
|
|
@ -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,16 +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;
|
||||||
|
|
||||||
$gnb-height: 60px;
|
|
||||||
$gnb-height-mo: 60px;
|
$gnb-height-mo: 60px;
|
||||||
|
|
||||||
$bp-mo: 768px;
|
$bp-mo: 768px;
|
||||||
|
|
|
||||||
|
|
@ -15,15 +15,15 @@
|
||||||
|
|
||||||
.sectionTitle {
|
.sectionTitle {
|
||||||
font-family: $기본글꼴;
|
font-family: $기본글꼴;
|
||||||
font-size: clamp(28px, 3vw, 40px);
|
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,20 +30,17 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -58,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 {
|
||||||
|
|
@ -84,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 {
|
||||||
|
|
@ -92,24 +89,20 @@
|
||||||
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
|
||||||
// 좌측 사진은 Figma 디자인 기준 섹션 좌/상/하 끝까지 풀블리드, 텍스트만 일반 패딩을 따름
|
|
||||||
$history-photo-w: clamp(220px, 26vw, 500px);
|
|
||||||
$history-gap: clamp(40px, 6.25vw, 120px);
|
|
||||||
|
|
||||||
.history {
|
.history {
|
||||||
position: relative;
|
position: relative;
|
||||||
background: $color-bg-light;
|
background: #fff;
|
||||||
padding: clamp(60px, 6.25vw, 120px) clamp(24px, 6.25vw, 120px) clamp(60px, 6.25vw, 120px) 0;
|
padding: clamp(60px, 6.25vw, 120px) clamp(24px, 6.25vw, 120px) clamp(60px, 6.25vw, 120px) 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -118,52 +111,75 @@ $history-gap: clamp(40px, 6.25vw, 120px);
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
width: $history-photo-w;
|
width: clamp(220px, 34vw, 500px);
|
||||||
overflow: hidden;
|
|
||||||
background: $color-dark;
|
|
||||||
|
|
||||||
.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(60px, 6.25vw, 120px);
|
top: 180px;
|
||||||
left: clamp(24px, 6.25vw, 120px);
|
margin-left: clamp(24px, 6vw, 120px);
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
color: $color-white;
|
color: #ffffff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.history__timeline {
|
.history__timeline {
|
||||||
margin-left: calc(#{$history-photo-w} + #{$history-gap});
|
margin-left: clamp(220px, 34vw, 500px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.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 @@ $history-gap: clamp(40px, 6.25vw, 120px);
|
||||||
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-gap: clamp(40px, 6.25vw, 120px);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.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 @@ $history-gap: clamp(40px, 6.25vw, 120px);
|
||||||
.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 @@ $history-gap: clamp(40px, 6.25vw, 120px);
|
||||||
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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -283,7 +304,7 @@ $history-gap: clamp(40px, 6.25vw, 120px);
|
||||||
.history__title {
|
.history__title {
|
||||||
position: static;
|
position: static;
|
||||||
margin-bottom: 32px;
|
margin-bottom: 32px;
|
||||||
color: $color-dark;
|
color: #0d0d0d;
|
||||||
}
|
}
|
||||||
|
|
||||||
.history__photo {
|
.history__photo {
|
||||||
|
|
@ -294,6 +315,14 @@ $history-gap: clamp(40px, 6.25vw, 120px);
|
||||||
margin-left: 0;
|
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 {
|
||||||
|
|
@ -22,7 +22,7 @@
|
||||||
font-size: clamp(28px, 3vw, 40px);
|
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,7 +31,7 @@
|
||||||
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 {
|
||||||
|
|
@ -39,7 +39,7 @@
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
letter-spacing: 0.1em;
|
letter-spacing: 0.1em;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
color: rgba($color-dark, 0.5);
|
color: rgba(13, 13, 13, 0.5);
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -59,14 +59,14 @@
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
letter-spacing: 0.08em;
|
letter-spacing: 0.08em;
|
||||||
color: $color-blue;
|
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 {
|
||||||
|
|
@ -83,11 +83,11 @@
|
||||||
max-width: 1200px;
|
max-width: 1200px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
border-top: 1px solid rgba($color-dark, 0.08);
|
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 {
|
||||||
|
|
@ -98,9 +98,9 @@
|
||||||
padding: 28px 48px;
|
padding: 28px 48px;
|
||||||
background: none;
|
background: none;
|
||||||
border: none;
|
border: none;
|
||||||
border-bottom: 1px solid rgba($color-dark, 0.08);
|
border-bottom: 1px solid rgba(13, 13, 13, 0.08);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
color: $color-dark;
|
color: #0d0d0d;
|
||||||
font-size: clamp(16px, 1.4vw, 20px);
|
font-size: clamp(16px, 1.4vw, 20px);
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-family: $기본글꼴;
|
font-family: $기본글꼴;
|
||||||
|
|
@ -163,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;
|
||||||
|
|
@ -174,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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -198,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 {
|
||||||
|
|
@ -206,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 {
|
||||||
|
|
@ -215,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;
|
||||||
|
|
@ -241,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;
|
||||||
|
|
@ -270,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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -330,7 +330,7 @@
|
||||||
transition: color 0.2s;
|
transition: color 0.2s;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: $color-dark;
|
color: #0d0d0d;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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);
|
||||||
|
|
@ -157,9 +156,9 @@
|
||||||
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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -59,14 +58,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 {
|
||||||
|
|
@ -79,10 +78,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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -98,21 +97,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,16 +1,30 @@
|
||||||
@use "../base/variable" as *;
|
|
||||||
@use "../base/mixin" as *;
|
@use "../base/mixin" as *;
|
||||||
|
|
||||||
// Vision
|
// Vision
|
||||||
.vision {
|
.vision {
|
||||||
background: $color-bg;
|
position: relative;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vision__bg {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background: url("../../images/unsplash_Cq5NaI0yKBE.png") center / cover no-repeat;
|
||||||
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.vision__inner {
|
.vision__inner {
|
||||||
|
position: relative;
|
||||||
|
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 {
|
||||||
|
|
@ -25,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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -68,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