건양대학교 통합 홈페이지 — 메인화면 UI 설계서 (KRDS 준용) v1.0

목차 0. 개요 1. 디자인 원칙 2. 디자인 토큰 3. 그리드·레이아웃 4. 컴포넌트 정의 5. 메인 영역 명세 6. 접근성(KWCAG)7. 반응형 8. 부록·토큰코드

0개요

본 문서는 건양대학교 통합 홈페이지 메인화면의 UI 구현 기준을 정의합니다. 산출물 시안(건양대_메인화면_시안_KRDS_v1.0.html, 모바일/컬러변형안)과 함께 사용합니다.

준용 기준

KRDS 구조·컴포넌트·타이포·접근성. Primary 컬러만 건양 그린으로 테마잉.

IA 근거

벤치마킹 보고서 대표 7개 1차 메뉴 · 3Depth·MECE·모바일 퍼스트.

제약

브랜드 색상·교표 보존, GTM 유지, CMS 데이터 기반(하드코딩 금지).

⚠️ 본 설계서의 수치(취업률 등)·콘텐츠는 예시이며, 색 체계(2안 그린+네이비 권장)와 구조 변경은 발주처 협의·브랜드 가이드 확인 후 확정합니다.

1디자인 원칙

KRDS 3원칙

일관성 — 토큰·컴포넌트 재사용, 전 사이트 통일
접근성 — WCAG 2.2 AA / KWCAG 2.2 준수, 모두를 위한 설계
효율성 — 명확한 정보위계로 목적지 도달 최소 클릭

건양 적용 원칙

사용자 목적 기반 — 조직도 아닌 방문자 행동(I am) 동선
모바일 퍼스트 — 단일 반응형(별도 모바일 메뉴 폐지)
브랜드 보존 — 건양 그린 Primary 유지, 교표 변형 금지
데이터 기반 — 메뉴·뉴스·배너 CMS 관리(변동 대응)

2디자인 토큰

2-1. 색상 — Primary (건양 그린)

Primary Darker#003a22

Primary Strong#00512f

Primary ★#006940

Primary Light#08a87d

Primary 50#e6f2ec

Point(라임)#5fae27

2-2. 색상 — Secondary (네이비, 권장 2안) · System

Secondary 네이비#0b3b5e

Navy 50#e7f0fb

Success#228738

Warning#ffb114

Danger#de3412

Info#256ef4

2-3. 색상 — Gray Scale (KRDS 13단계)

100

텍스트 기본 gray-90 #1e2124 / 보조 gray-60 #58616a / 경계선 gray-10 #e6e8ea. 본문-배경 대비 4.5:1 이상(AA) 보장.

2-4. 타이포그래피

서체: Pretendard GOV(KRDS 권장, OFL) → 폴백 Pretendard, -apple-system, "Malgun Gothic", sans-serif. 라이선스 사전 승인 후 정식 적용.

역할(토큰)	크기(PC)	크기(모바일)	두께	줄간격	용도
Display	46px	30px	800	1.18	히어로 메인 카피
Heading 1	30px	24px	800	1.3	섹션 타이틀
Heading 2	24px	20px	800	1.3	카드 제목
Heading 3	18px	16px	700	1.4	소제목·메뉴
Body L	17px	16px	400~600	1.6	본문 강조
Body M	15px	14px	400	1.6	일반 본문·목록
Detail	13px	12px	400~700	1.5	캡션·메타·라벨

Display 46너의 꿈에 날개를 달다

Heading 1 30KYU News

Heading 3 18주요 바로가기

Body M 15실용 중심 교육과 90%대 취업 경쟁력.

Detail 132026.06.24 · 학사

2-5. 간격 · 모서리 · 그림자

Spacing 스케일

4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 (px). 섹션 상하 패딩 64px(PC) / 22px(모바일).

Radius

버튼/인풋 8px · 카드 16px · 칩/배지 999px · 아이콘박스 12~14px.

Shadow

기본 0 2px 8px rgba(0,0,0,.06) · 강조 0 8px 28px rgba(0,80,48,.12).

3그리드 · 레이아웃

