Education / Academy
노션+우피 학원 홈페이지 샘플
노션 기반 학원 재원생 전용 홈페이지. 우피 Pro 커스텀 CSS로 ablyads 수준 디자인 구현. 허브형 메인 + 카테고리별 서브 페이지 + 페이드인 애니메이션.
Education / Academy NotionOopy ProCustom CSSPretendard
CASE STUDY
프로젝트 스토리
과제
노션+우피 기본 스타일로는 전문적인 학원 브랜딩이 어려움. 클라이언트 요구 수준은 ablyads.com 급 완성도.
해결
우피 Pro 커스텀 CSS로 카드 그리드, 호버 인터랙션, 페이드인 애니메이션, 스티키 네비게이션 구현. Pretendard 웹폰트 + 브랜드 3색 팔레트 적용.
성과
CSS 변수 기반 템플릿화 완료. 브랜드 컬러 3개만 교체하면 다른 클라이언트에 즉시 재사용 가능한 구조.
주요 기능
- 허브형 메인 페이지: 카테고리별 바로가기 카드 (공지사항 / 공부법 / 가이드라인)
- 우피 Pro 커스텀 CSS: 카드 호버 효과, 페이드인 등장, 스티키 네비게이션
- 브랜드 일관성: 검정·주황·흰색 3색 팔레트 + Pretendard 타이포그래피
- 반응형: 768px 이하 모바일 최적화 (컬럼 → 세로 스택)
- 재원생 접근 제한: 공통 비밀번호 기반 비공개 페이지
기술 스택
- Notion: 콘텐츠 관리 (CMS 역할)
- Oopy Pro: 노션 → 웹사이트 변환 + 커스텀 도메인 + CSS 주입
- Custom CSS: 300줄, CSS 변수 기반 (재사용 템플릿화 완료)
- Pretendard Variable: 한국어 웹폰트