K-DEVCON 소개 페이지

K-DEVCON(데브콘) 커뮤니티를 소개하는 정적 페이지입니다. 빌드 도구 없이 HTML / CSS / 바닐라 JS로만 구성되어 있어, 파일을 그대로 정적 호스팅에 올리면 됩니다.

구조

.
├── index.html            # 모든 섹션이 담긴 단일 페이지
├── assets/
│   ├── css/style.css     # 브랜드 컬러 · 레이아웃 · 반응형
│   ├── js/main.js        # 헤더 상태 / 모바일 메뉴 / 스크롤 리빌 (없어도 동작)
│   └── img/
│       ├── k-devcon-logo.svg       # 공식 로고 (밝은 배경용, 헤더)
│       ├── k-devcon-logo-dark.svg  # 공식 로고 (어두운 배경용, 푸터)
│       ├── favicon.png             # 파비콘 (k-devcon.com 배포본과 동일)
│       └── og-image.jpg            # 공유 썸네일 1200×630
├── sitemap.xml
└── llms.txt              # AI 크롤러용 요약 (llmstxt.org 제안 형식)

로컬에서 보기

python3 -m http.server 8000
# http://localhost:8000

index.html을 파일로 바로 열어도 동작합니다.

배포

서비스 주소: https://k-devcon.web.app/about-us/

main에 push하면 .github/workflows/deploy.yml이 k-devcon/k-devcon-firebase 저장소의 public/about-us/로 정적 파일을 복사해 커밋하고, 그 저장소에서 Firebase Hosting으로 배포됩니다.

k-devcon-firebase/public/
├── 404.html          ← k-devcon-firebase 소유
├── assets/           ← k-devcon-firebase 소유
├── devcore/          ← 다른 페이지
└── about-us/         ← 이 저장소가 소유. index.html · assets/ · sitemap.xml · llms.txt

이 저장소는 public/about-us/ 안쪽만 씁니다. public/ 루트는 건드리지 않습니다.

• https://k-devcon.web.app/ 루트는 k-devcon.com으로 302 리다이렉트되도록 설정되어 있어 사용할 수 없습니다.
• Firebase가 /about-us → /about-us/로 301 리다이렉트하므로, 정식 주소는 끝에 슬래시가 붙은 형태입니다. canonical·OG·sitemap 모두 이 형태로 맞춰져 있습니다.
• 페이지 내 에셋 경로는 상대경로(assets/...)라 /about-us/ 하위로 정확히 해석됩니다.

페이지에 새 파일을 추가하면 deploy.yml의 복사 목록에도 넣어야 합니다. 넣지 않으면 로컬에만 있고 배포되지 않습니다.

호스팅 설정(firebase.json, 리다이렉트 규칙)은 이 저장소가 아니라 k-devcon-firebase 쪽에 있습니다.

로컬에서 확인만 할 때는 빌드 단계가 없으므로 루트 디렉터리를 그대로 서빙하면 됩니다.

주소가 바뀌는 경우

절대 URL(https://k-devcon.web.app/about-us/)은 아래 3곳에 있습니다. 함께 수정해야 합니다.

• index.html — canonical, og:url, og:image, twitter:image, JSON-LD의 @id/url
• sitemap.xml — <loc>
• llms.txt — 링크 섹션

canonical이 실제 서비스 주소와 다르면 검색엔진이 해당 페이지를 색인에서 제외할 수 있으니 반드시 맞춰야 합니다.

콘텐츠 출처

• K-DEVCON 공식 About US 소개 자료 (표지 / About US / Yearly Growth / Core Value / Brand Identity / Contact Us)
• DEVCORE 2026 KEYNOTE_강성욱.pptx — 10주년 키노트 (K-DEVCON History, Flywheel, 운영 프로그램 현황)

디자인 토큰

브랜드 가이드 기준 컬러를 assets/css/style.css의 :root에 정의해 두었습니다.

토큰	값	용도
--kd-red	#EF3A24	포인트 컬러
--kd-cyan	#60CAE6	서브 / 플라이휠
--kd-slate	#8497A0	보조 텍스트
--kd-mist	#A3BCC6	다크 배경용
--kd-black	#000000	기본

영문 타이포는 브랜드 가이드와 동일하게 Karla를 사용하며, 한글 본문은 Pretendard를 사용합니다(두 폰트 모두 CDN, 미로드 시 시스템 폰트로 폴백).

로고는 공식 에셋(K-devcon-logo.svg, K-devcon-logo-for-dark-bg.svg)을 그대로 사용했습니다. 원본은 Illustrator 편집 데이터가 포함된 225KB 파일이라, 화면에 그려지지 않는 PGF 페이로드만 제거하고 여백을 잘라낸 viewBox로 저장했습니다(각 3KB대). 벡터 형태·색상은 원본과 동일합니다.

SEO

• title / meta description — 각각 28자, 101자
• canonical, robots(max-image-preview:large), OG · Twitter 카드 (1200×630 썸네일 포함)
• JSON-LD @graph — Organization + WebSite + WebPage
• sitemap.xml — /about-us/ 하위 URL만 담고 있어 이 경로에 두어도 유효합니다
• llms.txt — AI 크롤러/LLM이 참조할 요약본. 아직 제안 단계 표준이라 실제 수집 여부는 보장되지 않지만, 페이지 내용이 바뀌면 함께 갱신해야 사실이 어긋나지 않습니다
• h1 1개, h2/h3 단계 건너뜀 없음
• 모든 이미지에 alt · width · height (CLS 방지), 폴드 아래 이미지는 loading="lazy"
• 폰트 CDN preconnect, 헤더 로고 preload

배포 후 할 일:

• Google Search Console · 네이버 서치어드바이저에 사이트 등록 후 https://k-devcon.web.app/about-us/sitemap.xml 제출
• (선택) k-devcon-firebase 쪽 public/robots.txt에 아래 한 줄 추가. robots.txt는 도메인 루트에만 둘 수 있어 이 저장소에서는 관리하지 않습니다 Sitemap: https://k-devcon.web.app/about-us/sitemap.xml
• 카카오톡·슬랙·링크드인에서 공유 썸네일 실제 노출 확인 (og-image.jpg는 배포 후에야 로드됨)
• k-devcon.com에서 이 페이지로 링크 연결