항목	값	비고
컨테이너 최대폭	`1200px`	중앙 정렬
좌우 패딩	PC `24px` / 모바일 `16px`	safe-area 고려
그리드 컬럼	12 컬럼	거터 `24px`
주요 분할	히어로 `1fr / 340px`(I am) · 뉴스 `2fr / 1fr`	모바일 1열 스택
바로가기	PC 6열 · 태블릿 3열 · 모바일 4열(2행)	—

브레이크포인트

구분	범위	주요 변화
Desktop	≥ 1024px	GNB 가로형·메가메뉴, 멀티컬럼
Tablet	768~1023px	바로가기 3열, 일부 2열 스택
Mobile	≤ 767px	햄버거 드로어·하단 퀵내비, 전부 1열, 가로 스와이프

4컴포넌트 정의

4-1. 마스트헤드 / 헤더 / 유틸

컴포넌트	구성	규칙
식별 마스트헤드	gray-90 배경, 공식 식별 문구 + 유틸(총장실·포털·웹메일·명도조정)	높이 34px, 13px
헤더	로고 + 캠퍼스탭(메디컬/글로컬) + 언어(KO/EN) + 글자크기 + 로그인	`position:sticky`, 높이 78px
캠퍼스 탭	pill 토글, 선택시 Primary 배경	`aria-pressed`

건양대학교 공식 로고 공식 로고 자산 assets/konyang_logo.png(PC, 165×25) · assets/konyang_logo_mobile.png(모바일). 출처 konyang.ac.kr/images/kor/common/top_logo.png. 교표·로고 임의 변형 금지 — 원본 비율 유지, 어두운 배경에는 화이트/단색 반전본 별도 사용.

4-2. GNB + 메가메뉴

7개 1차 메뉴(대학소개·입학안내·교육·대학·연구·산학·대학생활·글로벌·라운지·KYU소식). hover/focus 시 7컬럼 메가패널 전개, Esc 닫기.

접근성: 마우스 hover뿐 아니라 키보드 focus로도 패널 오픈, 메뉴 항목은 <a> 링크, 패널은 3Depth 이내.

4-3. 버튼

종류	스타일	용도
Primary	Primary 배경 + 흰 글자, radius 8~999px	주요 행동(입학안내)
Secondary(Outline)	투명 + Primary 테두리	보조 행동(더보기)
Ghost(반전)	반투명 흰색(히어로 위)	이미지 배경 위
Icon	원형 42px, gray-5 배경	검색·글자크기

최소 터치 타깃 44×44px. 모든 버튼 :focus-visible 3px 포커스 링.

4-4. 검색바 · 카드 · 탭

통합검색바

범위 select + 입력 + 원형 검색버튼. 인기검색어 노출. role="search", label 제공.

카드(바로가기/뉴스/입학)

radius 14~16px, hover 시 상승+그림자. 입학=전형 3분할 카드, 뉴스=리스트형.

KYU News 탭

7탭(학사·장학·학생·취업·비교과·채용·일반). role="tablist", aria-selected.

I am 퀵메뉴

6유형(수험생·재학생·교직원·학부모·졸업생·유학생). PC 카드그리드 / 모바일 가로칩.

4-5. 푸터

정책 링크(개인정보처리방침·정보공개·웹접근성·사이트맵) + 기관정보(주소·대표전화) + KWCAG 인증 마크 + GTM-PPQZ9W3R 연동 표기.

항목	값
메디컬캠퍼스	(35365) 대전광역시 서구 관저동로 158
글로컬캠퍼스	(32992) 충청남도 논산시 대학로 121
대표전화 / 팩스	041-730-5114 / 041-733-2070

5메인화면 영역 명세

위→아래 섹션 순서·콘텐츠·데이터 소스(CMS 연동)·우선순위.

순서	영역	콘텐츠	데이터 소스
1	식별 마스트헤드	공식 식별 + 유틸 링크	정적
2	헤더 + GNB	로고·캠퍼스·언어·로그인 / 7메뉴 메가	CMS 메뉴관리
3	히어로 슬라이드	메인 비주얼 4~N장 + I am 퀵메뉴	CMS 배너관리
4	통합검색바	검색 범위 + 전공찾기 + 인기검색어	검색엔진 연동
5	주요 바로가기	증명·장학·학사일정·기숙사·취업·도서관	CMS 링크관리
6	KYU News	7탭 뉴스 + 학사일정 사이드	게시판(BBSMSTR 이관)
7	입학 바로가기	수시·정시·편입/외국인 3카드	입학처 연동
8	홍보 지표	취업률·캠퍼스·국책사업 등(예시)	CMS 수치관리
9	소통·패밀리	SNS 채널 + 부속 홈페이지 select	CMS 설정
10	푸터	정책·기관정보·인증·GTM	정적 + GTM

모든 반복 콘텐츠(메뉴·배너·뉴스·바로가기·지표)는 CMS 데이터 기반 — 학과 신설/폐지(데이터의학과 2027 등) 변동을 하드코딩 없이 대응.

6접근성 체크리스트 (KWCAG 2.2 / WCAG AA)

스킵 내비게이션(본문·주메뉴 바로가기) 제공
모든 이미지 alt, 장식 이미지 aria-hidden
본문 대비 4.5:1 이상, 큰 글자 3:1 이상
키보드만으로 전 기능 조작 가능(GNB·탭·드로어)
:focus-visible 3px 포커스 표시 일관 적용
슬라이드 정지/재생 컨트롤 제공(자동 움직임 제어)

제목 계층(h1→h2→h3) 논리적 구성
탭 role=tablist/tab, aria-selected 부여
폼 컨트롤 label 연결, 검색 role=search
터치 타깃 최소 44×44px, 충분한 간격
글자 크기 조정·고대비(명도조정) 기능 제공
다국어(KO/EN) lang 속성·언어 전환 명시

목표: 웹 접근성 품질인증(WA) 획득. 자동검사(접근성 검사도구) + 수동 검수(스크린리더·키보드) 병행.

7반응형 동작 명세

요소	Desktop	Mobile
주메뉴	가로 GNB + 메가패널	햄버거 → 전체메뉴 드로어(아코디언)
퀵내비	—	하단 고정 탭바(홈·입학·검색·학사·전체)
히어로	2분할(카피 + I am)	1열 스택, I am 가로 칩
뉴스/입학	멀티컬럼 / 3카드	1열 / 가로 스와이프 카드
검색	섹션 바 노출	헤더 하단 고정

현행 별도 모바일 메뉴 운영 폐지 → 단일 반응형으로 통합(유지보수 이중부담·콘텐츠 불일치 해소). 디자인 토큰은 PC·모바일 공유.

8부록 — CSS 변수 토큰 (구현 시작점)

:root{
  /* Primary : 건양 그린 (브랜드 보존) */
  --primary:#006940; --primary-strong:#00512f; --primary-darker:#003a22;
  --primary-light:#08a87d; --primary-50:#e6f2ec; --primary-10:#f3f9f6;
  --point:#5fae27; --point-soft:#eaf6e0;
  /* Secondary : 네이비 (권장 2안) */
  --secondary:#0b3b5e; --secondary-50:#e7f0fb;
  /* Gray (KRDS 13단계) */
  --g0:#fff; --g5:#f4f5f6; --g10:#e6e8ea; --g20:#cdd1d5; --g30:#b1b8be;
  --g40:#8a949e; --g50:#6d7882; --g60:#58616a; --g70:#464c53;
  --g80:#33363d; --g90:#1e2124; --g100:#131416;
  /* System */
  --success:#228738; --warning:#ffb114; --danger:#de3412; --info:#256ef4;
  /* 레이아웃·효과 */
  --radius:8px; --radius-lg:16px; --max:1200px; --focus:#1a51c4;
  --shadow:0 2px 8px rgba(0,0,0,.06);
  --shadow-lg:0 8px 28px rgba(0,80,48,.12);
}

※ 시안 3종은 동일 토큰 체계를 공유합니다. 컬러 최종안 확정 시 --primary/--secondary만 교체하면 전 컴포넌트 일괄 반영됩니다.